:root {
  --primary: #1f1fff;
  --primary-foreground: #fff;
  --ring: #1f1fff;
  --gradient: linear-gradient(135deg, rgba(31, 31, 255, 0.04) 0%, rgba(31, 31, 255, 0.02) 45%, rgba(31, 31, 255, 0) 100%);
}

/* Sidebar layout: centered main content; login-style (no sidebar): centered card. */
[data-sidebar-layout] > main > article {
  max-width: 80rem;
  margin-inline: auto;
  padding: var(--space-6);
}

body:not([data-sidebar-layout]) > main {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-5);

  & > article {
    width: 100%;
    max-width: 24rem;
  }
}

[data-sidebar] {
  & > footer {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  & .sub-nav {
    list-style: none;
    padding-inline-start: var(--space-4);
    margin: var(--space-1) 0 var(--space-2);
    border-inline-start: 1px solid var(--border);
  }
}

nav[data-topnav] {
  background: var(--gradient);
}

.badge { text-transform: uppercase; }
.console-log { margin-top: var(--space-16); }

/* Utilities oat doesn't cover. */
.m-0 { margin: 0; }
.flex-wrap { flex-wrap: wrap; }
.items-end { align-items: flex-end; }
.inline-form { display: inline; }

/* Standard page/card header with a title on the left and actions on the right. */
.page-header {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: var(--space-6);

  & > h1 { margin: 0; }
}

/* Sticky bulk-action bar (e.g. rooms list when selecting). */
.sticky-actions {
  position: sticky;
  bottom: 0;
  background: var(--background);
  border-top: 1px solid var(--border);
  padding: var(--space-4);
  margin-top: var(--space-4);
}

/* Dashboard stats. */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-4);
}

.stat {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  background-image: var(--gradient);

  & .kv { margin: 0; padding: 0; }
}

.stat-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);

  & small:first-child {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: var(--font-semibold);
    color: var(--muted-foreground);
  }
  & a { text-decoration: none; }
}

.stat-value {
  font-size: var(--text-1);
  font-weight: var(--font-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-block: var(--space-1) var(--space-2);

  & .stat-suffix {
    font-size: var(--text-4);
    color: var(--muted-foreground);
    font-weight: var(--font-medium);
    margin-inline-start: .15em;
  }
}

.stat-sub {
  color: var(--muted-foreground);
  font-size: var(--text-8);
}

.kv-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: 1px dashed var(--border);

  &:last-child { border-bottom: 0; }
  & dt, & dd { margin: 0; }
}

.kv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-7);

  & th, & td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    text-align: left;
  }
  & th {
    width: 40%;
    color: var(--muted-foreground);
    font-weight: var(--font-medium);
  }
  & tr:last-child th, & tr:last-child td { border-bottom: 0; }
  & code { word-break: break-word; }
}

.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--space-4);
}

.login-form {
  fieldset.group select {
    max-width: 40%;
    flex: 0 0 40%;
  }
  .homeserver label {
    margin-bottom: var(--space-1);
  }
}