/* 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;
}