/* casa-mail staff UI. Follows the CASA staff app (casa-frontend, Angular Material indigo with the CASA ink toolbar):
   4px corners, compact spacing, dense 24px table rows, underline form fields. */
:root {
  /* casa-frontend colours */
  --bar: #2B2347;            /* --casa-ink: toolbar and footer */
  --menu: #403959;           /* side nav, rgba(43,35,71,.9) on paper */
  --paper: #FAFAFA;
  --primary: #3F51B5;        /* Material indigo */
  --primary-soft: #E8EAF6;
  --primary-ink: #303F9F;
  --accent: #EF3B4E;         /* logo mark */
  --sky: #3DABFF;            /* --casa-accent: table hover */
  --link: #275564;           /* breadcrumb and link colour */
  --crumbs: #EAEAEA;
  --stripe: #F0F4FF;
  --hover: rgba(61, 171, 255, .2);
  --ink: rgba(0, 0, 0, .87);
  --muted: rgba(0, 0, 0, .6);
  --line: rgba(0, 0, 0, .12);
  --field-line: rgba(0, 0, 0, .42);
  --danger: #C62828;
  /* Radius scale: Material's 4px everywhere, pills for chips and status tags */
  --radius-xs: 2px;
  --radius-sm: 4px;          /* inputs, buttons, notices */
  --radius-md: 4px;          /* boxes, alerts inside cards */
  --radius-lg: 4px;          /* cards, tiles, the login card */
  --radius-pill: 999px;
  /* Spacing scale (CASA is compact: 10px page padding, 16px card padding) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 32px;
  --space-7: 48px;
  /* Material elevations used by casa-frontend: cards are z5, raised buttons z2, flat cards z1 */
  --shadow-1: 0 2px 1px -1px rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12);
  --shadow-2: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
  --shadow-5: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 5px 8px 0 rgba(0, 0, 0, .14), 0 1px 14px 0 rgba(0, 0, 0, .12);
  --page-pad: var(--space-3);
  --card-pad: var(--space-4);
  /* Type and density */
  --text-table: 12px;
  --row-h: 24px;
  --btn-h: 36px;
  --btn-xs-h: 26px;
}
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.43;
}
a { color: var(--link); }
a:hover { color: #163844; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.topbar :focus-visible, .nav :focus-visible, .foot :focus-visible { outline-color: #fff; }
input[type=checkbox], input[type=radio] { accent-color: var(--primary); width: 16px; height: 16px; margin: 0; }
svg { flex: none; }

/* Shell */
.page { min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  min-height: 64px; padding: 0 var(--space-2);
  background: var(--bar); color: #fff;
}
.burger {
  width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.burger { margin-right: var(--space-2); }
.fullscreen {
  width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer;
  display: none; align-items: center; justify-content: center; padding: 0;
}
@media (min-width: 960px) { .fullscreen { display: inline-flex; } }  /* lib-ui-header: hidden below 960px */
.burger:hover, .warn:hover, .fullscreen:hover { background: rgba(255, 255, 255, .08); }
.topbar .brand { display: flex; align-items: center; gap: var(--space-3); margin-right: var(--space-3); color: #fff; text-decoration: none; border-radius: var(--radius-sm); }
.topbar .brand b { font-size: 18px; font-weight: 500; }
.mark { display: block; width: 50px; height: auto; }  /* casa_brand.png in a 50px brand cell, as lib-ui-header */
.spacer { flex: 1 1 auto; }
.picker { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; color: rgba(255, 255, 255, .85); }
.picker label { display: flex; align-items: center; gap: var(--space-2); }
.picker select {
  height: 32px; padding: 0 var(--space-2); border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, .3); background: #3A3159; color: #fff; font: inherit;
}
.warn { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: #fff; border-radius: 50%; }
.warn span {
  position: absolute; top: -3px; right: -3px; min-width: 22px; height: 22px; padding: 0 var(--space-1);
  border-radius: var(--radius-pill); background: var(--primary); color: #fff; font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.usermenu { position: relative; }
.who {
  display: flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-2); border: 0;
  border-radius: var(--radius-sm); background: transparent; color: #fff; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 500; letter-spacing: .0892857em;
}
.who:hover, .who[aria-expanded=true] { background: rgba(255, 255, 255, .08); }
/* User menu as casa-frontend's mat-menu (xPosition="before", class user-menu): under the button, right edges
   aligned; 112–280px wide, 8px panel padding, text-only items (no icons) with 28px line height, 4px vertical and 16px
   side padding, 14px black text, 4px corners, z8 shadow, hover rgba(61,171,255,.4) (styles.scss); mat-divider. */
.menu {
  position: absolute; top: 100%; right: 0; z-index: 20; min-width: 112px; max-width: min(280px, calc(100vw - 16px));
  padding: var(--space-2) 0; background: #fff; color: rgba(0, 0, 0, .87); border-radius: var(--radius-sm);
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
}
.menu:focus { outline: none; }
.menu[hidden] { display: none; }
.menu form { margin: 0; }
.menu [role=menuitem] {
  display: flex; align-items: center; gap: var(--space-4); width: 100%; min-height: 0; line-height: 28px; padding: 4px var(--space-4);
  border: 0; background: transparent; color: #000; font: inherit; font-size: 14px; font-weight: 400; letter-spacing: normal;
  text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.menu [role=menuitem]:hover, .menu [role=menuitem]:focus { background: rgba(61, 171, 255, .4); outline: none; }
.menu .sep { height: 1px; margin: 0; background: rgba(0, 0, 0, .12); }

.body { display: flex; flex: 1 1 auto; min-height: 0; }
.nav {
  flex: 0 0 200px; width: 200px; background: var(--menu); color: #fff;
  padding: var(--space-2) 0; display: flex; flex-direction: column;
  box-shadow: var(--shadow-5); z-index: 1;
}
/* The links are casa-frontend's top-level nav items (Deltagarrapporter, Statistik): dense mat-list-items, 40px high,
   14px regular white text, a 24px icon 10px from it, 23px from the left edge. */
.nav a, .nav button {
  display: flex; align-items: center; gap: var(--space-3); min-height: 40px;
  padding: 2px var(--space-4) 2px 23px;
  color: #fff; text-decoration: none; font-size: 14px; font-weight: 400; line-height: 1.25;
}
.nav a:hover, .nav button:hover { background: rgba(0, 0, 0, .2); }
.nav a[aria-current=page] { background: rgba(0, 0, 0, .2); }
.nav :focus-visible { outline-offset: -3px; }
.nav hr { width: 100%; height: 1px; border: 0; background: rgba(255, 255, 255, .15); margin: var(--space-2) 0; }
.nav form { margin: 0; }
.nav button { width: 100%; border: 0; background: transparent; font: inherit; cursor: pointer; text-align: left; }
.page.nav-collapsed .nav { display: none; }
.main-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.crumbs {
  display: flex; align-items: center; flex-wrap: nowrap; overflow: hidden; min-height: 35px; padding: 0 var(--space-5); position: relative;
  background: var(--crumbs); font-size: 14px; color: var(--link);
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12);
}
.crumbs a { text-decoration: none; border-radius: var(--radius-xs); }
.crumbs a, .crumbs span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumbs a:hover { text-decoration: underline; }
.crumbs i { font-style: normal; margin: 0 var(--space-3); }
main { flex: 1 1 auto; padding: 15px var(--page-pad) var(--page-pad); display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
/* Page titles as base-search-page: mat-typography h1 (24px/32px, 400) 15px under the breadcrumb and 16px above the
   first card, with the page's icon in front */
h1.title { margin: 0 0 6px; font-size: 24px; font-weight: 400; line-height: 32px; display: flex; align-items: center; gap: var(--space-2); }
.foot { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 10px; background: var(--bar); color: #fff; font-size: 14px; }
.foot u { text-decoration: underline; }
.wrap { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.dash-page, #dash { gap: 20px; }  /* the start page column: fxLayoutGap="20px" */
.messages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }

/* Cards and panels */
.card {
  max-width: 1000px; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-5);
  padding: var(--card-pad);
}
.card.flat { box-shadow: var(--shadow-1); }
.panel {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-5);
  padding: var(--card-pad); display: flex; flex-direction: column; gap: var(--space-3); min-width: 0;
}
.panel.compact { gap: var(--space-2); }
.panel.results { padding: var(--space-3) var(--space-4) var(--space-2); gap: var(--space-2); }
.panel.results.tabbed { padding-top: 0; }
.panel h2 { margin: 0; font-size: 20px; font-weight: 500; }
.panel h2.h-sm, .panel h3 { margin: 0; font-size: 15px; font-weight: 500; color: var(--ink); }
.panel h2.h-md { font-size: 16px; }
.panel .head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.panel .head.start { justify-content: flex-start; }
h2.section { margin: var(--space-3) 0; font-size: 20px; font-weight: 500; line-height: 32px; }  /* 20px above and below, as fxLayoutGap="20px" */
.row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.row.top { gap: 20px; }  /* the filter card and its side column: fxLayoutGap="20px" */
.row > * { min-width: 0; }
.row.top { align-items: flex-start; }
.row .wide { flex: 2 1 560px; min-width: 0; }
.row .narrow { flex: 1 1 300px; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
/* The column beside a filter card: 490px of z5 expansion panels and notes, 10px apart (as Projekt/Taggar/Historik) */
.side { flex: 0 1 490px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.help { font-size: 13px; line-height: 1.5; color: rgba(0, 0, 0, .75); }
.help p { margin: 0; }

/* Text helpers */
.small { margin: 0; font-size: 12px; color: var(--muted); }
.note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); max-width: 900px; }
.mb { margin-bottom: var(--space-2); }
.wrap-any { overflow-wrap: anywhere; }
.strong { font-weight: 500; }
.num { text-align: right !important; }
.mono { font-family: 'Roboto Mono', monospace; }
.date { white-space: nowrap; }  /* see the nowrap_dates filter */
.bad { color: #A1192B; }
.dim { color: var(--muted); }
.good { color: #1E6B34; font-weight: 500; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: var(--space-2); }

/* Tables as casa-frontend's lib-ui-table (mat-table): 24px header and rows, 12px text (line-height 14px), 500-weight
   headers, a 1px rgba(0,0,0,.12) rule above the header and every row, #F0F4FF on even rows, rgba(61,171,255,.2) on
   hover, cells padded 4px vertically. Horizontal padding is 8px so the columns never touch. */
.tablewrap { overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .3) transparent; }
.t { width: 100%; border-collapse: collapse; font-size: var(--text-table); line-height: 14px; }
.t th {
  font-weight: 500; font-size: var(--text-table); text-align: left; color: var(--ink);
  padding: 0 var(--space-2); height: var(--row-h); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.t td { padding: 4px var(--space-2); height: var(--row-h); white-space: nowrap; border-top: 1px solid var(--line); }
.t th.sel, .t td:has(> input[type=checkbox]:only-child) { width: 28px; padding-right: 0; }
.t tbody tr:nth-child(even) td { background: var(--stripe); }
.t tbody tr:hover td { background: var(--hover); }
/* Long cells are cut with an ellipsis (the full text is in the title) so tables fit their card */
.t td.clip { max-width: 0; min-width: 90px; overflow: hidden; text-overflow: ellipsis; }  /* the column takes its th's share */
.t th.w-l { width: 24%; }
.t th.w-m { width: 18%; }
.t th.w-s { width: 12%; }
.t td.m { font-family: 'Roboto Mono', monospace; white-space: normal; overflow-wrap: anywhere; max-width: 420px; }
/* Row actions: always the last column, right-aligned, compact */
.t th.act, .t td.act { width: 1%; text-align: right; padding-top: 1px; padding-bottom: 1px; }
.t td.act .actions { justify-content: flex-end; flex-wrap: nowrap; gap: var(--space-1); }
.t input[type=checkbox] { width: 14px; height: 14px; vertical-align: middle; }
/* Below 960px lib-ui-table stacks: the header row is hidden (still read out), every row is a block with a #A0A0A0
   rule, every cell a right-aligned 18px line with its column name (data-label) in capitals on the left. */
@media (max-width: 959.98px) {
  .t thead th { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
  .t thead tr { border: 0; }
  .t, .t tbody { display: block; }
  .t tbody tr { display: block; border-bottom: 1px solid #A0A0A0; }
  .t tbody tr:first-of-type { border-top: 1px solid #A0A0A0; }
  .t td {
    display: block; height: auto; min-height: 18px; padding: 0 5px; line-height: 18px; text-align: right;
    border-top: 0; border-bottom: 1px solid #DDD; white-space: normal; overflow-wrap: anywhere;
  }
  .t td:last-child { border-bottom: 0; }
  .t td::before { content: attr(data-label); float: left; margin-right: var(--space-2); text-transform: uppercase; }
  .t td.clip { max-width: none; min-width: 0; }
  .t td.m { max-width: none; }
  .t td[colspan] { text-align: left; }
  .t td:has(> input[type=checkbox]:only-child) { width: auto; text-align: left; }
  .t td.act { width: auto; padding: 2px 5px; }
  .tablewrap { overflow-x: visible; }
}

/* Form fields as casa-frontend's mat-form-field (filled appearance, white fill, square container, no side padding):
   14px text and label; the label sits in the field while it is empty and floats up to 12px above it on focus or
   with a value; 1px rgba(0,0,0,.42) underline, 2px primary on focus, red (#F44336) when invalid; 11px hint/error. */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--space-1) var(--space-4); }
/* A field is 56px high like a filled mat-form-field: the floated label 8px from the top, the value above the
   underline at the bottom; the empty label sits in the middle (28px down). */
.f { position: relative; display: flex; flex-direction: column; padding-top: 24px; font-size: 14px; color: var(--muted); }
.f .lbl {
  position: absolute; left: 0; top: 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; line-height: 16px; color: var(--muted); pointer-events: none;
  transition: transform .15s, font-size .15s, color .15s;
}
.f .req { margin-left: 2px; }
/* Empty, unfocused text fields: the label is shown inside the field, in place of the (hidden) placeholder */
.f:has(> input:placeholder-shown:not(:focus)) .lbl { transform: translateY(12px); font-size: 14px; }
.f input::placeholder, .aa input::placeholder { color: transparent; }
.f input:focus::placeholder, .aa input:focus::placeholder { color: rgba(0, 0, 0, .42); }
.f:focus-within .lbl { color: var(--primary); }
.f input:not([type=checkbox]):not([type=radio]), .f select,
.aa input:not([type=checkbox]):not([type=radio]) {
  height: 32px; width: 100%; padding: 0; margin: 0;
  border: 0; border-bottom: 1px solid var(--field-line); border-radius: 0; background: transparent;
  font: inherit; font-size: 14px; font-weight: 400; color: var(--ink);
}
.f select {
  appearance: none; -webkit-appearance: none; padding-right: 24px; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='5'%3E%3Cpath d='M0 0l5 5 5-5z' fill='rgba(0,0,0,.54)'/%3E%3C/svg%3E") no-repeat right 6px center;
}
.f input[type=date]::-webkit-calendar-picker-indicator { opacity: .54; cursor: pointer; }
.f input:hover, .f select:hover, .aa input:hover { border-bottom-color: var(--ink); }
.f input:focus, .f select:focus, .aa input:focus {
  border-bottom-color: var(--primary); box-shadow: 0 1px 0 var(--primary); outline: none;
}
.f input:disabled, .f select:disabled { color: rgba(0, 0, 0, .38); border-bottom-style: dotted; cursor: default; }
.f:has(input:disabled) .lbl { color: rgba(0, 0, 0, .38); }
.f:has(.err) input, .f:has(.err) select, .f:has([aria-invalid=true]) input { border-bottom-color: #F44336; box-shadow: 0 1px 0 #F44336; }
.f:has(.err) .lbl, .f:has([aria-invalid=true]) .lbl { color: #F44336; }
.f .err, .errorlist { color: #F44336; font-size: 11px; line-height: 1.4; margin: 4px 0 0; padding: 0; list-style: none; }
.f .hint { font-size: 11px; color: var(--muted); margin-top: 4px; }
/* lib-ui-boolean: a lib-ui-label (10px label in a 20px row) above the slide toggle, 10px above the field */
.f.check { padding-top: 0; margin-top: 10px; font-size: 14px; color: var(--ink); align-items: flex-start; }
.f.check .fl { height: 20px; padding-top: 2px; font-size: 10px; color: rgba(0, 0, 0, .54); }
/* Material slide toggle for boolean filters (still a checkbox for forms and assistive technology) */
input.switch {
  appearance: none; -webkit-appearance: none; position: relative; width: 36px; height: 14px; margin: 3px 0;
  border-radius: 7px; background: #E0E0E0; cursor: pointer; flex: none;
}
input.switch::before {
  content: ''; position: absolute; top: -3px; left: -3px; width: 20px; height: 20px; border-radius: 50%;
  background: #616161 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16'%3E%3Cpath fill='white' d='M20 13H4v-2h16v2z'/%3E%3C/svg%3E") no-repeat center / 16px;
  box-shadow: var(--shadow-1); transition: transform .15s;
}
input.switch:checked { background: #7986CB; }
input.switch:checked::before {
  background-color: var(--primary); transform: translateX(22px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16'%3E%3Cpath fill='white' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
}
input.switch:focus-visible { outline-offset: 5px; }
.f.code .lbl { font-size: 12px; }
.f.code input { letter-spacing: 4px; font-size: 18px !important; }
.toolbar { display: flex; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-1); }
.toolbar h1, .toolbar h1.title { margin: 0; font-size: 24px; font-weight: 400; flex: 1 1 auto; align-self: center; }
.toolbar .f { min-width: 220px; }
/* Dashboard auto-refresh status: small muted text and a refresh button; the failed text takes the label's place. */
.live { display: flex; align-items: center; gap: var(--space-1); align-self: center; }
.live .live-failed { display: none; color: #F44336; }
.live.failed .live-ok { display: none; }
.live.failed .live-failed { display: inline; }
.live-btn { display: inline-flex; padding: 4px; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.live-btn:hover, .live-btn:focus-visible { background: rgba(0, 0, 0, .08); color: var(--ink); }
.live-btn .mi { transition: opacity .2s; }
.live.htmx-request .live-btn .mi { animation: live-spin 1s linear infinite; }
@keyframes live-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .live.htmx-request .live-btn .mi { animation: none; opacity: .4; } }
/* Filter card as casa-frontend's search forms (event-search): a 490px z5 card, the fields one per row (fxFlex 100)
   or in pairs (fxFlex 50) with 10px between, the search-form-footer's two equal buttons across the bottom. */
.row > .filters { flex: 0 1 490px; }
.filters { width: 100%; max-width: 490px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--space-3); align-content: start; }
.filters > * { grid-column: 1 / -1; }
.filters > .half { grid-column: auto; }
.buttons { display: flex; gap: var(--space-3); align-items: flex-end; grid-column: 1 / -1; margin-top: 24px; }
.buttons > * { flex: 1 1 0; }

/* Buttons: raised (primary), stroked (ghost) and text, Material 4px corners */
.btn, .aa button {
  height: var(--btn-h); padding: 0 var(--space-4); border: 0; border-radius: var(--radius-sm);
  background: var(--primary); color: #fff; font: inherit; font-size: 14px; font-weight: 500; letter-spacing: .0892857em;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  text-decoration: none; box-shadow: var(--shadow-2); white-space: nowrap;
}
.btn:hover, .aa button:hover { background: #3949AB; color: #fff; }
.btn.small { height: 30px; padding: 0 var(--space-3); font-size: 13px; box-shadow: none; }
.btn.xs { height: var(--btn-xs-h); padding: 0 var(--space-2); font-size: 12px; font-weight: 500; letter-spacing: .02em; box-shadow: none; }
.btn.ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.btn.ghost:hover { background: rgba(0, 0, 0, .04); color: var(--ink); }
.btn.text { background: transparent; color: var(--ink); box-shadow: none; padding: 0 var(--space-2); }
.btn.text:hover { background: rgba(0, 0, 0, .04); color: var(--ink); }
.btn.icon { width: var(--btn-xs-h); padding: 0; border-radius: 50%; background: transparent; color: var(--primary); box-shadow: none; }
.btn.icon:hover { background: var(--hover); color: var(--primary); }
.btn[disabled] { background: rgba(0, 0, 0, .12); color: rgba(0, 0, 0, .38); box-shadow: none; cursor: default; }
.btn.ghost[disabled], .btn.text[disabled], .btn.icon[disabled] { background: transparent; }
.actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

/* Chips, tags, status pills, badges */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  height: 32px; padding: 0 12px; border-radius: 16px; border: 0;
  background: #E0E0E0; color: rgba(0, 0, 0, .87); font-size: 14px; display: inline-flex; align-items: center; text-decoration: none;
}
.chip:hover { background: #D6D6D6; color: rgba(0, 0, 0, .87); }
.chip.on { background: var(--primary); color: #fff; }
.pill, .tag, .st, .badge {
  display: inline-block; padding: 1px 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 500;
  line-height: 1.45; white-space: nowrap;
}
/* Yes/no columns as user-table: a 14px green or red disc (table/active.svg, inactive.svg); the word below 960px */
.state { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: middle; }
.state.on { background: green; }
.state.off { background: red; }
.state-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 959.98px) { .state { display: none; } .state-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; } }
.tag { background: #ECEFF1; color: #37474F; }
.tag.on { background: var(--primary-soft); color: var(--primary-ink); }
.tag.warn2 { background: #FFF0E0; color: #8A4500; }
.st { background: var(--primary-soft); color: var(--primary-ink); }
.st.delivered { background: #E6F4EA; color: #1E6B34; }
.st.failed { background: #FDE7E9; color: #A1192B; }
.st.rejected { background: #FFF0E0; color: #8A4500; }
.st.complained { background: #F3E5F5; color: #6A1B9A; }
.st.invalid { background: #ECEFF1; color: #37474F; }
.st.lead-status { margin-top: var(--space-1); font-size: 12px; padding: 2px 10px; }
.badge { background: #ECEFF1; color: #37474F; font-size: 12px; padding: 2px 10px; }
.badge.ok { background: #E6F4EA; color: #1E6B34; }
.badge.warn { background: #FFF0E0; color: #8A4500; }
.badge.bad { background: #FDE7E9; color: #A1192B; }

/* Alerts exactly as casa-frontend's lib-ui-alert and form-errors: solid blocks with white text, 4px corners.
   lib-ui-alert: danger #FA6565, info #6EB7F9, success #95DD81, warning #F9CA6E, 16px, padding 10px 10px 10px 20px;
   form-errors (inline errors) #F44336, inline warnings #F9CA6E, padding 10px. */
:root {
  --alert-info: #6EB7F9;
  --alert-success: #95DD81;
  --alert-warning: #F9CA6E;
  --alert-danger: #FA6565;
  --alert-error: #F44336;
}
.notice, .alert, .confirmbar, .errorlist.nonfield {
  margin: 0; padding: 10px; border-radius: var(--radius-sm); background: var(--alert-info); color: #fff;
  font-size: 14px; line-height: 1.45;
}
.notice a, .alert a, .confirmbar a:not(.btn) { color: #fff; font-weight: 500; }
.notice.success { background: var(--alert-success); }
.notice.warning, .alert { background: var(--alert-warning); }
.notice.error, .errorlist.nonfield { background: var(--alert-error); }
.errorlist.nonfield { list-style: none; font-size: 14px; }
.alert { display: flex; flex-direction: column; gap: var(--space-2); }
.alert form { display: inline; }
.confirmbar { margin-top: var(--space-2); background: var(--alert-warning); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.confirmbar .msg { flex: 1 1 320px; }
/* Django messages after an action: lib-ui-alert's stack, fixed top right under the toolbar */
.toasts {
  position: fixed; top: 60px; right: 40px; z-index: 30; display: flex; flex-direction: column; gap: 10px;
  width: min(500px, calc(100vw - 2 * var(--space-3)));
}
.toast {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 60px;
  padding: 10px 10px 10px 20px; border-radius: var(--radius-sm); border: 1px solid var(--alert-info);
  background: var(--alert-info); color: #fff; font-size: 16px; line-height: 1.4; cursor: pointer;
}
.toast span { flex: 0 1 80%; }
.toast.success { background: var(--alert-success); border-color: var(--alert-success); }
.toast.warning { background: var(--alert-warning); border-color: var(--alert-warning); }
.toast.danger { background: var(--alert-danger); border-color: var(--alert-danger); }
/* lib-ui-alert's close: a mat-icon-button (48px, 12px padding, 24px "close" icon in the alert's white), aligned to
   the alert's bottom edge (fxFlexAlign="end"); the hover/focus state layer is the icon colour at 4%/12%. */
.toast button {
  flex: none; align-self: flex-end; width: 48px; height: 48px; padding: 12px; border: 0; border-radius: 50%;
  background: transparent; color: inherit; line-height: 24px; display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer;
}
.toast button:hover { background: rgba(255, 255, 255, .04); }
.toast button:focus-visible { background: rgba(255, 255, 255, .12); }
.toast :focus-visible { outline-color: #fff; }
@media (max-width: 960px) { .toasts { right: 10px; width: min(350px, calc(100vw - 20px)); } }

/* Dialogs as casa-frontend's MatDialog (lib-ui-base-dialog): 4px corners, 24px padding, z24 shadow, 32% black
   backdrop; a title row with a close icon, actions right-aligned (stroked secondary, raised primary). Delete
   confirmations get the red title band and no close icon. */
dialog.modal {
  width: min(500px, calc(100% - 2 * var(--space-4))); max-width: 80vw; padding: 24px; border: 0;
  border-radius: var(--radius-sm); background: #fff; color: var(--ink);
  box-shadow: 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12);
}
@media (max-width: 600px) { dialog.modal { max-width: none; } }
dialog.modal::backdrop { background: rgba(0, 0, 0, .32); }
dialog.modal[open]:not(:modal) { position: fixed; inset: 0; margin: auto; z-index: 40; }  /* without JavaScript */
.dialog-title { display: flex; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-4); }
.dialog-title h2 { flex: 1 1 auto; margin: 0; font-size: 20px; font-weight: 500; line-height: 32px; }
.dialog-close {  /* mat-icon-button with the "clear" icon, as lib-ui-base-dialog */
  flex: none; width: 40px; height: 40px; margin: -4px -8px 0 0; border: 0; border-radius: 50%; background: transparent; color: rgba(0, 0, 0, .87);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.dialog-close:hover { background: rgba(0, 0, 0, .06); color: var(--ink); }
dialog.modal.danger .dialog-title { margin: -24px -24px 24px; padding: 24px; background: #F44336; color: #fff; }
dialog.modal.danger .dialog-close { display: none; }
.dialog-text { margin: 0 0 var(--space-4); padding: 10px; font-size: 14px; line-height: 1.5; }
/* confirm-delete-dialog: the 36px "delete" icon in a 10% column beside the text */
.dialog-body { display: flex; align-items: center; gap: 10px; }
.dialog-body > .mi { flex: none; margin: 0 2px; }
.dialog-body .dialog-text { flex: 1 1 auto; }
dialog.modal:not(.danger) .dialog-body > .mi { display: none; }
.dialog-form { display: flex; flex-direction: column; gap: var(--space-3); }
.dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.btn.danger { background: #F44336; }
.btn.danger:hover { background: #E53935; }
.btn.success { background: #28A745; }  /* .mat-success */
.btn.success:hover { background: #23943D; }

/* Login-style entrance pages */
/* Entrance pages as casa-frontend's login (login-layout + login component): a z4 card centred on the page, a 330px
   form with casa.png 280px wide (10px padding) on top, fill fields, a full-width flat primary button and a centred
   link; errors as red mat-error text. */
.entrance { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: var(--space-5) var(--space-4); }
.entrance .box {
  width: 100%; max-width: 362px; background: #fff; border-radius: var(--radius-sm);
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12);
  padding: var(--space-4); display: flex; flex-direction: column; gap: 10px;
}
.logo { display: flex; justify-content: center; padding-bottom: 10px; }
.logo img { display: block; box-sizing: content-box; width: 280px; max-width: calc(100% - 20px); height: auto; padding: 10px; }
.entrance .aa form { gap: 10px; }
.entrance .errorlist.nonfield { background: none; color: #F44336; padding: 0 0 10px; font-size: 14px; }
.entrance .aa button[type=submit]:not([form]) { width: 100%; box-shadow: none; margin-top: 10px; }
.entrance .aa a.forgot, .entrance .aa button[form=logout-from-stage] { align-self: center; padding-bottom: 10px; }
.step { font-size: 11px; font-weight: 500; color: var(--primary); letter-spacing: .4px; }
.lead { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(0, 0, 0, .87); }
.intro { display: flex; flex-direction: column; gap: var(--space-2); }
/* casa-frontend's login pages have no heading: the h1 is kept for screen readers only. Descriptions and the green
   success text sit 10px above the next element. */
.entrance h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.entrance .description, .entrance .success, .entrance .aa > p { margin: 0; padding-bottom: 10px; font-size: 14px; line-height: 1.43; }
.entrance .success { color: green; }
.entrance .form-actions { display: flex; flex-direction: column; gap: 10px; }
.manage h1 { margin: 0; font-size: 18px; font-weight: 500; }
/* allauth's generic markup (its element templates) in the same style */
.aa form { display: flex; flex-direction: column; gap: var(--space-4); }
.aa form p { position: relative; display: flex; flex-direction: column; margin: 0; padding-top: 24px; font-size: 14px; color: var(--muted); }
.aa form p > label:first-child {
  position: absolute; left: 0; top: 8px; font-size: 12px; line-height: 16px; pointer-events: none;
  transition: transform .15s, font-size .15s, color .15s;
}
.aa form p:has(> input:placeholder-shown:not(:focus)) > label:first-child { transform: translateY(12px); font-size: 14px; }
.aa form p:focus-within > label:first-child { color: var(--primary); }
.aa form p:has(.errorlist) input { border-bottom-color: #F44336; }
.aa form p:has(> input[type=checkbox]) { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: var(--space-2); }
.aa form p:has(> input[type=checkbox]) > label:first-child { position: static; transform: none; font-size: 14px; color: var(--ink); }
.aa form p input[type=checkbox] { align-self: flex-start; }
.aa form p .helptext, .aa form p span { font-size: 11px; font-weight: 400; color: var(--muted); }
.aa button[form=logout-from-stage] { background: transparent; color: var(--primary); font-weight: 400; font-size: 14px; letter-spacing: normal; height: auto; padding: 0; box-shadow: none; text-decoration: underline; }
.aa button[form=logout-from-stage]:hover { background: transparent; color: var(--primary-ink); }
.aa a.btnlink { color: var(--primary); }
.aa a.forgot { align-self: center; font-size: 14px; color: var(--primary); border-radius: var(--radius-xs); }
.aa p { font-size: 13px; line-height: 1.5; }
.aa .errorlist { margin: 0; }
.aa form ul:not(.errorlist) { margin: 0; padding-left: 18px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.aa textarea { border: 1px solid var(--field-line); border-radius: var(--radius-sm); padding: var(--space-2); font: inherit; }
.aa table { border-collapse: collapse; font-size: 13px; }
.aa td, .aa th { padding: var(--space-1) var(--space-3); text-align: left; }
/* Account pages as casa-frontend's account dialogs (reset-password-dialog, two-factor-auth-stepper in
   lib-ui-base-dialog): a centred 500px card with 24px padding, a 20px/32px title 16px above the content, fields 10px
   apart and the actions right-aligned at the bottom (mat-dialog-actions). */
.manage { width: 100%; max-width: 500px; margin: var(--space-3) auto 0; padding: 24px; }
.manage .aa, .manage.aa { display: flex; flex-direction: column; gap: var(--space-3); }
.manage.aa form { gap: 10px; }
.manage .form-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-2); }
.manage .form-actions a, .manage .form-actions button.secondary {
  background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: none; height: var(--btn-h); padding: 0 var(--space-4);
  display: inline-flex; align-items: center; border-radius: var(--radius-sm); font-weight: 500; text-decoration: none; letter-spacing: .0892857em;
}
.aa button.danger { background: #F44336; }
.aa button.danger:hover { background: #E53935; }
.manage.aa form p > span, .manage.aa form p .helptext, .manage.aa form ul:not(.errorlist) { font-size: 11px; margin-top: 4px; }
.manage img { max-width: 200px; height: auto; align-self: center; }  /* the QR code, 200px and centred as in the 2FA stepper */
.aa form p .helptext { display: block; }
/* allauth's account pages (change password, two-factor authentication) inside the staff layout */
.manage h1 { font-size: 20px; line-height: 32px; margin-bottom: 6px; }
.manage section { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.manage section h2 { margin: 0; font-size: 16px; font-weight: 500; }
.manage section p { margin: 0; }
.manage section ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.manage section ul a, .manage section ul button {
  height: 32px; padding: 0 var(--space-3); display: inline-flex; align-items: center; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: #fff; color: var(--primary); font: inherit; font-size: 13px; font-weight: 500;
  text-decoration: none; box-shadow: none; cursor: pointer;
}
.manage section ul a:hover, .manage section ul button:hover { background: var(--primary-soft); color: var(--primary); }


/* Overview */
.seg { display: flex; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: #fff; }
.seg button { height: 30px; padding: 0 var(--space-3); border: 0; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; background: #fff; color: var(--ink); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button:hover { background: var(--hover); }
.seg button[aria-pressed=true] { background: var(--primary); color: #fff; }
.seg button:focus-visible { outline-offset: -3px; }
/* KPI tiles as on CASA's start page (participant-count): fxFlex 25% above 1280px, 50% from 960px, full width below;
   10px gaps. Title 16px top-left, the icon top-right, a 48px bold centred number (54px line), the range beneath. */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
@media (max-width: 1279.98px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 959.98px) { .kpis { grid-template-columns: minmax(0, 1fr); } }
.kpi {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-5);
  padding: var(--space-4); display: flex; flex-direction: column; min-height: 152px;
}
.kpi h2 { margin: 0; font-size: 16px; font-weight: 500; }
.kpi .top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.kpi .top { padding-bottom: var(--space-2); }
.kpi-icon { display: flex; }
.kpi .value { font-size: 48px; font-weight: 700; text-align: center; line-height: 54px; }
.kpi .sub { font-size: 12px; text-align: center; line-height: 16px; color: var(--ink); }
.legend { display: flex; gap: var(--space-4); flex-wrap: wrap; font-size: 12px; color: rgba(0, 0, 0, .7); }
.legend span { display: flex; align-items: center; gap: var(--space-2); }
.legend i { width: 10px; height: 10px; border-radius: 2px; display: block; }
/* Bar chart: the plot stretches to the card (fixed 220px high), the axis labels are HTML at a fixed 11px */
.chartbox { position: relative; display: grid; grid-template-columns: 36px 1fr; grid-template-rows: 220px 22px; }
.chartbox .chart { grid-column: 2; grid-row: 1; width: 100%; height: 100%; display: block; overflow: visible; }
.chart .grid { stroke: rgba(0, 0, 0, .08); stroke-width: 1; }
.chart .grid.base { stroke: rgba(0, 0, 0, .24); }
.yaxis, .xaxis { position: relative; font-size: 11px; line-height: 1; color: var(--muted); }
.yaxis { grid-column: 1; grid-row: 1; }
.yaxis span { position: absolute; right: 6px; transform: translateY(50%); }
.xaxis { grid-column: 2; grid-row: 2; }
.xaxis span { position: absolute; top: 6px; transform: translateX(-50%); white-space: nowrap; }
.xaxis span:last-child { transform: translateX(-100%); }  /* the last label ends at the right edge, not past it */
.chart-empty { min-height: 120px; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.bar { display: flex; flex-direction: column; gap: var(--space-1); }
.bar .line { display: flex; justify-content: space-between; font-size: 13px; }
.bar .line b { font-weight: 500; }
.bar .track { height: 6px; border-radius: var(--radius-pill); background: #ECEAF3; }
.bar .fill { height: 6px; border-radius: var(--radius-pill); }
.foot-link { margin-top: auto; align-self: flex-start; font-size: 13px; }

/* Result cards: bulk actions and Export at the top right, pager at the bottom right */
.resultbar { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; min-height: 40px; }
.resultbar .note { flex: 1 1 auto; max-width: none; font-size: 12px; }
.pager { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; min-height: 56px; padding: 0 var(--space-2); font-size: 12px; color: rgba(0, 0, 0, .54); }
.pager > span:not(.nums) { margin: 0 32px 0 24px; }
.pager label { display: flex; align-items: center; gap: var(--space-2); }
.pager select {
  appearance: none; -webkit-appearance: none; height: 40px; width: 84px; margin-left: var(--space-1); padding: 0 24px 0 12px;
  border: 1px solid rgba(0, 0, 0, .38); border-radius: var(--radius-sm); font: inherit; font-size: 12px; color: rgba(0, 0, 0, .87); cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='5'%3E%3Cpath d='M0 0l5 5 5-5z' fill='rgba(0,0,0,.54)'/%3E%3C/svg%3E") no-repeat right 10px center;
}
.pager .nums { display: flex; gap: var(--space-2); }
.pager a, .pager span.off { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); text-decoration: none; border-radius: 50%; }
.pager a:hover { background: rgba(0, 0, 0, .04); }
.pager a { color: rgba(0, 0, 0, .54) !important; }
.pager span.off { color: rgba(0, 0, 0, .26); }
.kv { display: flex; gap: var(--space-4); padding: var(--space-1) 0; font-size: 13px; border-bottom: 1px solid rgba(0, 0, 0, .06); }
.kv:last-child { border-bottom: 0; }
.kv span:first-child { flex: 0 0 240px; color: var(--muted); }
.kv span:last-child { overflow-wrap: anywhere; }
.history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); font-size: 13px; }
.history .when { font-size: 12px; color: var(--muted); }
.history-label { font-weight: 500; margin-bottom: var(--space-1); }
.tabs > input { position: absolute; opacity: 0; pointer-events: none; }
.tabs .bar2 { display: flex; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }  /* mat-tab-header scrolls without a bar */
.tabs .bar2 label {
  height: 48px; min-width: 90px; padding: 0 24px; display: flex; align-items: center; justify-content: center;
  font-weight: 500; letter-spacing: 0; cursor: pointer; color: rgba(0, 0, 0, .6); white-space: nowrap;
}
.tabs .bar2 label:hover { background: rgba(0, 0, 0, .04); }
.tabs > input:focus-visible ~ .bar2 { outline: 2px solid var(--primary); outline-offset: 2px; }
.tabs .tp { display: none; padding-top: var(--space-2); }
#tab-rcpt:checked ~ .bar2 label[for=tab-rcpt], #tab-text:checked ~ .bar2 label[for=tab-text], #tab-html:checked ~ .bar2 label[for=tab-html],
#tab-files:checked ~ .bar2 label[for=tab-files], #tab-events:checked ~ .bar2 label[for=tab-events] {
  color: var(--primary); box-shadow: inset 0 -2px 0 var(--primary);
}
#tab-rcpt:checked ~ .p-rcpt, #tab-text:checked ~ .p-text, #tab-html:checked ~ .p-html, #tab-files:checked ~ .p-files, #tab-events:checked ~ .p-events { display: block; }
.textbody, .json {
  white-space: pre-wrap; overflow-wrap: anywhere; font-family: 'Roboto Mono', monospace; font-size: 12px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3); margin: 0;
}
.event { margin-bottom: var(--space-3); }
iframe.preview { width: 100%; height: 480px; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; }

/* Detail pages as casa-frontend's information pages: title row, then columns of at most 490px (a z5 card with
   lib-ui-label fields – 10px rgba(0,0,0,.54) label above the value – and a footer with the actions; z5 expansion
   panels), then a full-width card with mat-tabs. */
.title-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.title-row h1.title { margin: var(--space-1) 0; }
.info-columns { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-start; }
.info-columns > * { flex: 0 1 490px; min-width: 0; }
.info-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.info-card { gap: var(--space-2); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-3); }
.field { display: flex; flex-direction: column; min-width: 0; margin-bottom: 5px; font-size: 14px; overflow-wrap: anywhere; }
.field.full { grid-column: 1 / -1; }
.field .fl { height: 20px; padding-top: 2px; font-size: 10px; color: rgba(0, 0, 0, .54); }
/* lib-ui-information-form-footer: the buttons share the row equally (fxFlex 50), 10px apart */
.info-footer { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-2); }
.info-footer form { margin: 0; flex: 1 1 0; display: flex; }
.info-footer form .btn { flex: 1 1 auto; white-space: normal; min-height: var(--btn-h); height: auto; }
/* mat-expansion-panel (z5): 48px header with 24px padding and a chevron, 0 24px 16px body */
.xpanel { background: #fff; border-radius: var(--radius-sm); box-shadow: var(--shadow-5); }
.xpanel > summary {
  display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 24px;
  font-size: 14px; font-weight: 500; cursor: pointer; list-style: none; border-radius: var(--radius-sm);
}
.xpanel > summary::-webkit-details-marker { display: none; }
.xpanel > summary::after {
  content: ''; width: 6px; height: 6px; margin: -3px 4px 0 0; border: solid rgba(0, 0, 0, .54); border-width: 0 2px 2px 0;
  transform: rotate(45deg); transition: transform .2s;
}
.xpanel[open] > summary::after { transform: rotate(225deg); margin-top: 3px; }
.xpanel > summary:hover { background: rgba(0, 0, 0, .04); }
.xpanel > summary:focus-visible { outline-offset: -2px; }
.xpanel[open] > summary { height: 64px; }
.xbody { padding: 0 24px 16px; display: flex; flex-direction: column; gap: var(--space-2); }
.results-tabs { padding-top: 0; }
@media (max-width: 600px) { .fields { grid-template-columns: 1fr; } .info-columns > * { flex-basis: 100%; } }

/* Suppression list, Domains, Audit log */
.tabbar { display: flex; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabbar a {
  height: 48px; min-width: 90px; padding: 0 24px; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 500; letter-spacing: 0; white-space: nowrap; text-decoration: none; color: rgba(0, 0, 0, .6);
}
.tabbar a:hover { background: rgba(0, 0, 0, .04); }
.tabbar a[aria-selected=true] { color: var(--primary); box-shadow: inset 0 -2px 0 var(--primary); }
.tabbar a:focus-visible { outline-offset: -3px; }
.domain-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.domain-head h2 { flex: 1 1 auto; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3); }
.tile { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: #F5F6FB; display: flex; flex-direction: column; gap: 2px; }
.tile .l { font-size: 12px; color: var(--muted); }
.tile .v { font-size: 26px; font-weight: 700; line-height: 1.2; }
.quota { font-size: 13px; }
.quota strong { font-size: 20px; }
.meter { height: 6px; border-radius: var(--radius-pill); background: #DADCEB; margin-top: var(--space-1); }
.meter i { display: block; height: 6px; border-radius: var(--radius-pill); background: var(--primary); }
.boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-3); }
.box { padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-1); }
.box .txt { font-size: 13px; }
.lock { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; color: var(--muted); }

/* Below 960px the side menu is casa-frontend's mat-sidenav in "over" mode: closed by default, opened by the
   hamburger over the content (fixed under the toolbar) with the drawer backdrop; the backdrop or Escape closes it. */
.nav-backdrop { display: none; }
@media (max-width: 959.98px) {
  .nav { display: none; position: fixed; top: 64px; bottom: 0; left: 0; z-index: 26; overflow-y: auto; }
  .page.nav-shown .nav { display: flex; }
  .page.nav-shown .nav-backdrop { display: block; position: fixed; inset: 64px 0 0; z-index: 25; background: rgba(0, 0, 0, .6); }
  .page.nav-collapsed .nav { display: none; }
}
/* Phones (below 600px) as casa-frontend: main has no padding, so cards run edge to edge, and headings get 10px
   padding on the left. */
@media (max-width: 599.98px) {
  :root { --page-pad: 0px; --card-pad: var(--space-4); }
  main h1, main h2, main h3, dialog h2 { padding-left: 10px; }
  .toolbar { padding-right: 10px; }
  .error-page { padding: 20px 0; }
  .topbar { gap: var(--space-2); }
  .topbar .brand b { display: none; }
  .who .name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }  /* still the button's name */
  .kv { flex-direction: column; gap: 2px; }
  .kv span:first-child { flex: none; }
  .panel.results { padding: var(--space-2) var(--space-3); }
  .pager { gap: var(--space-3); }
  .entrance { padding: var(--space-5) var(--space-4); }
  .entrance .box { padding: var(--space-5) var(--space-4); }
}

/* Error pages (403, 404, 500) as casa-frontend's not-found page: 20px around a centred card of at most 600px with a
   centred title and a 300px picture */
.error-page { flex: 1 1 auto; display: flex; flex-direction: row; justify-content: center; align-items: flex-start; padding: 20px; }
.error-card { flex: 0 1 600px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.error-card h1 { margin: 0; padding: 0; font-size: 20px; font-weight: 500; line-height: 32px; }
.error-card img { width: 300px; max-width: 100%; height: auto; }
.error-card p { margin: 0; font-size: 14px; line-height: 1.5; }