/* ============================================================
   BidCrew Crew — Frontend Styles  v2.1
   Extends bidcrew-core.css — CSS variables defined there.
   Zero hardcoded light-theme colors in this file.
   ============================================================ */

/* ── Auth wrapper & card ──────────────────────────────────── */
.bc-auth-wrap  { display:flex; justify-content:center; padding:40px 16px; }
.bc-auth-card  {
    background:    var(--bc-card);
    border:        1px solid var(--bc-border);
    border-left:   4px solid var(--bc-accent);
    border-radius: 12px;
    padding:       36px 40px;
    width:         100%;
    max-width:     480px;
    box-shadow:    0 4px 24px rgba(0,0,0,.4);
}
.bc-auth-title  { font-size:1.5rem; font-weight:700; color:var(--bc-text); margin:0 0 6px; }
.bc-auth-sub    { color:var(--bc-muted); margin:0 0 24px; font-size:.95rem; }
.bc-auth-switch { text-align:center; margin-top:20px; color:var(--bc-muted); font-size:.9rem; }
.bc-auth-switch a { color:var(--bc-accent); font-weight:600; text-decoration:none; }
.bc-auth-switch a:hover { text-decoration:underline; }

/* ── Auth form extras ─────────────────────────────────────── */
.bc-required { color:var(--bc-accent); font-size:.85em; }
.bc-form-checkbox-row { margin:8px 0; }
.bc-form-checkbox-row .bc-checkbox-label { font-size:14px; color:var(--bc-muted); }

/* ── Dashboard top bar ────────────────────────────────────── */
.bc-dashboard-wrap { max-width:960px; margin:0 auto; padding:24px 16px; }
.bc-dash-topbar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             16px;
    flex-wrap:       wrap;
    background:      var(--bc-card);
    border:          1px solid var(--bc-border);
    border-left:     4px solid var(--bc-accent);
    border-radius:   12px;
    padding:         20px 24px;
    margin-bottom:   16px;
}
.bc-dash-welcome    { display:flex; align-items:center; gap:14px; }
.bc-dash-avatar     { width:52px; height:52px; border-radius:50%; object-fit:cover; border:2px solid var(--bc-accent); }
.bc-dash-name       { font-size:1.2rem; font-weight:700; margin:0 0 2px; color:var(--bc-text); }
.bc-dash-meta       { color:var(--bc-muted); font-size:.85rem; }
.bc-dash-stats-row  { display:flex; gap:20px; }
.bc-dash-stat       { text-align:center; }
.bc-dash-stat-val   { display:block; font-size:1.3rem; font-weight:700; color:var(--bc-accent); }
.bc-dash-stat-label { font-size:.75rem; color:var(--bc-muted); text-transform:uppercase; letter-spacing:.04em; }

/* ── Profile completeness bar ─────────────────────────────── */
.bc-profile-progress-bar-wrap {
    background:    rgba(255,255,255,.1);
    border-radius: 8px;
    height:        28px;
    position:      relative;
    margin-bottom: 16px;
    overflow:      hidden;
}
.bc-profile-progress-bar {
    background:    linear-gradient(90deg, var(--bc-accent), #fbbf24);
    height:        100%;
    border-radius: 8px;
    transition:    width .4s;
}
.bc-profile-progress-bar-wrap span {
    position:    absolute;
    left:        50%;
    top:         50%;
    transform:   translate(-50%,-50%);
    font-size:   .8rem;
    font-weight: 600;
    color:       var(--bc-text);
    white-space: nowrap;
}

/* ── Dashboard nav tabs ───────────────────────────────────── */
.bc-dash-tabs   { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:20px; border-bottom:2px solid var(--bc-border); }
.bc-dash-tab    { padding:10px 16px; border-radius:8px 8px 0 0; font-size:.88rem; font-weight:500; color:var(--bc-muted); text-decoration:none; border:1px solid transparent; border-bottom:none; transition:all .15s; }
.bc-dash-tab:hover        { color:var(--bc-text); background:rgba(255,255,255,.05); }
.bc-dash-tab.bc-tab-active { color:var(--bc-text); background:var(--bc-card); border-color:var(--bc-accent); font-weight:700; margin-bottom:-2px; }

/* ── Bid cards ────────────────────────────────────────────── */
.bc-bid-list      { display:flex; flex-direction:column; gap:12px; }
.bc-bid-card      { display:flex; justify-content:space-between; align-items:center; gap:12px; background:var(--bc-card); border:1px solid var(--bc-border); border-radius:10px; padding:16px 20px; transition:box-shadow .15s; }
.bc-bid-card:hover { box-shadow:0 2px 12px rgba(0,0,0,.3); }
.bc-bid-card--won  { border-left:4px solid #10b981; }
.bc-bid-job-title  { font-weight:600; color:var(--bc-text); margin-bottom:4px; }
.bc-bid-meta       { display:flex; gap:14px; font-size:.83rem; color:var(--bc-muted); flex-wrap:wrap; }
.bc-bid-card-side  { display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex-shrink:0; }

/* ── Status badges ────────────────────────────────────────── */
.bc-badge             { display:inline-block; padding:3px 10px; border-radius:99px; font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.bc-badge-pending     { background:rgba(251,191,36,.15);  color:#fbbf24; }
.bc-badge-shortlisted { background:rgba(59,130,246,.15);  color:#60a5fa; }
.bc-badge-accepted    { background:rgba(16,185,129,.15);  color:#34d399; }
.bc-badge-rejected,
.bc-badge-withdrawn   { background:rgba(239,68,68,.15);   color:#f87171; }
.bc-badge-expired     { background:rgba(156,163,175,.12); color:#9ca3af; }
.bc-badge-verified    { background:rgba(16,185,129,.15);  color:#34d399; }
.bc-badge-gold        { background:rgba(251,191,36,.15);  color:#fbbf24; }

/* ── Empty state ──────────────────────────────────────────── */
.bc-empty-state   { text-align:center; padding:48px 20px; color:var(--bc-muted); }
.bc-empty-state p { font-size:1.05rem; margin-bottom:20px; }

/* ── Profile edit form ────────────────────────────────────── */
.bc-profile-photo-preview   { margin-bottom:16px; }
.bc-profile-photo-img       { width:80px; height:80px; border-radius:50%; object-fit:cover; border:3px solid var(--bc-accent); }
.bc-form-checkboxes         { display:flex; flex-direction:column; gap:10px; }
.bc-form-checkboxes label   { display:flex; align-items:center; gap:10px; cursor:pointer; font-size:.9rem; color:var(--bc-muted); }
.bc-form-checkboxes input[type="checkbox"] { accent-color:var(--bc-accent); width:16px; height:16px; flex-shrink:0; }
.bc-profile-form-section    { margin:28px 0 16px; padding-bottom:8px; border-bottom:1px solid var(--bc-border); font-size:1.05rem; font-weight:700; color:var(--bc-text); }

.bc-portfolio-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:20px; }
@media(min-width:600px){ .bc-portfolio-grid { grid-template-columns:repeat(4,1fr); } }
.bc-portfolio-slot { border:2px dashed var(--bc-border); border-radius:8px; padding:12px; text-align:center; background:rgba(255,255,255,.02); }
.bc-portfolio-thumb { width:100%; height:80px; object-fit:cover; border-radius:6px; margin-bottom:8px; display:block; }
.bc-input-small { width:100px !important; }

/* ── Public profile ───────────────────────────────────────── */
.bc-profile-wrap    { max-width:860px; margin:0 auto; padding:24px 16px; }
.bc-profile-header  { display:flex; gap:24px; flex-wrap:wrap; align-items:flex-start; background:var(--bc-card); border:1px solid var(--bc-border); border-left:4px solid var(--bc-accent); border-radius:14px; padding:28px; margin-bottom:24px; }
.bc-profile-photo-lg          { width:90px; height:90px; border-radius:50%; object-fit:cover; border:3px solid var(--bc-accent); flex-shrink:0; }
.bc-profile-photo-placeholder { width:90px; height:90px; border-radius:50%; background:var(--bc-accent); display:flex; align-items:center; justify-content:center; font-size:2rem; font-weight:700; color:#0f1f3d; flex-shrink:0; }
.bc-profile-header-info { flex:1; min-width:200px; }
.bc-profile-name      { font-size:1.6rem; font-weight:700; margin:0 0 4px; color:var(--bc-text); }
.bc-profile-trade     { color:var(--bc-accent); font-weight:600; margin-bottom:4px; }
.bc-profile-location  { color:var(--bc-muted); font-size:.9rem; margin-bottom:8px; }
.bc-profile-stars     { margin-bottom:10px; }
.bc-rating-count      { font-size:.8rem; color:var(--bc-muted); margin-left:6px; }
.bc-profile-badges    { display:flex; gap:6px; flex-wrap:wrap; }
.bc-profile-stats-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; min-width:160px; }
@media(min-width:600px){ .bc-profile-stats-grid { grid-template-columns:repeat(4,1fr); } }
.bc-profile-stat       { text-align:center; background:rgba(255,255,255,.06); border-radius:8px; padding:10px; }
.bc-profile-stat-val   { display:block; font-size:1.3rem; font-weight:700; color:var(--bc-accent); }
.bc-profile-stat-label { font-size:.75rem; color:var(--bc-muted); }
.bc-profile-section    { background:var(--bc-card); border:1px solid var(--bc-border); border-left:4px solid var(--bc-accent); border-radius:10px; padding:20px 24px; margin-bottom:16px; }
.bc-profile-section h3 { margin:0 0 12px; font-size:.9rem; color:var(--bc-text); text-transform:uppercase; letter-spacing:.05em; font-weight:700; }
.bc-profile-detail-grid { display:flex; flex-direction:column; gap:8px; font-size:.9rem; color:var(--bc-muted); }
.bc-portfolio-display   { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
@media(min-width:500px){ .bc-portfolio-display { grid-template-columns:repeat(4,1fr); } }
.bc-portfolio-display a img { width:100%; height:90px; object-fit:cover; border-radius:8px; display:block; transition:opacity .15s; }
.bc-portfolio-display a:hover img { opacity:.8; }

/* ── Reviews ──────────────────────────────────────────────── */
.bc-reviews-list           { display:flex; flex-direction:column; gap:14px; }
.bc-review-item            { border-bottom:1px solid var(--bc-border); padding-bottom:14px; }
.bc-review-item:last-child { border-bottom:none; padding-bottom:0; }
.bc-review-header          { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
.bc-review-job             { font-size:.85rem; color:var(--bc-muted); }
.bc-review-date            { font-size:.8rem; color:var(--bc-muted); margin-left:auto; }
.bc-review-body            { color:var(--bc-text); font-size:.9rem; margin:4px 0; }
.bc-review-tags            { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.bc-tag                    { background:rgba(255,255,255,.07); color:var(--bc-muted); padding:2px 10px; border-radius:99px; font-size:.75rem; }
.bc-review-text            { color:var(--bc-muted); font-style:italic; font-size:.85rem; margin:4px 0 0; }

/* ── Credits page ─────────────────────────────────────────── */
.bc-credits-wrap   { max-width:700px; }
.bc-balance-banner { display:flex; align-items:center; gap:16px; background:var(--bc-card); border:1px solid var(--bc-border); border-left:4px solid var(--bc-accent); border-radius:12px; padding:20px 24px; margin-bottom:24px; }
.bc-balance-icon   { font-size:2.5rem; }
.bc-balance-amount { font-size:1.8rem; font-weight:700; color:var(--bc-accent); }
.bc-balance-sub    { color:var(--bc-muted); font-size:.85rem; }
.bc-credit-packs   { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:20px; }
.bc-pack-card      { cursor:pointer; }
.bc-pack-card input[type=radio] { display:none; }
.bc-pack-inner     { border:2px solid var(--bc-border); border-radius:10px; padding:16px; text-align:center; transition:all .15s; background:var(--bc-card); }
.bc-pack-card input:checked + .bc-pack-inner { border-color:var(--bc-accent); background:rgba(251,156,4,.1); box-shadow:0 0 0 1px var(--bc-accent); }
.bc-pack-name      { font-weight:700; color:var(--bc-text); margin-bottom:6px; }
.bc-pack-credits   { font-size:1.4rem; font-weight:700; color:var(--bc-accent); margin-bottom:2px; }
.bc-pack-price     { font-size:1.1rem; font-weight:600; color:var(--bc-text); }
.bc-pack-cpc       { font-size:.75rem; color:var(--bc-muted); margin-top:4px; }

/* ── Table ────────────────────────────────────────────────── */
.bc-table    { width:100%; border-collapse:collapse; font-size:.88rem; }
.bc-table th { text-align:left; padding:10px 12px; background:rgba(255,255,255,.04); border-bottom:2px solid var(--bc-border); color:var(--bc-muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:.78rem; }
.bc-table td { padding:10px 12px; border-bottom:1px solid var(--bc-border); color:var(--bc-text); }
.bc-table tr:last-child td { border-bottom:none; }
.bc-text-green { color:#34d399; font-weight:600; }
.bc-text-red   { color:#f87171; font-weight:600; }

/* ── Responsive ───────────────────────────────────────────── */
@media(max-width:600px) {
    .bc-auth-card      { padding:24px 20px; }
    .bc-dash-topbar    { flex-direction:column; align-items:flex-start; }
    .bc-dash-stats-row { gap:12px; }
    .bc-profile-header { flex-direction:column; }
}

/* ── Dashboard tab card ────────────────────────────────────────────────────── */

.bc-dash-card {
    background:    var(--bc-card);
    border:        1px solid var(--bc-border);
    border-left:   4px solid var(--bc-accent);
    border-radius: 12px;
    overflow:      hidden;
    margin-top:    8px;
}

/* Tabs sit at the top of the card — no outer bottom border, flush edge */
.bc-dash-card .bc-dash-tabs {
    margin-bottom: 0;
    padding:       0 20px;
    border-bottom: 2px solid var(--bc-border);
    background:    rgba(255,255,255,.03);
}

.bc-dash-card .bc-dash-tab {
    border-radius: 0;
    border:        none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding:       14px 16px;
}

.bc-dash-card .bc-dash-tab:hover {
    background: rgba(255,255,255,.05);
    color:      var(--bc-text);
}

.bc-dash-card .bc-dash-tab.bc-tab-active {
    background:    transparent;
    border-bottom: 2px solid var(--bc-accent);
    color:         var(--bc-text);
    font-weight:   700;
    margin-bottom: -2px;
}

.bc-dash-content {
    padding: 24px 20px;
}