/*
 * Stock Tabler. The only theming is the nullhost.eu oxford blue as Tabler's primary colour,
 * set the same way Tabler's own data-bs-theme-primary presets do it; <html data-bs-navbar-theme="primary">
 * then paints the navbar / sidebar in it.
 */
:root {
    /* Tabler expects the Inter web font; we don't load it, so use the system UI font. */
    --tblr-font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --tblr-primary: #002147;
    --tblr-primary-rgb: 0, 33, 71;
    --tblr-primary-lt: color-mix(in oklab, var(--tblr-primary) 10%, transparent);
    --tblr-primary-darken: color-mix(in oklab, var(--tblr-primary), white 15%);
    --tblr-primary-text-emphasis: var(--tblr-primary);
    --tblr-primary-bg-subtle: color-mix(in oklab, var(--tblr-primary) 10%, white);
    --tblr-link-color: #0a3a73;
    --tblr-link-color-rgb: 10, 58, 115;
    --tblr-link-hover-color: var(--tblr-primary);
}

/*
 * Dark mode (Tabler sets data-bs-theme="dark" on <html>, by default from the system setting).
 * The oxford blue disappears on a dark background, so content uses a lighter brand blue;
 * the sidebar keeps the oxford blue.
 */
:root[data-bs-theme="dark"] {
    --tblr-primary: #2f6db5;
    --tblr-primary-rgb: 47, 109, 181;
    --tblr-primary-lt: color-mix(in oklab, #2f6db5 22%, transparent);
    --tblr-primary-darken: color-mix(in oklab, #2f6db5, white 12%);
    --tblr-primary-text-emphasis: #8dbbeb;
    --tblr-primary-bg-subtle: color-mix(in oklab, #2f6db5 22%, var(--tblr-bg-surface));
    --tblr-link-color: #8dbbeb;
    --tblr-link-color-rgb: 141, 187, 235;
    --tblr-link-hover-color: #b5d3f3;
    --tblr-link-hover-color-rgb: 181, 211, 243;
}
:root[data-bs-theme="dark"][data-bs-navbar-theme="primary"] .page > .navbar { --tblr-navbar-bg: #002147; }
:root[data-bs-theme="dark"] .bg-primary-lt { color: #8dbbeb !important; }
:root[data-bs-theme="dark"] .text-primary { color: #8dbbeb !important; }

.font-monospace-sm { font-family: var(--tblr-font-monospace); font-size: .8125rem; }
.backup-codes { columns: 2; font-family: var(--tblr-font-monospace); font-size: 1rem; }
.qr-code svg { width: 200px; height: 200px; }
.table td.text-truncate { max-width: 18rem; }
.admin-note { white-space: pre-wrap; }
/* Radio/checkbox options of a required choice are not each required. */
.form-check-label.required::after { content: none; }
@media (max-width: 575.98px) {
    .page-header .btn-list { margin-top: .75rem; }
}
/* Counter badges in the vertical sidebar sit at the end of the row, not as a corner bubble. */
.navbar-vertical .navbar-nav .nav-link .badge { position: static; transform: none; margin-inline-start: auto; }
/* Datagrid in a narrow side card: two columns instead of one long list. */
.datagrid-compact { --tblr-datagrid-item-width: 9rem; --tblr-datagrid-padding: 1rem; }

/* Ticket compose: the reply hint and "then" select only make sense for a reply. */
.ticket-compose[data-kind="note"] .reply-only { display: none; }

/* "i" next to admin actions with side effects (templates/admin/_effects.html.twig). */
.action-effects { display: inline-flex; align-items: center; color: var(--tblr-secondary); cursor: help; align-self: center; }
.action-effects:hover, .action-effects:focus { color: var(--tblr-primary); outline: none; }
.action-effects-popover { --tblr-popover-max-width: 22rem; }
.action-effects-list { margin: 0; padding-left: 1rem; }
.action-effects-list li + li { margin-top: .35rem; }
.btn-list > form:has(> .action-effects) { display: inline-flex; align-items: center; gap: .25rem; }
/* Rozesílky: provozní informace never go to subscribers who are not customers. */
.campaign-form[data-kind="operational"] .newsletter-only { display: none; }
@media (min-width: 768px) { .audience-groups { column-count: 2; column-gap: 2rem; } .audience-groups > div:first-child { column-span: all; } }