/* Extracted from marketplace.html */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; }
    body {
      font-family: var(--font-body); font-size: var(--text-body-sm);
      background: var(--color-bg-base); color: var(--color-text-primary);
      min-height: 100vh; display: flex; flex-direction: column;
    }

    /* ── Page header ── */
    .page-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: var(--space-4) var(--space-6);
      background: var(--glass-bg-strong); backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--glass-border);
    }
    .page-title {
      font-family: var(--font-heading); font-size: var(--text-h4);
      font-weight: var(--heading-weight-primary); color: var(--color-text-accent);
      text-transform: uppercase; letter-spacing: var(--tracking-wide);
    }
    .page-title::before { content: '// '; opacity: 0.5; font-family: var(--font-mono); }
    .user-role {
      font-family: var(--font-mono); font-size: var(--text-caption);
      color: var(--color-text-muted); text-transform: uppercase;
      letter-spacing: var(--tracking-widest);
      padding: var(--space-1) var(--space-3);
      border: 1px dashed var(--glass-border); border-radius: var(--radius-sm);
    }

    /* ── Tab bar ── */
    .tab-bar {
      display: flex; gap: var(--space-1);
      padding: 0 var(--space-6); background: var(--color-bg-base);
      border-bottom: 1px solid var(--color-border);
    }
    .tab-btn {
      background: transparent; border: none;
      padding: var(--space-3) var(--space-5);
      color: var(--color-text-muted); cursor: pointer;
      font-family: var(--font-body); font-size: var(--text-body-sm);
      font-weight: var(--font-weight-semibold);
      border-bottom: 2px solid transparent;
      transition: all 0.2s ease;
    }
    .tab-btn:hover { color: var(--color-text-accent); }
    .tab-btn.active {
      color: var(--color-text-accent);
      border-bottom-color: var(--color-primary);
    }
    .tab-panel { display: none; padding: var(--space-6); flex: 1; overflow-y: auto; }
    .tab-panel.active { display: block; }

    /* ── Search bar ── */
    .search-row {
      display: flex; gap: var(--space-3); margin-bottom: var(--space-5);
      flex-wrap: wrap;
    }
    .search-row input {
      flex: 1; min-width: 240px;
      padding: var(--space-3) var(--space-4);
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      color: var(--color-text-primary);
      font-family: var(--font-body); font-size: var(--text-body);
      border-radius: var(--radius-md);
    }
    .search-row button {
      padding: var(--space-3) var(--space-6);
      background: var(--gradient-accent); color: var(--btn-primary-text);
      border: none; border-radius: var(--radius-md);
      font-weight: var(--font-weight-semibold); cursor: pointer;
    }

    /* ── Results table/grid ── */
    .results-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: var(--space-4);
    }
    .part-card {
      background: var(--glass-bg); backdrop-filter: blur(12px);
      border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
      padding: var(--space-4); cursor: pointer;
      transition: all 0.25s ease;
    }
    .part-card:hover {
      border-color: var(--color-border-accent);
      box-shadow: 0 4px 20px var(--glow-color-soft);
      transform: translateY(-2px);
    }
    .part-card__oem {
      font-family: var(--font-mono); font-size: var(--text-caption);
      color: var(--color-text-accent); font-weight: var(--font-weight-bold);
    }
    .part-card__name {
      font-size: var(--text-body); font-weight: var(--font-weight-semibold);
      margin-top: var(--space-1);
    }
    .part-card__meta {
      display: flex; justify-content: space-between; align-items: center;
      margin-top: var(--space-3); padding-top: var(--space-3);
      border-top: 1px dashed var(--glass-border);
      font-size: var(--text-caption);
    }
    .price-range {
      font-family: var(--font-mono); color: var(--color-text-accent);
      font-weight: var(--font-weight-bold);
    }
    .bodega-count {
      color: var(--color-text-muted);
    }
    .stock-pill {
      display: inline-block; padding: 2px 8px;
      background: rgba(63,185,80,0.15); color: #3FB950;
      border: 1px solid rgba(63,185,80,0.3);
      border-radius: var(--radius-full);
      font-size: 11px; font-weight: var(--font-weight-bold);
    }

    /* ── PO list table ── */
    .po-table {
      width: 100%; border-collapse: collapse;
      background: var(--glass-bg); backdrop-filter: blur(12px);
      border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
      overflow: hidden;
    }
    .po-table th, .po-table td {
      padding: var(--space-3) var(--space-4);
      text-align: left;
      border-bottom: 1px solid var(--glass-border);
    }
    .po-table th {
      background: var(--glass-bg-strong);
      font-family: var(--font-mono); font-size: var(--text-caption);
      text-transform: uppercase; letter-spacing: var(--tracking-widest);
      color: var(--color-text-muted);
    }
    .po-table tbody tr { cursor: pointer; transition: background 0.15s; }
    .po-table tbody tr:hover { background: var(--glass-highlight); }

    /* ── Status badges ── */
    .status-badge {
      display: inline-block; padding: 2px 10px; border-radius: var(--radius-full);
      font-size: 11px; font-weight: var(--font-weight-bold);
      text-transform: uppercase; letter-spacing: var(--tracking-wider);
    }
    .status-draft     { background: rgba(130,130,130,0.2); color: #888; }
    .status-submitted { background: rgba(245,166,35,0.15); color: #F5A623; border: 1px solid rgba(245,166,35,0.3); }
    .status-confirmed { background: rgba(0,212,255,0.15); color: #00D4FF; border: 1px solid rgba(0,212,255,0.3); }
    .status-ready     { background: rgba(167,139,250,0.15); color: #A78BFA; border: 1px solid rgba(167,139,250,0.3); }
    .status-delivered { background: rgba(63,185,80,0.15); color: #3FB950; border: 1px solid rgba(63,185,80,0.3); }
    .status-closed    { background: rgba(255,255,255,0.05); color: #888; }
    .status-rejected  { background: rgba(248,81,73,0.15); color: #F85149; border: 1px solid rgba(248,81,73,0.3); }

    /* ── Modals ── */
    .modal-overlay {
      display: none; position: fixed; inset: 0; z-index: 1000;
      background: var(--overlay-backdrop); backdrop-filter: blur(4px);
      align-items: flex-start; justify-content: center;
      padding: var(--space-8) var(--space-4); overflow-y: auto;
    }
    .modal-overlay.open { display: flex; }
    .modal-content {
      background: var(--glass-bg-strong); backdrop-filter: blur(24px);
      border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
      max-width: 700px; width: 100%;
      padding: var(--space-6); position: relative;
    }
    .modal-close {
      position: absolute; top: var(--space-3); right: var(--space-3);
      background: none; border: none; color: var(--color-text-muted);
      font-size: 1.4rem; cursor: pointer;
    }
    .modal-title {
      font-family: var(--font-heading); font-size: var(--text-h5);
      margin-bottom: var(--space-4);
    }

    .empty-state {
      text-align: center; padding: var(--space-12);
      color: var(--color-text-muted);
    }
    .empty-state h3 { margin-bottom: var(--space-2); font-family: var(--font-heading); }

    /* ── CSV upload box ── */
    .upload-box {
      background: var(--glass-bg); border: 1px dashed var(--glass-border);
      border-radius: var(--radius-lg); padding: var(--space-5);
      margin-bottom: var(--space-5);
    }
    .upload-box label {
      display: block; margin-bottom: var(--space-2); font-weight: var(--font-weight-semibold);
    }
    .upload-box textarea {
      width: 100%; height: 160px;
      padding: var(--space-3); font-family: var(--font-mono); font-size: 12px;
      background: var(--glass-bg); border: 1px solid var(--glass-border);
      color: var(--color-text-primary); border-radius: var(--radius-md);
      resize: vertical;
    }
    .upload-box .hint {
      font-size: var(--text-caption); color: var(--color-text-muted);
      margin-top: var(--space-1);
    }

    /* Item list inside the create-PO modal */
    .cart-items {
      border: 1px solid var(--glass-border); border-radius: var(--radius-md);
      margin: var(--space-3) 0;
      max-height: 260px; overflow-y: auto;
    }
    .cart-row {
      display: flex; gap: var(--space-3); align-items: center;
      padding: var(--space-2) var(--space-3);
      border-bottom: 1px solid var(--glass-border);
    }
    .cart-row:last-child { border-bottom: none; }
    .cart-row input[type="number"] { width: 70px; }
    .cart-row .remove-btn {
      background: none; border: none; color: #F85149; cursor: pointer;
      font-size: 1.2rem;
    }
