/* Skin for the admin panel.
   Loaded on top of Tabler: tokens first, then the pieces of chrome that
   Tabler compiles with hard-coded colours.

   The palette is one plum accent (#714B67) carrying every
   active/primary state, warm neutrals for the chrome, and semantic colour only
   where it means something (statuses, favourites, deletes). */

/* --- Tokens --- */

:root,
[data-bs-theme="light"] {
    --o-ink: #241f26;
    --o-ink-soft: #453e48;
    --o-ink-muted: #7c7386;
    --o-line: #d9d4d0;
    --o-line-soft: #ece8e4;
    --o-surface: #ffffff;
    --o-canvas: #f4f1ee;
    --o-hover: #f6f2f5;
    --o-header-bg: #f8f6f3;
    --o-navbar-bg: #714b67;
    --o-navbar-ink: #ffffff;
    /* the one colour of the panel: primary actions and active states */
    --o-accent: #714b67;
    --o-accent-strong: #5d3d55;
    --o-accent-soft: #f0e8ee;
    --o-accent-rgb: 113, 75, 103;
    --o-accent-soft-rgb: 240, 232, 238;
    /* the accent thinned out: chip borders, hovers, disabled primaries */
    --o-chip-border: #d9c3d2;
    --o-chip-hover: #e4d5e0;
    --o-accent-disabled: #b39cac;
    /* neutral control borders, tinted to the theme's temperature */
    --o-btn-border: #cbc5c0;
    --o-btn-border-hover: #b3aca6;
    /* semantic colour, used only where it carries meaning */
    --o-success-bg: #dcefdd;
    --o-success-ink: #256d33;
    --o-danger: #b3392f;
    --o-danger-strong: #96271e;
    --o-danger-bg: #fbe3e0;
    --o-gold: #e6a800;

    --tblr-body-bg: var(--o-canvas);
    --tblr-body-color: var(--o-ink);
    --tblr-body-font-size: 0.875rem;
    --tblr-border-color: var(--o-line);
    --tblr-border-color-translucent: var(--o-line);
    --tblr-border-radius: 3px;
    --tblr-border-radius-sm: 2px;
    --tblr-border-radius-lg: 4px;
    --tblr-primary: var(--o-accent);
    --tblr-primary-rgb: var(--o-accent-rgb);
    --tblr-secondary: #5a525e;
    --tblr-secondary-rgb: 90, 82, 94;
    --tblr-muted: var(--o-ink-muted);
    --tblr-link-color: var(--o-accent);
    --tblr-link-color-rgb: var(--o-accent-rgb);
    --tblr-link-hover-color: var(--o-accent-strong);
    --tblr-link-hover-color-rgb: var(--o-accent-rgb);

    /* DataTables paints selected rows from these */
    --dt-row-selected: var(--o-accent-soft-rgb);
    --dt-row-selected-text: 36, 31, 38;
    --dt-row-selected-link: 36, 31, 38;
}

/* --- Themes (Settings / Appearance) ---

   layout.html stamps data-o-theme from the appearance.theme setting; every
   painted colour above derives from the tokens below, so a theme is nothing
   but this block. Plum is the untouched default. */

:root[data-o-theme="petrol"] {
    --o-ink: #1e2527;
    --o-ink-soft: #3c4a4c;
    --o-ink-muted: #6e7f80;
    --o-line: #d2dad9;
    --o-line-soft: #e6edec;
    --o-canvas: #f0f4f3;
    --o-hover: #edf4f4;
    --o-header-bg: #f5f9f8;
    --o-navbar-bg: #0e7a80;
    --o-accent: #0e7a80;
    --o-accent-strong: #0a6165;
    --o-accent-soft: #e0efef;
    --o-accent-rgb: 14, 122, 128;
    --o-accent-soft-rgb: 224, 239, 239;
    --o-chip-border: #b9dadb;
    --o-chip-hover: #cde7e7;
    --o-accent-disabled: #86b9bc;
    --o-btn-border: #c3cccb;
    --o-btn-border-hover: #a8b4b3;
}

:root[data-o-theme="indigo"] {
    --o-ink: #1f222c;
    --o-ink-soft: #3f4455;
    --o-ink-muted: #747b90;
    --o-line: #d5d7df;
    --o-line-soft: #e8eaf0;
    --o-canvas: #f2f3f7;
    --o-hover: #f0f2f9;
    --o-header-bg: #f6f7fb;
    --o-navbar-bg: #4a5fc1;
    --o-accent: #4a5fc1;
    --o-accent-strong: #3b4da3;
    --o-accent-soft: #e9ebf8;
    --o-accent-rgb: 74, 95, 193;
    --o-accent-soft-rgb: 233, 235, 248;
    --o-chip-border: #c4cbee;
    --o-chip-hover: #d7dcf4;
    --o-accent-disabled: #a2addf;
    --o-btn-border: #c6c9d3;
    --o-btn-border-hover: #abb0bf;
}

:root[data-o-theme="terracotta"] {
    --o-ink: #271f1a;
    --o-ink-soft: #4a4038;
    --o-ink-muted: #8a7b6f;
    --o-line: #ded4cb;
    --o-line-soft: #ede5dd;
    --o-canvas: #f6f1ec;
    --o-hover: #f9f2ec;
    --o-header-bg: #f9f5f0;
    --o-navbar-bg: #b3552e;
    --o-accent: #b3552e;
    --o-accent-strong: #964421;
    --o-accent-soft: #f7e8e0;
    --o-accent-rgb: 179, 85, 46;
    --o-accent-soft-rgb: 247, 232, 224;
    --o-chip-border: #e9c8b6;
    --o-chip-hover: #f0d7c8;
    --o-accent-disabled: #d9a284;
    --o-btn-border: #d0c6bd;
    --o-btn-border-hover: #b6aba0;
}

:root[data-o-theme="olive"] {
    --o-ink: #22241c;
    --o-ink-soft: #43463a;
    --o-ink-muted: #7c8070;
    --o-line: #d7d6cb;
    --o-line-soft: #e9e8df;
    --o-canvas: #f4f4ec;
    --o-hover: #f2f4ea;
    --o-header-bg: #f7f8f0;
    --o-navbar-bg: #5f7043;
    --o-accent: #5f7043;
    --o-accent-strong: #4c5a35;
    --o-accent-soft: #edf0e4;
    --o-accent-rgb: 95, 112, 67;
    --o-accent-soft-rgb: 237, 240, 228;
    --o-chip-border: #ccd4b8;
    --o-chip-hover: #dde3cc;
    --o-accent-disabled: #a2ad8b;
    --o-btn-border: #c9c9bd;
    --o-btn-border-hover: #aeaf9f;
}

body {
    background: var(--o-canvas);
    color: var(--o-ink);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--o-ink);
    font-weight: 600;
}

/* --- Top bar --- */

.o-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    height: 46px;
    padding: 0 0.5rem;
    background: var(--o-navbar-bg);
    color: var(--o-navbar-ink);
}

.o-burger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--o-navbar-ink);
    font-size: 1rem;
}

.o-burger:hover,
.o-burger[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.16);
    color: var(--o-navbar-ink);
}

.o-brand {
    padding: 0 0.5rem;
    color: var(--o-navbar-ink);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
}

.o-brand:hover {
    color: var(--o-navbar-ink);
}

.o-navbar-user {
    margin-left: auto;
}

.o-navbar-user .o-user-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--o-navbar-ink);
    font-size: inherit;
    text-decoration: none;
}

.o-navbar-user .o-user-toggle:hover,
.o-navbar-user .o-user-toggle[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.16);
}

.o-navbar-user .avatar {
    background: rgba(255, 255, 255, 0.2);
    color: var(--o-navbar-ink);
}

/* --- Apps menu (the burger drop-down) --- */

.o-apps-menu {
    width: 268px;
    padding: 0;
    border: 1px solid var(--o-line);
    border-radius: 0 0 3px 3px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.o-apps-search {
    border: 0;
    border-bottom: 1px solid var(--o-line-soft);
    border-radius: 0;
}

.o-apps-search:focus {
    border-color: var(--o-line-soft);
    box-shadow: none;
}

.o-apps-list {
    max-height: 60vh;
    margin: 0;
    padding: 0.25rem 0;
    overflow-y: auto;
    list-style: none;
}

.o-apps-list .nav-item {
    display: block;
}

.o-apps-list .nav-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.45rem 0.9rem;
    border-radius: 0;
    color: var(--o-ink);
}

.o-apps-list .nav-link:hover {
    background: var(--o-hover);
}

.o-apps-list .nav-link.active {
    background: var(--o-accent-soft);
    box-shadow: inset 3px 0 0 var(--o-accent);
}

/* the upstream macro hides menu icons below lg with a utility class */
.o-apps-list .nav-link-icon {
    display: inline-block !important;
    width: 1.1rem;
    text-align: center;
    color: var(--o-ink-muted);
}

.o-apps-list .nav-link.active .nav-link-icon {
    color: var(--o-accent);
}

/* a group of the menu (DropDown): heading above its entries */
.o-apps-group {
    margin-top: 0.25rem;
    padding-top: 0.25rem;
    border-top: 1px solid var(--o-line-soft);
}

.o-apps-group-label {
    display: block;
    padding: 0.3rem 0.9rem 0.15rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--o-ink-muted);
}

.o-apps-group-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* --- Home: the app tiles --- */

.o-apps-grid {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    border-top: 1px solid var(--o-line);
}

.o-app-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1.9rem 1rem;
    background: var(--o-surface);
    border-right: 1px solid var(--o-line);
    border-bottom: 1px solid var(--o-line);
    color: var(--o-ink);
    text-decoration: none;
}

.o-app-tile i {
    font-size: 1.4rem;
    color: var(--o-accent);
}

.o-app-tile:hover {
    background: var(--o-hover);
    color: var(--o-accent-strong);
}

/* --- Agents screen: a card per built-in agent --- */

.o-agents-grid {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.o-agent-tile {
    justify-content: flex-start;
    gap: 0.45rem;
    padding: 1.6rem 1.25rem;
    text-align: center;
}

.o-agent-tile span {
    font-weight: 600;
}

.o-agent-tile small {
    color: var(--o-ink-muted);
    font-size: 0.72rem;
    line-height: 1.4;
}

/* the control panel of a runnable agent's page */
.o-agent-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.o-agent-panel-head h2 {
    margin: 0 0 0.25rem;
}

.o-agent-panel-head h2 i {
    margin-right: 0.4rem;
    color: var(--o-ink-soft);
}

.o-agent-panel-head p {
    margin: 0;
    max-width: 34rem;
    color: var(--o-ink-soft);
}

/* Configure beside Run now, and neither wrapping under the description */
.o-agent-panel-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: none;
}

.o-agent-runs-title {
    margin: 1.75rem 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--o-ink-muted);
}

.o-agent-runs {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.o-agent-runs th {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--o-line);
    color: var(--o-ink-soft);
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.o-agent-runs td {
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--o-line-soft);
    vertical-align: top;
}

.o-run-summary {
    overflow-wrap: anywhere;
}

.o-run-status {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--o-hover);
    color: var(--o-ink-soft);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.o-run-status-succeeded {
    background: var(--o-success-bg);
    color: var(--o-success-ink);
}

.o-run-status-permanently_failed {
    background: var(--o-danger-bg);
    color: var(--o-danger);
}

.o-run-status-running {
    background: var(--o-accent-soft);
    color: var(--o-accent);
}

.o-agent-runs-empty {
    padding: 0.75rem 0;
    color: var(--o-ink-muted);
}

/* the empty shell of one agent's page */
.o-agent-shell {
    padding: 3rem 2rem;
    text-align: center;
}

.o-agent-shell i {
    font-size: 2rem;
    color: var(--o-ink-soft);
}

.o-agent-shell h2 {
    margin: 0.75rem 0 0.25rem;
}

.o-agent-shell p {
    margin: 0 auto;
    max-width: 34rem;
    color: var(--o-ink-soft);
}

.o-agent-shell-note {
    margin-top: 1.5rem;
    color: var(--o-ink-muted);
    font-size: 0.75rem;
}

/* --- Page frame --- */

.page-wrapper {
    background: var(--o-canvas);
}

.page-wrapper > .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.page-wrapper .page-header {
    position: sticky;
    top: 46px;
    z-index: 20;
    min-height: 44px;
    margin: 0;
    padding: 0.4rem 0.75rem;
    background: var(--o-surface);
    border-bottom: 1px solid var(--o-line);
}

.page-header > * {
    flex: 1 1 auto;
}

.page-header h1 {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
}

.page-header .breadcrumb {
    margin: 0;
    font-size: 0.75rem;
}

.page-wrapper .page-body {
    margin: 0;
}

.page-body .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.page-body .row {
    --tblr-gutter-x: 0;
    margin-left: 0;
    margin-right: 0;
}

/* without this the columns grow with the table instead of scrolling it */
.page-body .row > * {
    min-width: 0;
}

/* --- Control panel --- */

.o-control-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.o-cp-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.o-cp-title {
    font-size: 1.0625rem;
    font-weight: 600;
}

.o-cp-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

/* --- Pager --- */

.o-pager {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    color: var(--o-ink-muted);
}

.o-pager-value {
    cursor: text;
    border-bottom: 1px solid transparent;
}

.o-pager-value:hover {
    border-bottom-color: var(--o-line);
}

/* sized on the range it shows, so the bar does not jump while it is edited */
.o-pager-input {
    width: 5.5em;
    padding: 0;
    color: var(--o-ink);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--o-accent);
    outline: 0;
}

.o-pager button {
    padding: 0.125rem 0.375rem;
}

/* --- Search view --- */

.o-searchview-group {
    display: flex;
    flex: 1 1 320px;
    max-width: 720px;
}

/* the toggler is wrapped in a .dropdown, which has to stretch with it */
.o-searchview-group .dropdown {
    display: flex;
}

.o-searchview {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.2rem 0.5rem;
    background: var(--o-surface);
    border: 1px solid var(--o-line);
    border-right: 0;
    border-radius: 3px 0 0 3px;
}

.o-searchview:focus-within {
    border-color: var(--o-accent);
}

.o-searchview-icon {
    color: var(--o-ink-muted);
}

.o-searchview-input-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    flex: 1 1 auto;
    min-width: 0;
}

.o-searchview-input {
    flex: 1 1 6rem;
    min-width: 0;
    padding: 0.15rem 0;
    border: 0;
    background: transparent;
    color: var(--o-ink);
    outline: none;
}

.o-searchview-toggler {
    display: flex;
    align-items: center;
    padding: 0 0.55rem;
    background: var(--o-surface);
    border: 1px solid var(--o-line);
    border-radius: 0 3px 3px 0;
    color: var(--o-ink-soft);
}

.o-searchview-toggler::after {
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-left: 0.3em solid transparent;
}

.o-searchview-toggler:hover {
    background: var(--o-hover);
}

/* --- Facets --- */

.o-facets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.o-facet {
    display: inline-flex;
    align-items: stretch;
    max-width: 22rem;
    background: var(--o-accent-soft);
    border: 1px solid var(--o-chip-border);
    border-radius: 3px;
    font-size: 0.75rem;
    line-height: 1.5;
    overflow: hidden;
}

.o-facet-label {
    display: flex;
    align-items: center;
    padding: 0 0.35rem;
    background: var(--o-accent);
    color: #ffffff;
}

.o-facet-value {
    padding: 0 0.35rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.o-facet-remove {
    padding: 0 0.35rem;
    border: 0;
    background: transparent;
    color: var(--o-ink-muted);
    line-height: 1;
}

.o-facet-remove:hover {
    background: var(--o-chip-hover);
    color: var(--o-ink);
}

/* --- Search panel (filters / sort / favorites) --- */

/* .dropdown-menu keeps the panel hidden; Bootstrap adds .show when it opens */
.o-search-panel.show {
    display: flex;
}

.o-search-panel {
    gap: 0;
    min-width: 720px;
    max-width: 92vw;
    padding: 0;
    overflow-x: auto;
}

.o-search-panel-col {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.5rem 0;
    border-right: 1px solid var(--o-line-soft);
}

.o-search-panel-col:last-child {
    border-right: 0;
}

.o-search-panel-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0.75rem 0.4rem;
    color: var(--o-ink-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
}

.o-search-panel-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.3rem 0.75rem;
    border: 0;
    background: transparent;
    color: var(--o-ink);
    text-align: left;
}

.o-search-panel-item:hover {
    background: var(--o-hover);
}

.o-search-panel-item.active {
    color: var(--o-accent);
    font-weight: 600;
}

.o-search-panel-item.active i {
    color: var(--o-accent);
}

.o-search-panel-item i {
    width: 0.9rem;
    color: var(--o-ink-muted);
}

.o-search-panel-form {
    padding: 0.5rem 0.75rem 0.25rem;
}

.o-search-panel-empty {
    padding: 0.3rem 0.75rem;
    color: var(--o-ink-muted);
}

/* the search builder is a DataTables button moved into the Filters column */
#o-cp-filters .dt-buttons {
    display: block;
}

#o-cp-filters .btn {
    justify-content: flex-start;
    --tblr-btn-bg: transparent;
    --tblr-btn-border-color: transparent;
    --tblr-btn-hover-bg: var(--o-hover);
    --tblr-btn-hover-border-color: transparent;
    --tblr-btn-active-bg: var(--o-hover);
    --tblr-btn-active-border-color: transparent;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    margin: 0;
    border-radius: 0;
    text-align: left;
}

/* --- Filter dialog: the search builder restyled as a custom filter ---

   The library draws a rotated And/Or tab hanging off the group on inline
   offsets it recomputes per draw, which is what made the control jump around.
   The dialog flattens everything into document flow instead: a modal header,
   a "Match all/any of the following rules:" line, one flat row per rule and a
   Search/Discard footer (rows and labels are decorated by list_view.js). */

.dt-button-collection.o-filter-dialog {
    position: fixed;
    top: 12vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(64rem, 92vw);
    max-width: none;
    padding: 0;
    border: 1px solid var(--o-line);
    border-radius: 6px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
    overflow: hidden;
}

/* the library states its own width/padding with !important on
   `div.dt-button-collection div.dtsb-searchBuilder`, so the override has to
   outrank that selector, not just repeat it */
div.dt-button-collection.o-filter-dialog div.dtsb-searchBuilder {
    width: auto !important;
    margin: 0;
    padding: 0 !important;
}

/* header */

.o-filter-dialog .dtsb-titleRow {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid var(--o-line-soft);
}

.o-filter-dialog .dtsb-title {
    margin-right: auto;
    padding: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: left;
}

/* no separate reset control: rules are deleted per row and
   Discard puts the opening state back */
.o-filter-dialog .dtsb-clearAll {
    display: none;
}

.o-filter-dialog div.dtb-popover-close {
    top: 0.8rem;
    right: 1.1rem;
    width: 1.5rem;
    height: 1.5rem;
    border: 0;
    background: none;
    color: var(--o-ink-muted);
    font-size: 1rem;
    line-height: 1.5rem;
}

.o-filter-dialog div.dtb-popover-close:hover {
    color: var(--o-ink);
}

/* body */

.o-filter-dialog div.dtsb-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0 !important;
}

.o-filter-dialog div.dtsb-searchBuilder > .dtsb-group {
    width: 100%;
    padding: 1rem 1.25rem;
}

/* the And/Or control, flattened out of its rotated side tab; on the top
   level it reads as "Match all/any of the following rules:" */
.o-filter-dialog div.dtsb-logicContainer {
    position: static !important;
    transform: none !important;
    width: auto !important;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    border: 0;
}

.o-filter-dialog div.dtsb-searchBuilder > .dtsb-group > .dtsb-logicContainer::before {
    content: "Match";
}

.o-filter-dialog div.dtsb-searchBuilder > .dtsb-group > .dtsb-logicContainer::after {
    content: "of the following rules:";
}

/* deleting the whole top-level group is what Discard/facet-× are for */
.o-filter-dialog div.dtsb-searchBuilder > .dtsb-group > .dtsb-logicContainer .dtsb-clearGroup {
    display: none;
}

.o-filter-dialog button.dtsb-logic {
    --tblr-btn-bg: transparent;
    --tblr-btn-color: var(--o-ink);
    --tblr-btn-border-color: transparent;
    --tblr-btn-hover-bg: var(--o-hover);
    --tblr-btn-hover-color: var(--o-ink);
    --tblr-btn-hover-border-color: transparent;
    --tblr-btn-active-bg: var(--o-hover);
    --tblr-btn-active-color: var(--o-ink);
    --tblr-btn-active-border-color: transparent;
    padding: 0 0.25rem;
    font-weight: 600;
}

.o-filter-dialog .dtsb-logic > div::after {
    content: " ▾";
    font-size: 0.7em;
}

/* one flat row per rule */

.o-filter-dialog div.dtsb-criteria {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.o-filter-dialog select.dtsb-data {
    flex: 0 0 32%;
}

.o-filter-dialog select.dtsb-condition {
    flex: 0 0 18%;
}

.o-filter-dialog div.dtsb-inputCont {
    display: flex;
    flex: 1 1 auto;
    gap: 0.5rem;
    min-width: 0;
}

.o-filter-dialog .dtsb-inputCont .dtsb-value {
    flex: 1 1 auto;
    min-width: 0;
}

/* a nested branch is framed by its indent line */
.o-filter-dialog div.dtsb-group div.dtsb-group {
    align-self: stretch;
    padding: 0.25rem 0 0.25rem 0.75rem;
    border-left: 2px solid var(--o-line);
}

/* the library's indent control only shows up on rows with a previous
   sibling; the decorator's sitemap button replaces it on every row */
.o-filter-dialog .dtsb-buttonContainer .dtsb-right {
    display: none;
}

/* fields: bottom border only */
.o-filter-dialog .dtsb-data,
.o-filter-dialog .dtsb-condition,
.o-filter-dialog .dtsb-value {
    border: 0;
    border-bottom: 1px solid var(--o-line);
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    font-size: 0.8125rem;
}

.o-filter-dialog .dtsb-data:focus,
.o-filter-dialog .dtsb-condition:focus,
.o-filter-dialog .dtsb-value:focus {
    border-bottom-color: var(--o-accent);
    box-shadow: none;
}

/* the indent and delete controls as quiet icon buttons */
.o-filter-dialog div.dtsb-buttonContainer {
    display: flex;
    gap: 0.25rem;
    margin-left: auto;
}

.o-filter-dialog .dtsb-buttonContainer .dtsb-button {
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: 0 !important;
    background: transparent !important;
    color: var(--o-ink-muted) !important;
    box-shadow: none;
}

.o-filter-dialog .dtsb-buttonContainer svg {
    width: 1rem;
    height: 1rem;
}

.o-filter-dialog .dtsb-buttonContainer .fa-solid {
    font-size: 0.9375rem;
}

.o-filter-dialog .dtsb-buttonContainer .dtsb-button:hover {
    color: var(--o-ink) !important;
}

/* the delete control is red, not only on hover */
.o-filter-dialog .dtsb-buttonContainer .dtsb-delete {
    color: var(--o-danger) !important;
}

.o-filter-dialog .dtsb-buttonContainer .dtsb-delete:hover {
    color: var(--o-danger-strong) !important;
}

/* "New Rule", styled as a link */
.o-filter-dialog button.dtsb-add {
    padding: 0;
    border: 0;
    background: none;
    color: var(--o-accent);
    font-weight: 500;
    text-decoration: none;
}

.o-filter-dialog button.dtsb-add:hover {
    text-decoration: underline;
}

/* footer, appended by list_view.js */
.o-filter-dialog .o-filter-footer {
    display: flex;
    gap: 0.5rem;
    padding: 0.9rem 1.25rem;
    border-top: 1px solid var(--o-line-soft);
}

/* Everything behind the dialog is out of reach while it is open. The library's
   own rule carries the same specificity and is loaded later, so this one needs
   the extra element to win. */
body div.dt-button-background {
    z-index: 2001;
    background: rgba(0, 0, 0, 0.32);
}

/* --- List --- */

.o-list-view {
    position: relative;
    /* .row-deck makes the column a flex box: without this the list grows with
       the table instead of scrolling it */
    width: 100%;
    min-width: 0;
    background: var(--o-surface);
    border-bottom: 1px solid var(--o-line);
}

.table {
    --tblr-table-cell-padding-y: 0.35rem;
    --tblr-table-cell-padding-x: 0.6rem;
    --tblr-table-border-color: var(--o-line-soft);
    margin-bottom: 0;
}

.table > thead > tr > th {
    background: var(--o-header-bg);
    border-bottom: 1px solid var(--o-line);
    color: var(--o-ink-soft);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}

.table > tbody > tr > td {
    border-bottom: 1px solid var(--o-line-soft);
}

/* the proportional widths list_view.js sets (fitColumnWidths) need the cells
   to truncate instead of forcing their column open */
#dt th,
#dt td {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* the whole row opens the record (list_view.js) */
#dt tbody tr:not(.group-header) {
    cursor: pointer;
}

table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    cursor: pointer;
}

/* the favorite star of a row (render_favorite.js), set for one admin only */
.o-star {
    padding: 0 0.2rem;
    background: none;
    border: 0;
    color: #d8d2cd;
    line-height: 1;
}

.o-star:hover {
    color: var(--o-gold);
}

.o-star.o-star-on {
    color: var(--o-gold);
}

/* the cell that opens the record (list_view.js) */
.o-record-link {
    color: var(--o-ink);
    font-weight: 500;
    text-decoration: none;
}

.o-record-link:hover {
    color: var(--o-accent);
    text-decoration: underline;
}

/* group headers injected by the Group By menu */
tr.group-header td {
    background: var(--o-header-bg);
    border-bottom: 1px solid var(--o-line);
    box-shadow: inset 3px 0 0 var(--o-accent);
    font-weight: 600;
    cursor: pointer;
}

tr.group-header .group-count {
    margin-left: 0.5rem;
    padding: 0 0.5rem;
    background: var(--o-accent);
    border-radius: 10px;
    color: #ffffff;
    font-size: 0.6875rem;
}

/* --- Optional columns (the gear at the end of the header row) --- */

.o-optional-columns {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}

.o-optional-columns-toggle {
    width: 32px;
    height: 33px;
    padding: 0;
    background: var(--o-header-bg);
    border: 0;
    border-left: 1px solid var(--o-line);
    border-bottom: 1px solid var(--o-line);
    color: var(--o-ink-soft);
}

.o-optional-columns-toggle:hover {
    background: var(--o-hover);
    color: var(--o-ink);
}

.o-optional-columns-menu {
    max-height: 60vh;
    padding: 0.35rem 0;
    overflow-y: auto;
}

.o-optional-column {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.25rem 0.75rem;
    white-space: nowrap;
}

.o-optional-column:hover {
    background: var(--o-hover);
}

.o-optional-column .form-check-input {
    margin: 0;
}

/* --- Cards (detail, create, edit) --- */

.page-body .card {
    border: 0;
    border-bottom: 1px solid var(--o-line);
    border-radius: 0;
    box-shadow: none;
}

.card-header {
    min-height: 44px;
    padding: 0.4rem 0.75rem;
    background: var(--o-surface);
    border-bottom: 1px solid var(--o-line-soft);
}

.card-title {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
}

.card-body {
    padding: 1rem 1.25rem;
}

.card-footer {
    background: var(--o-surface);
    border-top: 1px solid var(--o-line-soft);
}

/* form fields stay readable on wide screens */
.card-body > .mb-3 {
    max-width: 760px;
}

/* --- Record view: the form with its chatter --- */

/* the sheet lies on the canvas, the history is the white column beside it */
.o-record-view {
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - 90px);
    background: var(--o-canvas);
}

.o-record-form {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 1rem;
}

/* the library heads its read-only detail card with "#<id>", and ids are not
   displayed anywhere in the panel; the header's other half — row actions —
   is empty here (the views declare none), so the whole strip goes */
.o-record-form .card-header {
    display: none;
}

/* --- Record form: the button box --- */

/* the row of stat buttons above the sheet, centred over it */
.o-buttonbox {
    max-width: 960px;
    margin: 1rem auto 0.75rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* the container js/record_header.js fills — layout-transparent, so its
   buttons line up in the box's own row and share its gap */
#o-stat-buttons {
    display: contents;
}

.o-stat-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    background: var(--o-surface);
    border: 1px solid var(--o-line);
    border-radius: 6px;
    color: var(--o-ink-soft);
    font-size: 0.8125rem;
    text-decoration: none;
    cursor: pointer;
}

.o-stat-button:hover {
    background: var(--o-hover);
    color: var(--o-ink);
    text-decoration: none;
}

.o-stat-button:disabled {
    opacity: 0.6;
    cursor: default;
}

.o-stat-icon {
    color: var(--o-primary, var(--o-accent));
}

.o-stat-value {
    font-weight: 600;
}

/* --- Record form: the sheet --- */

.o-form-sheet {
    max-width: 960px;
    margin: 1rem auto 2rem;
    padding: 1.25rem 1.75rem 1.75rem;
    background: var(--o-surface);
    border: 1px solid var(--o-line);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* the name of the record heads the form */
.o-form-title {
    margin: 0 0 1rem;
}

.o-form-title .form-control {
    padding: 0 0 0.15rem;
    border-bottom-color: transparent;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
}

/* the fields of a page: label beside value, two pairs to a row */
.o-group {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr);
    align-items: center;
    column-gap: 1.5rem;
    row-gap: 0.35rem;
}

.o-cell-label {
    max-width: 12rem;
    padding-right: 0.25rem;
}

.o-cell-label .form-label {
    margin: 0;
}

.o-cell-value {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.o-cell-value > .o-field {
    flex: 1 1 auto;
    min-width: 0;
}

/* a block of its own — text, JSON, a list of values — spans the whole sheet */
.o-cell-wide {
    grid-column: 1 / -1;
    margin: 0.6rem 0;
}

.o-cell-wide .form-label {
    margin-bottom: 0.15rem;
}

/* the two halves of "Execute every [2] [days]" size themselves, not the cell */
.o-cell-value > .o-field-agent_interval_number {
    flex: 0 0 4.5rem;
}

.o-cell-value > .o-field-agent_interval_type {
    flex: 0 0 9rem;
}

/* one pair to a row once the sheet has no room for two */
@media (max-width: 1250px) {
    .o-group {
        grid-template-columns: max-content minmax(0, 1fr);
    }
}

/* inputs: no boxes — a line under the value, barely there while the
   field rests so that an empty one still reads as a field, and darkening as it
   is hovered and edited */
.o-form-sheet .form-control,
.o-form-sheet .form-select,
.o-form-sheet .select2-container--default .select2-selection--single,
.o-form-sheet .select2-container--default .select2-selection--multiple {
    min-height: 28px;
    height: auto;
    padding: 0.15rem 0.25rem;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--o-line-soft);
    border-radius: 0;
    box-shadow: none;
}

.o-form-sheet .form-control:hover,
.o-form-sheet .form-select:hover,
.o-form-sheet .select2-container--default .select2-selection--single:hover,
.o-form-sheet .select2-container--default .select2-selection--multiple:hover {
    border-bottom-color: var(--o-line);
}

.o-form-sheet .form-control:focus,
.o-form-sheet .form-select:focus,
.o-form-sheet .select2-container--default.select2-container--focus
    .select2-selection--single,
.o-form-sheet .select2-container--default.select2-container--open
    .select2-selection--single,
.o-form-sheet .select2-container--default.select2-container--focus
    .select2-selection--multiple {
    border-bottom-color: var(--o-accent);
    box-shadow: none;
}

.o-form-sheet textarea.form-control {
    min-height: 3rem;
}

/* a picker is as wide as the value it holds —
   not a line stretched to the far side of the cell. More specific than the
   width the notebook forces on a picker built while its page was hidden. */
.o-form-sheet .o-notebook .select2-container {
    width: auto !important;
    min-width: 9rem;
    max-width: 100%;
}

/* except in a block of its own, where the tags fill the width they are given */
.o-form-sheet .o-cell-wide .select2-container {
    width: 100% !important;
}

/* the value, not the widget, is what the field shows: select2 carries its own
   padding and a full-height arrow */
.o-form-sheet .select2-container--default .select2-selection--single
    .select2-selection__rendered {
    padding-left: 0.25rem;
    padding-right: 2.5rem;
    line-height: 1.6;
}

.o-form-sheet .select2-container--default .select2-selection--single
    .select2-selection__arrow {
    height: 26px;
}

/* the panel writes its numbers itself — the spinners only take up room */
.o-form-sheet input[type="number"] {
    -moz-appearance: textfield;
}

.o-form-sheet input[type="number"]::-webkit-outer-spin-button,
.o-form-sheet input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.o-form-sheet .form-check {
    margin: 0;
}

/* a JSON column is edited as code (views.py), so the widget shows the editor
   and none of its own chrome */
.o-form-sheet .jsoneditor-menu,
.o-form-sheet .jsoneditor-statusbar {
    display: none;
}

.o-form-sheet .jsoneditor-outer.has-main-menu-bar {
    margin-top: 0;
    padding-top: 0;
}

.o-form-sheet .jsoneditor {
    border: 1px solid var(--o-line);
    border-radius: 3px;
}

.o-form-sheet .ace_editor,
.o-form-sheet .ace-jsoneditor {
    font-size: 12px;
}

.o-form-sheet .ace-jsoneditor .ace_gutter {
    background: var(--o-header-bg);
    color: var(--o-ink-muted);
}

.o-form-sheet .ace-jsoneditor .ace_marker-layer .ace_active-line,
.o-form-sheet .ace-jsoneditor .ace_gutter-active-line {
    background: var(--o-hover);
}

.o-cp-crumb {
    color: var(--o-ink-muted);
    font-size: 1.0625rem;
    text-decoration: none;
}

.o-cp-crumb:hover {
    color: var(--o-ink);
}

.o-cp-crumb-sep {
    color: var(--o-ink-muted);
}

/* save and discard, the only two things a form can do — and only while there
   is something to save (js/record_actions.js) */
.o-record-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--o-surface);
    border: 1px solid var(--o-btn-border);
    border-radius: 3px;
    color: var(--o-ink);
    text-decoration: none;
}

.o-record-action:hover {
    background: var(--o-hover);
    color: var(--o-ink);
}

.o-record-action-save {
    background: var(--o-accent);
    border-color: var(--o-accent);
    color: #ffffff;
}

.o-record-action-save:hover {
    background: var(--o-accent-strong);
    border-color: var(--o-accent-strong);
    color: #ffffff;
}

/* --- Domain editor: the rules of a saved search --- */

.o-domain {
    max-width: 900px;
    padding: 0.5rem 0.75rem;
    background: var(--o-canvas);
    border: 1px solid var(--o-line);
    border-radius: 3px;
}

.o-domain-node .o-domain-node {
    margin: 0.35rem 0;
    padding: 0.4rem 0.6rem;
    background: var(--o-surface);
    border-left: 2px solid var(--o-line);
}

.o-domain-connector {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--o-ink-soft);
}

.o-domain-rules {
    margin: 0.35rem 0;
}

.o-domain-rule {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0;
}

.o-domain-input {
    height: 30px;
    padding: 0.2rem 0.4rem;
    background: var(--o-surface);
    border: 1px solid var(--o-line);
    border-radius: 3px;
    color: var(--o-ink);
}

.o-domain-field {
    flex: 0 1 15rem;
}

.o-domain-condition {
    flex: 0 1 11rem;
}

.o-domain-value {
    flex: 1 1 10rem;
    min-width: 0;
}

.o-domain-logic {
    height: 26px;
    padding: 0 0.25rem;
    font-weight: 600;
}

.o-domain-controls {
    display: flex;
    margin-left: auto;
}

.o-domain-button {
    padding: 0 0.35rem;
    background: none;
    border: 0;
    color: var(--o-ink-muted);
}

.o-domain-button:hover {
    color: var(--o-ink);
}

.o-domain-remove:hover {
    color: var(--o-danger);
}

.o-domain-add {
    padding: 0;
    background: none;
    border: 0;
    color: var(--o-accent);
}

.o-domain-empty {
    padding: 0.2rem 0;
    color: var(--o-ink-muted);
}

/* --- Notebook: the pages of a form --- */

.o-notebook-headers {
    display: flex;
    flex-wrap: wrap;
    padding: 0 1.25rem;
    border-bottom: 1px solid var(--o-line);
}

.o-notebook-tab {
    padding: 0.5rem 0.75rem;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--o-ink-muted);
    font-weight: 500;
}

.o-notebook-tab:hover {
    color: var(--o-ink);
}

.o-notebook-tab.active {
    border-bottom-color: var(--o-accent);
    color: var(--o-accent);
}

.o-notebook-page {
    display: none;
    padding: 1rem 1.25rem;
}

.o-notebook-page.active {
    display: block;
}

/* on a record form the notebook is the sheet itself, which carries the padding */
.o-form-sheet .o-notebook-headers {
    padding: 0;
}

.o-form-sheet .o-notebook-page {
    padding: 1.25rem 0 0;
}

/* select2 sizes itself when it is initialised, and a field on a page that is
   not open then has no width to measure */
.o-notebook .select2-container {
    width: 100% !important;
}

/* the history grows with every change, so it is a column of its own height:
   pinned under the control panel (navbar 46px + panel 44px), never taller than
   the screen, with the thread scrolling inside instead of the whole page */
.o-chatter {
    flex: 0 0 380px;
    align-self: flex-start;
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 90px);
    padding: 0.75rem 1rem 1rem;
    background: var(--o-surface);
    border-left: 1px solid var(--o-line);
    overflow: hidden;
}

.o-chatter-thread {
    flex: 1 1 auto;
    overflow-y: auto;
}

/* the public-usage counters under the form sheet: tiles aligned with the
   sheet, the Activity button opening the chart dialog at the end */
.o-stats-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    max-width: 960px;
    margin: -1rem auto 2rem;
}

/* the same strip beside the search box of the opportunity list: part of the
   control panel's own flex flow, not the record page's sheet column */
.o-control-panel .o-stats-strip {
    max-width: none;
    margin: 0;
}

.o-stats-tile {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    background: var(--o-surface);
    border: 1px solid var(--o-line);
    border-radius: 6px;
    color: var(--o-ink-soft);
    font-size: 0.8125rem;
}

/* a tile that is a link (the user card's favorites and subscriptions open
   their lists filtered to the account) reads like the stat buttons do */
a.o-stats-tile {
    text-decoration: none;
}

a.o-stats-tile:hover {
    background: var(--o-hover);
    color: var(--o-ink);
    text-decoration: none;
}

/* the statistics page the strip's chart buttons switch to: a sheet-styled
   card in place of the record view */
.o-stats-page {
    max-width: 1100px;
    margin: 1rem auto 2rem;
    padding: 1.25rem 1.75rem 1.75rem;
    background: var(--o-surface);
    border: 1px solid var(--o-line);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.o-stats-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.o-stats-tabs {
    display: flex;
    gap: 0.25rem;
}

.o-stats-tab {
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    padding: 0.4rem 0.75rem;
    color: var(--o-ink-muted);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
}

.o-stats-tab:hover {
    color: var(--o-ink);
}

.o-stats-tab.active {
    color: var(--o-accent);
    border-bottom-color: var(--o-accent);
}

.o-stats-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.o-stats-range {
    padding: 0.3rem 0.5rem;
    background: var(--o-surface);
    border: 1px solid var(--o-line);
    border-radius: 4px;
    color: var(--o-ink);
    font-size: 0.8125rem;
}

.o-stats-custom {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--o-ink-muted);
}

.o-stats-canvas {
    position: relative;
    height: 440px;
}

.o-chatter-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--o-line);
    color: var(--o-ink-soft);
    font-weight: 600;
}

.o-chatter-day {
    margin: 1rem 0 0.5rem;
    color: var(--o-ink-muted);
    font-size: 0.75rem;
    text-align: center;
}

.o-chatter-entry {
    display: flex;
    gap: 0.6rem;
    padding: 0.6rem 0;
    border-top: 1px solid var(--o-line-soft);
}

.o-chatter-avatar {
    flex: 0 0 28px;
    height: 28px;
    background: var(--o-accent);
    border-radius: 50%;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 28px;
    text-align: center;
}

.o-chatter-body {
    min-width: 0;
}

.o-chatter-meta {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.o-chatter-author {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.o-chatter-time {
    color: var(--o-ink-muted);
    font-size: 0.75rem;
    white-space: nowrap;
}

.o-chatter-action {
    color: var(--o-ink-soft);
}

.o-chatter-changes {
    margin: 0.25rem 0 0;
    padding: 0;
    list-style: none;
}

.o-chatter-changes li {
    margin-top: 0.2rem;
    font-size: 0.75rem;
    overflow-wrap: anywhere;
}

.o-chatter-field {
    margin-right: 0.35rem;
    color: var(--o-ink-muted);
}

.o-chatter-old {
    color: var(--o-ink-muted);
    text-decoration: line-through;
}

.o-chatter-arrow {
    margin: 0 0.25rem;
    color: var(--o-ink-muted);
}

.o-chatter-new {
    color: var(--o-ink);
    font-weight: 500;
}

.o-chatter-empty {
    padding-top: 0.75rem;
    color: var(--o-ink-muted);
}

/* the chatter is a column only while there is room for one */
@media (max-width: 1100px) {
    .o-record-view {
        flex-direction: column;
        min-height: 0;
    }

    .o-chatter {
        flex: 1 1 auto;
        position: static;
        height: auto;
        max-height: 70vh;
        border-left: 0;
        border-top: 1px solid var(--o-line);
    }
}

/* --- Settings screen --- */

.o-settings {
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - 90px);
    background: var(--o-surface);
}

.o-settings-sidebar {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
    border-right: 1px solid var(--o-line);
    background: var(--o-header-bg);
}

.o-settings-tab {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 1rem;
    background: none;
    border: 0;
    border-left: 3px solid transparent;
    color: var(--o-ink-soft);
    text-align: left;
}

.o-settings-tab i {
    width: 1rem;
    color: var(--o-ink-muted);
    text-align: center;
}

.o-settings-tab:hover {
    background: var(--o-hover);
    color: var(--o-ink);
}

.o-settings-tab.active {
    border-left-color: var(--o-accent);
    background: var(--o-surface);
    color: var(--o-accent);
    font-weight: 600;
}

.o-settings-tab.active i {
    color: var(--o-accent);
}

.o-settings-pages {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1rem 1.25rem;
}

.o-settings-page {
    display: none;
}

.o-settings-page.active {
    display: block;
}

/* a section with more than one tab holds a notebook, the same one a record
   form uses — it spans the pane instead of sitting inside its padding */
.o-settings-page .o-notebook-headers {
    margin: -1rem -1.25rem 0;
}

.o-settings-page .o-notebook-page {
    padding: 1rem 0 0;
}

/* the group title is a band across the pane, as on a record form */
.o-settings-group-title {
    margin: 0 -1.25rem 1rem;
    padding: 0.5rem 1.25rem;
    background: var(--o-header-bg);
    border-top: 1px solid var(--o-line);
    border-bottom: 1px solid var(--o-line);
    font-size: 0.875rem;
    font-weight: 600;
}

.o-settings-page > .o-settings-group-title:first-child,
.o-notebook-page > .o-settings-group-title:first-child {
    margin-top: -1rem;
    border-top: 0;
}

/* two columns of settings while the pane is wide enough for them */
.o-settings-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem 2.5rem;
    margin-bottom: 1.75rem;
    max-width: 1100px;
}

.o-setting-label {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--o-ink-soft);
    font-weight: 600;
}

.o-setting-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.o-setting-check .o-setting-label {
    margin-bottom: 0;
}

.o-setting-help {
    margin-top: 0.25rem;
    color: var(--o-ink-muted);
}

/* an interval setting: "run every [2] [Days]" on one line */
.o-setting-interval {
    display: flex;
    gap: 0.5rem;
}

.o-setting-interval input {
    width: 6rem;
    flex: none;
}

/* a multi-value setting: the picker fills the cell and grows with its tags,
   instead of the fixed width select2 measures from a hidden notebook page */
.o-setting .select2-container {
    width: 100% !important;
}

.o-setting .select2-container--default .select2-selection--multiple {
    min-height: 36px;
    border-color: var(--o-line);
    border-radius: 4px;
}

/* a tab that opens a list instead of holding settings */
.o-settings-link {
    max-width: 640px;
    margin-bottom: 1rem;
}

.o-settings-empty {
    color: var(--o-ink-muted);
}

/* the sidebar is a column only while there is room for one */
@media (max-width: 800px) {
    .o-settings {
        flex-direction: column;
        min-height: 0;
    }

    .o-settings-sidebar {
        flex: 1 1 auto;
        flex-direction: row;
        flex-wrap: wrap;
        border-right: 0;
        border-bottom: 1px solid var(--o-line);
    }

    .o-settings-tab {
        border-left: 0;
        border-bottom: 3px solid transparent;
    }

    .o-settings-tab.active {
        border-left: 0;
        border-bottom-color: var(--o-accent);
    }
}

/* --- Profile dialog (templates/_profile.html) --- */

/* the notebook carries its own indents, so the modal body drops its padding */
.o-profile-body {
    padding: 0;
}

.o-profile-footer {
    justify-content: space-between;
}

.o-profile-group {
    max-width: 30rem;
    margin-bottom: 1.75rem;
}

.o-profile-group:last-child {
    margin-bottom: 0;
}

.o-profile-title {
    margin: 0 0 0.25rem;
    font-size: 0.9375rem;
}

.o-profile-help {
    margin: 0 0 0.75rem;
    color: var(--o-ink-muted);
}

.o-profile form > * + * {
    margin-top: 0.5rem;
}

.o-profile-error {
    color: var(--o-danger);
    font-size: 0.8125rem;
}

.o-profile-2fa-columns {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin: 1rem 0 0.75rem;
}

#o-profile-2fa-qr {
    flex: none;
    padding: 0.4rem;
    background: #ffffff;
    border: 1px solid var(--o-line);
    border-radius: 3px;
}

#o-profile-2fa-qr svg {
    display: block;
    width: 140px;
    height: 140px;
}

#o-profile-2fa-secret {
    overflow-wrap: anywhere;
}

.o-profile-logins {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.o-profile-logins th {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--o-line);
    color: var(--o-ink-soft);
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.o-profile-logins td {
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--o-line-soft);
    vertical-align: top;
}

.o-profile-agent {
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Buttons --- */
/* Tabler compiles button colours into each variant, so the neutral look is
   set on .btn and the emphasised one is put back on the variants below. */

.btn {
    --tblr-btn-border-radius: 3px;
    --tblr-btn-font-size: 0.875rem;
    --tblr-btn-padding-y: 0.3rem;
    --tblr-btn-padding-x: 0.75rem;
    --tblr-btn-bg: var(--o-surface);
    --tblr-btn-color: var(--o-ink);
    --tblr-btn-border-color: var(--o-btn-border);
    --tblr-btn-hover-bg: var(--o-hover);
    --tblr-btn-hover-color: var(--o-ink);
    --tblr-btn-hover-border-color: var(--o-btn-border-hover);
    --tblr-btn-active-bg: var(--o-accent-soft);
    --tblr-btn-active-color: var(--o-ink);
    --tblr-btn-active-border-color: var(--o-btn-border-hover);
    box-shadow: none;
    font-weight: 500;
}

.btn-primary,
.btn-success {
    --tblr-btn-bg: var(--o-accent);
    --tblr-btn-color: #ffffff;
    --tblr-btn-border-color: var(--o-accent);
    --tblr-btn-hover-bg: var(--o-accent-strong);
    --tblr-btn-hover-color: #ffffff;
    --tblr-btn-hover-border-color: var(--o-accent-strong);
    --tblr-btn-active-bg: var(--o-accent-strong);
    --tblr-btn-active-color: #ffffff;
    --tblr-btn-active-border-color: var(--o-accent-strong);
    --tblr-btn-disabled-bg: var(--o-accent-disabled);
    --tblr-btn-disabled-color: #ffffff;
    --tblr-btn-disabled-border-color: var(--o-accent-disabled);
}

/* the only other red: confirming an actual delete */
#modal-delete-btn.btn-danger {
    --tblr-btn-bg: var(--o-danger);
    --tblr-btn-color: #ffffff;
    --tblr-btn-border-color: var(--o-danger);
    --tblr-btn-hover-bg: var(--o-danger-strong);
    --tblr-btn-hover-color: #ffffff;
    --tblr-btn-hover-border-color: var(--o-danger-strong);
}

/* --- Forms --- */

.form-control,
.form-select {
    border-color: var(--o-btn-border);
    border-radius: 3px;
    font-size: 0.875rem;
    box-shadow: none;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--o-accent);
    box-shadow: 0 0 0 2px rgba(var(--o-accent-rgb), 0.18);
}

.form-label {
    margin-bottom: 0.25rem;
    color: var(--o-ink-soft);
    font-weight: 600;
}

.form-check-input:checked {
    background-color: var(--o-accent);
    border-color: var(--o-accent);
}

.form-check-input:focus {
    box-shadow: 0 0 0 2px rgba(var(--o-accent-rgb), 0.18);
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-color: var(--o-btn-border);
    border-radius: 3px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--o-accent);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--o-accent-soft);
    border-color: var(--o-chip-border);
    color: var(--o-ink);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--o-accent);
    border-color: var(--o-accent);
}

/* --- Small chrome --- */

.dropdown-menu {
    border-color: var(--o-line);
    border-radius: 3px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
    font-size: 0.875rem;
    padding: 0.25rem 0;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-item:active {
    background: var(--o-hover);
    color: var(--o-ink);
}

/* The export entries of the "With selected" menu are DataTables buttons and
   carry the .btn look — a flex box that centers its content. Laid out as the
   plain menu items around them instead. */
.dropdown-menu .btn.dropdown-item {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    box-shadow: none;
}

.dropdown-menu .btn.dropdown-item i {
    margin-right: 0.5rem;
}

.badge {
    border-radius: 2px;
    font-weight: 500;
}

/* starlette-admin renders relations and URLs as Tabler's blue badges */
.badge.bg-blue,
.badge.bg-blue-lt {
    --tblr-badge-color: var(--o-accent-strong);
    background: var(--o-accent-soft) !important;
    border: 1px solid var(--o-chip-border);
    color: var(--o-accent-strong) !important;
}

.badge.bg-blue a,
.badge.bg-blue-lt a {
    color: var(--o-accent-strong);
}

.page-link {
    border-radius: 3px;
    color: var(--o-ink);
}

.page-item.active .page-link {
    background-color: var(--o-accent);
    border-color: var(--o-accent);
    color: #ffffff;
}

.modal-content {
    border-color: var(--o-line);
    border-radius: 4px;
}

.alert {
    border-radius: 3px;
}

/* --- Login --- */

.container-tight {
    max-width: 25rem;
    margin: 8vh auto;
}

/* the login templates leave the page header empty — no empty bar on top of it */
.page-wrapper:has(.container-tight) .page-header {
    display: none;
}

.container-tight .card {
    border: 1px solid var(--o-line);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* --- Error dialog: the blocking modal of js/error_dialog.js --- */

.o-error-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: rgba(36, 31, 38, 0.45);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 10vh 16px 16px;
}

.o-error-dialog {
    background: var(--o-surface);
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 540px;
    max-height: 75vh;
    display: flex;
    flex-direction: column;
}

.o-error-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--o-line-soft);
    color: var(--o-danger);
    font-size: 16px;
    font-weight: 600;
}

.o-error-close {
    margin-left: auto;
    border: none;
    background: none;
    padding: 2px 6px;
    color: var(--o-ink-muted);
    font-size: 16px;
    cursor: pointer;
}

.o-error-close:hover {
    color: var(--o-ink);
}

.o-error-body {
    padding: 16px 18px;
    overflow-y: auto;
    color: var(--o-ink);
}

.o-error-body p {
    margin: 0 0 6px;
}

.o-error-body p:last-child {
    margin-bottom: 0;
}

.o-error-footer {
    padding: 12px 18px;
    border-top: 1px solid var(--o-line-soft);
    display: flex;
    justify-content: flex-end;
}

.o-error-ok {
    border: none;
    border-radius: 4px;
    background: var(--o-accent);
    color: #ffffff;
    padding: 6px 22px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.o-error-ok:hover {
    background: var(--o-accent-strong);
}