/* ==========================================================================
   FLYKAT ACCOUNTS — auth pages + customer dashboard
   (uses the same design tokens defined in style.css)
   ========================================================================== */

.auth-shell{
  max-width:460px; margin:0 auto;
}
.auth-shell .form-card{ margin-top:6px; }
.auth-links{
  text-align:center; margin-top:22px; font-size:13.5px; color:var(--text-soft);
}
.auth-links a{ color:var(--sky-strong); font-weight:700; }
.field-hint{ font-size:12px; color:var(--text-soft); margin-top:6px; }

/* ---------- Dashboard shell ---------- */
.dash-shell{ display:grid; grid-template-columns:260px 1fr; gap:32px; align-items:start; }
.dash-side{
  background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:26px 24px; box-shadow:var(--card-shadow); position:sticky; top:calc(var(--nav-h) + 20px);
}
.dash-avatar{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, var(--gold-300), var(--gold-600)); color:var(--navy-950); font-weight:700; font-size:20px;
  margin-bottom:14px; font-family:var(--font-display);
}
.dash-side h3{ font-size:16px; margin-bottom:2px; }
.dash-side .email{ font-size:12.5px; color:var(--text-soft); word-break:break-all; margin-bottom:18px; }
.dash-nav{ display:flex; flex-direction:column; gap:4px; }
.dash-nav a{
  padding:10px 12px; border-radius:10px; font-size:13.5px; font-weight:600; color:var(--text-soft);
  transition:.2s var(--ease);
}
.dash-nav a:hover, .dash-nav a.active{ background:var(--bg-sunken); color:var(--text); }
.dash-side .verify-flag{
  margin-top:16px; padding:10px 12px; border-radius:10px; font-size:12px; font-weight:700;
}
.verify-flag.ok{ background:rgba(46,149,99,0.12); color:#2E9563; }
.verify-flag.pending{ background:rgba(216,52,44,0.1); color:var(--danger-strong); }

.dash-main{ display:flex; flex-direction:column; gap:24px; }
.dash-card{
  background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:28px; box-shadow:var(--card-shadow);
}
.dash-card h2{ font-size:17px; margin-bottom:4px; }
.dash-card .card-sub{ color:var(--text-soft); font-size:13px; margin-bottom:22px; }
.dash-row2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

/* status pill */
.pay-pill{
  display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:var(--radius-pill);
  font-size:12.5px; font-weight:700;
}
.pay-pill.unpaid{ background:rgba(92,106,135,0.12); color:var(--text-soft); }
.pay-pill.submitted{ background:rgba(0,113,194,0.12); color:var(--sky-strong); }
.pay-pill.verified{ background:rgba(46,149,99,0.14); color:#2E9563; }
.pay-pill.rejected{ background:rgba(216,52,44,0.1); color:var(--danger-strong); }

.fee-box{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:var(--bg-sunken); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:18px 20px; margin-bottom:22px;
}
.fee-box .amount{ font-family:var(--font-mono); font-size:26px; font-weight:700; color:var(--brand-strong); }
.fee-box .label{ font-size:12.5px; color:var(--text-soft); }
.bank-details{ font-size:13.5px; line-height:1.9; }
.bank-details b{ color:var(--text); }

/* document upload cards */
.doc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.doc-upload{
  border:1.5px dashed var(--line); border-radius:var(--radius-md); padding:20px; text-align:center;
  cursor:pointer; transition:.25s; background:var(--bg);
}
.doc-upload:hover, .doc-upload.dragover{ border-color:var(--sky-500); background:rgba(0,113,194,0.05); }
.doc-upload svg{ width:26px; height:26px; color:var(--text-soft); margin-bottom:8px; }
.doc-upload .dz-title{ font-size:13px; font-weight:700; margin-bottom:2px; }
.doc-upload .dz-sub{ font-size:11.5px; color:var(--text-soft); opacity:.75; }
.doc-preview{ margin-top:12px; display:none; }
.doc-preview img{ max-height:150px; border-radius:10px; border:1px solid var(--line); }
.doc-status{ font-size:12px; margin-top:8px; font-weight:600; min-height:16px; }
.doc-status.uploading{ color:var(--sky-strong); }
.doc-status.done{ color:#2E9563; }
.doc-status.error{ color:var(--danger-strong); }

@media (max-width:900px){
  .dash-shell{ grid-template-columns:1fr; }
  .dash-side{ position:relative; top:0; }
  .doc-grid, .dash-row2{ grid-template-columns:1fr; }
}