*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  background-color: #ffffff;
  color: #1e1e2f;
  display: flex;
  min-height: 100vh;
}

/* ---- Sidebar ---- */
.sidebar {
  width: 195px;
  background-color: #f1f5f9;
  display: flex;
  flex-direction: column;
  padding: 24px 14px;
  gap: 4px;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  border-right: 1px solid #e2e8f0;
}

.sidebar .logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
  padding: 0 4px;
  text-decoration: none;
  color: #1e1e2f;
}

.sidebar .logo img {
  display: block;
  width: 100%;
  height: auto;
}

.sidebar .logo-subtitle {
  font-size: 12px;
  font-weight: 400;
  color: #1e1e2f;
  letter-spacing: 0.2px;
  text-align: center;
}

.sidebar a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #1e1e2f;
  font-size: 14px;
  font-weight: 500;
  padding: 9px 12px;
  border-radius: 8px;
  transition: background-color 0.2s, color 0.2s;
}

.sidebar a:hover {
  background-color: #e2e8f0;
  color: #1e1e2f;
}

.sidebar a.active {
  background-color: #e2e8f0;
  color: #0284c7;
}

.sidebar a svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ---- Sidebar Settings Menu ---- */
.sidebar-settings {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-settings-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #1e1e2f;
  background: transparent;
  border: none;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.2s, color 0.2s;
}

.sidebar-settings-trigger:hover,
.sidebar-settings-trigger[aria-expanded="true"] {
  background-color: #e2e8f0;
  color: #1e1e2f;
}

.sidebar-settings-trigger svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.sidebar-settings-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.sidebar-settings-menu[hidden] {
  display: none;
}

.sidebar-settings-user {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px 10px;
  border-bottom: 1px solid #e2e8f0;
}

.sidebar-settings-label {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sidebar-settings-username {
  font-size: 11px;
  font-weight: 400;
  color: #1e1e2f;
  /* Prefer a break at the <wbr> we insert before "@".
     Fall back to mid-word breaks only if the local-part or domain is on
     its own too long for the popover. */
  word-break: normal;
  overflow-wrap: break-word;
}

.sidebar-settings-logout {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #1e1e2f;
  background: transparent;
  border: none;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.15s, color 0.15s;
}

.sidebar-settings-logout:hover {
  background-color: #fef2f2;
  color: #dc2626;
}

.sidebar-settings-logout svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ---- Main Content ---- */
.main-content {
  margin-left: 195px;
  flex: 1;
  padding: 36px 40px;
}

.main-content h1 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 4px;
}

/* Pages whose primary content is a single full-width grid (Accounts,
   Households). The body fills exactly the viewport height and the grid
   fills the remaining vertical space inside the main content area, so the
   grid's internal horizontal scrollbar always sits at the bottom edge of
   the visible viewport instead of below the fold. */
body.app-grid-page {
  height: 100vh;
  overflow: hidden;
}

body.app-grid-page .main-content {
  display: flex;
  flex-direction: column;
}

/* ---- Chart Containers ---- */
.chart-card {
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 24px;
}

.chart-card h2 {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #1e1e2f;
}

.chart-wrapper {
  position: relative;
  width: 100%;
}

.chart-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 900px) {
  .chart-row {
    grid-template-columns: 1fr;
  }
}