/* =========================================================================
   BIFRATECH — dashboards (customer, artisan). Colours come from style.css.
   Master Control (admin.html) has its own file: css/admin.css
   ========================================================================= */
#customer-area, #admin-area{ display:none; }
body[data-role="customer"] #customer-area{ display:block; }
body[data-role="admin"] #admin-area{ display:block; }

.dash-wrap{ max-width:900px; margin:0 auto; }
.dash-who{
  display:flex; flex-wrap:wrap; gap:14px 36px; align-items:center;
  padding:20px 24px; border-radius:20px; border:1px solid var(--line);
  background:linear-gradient(180deg,var(--panel2),var(--panel3));
}
.dash-who > div{ display:flex; flex-direction:column; gap:4px; }
.dash-who .dash-refresh{ margin-left:auto; }
.dash-label{ color:var(--muted); font-size:13px; font-weight:800; letter-spacing:.3px; }
.dash-code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:1px; color:var(--cyan); }
.dash-codeline{ margin:16px 0 0; }
.dash-h{ margin:30px 0 12px; font-size:20px; color:#fff; }
.dash-help{ color:var(--muted); margin:0 0 16px; line-height:1.6; }
.dash-split{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.dash-split .dash-h{ margin-top:30px; }

.dash-list{ display:grid; gap:12px; }
.dash-card{
  padding:16px 18px; border-radius:16px; border:1px solid var(--line);
  background:linear-gradient(180deg,var(--panel2),var(--panel3));
}
.dash-card-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.dash-card-title{ margin:8px 0 4px; font-weight:800; color:#fff; overflow-wrap:anywhere; }
.dash-card-meta{ color:var(--muted); font-size:14px; }
.dash-card-note{ margin-top:10px; padding:10px 12px; border-radius:12px; background:rgba(18,216,245,.10); border:1px solid var(--line); font-size:14px; }
.dash-empty{ margin:0; padding:18px; border-radius:16px; border:1px dashed var(--line); color:var(--muted); line-height:1.6; }

.dash-badge{
  display:inline-block; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:900;
  letter-spacing:.4px; color:#fff; background:rgba(255,255,255,.14); border:1px solid var(--line);
}
.dash-badge--new{ background:rgba(255,157,24,.22); border-color:rgba(255,157,24,.6); color:#FFD9A0; }
.dash-badge--reviewing, .dash-badge--go_ahead_pending{ background:rgba(18,216,245,.16); border-color:rgba(18,216,245,.55); color:#BFF3FF; }
.dash-badge--scheduled, .dash-badge--actioned{ background:rgba(11,85,199,.40); border-color:rgba(8,120,232,.8); }
.dash-badge--completed, .dash-badge--approved{ background:rgba(53,213,138,.18); border-color:rgba(53,213,138,.55); color:#CFFBE3; }
.dash-badge--cancelled, .dash-badge--closed, .dash-badge--rejected{ background:rgba(255,100,100,.16); border-color:rgba(255,100,100,.5); color:#FFD2D2; }

.trail{ list-style:none; margin:0; padding:0; display:grid; gap:0; border-left:2px solid var(--line); }
.trail-item{
  position:relative; display:grid; grid-template-columns:max-content 1fr; gap:2px 14px;
  padding:10px 0 14px 20px;
}
.trail-item::before{
  content:""; position:absolute; left:-7px; top:16px; width:12px; height:12px; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 0 4px rgba(18,216,245,.18);
}
.trail-code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; color:var(--cyan); letter-spacing:.5px; }
.trail-text{ color:var(--text); overflow-wrap:anywhere; }
.trail-time{ grid-column:2; color:var(--muted); font-size:13px; }

.dash-refresh{
  min-height:44px; padding:10px 18px; border-radius:12px; font-weight:800; cursor:pointer;
  color:#fff; background:rgba(255,255,255,.10); border:1px solid var(--line);
}
.dash-refresh:hover{ background:rgba(255,255,255,.18); }
.dash-form{ padding:22px; border-radius:20px; border:1px solid var(--line); background:linear-gradient(180deg,var(--panel2),var(--panel3)); }
.dash-form .primary-button{ width:100%; min-height:54px; margin-top:14px; }
.dash-form .field input[type="file"]{ padding:12px; background:rgba(255,255,255,.04); }
.dash-form select option{ background:#111827; color:#fff; }
.dash-open{
  display:inline-block; padding:16px 28px; border-radius:14px; font-weight:900; color:#fff; text-decoration:none;
  background:linear-gradient(135deg,var(--cyan),var(--blue2)); box-shadow:0 8px 24px rgba(0,190,255,.28);
}

@media(max-width:650px){
  .dash-who .dash-refresh{ margin-left:0; width:100%; }
  .dash-form{ padding:16px; }
  .trail-item{ grid-template-columns:1fr; }
  .trail-time{ grid-column:1; }
}

/* ---- identity capture + jobs ---- */
.identity-video{ width:100%; max-width:420px; border-radius:16px; background:#041022; border:1px solid var(--line); display:block; margin:8px 0; transform:scaleX(-1); }
img.identity-video{ transform:none; }
.identity-challenge{ color:#FFD9A0; font-weight:800; margin:4px 0; }
.live-buttons{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
.check-line{ display:flex; gap:10px; align-items:flex-start; margin:10px 0; line-height:1.45; }
.check-line input{ width:24px; height:24px; flex:none; accent-color:var(--cyan); }
.job-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.job-note{ color:var(--muted); font-size:14px; margin-top:6px; }