/* ==========================================================================
   DASHDROP PORTAL — customer account + admin dashboard
   Reuses the design tokens from /assets/css/style.css (loaded alongside
   this file) rather than redefining colors/fonts, so the portal feels
   like part of the same site rather than a bolted-on app.
   ========================================================================== */

.portal-body{ background: var(--cloud-dim); min-height:100vh; }

.portal-bar{
  background: var(--ink-900); color: var(--white);
  padding: 16px 0;
}
.portal-bar .container{ display:flex; align-items:center; justify-content:space-between; }
.portal-bar .brand{ display:flex; align-items:center; gap:10px; }
.portal-bar .brand img{ height:32px; }
.portal-bar .brand span{ font-family:var(--font-display); font-weight:800; font-size:15px; }
.portal-bar nav{ display:flex; gap:20px; align-items:center; }
.portal-bar nav a{ color:#D9D6D1; font-size:14px; font-family:var(--font-display); font-weight:600; }
.portal-bar nav a:hover{ color:var(--white); }
.portal-bar nav .tag{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; background:rgba(255,255,255,.1); padding:4px 9px; border-radius:999px; color:#D9D6D1; }

/* -------------------- Auth cards (login/register) -------------------- */
.auth-wrap{ min-height: calc(100vh - 64px); display:flex; align-items:center; justify-content:center; padding: 40px 20px; }
.auth-card{
  background: var(--white); border:1px solid var(--line-gray); border-radius:8px;
  padding: 40px; width:100%; max-width: 420px;
}
.auth-card h1{ font-size:24px; margin-bottom:6px; }
.auth-card .sub{ color:var(--fleet-gray); font-size:14px; margin-bottom:28px; }
.auth-card .form-field{ margin-bottom:16px; }
.auth-card .foot-link{ margin-top:20px; text-align:center; font-size:13.5px; color:var(--fleet-gray); }
.auth-card .foot-link a{ color:var(--dash-red-dark); font-weight:600; }
.auth-error{
  background:#FDEDEA; border:1px solid #F6C9C2; color:var(--dash-red-dark);
  padding:12px 14px; border-radius:5px; font-size:13.5px; margin-bottom:18px;
}
.auth-success{
  background:#F0F8F3; border:1px solid #BEE3CC; color:#1E6B3F;
  padding:12px 14px; border-radius:5px; font-size:13.5px; margin-bottom:18px;
}

/* -------------------- Dashboard layout -------------------- */
.portal-main{ padding: 40px 0 60px; }
.portal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; flex-wrap:wrap; gap:14px; }
.portal-head h1{ font-size:26px; margin:0; }
.portal-head .sub{ color:var(--fleet-gray); font-size:14px; margin-top:4px; }

.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:32px; }
.stat-card{ background:var(--white); border:1px solid var(--line-gray); border-radius:6px; padding:18px 20px; }
.stat-card .n{ font-family:var(--font-display); font-weight:800; font-size:26px; }
.stat-card .l{ font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase; color:var(--fleet-gray); letter-spacing:.03em; }

.portal-table-wrap{ background:var(--white); border:1px solid var(--line-gray); border-radius:6px; overflow:hidden; }
table.portal-table{ width:100%; border-collapse:collapse; font-size:14px; }
table.portal-table th{
  text-align:left; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--fleet-gray); background:var(--cloud-dim); padding:12px 16px; border-bottom:1px solid var(--line-gray);
}
table.portal-table td{ padding:14px 16px; border-bottom:1px solid var(--cloud-dim); vertical-align:middle; }
table.portal-table tr:last-child td{ border-bottom:none; }
table.portal-table tr:hover td{ background:#FBFAF7; }

.status-pill{
  display:inline-block; font-family:var(--font-mono); font-size:11px; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; letter-spacing:.03em; font-weight:600;
}
.status-pending{ background:#FEF3E2; color:#92600A; }
.status-confirmed{ background:#E8EEFC; color:#1E4FA0; }
.status-in_transit{ background:#FDEDEA; color:var(--dash-red-dark); }
.status-delivered{ background:#EAF7EE; color:#1E6B3F; }
.status-cancelled{ background:#F2EFE9; color:var(--fleet-gray); }

.pay-pill{ display:inline-block; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; padding:4px 10px; border-radius:999px; }
.pay-unpaid{ background:#F2EFE9; color:var(--fleet-gray); }
.pay-partial{ background:#FEF3E2; color:#92600A; }
.pay-paid{ background:#EAF7EE; color:#1E6B3F; }

.portal-empty{ padding:50px 20px; text-align:center; color:var(--fleet-gray); }

.inline-form select, .inline-form input[type=number]{
  font-family:var(--font-body); font-size:13px; padding:6px 8px; border:1px solid var(--line-gray); border-radius:4px;
}
.btn-sm{ padding:8px 14px; font-size:13px; }

.tabs-row{ display:flex; gap:8px; margin-bottom:20px; }
.tabs-row a{
  font-family:var(--font-mono); font-size:12.5px; text-transform:uppercase; padding:8px 14px;
  border:1px solid var(--line-gray); border-radius:999px; color:var(--ink-700);
}
.tabs-row a.active{ background:var(--ink-900); border-color:var(--ink-900); color:var(--white); }

@media (max-width: 760px){
  .stat-row{ grid-template-columns:repeat(2,1fr); }
  .portal-table-wrap{ overflow-x:auto; }
  table.portal-table{ min-width:640px; }

  .portal-bar .container{ flex-direction:column; align-items:flex-start; gap:10px; }
  .portal-bar nav{ flex-wrap:wrap; gap:12px 16px; width:100%; }
  .portal-bar nav a{ font-size:13.5px; }

  .auth-card{ padding:28px 22px; }
  .portal-main{ padding:28px 0 40px; }
  .portal-head{ margin-bottom:20px; }
  .portal-head h1{ font-size:22px; }
}