/* Common styles used across all pages */
* {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  }
  
  body {
    margin: 0;
    padding: 0;
  }
  
/* Primary (black) */
.btn-primary {
  background: #000;
  color: #fff;
  padding: 12px 24px;
  border-radius: 10px;      /* match Exec page */
  border: 2px solid #000;   /* match Exec page */
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  font-weight: 600;
}
.btn-primary:hover { background:#111; border-color:#111; }

/* Secondary (gray “Back to Home”) */
.btn-secondary {
  background: #e5e7eb;      /* Tailwind slate-200 */
  color: #0f172a;           /* slate-900 */
  padding: 10px 16px;
  border-radius: 10px;      /* match Exec page */
  border: 1px solid #e5e7eb;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  font-weight: 500;
}
.btn-secondary:hover { background:#dbe0e6; }
  
  .card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 24px;
  }

  /* Shared page header (same as Executive Analytics) */
.dashboard-title {
  font-size: 65px;
  letter-spacing: -5px;
  line-height: 1;
  font-weight: 800;
  color: #1e293b;     /* slate-800 */
  margin-bottom: 8px;
}

.header-subtitle {
  font-size: 16px;
  color: #475569;     /* slate-600 */
}

/* Optional: container helper if you want it globally */
.dashboard-container {
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  padding: 24px;
}

/* === App Bar sizing & typography (shared) === */
.appbar {
  position: fixed; inset: 0 auto auto 0; right: 0; /* full width top */
  background: #fff; z-index: 50; box-shadow: 0 1px 0 rgba(2,6,23,0.06);
}
.appbar-inner {
  max-width: 1120px; /* same visual width as other pages */
  margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

/* (1) Brand block */
.app-brand-wrap { display:flex; align-items:center; gap:16px; }
.app-logo { width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; }
.app-logo img { width: 100%; height: 100%; border-radius: 0.75rem; display: block; }
.app-brand-title { font-size: 20px; font-weight: 800; line-height: 1.1; color:#0f172a; }
.app-brand-sub   { font-size: 12px; color:#64748b; margin-top: -2px; }

/* (2) Mini page title in app bar */
.app-mini { display:none; align-items:flex-start; gap:6px; padding-left:16px; border-left:1px solid #e2e8f0; }
@media (min-width: 768px) { .app-mini { display:block; } }
.app-mini-title { font-size: 14px; font-weight: 700; color:#0f172a; line-height:1.2; }
.app-mini-sub   { font-size: 12px; color:#64748b; margin-top: -2px; }

/* (3) Back button (use your shared .btn-secondary) */
.app-back {}

/* (4) Big page headline in content area */
.dashboard-title {
  font-size: 65px;
  letter-spacing: -5px;
  line-height: 1;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 8px;
}
.header-subtitle { font-size: 16px; color: #475569; }

/* Optional: page container used under app bar */
.page-wrap { padding-top: 76px; /* appbar height + spacing */ }