/* ===============================
   DESIGN TOKENS
================================ */
:root {
  --bg-app: #f6f7f9;
  --bg-sidebar: #ffffff;
  --bg-card: #ffffff;

  --text-primary: #1f2933;
  --text-secondary: #6b7280;

  --accent: #4f6ef7;

  --radius: 12px;
  --shadow-soft: 0 6px 18px rgba(0,0,0,0.06);
}

/* ===============================
   RESET
================================ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, sans-serif;
}

body {
  background: var(--bg-app);
  color: var(--text-primary);
  height: 100vh;
}


/* =========================
   UNIVERSAL TOP NAVIGATION
========================= */
.top-nav {
  background: #ffffff;
  height: 72px; /* Standardized Height */
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32px;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
}

/* --- Left Side --- */
.nav-left { display: flex; align-items: center; gap: 16px; }

.logo-circle { width: 42px; height: 42px; flex-shrink: 0; }
.logo-circle img { width: 100%; height: 100%; object-fit: contain; }

.nav-text { display: flex; flex-direction: column; line-height: 1.2; }
.company-name { font-weight: 700; font-size: 15px; color: #111827; letter-spacing: -0.01em; }
.module-name { font-size: 11px; color: #6b7280; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }

/* --- Right Side --- */
.nav-right { display: flex; align-items: center; gap: 24px; }

/* Home Link */
.nav-home-link {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: #6b7280;
  font-size: 13px;
  font-weight: 500;
  transition: color 0.2s;
}
.nav-home-link:hover { color: #4f46e5; }

/* User Profile */
.user-profile { display: flex; align-items: center; gap: 10px; padding-left: 24px; border-left: 1px solid #e5e7eb; }
.user-name { font-size: 13px; font-weight: 500; color: #374151; }
.avatar { 
  width: 32px; height: 32px; 
  background: #eef2ff; color: #4f46e5; 
  border-radius: 50%; 
  display: flex; align-items: center; justify-content: center; 
  font-size: 12px; font-weight: 700; 
}

/* Sign Out Button */
.btn-signout {
  background: none;
  border: 1px solid transparent;
  color: #ef4444;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 6px;
  transition: all 0.2s;
}
.btn-signout:hover {
  background-color: #fef2f2;
  border-color: #fecaca;
}

/* Mobile Tweak */
@media (max-width: 768px) {
  .top-nav { padding: 0 16px; height: 64px; }
  .module-name, .user-name { display: none; }
  .user-profile { padding-left: 12px; padding-right: 12px; }
  .nav-right { gap: 8px; }
}