:root {
  --gxlms-sidebar: 280px;
  --gxlms-topbar-height: 70px;
}

html, body {
  height: 100%;
  margin: 0;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: #f5f5f5;
}

.gxlms-shell {
  display: grid;
  grid-template-rows: var(--gxlms-topbar-height) auto 1fr;
  grid-template-columns: var(--gxlms-sidebar) 1fr;
  grid-template-areas:
    "topbar topbar"
    "billing billing"
    "sidebar content";
  height: 100vh;
}

.gxlms-topbar { grid-area: topbar; }
.gxlms-billing { grid-area: billing; }
.gxlms-sidebar { grid-area: sidebar; overflow-y: auto; }
.gxlms-content {
  grid-area: content;
  min-width: 0;
  overflow: auto;
  padding: 1rem;
}

/* Tablet + mobile: drop the persistent sidebar column. The sidebar becomes
   an off-canvas drawer (see app-theme.css) toggled by the topbar hamburger. */
@media (max-width: 1200px) {
  .gxlms-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "billing"
      "content";
  }
}

/* Expense list row status colors - use background-color to compose with hover */
tr.expense-row-draft td { background-color: #f3f4f6; }
tr.expense-row-submitted td { background-color: #fefce8; }
tr.expense-row-approved td { background-color: #f0fdf4; }
tr.expense-row-rejected td { background-color: #fff1f2; }
tr.expense-row-paid td { background-color: #eff6ff; }
tr.expense-row-posted td { background-color: #dcfce7; }
tr.expense-row-cancelled td { background-color: #fef2f2; }