/* ---------------------------------------------------------------------------
   B Health Care, Identity & Access
   ---------------------------------------------------------------------------
   The same design tokens as the B Health Care frontend (teal #099aa7, neutral
   greys, 0.5rem radius), written as plain CSS rather than pulled from Tailwind.

   That is a deliberate choice, not a shortcut. Tailwind here would mean a Node
   toolchain inside a Python image purely to generate a stylesheet for a dozen
   server-rendered pages, a second language in the build, a second lockfile,
   and a deploy that fails when npm does. The tokens below are the same values
   the React app resolves to, so the two look like one product.
--------------------------------------------------------------------------- */

:root {
  --background: #f7f7f7;
  --foreground: #171717;
  --card: #ffffff;
  --muted: #f4f4f5;
  --muted-foreground: #71717a;
  --subtle: #fafafa;

  --primary: #099aa7;
  --primary-hover: #078893;
  --primary-soft: #e6f6f8;
  --primary-border: #b3e2e7;
  --primary-foreground: #ffffff;

  --border: #e4e4e7;
  --input: #d4d4d8;
  --ring: #099aa7;

  --success: #128a5a;
  --success-soft: #e7f6ef;
  --warning: #a86213;
  --warning-soft: #fdf3e6;
  --danger: #c2352b;
  --danger-soft: #fdecea;

  --radius: 0.5rem;
  --radius-sm: 0.375rem;
  --radius-lg: 0.75rem;

  --shadow-sm: 0 1px 2px rgba(9, 9, 11, 0.05);
  --shadow: 0 1px 3px rgba(9, 9, 11, 0.08), 0 1px 2px rgba(9, 9, 11, 0.04);
  --shadow-lg: 0 10px 30px rgba(9, 9, 11, 0.08), 0 2px 8px rgba(9, 9, 11, 0.04);

  --sidebar-width: 248px;
  --font-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --font-mono:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

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

/* Any rule with a `display` beats the browser's default `[hidden]`, and this
   sheet has several: `.alert` is display:flex, so an alert marked hidden was
   still drawn. Every panel the passkey screens toggle is an alert, which is why
   the enrollment page showed an empty red box and an empty green one before
   anything had happened. */
[hidden] {
  display: none !important;
}

* {
  border-color: var(--border);
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--primary);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.011em;
}
h1 {
  font-size: 1.5rem;
}
h2 {
  font-size: 1.125rem;
}
h3 {
  font-size: 0.9375rem;
}
p {
  margin: 0 0 0.75rem;
}
p:last-child {
  margin-bottom: 0;
}

code,
kbd,
.mono {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

/* --- Layout ------------------------------------------------------------- */

.shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: var(--sidebar-width);
  flex: 0 0 var(--sidebar-width);
  background: var(--card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1.125rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

/* The mark itself now, not the initials. Same gradient treatment as an app
   tile, so the sidebar, the sign-in card and the browser tab all show one
   drawing rather than three near-misses. */
.brand-mark {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 9px;
  color: #fff;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg,
              color-mix(in srgb, var(--primary) 80%, white),
              var(--primary));
  box-shadow: 0 3px 8px color-mix(in srgb, var(--primary) 28%, transparent);
}

.brand-text {
  min-width: 0;
}
.brand-text strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
}
.brand-text span {
  display: block;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 0.625rem;
}
.nav-group {
  margin-bottom: 1.125rem;
}
.nav-group-label {
  padding: 0 0.625rem 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-foreground);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.4375rem 0.625rem;
  border-radius: var(--radius-sm);
  color: var(--foreground);
  font-size: 0.8125rem;
  font-weight: 500;
  margin-bottom: 1px;
}
.nav-item:hover {
  background: var(--muted);
  text-decoration: none;
}
.nav-item.is-active {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 600;
}
.nav-item .icon {
  flex: 0 0 16px;
  opacity: 0.7;
}
.nav-item.is-active .icon {
  opacity: 1;
}
.nav-item .count {
  margin-left: auto;
  font-size: 0.6875rem;
  color: var(--muted-foreground);
  background: var(--muted);
  border-radius: 999px;
  padding: 0.0625rem 0.4375rem;
}

.sidebar-footer {
  border-top: 1px solid var(--border);
  padding: 0.75rem 0.625rem;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.4375rem 0.625rem;
  border-radius: var(--radius-sm);
  color: var(--foreground);
}
.user-chip:hover {
  background: var(--muted);
  text-decoration: none;
}
.avatar {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  display: grid;
  place-items: center;
  font-size: 0.6875rem;
  font-weight: 700;
}
.avatar.lg {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  font-size: 0.875rem;
}
.user-chip-text {
  min-width: 0;
}
.user-chip-text strong {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-chip-text span {
  display: block;
  font-size: 0.6875rem;
  color: var(--muted-foreground);
}

.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 1.75rem;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar h1 {
  font-size: 1rem;
  font-weight: 600;
}
.topbar .spacer {
  flex: 1;
}

.content {
  padding: 1.75rem;
  max-width: 1240px;
  width: 100%;
}
.content.narrow {
  max-width: 760px;
}

.page-head {
  margin-bottom: 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}
.page-head .spacer {
  flex: 1;
}
.page-head p {
  color: var(--muted-foreground);
  margin: 0.25rem 0 0;
  max-width: 60ch;
}

/* --- Cards -------------------------------------------------------------- */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card-head {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.card-head .spacer {
  flex: 1;
}
.card-head p {
  color: var(--muted-foreground);
  font-size: 0.8125rem;
  margin: 0.125rem 0 0;
}
.card-body {
  padding: 1.25rem;
}
.card-body.tight {
  padding: 0.875rem 1.25rem;
}
.card-foot {
  padding: 0.875rem 1.25rem;
  border-top: 1px solid var(--border);
  background: var(--subtle);
  border-radius: 0 0 var(--radius) var(--radius);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.card-foot .spacer {
  flex: 1;
}

.grid {
  display: grid;
  gap: 1rem;
}
.grid.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* --- Stat tiles --------------------------------------------------------- */

.stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.125rem;
  box-shadow: var(--shadow-sm);
}
.stat .label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.stat .value {
  font-size: 1.75rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  margin-top: 0.25rem;
  line-height: 1.1;
}
.stat .note {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-top: 0.125rem;
}
.stat.attention {
  border-color: var(--warning);
  background: var(--warning-soft);
}
.stat.attention .value {
  color: var(--warning);
}
.stat.critical {
  border-color: var(--danger);
  background: var(--danger-soft);
}
.stat.critical .value {
  color: var(--danger);
}
.stat a {
  color: inherit;
}

/* --- Launcher tiles ----------------------------------------------------- */

.category-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.75rem 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-foreground);
}
.category-head:first-child {
  margin-top: 0;
}
.category-head .line {
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* --- Forms -------------------------------------------------------------- */

.field {
  margin-bottom: 1rem;
}
.field:last-child {
  margin-bottom: 0;
}
label,
.label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  margin-bottom: 0.3125rem;
}
.hint {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-top: 0.3125rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
input[type="search"],
select,
textarea {
  width: 100%;
  padding: 0.5rem 0.6875rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--foreground);
  background: var(--card);
  border: 1px solid var(--input);
  border-radius: var(--radius-sm);
  outline: none;
  transition:
    border-color 0.12s ease,
    box-shadow 0.12s ease;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px rgba(9, 154, 167, 0.14);
}

/* --- Checkbox and radio ---------------------------------------------------
   Drawn from scratch rather than tinted with accent-color, which only recolours
   whatever the platform already draws and leaves Windows, macOS and Android
   looking like three different products. `appearance: none` removes the native
   control; everything visible below is ours, and the input keeps its semantics,
   its label association and its keyboard behaviour. */

input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 0;
  border: 1.5px solid var(--input);
  border-radius: 5px;
  background: var(--card);
  cursor: pointer;
  position: relative;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.12s ease;
}
input[type="radio"] {
  border-radius: 999px;
}

input[type="checkbox"]:hover:not(:disabled),
input[type="radio"]:hover:not(:disabled) {
  border-color: var(--primary);
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background: var(--primary);
  border-color: var(--primary);
}

/* The tick is a rotated rectangle with two borders, so it scales with the box
   and needs no image, no font and no extra element. */
input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1.5px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(43deg);
}
input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 3.5px;
  border-radius: 999px;
  background: #fff;
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(9, 154, 167, 0.22);
  border-color: var(--primary);
}
input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* --- Select ---------------------------------------------------------------
   The native control is styled here and enhanced into a listbox by
   static/js/enhance.js. Both paths are real: with JavaScript the person gets a
   custom menu, without it they get this, which is a perfectly good select. The
   arrow is an inline SVG data URI so it needs no extra request and no icon
   font. */

select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5625rem center;
  background-size: 16px;
}
select::-ms-expand {
  display: none;
}
input[type="color"] {
  padding: 0.1875rem;
  height: 36px;
}
textarea {
  resize: vertical;
  min-height: 72px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}
input::placeholder,
textarea::placeholder {
  color: #a1a1aa;
}
input[readonly],
input:disabled {
  background: var(--muted);
  color: var(--muted-foreground);
}

.code-input {
  font-family: var(--font-mono);
  font-size: 1.5rem !important;
  letter-spacing: 0.32em;
  text-align: center;
  padding: 0.75rem !important;
}

.checkline {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.checkline input[type="checkbox"],
.checkline input[type="radio"] {
  margin-top: 0.125rem;
}
.checkline label {
  margin: 0;
  font-weight: 400;
  font-size: 0.8125rem;
}
.checkline strong {
  font-weight: 600;
}

.errorlist {
  list-style: none;
  margin: 0.3125rem 0 0;
  padding: 0;
  color: var(--danger);
  font-size: 0.75rem;
}
ul.errorlist li {
  margin-bottom: 0.125rem;
}

/* --- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  padding: 0.4688rem 0.875rem;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: 1px solid var(--input);
  background: var(--card);
  color: var(--foreground);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    opacity 0.12s ease;
}
.btn:hover {
  background: var(--muted);
  text-decoration: none;
}
.btn:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}
.btn-primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.btn-danger:hover {
  background: #a82c23;
  border-color: #a82c23;
}

.btn-ghost {
  border-color: transparent;
  background: transparent;
}
.btn-ghost:hover {
  background: var(--muted);
}

.btn-block {
  width: 100%;
}
.btn-lg {
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
}
.btn-sm {
  padding: 0.3125rem 0.625rem;
  font-size: 0.75rem;
}

/* --- Badges ------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  background: var(--muted);
  color: var(--muted-foreground);
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge.teal {
  background: var(--primary-soft);
  color: var(--primary);
  border-color: var(--primary-border);
}
.badge.green {
  background: var(--success-soft);
  color: var(--success);
}
.badge.amber {
  background: var(--warning-soft);
  color: var(--warning);
}
.badge.red {
  background: var(--danger-soft);
  color: var(--danger);
}
.badge .dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
}

/* --- Tables ------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
}
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
table.data th {
  text-align: left;
  padding: 0.5625rem 1rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
  background: var(--subtle);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
table.data td {
  padding: 0.6875rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
table.data tbody tr:last-child td {
  border-bottom: none;
}
table.data tbody tr:hover {
  background: var(--subtle);
}
table.data td.right,
table.data th.right {
  text-align: right;
}
.cell-primary {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.cell-primary strong {
  display: block;
  font-weight: 600;
}
.cell-primary span {
  display: block;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

/* --- Alerts ------------------------------------------------------------- */

.alert {
  display: flex;
  gap: 0.625rem;
  padding: 0.75rem 0.9375rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--muted);
  font-size: 0.8125rem;
  margin-bottom: 1rem;
}
.alert .icon {
  flex: 0 0 16px;
  margin-top: 1px;
}
.alert strong {
  display: block;
  font-weight: 600;
  margin-bottom: 0.125rem;
}
.alert.success {
  background: var(--success-soft);
  border-color: #b9e3cf;
  color: #0b5c3c;
}
.alert.warning {
  background: var(--warning-soft);
  border-color: #f0d8b4;
  color: #7a4610;
}
.alert.error {
  background: var(--danger-soft);
  border-color: #f3c4c0;
  color: #8f271f;
}
.alert.info {
  background: var(--primary-soft);
  border-color: var(--primary-border);
  color: #06626b;
}

/* --- Auth screens ------------------------------------------------------- */

.auth-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  padding: 2rem 1.25rem;
  background:
    radial-gradient(
      1000px 500px at 50% -12%,
      rgba(9, 154, 167, 0.09),
      transparent 62%
    ),
    var(--background);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 2rem;
}
.auth-card.wide {
  max-width: 560px;
}

.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.auth-brand .brand-mark { width: 46px; height: 46px; flex-basis: 46px; border-radius: 13px; }
.auth-brand h1 {
  font-size: 1.1875rem;
  text-align: center;
}
.auth-brand p {
  color: var(--muted-foreground);
  font-size: 0.8125rem;
  text-align: center;
  margin: 0;
}

.auth-foot {
  margin-top: 1.25rem;
  padding-top: 1.125rem;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.125rem 0;
  color: var(--muted-foreground);
  font-size: 0.75rem;
}
.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.factor-tabs {
  display: flex;
  gap: 0.375rem;
  margin-bottom: 1.125rem;
  flex-wrap: wrap;
}
.factor-tab {
  flex: 1 1 auto;
  padding: 0.4375rem 0.625rem;
  border: 1px solid var(--input);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
  color: var(--muted-foreground);
  background: var(--card);
}
.factor-tab:hover {
  background: var(--muted);
  text-decoration: none;
}
.factor-tab.is-active {
  background: var(--primary-soft);
  border-color: var(--primary-border);
  color: var(--primary);
  font-weight: 600;
}

/* --- Recovery codes / secrets ------------------------------------------- */

.code-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  padding: 1rem;
  background: var(--subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.875rem;
}
.code-grid span {
  padding: 0.25rem 0.5rem;
  background: var(--card);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  text-align: center;
}

.secret-box {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.6875rem 0.875rem;
  background: var(--subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  word-break: break-all;
}
.secret-box .value {
  flex: 1;
  min-width: 0;
}

.qr {
  display: grid;
  place-items: center;
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.qr img,
.qr svg {
  width: 190px;
  height: 190px;
  display: block;
}

/* --- Misc --------------------------------------------------------------- */

.muted {
  color: var(--muted-foreground);
}
.small {
  font-size: 0.75rem;
}
.tiny {
  font-size: 0.6875rem;
}
.strong {
  font-weight: 600;
}
.nowrap {
  white-space: nowrap;
}
.text-danger {
  color: var(--danger);
}
.text-warning {
  color: var(--warning);
}
.text-success {
  color: var(--success);
}
.mt-0 {
  margin-top: 0;
}
.mt-1 {
  margin-top: 0.5rem;
}
.mt-2 {
  margin-top: 1rem;
}
.mt-3 {
  margin-top: 1.5rem;
}
.mb-0 {
  margin-bottom: 0;
}
.mb-1 {
  margin-bottom: 0.5rem;
}
.mb-2 {
  margin-bottom: 1rem;
}
.mb-3 {
  margin-bottom: 1.5rem;
}

.empty {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--muted-foreground);
}
.empty .icon {
  opacity: 0.4;
  margin-bottom: 0.75rem;
}
.empty h3 {
  font-size: 0.9375rem;
  margin-bottom: 0.25rem;
  color: var(--foreground);
}

.toolbar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.toolbar .grow {
  flex: 1;
  min-width: 180px;
}
.toolbar select,
.toolbar input {
  font-size: 0.8125rem;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  padding: 1rem;
}

.meter {
  height: 5px;
  background: var(--muted);
  border-radius: 999px;
  overflow: hidden;
}
.meter > i {
  display: block;
  height: 100%;
  background: var(--primary);
  border-radius: 999px;
}
.meter.warn > i {
  background: var(--warning);
}
.meter.bad > i {
  background: var(--danger);
}

.access-list {
  display: grid;
  gap: 0.5rem;
}
.access-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6875rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
}
.access-row:hover {
  background: var(--subtle);
}
/* Status chips inside a row: same footprint as an app icon so a list mixing
   the two does not look ragged, but a flat colour, because these report a
   state rather than identify a product. */
.access-row .tile-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: #fff;
  flex: 0 0 32px;
}
.access-row .spacer {
  flex: 1;
}
/* Nothing to restate: the control is the same everywhere by design. */
.access-row.disabled {
  opacity: 0.55;
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 900px) {
  .sidebar {
    display: none;
  }
  .content {
    padding: 1.25rem;
  }
  .topbar {
    padding: 0.875rem 1.25rem;
  }
  .grid.cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid.cols-3,
  .grid.cols-2 {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 520px) {
  .grid.cols-4 {
    grid-template-columns: 1fr;
  }
  .auth-card {
    padding: 1.5rem;
  }
  .code-grid {
    grid-template-columns: 1fr;
  }
}

/* Print, recovery codes are the one thing here people legitimately print. */
@media print {
  .sidebar,
  .topbar,
  .btn,
  .no-print {
    display: none !important;
  }
  body {
    background: #fff;
  }
  .card,
  .auth-card {
    box-shadow: none;
    border-color: #ccc;
  }
}

/* ---------------------------------------------------------------------------
   Custom select
   ---------------------------------------------------------------------------
   Paired with static/js/enhance.js. The native <select> stays in the form and
   is only hidden from view, so `.cselect-native` must not be display:none:
   that would take it out of the accessibility tree and, in some browsers, out
   of form validation reporting. Clipping it to a pixel is the standard way to
   keep an element real but invisible.
--------------------------------------------------------------------------- */

.cselect {
  position: relative;
  width: 100%;
}

.cselect-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.cselect-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.6875rem;
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  color: var(--foreground);
  background: var(--card);
  border: 1px solid var(--input);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    border-color 0.12s ease,
    box-shadow 0.12s ease;
}
.cselect-trigger:hover:not(:disabled) {
  border-color: #b8b8bf;
}
.cselect-trigger:focus-visible,
.cselect.is-open .cselect-trigger {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px rgba(9, 154, 167, 0.14);
}
.cselect-trigger:disabled {
  background: var(--muted);
  color: var(--muted-foreground);
  cursor: not-allowed;
}
.cselect-trigger.is-placeholder .cselect-label {
  color: var(--muted-foreground);
}

.cselect-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cselect-caret {
  display: flex;
  color: var(--muted-foreground);
  transition: transform 0.15s ease;
}
.cselect.is-open .cselect-caret {
  transform: rotate(180deg);
}

.cselect-menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  padding: 0.25rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  animation: cselect-in 0.12s ease;
}
.cselect.drop-up .cselect-menu {
  top: auto;
  bottom: calc(100% + 4px);
}

@keyframes cselect-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cselect-menu {
    animation: none;
  }
  .cselect-caret {
    transition: none;
  }
  .app-tile,
  .app-tile .tile-icon,
  .app-tile .tile-go {
    transition: none;
  }
}

.cselect-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.5625rem;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  color: var(--foreground);
  cursor: pointer;
  user-select: none;
}
.cselect-option.is-active {
  background: var(--muted);
}
.cselect-option.is-selected {
  color: var(--primary);
  font-weight: 600;
}
.cselect-option.is-selected::after {
  content: "";
  margin-left: auto;
  width: 5px;
  height: 9px;
  border: solid var(--primary);
  border-width: 0 2px 2px 0;
  transform: rotate(43deg) translateY(-1px);
}
.cselect-option[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Compact variant for the filter toolbars, where a select sits beside inputs. */
.toolbar .cselect {
  width: auto;
  min-width: 150px;
}
.toolbar .cselect-trigger {
  font-size: 0.8125rem;
}

/* ---------------------------------------------------------------------------
   Application tiles
   ---------------------------------------------------------------------------
   The icon carries the identity of an app, so it gets the room to do it: a
   44px rounded square with a gradient derived from the app's own accent and a
   soft glow of the same colour beneath it. The gradient is built with
   color-mix, so one stored hex per app produces the whole treatment rather
   than asking somebody to pick two.
--------------------------------------------------------------------------- */

.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 0.875rem;
}

.app-tile {
  --accent: var(--primary);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.125rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  color: var(--foreground);
  overflow: hidden;
  transition:
    box-shadow 0.18s ease,
    transform 0.18s ease,
    border-color 0.18s ease;
}
.app-tile::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.app-tile:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}
.app-tile:hover::before {
  opacity: 1;
}
.app-tile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.app-tile .tile-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(
    140deg,
    color-mix(in srgb, var(--accent) 80%, white),
    var(--accent)
  );
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
  transition: transform 0.18s ease;
}
.app-tile:hover .tile-icon {
  transform: scale(1.04) rotate(-2deg);
}

.app-tile .tile-body {
  min-width: 0;
}
.app-tile strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.app-tile span {
  display: block;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  margin-top: 0.1875rem;
  line-height: 1.45;
}

.app-tile .tile-go {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
  margin-top: auto;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}
.app-tile:hover .tile-go {
  opacity: 1;
  transform: none;
}

/* The same treatment, smaller, wherever an app is listed rather than launched. */
.tile-icon.sm {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(
    140deg,
    color-mix(in srgb, var(--accent, var(--primary)) 80%, white),
    var(--accent, var(--primary))
  );
}

/* ---------------------------------------------------------------------------
   Icon picker and colour swatches
--------------------------------------------------------------------------- */

.icon-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 0.375rem;
  max-height: 188px;
  overflow-y: auto;
  padding: 0.5rem;
  border: 1px solid var(--input);
  border-radius: var(--radius-sm);
  background: var(--subtle);
}
.icon-picker label {
  position: relative;
  margin: 0;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--card);
  color: var(--muted-foreground);
  cursor: pointer;
  transition:
    color 0.12s ease,
    border-color 0.12s ease,
    background 0.12s ease;
}
.icon-picker label:hover {
  color: var(--foreground);
  border-color: var(--input);
}
.icon-picker input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}
.icon-picker label:has(input:checked) {
  background: var(--primary-soft);
  border-color: var(--primary-border);
  color: var(--primary);
}
.icon-picker label:has(input:focus-visible) {
  box-shadow: 0 0 0 3px rgba(9, 154, 167, 0.2);
}

.swatches {
  display: flex;
  gap: 0.4375rem;
  flex-wrap: wrap;
}
.swatches label {
  position: relative;
  margin: 0;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  transition: transform 0.12s ease;
}
.swatches label:hover {
  transform: scale(1.08);
}
.swatches input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}
.swatches label:has(input:checked) {
  transform: scale(1.08);
}
.swatches label:has(input:checked)::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 7px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(43deg);
}

/* --- Selectable rows -------------------------------------------------------
   An access row is a whole clickable target, so it gets the affordance of one
   rather than leaving a 17px checkbox as the only thing worth aiming at. */

.access-row:has(input[type="checkbox"]:checked) {
  border-color: var(--primary-border);
  background: var(--primary-soft);
}
.access-row:has(input[type="checkbox"]:focus-visible) {
  box-shadow: 0 0 0 3px rgba(9, 154, 167, 0.16);
}
.access-row {
  transition:
    background 0.12s ease,
    border-color 0.12s ease;
}