/* =========================
   AUTH / DASHBOARD LAYOUT
   (base.css lo tokens + components)
========================= */

body{
  padding: 40px 0;
}

/* Card form (reuse .card from base.css via HTML hoặc apply ở đây) */
.container{
  max-width: 490px;
  margin: 0 auto;
}

/* Auth card look */
.auth-card{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Old structure (row/content) - keep to avoid changing HTML now */
.row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
}
.row:last-child{ border-bottom:none; }
.content{ width:100%; }

/* Labels */
.label{ font-weight:700; margin-bottom:6px; }
.required{ color: var(--danger); margin-left: 6px; }

/* Button area */
.button-area{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  padding: 20px 24px;
  background:#fff;
}

/* ===== Alias buttons: map old class -> new system ===== */
.confirm-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;

  background: var(--primary);
  color:#fff;
}
.confirm-btn:hover{ background: var(--primary-2); }

.back-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid var(--border);
  cursor: pointer;
  white-space: nowrap;

  background:#fff;
  color:#111827;
}
.back-btn:hover{
  border-color: #cbd5e1;
  background: #f8fafc;
}

/* Notes */
.note{
  max-width:700px;
  margin: 16px auto 0;
  padding: 0 12px;
  font-size: 13px;
  color: var(--muted);
  line-height:1.6;
  text-align:center;
}

/* =========================
   DASHBOARD (migrated from inline)
========================= */

/* Hide until protectPage finishes */
body.is-protected{ visibility: hidden; }

.dashboard-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  max-width:1000px;
  margin:0 auto;
  padding:20px;
}
.dashboard-title{ font-size:22px; font-weight:700; }
.dashboard-content{
  max-width:1000px;
  margin:0 auto;
  padding:0 20px 40px;
}

/* Profile table */
.profile-table{
  width:100%;
  border-collapse:collapse;
  margin-top:20px;
  background:#fff;
  border:1px solid var(--border);
  border-radius: 12px;
  overflow:hidden;
}
.profile-table th,
.profile-table td{
  border-bottom:1px solid var(--border);
  padding:12px 10px;
  vertical-align:middle;
}
.profile-table tr:last-child th,
.profile-table tr:last-child td{
  border-bottom:none;
}
.profile-table th{
  width:180px;
  background:#f8fafc;
  font-weight:700;
}

td.action{ width:110px; text-align:right; }

.edit-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background:#fff;
  font-weight:700;
  cursor:pointer;
}
.edit-btn:hover{ background:#f8fafc; border-color:#cbd5e1; }

/* Admin section */
#admin-section{
  display:none;
  margin-top:40px;
  border-top:1px solid var(--border);
  padding-top:24px;
}
#admin-section h3{ font-size:18px; margin-bottom:12px; }

#admin-controls{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
#admin-email{ width:280px; }
#admin-email, #admin-role{
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
}
#change-role-btn{
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background:#fff;
  font-weight:700;
  cursor:pointer;
}
#change-role-btn:hover{ background:#f8fafc; border-color:#cbd5e1; }

#admin-message{ margin-top:10px; font-size:13px; }