/*
  Account UI stylesheet
  Scoped styles for account-related pages (profile sidebar, card links, personal card edit).
  Apply styles only when a container has the class `account-ui` to avoid affecting other pages.
*/

:root {
  --account-primary: #0f4882;
  --account-primary-2: #1260a3;
  --account-bg: #f7fbff;
  --account-text: #1a1a1a;
}

.account-ui {
  color: var(--account-text);
}

/* Sidebar panel (matches profile page look) */
.account-ui .profile-nav,
.account-ui .profile-info { margin-top: 30px; }

.account-ui .profile-nav .panel,
.account-ui .profile-info .panel {
  border: 1px solid #e6eef7;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 20px rgba(15, 72, 130, 0.06);
}

.account-ui .profile-nav .user-heading {
  background: var(--account-primary);
  color: #fff;
  padding: 28px 30px;
  text-align: center;
}

.account-ui .profile-nav .user-heading a img {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  border: 5px solid rgba(255, 255, 255, 0.3);
}

.account-ui .profile-nav .user-heading h1 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #fff;
}

.account-ui .profile-nav .user-heading p {
  font-size: 12px;
  color: #eef4fb;
}

.account-ui .profile-nav ul { margin-top: 1px; padding-left: 0; list-style: none; }
.account-ui .profile-nav ul li { border-bottom: 1px solid #ebeae6; }
.account-ui .profile-nav ul li a {
  display: block;
  padding: 10px 15px;
  color: #667085; /* neutral */
  border-left: 5px solid #fff;
  text-decoration: none;
}
.account-ui .profile-nav ul li a:hover,
.account-ui .profile-nav ul li.active a {
  background: #f8f7f5;
  border-left: 5px solid var(--account-primary);
  color: #111827;
}

/* Content panel */
.account-ui .bio-graph-heading {
  background: var(--account-primary);
  color: #fff;
  text-align: center;
  padding: 20px 28px;
  font-size: 16px;
}

.account-ui .bio-graph-info { padding: 22px; background: var(--account-bg); }
.account-ui .bio-graph-info h1 {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--account-primary);
  padding-bottom: 10px;
}

/* Buttons */
.account-ui .btn-primary { background: var(--account-primary); border-color: var(--account-primary); }
.account-ui .btn-primary:hover { background: var(--account-primary-2); border-color: var(--account-primary-2); }
.account-ui .btn-secondary { background: #475569; border-color: #475569; color: #fff; }
.account-ui .btn-secondary:hover { background: #334155; border-color: #334155; color: #fff; }
.account-ui .btn-outline-info { color: var(--account-primary); border-color: var(--account-primary); }
.account-ui .btn-outline-info:hover { color: #fff; background: var(--account-primary); }

/* Tables */
.account-ui .table { background: #fff; }
.account-ui .table thead th {
  background: #eef4fb;
  color: #0f172a;
  border-bottom: 2px solid #e6eef7;
}
.account-ui .table-bordered td, .account-ui .table-bordered th { border-color: #e6eef7; }

/* Responsive tweaks */
@media (max-width: 767px) {
  .account-ui .profile-nav { margin-bottom: 20px; }
  .account-ui .bio-graph-info { padding: 16px; }
}