/* ============================================================
   ADC SYSTEMS TRAINING PORTAL — styles
   Loaded AFTER css/style.css. Reuses the same design tokens
   (--navy, --red, --paper, etc.) defined in style.css :root.
   ============================================================ */

/* ---------- Simple app top bar (auth + dashboard pages) ---------- */
.portal-topbar{
  background:var(--navy-950);
  color:var(--white);
  padding-block:.85rem;
}
.portal-topbar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.portal-brand{ display:flex; align-items:center; gap:.6rem; }
.portal-brand img{ height:34px; width:auto; border-radius:8px; }
.portal-brand strong{ font-family:var(--f-head); font-size:.92rem; letter-spacing:.02em; }
.portal-brand span{ display:block; font-size:.68rem; color:var(--slate-light); }
.portal-topbar-actions{ display:flex; align-items:center; gap:.8rem; }
.portal-topbar-actions a{ font-size:.85rem; color:#D9DEEA; }
.portal-topbar-actions a:hover{ color:var(--white); }

/* ---------- Auth pages (login / register / complete-profile) ---------- */
.auth-shell{
  min-height:calc(100vh - 64px);
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--paper-dim);
  padding:clamp(1.5rem,4vw,3rem) 1rem;
}
.auth-card{
  width:100%;
  max-width:460px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  padding:clamp(1.8rem,4vw,2.6rem);
  box-shadow:0 20px 44px -24px rgba(10,23,48,.35);
}
.auth-card.wide{ max-width:640px; }
.auth-logo{ display:flex; justify-content:center; margin-bottom:1.1rem; }
.auth-logo img{ height:48px; width:auto; }
.auth-card h1{ font-size:var(--step-2); text-align:center; }
.auth-sub{ text-align:center; color:var(--slate); font-size:.92rem; margin-top:.5rem; margin-bottom:1.6rem; }

.btn-google{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.65rem;
  background:var(--white);
  border:1px solid var(--line);
  color:var(--ink);
  font-family:var(--f-head);
  font-weight:600;
  font-size:.92rem;
  padding:.8rem 1rem;
  border-radius:999px;
  cursor:pointer;
  transition:border-color .2s, box-shadow .2s;
}
.btn-google:hover{ border-color:var(--navy-800); box-shadow:0 6px 18px -10px rgba(10,23,48,.35); }
.btn-google svg{ width:19px; height:19px; flex-shrink:0; }

.auth-divider{ display:flex; align-items:center; gap:.8rem; margin:1.4rem 0; color:var(--slate-light); font-size:.78rem; }
.auth-divider::before, .auth-divider::after{ content:""; flex:1; height:1px; background:var(--line); }

.auth-note{ font-size:.82rem; color:var(--slate); margin-top:1.1rem; text-align:center; }
.auth-note a{ color:var(--navy-900); font-weight:600; text-decoration:underline; }

.form-msg{ font-size:.85rem; border-radius:var(--radius-s); padding:.7rem .9rem; margin-top:1rem; display:none; }
.form-msg.is-visible{ display:block; }
.form-msg.success{ background:#E7F6EC; color:#1E6B3A; }
.form-msg.error{ background:#FCEAEA; color:var(--red-700); }

.field-hint{ font-size:.76rem; color:var(--slate-light); margin-top:.3rem; }

/* ---------- Dashboard ---------- */
.dash-shell{ background:var(--paper); min-height:calc(100vh - 64px); padding-block:clamp(1.6rem,4vw,2.6rem); }

.dash-welcome{
  background:var(--navy-950);
  color:var(--white);
  border-radius:var(--radius-l);
  padding:clamp(1.6rem,4vw,2.4rem);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.6rem;
  flex-wrap:wrap;
  margin-bottom:1.8rem;
}
.dash-welcome h1{ color:var(--white); font-size:var(--step-3); }
.dash-welcome p{ color:#C6CCDB; margin-top:.4rem; font-size:.95rem; }
.dash-id-badge{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  padding:.6rem 1.2rem;
  font-family:var(--f-head);
  font-size:.85rem;
  letter-spacing:.03em;
  white-space:nowrap;
}
.dash-id-badge span{ display:block; font-size:.66rem; color:var(--slate-light); font-weight:500; letter-spacing:.06em; text-transform:uppercase; margin-bottom:.15rem; }

.dash-grid{ display:grid; grid-template-columns:1fr 2fr; gap:1.6rem; align-items:start; }

.dash-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:1.5rem 1.6rem;
}
.dash-card + .dash-card{ margin-top:1.6rem; }
.dash-card h2{ font-size:1.15rem; }
.dash-card .card-sub{ color:var(--slate); font-size:.85rem; margin-top:.3rem; }

.profile-list{ margin-top:1.2rem; display:flex; flex-direction:column; gap:.85rem; }
.profile-list dt{ font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--slate-light); }
.profile-list dd{ margin:0; font-weight:600; color:var(--ink); font-size:.95rem; }

.progress-track{ background:var(--paper-dim); border-radius:999px; height:10px; overflow:hidden; margin-top:.7rem; }
.progress-fill{ background:var(--red-600); height:100%; border-radius:999px; transition:width .4s ease; }
.progress-label{ font-size:.82rem; color:var(--slate); margin-top:.5rem; }

.resource-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:1.2rem; }
.resource-card{ border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden; background:var(--white); }
.resource-thumb{ aspect-ratio:16/9; background:var(--navy-950); position:relative; overflow:hidden; }
.resource-thumb iframe, .resource-thumb img{ width:100%; height:100%; border:0; object-fit:cover; }
.resource-thumb .link-thumb{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--white); background:linear-gradient(135deg,var(--navy-900),var(--navy-700)); }
.resource-thumb .link-thumb .icon{ width:34px; height:34px; }
.resource-body{ padding:1rem 1.1rem 1.15rem; }
.resource-tag{ font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--red-600); }
.resource-body h3{ font-size:1rem; margin-top:.3rem; }
.resource-body p{ font-size:.85rem; color:var(--slate); margin-top:.35rem; }
.resource-body a.open-link{ display:inline-flex; align-items:center; gap:.35rem; margin-top:.6rem; font-size:.85rem; font-weight:600; color:var(--navy-900); }

.task-list{ margin-top:1.2rem; display:flex; flex-direction:column; gap:.7rem; }
.task-row{
  display:flex;
  align-items:flex-start;
  gap:.9rem;
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:.9rem 1.05rem;
}
.task-row.is-done{ background:#F3FAF5; border-color:#CDE9D6; }
.task-check{
  flex-shrink:0;
  width:34px; height:34px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--white);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .2s, border-color .2s;
}
.task-row.is-done .task-check{ background:#1E6B3A; border-color:#1E6B3A; color:var(--white); }
.task-check .icon{ width:16px; height:16px; }
.task-body h4{ font-size:.95rem; font-family:var(--f-head); }
.task-body p{ font-size:.85rem; color:var(--slate); margin-top:.25rem; }
.task-meta{ font-size:.76rem; color:var(--slate-light); margin-top:.35rem; }

.empty-state{ text-align:center; padding:1.6rem 1rem; color:var(--slate); font-size:.9rem; }

.admin-panel{ border:1px dashed var(--navy-700); }
.admin-panel h2::before{ content:"Instructor tools · "; color:var(--slate-light); font-weight:500; font-size:.7em; }
.admin-form{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; margin-top:1rem; }
.admin-form .field-full{ grid-column:1 / -1; }
.admin-form .field label{ display:block; font-size:.8rem; font-weight:600; margin-bottom:.35rem; color:var(--navy-900); }
.admin-form .field input, .admin-form .field select, .admin-form .field textarea{
  width:100%; border:1px solid var(--line); border-radius:var(--radius-s); padding:.6rem .8rem; font-family:inherit; font-size:.9rem; background:var(--white);
}
.admin-form .field textarea{ min-height:70px; resize:vertical; }
.admin-list{ margin-top:1.2rem; display:flex; flex-direction:column; gap:.5rem; }
.admin-list-row{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; border:1px solid var(--line); border-radius:var(--radius-s); padding:.6rem .8rem; font-size:.85rem; }
.admin-list-row .del-btn{ color:var(--red-600); font-size:.78rem; font-weight:600; cursor:pointer; background:none; border:none; }

.avatar-circle{ width:44px; height:44px; border-radius:50%; background:var(--red-600); color:var(--white); display:flex; align-items:center; justify-content:center; font-family:var(--f-head); font-weight:700; font-size:1rem; }

@media (max-width: 880px){
  .dash-grid{ grid-template-columns:1fr; }
  .resource-grid{ grid-template-columns:1fr; }
  .admin-form{ grid-template-columns:1fr; }
}