/*
 * Cloud shell styles — the equivalent of Matmon's scoped _Layout.cshtml.css
 * (bundled there as Matmon.Host.styles.css). Matmon.Cloud has no scoped-CSS
 * pipeline, so the same rules live here and load AFTER site.css. Keep in sync
 * with src/Matmon.Host/Pages/Shared/_Layout.cshtml.css in the Matmon repo.
 */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: linear-gradient(180deg, var(--matmon-sidebar-bg), var(--matmon-sidebar-bg-2));
  border-right: 1px solid var(--matmon-sidebar-item-border);
}

.brand {
  color: var(--matmon-foreground);
  font-size: 0.96rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: none;
}

.brand:hover {
  color: var(--matmon-accent);
}

/*
 * Cloud content panels are plain .panel cards (not Matmon's .panel-stack), so the header would sit
 * flush against the card's left/top edge and read too small. Inset it to line up with the card body
 * and give the section title a clearer size — applied app-wide for consistent headings.
 */
.app-content .panel > .panel-header {
  padding: 0.9rem 1.1rem 0;
  margin-bottom: 0;
}

.app-content .panel > .panel-header .section-title,
.app-content .panel > .panel-header h2 {
  font-size: 1.02rem;
  font-weight: 700;
}

/* Give the card body a consistent inset too, so pages don't each hand-roll padding on the first child. */
.app-content .panel > .panel-header + div {
  padding-top: 0.6rem;
}

/* One shared list-table style across every cloud page, matching the Matmon aesthetic: muted uppercase
   header, subtle row separators + hover, tabular numbers. Use <table class="cloud-table">. */
.cloud-table {
  width: 100%;
  border-collapse: collapse;
}

.cloud-table thead th {
  text-align: left;
  padding: 0.5rem 0.65rem;
  border-bottom: 1px solid var(--matmon-border);
  color: var(--matmon-muted);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cloud-table tbody td {
  padding: 0.5rem 0.65rem;
  border-bottom: 1px solid var(--matmon-border);
  vertical-align: middle;
}

.cloud-table tbody tr:last-child td {
  border-bottom: 0;
}

.cloud-table tbody tr:hover {
  background: rgba(95, 141, 255, 0.05);
}

.cloud-table .t-right { text-align: right; }
.cloud-table .t-muted { color: var(--matmon-muted); white-space: nowrap; }
.cloud-table .t-num { text-align: right; font-variant-numeric: tabular-nums; }
.cloud-table .t-strong { font-weight: 700; }

/* --- Anonymous (login / register / setup) layout: centered logo, form below, footer at the bottom. --- */
.auth-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
}

.auth-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 22px;
  width: 100%;
}

.auth-logo {
  display: inline-flex;
  color: var(--matmon-accent);
}

.auth-logo svg {
  width: 54px;
  height: 54px;
}

.auth-brand {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-top: 12px;
}

.auth-card {
  width: 100%;
  max-width: 400px;
}

.auth-footer {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  padding: 14px 0 4px;
  color: var(--matmon-muted);
  font-size: 0.8rem;
}

.auth-footer .sidebar-icon-button {
  color: var(--matmon-muted);
}

/* Primary "Add" action for list pages: sits below the list (after the pager), left-aligned. */
.list-add-row {
  margin-top: 16px;
  display: flex;
  justify-content: flex-start;
}