/* ==============================================================
   SpareX - Card UI System
   Card/pill/panel language adapted from Tadfeen Trust's admin panel
   ============================================================== */

:root {
    --card-bg: #161b22;
    --card-line: #30363d;
    --card-radius: 16px;
    --steel: #58a6ff;
    --steel-bg: rgba(88,166,255,0.12);
    --amber: #f0a500;
    --amber-bg: rgba(240,165,0,0.12);
    --green: #3fb950;
    --green-bg: rgba(63,185,80,0.12);
    --red: #f85149;
    --red-bg: rgba(248,81,73,0.12);
    --muted: #8b949e;
}

/* ---------- Generic form page (vendor registration, etc.) ---------- */
.form-page { display:flex; justify-content:center; padding:30px 16px; }
.form-card { background:var(--card-bg); border:1px solid var(--card-line); border-radius:var(--card-radius); padding:28px 22px; width:100%; max-width:480px; }
.form-card h1 { margin:0 0 6px; font-size:1.3rem; }
.form-card label { display:block; font-size:0.85rem; margin-bottom:6px; color:var(--muted); margin-top:14px; }
.form-card input[type=text], .form-card input[type=file], .form-card input[type=number], .form-card textarea, .form-card select {
    width:100%; padding:11px 12px; border-radius:8px; border:1px solid var(--card-line);
    background:#0d1117; color:#e6edf3; font-size:0.95rem; font-family:inherit;
}
.form-card textarea { resize:vertical; }
.form-card .required { color:var(--red); font-size:0.75rem; }
.form-card .optional { color:var(--muted); font-size:0.75rem; }
.field-hint { font-size:0.78rem; color:var(--muted); margin:6px 0 0; }
.form-card button { margin-top:22px; width:100%; padding:12px; border:none; border-radius:8px; background:var(--amber); color:#0d1117; font-weight:700; font-size:1rem; cursor:pointer; }

/* ---------- Dashboard shell ---------- */
.dash-page { padding:20px 16px; max-width:1100px; margin:0 auto; }

/* ---------- Status banner (vendor's own shop state) ---------- */
.status-banner { border-radius:var(--card-radius); padding:22px; margin-bottom:22px; border:1px solid var(--card-line); background:var(--card-bg); }
.status-banner h2 { margin:0 0 10px; }
.status-title { font-weight:700; font-size:1rem; margin:0 0 4px; }
.status-pending .status-title { color:var(--amber); }
.status-approved .status-title { color:var(--green); }
.status-rejected .status-title, .status-suspended .status-title { color:var(--red); }
.status-frozen .status-title { color:var(--steel); }

/* ---------- Card grid (dashboards) ---------- */
.card-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:14px; }
.dash-card { display:block; background:var(--card-bg); border:1px solid var(--card-line); border-radius:var(--card-radius); padding:20px 16px; color:#e6edf3; }
.dash-card-icon { font-size:1.6rem; }
.dash-card h3 { margin:10px 0 4px; font-size:1rem; }
.dash-card p { margin:0; font-size:0.8rem; color:var(--muted); }

/* ---------- Admin stat cards ---------- */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:14px; margin-bottom:22px; }
.stat-card { background:var(--card-bg); border:1px solid var(--card-line); border-radius:var(--card-radius); padding:16px 18px; }
.stat-card .stat-icon { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; background:var(--steel-bg); color:var(--steel); margin-bottom:10px; }
.stat-card b { display:block; font-size:1.5rem; line-height:1.1; }
.stat-card span { font-size:0.78rem; color:var(--muted); }

/* ---------- Section title ---------- */
.section-title { font-size:0.95rem; font-weight:700; margin:26px 0 12px; color:#e6edf3; }
.section-fold { margin: 26px 0 12px; }
.section-fold summary.section-title { margin: 0; cursor: pointer; list-style: none; }
.section-fold summary.section-title::-webkit-details-marker { display: none; }
.section-fold summary.section-title::before { content: '▸ '; color: var(--amber); }
.section-fold[open] summary.section-title::before { content: '▾ '; }

/* ---------- Pill badges ---------- */
.pill { display:inline-block; font-size:0.7rem; font-weight:700; padding:3px 10px; border-radius:20px; text-transform:capitalize; }
.pill.pending { background:var(--amber-bg); color:var(--amber); }
.pill.approved { background:var(--green-bg); color:var(--green); }
.pill.rejected, .pill.suspended { background:var(--red-bg); color:var(--red); }
.pill.frozen { background:var(--steel-bg); color:var(--steel); }

/* ---------- Vendor shop cards (admin management) ---------- */
.shop-card { background:var(--card-bg); border:1px solid var(--card-line); border-radius:var(--card-radius); padding:18px; margin-bottom:14px; }
.shop-card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.shop-card-top h3 { margin:0; font-size:1.05rem; }

/* ---- Contact Info & Social Links (Admin > Controls) ---- */
.cs-saved-note { display:inline-block; background:#153626; border:1px solid #2f8056; color:#7fe0a4; font-size:0.8rem; padding:6px 14px; border-radius:20px; margin:10px 0 4px; }
.cs-form { margin-top:14px; }
.cs-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.cs-col h4 { margin:0 0 12px; font-size:0.85rem; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-muted); }
.cs-col h4 .optional { text-transform:none; letter-spacing:0; font-weight:400; }
.cs-field { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.cs-field .icon { width:18px; height:18px; flex-shrink:0; color:var(--amber); }
.cs-field > span:not(.optional) { width:78px; flex-shrink:0; font-size:0.82rem; color:var(--text-muted); }
.cs-field input { flex:1; min-width:0; padding:9px 12px; font-size:0.85rem; border-radius:8px; border:1px solid var(--card-line); background:var(--card-bg); color:#e6edf3; font-family:inherit; }
.cs-field input:focus { outline:none; border-color:var(--amber); }
.cs-social-glyph { width:18px; height:18px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:0.72rem; font-weight:800; color:var(--amber); border:1px solid var(--card-line); border-radius:4px; }
@media (max-width:640px) { .cs-grid { grid-template-columns:1fr; } }
.shop-meta { font-size:0.8rem; color:var(--muted); margin:6px 0 14px; }
.shop-doc-link { font-size:0.8rem; }
.shop-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.btn { border:none; border-radius:8px; padding:9px 14px; font-size:0.82rem; font-weight:600; cursor:pointer; }
.btn-approve { background:var(--green-bg); color:var(--green); }
.btn-reject { background:var(--red-bg); color:var(--red); }
.btn-freeze { background:var(--steel-bg); color:var(--steel); }
.btn-suspend { background:var(--amber-bg); color:var(--amber); }
.btn-delete { background:var(--red); color:#fff; }
.btn:hover { filter:brightness(1.12); }