/* ============================================================
   NILPIS UNIFIED COMPONENTS v2.0 — February 2026
   
   Requires: nilpis-tokens.css loaded BEFORE this file.
   
   Add to every PHP page AFTER tokens:
   <link rel="stylesheet" href="css/nilpis-tokens.css">
   <link rel="stylesheet" href="css/nilpis-components.css">
   
   These classes match what your PHP already outputs.
   Where PHP uses different class names, the migration 
   guide (MIGRATION.md) maps old → new.
   ============================================================ */


/* ═══════════════════════════════════════════════════════════
   1. HEADER / TOP BAR
   Unified across customer, shop, and admin dashboards.
   ═══════════════════════════════════════════════════════════ */

.nl-header {
  background: var(--nl-gradient);
  padding: var(--nl-space-4) var(--nl-pad-mobile);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: var(--nl-z-header);
  backdrop-filter: blur(20px);
  box-shadow: var(--nl-shadow-header);
  min-height: var(--nl-header-h);
}

.nl-header-actions {
  display: flex;
  align-items: center;
  gap: var(--nl-space-2);
}

.nl-header-btn {
  position: relative;
  background: var(--nl-glass-btn);
  border: 1px solid var(--nl-glass-btn-border);
  border-radius: var(--nl-radius-md);
  width: 42px;
  height: 42px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nl-text-inverse);
  font-size: var(--nl-text-lg);
  transition: all var(--nl-ease);
}
.nl-header-btn:hover {
  background: rgba(255,255,255,0.2);
}

.nl-header-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--nl-badge-bg);
  color: white;
  font-size: var(--nl-text-xs);
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--nl-badge-border);
  animation: nl-pulse 2s infinite;
}

.nl-header-logo {
  color: white;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -1px;
  text-decoration: none;
}

.nl-header-avatar {
  width: 42px;
  height: 42px;
  border-radius: var(--nl-radius-md);
  background: linear-gradient(135deg, rgba(255,255,255,0.25), rgba(255,255,255,0.1));
  border: 2px solid rgba(255,255,255,0.3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--nl-text-md);
  font-weight: 700;
  color: white;
  overflow: hidden;
  transition: all var(--nl-ease);
}
.nl-header-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ═══════════════════════════════════════════════════════════
   2. HAMBURGER MENU BUTTON
   ═══════════════════════════════════════════════════════════ */

.nl-hamburger {
  background: var(--nl-glass-btn);
  border: 1px solid var(--nl-glass-btn-border);
  border-radius: var(--nl-radius-md);
  width: 42px;
  height: 42px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all var(--nl-ease);
}

.nl-hamburger-line {
  display: block;
  width: 20px;
  height: 2.5px;
  background: white;
  border-radius: 2px;
  transition: all var(--nl-ease-bounce);
}
.nl-hamburger-line:nth-child(2) { width: 16px; }
.nl-hamburger.open .nl-hamburger-line:nth-child(1) { transform: rotate(-45deg) translate(-4px, 5px); }
.nl-hamburger.open .nl-hamburger-line:nth-child(2) { transform: scaleX(0); opacity: 0; }
.nl-hamburger.open .nl-hamburger-line:nth-child(3) { transform: rotate(45deg) translate(-4px, -5px); }


/* ═══════════════════════════════════════════════════════════
   3. SIDEBAR NAVIGATION
   Shared by customer (desktop), shop, and admin.
   ═══════════════════════════════════════════════════════════ */

.nl-sidebar {
  width: var(--nl-sidebar-w);
  min-height: 100%;
  background: var(--nl-card);
  border-right: 1px solid var(--nl-border);
  padding: var(--nl-space-6) var(--nl-space-4);
  flex-shrink: 0;
  overflow-y: auto;
}

.nl-sidebar--admin {
  width: var(--nl-admin-sidebar-w);
}

.nl-sidebar-profile {
  text-align: center;
  margin-bottom: var(--nl-space-6);
  padding-bottom: var(--nl-space-5);
  border-bottom: 1px solid var(--nl-border);
}

.nl-sidebar-avatar {
  width: 70px;
  height: 70px;
  border-radius: var(--nl-radius-xl);
  background: var(--nl-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--nl-text-3xl);
  font-weight: 800;
  color: white;
  margin: 0 auto var(--nl-space-3);
  box-shadow: 0 6px 20px rgba(5,150,105,0.25);
  overflow: hidden;
}
.nl-sidebar-avatar img { width: 100%; height: 100%; object-fit: cover; }

.nl-nav-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--nl-space-3);
  padding: var(--nl-space-3) var(--nl-space-4);
  border-radius: var(--nl-radius-md);
  border: none;
  cursor: pointer;
  font-size: var(--nl-text-base);
  font-weight: 500;
  margin-bottom: var(--nl-space-1);
  transition: all var(--nl-ease);
  background: transparent;
  color: var(--nl-text-secondary);
  text-align: left;
  font-family: var(--nl-font);
  border-left: 3px solid transparent;
  text-decoration: none;
}
.nl-nav-item:hover {
  background: var(--nl-primary-ghost);
  color: var(--nl-text);
}
.nl-nav-item.active,
.nl-nav-item--active {
  background: var(--nl-primary-pale);
  color: var(--nl-primary);
  font-weight: 700;
  border-left-color: var(--nl-primary);
}

.nl-nav-item i,
.nl-nav-item .nav-icon {
  width: 20px;
  text-align: center;
  font-size: var(--nl-text-lg);
}

.nl-nav-badge {
  margin-left: auto;
  background: var(--nl-badge-bg);
  color: white;
  font-size: var(--nl-text-xs);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--nl-radius-sm);
}


/* ═══════════════════════════════════════════════════════════
   4. MOBILE DRAWER (slide-in menu)
   ═══════════════════════════════════════════════════════════ */

.nl-drawer-overlay {
  position: fixed;
  inset: 0;
  background: var(--nl-overlay);
  backdrop-filter: blur(4px);
  z-index: var(--nl-z-drawer);
  animation: nl-fadeIn 0.2s ease;
}

.nl-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 100%;
  background: var(--nl-card);
  box-shadow: 8px 0 32px rgba(0,0,0,0.15);
  padding: var(--nl-space-6) var(--nl-space-4);
  overflow-y: auto;
  z-index: var(--nl-z-drawer);
  animation: nl-slideInLeft 0.3s ease;
}


/* ═══════════════════════════════════════════════════════════
   5. BOTTOM TAB BAR (Customer mobile)
   ═══════════════════════════════════════════════════════════ */

.nl-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--nl-tab-bar-h);
  background: var(--nl-card);
  border-top: 1px solid var(--nl-border);
  display: flex;
  align-items: center;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.05);
  z-index: var(--nl-z-header);
  backdrop-filter: blur(20px);
}

.nl-tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  padding: var(--nl-space-2) 0;
  font-family: var(--nl-font);
  text-decoration: none;
}

.nl-tab-icon {
  font-size: var(--nl-text-xl);
  transition: all var(--nl-ease-bounce);
}
.nl-tab-item.active .nl-tab-icon { transform: scale(1.15); }

.nl-tab-label {
  font-size: var(--nl-text-xs);
  font-weight: 500;
  color: var(--nl-text-muted);
  transition: all var(--nl-ease);
}
.nl-tab-item.active .nl-tab-label {
  font-weight: 700;
  color: var(--nl-primary);
}

.nl-tab-indicator {
  position: absolute;
  bottom: 4px;
  width: 20px;
  height: 3px;
  border-radius: 2px;
  background: var(--nl-gradient);
}


/* ═══════════════════════════════════════════════════════════
   6. CARDS
   ═══════════════════════════════════════════════════════════ */

.nl-card {
  background: var(--nl-card);
  border: 1px solid var(--nl-border);
  border-radius: var(--nl-radius-lg);
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
}
.nl-card:hover {
  box-shadow: var(--nl-shadow-sm);
}
.nl-card--clickable { cursor: pointer; }
.nl-card--clickable:hover {
  transform: translateY(-2px);
  box-shadow: var(--nl-shadow-md);
}

/* Stat Card (dashboard summary) */
.nl-stat-card {
  background: var(--nl-card);
  border: 1px solid var(--nl-border);
  border-radius: var(--nl-radius-lg);
  padding: var(--nl-space-5);
  position: relative;
  overflow: hidden;
}

/* Admin stat cards: full gradient background */
.nl-stat-card--gradient {
  background: var(--nl-gradient);
  border: none;
  color: white;
}
.nl-stat-card--gradient .nl-stat-label,
.nl-stat-card--gradient .nl-stat-value,
.nl-stat-card--gradient .nl-stat-trend { color: white; }

.nl-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--nl-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--nl-text-xl);
  margin-bottom: var(--nl-space-3);
}
.nl-stat-icon--green { background: var(--nl-primary-pale); color: var(--nl-primary); }
.nl-stat-icon--blue  { background: var(--nl-info-bg); color: var(--nl-info); }
.nl-stat-icon--gold  { background: var(--nl-gold-bg); color: var(--nl-gold); }
.nl-stat-icon--white { background: rgba(255,255,255,0.2); color: white; }

.nl-stat-value {
  font-size: var(--nl-text-2xl);
  font-weight: 800;
  color: var(--nl-text);
  line-height: 1.2;
}
.nl-stat-label {
  font-size: var(--nl-text-sm);
  color: var(--nl-text-muted);
  margin-top: var(--nl-space-1);
}
.nl-stat-trend {
  font-size: var(--nl-text-sm);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--nl-space-2);
}
.nl-stat-trend--up { color: var(--nl-success); }
.nl-stat-trend--down { color: var(--nl-danger); }

/* Shop stat card: top accent bar variant */
.nl-stat-card--accent::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--nl-gradient);
  border-radius: var(--nl-radius-lg) var(--nl-radius-lg) 0 0;
}


/* ═══════════════════════════════════════════════════════════
   7. BUTTONS
   ═══════════════════════════════════════════════════════════ */

.nl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nl-space-2);
  font-family: var(--nl-font);
  font-size: var(--nl-text-base);
  font-weight: 600;
  padding: var(--nl-space-3) var(--nl-space-5);
  border-radius: var(--nl-radius-md);
  border: none;
  cursor: pointer;
  transition: all var(--nl-ease);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}
.nl-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.nl-btn--primary {
  background: var(--nl-gradient);
  color: white;
  box-shadow: var(--nl-shadow-green);
}
.nl-btn--primary:hover:not(:disabled) {
  background: var(--nl-gradient-hover);
  box-shadow: var(--nl-shadow-green-lg);
  transform: translateY(-1px);
}

.nl-btn--secondary {
  background: var(--nl-card);
  color: var(--nl-text);
  border: 1px solid var(--nl-border);
}
.nl-btn--secondary:hover:not(:disabled) {
  background: var(--nl-bg-secondary);
  border-color: var(--nl-primary);
}

.nl-btn--outline {
  background: transparent;
  color: var(--nl-primary);
  border: 2px solid var(--nl-primary);
}
.nl-btn--outline:hover:not(:disabled) {
  background: var(--nl-primary-pale);
}

.nl-btn--ghost {
  background: transparent;
  color: var(--nl-primary);
  border: none;
}
.nl-btn--ghost:hover:not(:disabled) {
  background: var(--nl-primary-ghost);
}

.nl-btn--danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.nl-btn--sm { font-size: var(--nl-text-sm); padding: var(--nl-space-2) var(--nl-space-3); border-radius: var(--nl-radius-sm); }
.nl-btn--lg { font-size: var(--nl-text-md); padding: var(--nl-space-4) var(--nl-space-6); border-radius: var(--nl-radius-lg); }
.nl-btn--full { width: 100%; }
.nl-btn--icon { width: 42px; height: 42px; padding: 0; }
.nl-btn--icon-sm { width: 36px; height: 36px; padding: 0; font-size: var(--nl-text-sm); }


/* ═══════════════════════════════════════════════════════════
   8. FORM INPUTS
   ═══════════════════════════════════════════════════════════ */

.nl-input,
.nl-select,
.nl-textarea {
  width: 100%;
  padding: var(--nl-space-3) var(--nl-space-4);
  border: 1px solid var(--nl-input-border);
  border-radius: var(--nl-radius-sm);
  background: var(--nl-input-bg);
  font-family: var(--nl-font);
  font-size: var(--nl-text-base);
  color: var(--nl-text);
  outline: none;
  transition: all var(--nl-ease);
}
.nl-input:focus,
.nl-select:focus,
.nl-textarea:focus {
  border-color: var(--nl-input-focus-border);
  background: var(--nl-input-focus-bg);
  box-shadow: 0 0 0 3px rgba(5,150,105,0.1);
}
.nl-input::placeholder,
.nl-textarea::placeholder {
  color: var(--nl-text-muted);
}
.nl-input--error { border-color: var(--nl-danger); }
.nl-input--error:focus { box-shadow: 0 0 0 3px rgba(239,68,68,0.1); }

/* Search Input */
.nl-search {
  position: relative;
}
.nl-search .nl-input {
  padding: var(--nl-space-3) var(--nl-space-12) var(--nl-space-3) var(--nl-space-4);
  border-radius: var(--nl-radius-lg);
  border-width: 2px;
}
.nl-search-icon {
  position: absolute;
  right: var(--nl-space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--nl-text-muted);
  font-size: var(--nl-text-lg);
  pointer-events: none;
}

/* Label */
.nl-label {
  display: block;
  font-size: var(--nl-text-sm);
  font-weight: 600;
  color: var(--nl-text-secondary);
  margin-bottom: var(--nl-space-2);
}

/* Helper text */
.nl-helper { font-size: var(--nl-text-xs); color: var(--nl-text-muted); margin-top: var(--nl-space-1); }
.nl-helper--error { color: var(--nl-danger); }


/* ═══════════════════════════════════════════════════════════
   9. TOGGLE SWITCH
   ═══════════════════════════════════════════════════════════ */

.nl-toggle {
  width: var(--nl-toggle-w);
  height: var(--nl-toggle-h);
  border-radius: 13px;
  background: var(--nl-toggle-off);
  cursor: pointer;
  position: relative;
  transition: all var(--nl-ease-smooth);
  flex-shrink: 0;
  border: none;
}
.nl-toggle.on,
.nl-toggle--on {
  background: var(--nl-gradient);
}

.nl-toggle-knob {
  width: var(--nl-toggle-knob);
  height: var(--nl-toggle-knob);
  border-radius: 50%;
  background: white;
  position: absolute;
  top: 3px;
  left: 3px;
  transition: all var(--nl-ease-bounce);
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.nl-toggle.on .nl-toggle-knob,
.nl-toggle--on .nl-toggle-knob {
  left: 25px;
}


/* ═══════════════════════════════════════════════════════════
   10. BADGES & PILLS
   ═══════════════════════════════════════════════════════════ */

.nl-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--nl-text-xs);
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--nl-radius-sm);
  text-transform: capitalize;
  white-space: nowrap;
}

.nl-badge--success { color: var(--nl-success); background: var(--nl-success-bg); }
.nl-badge--warning { color: var(--nl-warning); background: var(--nl-warning-bg); }
.nl-badge--danger  { color: var(--nl-danger);  background: var(--nl-danger-bg); }
.nl-badge--info    { color: var(--nl-info);    background: var(--nl-info-bg); }
.nl-badge--primary { color: var(--nl-primary); background: var(--nl-primary-pale); }

/* Role badges */
.nl-badge--admin    { color: var(--nl-role-admin);    background: var(--nl-role-admin-bg); }
.nl-badge--shop     { color: var(--nl-role-shop);     background: var(--nl-role-shop-bg); }
.nl-badge--customer { color: var(--nl-role-customer); background: var(--nl-role-customer-bg); }

/* Filter pills */
.nl-pill {
  padding: var(--nl-space-2) var(--nl-space-5);
  border-radius: var(--nl-radius-xl);
  border: none;
  font-size: var(--nl-text-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--nl-ease);
  background: var(--nl-bg-secondary);
  color: var(--nl-text-secondary);
  font-family: var(--nl-font);
}
.nl-pill.active,
.nl-pill--active {
  background: var(--nl-gradient);
  color: white;
  box-shadow: var(--nl-shadow-green);
}

/* Token badge */
.nl-token-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--nl-gold-bg);
  padding: 6px 14px;
  border-radius: var(--nl-radius-xl);
  border: 1px solid var(--nl-gold-border);
}
.nl-token-amount {
  font-size: 13px;
  font-weight: 700;
  color: var(--nl-gold);
  filter: drop-shadow(0 0 4px rgba(251,191,36,0.4));
}


/* ═══════════════════════════════════════════════════════════
   11. TABLES
   ═══════════════════════════════════════════════════════════ */

.nl-table {
  width: 100%;
  border-collapse: collapse;
}
.nl-table thead {
  background: linear-gradient(135deg, var(--nl-bg-secondary), var(--nl-border-light));
  border-bottom: 2px solid var(--nl-border);
}
.nl-table th {
  font-size: var(--nl-text-sm);
  font-weight: 600;
  color: var(--nl-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: var(--nl-space-3) var(--nl-space-4);
  text-align: left;
}
.nl-table td {
  padding: var(--nl-space-3) var(--nl-space-4);
  border-bottom: 1px solid var(--nl-border-light);
  font-size: var(--nl-text-base);
  color: var(--nl-text);
}
.nl-table tr:hover td {
  background: var(--nl-primary-ghost);
}

/* Mobile card fallback for tables */
@media (max-width: 768px) {
  .nl-table--responsive thead { display: none; }
  .nl-table--responsive tr {
    display: block;
    background: var(--nl-card);
    border: 1px solid var(--nl-border);
    border-radius: var(--nl-radius-lg);
    padding: var(--nl-space-4);
    margin-bottom: var(--nl-space-3);
  }
  .nl-table--responsive td {
    display: flex;
    justify-content: space-between;
    padding: var(--nl-space-2) 0;
    border-bottom: 1px solid var(--nl-border-light);
  }
  .nl-table--responsive td:last-child { border-bottom: none; }
  .nl-table--responsive td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--nl-text-secondary);
    font-size: var(--nl-text-sm);
  }
}


/* ═══════════════════════════════════════════════════════════
   12. MODALS & OVERLAYS
   ═══════════════════════════════════════════════════════════ */

.nl-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--nl-overlay);
  backdrop-filter: blur(4px);
  z-index: var(--nl-z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  animation: nl-fadeIn 0.2s ease;
}

.nl-modal-overlay.show {
  display: flex;
}

.nl-modal {
  width: 90%;
  max-width: 480px;
  background: var(--nl-card);
  border-radius: var(--nl-radius-xl);
  overflow: hidden;
  box-shadow: var(--nl-shadow-xl);
  animation: nl-modalSlideIn var(--nl-ease-modal);
}

.nl-modal-header {
  background: var(--nl-gradient);
  padding: var(--nl-space-6) var(--nl-space-5);
  color: white;
  text-align: center;
}

.nl-modal-body {
  padding: var(--nl-space-5);
}

.nl-modal-footer {
  padding: var(--nl-space-4) var(--nl-space-5);
  border-top: 1px solid var(--nl-border);
  display: flex;
  gap: var(--nl-space-3);
  justify-content: flex-end;
}

.nl-modal-close {
  position: absolute;
  top: var(--nl-space-4);
  right: var(--nl-space-4);
  background: rgba(255,255,255,0.2);
  border: none;
  border-radius: var(--nl-radius-sm);
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: var(--nl-text-md);
}


/* ═══════════════════════════════════════════════════════════
   13. TOAST NOTIFICATIONS
   ═══════════════════════════════════════════════════════════ */

.nl-toast {
  position: fixed;
  top: var(--nl-space-5);
  right: var(--nl-space-5);
  background: var(--nl-card);
  border: 1px solid var(--nl-border);
  border-radius: var(--nl-radius-lg);
  padding: var(--nl-space-4);
  box-shadow: var(--nl-shadow-lg);
  z-index: var(--nl-z-toast);
  animation: nl-fadeInDown 0.3s ease;
  display: flex;
  align-items: flex-start;
  gap: var(--nl-space-3);
  max-width: 380px;
  overflow: hidden;
}
.nl-toast--success { border-left: 4px solid var(--nl-success); }
.nl-toast--warning { border-left: 4px solid var(--nl-warning); }
.nl-toast--danger  { border-left: 4px solid var(--nl-danger); }
.nl-toast--info    { border-left: 4px solid var(--nl-info); }

.nl-toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--nl-primary);
  animation: nl-toastProgress 5s linear forwards;
}


/* ═══════════════════════════════════════════════════════════
   14. ALERT BANNER
   ═══════════════════════════════════════════════════════════ */

.nl-alert {
  padding: var(--nl-space-4);
  border-radius: var(--nl-radius-lg);
  border: 1px solid var(--nl-border);
  display: flex;
  align-items: center;
  gap: var(--nl-space-3);
}
.nl-alert--warning {
  background: #fff8e1;
  border-color: #ffecb3;
  border-left: 4px solid var(--nl-warning);
}
.nl-alert--danger {
  background: var(--nl-danger-bg);
  border-color: var(--nl-danger);
  border-left: 4px solid var(--nl-danger);
}
.nl-alert--info {
  background: var(--nl-info-bg);
  border-color: var(--nl-info);
  border-left: 4px solid var(--nl-info);
}


/* ═══════════════════════════════════════════════════════════
   15. HOLD CARD
   ═══════════════════════════════════════════════════════════ */

.nl-hold-card {
  background: var(--nl-card);
  border-radius: var(--nl-radius-lg);
  padding: var(--nl-space-4);
  border: 1px solid var(--nl-border);
  display: flex;
  gap: 14px;
  transition: all 0.25s;
}
.nl-hold-card--approved { border-left: 4px solid var(--nl-success); }
.nl-hold-card--pending  { border-left: 4px solid var(--nl-warning); }
.nl-hold-card--rejected { border-left: 4px solid var(--nl-danger); }

.nl-hold-img {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--nl-bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--nl-text-3xl);
  flex-shrink: 0;
  overflow: hidden;
}
.nl-hold-img img { width: 100%; height: 100%; object-fit: cover; }

.nl-hold-timer {
  font-size: 11px;
  font-weight: 700;
  color: white;
  padding: 4px 10px;
  border-radius: var(--nl-radius-sm);
  white-space: nowrap;
}
.nl-hold-timer--safe   { background: var(--nl-gradient); }
.nl-hold-timer--urgent { background: linear-gradient(135deg, #ef4444, #dc2626); }


/* ═══════════════════════════════════════════════════════════
   16. PRODUCT CARD
   ═══════════════════════════════════════════════════════════ */

.nl-product-card {
  background: var(--nl-card);
  border-radius: var(--nl-radius-lg);
  overflow: hidden;
  border: 1px solid var(--nl-border);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
}
.nl-product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--nl-shadow-md);
}

.nl-product-img {
  position: relative;
  padding-bottom: 100%;
  background: var(--nl-bg-secondary);
}
.nl-product-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nl-product-price {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--nl-gradient);
  color: white;
  font-size: var(--nl-text-sm);
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 10px;
  box-shadow: var(--nl-shadow-green);
}

.nl-product-body {
  padding: var(--nl-space-3) 14px 14px;
}

.nl-product-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ═══════════════════════════════════════════════════════════
   17. SKELETON / LOADING STATES
   ═══════════════════════════════════════════════════════════ */

.nl-skeleton {
  background: linear-gradient(90deg, var(--nl-bg-secondary) 25%, var(--nl-border-light) 50%, var(--nl-bg-secondary) 75%);
  background-size: 200% 100%;
  animation: nl-shimmer 1.5s infinite;
  border-radius: var(--nl-radius-sm);
}

.nl-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--nl-border);
  border-top-color: var(--nl-primary);
  border-radius: 50%;
  animation: nl-spin 0.6s linear infinite;
}
.nl-spinner--sm { width: 16px; height: 16px; border-width: 2px; }
.nl-spinner--lg { width: 40px; height: 40px; border-width: 4px; }


/* ═══════════════════════════════════════════════════════════
   18. EMPTY STATES
   ═══════════════════════════════════════════════════════════ */

.nl-empty {
  text-align: center;
  padding: var(--nl-space-10) var(--nl-space-5);
}
.nl-empty-icon {
  font-size: 48px;
  margin-bottom: var(--nl-space-4);
  opacity: 0.5;
}
.nl-empty-title {
  font-size: var(--nl-text-md);
  font-weight: 700;
  margin-bottom: var(--nl-space-2);
}
.nl-empty-desc {
  font-size: var(--nl-text-base);
  color: var(--nl-text-muted);
  margin-bottom: var(--nl-space-5);
}


/* ═══════════════════════════════════════════════════════════
   19. UTILITY CLASSES
   ═══════════════════════════════════════════════════════════ */

.nl-text-primary { color: var(--nl-primary); }
.nl-text-muted   { color: var(--nl-text-muted); }
.nl-text-danger  { color: var(--nl-danger); }
.nl-text-gold    { color: var(--nl-gold); }
.nl-text-sm      { font-size: var(--nl-text-sm); }
.nl-text-xs      { font-size: var(--nl-text-xs); }
.nl-text-bold    { font-weight: 700; }
.nl-text-center  { text-align: center; }
.nl-uppercase    { text-transform: uppercase; letter-spacing: 0.5px; }
.nl-mono         { font-family: var(--nl-font-mono); }

.nl-flex   { display: flex; }
.nl-grid   { display: grid; }
.nl-gap-2  { gap: var(--nl-space-2); }
.nl-gap-3  { gap: var(--nl-space-3); }
.nl-gap-4  { gap: var(--nl-space-4); }

.nl-animate-in { animation: nl-fadeInUp 0.4s ease both; }
.nl-animate-fade { animation: nl-fadeIn 0.2s ease; }


/* ═══════════════════════════════════════════════════════════
   20. RESPONSIVE HELPERS
   ═══════════════════════════════════════════════════════════ */

@media (min-width: 769px) {
  .nl-header { padding: var(--nl-space-4) var(--nl-pad-desktop); }
  .nl-mobile-only { display: none !important; }
}

@media (max-width: 768px) {
  .nl-desktop-only { display: none !important; }
  body { padding-bottom: var(--nl-tab-bar-h); }
}

/* Grid layouts */
.nl-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--nl-space-3); }
.nl-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--nl-space-3); }
@media (max-width: 768px) {
  .nl-grid-3 { grid-template-columns: repeat(2, 1fr); }
}