/* ============================================================
   React My Account v2 — SPA Layout
   ============================================================ */

:root {
  --rma-bg:           #ffffff;
  --rma-surface:      #f7f8fa;
  --rma-border:       #e8eaed;
  --rma-accent:       #6c63ff;
  --rma-accent-soft:  #ede9ff;
  --rma-text:         #1a1d23;
  --rma-muted:        #6b7280;
  --rma-danger:       #ef4444;
  --rma-danger-soft:  #fef2f2;
  --rma-radius:       14px;
  --rma-radius-sm:    8px;
  --rma-shadow:       0 2px 20px rgba(108,99,255,.08);
  --rma-transition:   .18s cubic-bezier(.4,0,.2,1);
  --rma-sidebar-w:    260px;
}

/* ---- Root layout ---- */
.rma-root {
  display: contents;
}

.rma-layout {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  width: 100%;
}

/* ---- Sidebar ---- */
.rma-sidebar {
  width: var(--rma-sidebar-w);
  flex-shrink: 0;
  background: var(--rma-bg);
  border: 1px solid var(--rma-border);
  border-radius: var(--rma-radius);
  box-shadow: var(--rma-shadow);
  overflow: hidden;
  position: sticky;
  top: 24px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---- User card ---- */
.rma-user-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 20px;
  color: black;
}

.rma-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.5);
  object-fit: cover;
  flex-shrink: 0;
}

.rma-avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  background: rgba(255,255,255,.2);
  letter-spacing: -.02em;
}

.rma-user-info { min-width: 0; }

.rma-user-name {
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -.01em;
}

.rma-user-email {
  font-size: 12px;
  opacity: .78;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Nav list ---- */
.rma-nav-list {
  list-style: none;
  margin: 0;
  padding: 10px;
}

.rma-nav-list li { margin: 0; }

.rma-nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border-radius: var(--rma-radius-sm);
  text-decoration: none;
  color: var(--rma-text);
  font-size: 14px;
  font-weight: 500;
  transition: background var(--rma-transition), color var(--rma-transition);
  cursor: pointer;
  position: relative;
  width: 100%;
}

.rma-nav-item:hover {
  background: var(--rma-surface);
  color: var(--rma-accent);
  text-decoration: none;
}

.rma-nav-item.rma-active {
  background: var(--rma-accent-soft);
  color: var(--rma-accent);
  font-weight: 600;
}

.rma-nav-item.rma-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--rma-accent);
}

.rma-nav-item.rma-logout {
  color: var(--rma-muted);
  margin-top: 4px;
}
.rma-nav-item.rma-logout:hover {
  background: var(--rma-danger-soft);
  color: var(--rma-danger);
}
.rma-nav-item.rma-logout:hover .rma-nav-icon { color: var(--rma-danger); }

.rma-nav-label { flex: 1; }

.rma-divider {
  height: 1px;
  background: var(--rma-border);
  margin: 6px 4px;
}

/* ---- Icons ---- */
.rma-nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--rma-muted);
  transition: color var(--rma-transition);
}
.rma-nav-item:hover .rma-nav-icon,
.rma-nav-item.rma-active .rma-nav-icon {
  color: var(--rma-accent);
}

/* ---- Main content ---- */
.rma-main {
  flex: 1;
  min-width: 0;
}

.rma-content-area {
  background: var(--rma-bg);
  border: 1px solid var(--rma-border);
  border-radius: var(--rma-radius);
  padding: 28px 32px;
  box-shadow: var(--rma-shadow);
  min-height: 300px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  animation: rma-fade-in .2s ease;
}

@keyframes rma-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Skeleton loader ---- */
.rma-content-area.rma-loading {
  border-color: var(--rma-border);
}

.rma-skeleton {
  padding: 4px 0;
}

.rma-skeleton-line {
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(90deg, var(--rma-surface) 25%, #eef0f3 50%, var(--rma-surface) 75%);
  background-size: 200% 100%;
  animation: rma-shimmer 1.4s infinite;
  margin-bottom: 14px;
}

.rma-skeleton-title {
  height: 20px;
  width: 40%;
  margin-bottom: 24px;
}

.rma-skeleton-short { width: 55%; }

@keyframes rma-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---- Error ---- */
.rma-error {
  background: var(--rma-danger-soft);
  color: var(--rma-danger);
  border: 1px solid #fecaca;
  border-radius: var(--rma-radius-sm);
  padding: 12px 16px;
  font-size: 14px;
  margin-bottom: 16px;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .rma-layout {
    flex-direction: column;
    gap: 16px;
  }
  .rma-sidebar {
    width: 100%;
    position: static;
  }
  .rma-nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .rma-nav-list li { flex: 1 1 auto; }
  .rma-nav-item {
    justify-content: center;
    font-size: 13px;
    padding: 9px 10px;
  }
  .rma-nav-item::before { display: none; }
  .rma-nav-label { display: none; }
  .rma-content-area { padding: 20px 16px; }
}