/* Scissors Queue admin. Full window: a white sidebar against the window's left, top and bottom edges (a hairline
   between it and the page), and the page itself on a quiet off-white with a faint blue wash at the top. Every page
   opens with a small tag, a big plain heading and one sentence. White cards with a hairline border and a soft
   shadow; one blue (#3B82F6) for charts, links and the active menu entry (white in dark mode); status labels are plain text with a coloured dot.
   Poppins 400/500/600 at 13px, tabular numbers. Light is the default whatever the OS says; dark only after the top
   bar's toggle (theme.js keeps the choice).

   Tokens (pages.css builds on these; keep the names, add aliases rather than renaming):
     --sq-font                       the one typeface
     --sq-page, --sq-wash            page background and the faint wash at its top
     --sq-canvas                     alias of --sq-page (Django's own pages)
     --sq-side                       sidebar background
     --sq-surface                    cards, inputs
     --sq-subtle, --sq-muted-bg      quiet fills (table heads, help card), stronger quiet fill
     --sq-hover                      row / item hover
     --sq-hairline, --sq-hairline-strong   borders
     --sq-text, --sq-muted, --sq-faint     text: main, secondary, hints and axis labels
     --sq-accent, --sq-accent-fill, --sq-accent-soft   links and the active menu entry; chart line; soft blue fill
     --sq-ink, --sq-on-ink           primary button fill and its text
     --sq-danger, --sq-warning, --sq-success, --sq-info, --sq-cancelled   status colours
     --sq-up, --sq-down              +x% / -x%
     --sq-tint                       how strongly pills are tinted
     --sq-focus                      focus ring
     --sq-shadow-card|raised|pop     shadows
     --sq-r-sm|r|r-lg                radii
     --sq-control                    control height
     --sq-label-w                    form label column
     --sq-nav-w, --sq-topbar-h       sidebar width, phone top bar height */

:root {
  --sq-font: "Poppins", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --sq-page: #F7F9FC;
  --sq-canvas: var(--sq-page);
  --sq-wash: radial-gradient(1100px 380px at 28% -120px, rgb(59 130 246 / 0.075), rgb(59 130 246 / 0) 70%);
  --sq-side: #FFFFFF;
  --sq-surface: #FFFFFF;
  --sq-subtle: #F7F9FC;
  --sq-muted-bg: #F0F3F8;
  --sq-hover: #F4F7FB;
  --sq-hairline: #E8ECF2;
  --sq-hairline-strong: #DCE1E9;
  --sq-text: #121826;
  --sq-muted: #4A5468;
  --sq-faint: #7E889A;
  --sq-accent: #2563EB;
  --sq-accent-fill: #3B82F6;
  --sq-accent-soft: #EBF2FF;
  --sq-ink: #2563EB;
  --sq-ink-hover: #1D4ED8;
  --sq-ink-glow: rgb(37 99 235 / 0.25);
  --sq-on-ink: #FFFFFF;
  --sq-danger: #DC2626;
  --sq-warning: #B45309;
  --sq-success: #15803D;
  --sq-done: #16A34A;
  --sq-info: #2563EB;
  --sq-cancelled: #94A3B8;
  --sq-up: #16A34A;
  --sq-down: #EF4444;
  --sq-tint: 11%;
  --sq-focus: rgb(59 130 246 / 0.18);
  --sq-shadow-card: 0 1px 2px rgb(16 24 40 / 0.03), 0 4px 14px rgb(31 56 120 / 0.04);
  --sq-shadow-raised: 0 1px 2px rgb(16 24 40 / 0.05), 0 4px 12px rgb(31 56 120 / 0.07);
  --sq-shadow-pop: 0 2px 6px rgb(16 24 40 / 0.06), 0 14px 34px rgb(31 56 120 / 0.13);
  --sq-r-sm: 6px;
  --sq-r: 10px;
  --sq-r-lg: 16px;
  --sq-control: 36px;
  --sq-label-w: 200px;
  --sq-nav-w: 256px;
  --sq-topbar-h: 60px;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --sq-page: #0A0A0A; --sq-wash: none;
  --sq-side: #0F0F0F;
  --sq-surface: #141414; --sq-subtle: #1A1A1A; --sq-muted-bg: #222222; --sq-hover: #1C1C1C;
  --sq-hairline: #262626; --sq-hairline-strong: #333333; --sq-text: #EDEDED; --sq-muted: #A3A3A3; --sq-faint: #7A7A7A;
  --sq-accent: #FFFFFF; --sq-accent-fill: #E5E5E5; --sq-accent-soft: #262626; --sq-ink: #FFFFFF; --sq-on-ink: #0A0A0A; --sq-ink-hover: #D4D4D4; --sq-ink-glow: rgb(0 0 0 / 0.4);
  --sq-danger: #F87171; --sq-warning: #FBBF24; --sq-success: #4ADE80; --sq-done: #22C55E; --sq-info: #D4D4D4;
  --sq-cancelled: #737373; --sq-up: #4ADE80; --sq-down: #F87171;
  --sq-tint: 16%; --sq-focus: rgb(255 255 255 / 0.2);
  --sq-shadow-card: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px rgb(0 0 0 / 0.22);
  --sq-shadow-raised: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 12px rgb(0 0 0 / 0.3);
  --sq-shadow-pop: 0 0 0 1px #2A2A2A, 0 16px 40px rgb(0 0 0 / 0.55);
  color-scheme: dark;
}

/* Django's own variables, mapped onto ours, so every built-in page and widget follows the theme. */
:root, html[data-theme="light"], html[data-theme="dark"], html[data-theme="auto"] {
  --primary: var(--sq-ink);
  --secondary: var(--sq-ink);
  --accent: var(--sq-accent);
  --primary-fg: var(--sq-on-ink);
  --body-fg: var(--sq-text);
  --body-bg: var(--sq-page);
  --body-quiet-color: var(--sq-muted);
  --body-medium-color: var(--sq-muted);
  --body-loud-color: var(--sq-text);
  --header-color: var(--sq-muted);
  --header-branding-color: var(--sq-text);
  --header-bg: var(--sq-surface);
  --header-link-color: var(--sq-text);
  --breadcrumbs-fg: var(--sq-muted);
  --breadcrumbs-link-fg: var(--sq-accent);
  --breadcrumbs-bg: transparent;
  --link-fg: var(--sq-accent);
  --link-hover-color: var(--sq-text);
  --link-selected-fg: var(--sq-accent);
  --hairline-color: var(--sq-hairline);
  --border-color: var(--sq-hairline-strong);
  --error-fg: var(--sq-danger);
  --message-debug-bg: var(--sq-subtle);
  --message-info-bg: color-mix(in srgb, var(--sq-info) 8%, var(--sq-surface));
  --message-success-bg: color-mix(in srgb, var(--sq-success) 8%, var(--sq-surface));
  --message-warning-bg: color-mix(in srgb, var(--sq-warning) 8%, var(--sq-surface));
  --message-error-bg: color-mix(in srgb, var(--sq-danger) 8%, var(--sq-surface));
  --darkened-bg: var(--sq-subtle);
  --selected-bg: var(--sq-muted-bg);
  --selected-row: var(--sq-accent-soft);
  --button-fg: var(--sq-text);
  --button-bg: var(--sq-surface);
  --button-hover-bg: var(--sq-subtle);
  --default-button-bg: var(--sq-ink);
  --default-button-hover-bg: var(--sq-ink);
  --close-button-bg: var(--sq-surface);
  --close-button-hover-bg: var(--sq-subtle);
  --delete-button-bg: var(--sq-surface);
  --delete-button-hover-bg: var(--sq-subtle);
  --object-tools-fg: var(--sq-text);
  --object-tools-bg: var(--sq-surface);
  --object-tools-hover-bg: var(--sq-subtle);
  --font-family-primary: var(--sq-font);
}

html { background: var(--sq-page); }
body {
  background: var(--sq-wash) no-repeat, var(--sq-page); min-height: 100vh;
  color: var(--sq-text); font-family: var(--sq-font); font-size: 13px; line-height: 20px;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a:link, a:visited { color: var(--sq-accent); text-decoration: none; }
a:hover, a:focus { color: var(--sq-text); }
strong { font-weight: 600; }
.sq-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sq-muted { color: var(--sq-muted); margin: 0; font-size: 13px; line-height: 19px; }
.help, p.help, form p.help, div.help, form div.help, div.help li { color: var(--sq-faint); font-size: 12px; line-height: 17px; }
.small { font-size: 12px; }
code, pre { font-size: 12px; }

/* ---------- Brand (sidebar, phone top bar and login) ---------- */
.sq-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--sq-text) !important; text-decoration: none !important; }
.sq-brand__logo {
  width: 32px; height: 32px; border-radius: 10px; background: #0B0F19; color: #FFFFFF;
  display: grid; place-items: center; flex: none;
}
.sq-brand__logo .sq-icon { width: 16px; height: 16px; stroke-width: 2; }
.sq-brand__name { font-weight: 600; font-size: 16px; line-height: 24px; letter-spacing: -0.2px; white-space: nowrap; }
.sq-brand__tag {
  font-size: 11px; font-weight: 600; line-height: 18px; color: var(--sq-accent); background: var(--sq-accent-soft);
  padding: 0 8px; border-radius: 999px;
}
:root[data-theme="dark"] .sq-brand__logo { background: #FFFFFF; color: #0B0F19; }

/* ---------- Top bar: only the theme toggle on wide screens; the menu button and the name join it on a phone ---------- */
#header {
  background: transparent; color: var(--sq-text); border: 0; padding: 0; align-items: center; justify-content: space-between;
  flex-direction: row; box-sizing: border-box; gap: 12px; height: auto; min-height: 0;
}
#branding { display: flex; align-items: center; gap: 10px; min-width: 0; }
#site-name { margin: 0; font-size: inherit; }
.sq-topbar__menu {
  display: none; width: 38px; height: 38px; border-radius: 10px; place-items: center; flex: none; cursor: pointer;
  border: 1px solid var(--sq-hairline); background: var(--sq-surface); color: var(--sq-text); padding: 0;
}
.sq-topbar__menu .sq-icon { width: 18px; height: 18px; }
.sq-topbar__brand { display: none !important; }
.sq-topbar__brand .sq-brand__logo { width: 28px; height: 28px; border-radius: 8px; }
.sq-topbar__brand .sq-brand__name { font-size: 15px; }
.sq-user { display: flex; align-items: center; gap: 10px; font-size: 13px; }
#user-tools.sq-user { text-transform: none; letter-spacing: normal; margin: 0; padding: 0; }
#header .theme-toggle, .login #header .theme-toggle {
  width: 38px; height: 38px; border-radius: 10px; display: inline-grid; place-items: center; margin: 0;
  border: 1px solid var(--sq-hairline); background: var(--sq-surface); vertical-align: middle; cursor: pointer;
  box-shadow: 0 1px 2px rgb(16 24 40 / 0.04);
}
#header .theme-toggle:hover { background: var(--sq-hover); }
.theme-toggle svg.theme-icon-when-auto, .theme-toggle svg.theme-icon-when-dark, .theme-toggle svg.theme-icon-when-light {
  fill: var(--sq-muted); color: var(--sq-surface); width: 16px; height: 16px;
}

/* ---------- Shell: sidebar on the window's edge, the page beside it ---------- */
#toggle-nav-sidebar { display: none !important; }
#main { display: flex; background: transparent; }
@media (min-width: 901px) {
  body:not(.login):not(.popup) #container {
    display: grid; grid-template-columns: var(--sq-nav-w) minmax(0, 1fr); grid-template-rows: auto 1fr;
    width: auto; min-width: 0; min-height: 100vh; height: auto; margin: 0; padding: 0; box-sizing: border-box;
    /* The sidebar's colour and hairline run the full height of a long page, below the sticky sidebar too. */
    background: linear-gradient(90deg, var(--sq-side) calc(var(--sq-nav-w) - 1px), var(--sq-hairline) calc(var(--sq-nav-w) - 1px) var(--sq-nav-w), transparent var(--sq-nav-w));
  }
  body:not(.login):not(.popup) #main { display: contents; }
  /* The toggle floats at the page's top right; the page starts at the top. */
  body:not(.login):not(.popup) #header { grid-column: 2; grid-row: 1; height: 0; position: relative; z-index: 10; align-self: start; }
  body:not(.login):not(.popup) #header #branding { display: none; }
  body:not(.login):not(.popup) #user-tools { position: absolute; top: 24px; inset-inline-end: 32px; }
  body:not(.login):not(.popup) #content-start { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }
  body:not(.login):not(.popup) #footer { display: none; }
  body:not(.login):not(.popup) #nav-sidebar.sq-nav { grid-column: 1; grid-row: 1 / span 2; }
}

/* ---------- Sidebar ---------- */
#nav-sidebar.sq-nav {
  position: sticky; top: 0; align-self: start; z-index: 5;
  flex: 0 0 var(--sq-nav-w); width: var(--sq-nav-w); margin: 0; left: 0; visibility: visible;
  height: 100vh; height: 100dvh; overflow-y: auto; box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--sq-hairline-strong) transparent;
  padding: 24px 16px 16px; border: 0; border-inline-end: 1px solid var(--sq-hairline); background: var(--sq-side);
  display: flex; flex-direction: column; font-size: 13px;
}
.sq-nav__top { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; }
.sq-nav__close { display: none; }
.sq-nav__heading {
  margin: 30px 12px 8px; font-size: 11px; font-weight: 600; line-height: 16px; color: var(--sq-faint);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.sq-nav__list, .sq-nav__sub ul { list-style: none; margin: 0; padding: 0; }
.sq-nav__list { display: flex; flex-direction: column; gap: 2px; }
.sq-nav__list li { list-style: none; padding: 0; }
.sq-nav__item {
  display: flex; align-items: center; gap: 12px; width: 100%; height: 42px; box-sizing: border-box; margin: 0;
  padding: 0 12px; border-radius: 10px; color: var(--sq-muted) !important; font-weight: 500; font-size: 13.5px; line-height: 20px;
  text-decoration: none !important; background: none; border: 0; cursor: pointer; font-family: inherit; text-align: start;
  position: relative; transition: background-color 150ms ease-out, color 150ms ease-out;
}
.sq-nav__item .sq-icon { width: 17px; height: 17px; stroke-width: 1.6; color: var(--sq-faint); }
.sq-nav__label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sq-nav__item:hover { background: var(--sq-hover); color: var(--sq-text) !important; }
.sq-nav__item.is-active { background: var(--sq-accent-soft); color: var(--sq-accent) !important; font-weight: 600; }
.sq-nav__item.is-active .sq-icon { color: var(--sq-accent); }
/* A short bar on the window's edge marks the page you are on (sidebar padding is 16px). */
.sq-nav__item.is-active::before, .sq-nav__sub li:has(> .is-active)::before {
  content: ""; position: absolute; inset-inline-start: -16px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--sq-accent-fill);
}
.sq-nav__toggle.has-active { color: var(--sq-text) !important; }
.sq-nav__toggle.has-active .sq-icon { color: var(--sq-text); }
.sq-nav__chevron { display: inline-flex; color: var(--sq-faint); transition: transform 220ms ease; }
.sq-nav__chevron .sq-icon { width: 15px; height: 15px; }
.sq-nav__group.is-open .sq-nav__chevron { transform: rotate(180deg); }
.sq-nav__badge {
  min-width: 20px; padding: 0 6px; border-radius: 999px; box-sizing: border-box; text-align: center;
  background: var(--sq-accent-fill); color: #FFFFFF; font-size: 11px; font-weight: 600; line-height: 20px; font-variant-numeric: tabular-nums;
}
.sq-nav__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 240ms ease; }
.sq-nav__group.is-open > .sq-nav__sub { grid-template-rows: 1fr; }
.sq-nav__sub > ul { overflow: hidden; min-height: 0; margin-inline-start: 20px; padding-inline-start: 10px; position: relative; }
.sq-nav__sub > ul::before { content: ""; position: absolute; inset: 6px auto 6px 0; width: 1px; background: var(--sq-hairline); }
.sq-nav__sub > ul > li:first-child { padding-top: 2px; }
.sq-nav__sub > ul > li:last-child { padding-bottom: 6px; }
.sq-nav__group:not(.is-open) .sq-nav__sub > ul { visibility: hidden; transition: visibility 0s 240ms; }
.sq-nav__subitem {
  display: flex; align-items: center; width: 100%; height: 36px; box-sizing: border-box; padding: 0 12px; margin: 1px 0; border-radius: 8px;
  color: var(--sq-muted) !important; font: 500 13px/18px var(--sq-font); text-decoration: none !important; text-align: start;
  background: none; border: 0; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  position: relative; transition: background-color 150ms ease-out, color 150ms ease-out;
}
.sq-nav__subitem:hover { color: var(--sq-text) !important; background: var(--sq-hover); }
.sq-nav__subitem.is-active { color: var(--sq-accent) !important; font-weight: 600; background: var(--sq-accent-soft); }
.sq-nav__sub li { position: relative; }
.sq-nav__sub li:has(> .is-active)::before { inset-inline-start: -46px; top: 10px; bottom: 10px; }
.sq-nav__sub > ul:has(.is-active) { overflow: visible; }

/* The end of the sidebar: who is logged in (a link to My account), with Change password and Log out. */
.sq-nav__end { margin-top: auto; padding-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.sq-me { display: flex; align-items: center; gap: 10px; padding: 14px 4px 0; border-top: 1px solid var(--sq-hairline); min-width: 0; }
a.sq-me:link, a.sq-me:visited { color: inherit; text-decoration: none; }
a.sq-me:hover .sq-me__text strong, a.sq-me:focus-visible .sq-me__text strong { text-decoration: underline; }
.sq-me__avatar {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 14px; flex: none;
  color: #FFFFFF; background: linear-gradient(135deg, #7FB0FB, #3B6FF6);
}
:root[data-theme="dark"] .sq-me__avatar { color: var(--sq-on-ink); background: var(--sq-ink); }
.sq-me__text { display: flex; flex-direction: column; min-width: 0; line-height: 18px; }
.sq-me__text strong { font-size: 13px; font-weight: 600; color: var(--sq-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sq-me__text small { font-size: 11.5px; color: var(--sq-faint); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sq-me__actions { display: flex; gap: 8px; }
.sq-me__actions > a { flex: 1 1 auto; min-width: 0; }
.sq-nav__form { margin: 0; display: flex; flex: 0 0 auto; }
.sq-me__link {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 34px; padding: 0 10px; box-sizing: border-box;
  border-radius: 9px; border: 1px solid var(--sq-hairline-strong); background: var(--sq-surface); cursor: pointer;
  color: var(--sq-muted) !important; font: 500 12px/16px var(--sq-font); text-decoration: none !important; white-space: nowrap;
}
.sq-me__link .sq-icon { width: 14px; height: 14px; }
.sq-me__link:hover { color: var(--sq-text) !important; background: var(--sq-hover); }
.sq-scrim { display: none; }

/* ---------- Page area: the heading block, then the page ---------- */
.content, #content-start { flex: 1; min-width: 0; }
#content { padding: 28px 40px 56px; width: auto; box-sizing: border-box; }
.titles-and-tools { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin: 0 0 26px; }
.titles { min-width: 0; flex: 1 1 420px; }
.sq-intro { padding-inline-end: 56px; }
.sq-intro__tag {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px; margin: 0 0 12px; border-radius: 999px; box-sizing: border-box;
  background: var(--sq-accent-soft); color: var(--sq-accent); font-size: 11px; font-weight: 600; line-height: 1;
  text-transform: uppercase; letter-spacing: 0.08em;
}
#content .sq-intro h1 {
  margin: 0; font-size: 32px; line-height: 40px; font-weight: 600; letter-spacing: -0.8px; color: var(--sq-text); overflow-wrap: anywhere;
}
.sq-intro__name { color: var(--sq-accent); }
.sq-intro__lead { margin: 8px 0 0; max-width: 640px; font-size: 14.5px; line-height: 22px; color: var(--sq-muted); }
#content h1 { font-weight: 600; font-size: 24px; line-height: 32px; letter-spacing: -0.4px; color: var(--sq-text); margin: 0; }
#content .titles h2 { font-size: 13px; line-height: 18px; font-weight: 400; color: var(--sq-muted); letter-spacing: 0; margin: 2px 0 0; }
.titles-and-tools > .object-tools { flex: none; }

/* ---------- Buttons: ink for the one action, quiet outlines for the rest ---------- */
.sq-btn, .button, input[type="submit"], input[type="button"], .submit-row input, a.button,
.object-tools a:link, .object-tools a:visited, #changelist .actions button.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box;
  height: var(--sq-control); min-height: var(--sq-control); padding: 0 12px; border-radius: var(--sq-r) !important; font-family: inherit;
  font-weight: 500; font-size: 13px; line-height: 18px; letter-spacing: 0; text-transform: none; white-space: nowrap;
  background: var(--sq-surface); color: var(--sq-text) !important; border: 1px solid var(--sq-hairline-strong);
  box-shadow: 0 1px 2px rgb(16 24 40 / 0.05); text-decoration: none !important; cursor: pointer; font-weight: 600;
  transition: background-color 120ms ease-out, border-color 120ms ease-out, opacity 120ms ease-out;
}
.sq-btn:hover, .button:hover, input[type="submit"]:hover, input[type="button"]:hover, a.button:hover,
.object-tools a:link:hover, #changelist .actions button.button:hover {
  background: var(--sq-subtle); color: var(--sq-text) !important; border-color: var(--sq-hairline-strong);
}
.sq-btn--primary, .button.default, input[type="submit"].default, .submit-row input.default,
.login .submit-row input[type="submit"], .sq-confirm .submit-row input[type="submit"], .object-tools a.addlink:link, .object-tools a.addlink:visited {
  background: var(--sq-ink); color: var(--sq-on-ink) !important; border-color: var(--sq-ink); text-transform: none;
  box-shadow: 0 1px 2px rgb(16 24 40 / 0.08), 0 4px 12px var(--sq-ink-glow);
}
.sq-btn--primary:hover, .button.default:hover, input[type="submit"].default:hover, .submit-row input.default:hover,
.login .submit-row input[type="submit"]:hover, .sq-confirm .submit-row input[type="submit"]:hover, .object-tools a.addlink:link:hover {
  background: var(--sq-ink-hover); color: var(--sq-on-ink) !important; border-color: var(--sq-ink-hover);
}
.sq-btn .sq-icon { width: 15px; height: 15px; color: var(--sq-muted); }
.sq-btn--primary .sq-icon { color: var(--sq-on-ink); }
.object-tools { margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.object-tools li { margin: 0; height: auto; background: none; display: block; }
.object-tools a.addlink, .object-tools a.historylink, .object-tools a.viewsitelink { background-image: none; padding-inline-start: 12px; }
.object-tools a.addlink::before { content: "+"; font-size: 16px; font-weight: 400; margin-inline-end: 2px; line-height: 1; }
button, input, select, textarea { font-family: inherit; }
button:disabled, input:disabled, .button:disabled, input[type="submit"]:disabled { opacity: 0.45; cursor: default; }

/* Danger: outlined, red words; the final "Yes, I'm sure" is solid red. */
.submit-row a.deletelink, a.deletelink, .inline-deletelink {
  display: inline-flex; align-items: center; box-sizing: border-box; height: var(--sq-control); min-height: var(--sq-control); padding: 0 12px;
  border-radius: var(--sq-r); background: var(--sq-surface) !important; color: var(--sq-danger) !important;
  border: 1px solid var(--sq-hairline-strong); font-weight: 500; font-size: 13px; text-decoration: none !important; line-height: 18px;
}
.submit-row a.deletelink:hover, a.deletelink:hover { background: color-mix(in srgb, var(--sq-danger) 7%, var(--sq-surface)) !important; border-color: color-mix(in srgb, var(--sq-danger) 40%, var(--sq-hairline-strong)); }
.delete-confirmation form input[type="submit"] {
  background: #C0362C !important; color: #FFFFFF !important; border-color: #C0362C; padding: 0 12px; line-height: 18px;
}
.delete-confirmation form input[type="submit"]:hover { opacity: 0.88; }
.delete-confirmation form .cancel-link, .submit-row a.cancel-link, a.button.cancel-link, .submit-row a.closelink {
  display: inline-flex; align-items: center; height: var(--sq-control); min-height: var(--sq-control); padding: 0 12px;
  border-radius: var(--sq-r); box-sizing: border-box; background: var(--sq-surface); color: var(--sq-text) !important;
  border: 1px solid var(--sq-hairline-strong); font-weight: 500; font-size: 13px; line-height: 18px; text-decoration: none !important;
}
.delete-confirmation form .cancel-link:hover, .submit-row a.closelink:hover, a.button.cancel-link:hover { background: var(--sq-subtle); }

/* ---------- Status: a plain label; only the dot carries the colour ---------- */
.sq-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; white-space: nowrap;
  font-size: 12px; font-weight: 500; line-height: 18px; letter-spacing: 0; box-sizing: border-box; max-width: 100%;
  --tone: var(--sq-muted); color: var(--sq-text);
  background: var(--sq-surface); box-shadow: inset 0 0 0 1px var(--sq-hairline-strong);
}
.sq-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tone); flex: none; }
.sq-pill--long { white-space: normal; align-items: baseline; border-radius: 12px; }
.sq-pill--long::before { transform: translateY(-1px); }
.sq-pill--warning { --tone: var(--sq-warning); }
.sq-pill--info { --tone: var(--sq-info); }
.sq-pill--success { --tone: var(--sq-success); }
.sq-pill--danger { --tone: var(--sq-danger); }
.sq-pill--muted { --tone: var(--sq-muted); }

/* ---------- Dashboard: the greeting, "Needs you today", four numbers, the bookings chart ---------- */
.dashboard #content, .sq-dashboard #content { width: auto; max-width: 1320px; }
.sq-btn *, .sq-kpi a * { text-decoration: none !important; }

/* Cards */
.sq-card {
  background: var(--sq-surface); border: 1px solid var(--sq-hairline); border-radius: var(--sq-r-lg); box-shadow: var(--sq-shadow-card);
  padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 14px; min-width: 0; box-sizing: border-box;
}
.sq-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
#content .sq-card__head h2 {
  margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -0.2px; color: var(--sq-text);
  background: none; padding: 0; text-transform: none;
}
.sq-card__sub { margin: 2px 0 0; font-size: 12.5px; line-height: 18px; color: var(--sq-faint); }
.sq-card__sub strong { color: var(--sq-text); font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }

/* Needs you today: one row per job, a green tick when there is nothing to do. */
.sq-needs { margin-bottom: 20px; gap: 6px; }
.sq-needs__list { list-style: none; margin: 0; padding: 0; }
.sq-need {
  list-style: none; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 14px 0; border-top: 1px solid var(--sq-hairline);
}
.sq-need:first-child { border-top: 0; }
.sq-need:last-child { padding-bottom: 0; }
.sq-need__mark {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; box-sizing: border-box;
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.sq-need__mark--count { color: var(--sq-warning); background: color-mix(in srgb, var(--sq-warning) 13%, var(--sq-surface)); }
.sq-need__mark--done { background: var(--sq-done); }
.sq-need__mark--done svg { width: 16px; height: 16px; fill: none; stroke: #FFFFFF; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sq-need__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sq-need__text strong { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--sq-text); }
.sq-need__text small { font-size: 12.5px; line-height: 18px; color: var(--sq-muted); }
.sq-need.is-done .sq-need__text strong { font-weight: 500; }
.sq-need.is-done .sq-need__text small { color: var(--sq-faint); }
.sq-need__action { height: 34px; min-height: 34px; padding: 0 14px; font-size: 13px; }

/* Number cards: a label with a small open arrow, the number, one line under it. */
.sq-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.sq-kpi {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 18px 20px 20px; box-sizing: border-box;
  background: var(--sq-surface); border: 1px solid var(--sq-hairline); border-radius: var(--sq-r-lg); box-shadow: var(--sq-shadow-card);
}
.sq-kpi__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sq-kpi__label { font-weight: 500; font-size: 13px; line-height: 20px; color: var(--sq-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sq-kpi__open {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none;
  border: 1px solid var(--sq-hairline); color: var(--sq-muted) !important; background: var(--sq-surface);
}
.sq-kpi__open:hover { background: var(--sq-hover); color: var(--sq-text) !important; }
.sq-kpi__open .sq-icon { width: 13px; height: 13px; stroke-width: 2; }
.sq-kpi__value { font-size: 28px; font-weight: 600; line-height: 36px; letter-spacing: -0.6px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--sq-text); }
.sq-kpi__hint { font-size: 12.5px; line-height: 18px; color: var(--sq-faint); }
.sq-kpi__hint a { color: var(--sq-accent) !important; font-weight: 500; white-space: nowrap; text-decoration: none !important; }
.sq-kpi__hint a:hover { text-decoration: underline !important; }
.sq-delta { font-size: 12.5px; font-weight: 600; line-height: 18px; font-variant-numeric: tabular-nums; color: var(--sq-muted); }
.sq-delta--up { color: var(--sq-up); }
.sq-delta--down { color: var(--sq-down); }

/* The period picker of the chart. */
.sq-select { position: relative; display: inline-flex; align-items: center; flex: none; }
.sq-select select {
  appearance: none; -webkit-appearance: none; height: 34px; min-height: 34px; padding: 0 32px 0 12px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--sq-hairline-strong); background: var(--sq-surface); color: var(--sq-muted);
  font: 500 12.5px/1 var(--sq-font); box-shadow: none; background-image: none;
}
.sq-select select:hover { color: var(--sq-text); }
.sq-select select:focus { outline: none; border-color: var(--sq-accent-fill); box-shadow: 0 0 0 3px var(--sq-focus); }
.sq-select .sq-icon { position: absolute; inset-inline-end: 10px; width: 14px; height: 14px; color: var(--sq-muted); pointer-events: none; }

/* Bookings chart: drawn by theme.js. */
[data-sq-change] { display: inline-flex; align-items: baseline; gap: 4px; margin-inline-start: 6px; }
[data-sq-change] small { font-size: 12px; color: var(--sq-faint); }
.sq-chart { position: relative; height: 260px; min-width: 0; }
.sq-chart.is-drawn .sq-chart__fallback { display: none; }
.sq-chart__fallback { margin: 0; padding: 0 0 0 18px; color: var(--sq-muted); font-size: 12.5px; columns: 2; }
.sq-chart svg { display: block; overflow: visible; touch-action: pan-y; }
.sq-chart__grid { stroke: var(--sq-hairline); stroke-width: 1; }
.sq-chart__axis { fill: var(--sq-faint); font: 400 11px var(--sq-font); font-variant-numeric: tabular-nums; }
.sq-chart__axis.is-today { fill: var(--sq-text); font-weight: 500; }
.sq-chart__value { fill: var(--sq-text); font: 600 12px var(--sq-font); font-variant-numeric: tabular-nums; }
.sq-chart__line { fill: none; stroke: var(--sq-accent-fill); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.sq-chart__stop-top { stop-color: var(--sq-accent-fill); stop-opacity: 0.12; }
.sq-chart__stop-bottom { stop-color: var(--sq-accent-fill); stop-opacity: 0.02; }
.sq-chart__point { fill: var(--sq-surface); stroke: var(--sq-accent-fill); stroke-width: 1.75; }
.sq-chart__halo { fill: var(--sq-accent-fill); opacity: 0.16; }
.sq-chart__dot { fill: var(--sq-accent-fill); stroke: var(--sq-surface); stroke-width: 2; }
.sq-chart__tip {
  position: absolute; pointer-events: none; padding: 8px 12px 9px; border-radius: 8px; white-space: nowrap;
  background: var(--sq-surface); border: 1px solid var(--sq-hairline); box-shadow: 0 8px 24px rgb(31 56 120 / 0.12), 0 1px 2px rgb(16 24 40 / 0.06);
  display: flex; flex-direction: column; gap: 2px;
}
.sq-chart__tip[hidden] { display: none; }
.sq-chart__tip small { font-size: 11px; line-height: 15px; color: var(--sq-faint); }
.sq-chart__tip strong { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--sq-text); font-variant-numeric: tabular-nums; }

.sq-tag { display: inline-flex; padding: 1px 9px; border-radius: 999px; background: var(--sq-accent-soft); color: var(--sq-accent); font-size: 11.5px; font-weight: 500; line-height: 20px; }

/* ---------- Lists (changelists): one card holding filters, search, actions, table and pages ---------- */
#changelist.module { background: transparent; border: 0; box-shadow: none; overflow: visible; margin: 0; border-radius: 0; }
#changelist .changelist-form-container {
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  background: var(--sq-surface); border: 1px solid var(--sq-hairline); border-radius: var(--sq-r-lg); overflow: clip;
  box-shadow: var(--sq-shadow-card);
}
#changelist .changelist-form-container > div, #changelist .changelist-form-container:has(#changelist-filter) > div {
  max-width: 100%; width: 100%; min-width: 0; box-sizing: border-box; background: transparent; border: 0; border-radius: 0;
}
.module, .inline-group { background: var(--sq-surface); border: 1px solid var(--sq-hairline); border-radius: var(--sq-r-lg); box-shadow: var(--sq-shadow-card); }

#changelist #toolbar { background: transparent; border: 0; border-bottom: 1px solid var(--sq-hairline); padding: 10px 12px; margin: 0; color: var(--sq-muted); }
#changelist #toolbar form > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: none; }
#changelist #toolbar form label[for="searchbar"] { display: none; }
#changelist #toolbar form #searchbar {
  height: var(--sq-control); min-height: var(--sq-control); width: 300px; flex: 0 1 300px; padding: 0 10px 0 32px; border-radius: var(--sq-r);
  box-sizing: border-box; font-size: 13px; margin: 0;
  background: var(--sq-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C8C94' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 10px center / 14px;
}
#changelist #toolbar form input[type="submit"] { background: var(--sq-surface); box-shadow: 0 1px 2px rgb(16 24 40 / 0.05); padding: 0 14px; font-size: 13px; }
#changelist #toolbar form input[type="submit"]:hover { background: var(--sq-subtle); }
#changelist #toolbar .quiet { color: var(--sq-faint); font-size: 12px; margin: 0; width: auto; flex: 0 1 auto; }
#changelist #toolbar .help { margin: 6px 0 0; padding: 0; font-size: 12px; }
#changelist #toolbar br.clear { display: none; }
#changelist nav.toplinks {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 8px 12px; margin: 0; border: 0; border-bottom: 1px solid var(--sq-hairline);
  font-size: 12.5px; line-height: 18px; color: var(--sq-muted); background: transparent;
}
#changelist nav.toplinks #date-hierarchy-label { font-weight: 500; margin-inline-end: 6px; color: var(--sq-faint); }
#container #changelist nav.toplinks a, #changelist nav.toplinks li { margin: 0; }
#container #changelist nav.toplinks a {
  display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--sq-r-sm); border: 1px solid var(--sq-hairline);
  color: var(--sq-text); text-decoration: none; font-weight: 500;
}
#container #changelist nav.toplinks a:hover { background: var(--sq-subtle); }
#container #changelist nav.toplinks a.date-back { border-color: transparent; color: var(--sq-accent); padding-inline: 4px; }
#changelist .actions {
  background: transparent; border: 0; border-bottom: 1px solid var(--sq-hairline); padding: 8px 12px; margin: 0; color: var(--sq-muted);
  font-size: 12.5px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; line-height: 18px; min-height: 0;
}
#changelist .actions label { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--sq-muted); }
#changelist .actions select { height: 28px; min-height: 28px; padding-block: 0; font-size: 12.5px; width: auto; min-width: 200px; }
#changelist .actions .button, #changelist .actions button.button { height: 28px; min-height: 28px; padding: 0 10px; font-size: 12.5px; }
#changelist .actions span.all, #changelist .actions span.action-counter, #changelist .actions span.clear, #changelist .actions span.question {
  font-size: 12px; color: var(--sq-faint); font-variant-numeric: tabular-nums; margin: 0;
}
#changelist .actions.selected { background: var(--sq-accent-soft); }

#changelist .results { overflow-x: auto; }
#changelist table#result_list { width: 100%; border: 0; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
#result_list tbody tr, .inline-group tbody tr, #result_list tbody tr:nth-child(odd), #result_list tbody tr:nth-child(even) { background: var(--sq-surface); }
#changelist table thead th {
  background: var(--sq-subtle); color: var(--sq-muted); font-size: 12px; font-weight: 500; line-height: 16px; text-align: start;
  text-transform: none; letter-spacing: 0; border-top: 0; border-bottom: 1px solid var(--sq-hairline); padding: 0; vertical-align: middle; white-space: nowrap;
}
#changelist table thead th .text a, #changelist table thead th .text > span { padding: 8px 12px; display: block; color: var(--sq-muted); text-decoration: none; }
#changelist table thead th.sorted .text a { color: var(--sq-text); padding-inline-end: 36px; }
#changelist table thead th.action-checkbox-column { width: 1px; padding: 0 0 0 12px; }
#changelist table thead th.action-checkbox-column .text > span { padding: 8px 0; }
#changelist table thead th .sortoptions { padding: 9px 8px 0 0; }
#changelist table thead th .sortoptions a { opacity: 0.6; }
#changelist table thead th.sortable:hover { background: var(--sq-muted-bg); }
#result_list td, #result_list th {
  padding: 9px 12px; border-top: 0; border-bottom: 1px solid var(--sq-hairline); vertical-align: middle; font-size: 13px; line-height: 18px; color: var(--sq-text);
}
#result_list tbody td { color: var(--sq-muted); }
#result_list tbody tr:last-child td, #result_list tbody tr:last-child th { border-bottom: 0; }
#result_list td.action-checkbox { padding-inline: 12px 0; width: 1px; }
#result_list tbody tr:hover td, #result_list tbody tr:hover th { background: var(--sq-hover); }
#result_list tbody tr.selected td, #result_list tbody tr.selected th, #changelist tbody tr:has(.action-select:checked) td,
#changelist tbody tr:has(.action-select:checked) th { background: var(--selected-row); }
#container #result_list a { font-weight: 500; text-decoration: none; color: var(--sq-text); }
#container #result_list a:hover { color: var(--sq-accent); }
#container #result_list thead th .text a { color: var(--sq-muted); font-weight: 500; }
#container #result_list thead th.sorted .text a { color: var(--sq-text); }
#container #result_list thead th .text a:hover { color: var(--sq-text); }
#result_list td.field-setup { color: var(--sq-warning); font-size: 12.5px; line-height: 17px; min-width: 120px; }
#result_list td.field-owner_shown, #result_list td.field-comment { font-size: 12.5px; line-height: 17px; }
#result_list td.field-comment { min-width: 220px; }
#result_list td.field-amount, #result_list td.field-amount_shown { font-weight: 500; color: var(--sq-text); white-space: nowrap; }
#result_list td.field-start_at, #result_list td.field-created_at, #result_list td.field-paid_on, #result_list td.field-extends_until,
#result_list td.field-access_until, #result_list td.field-phone { white-space: nowrap; }
#result_list th.field-id, #result_list td.field-id { color: var(--sq-faint); }
#result_list img[src*="icon-yes"], #result_list img[src*="icon-no"] { width: 14px; height: 14px; vertical-align: -2px; }
/* "No" keeps its cross but goes quiet, so a column of them does not read as a column of errors. */
img[src*="icon-no.svg"] { filter: grayscale(1); opacity: 0.5; }
#changelist .paginator { padding: 8px 12px; }
#changelist .changelist-footer { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--sq-hairline); padding: 0; background: transparent; }
.paginator {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px; border: 0; padding: 8px 12px; margin: 0;
  color: var(--sq-faint); font-size: 12px; line-height: 18px; font-variant-numeric: tabular-nums; background: transparent;
}
.paginator ul { display: flex; gap: 2px; margin: 0 8px 0 0; padding: 0; }
.paginator li { list-style: none; margin: 0; padding: 0; }
#container .paginator a { text-decoration: none; }
.paginator a:link, .paginator a:visited, .paginator .this-page, .paginator .end {
  display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; box-sizing: border-box;
  border-radius: var(--sq-r-sm); background: transparent; color: var(--sq-muted); border: 1px solid transparent; font-size: 12px;
}
.paginator a:link:hover { background: var(--sq-subtle); color: var(--sq-text); }
.paginator .this-page { font-weight: 600; color: var(--sq-text); border-color: var(--sq-hairline-strong); background: var(--sq-surface); }
.paginator a.showall:link, .paginator a.showall:visited { color: var(--sq-accent); width: auto; margin-inline-start: 6px; }

/* Filters: the first strip of the list card, each filter a small segmented control. */
#changelist-filter {
  order: 0; flex: none; width: 100%; margin: 0; padding: 10px 12px; box-sizing: border-box; color: var(--sq-text);
  background: transparent; border: 0; border-bottom: 1px solid var(--sq-hairline); border-radius: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
}
#changelist-filter h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; padding: 0; }
#changelist-filter #changelist-filter-extra-actions {
  order: 9; padding: 0; margin: 0 0 0 auto; border: 0; font-size: 12px; line-height: 18px; display: flex; gap: 12px;
}
#changelist-filter #changelist-filter-extra-actions h3 { padding: 0; margin: 0; font-size: 12px; font-weight: 500; line-height: 18px; }
#container #changelist-filter-extra-actions a { color: var(--sq-muted); text-decoration: none; background: none; padding: 0; font-weight: 500; }
#container #changelist-filter-extra-actions a:hover { color: var(--sq-accent); }
#changelist-filter details { margin: 0; min-width: 0; max-width: 100%; display: flex; align-items: center; gap: 8px; }
#changelist-filter h3, #changelist-filter summary {
  color: var(--sq-faint); font-size: 12px; font-weight: 500; line-height: 18px; padding: 0; margin: 0; text-transform: none; white-space: nowrap;
}
#changelist-filter details > summary { cursor: pointer; list-style: none; padding: 0; margin: 0; }
#changelist-filter details > summary::-webkit-details-marker, #changelist-filter details > summary::marker { display: none; content: ""; }
#changelist-filter details > summary::before { display: none; }
#changelist-filter ul {
  display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; margin: 0; border: 1px solid var(--sq-hairline);
  border-radius: 999px; background: var(--sq-subtle); max-width: 100%; box-sizing: border-box;
}
#changelist-filter li { margin: 0; padding: 0; list-style: none; }
#container #changelist-filter li a {
  display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 999px; box-sizing: border-box;
  border: 0; background: transparent; color: var(--sq-muted); text-decoration: none;
  font-size: 12.5px; font-weight: 500; line-height: 18px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
#container #changelist-filter li a:hover { color: var(--sq-text); }
#changelist-filter li.selected { border: 0; padding: 0; margin: 0; }
#container #changelist-filter li.selected a {
  color: var(--sq-accent); background: var(--sq-surface); font-weight: 600; box-shadow: var(--sq-shadow-raised);
}
#changelist-filter-clear { padding: 0; margin: 0; border: 0; }
#container #changelist-filter-clear a { color: var(--sq-accent); font-weight: 500; font-size: 12px; text-decoration: none; }

/* ---------- Forms: label on the left, field on the right, inside hairline cards ---------- */
.module { overflow: visible; margin-bottom: 16px; }
fieldset.module { padding: 0; }
.module h2, .module caption, .inline-group h2, fieldset .fieldset-heading {
  background: transparent; color: var(--sq-text); font-size: 13.5px; font-weight: 600; line-height: 20px; letter-spacing: -0.1px;
  text-transform: none; padding: 12px 16px; margin: 0; border: 0; border-bottom: 1px solid var(--sq-hairline); text-align: start;
  border-radius: var(--sq-r-lg) var(--sq-r-lg) 0 0;
}
.module caption a.section:link, .module caption a.section:visited, .module h2 a:link, .module h2 a:visited { color: var(--sq-text); }
fieldset .description, .module .description, fieldset > .description { color: var(--sq-muted); font-size: 12.5px; line-height: 18px; padding: 10px 16px; margin: 0; border-bottom: 1px solid var(--sq-hairline); }
fieldset details summary { cursor: pointer; }
.collapse summary .fieldset-heading { border-bottom: 0; display: inline; }
fieldset .form-row, .module .form-row { border-bottom: 1px solid var(--sq-hairline); padding: 12px 16px; overflow: visible; font-size: 13px; }
fieldset .form-row:last-child { border-bottom: 0; }
.aligned label, .form-row label, fieldset .form-row > div > label, .flex-container > label, .aligned legend, .form-row legend {
  color: var(--sq-text); font-size: 13px; font-weight: 500; line-height: 20px;
}
.aligned label:not(.required):not(.vCheckboxLabel), .form-row legend:not(.required) { color: var(--sq-muted); }
.required legend, legend.required, .required label, label.required { font-weight: 500; }
label.required::after { content: ""; }
.aligned fieldset legend { padding: 0; float: none; width: auto; }
.aligned label { width: auto; min-width: 0; padding: 0; float: none; }
.aligned .readonly, .aligned label + div.readonly {
  padding: 0; margin: 0; color: var(--sq-text); font-size: 13px; line-height: 20px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.aligned label + p, form .aligned p.help, form .aligned div.help, .aligned div.help { margin: 0; padding: 0; }
.aligned .flex-container { gap: 6px; }
/* Radio choices (the payment's plan): each choice a compact row. */
.aligned .flex-container div[id^="id_"] > div > label {
  display: flex; align-items: center; gap: 8px; min-height: 28px; color: var(--sq-text); font-size: 13px; font-weight: 400;
  font-variant-numeric: tabular-nums; justify-content: flex-start; width: auto;
}
.aligned .flex-container div[id^="id_"] > div > label > input[type="radio"] { flex: none; width: 15px; height: 15px; margin: 0; padding: 0; }
.aligned .flex-container:has(> div.checkbox) { flex-direction: row; align-items: center; }
.aligned .checkbox-row label, .aligned .vCheckboxLabel { width: auto; min-width: 0; padding: 0; color: var(--sq-text); font-weight: 500; }
.aligned .flex-container.checkbox-row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.aligned .flex-container.checkbox-row > label { white-space: nowrap; }
.aligned .flex-container.checkbox-row > .help { flex-basis: 100%; }
.aligned .flex-container div.checkbox { align-items: center; }

@media (min-width: 901px) {
  .aligned .form-row > .flex-container:not(.checkbox-row) {
    display: grid; grid-template-columns: var(--sq-label-w) minmax(0, 1fr); column-gap: 24px; row-gap: 4px; align-items: start;
  }
  .aligned .form-row > .flex-container:not(.checkbox-row) > label { grid-column: 1; grid-row: 1; padding-top: 6px; }
  .aligned .form-row > .flex-container:not(.checkbox-row) > * { grid-column: 2; min-width: 0; justify-self: stretch; }
  .aligned .form-row > .flex-container:not(.checkbox-row) > select { justify-self: start; }
  .aligned .form-row .flex-container > .help { order: 5; }
  .aligned .form-row:has(div.readonly) .flex-container > label { padding-top: 0; }
  .aligned .form-row:has(div.readonly) { padding-block: 9px; }
  /* Radio groups use a fieldset and legend: the legend floats into the label column. */
  .aligned .form-row > fieldset { display: grid; grid-template-columns: var(--sq-label-w) minmax(0, 1fr); column-gap: 24px; }
  .aligned .form-row > fieldset > legend { float: left; grid-column: 1; padding-top: 4px; }
  .aligned .form-row > fieldset > .flex-container { grid-column: 2; display: flex; flex-direction: column; }
  .aligned .flex-container.checkbox-row, .aligned .form-row > div.help { margin-inline-start: calc(var(--sq-label-w) + 24px); }
  .aligned .form-row > ul.errorlist { margin-inline-start: calc(var(--sq-label-w) + 24px); }
}

input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="tel"], input[type="search"],
input[type="url"], input[type="date"], input[type="time"], input[type="datetime-local"], textarea, select, .vTextField, .vURLField {
  height: var(--sq-control); min-height: var(--sq-control); border-radius: var(--sq-r); border: 1px solid var(--sq-hairline-strong);
  background-color: var(--sq-surface); color: var(--sq-text); padding: 0 10px; font-size: 13px; line-height: 20px;
  box-sizing: border-box; font-variant-numeric: tabular-nums; box-shadow: 0 1px 1px rgb(24 24 27 / 0.03);
  transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}
input::placeholder, textarea::placeholder { color: var(--sq-faint); }
.vTextField, .vURLField, input[type="email"].vTextField { width: 100%; max-width: 420px; }
input[type="number"], .vIntegerField, .vBigIntegerField, .vPositiveIntegerField { width: 140px; }
textarea { height: auto; min-height: 76px; padding: 6px 10px; resize: vertical; }
.aligned textarea.vLargeTextField { height: 96px; }
.colM .aligned .vLargeTextField, .colM .aligned .vXMLLargeTextField, .aligned textarea { width: 100%; max-width: 560px; }
select {
  -webkit-appearance: none; appearance: none; padding-inline-end: 30px; max-width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C8C94' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 14px;
}
select[multiple] { height: auto; padding: 4px; background-image: none; }
input[type="color"] { width: 52px; height: var(--sq-control); padding: 3px; border-radius: var(--sq-r); border: 1px solid var(--sq-hairline-strong); background: var(--sq-surface); box-sizing: border-box; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--sq-ink); width: 15px; height: 15px; }
input[type="file"] { font-size: 12.5px; color: var(--sq-muted); }
input:focus, textarea:focus, select:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus, .vTextField:focus {
  border-color: var(--sq-accent-fill); outline: none; box-shadow: 0 0 0 3px var(--sq-focus);
}
.vDateField, .vTimeField { width: 130px; min-width: 0; }
.datetime input, .vDateField, .vTimeField { margin-inline-end: 6px; }
p.date, p.time, p.datetime { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; color: var(--sq-muted); line-height: var(--sq-control); }
.datetimeshortcuts { color: var(--sq-faint); font-size: 12.5px; display: inline-flex; align-items: center; gap: 2px; }
.datetimeshortcuts a { color: var(--sq-accent); font-weight: 500; }
.datetimeshortcuts button { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: var(--sq-r-sm); }
.datetimeshortcuts button:hover { background: var(--sq-subtle); }
.date-icon, .clock-icon, .datetimeshortcuts img { filter: grayscale(1); opacity: 0.65; }
.timezonewarning { font-size: 12px; color: var(--sq-faint); }
.errors input, .errors select, .errors textarea, input.errors { border-color: var(--sq-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sq-danger) 15%, transparent); }
.form-row.errors { background: color-mix(in srgb, var(--sq-danger) 4%, var(--sq-surface)); border-bottom: 1px solid var(--sq-hairline); }
ul.errorlist { color: var(--sq-danger); font-size: 12.5px; font-weight: 500; margin: 0 0 6px; padding: 0; background: none; }
ul.errorlist li { font-size: 12.5px; padding: 0; margin: 0; list-style: none; }
.errornote {
  border: 1px solid color-mix(in srgb, var(--sq-danger) 25%, transparent); border-radius: var(--sq-r); padding: 8px 12px; margin: 0 0 16px;
  font-size: 13px; line-height: 20px; font-weight: 500; color: var(--sq-danger); background: color-mix(in srgb, var(--sq-danger) 7%, var(--sq-surface));
}
.errornote::before {
  content: "!"; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--sq-danger);
  color: var(--sq-surface); font-size: 11px; font-weight: 700; margin-inline-end: 8px; vertical-align: -3px;
}

/* The save bar sticks to the bottom of the window while the form scrolls. */
.submit-row {
  position: static; z-index: 5;
  background: color-mix(in srgb, var(--sq-surface) 92%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--sq-hairline); border-radius: var(--sq-r-lg); padding: 10px 12px; margin: 16px 0 0;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; box-shadow: 0 1px 2px rgb(24 24 27 / 0.04), 0 8px 24px rgb(24 24 27 / 0.08); overflow: visible;
}
.submit-row input, .submit-row a.deletelink, .submit-row .button { margin: 0; }
.submit-row a.deletelink, .submit-row .deletelink-box { margin-inline-start: auto; }
.submit-row .deletelink-box { order: 9; }
.delete-confirmation .submit-row, .sq-confirm .submit-row, .login .submit-row, .popup .submit-row { position: static; box-shadow: none; backdrop-filter: none; }

@media (min-width: 768px) {
  .change-form .submit-row { position: sticky; bottom: 12px; }
}
/* Change forms stay a readable width; lists use the room. */
.change-form #content-main { max-width: 980px; }
.change-form #content { max-width: 1024px; }

/* Inline groups (shop photos) */
.inline-group { overflow: hidden; margin-bottom: 16px; padding: 0; }
.inline-group .tabular table { width: 100%; border: 0; border-collapse: collapse; }
.inline-group .tabular thead th {
  background: var(--sq-subtle); color: var(--sq-muted); font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0;
  border-bottom: 1px solid var(--sq-hairline); padding: 7px 12px; line-height: 16px;
}
.inline-group .tabular td, .inline-group .tabular th { border-bottom: 1px solid var(--sq-hairline); padding: 8px 12px; vertical-align: middle; font-size: 13px; }
.inline-group .tabular tr.has_original td { padding-top: 8px; }
.inline-group .tabular td.original p { display: none; }
.inline-group .tabular tr.add-row td, .inline-group div.add-row { background: transparent; border-bottom: 0; padding: 10px 12px; }
.inline-group div.add-row a, .inline-group .tabular tr.add-row td a { color: var(--sq-accent); font-weight: 500; background-image: none; padding-inline-start: 0; font-size: 12.5px; }
.inline-related h3 { background: var(--sq-subtle); color: var(--sq-text); font-size: 12.5px; padding: 8px 16px; border: 0; }
.inline-group img[src*="icon-"] { width: 14px; height: 14px; }
.inline-group img:not([src*="icon-"]) { height: 56px !important; width: 56px; object-fit: cover; border-radius: var(--sq-r) !important; display: block; border: 1px solid var(--sq-hairline); }

/* Messages: slim tinted banners */
ul.messagelist { margin: 24px 96px 0 40px; padding: 0; max-width: 1216px; }
ul.messagelist li {
  border-radius: var(--sq-r); margin: 0 0 8px; padding: 8px 12px 8px 36px; font-size: 13px; line-height: 20px; font-weight: 500;
  background-position: 12px 10px; background-size: 14px; color: var(--sq-text);
  border: 1px solid color-mix(in srgb, var(--tone, var(--sq-muted)) 22%, transparent);
}
ul.messagelist li.success { --tone: var(--sq-success); color: var(--sq-success); }
ul.messagelist li.warning { --tone: var(--sq-warning); color: var(--sq-warning); }
ul.messagelist li.error { --tone: var(--sq-danger); color: var(--sq-danger); }
ul.messagelist li.info { --tone: var(--sq-info); color: var(--sq-info); }

/* Delete / confirm pages */
.delete-confirmation #content > p, .delete-confirmation #content-main > p, .sq-confirm #content-main > p { font-size: 13px; line-height: 20px; max-width: 680px; color: var(--sq-muted); }
.delete-confirmation h2 { font-size: 13.5px; font-weight: 600; margin: 20px 0 8px; color: var(--sq-text); }
.delete-confirmation #content ul, #deleted-objects, .sq-unfinished {
  line-height: 1.6; background: var(--sq-surface); border: 1px solid var(--sq-hairline); border-radius: var(--sq-r-lg);
  padding: 10px 16px 10px 32px; margin: 8px 0 16px; max-width: 680px; box-sizing: border-box;
}
.delete-confirmation #content ul ul { border: 0; padding: 0 0 0 16px; margin: 0; background: none; }
.delete-confirmation form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.delete-confirmation form > div { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sq-unfinished li { margin-bottom: 4px; }
.sq-confirm .submit-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: none; border: 0; padding: 0; }

/* Shop set-up checklist */
.sq-checklist, .aligned .readonly ul.sq-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sq-checklist li { list-style: none; padding: 0; }
.sq-checklist .is-done span { color: var(--sq-success); font-weight: 700; }
.sq-checklist .is-missing { color: var(--sq-danger); }

/* The pencil / plus / eye buttons next to a choice get a word; their title stays the screen reader's name. */
.related-widget-wrapper { display: flex; flex-wrap: wrap; gap: 4px 2px; align-items: center; }
.related-widget-wrapper > select { margin-inline-end: 6px; }
.related-widget-wrapper-link {
  display: inline-flex; align-items: center; height: 26px; padding: 0 7px; border-radius: var(--sq-r-sm); font-size: 12.5px; font-weight: 500;
  text-decoration: none !important; white-space: nowrap; color: var(--sq-muted) !important; opacity: 1;
}
.related-widget-wrapper-link img { display: none; }
.related-widget-wrapper-link:hover { background: var(--sq-subtle); color: var(--sq-text) !important; }
.related-widget-wrapper-link.delete-related:hover { color: var(--sq-danger) !important; }
.related-widget-wrapper-link.change-related::after { content: "Edit"; }
.related-widget-wrapper-link.add-related::after { content: "Add new"; }
.related-widget-wrapper-link.view-related::after { content: "View"; }
.related-widget-wrapper-link.delete-related::after { content: "Delete"; }
.related-widget-wrapper-link:not([href]) { opacity: 0.4; }

/* Calendar and clock pop-ups */
.calendarbox, .clockbox {
  background: var(--sq-surface); border: 1px solid var(--sq-hairline); border-radius: var(--sq-r-lg); box-shadow: var(--sq-shadow-pop);
  overflow: hidden; font-size: 12.5px;
}
.calendar caption, .calendarbox h2, .clockbox h2 { background: var(--sq-surface); color: var(--sq-text); font-weight: 600; font-size: 13px; text-transform: none; border: 0; }
.calendar th { background: transparent; color: var(--sq-faint); font-weight: 500; border: 0; }
.calendar td { border: 0; background: transparent; }
.calendar td a { border-radius: var(--sq-r-sm); color: var(--sq-text); }
.calendar td a:hover { background: var(--sq-subtle); }
.calendar td.selected a, .calendar td a:active { background: var(--sq-ink); color: var(--sq-on-ink); }
.calendar td.today a { color: var(--sq-accent); font-weight: 600; }
.calendarbox .calendarnav-previous, .calendarbox .calendarnav-next { filter: grayscale(1); }
.calendar-shortcuts, .calendar-cancel { background: var(--sq-subtle); border-top: 1px solid var(--sq-hairline); }
.clockbox ul.timelist a:hover { background: var(--sq-subtle); }

/* Breadcrumbs: the sidebar and page title show where you are. */
nav > ol.breadcrumbs, div.breadcrumbs { background: transparent; color: var(--sq-muted); padding: 16px 32px 0; margin: 0; border: 0; font-size: 12.5px; }
body:not(.login) nav[aria-label="Breadcrumbs"] { display: none; }

/* History page */
#change-history { font-size: 13px; }
#change-history th, #change-history td { padding: 9px 12px; border-bottom: 1px solid var(--sq-hairline); }
#change-history thead th { background: var(--sq-subtle); color: var(--sq-muted); font-weight: 500; font-size: 12px; }

/* Keyboard focus stays visible */
a:focus-visible, button:focus-visible, .sq-kpi:focus-visible, .sq-nav__item:focus-visible, input[type="submit"]:focus-visible,
.button:focus-visible, summary:focus-visible, input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
  outline: 2px solid var(--sq-accent-fill); outline-offset: 2px;
}

.skip-to-content-link { background: var(--sq-ink); color: var(--sq-on-ink); border-radius: 0 0 var(--sq-r) 0; }

/* ---------- Login, login code, too many attempts ---------- */
/* One colour behind the card: Django's login.css paints the body a shade lighter, and flow-root keeps the card's top margin
   inside the body instead of showing the page colour above it. */
body.login { min-height: 100vh; background: var(--sq-page); display: flow-root; }
.login #main { background: var(--sq-surface); }
.login #container {
  max-width: 384px; width: calc(100% - 32px); margin: 14vh auto 32px; border-radius: 20px; overflow: hidden; min-width: 0;
  background: var(--sq-surface); border: 1px solid var(--sq-hairline); box-shadow: var(--sq-shadow-pop);
}
.login #header { justify-content: center; padding: 28px 28px 0; height: auto; min-height: 0; border-bottom: 0; background: var(--sq-surface); position: relative; }
.login #header #branding { flex-direction: column; gap: 0; }
.login #header .theme-toggle { position: absolute; top: 10px; inset-inline-end: 10px; }
.login .sq-brand { flex-direction: column; gap: 10px; }
.login .sq-brand__logo { width: 44px; height: 44px; }
.login .sq-brand__logo .sq-icon { width: 20px; height: 20px; }
.login .sq-brand__name { font-size: 17px; letter-spacing: -0.3px; }
.login .sq-brand__tag { margin-top: -4px; }
.login #content { padding: 20px 28px 28px; }
.login #content-main { width: 100%; }
.login #content-main > p, .login #content > p:not(.errornote) { color: var(--sq-muted); font-size: 13px; line-height: 20px; margin: 0 0 14px; }
.login .form-row { padding: 0 0 14px; border: 0; }
.login .form-row label { display: block; color: var(--sq-text); font-weight: 500; font-size: 13px; line-height: 18px; padding: 0 0 6px; width: auto; float: none; }
.login .form-row input { width: 100%; box-sizing: border-box; height: 42px; min-height: 42px; padding: 0 14px; font-size: 14px; }
.login .form-row #id_code { height: 44px; font-size: 20px; font-weight: 600; letter-spacing: 8px; text-align: center; font-variant-numeric: tabular-nums; }
.login .password-reset-link { text-align: center; }
.login .submit-row { background: transparent; border: 0; box-shadow: none; padding: 6px 0 0; margin: 0; }
.login .submit-row input { width: 100%; height: 42px; min-height: 42px; font-size: 14px; }
.login .errornote { margin-bottom: 14px; }
.login #content-main a { color: var(--sq-accent); font-weight: 500; }
.login #content-main > form + p { margin-top: 14px; text-align: center; font-size: 12.5px; }
.login #content-main p:last-child { margin-bottom: 0; }
.login #footer { display: none; }

/* ---------- Narrower screens ---------- */
@media (max-width: 1180px) {
  .sq-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1025px) {
  /* Wide screens: no inner scroller, so the column titles stay on screen while the list scrolls. */
  #changelist .results { overflow: visible; }
  #changelist table thead th { position: sticky; top: 0; z-index: 2; }
}
/* Phones and small tablets: a slim top bar (menu, name, theme) sticks; the menu slides in from the left. */
@media (max-width: 900px) {
  body:not(.login):not(.popup) #container { display: block; min-height: 100vh; }
  #header {
    position: sticky; top: 0; z-index: 20; padding: 0 16px; height: var(--sq-topbar-h); min-height: var(--sq-topbar-h);
    border-bottom: 1px solid var(--sq-hairline);
    background: color-mix(in srgb, var(--sq-side) 86%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  }
  .sq-topbar__menu { display: inline-grid; }
  .sq-topbar__brand { display: inline-flex !important; }
  #main { flex-direction: column; }
  #nav-sidebar.sq-nav {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; height: auto; align-self: auto; width: min(288px, 86vw); flex: none;
    box-shadow: var(--sq-shadow-pop);
    transform: translateX(-105%); visibility: hidden; transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s 260ms;
  }
  body.sq-nav-open #nav-sidebar.sq-nav { transform: none; visibility: visible; transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1); }
  .sq-nav__close {
    display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
    border-radius: 9px; border: 1px solid var(--sq-hairline); background: var(--sq-surface); color: var(--sq-muted); cursor: pointer;
  }
  .sq-scrim { display: block; position: fixed; inset: 0; z-index: 30; background: rgb(15 23 42 / 0.32); opacity: 0; pointer-events: none; transition: opacity 200ms ease-out; }
  .sq-scrim[hidden] { display: block; }
  body.sq-nav-open .sq-scrim { opacity: 1; pointer-events: auto; }
  body.sq-nav-open { overflow: hidden; }
  #content { padding: 22px 16px 40px; }
  .sq-intro { padding-inline-end: 0; }
  #content .sq-intro h1 { font-size: 26px; line-height: 33px; letter-spacing: -0.5px; }
  .sq-intro__lead { font-size: 14px; line-height: 21px; }
  .titles-and-tools { margin-bottom: 20px; justify-content: flex-start; }
  .titles { flex-basis: 100%; }
  ul.messagelist { margin: 12px 16px 0; }
}
@media (max-width: 767px) {
  body { font-size: 13px; }
  .sq-kpis { gap: 12px; }
  .sq-kpi { padding: 14px 14px 16px; }
  .sq-kpi__value { font-size: 23px; line-height: 30px; }
  .sq-card { padding: 18px 16px 20px; }
  .sq-card__head { flex-wrap: wrap; }
  .sq-need { grid-template-columns: 32px minmax(0, 1fr); row-gap: 10px; }
  .sq-need__action { grid-column: 2; justify-self: start; }
  .sq-chart { height: 220px; }
  #result_list td, #result_list th { white-space: normal; padding: 9px 10px; }
  #result_list td.field-setup { min-width: 0; }
  #changelist .actions label { flex: 1 1 100%; min-width: 0; }
  #changelist .actions select { flex: 1 1 auto; min-width: 0; width: 100%; }
  #changelist .actions span { flex: none; }
  /* Django sizes these to the screen (100vw - 30px); inside our padded cards that runs past the edge. */
  fieldset.aligned .form-row > div, .aligned .form-row, .aligned .form-row > div { width: auto; max-width: 100%; }
  .related-widget-wrapper { max-width: 100%; min-width: 0; }
  .related-widget-wrapper > select { flex: 1 1 100%; max-width: 100%; min-width: 0; margin-inline-end: 0; }
  .vTextField, .vURLField, .aligned textarea { max-width: 100%; }
  fieldset .form-row, .module .form-row { padding: 10px 12px; }
  .module h2, .module caption, .inline-group h2, fieldset .fieldset-heading { padding: 10px 12px; }
  .aligned .form-row > fieldset > legend { margin-bottom: 4px; }
  /* 16px inputs stop phones zooming the page when a field is tapped. */
  input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="tel"], input[type="search"],
  input[type="url"], textarea, select, .vTextField { font-size: 16px; height: 36px; min-height: 36px; }
  textarea { height: auto; min-height: 76px; }
  #changelist .actions select { font-size: 16px; height: 32px; }
  .sq-select select { font-size: 16px; height: 34px; }
  .submit-row { padding: 8px; box-shadow: none; flex-direction: row; justify-content: flex-start; }
  .submit-row input { flex: 0 1 auto; }
  .submit-row a.deletelink, .submit-row .deletelink-box { margin-inline-start: 0; }
  .object-tools { margin: 0; }
  .login #container { margin-top: 8vh; }
}
@media (max-width: 560px) {
  .sq-brand__tag { display: none; }
  .login .sq-brand__tag { display: inline-block; }
  .sq-kpis { gap: 10px; }
  .sq-kpi__open { width: 26px; height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}