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

   The palette is the public site's (frontend/src/styles/index.css): the
   brand red (#F80F05, its darker #D20C03 where text sits on it) and the
   graphite (#1F1F1F) of the site's header, on the site's warm off-white
   ground, white surfaces with light borders, soft layered shadows; the
   page titles and the brand in Unbounded like the site's headings, the
   text in Inter. The panel reads as the same product as intermet.com.ua. The site's names map onto the panel's older --o-* names below
   (--brand is --o-accent, --text-muted is --o-ink-muted, --border-light is
   --o-line-soft, ...), which every rule in this file is written against;
   the three other accent themes and the dark mode redefine the same tokens
   and nothing else. */

/* --- Fonts ---

   Inter Variable, self-hosted from statics/fonts: the site's face, in the
   same four subsets the site ships, with the unicode ranges of the
   @fontsource-variable/inter package so a browser downloads only the ones a
   page uses. Tabler's base template imports Inter from rsms.me; the
   --tblr-font-sans-serif token below points it at this face instead. */

@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(../fonts/inter-cyrillic-ext-wght-normal.woff2) format("woff2-variations");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(../fonts/inter-cyrillic-wght-normal.woff2) format("woff2-variations");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(../fonts/inter-latin-ext-wght-normal.woff2) format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
        U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
        U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(../fonts/inter-latin-wght-normal.woff2) format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
        U+FEFF, U+FFFD;
}

/* Unbounded Variable: the site's headings face (@fontsource-variable/unbounded,
   the same subsets), for the page titles and the brand only. */

@font-face {
    font-family: "Unbounded Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 200 900;
    src: url(../fonts/unbounded-cyrillic-ext-wght-normal.woff2) format("woff2-variations");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: "Unbounded Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 200 900;
    src: url(../fonts/unbounded-cyrillic-wght-normal.woff2) format("woff2-variations");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Unbounded Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 200 900;
    src: url(../fonts/unbounded-latin-ext-wght-normal.woff2) format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
        U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
        U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Unbounded Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 200 900;
    src: url(../fonts/unbounded-latin-wght-normal.woff2) format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
        U+FEFF, U+FFFD;
}

/* --- Tokens --- */

:root,
[data-bs-theme="light"] {
    color-scheme: light;
    /* text: the site's --text, --text-soft, --text-muted and --text-faint */
    --o-ink: #1f1f1f;
    --o-ink-soft: #3a3d40;
    --o-ink-muted: #54595f;
    --o-ink-faint: #8a8e93;
    /* lines and grounds: the site's --line and --surface-2 */
    --o-line: #dcdcd8;
    --o-line-soft: #e6e6e3;
    --o-surface: #ffffff;
    --o-canvas: #f5f5f4;
    --o-hover: #efefed;
    --o-header-bg: #f5f5f4;
    /* the top bar is the site's graphite header: dark in both modes */
    --o-navbar-bg: #1f1f1f;
    --o-navbar-ink: #ffffff;
    /* a sheet that stays white in dark mode: QR codes are read dark on light */
    --o-paper: #ffffff;
    /* the brand: the site's red. Buttons and active states take the darker
       --red-dark (#D20C03), which white text and small red text on white
       both read on at 4.5:1; the pure #F80F05 is the mark and the glow */
    --o-accent: #d20c03;
    --o-accent-strong: #b00a02;
    --o-accent-dark: #8c0802;
    --o-accent-soft: #fdecea;
    --o-accent-soft-strong: #fad6d2;
    --o-accent-ring: rgba(248, 15, 5, 0.22);
    --o-accent-rgb: 210, 12, 3;
    --o-accent-soft-rgb: 253, 236, 234;
    --o-on-accent: #ffffff;
    --o-brand-red: #f80f05;
    /* the accent thinned out: chip borders, hovers, disabled primaries */
    --o-chip-border: #fad6d2;
    --o-chip-hover: #fad6d2;
    --o-accent-disabled: #e8908c;
    /* neutral control borders */
    --o-btn-border: #dcdcd8;
    --o-btn-border-hover: #c7c7c2;
    /* semantic colour, used only where it carries meaning */
    --o-success-bg: #e4f4e9;
    --o-success-ink: #1e6b34;
    --o-danger: #b3261e;
    --o-danger-strong: #a3302a;
    --o-danger-bg: #fbe9e7;
    --o-danger-soft-bg: #fdf3f2;
    --o-danger-ring: rgba(179, 38, 30, 0.2);
    --o-warn-bg: #fff3d3;
    --o-warn-ink: #7a5a1e;
    --o-gold: #e6a800;
    /* the flat ground the city illustrations are drawn against (the site's
       --illustration-bg); the drawings are transparent and carry no backing */
    --o-illustration-bg: #efefed;
    --o-overlay: rgba(15, 15, 15, 0.5);
    /* the washes at the top of the ground (body): the accent on the left,
       apricot on the right, a hint of sky blue between — the site's */
    --o-wash-1: rgba(248, 15, 5, 0.07);
    --o-wash-2: rgba(31, 31, 31, 0.06);
    --o-wash-3: rgba(84, 89, 95, 0.05);
    /* shape: the site's radii and shadows, plus the 10px of its controls */
    --o-radius-sm: 8px;
    --o-radius-control: 10px;
    --o-radius: 12px;
    --o-radius-lg: 16px;
    --o-shadow-sm: 0 1px 2px rgba(15, 15, 15, 0.05);
    --o-shadow: 0 1px 2px rgba(15, 15, 15, 0.04), 0 8px 24px -12px rgba(15, 15, 15, 0.14);
    --o-shadow-lift: 0 2px 4px rgba(15, 15, 15, 0.05), 0 16px 32px -14px rgba(15, 15, 15, 0.2);
    /* the heights the sticky pieces stack on: the top bar, then the page
       header under it, then the chatter column */
    --o-navbar-h: 56px;
    --o-header-h: 56px;

    --tblr-font-sans-serif: "Inter Variable", Inter, system-ui, -apple-system, "Segoe UI",
        Roboto, sans-serif;
    --tblr-body-bg: var(--o-canvas);
    --tblr-body-color: var(--o-ink);
    --tblr-body-font-size: 0.9375rem;
    --tblr-body-line-height: 1.5;
    --tblr-bg-surface: var(--o-surface);
    --tblr-bg-surface-secondary: var(--o-canvas);
    --tblr-bg-surface-tertiary: var(--o-canvas);
    --tblr-border-color: var(--o-line-soft);
    --tblr-border-color-translucent: var(--o-line-soft);
    --tblr-border-radius: var(--o-radius-control);
    --tblr-border-radius-sm: var(--o-radius-sm);
    --tblr-border-radius-lg: var(--o-radius);
    --tblr-primary: var(--o-accent);
    --tblr-primary-rgb: var(--o-accent-rgb);
    --tblr-secondary: var(--o-ink-muted);
    --tblr-secondary-rgb: 84, 89, 95;
    --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: 31, 31, 31;
    --dt-row-selected-link: 31, 31, 31;
    --o-font-display: "Unbounded Variable", "Inter Variable", system-ui, sans-serif;
}

/* --- Themes (profile dialog, Appearance tab) ---

   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. Intermet is the default, the site's red and graphite. The others are drawn in the same register:
   soft, desaturated accents, the neutrals warmed or cooled a shade. */

:root[data-o-theme="indigo"] {
    --o-ink: #1b1d26;
    --o-ink-soft: #3b3e4c;
    --o-ink-muted: #626878;
    --o-ink-faint: #8f94a3;
    --o-line: #d8dbe3;
    --o-line-soft: #e8eaf0;
    --o-canvas: #f6f7fa;
    --o-hover: #f1f2f7;
    --o-header-bg: #f6f7fa;
    --o-accent: #4a5491;
    --o-accent-strong: #3f4880;
    --o-accent-dark: #2f3762;
    --o-accent-soft: #ecedf6;
    --o-accent-soft-strong: #dcdff0;
    --o-accent-ring: rgba(74, 84, 145, 0.22);
    --o-accent-rgb: 74, 84, 145;
    --o-accent-soft-rgb: 236, 237, 246;
    --o-chip-border: #dcdff0;
    --o-chip-hover: #dcdff0;
    --o-accent-disabled: #a2a7cc;
    --o-btn-border: #d8dbe3;
    --o-btn-border-hover: #c3c7d3;
}

:root[data-o-theme="terracotta"] {
    --o-ink: #241d19;
    --o-ink-soft: #473c35;
    --o-ink-muted: #6f655d;
    --o-ink-faint: #9a8f86;
    --o-line: #e0d8d2;
    --o-line-soft: #ede7e2;
    --o-canvas: #f9f6f3;
    --o-hover: #f5f0ec;
    --o-header-bg: #f9f6f3;
    --o-accent: #a65d3f;
    --o-accent-strong: #8f4e33;
    --o-accent-dark: #6b3a26;
    --o-accent-soft: #f7ece6;
    --o-accent-soft-strong: #efdcd1;
    --o-accent-ring: rgba(166, 93, 63, 0.22);
    --o-accent-rgb: 166, 93, 63;
    --o-accent-soft-rgb: 247, 236, 230;
    --o-chip-border: #efdcd1;
    --o-chip-hover: #efdcd1;
    --o-accent-disabled: #d0a995;
    --o-btn-border: #e0d8d2;
    --o-btn-border-hover: #cdc3bb;
}

:root[data-o-theme="olive"] {
    --o-ink: #1d2017;
    --o-ink-soft: #3e4335;
    --o-ink-muted: #666c5a;
    --o-ink-faint: #929784;
    --o-line: #d8dbcf;
    --o-line-soft: #e7eadf;
    --o-canvas: #f6f8f2;
    --o-hover: #f1f4ea;
    --o-header-bg: #f6f8f2;
    --o-accent: #667a4a;
    --o-accent-strong: #566840;
    --o-accent-dark: #3f4d2d;
    --o-accent-soft: #eff2e8;
    --o-accent-soft-strong: #e0e6d4;
    --o-accent-ring: rgba(102, 122, 74, 0.22);
    --o-accent-rgb: 102, 122, 74;
    --o-accent-soft-rgb: 239, 242, 232;
    --o-chip-border: #e0e6d4;
    --o-chip-hover: #e0e6d4;
    --o-accent-disabled: #aab79a;
    --o-btn-border: #d8dbcf;
    --o-btn-border-hover: #c4c8b9;
}

/* --- Dark mode (profile dialog, Appearance tab) ---

   layout.html stamps data-o-mode (and mirrors it as data-bs-theme, which
   flips Tabler's own components). The block sits after the theme blocks and
   wins over them at equal specificity: the neutrals go dark once for every
   theme — the site's dark tokens — and the accent-derived tints are mixed
   from whichever --o-accent the theme block above set. Only the accents
   themselves need a per-theme lift for contrast on the dark canvas — the
   small blocks below. */

:root[data-o-mode="dark"] {
    color-scheme: dark;
    --o-ink: #ececeb;
    --o-ink-soft: #d2d2d0;
    --o-ink-muted: #a9abad;
    --o-ink-faint: #7d8084;
    --o-line: #38393b;
    --o-line-soft: #2a2b2d;
    --o-surface: #1b1b1c;
    --o-canvas: #0f0f0f;
    --o-hover: #242526;
    --o-header-bg: #1f1f1f;
    --o-navbar-bg: #0f0f0f;
    --o-accent-soft: color-mix(in srgb, var(--o-accent) 22%, var(--o-canvas));
    --o-accent-soft-strong: color-mix(in srgb, var(--o-accent) 32%, var(--o-canvas));
    --o-accent-ring: color-mix(in srgb, var(--o-accent) 28%, transparent);
    --o-chip-border: color-mix(in srgb, var(--o-accent) 40%, var(--o-canvas));
    --o-chip-hover: color-mix(in srgb, var(--o-accent) 30%, var(--o-canvas));
    --o-accent-disabled: color-mix(in srgb, var(--o-accent) 45%, var(--o-ink-faint));
    --o-btn-border: #38393b;
    --o-btn-border-hover: #4a4b4e;
    --o-success-bg: #1e3327;
    --o-success-ink: #86c89a;
    --o-danger: #f0928b;
    --o-danger-strong: #e89f99;
    --o-danger-bg: #3a2523;
    --o-danger-soft-bg: #33211f;
    --o-danger-ring: rgba(240, 146, 139, 0.25);
    --o-warn-bg: #3a301b;
    --o-warn-ink: #dfc27a;
    --o-overlay: rgba(0, 0, 0, 0.6);
    /* the same washes, dimmed onto the dark ground */
    --o-wash-1: rgba(var(--o-accent-rgb), 0.12);
    --o-wash-2: rgba(210, 140, 90, 0.08);
    --o-wash-3: rgba(90, 140, 170, 0.08);
    --o-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --o-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 8px 24px -12px rgba(0, 0, 0, 0.5);
    --o-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.3), 0 16px 32px -14px rgba(0, 0, 0, 0.6);
    /* a flat dark selection: the light pastel triples would glare here */
    --dt-row-selected: 40, 32, 31;
    --dt-row-selected-text: 236, 236, 235;
    --dt-row-selected-link: 236, 236, 235;
}

/* the accents, lifted for contrast on the dark canvas — the default is the
   site's red brightened a step, the others are lifted the same way */
:root[data-o-mode="dark"]:not([data-o-theme="indigo"]):not([data-o-theme="terracotta"]):not([data-o-theme="olive"]) {
    --o-accent: #ff3b30;
    --o-accent-strong: #ff5a51;
    --o-accent-dark: #ffb4ae;
    --o-accent-rgb: 255, 59, 48;
}
:root[data-o-mode="dark"][data-o-theme="indigo"] {
    --o-accent: #8690d0;
    --o-accent-strong: #98a1db;
    --o-accent-dark: #c3c9ef;
    --o-accent-rgb: 134, 144, 208;
}
:root[data-o-mode="dark"][data-o-theme="terracotta"] {
    --o-accent: #cf8a6e;
    --o-accent-strong: #d99b82;
    --o-accent-dark: #f0c7b5;
    --o-accent-rgb: 207, 138, 110;
}
:root[data-o-mode="dark"][data-o-theme="olive"] {
    --o-accent: #9cb073;
    --o-accent-strong: #acbf86;
    --o-accent-dark: #d0dcb6;
    --o-accent-rgb: 156, 176, 115;
}

/* --- Base --- */

body {
    /* the ground with the site's soft colour washes at the top, fading out
       well before the content gets dense */
    background-color: var(--o-canvas);
    background-image:
        radial-gradient(55% 45% at 5% 0%, var(--o-wash-1), transparent 70%),
        radial-gradient(45% 40% at 95% 4%, var(--o-wash-2), transparent 70%),
        radial-gradient(40% 35% at 55% -8%, var(--o-wash-3), transparent 70%);
    background-repeat: no-repeat;
    background-size: 100% 1100px;
    color: var(--o-ink);
    font-size: 0.9375rem;
    line-height: 1.5;
    /* Tabler's base template switches Inter's alternate glyphs on; the site
       shows the face as it comes */
    font-feature-settings: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--o-ink);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

/* the site's focus ring, for the keyboard */
:focus-visible {
    outline: 2px solid var(--o-accent);
    outline-offset: 2px;
}

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

.o-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: var(--o-navbar-h);
    padding: 0 1rem;
    background: var(--o-navbar-bg);
    color: var(--o-navbar-ink);
    border-bottom: 1px solid var(--o-line-soft);
}

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

.o-burger:hover,
.o-burger[aria-expanded="true"] {
    background: var(--o-accent-soft);
    color: var(--o-accent-dark);
}

/* the site's logo: the red square with the ingot mark, the name in
   Unbounded capitals (frontend/src/components/Logo.tsx) */
.o-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0 0.25rem;
    color: var(--o-navbar-ink);
    font-family: var(--o-font-display);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
}

.o-brand::before {
    content: "";
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background-color: var(--o-brand-red, var(--o-accent));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath fill='%23fff' d='M9 9h10l2 4H7z'/%3E%3Cpath fill='%23fff' d='M6 15h16l1.5 4h-19z'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    box-shadow: 0 4px 14px -4px rgba(248, 15, 5, 0.6);
}

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

/* the controls on the graphite bar: light on dark, the red for what is open */
.o-navbar .o-burger,
.o-navbar .o-bell {
    color: rgba(255, 255, 255, 0.72);
}
.o-navbar .o-burger:hover,
.o-navbar .o-burger[aria-expanded="true"],
.o-navbar .o-bell:hover,
.o-navbar .o-bell[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}
.o-navbar .o-bell.o-bell-unread {
    color: #ffffff;
}
.o-navbar {
    border-bottom-color: transparent;
    box-shadow: 0 8px 24px -16px rgba(0, 0, 0, 0.45);
}

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

/* the signed-in admin as a pill on the graphite bar */
.o-navbar-user .o-user-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem 0.25rem 0.3rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--o-navbar-ink);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}

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

.o-navbar-user .avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--o-brand-red, var(--o-accent));
    color: #ffffff;
    font-size: 0.75rem;
}

/* the strip under the top bar of a superadmin who signs in without the
   second step (layout.html): a soft warning bar inside the page margin, the
   link to the setup as a quiet button */
.o-security-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin: 16px 24px 0;
    padding: 0.6rem 1rem;
    background: var(--o-warn-bg);
    color: var(--o-warn-ink);
    border: 1px solid color-mix(in srgb, var(--o-warn-ink) 18%, transparent);
    border-radius: var(--o-radius);
    font-size: 0.875rem;
}

.o-security-banner-link {
    padding: 0.25rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--o-warn-ink) 35%, transparent);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
}

.o-security-banner-link:hover {
    background: color-mix(in srgb, var(--o-warn-ink) 10%, transparent);
}

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

.o-apps-menu {
    width: 280px;
    margin-top: 0.5rem;
    padding: 0.375rem;
    border: 1px solid var(--o-line-soft);
    border-radius: var(--o-radius);
    box-shadow: var(--o-shadow-lift);
}

.o-apps-search {
    margin: 0 0 0.25rem;
    border: 1px solid var(--o-line-soft);
    border-radius: var(--o-radius-sm);
    background: var(--o-canvas);
}

.o-apps-search:focus {
    border-color: var(--o-accent);
    background: var(--o-surface);
    box-shadow: 0 0 0 3px var(--o-accent-ring);
}

.o-apps-list {
    max-height: 60vh;
    margin: 0;
    padding: 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.65rem;
    border-radius: var(--o-radius-sm);
    color: var(--o-ink);
    font-size: 0.875rem;
}

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

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

/* 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.375rem;
    padding-top: 0.375rem;
    border-top: 1px solid var(--o-line-soft);
}

/* the heading is the fold's button (js/apps_menu.js) */
.o-apps-group-label {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.3rem 0.65rem 0.15rem;
    border: 0;
    border-radius: var(--o-radius-sm, 6px);
    background: none;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
    color: var(--o-ink-faint);
    cursor: pointer;
}

.o-apps-group-label:hover {
    color: var(--o-ink);
}

.o-apps-group-chevron {
    margin-left: auto;
    font-size: 0.625rem;
    transition: transform 0.15s ease;
}

.o-apps-group-open .o-apps-group-chevron {
    transform: rotate(180deg);
}

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

.o-apps-group-open .o-apps-group-list,
.o-apps-searching .o-apps-group-list {
    display: block;
}

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

/* a card per app, the icon in a tinted brand circle, lifting on hover */
.o-apps-grid {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 16px;
    margin-top: 0.5rem;
}

.o-app-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.75rem 1rem;
    background: var(--o-surface);
    border: 1px solid var(--o-line-soft);
    border-radius: var(--o-radius);
    box-shadow: var(--o-shadow-sm);
    color: var(--o-ink);
    font-weight: 500;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.o-app-tile i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--o-accent-soft);
    color: var(--o-accent);
    font-size: 1.125rem;
}

.o-app-tile:hover {
    transform: translateY(-2px);
    border-color: var(--o-line);
    box-shadow: var(--o-shadow-lift);
    color: var(--o-ink);
}

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

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

.o-agent-tile {
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 1.5rem 1.375rem;
    text-align: left;
}

.o-agent-tile i {
    margin-bottom: 0.25rem;
}

.o-agent-tile span {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

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

/* 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.875rem;
}

.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;
}

/* a run whose result breaks down request by request opens on a click */
.o-run-row {
    cursor: pointer;
}

.o-run-row:hover {
    background: var(--o-hover);
}

.o-run-caret {
    margin-right: 0.35rem;
    font-size: 0.65rem;
    color: var(--o-ink-muted);
    transition: transform 0.15s ease;
}

.o-run-row-open .o-run-caret {
    transform: rotate(90deg);
}

.o-run-details td {
    padding: 0.5rem 0.6rem 0.9rem 1.6rem;
    background: var(--o-hover);
}

.o-run-group + .o-run-group {
    margin-top: 0.6rem;
}

.o-run-group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
}

.o-run-group-label {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.o-run-group-summary {
    color: var(--o-ink-muted);
    font-size: 0.75rem;
}

.o-run-group-lines {
    margin: 0.15rem 0 0;
    padding-left: 1.1rem;
    color: var(--o-ink-soft);
}

.o-run-group-lines li {
    overflow-wrap: anywhere;
}

/* token usage page */
.o-usage-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.o-usage-card {
    padding: 1rem 1.25rem;
    background: var(--o-surface);
    border: 1px solid var(--o-line-soft);
    border-radius: var(--o-radius);
    box-shadow: var(--o-shadow-sm);
}

.o-usage-card-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--o-ink);
    margin-bottom: 0.25rem;
}

.o-usage-card-label {
    font-size: 0.8125rem;
    color: var(--o-ink-soft);
}

.o-usage-section-title {
    margin: 1.75rem 0 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--o-ink);
}

.o-usage-chart-container {
    position: relative;
    height: 300px;
    margin: 1rem 0;
}

.o-usage-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    margin-bottom: 2rem;
}

.o-usage-table th {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 2px solid var(--o-line);
    background: var(--o-hover);
    font-weight: 600;
    color: var(--o-ink-soft);
}

.o-usage-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--o-line-soft);
}

.o-usage-table .o-num {
    text-align: right;
}

.o-usage-table tbody tr:hover {
    background: var(--o-hover);
}

.o-usage-table code {
    background: var(--o-hover);
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
    font-size: 0.75rem;
    color: var(--o-ink-soft);
}

.o-usage-empty {
    padding: 1rem;
    color: var(--o-ink-muted);
    font-style: italic;
}

.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-dark);
}

.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 --- */

/* the ground shows through: the washes are painted on body */
.page-wrapper {
    background: transparent;
}

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

/* the title row stays under the top bar while the page scrolls — the list's
   search box and the record's save buttons live in it — on a translucent
   slice of the ground, so the washes stay visible behind it */
.page-wrapper .page-header {
    position: sticky;
    top: var(--o-navbar-h);
    z-index: 20;
    min-height: var(--o-header-h);
    margin: 0;
    padding: 0.75rem 24px;
    background: color-mix(in srgb, var(--o-canvas) 60%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

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

/* the page title in the site's headings face */
.page-header h1 {
    margin: 0;
    font-family: var(--o-font-display);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

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

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

/* the content keeps a margin from the edges and sits in cards */
.page-body .container-fluid {
    padding: 0.5rem 24px 2rem;
}

.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.375rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

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

/* the save and discard buttons of a record form, beside the record pager */
.o-record-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* --- Pager --- */

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

/* only the list's counter is also its page-size control; the record pager's
   counter is a plain number */
#o-cp-pager .o-pager-value {
    cursor: text;
    border-bottom: 1px solid transparent;
}

#o-cp-pager .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.25rem 0.55rem;
}

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

.o-searchview-group {
    display: flex;
    flex: 1 1 320px;
    max-width: 720px;
    border-radius: var(--o-radius-control);
    transition: box-shadow 0.15s;
}

/* the ring goes round the box and its toggler together */
.o-searchview-group:focus-within {
    box-shadow: 0 0 0 3px var(--o-accent-ring);
}

/* 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;
    min-height: 38px;
    padding: 0.25rem 0.75rem;
    background: var(--o-surface);
    border: 1px solid var(--o-line);
    border-right: 0;
    border-radius: var(--o-radius-control) 0 0 var(--o-radius-control);
    transition: border-color 0.15s;
}

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

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

.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-input::placeholder {
    color: var(--o-ink-faint);
}

.o-searchview-toggler {
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    background: var(--o-surface);
    border: 1px solid var(--o-line);
    border-radius: 0 var(--o-radius-control) var(--o-radius-control) 0;
    color: var(--o-ink-muted);
    transition: border-color 0.15s, background 0.15s;
}

.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 --- */

/* the active filters, as pills in the search box: the field's icon, the
   value, a round × */
.o-facets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.o-facet {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 22rem;
    padding: 0 0.25rem 0 0.6rem;
    background: var(--o-accent-soft);
    border: 1px solid var(--o-chip-border);
    border-radius: 999px;
    color: var(--o-accent-dark);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.7;
    overflow: hidden;
}

.o-facet-label {
    display: flex;
    align-items: center;
    color: var(--o-accent);
}

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

.o-facet-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--o-ink-muted);
    font-size: 0.875rem;
    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.375rem 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.35rem 0.875rem;
    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-soft);
    border-radius: var(--o-radius-lg);
    box-shadow: var(--o-shadow-lift);
    overflow: hidden;
}

/* The vendor stylesheet paints every button collection (this dialog, the
   column and export menus) white with dark text, which in dark mode left a
   white sheet with near-invisible text: they take the theme's surface.
   dt.min.css loads after this file, so the selector has to outrank its
   `div.dt-button-collection`, not just repeat it. */
html div.dt-button-collection {
    background-color: var(--o-surface);
    color: var(--o-ink);
}

.o-filter-dialog .dtsb-title,
.o-filter-dialog .dtsb-titleRow,
.o-filter-dialog div.dtsb-criteria,
.o-filter-dialog .dtsb-data,
.o-filter-dialog .dtsb-condition,
.o-filter-dialog .dtsb-value {
    color: var(--o-ink);
}

.o-filter-dialog select option {
    background-color: var(--o-surface);
    color: var(--o-ink);
}

/* 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: var(--o-overlay);
}

/* --- List --- */

/* the table lives in a card: the header row is the card's top band and the
   gear sits in its corner. The optional-columns menu drops out of the card,
   so the corners are rounded on the first and last cells instead of clipped
   on the box. */
.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;
    margin-top: 0.5rem;
    background: var(--o-surface);
    border: 1px solid var(--o-line-soft);
    border-radius: var(--o-radius-lg);
    box-shadow: var(--o-shadow);
}

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

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

#dt > thead > tr > th:first-child {
    border-top-left-radius: calc(var(--o-radius-lg) - 1px);
}

#dt > thead > tr > th:last-child {
    border-top-right-radius: calc(var(--o-radius-lg) - 1px);
}

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

#dt > tbody > tr:last-child > td {
    border-bottom: 0;
}

#dt > tbody > tr:last-child > td:first-child {
    border-bottom-left-radius: calc(var(--o-radius-lg) - 1px);
}

#dt > tbody > tr:last-child > td:last-child {
    border-bottom-right-radius: calc(var(--o-radius-lg) - 1px);
}

/* 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 checkbox and the star hold no text to shorten; the dots would show
   beside them whenever their columns are squeezed */
#dt > thead > tr > th:nth-child(-n+2),
#dt > tbody > tr > td:nth-child(-n+2) {
    text-overflow: clip;
}

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

#dt tbody tr:not(.group-header):not(.selected):hover > td {
    background: var(--o-hover);
}

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: var(--o-line);
    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;
}

/* a cell without a value (render_favorite.js, displays/_null.html) */
.o-null {
    color: var(--o-ink-faint);
}

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

tr.group-header .group-count {
    margin-left: 0.5rem;
    padding: 0 0.5rem;
    background: var(--o-accent-soft-strong);
    border-radius: 999px;
    color: var(--o-accent-dark);
    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: 36px;
    height: 36px;
    padding: 0;
    background: var(--o-header-bg);
    border: 0;
    border-left: 1px solid var(--o-line-soft);
    border-bottom: 1px solid var(--o-line-soft);
    border-top-right-radius: calc(var(--o-radius-lg) - 1px);
    color: var(--o-ink-muted);
}

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

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

.o-optional-column {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.35rem 0.65rem;
    border-radius: var(--o-radius-sm);
    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 {
    margin-top: 0.5rem;
    border: 1px solid var(--o-line-soft);
    border-radius: var(--o-radius-lg);
    box-shadow: var(--o-shadow);
}

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

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

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

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

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

/* the attribute table of the library's detail page: light lines, the
   header on the tinted ground */
.table-bordered > :not(caption) > * > * {
    border-color: var(--o-line-soft);
}

.table-bordered {
    border-color: var(--o-line-soft);
}

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

/* the sheet and the history are two cards side by side on the ground */
.o-record-view {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

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

/* 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: 0.5rem auto 0.875rem;
    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.4rem 0.85rem;
    background: var(--o-surface);
    border: 1px solid var(--o-line-soft);
    border-radius: var(--o-radius-control);
    box-shadow: var(--o-shadow-sm);
    color: var(--o-ink-soft);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, color 0.15s;
}

.o-stat-button:hover {
    border-color: var(--o-line);
    box-shadow: var(--o-shadow);
    color: var(--o-ink);
    text-decoration: none;
}

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

/* a button that is a switch, while it is on (AdminUserView's 2FA) */
.o-stat-button-on,
.o-stat-button-on:hover {
    background: var(--o-success-bg);
    border-color: color-mix(in srgb, var(--o-success-ink) 30%, transparent);
    color: var(--o-success-ink);
}

.o-stat-button-on .o-stat-icon {
    color: var(--o-success-ink);
}

.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: 0 auto 1.5rem;
    padding: 1.5rem 2rem 2rem;
    background: var(--o-surface);
    border: 1px solid var(--o-line-soft);
    border-radius: var(--o-radius-lg);
    box-shadow: var(--o-shadow);
}

/* 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: 700;
    letter-spacing: -0.015em;
    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.65rem;
}

.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: boxes. A field is a box with a border and a faint fill, its
   placeholder saying what goes in (base_views.RecordModelView.__init__), so
   an empty field is seen and the cursor has one place to go; it darkens as
   it is hovered and gets the brand ring as it is 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: 38px;
    height: auto;
    padding: 0.45rem 0.7rem;
    background: var(--o-input-bg);
    border: 1px solid var(--o-input-border);
    border-radius: var(--o-radius-control);
    box-shadow: none;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.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-color: var(--o-btn-border-hover);
}

.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 {
    background: var(--o-surface);
    border-color: var(--o-accent);
    box-shadow: 0 0 0 3px var(--o-accent-ring);
}

.o-form-sheet .form-control::placeholder {
    color: var(--o-ink-faint);
}

/* the hint that is too long for a placeholder stays under the box, small */
.o-form-sheet .form-hint {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--o-ink-muted);
}

.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: var(--o-radius-sm);
}

.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.375rem;
    font-weight: 500;
    letter-spacing: -0.015em;
    text-decoration: none;
}

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

.o-cp-crumb-sep {
    color: var(--o-ink-faint);
    font-size: 1.125rem;
}

/* 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: 36px;
    height: 36px;
    background: var(--o-surface);
    border: 1px solid var(--o-btn-border);
    border-radius: var(--o-radius-control);
    color: var(--o-ink);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}

.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: var(--o-on-accent);
}

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

/* --- 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-soft);
    border-radius: var(--o-radius-control);
}

.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: var(--o-radius-sm);
    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 --- */

/* the site's underline tabs */
.o-notebook-headers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0 1.25rem;
    border-bottom: 1px solid var(--o-line-soft);
}

.o-notebook-tab {
    margin-bottom: -1px;
    padding: 0.6rem 0.875rem;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--o-ink-muted);
    font-weight: 500;
    transition: color 0.15s, border-color 0.15s;
}

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

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

/* a tab that is a link to another page (settings.html) */
.o-notebook-tab-link {
    display: inline-block;
    text-decoration: none;
}

.o-notebook-tab-link:hover {
    text-decoration: none;
}

.o-notebook-tab-link i {
    font-size: 0.7em;
    margin-left: 0.25rem;
    opacity: 0.6;
}

.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 card of its own height:
   pinned under the page header, 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: calc(var(--o-navbar-h) + var(--o-header-h) + 8px);
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--o-navbar-h) - var(--o-header-h) - 32px);
    margin-top: 0.5rem;
    padding: 1rem 1.25rem 1.25rem;
    background: var(--o-surface);
    border: 1px solid var(--o-line-soft);
    border-radius: var(--o-radius-lg);
    box-shadow: var(--o-shadow);
    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.4rem 0.85rem;
    background: var(--o-surface);
    border: 1px solid var(--o-line-soft);
    border-radius: var(--o-radius-control);
    box-shadow: var(--o-shadow-sm);
    color: var(--o-ink-soft);
    font-size: 0.875rem;
}

/* 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 {
    border-color: var(--o-line);
    box-shadow: var(--o-shadow);
    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: 0.5rem auto 2rem;
    padding: 1.5rem 2rem 2rem;
    background: var(--o-surface);
    border: 1px solid var(--o-line-soft);
    border-radius: var(--o-radius-lg);
    box-shadow: var(--o-shadow);
}

.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.35rem 0.6rem;
    background: var(--o-surface);
    border: 1px solid var(--o-line);
    border-radius: var(--o-radius-sm);
    color: var(--o-ink);
    font-size: 0.875rem;
}

.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.625rem;
    border-bottom: 1px solid var(--o-line-soft);
    color: var(--o-ink);
    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-soft);
    border-radius: 50%;
    color: var(--o-accent-dark);
    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;
        margin-top: 0;
    }
}

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

/* the sections and the open one's pages share one card, the sidebar on the
   tinted ground of the table headers */
.o-settings {
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - var(--o-navbar-h) - var(--o-header-h) - 3rem);
    margin-top: 0.5rem;
    background: var(--o-surface);
    border: 1px solid var(--o-line-soft);
    border-radius: var(--o-radius-lg);
    box-shadow: var(--o-shadow);
    overflow: hidden;
}

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

.o-settings-tab {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    background: none;
    border: 0;
    border-radius: var(--o-radius-sm);
    color: var(--o-ink-soft);
    font-weight: 500;
    text-align: left;
    transition: background 0.15s, color 0.15s;
}

.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 {
    background: var(--o-accent-soft);
    color: var(--o-accent-dark);
    font-weight: 600;
}

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

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

.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: -1.25rem -1.5rem 0;
    padding: 0 1.5rem;
}

.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.5rem 1rem;
    padding: 0.5rem 1.5rem;
    background: var(--o-header-bg);
    border-top: 1px solid var(--o-line-soft);
    border-bottom: 1px solid var(--o-line-soft);
    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: -1.25rem;
    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 image setting: the stored image beside the input that replaces it */
.o-setting-image {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.o-setting-image-preview {
    width: 32px;
    height: 32px;
    flex: none;
    object-fit: contain;
    border: 1px solid var(--o-line);
    border-radius: var(--o-radius-sm);
    background: var(--o-paper);
}

.o-setting-image-controls {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* 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: var(--o-radius-sm);
}

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

/* the label row: the label, then the marker and the Reset of a setting
   whose value differs from its default */
.o-setting-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

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

.o-setting-marker {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: var(--o-accent);
    cursor: help;
}

.o-setting-reset {
    padding: 0 0.5rem;
    background: none;
    border: 1px solid var(--o-line);
    border-radius: 999px;
    color: var(--o-ink-muted);
    font-size: 0.75rem;
    line-height: 1.25rem;
}

.o-setting-reset:hover {
    border-color: var(--o-accent);
    color: var(--o-accent);
}

/* marked for reset: the field is disabled (js/settings.js) and shown as
   such; the save puts the default back */
.o-setting-reset-pending .o-setting-field,
.o-setting-reset-pending .o-setting-check {
    opacity: 0.45;
    pointer-events: none;
}

.o-setting-reset-pending .o-setting-help {
    opacity: 0.6;
}

/* the Advanced group folds up; the summary is the group title with a
   caret, and the group opens by itself while a value in it is changed */
.o-settings-advanced {
    margin-bottom: 1.75rem;
}

.o-settings-advanced > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.o-settings-advanced > summary::-webkit-details-marker {
    display: none;
}

.o-settings-advanced > summary::before {
    content: "\f054";
    display: inline-block;
    width: 1rem;
    margin-right: 0.25rem;
    font: var(--fa-font-solid);
    font-size: 0.75rem;
    color: var(--o-ink-muted);
    transition: transform 0.15s;
}

.o-settings-advanced[open] > summary::before {
    transform: rotate(90deg);
}

.o-settings-advanced > .o-settings-group {
    margin-bottom: 0;
}

/* 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-soft);
    }
}

/* --- 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;
}

/* the light/dark segmented switch of the profile dialog — the same pill
   the public portal's theme picker uses */
.o-mode-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--o-line-soft);
    border-radius: 999px;
    background: var(--o-surface);
}
.o-mode-option {
    border: 0;
    background: none;
    color: var(--o-ink-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.o-mode-option:hover {
    color: var(--o-ink);
}
.o-mode-option.active {
    background: var(--o-accent);
    color: var(--o-on-accent);
}

.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: var(--o-paper);
    border: 1px solid var(--o-line);
    border-radius: var(--o-radius-sm);
}

#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.875rem;
}

.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:
   the site's buttons, a filled brand primary and an outlined secondary on
   the surface, both on the 10px radius of its controls. */

.btn {
    --tblr-btn-border-radius: var(--o-radius-control);
    --tblr-btn-font-size: 0.875rem;
    --tblr-btn-padding-y: 0.45rem;
    --tblr-btn-padding-x: 0.9rem;
    --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-accent-dark);
    --tblr-btn-active-border-color: var(--o-btn-border-hover);
    box-shadow: none;
    font-weight: 600;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

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

/* a button that is only text (the pencil and the star of a saved search) */
.btn-link {
    --tblr-btn-color: var(--o-accent);
    --tblr-btn-hover-color: var(--o-accent-strong);
    --tblr-btn-border-color: transparent;
    --tblr-btn-hover-border-color: transparent;
    --tblr-btn-hover-bg: transparent;
}

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

/* --- Forms --- */

/* the site's inputs: 10px radius, a light border, the brand ring on focus */
.form-control,
.form-select {
    padding: 0.5rem 0.75rem;
    background-color: var(--o-surface);
    border-color: var(--o-btn-border);
    border-radius: var(--o-radius-control);
    color: var(--o-ink);
    font-size: 0.9375rem;
    box-shadow: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-control-sm,
.form-select-sm {
    padding: 0.35rem 0.6rem;
    border-radius: var(--o-radius-sm);
    font-size: 0.875rem;
}

.form-control::placeholder {
    color: var(--o-ink-faint);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--o-accent);
    box-shadow: 0 0 0 3px var(--o-accent-ring);
}

.form-label {
    margin-bottom: 0.375rem;
    color: var(--o-ink-soft);
    font-size: 0.875rem;
    font-weight: 500;
}

/* Tabler rounds a checkbox on --tblr-border-radius, which the tokens set to
   the 10px of the inputs — too round for a 20px box */
.form-check-input {
    border-color: var(--o-line);
}

.form-check-input[type="checkbox"] {
    border-radius: 5px;
}

.form-check-input[type="radio"] {
    border-radius: 50%;
}

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

.form-check-input:focus {
    border-color: var(--o-accent);
    box-shadow: 0 0 0 3px var(--o-accent-ring);
}

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

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--o-accent);
    box-shadow: 0 0 0 3px var(--o-accent-ring);
}

/* The chosen value: select2's own #444 all but vanishes on a dark surface
   and reads as a placeholder. Ink for the value, muted ink for the real
   placeholder and the clear ×, so the two are told apart in both modes.
   The body prefix outranks the vendor stylesheet, which the record form
   links AFTER this one (starlette-admin edit.html head_css) and which
   states these same selectors. */
body .select2-container--default .select2-selection--single
    .select2-selection__rendered {
    color: var(--o-ink);
}

body .select2-container--default .select2-selection--single
    .select2-selection__placeholder {
    color: var(--o-ink-muted);
}

body .select2-container--default .select2-selection--single
    .select2-selection__clear,
body .select2-container--default .select2-selection--multiple
    .select2-selection__choice__remove {
    color: var(--o-ink-muted);
}

body .select2-container--default .select2-selection--single
    .select2-selection__clear:hover,
body .select2-container--default .select2-selection--multiple
    .select2-selection__choice__remove:hover {
    color: var(--o-ink);
}

/* the dropdown arrow, drawn as a css-triangle from a grey of its own */
body .select2-container--default .select2-selection--single
    .select2-selection__arrow b {
    border-top-color: var(--o-ink-muted);
}

body .select2-container--default.select2-container--open
    .select2-selection--single .select2-selection__arrow b {
    border-bottom-color: var(--o-ink-muted);
}

/* The dropdown select2 appends to <body>, outside the themed form: left to
   its own stylesheet it stays white with near-white options in dark mode.
   Painted from the tokens it follows both modes and every theme. */
body .select2-container--default .select2-dropdown {
    background: var(--o-surface);
    border: 1px solid var(--o-line-soft);
    border-radius: var(--o-radius);
    box-shadow: var(--o-shadow-lift);
    color: var(--o-ink);
}

body .select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--o-surface);
    border: 1px solid var(--o-line);
    color: var(--o-ink);
}

body .select2-container--default .select2-results__option {
    color: var(--o-ink);
}

/* select2 marks the already-chosen value; its default pale grey vanishes on
   a dark surface */
body .select2-container--default .select2-results__option[aria-selected="true"] {
    background: var(--o-hover);
    color: var(--o-ink);
}

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

/* the chosen values of a multi-select as pills; the body prefix outranks the
   vendor stylesheet, which the settings screen links after this one */
body .select2-container--default .select2-selection--multiple .select2-selection__choice {
    padding: 0 0.6rem 0 1.35rem;
    background: var(--o-accent-soft);
    border: 1px solid var(--o-chip-border);
    border-radius: 999px;
    color: var(--o-accent-dark);
    font-size: 0.8125rem;
    font-weight: 500;
}

/* the × the library pins to the left edge of the chip, without its own box */
body .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    padding: 0 0 0 0.5rem;
    border: 0;
    background: transparent;
    color: var(--o-accent);
    font-weight: 600;
}

body .select2-container--default .select2-selection--multiple
    .select2-selection__choice__remove:hover {
    background: transparent;
    color: var(--o-accent-dark);
}

/* the boxes themselves: the vendor stylesheet paints them white, which
   glares in dark mode */
body .select2-container--default .select2-selection--single,
body .select2-container--default .select2-selection--multiple {
    background: var(--o-surface);
}

body .select2-container--default .select2-selection--multiple .select2-search__field {
    color: var(--o-ink);
}

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

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

.dropdown-menu {
    padding: 0.375rem;
    border: 1px solid var(--o-line-soft);
    border-radius: var(--o-radius);
    background: var(--o-surface);
    box-shadow: var(--o-shadow-lift);
    font-size: 0.875rem;
}

.dropdown-item {
    padding: 0.4rem 0.65rem;
    border-radius: var(--o-radius-sm);
    color: var(--o-ink);
}

.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;
}

/* badges are the site's pills: tinted ground, dark text of the same hue */
.badge {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.4;
}

/* starlette-admin renders relations and URLs as Tabler's blue badges; in a
   table they are quiet pills — a light border on the surface, brand text */
.badge.bg-blue,
.badge.bg-blue-lt {
    --tblr-badge-color: var(--o-accent-dark);
    background: var(--o-surface) !important;
    border: 1px solid var(--o-line-soft);
    color: var(--o-accent-dark) !important;
    font-weight: 500;
    transition: background 0.15s, border-color 0.15s;
}

a:hover > .badge.bg-blue,
a:hover > .badge.bg-blue-lt {
    background: var(--o-accent-soft) !important;
    border-color: var(--o-chip-border);
}

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

/* the semantic tints of Tabler's light badges, from the tokens */
.badge.bg-green-lt,
.badge.bg-success-lt,
.badge.bg-teal-lt {
    background: var(--o-success-bg) !important;
    color: var(--o-success-ink) !important;
}

.badge.bg-red-lt,
.badge.bg-danger-lt {
    background: var(--o-danger-bg) !important;
    color: var(--o-danger-strong) !important;
}

.badge.bg-yellow-lt,
.badge.bg-orange-lt,
.badge.bg-warning-lt {
    background: var(--o-warn-bg) !important;
    color: var(--o-warn-ink) !important;
}

.badge.bg-secondary-lt,
.badge.bg-gray-lt,
.badge.bg-muted-lt {
    background: var(--o-hover) !important;
    color: var(--o-ink-soft) !important;
}

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

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

/* modals on the site's overlay, with its large radius */
.modal-backdrop {
    --tblr-backdrop-bg: var(--o-overlay);
    --tblr-backdrop-opacity: 1;
}

.modal-content {
    background: var(--o-surface);
    border: 1px solid var(--o-line-soft);
    border-radius: var(--o-radius-lg);
    box-shadow: var(--o-shadow-lift);
}

.modal-header {
    padding: 1.125rem 1.5rem;
    border-bottom: 1px solid var(--o-line-soft);
}

.modal-title {
    font-size: 1.125rem;
    font-weight: 700;
}

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

/* alerts and the action toasts of the lists: soft tints, no solid bands */
.alert,
.alert-important {
    --tblr-alert-border-color: transparent;
    padding: 0.75rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--o-radius);
    box-shadow: none;
}

.alert-danger,
.alert-important.alert-danger {
    --tblr-alert-bg: var(--o-danger-bg);
    --tblr-alert-color: var(--o-danger);
    background: var(--o-danger-bg);
    color: var(--o-danger);
}

.alert-success,
.alert-important.alert-success {
    --tblr-alert-bg: var(--o-success-bg);
    --tblr-alert-color: var(--o-success-ink);
    background: var(--o-success-bg);
    color: var(--o-success-ink);
}

.alert-warning,
.alert-important.alert-warning {
    --tblr-alert-bg: var(--o-warn-bg);
    --tblr-alert-color: var(--o-warn-ink);
    background: var(--o-warn-bg);
    color: var(--o-warn-ink);
}

.alert-info,
.alert-important.alert-info {
    --tblr-alert-bg: var(--o-accent-soft);
    --tblr-alert-color: var(--o-accent-dark);
    background: var(--o-accent-soft);
    color: var(--o-accent-dark);
}

/* the library pairs its "important" alerts with a white close cross */
.alert-important .btn-close-white {
    filter: none;
}

.toast {
    background: var(--o-surface);
    border: 1px solid var(--o-line-soft);
    border-radius: var(--o-radius);
    box-shadow: var(--o-shadow-lift);
}

.tooltip-inner {
    border-radius: var(--o-radius-sm);
}

/* --- Login --- */

/* the site's auth card: centred, large radius, a left-aligned title, the
   brand button across the bottom */
.container-tight {
    max-width: 420px;
    margin: 56px auto 80px;
}

/* 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 {
    margin: 0;
    border: 1px solid var(--o-line-soft);
    border-radius: var(--o-radius-lg);
    box-shadow: var(--o-shadow);
}

.container-tight .card-body {
    padding: 32px;
}

/* the templates centre the title; the site's card does not */
.container-tight .card-title {
    margin: 0 0 1.25rem;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: left !important;
}

.container-tight .form-label {
    margin-bottom: 0.375rem;
    color: var(--o-ink-muted);
    font-size: 0.8125rem;
    font-weight: 500;
}

.container-tight .form-control {
    padding: 10px 12px;
    font-size: 0.9375rem;
}

.container-tight .form-check-label {
    color: var(--o-ink-soft);
}

.container-tight .text-secondary {
    color: var(--o-ink-muted) !important;
    font-size: 0.875rem;
}

.container-tight .form-footer {
    margin-top: 1.5rem;
}

.container-tight .btn-primary {
    padding: 0.7rem 1rem;
    font-size: 0.9375rem;
}

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

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

.o-error-dialog {
    background: var(--o-surface);
    border: 1px solid var(--o-line-soft);
    border-radius: var(--o-radius-lg);
    box-shadow: var(--o-shadow-lift);
    width: 100%;
    max-width: 540px;
    max-height: 75vh;
    display: flex;
    flex-direction: column;
}

.o-error-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--o-line-soft);
    color: var(--o-danger);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.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 20px;
    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 20px;
    border-top: 1px solid var(--o-line-soft);
    background: var(--o-canvas);
    border-radius: 0 0 var(--o-radius-lg) var(--o-radius-lg);
    display: flex;
    justify-content: flex-end;
}

.o-error-ok {
    border: none;
    border-radius: var(--o-radius-control);
    background: var(--o-accent);
    color: var(--o-on-accent);
    padding: 8px 22px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

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

/* the two-factor setup a superadmin runs for someone, in the same frame
   (js/record_header.js showTwoFactor) */
.o-two-factor-qr {
    width: 220px;
    margin: 10px auto;
    padding: 12px;
    /* a QR code is read dark on light, whatever the theme */
    background: var(--o-paper);
    border-radius: var(--o-radius-sm);
}

.o-two-factor-qr svg {
    display: block;
    width: 100%;
    height: auto;
}

.o-two-factor-form input {
    max-width: 12rem;
    margin: 6px 0;
    letter-spacing: 0.15em;
}

.o-two-factor-form .o-error-footer {
    gap: 8px;
}

/* --- The City Illustrations gallery (illustration_gallery.html) --- */

.o-gallery-lead {
    max-width: 44rem;
    color: var(--o-ink-soft);
}

.o-gallery-waiting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1rem 0 1.5rem;
    padding: 0.75rem 1rem;
    background: var(--o-warn-bg);
    color: var(--o-warn-ink);
    border-radius: var(--o-radius);
}

.o-gallery-waiting-city {
    white-space: nowrap;
}

.o-gallery-muted {
    font-size: 0.8125rem;
    color: var(--o-ink-muted);
}

.o-gallery-country {
    margin: 1.75rem 0 0.5rem;
    padding-bottom: 0.25rem;
    font-size: 1rem;
    border-bottom: 1px solid var(--o-line);
}

.o-gallery-city {
    margin: 0.75rem 0 1.25rem;
}

.o-gallery-city-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.o-gallery-city-name {
    font-weight: 600;
    margin-right: 0.5rem;
}

.o-gallery-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1rem;
}

.o-gallery-tile {
    margin: 0;
    border: 1px solid var(--o-line-soft);
    border-radius: var(--o-radius);
    overflow: hidden;
    background: var(--o-surface);
}

/* the card colour the drawings are made for: the wash reads wrong on white */
.o-gallery-tile img,
.o-gallery-tile-blank {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--o-illustration-bg);
}

.o-gallery-tile-blank {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    color: var(--o-ink-muted);
    font-size: 0.8125rem;
}

.o-gallery-tile-blank i {
    font-size: 1.5rem;
}

.o-gallery-tile figcaption {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem 2.25rem 0.5rem 0.6rem;
    font-size: 0.8125rem;
}

.o-gallery-variant {
    font-weight: 600;
    color: var(--o-ink-soft);
}

.o-gallery-landmarks {
    color: var(--o-ink);
}

.o-gallery-tile figcaption form {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
}

.o-gallery-delete {
    padding: 0.15rem 0.4rem;
    color: var(--o-ink-muted);
}

.o-gallery-delete:hover {
    color: var(--o-danger);
}

.o-gallery-empty {
    color: var(--o-ink-soft);
}

/* the upload forms of the gallery: one at the top for any city, one per city */
.o-gallery-upload {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.75rem 1rem;
    margin: 1rem 0 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--o-hover);
    border-radius: var(--o-radius);
}

.o-gallery-upload label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.8125rem;
    color: var(--o-ink-soft);
}

.o-gallery-upload .form-control,
.o-gallery-upload .form-select {
    min-width: 12rem;
}

.o-gallery-city-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.o-gallery-add {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.o-gallery-add input[type="file"] {
    max-width: 14rem;
    font-size: 0.8125rem;
}

.o-gallery-badge {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0 0.5rem;
    font-size: 0.6875rem;
    line-height: 1.5;
    border-radius: 999px;
    background: var(--o-accent-soft);
    color: var(--o-accent-dark);
}

/* --- The Picture field of an opportunity (forms/illustration_picker.html) --- */

.o-picker-status {
    margin-bottom: 0.5rem;
}

.o-picker-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 0.75rem;
}

.o-picker-tile {
    position: relative;
    display: block;
    margin: 0;
    border: 2px solid var(--o-line-soft);
    border-radius: var(--o-radius);
    overflow: hidden;
    background: var(--o-surface);
    cursor: pointer;
}

.o-picker-tile.selected {
    border-color: var(--o-accent-strong);
    box-shadow: 0 0 0 2px var(--o-accent-soft);
}

.o-picker-tile-slot {
    cursor: default;
    border-style: dashed;
}

.o-picker-tile input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* the card colour the drawings are made for, as in the gallery */
.o-picker-picture {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--o-illustration-bg);
    color: var(--o-ink-muted);
    font-size: 0.75rem;
    text-align: center;
    padding: 0.25rem;
}

.o-picker-picture img {
    display: block;
    width: 100%;
    height: 100%;
}

.o-picker-picture-auto i,
.o-picker-picture-empty i {
    font-size: 1.5rem;
}

.o-picker-caption {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.4rem 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.3;
}

.o-illustration-thumb {
    display: block;
    width: 132px;
    height: 132px;
    border-radius: var(--o-radius);
    background: var(--o-illustration-bg);
}

/* the pending-runs banner and the per-city state of the gallery */
.o-gallery-runs {
    margin: 1rem 0 0;
    padding: 0.6rem 1rem;
    background: var(--o-accent-soft);
    color: var(--o-accent-dark);
    border-radius: var(--o-radius);
}

.o-gallery-state {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0 0.5rem;
    font-size: 0.75rem;
    line-height: 1.5;
    border-radius: 999px;
    background: var(--o-hover);
    color: var(--o-ink-soft);
}

.o-gallery-tile-empty .o-gallery-tile-blank form {
    position: static;
    margin-top: 0.35rem;
}

/* --- The AI connector (mcp_connections.html) --- */

.o-mcp-heading {
    margin: 2rem 0 0.5rem;
    padding-bottom: 0.25rem;
    font-size: 1rem;
    border-bottom: 1px solid var(--o-line-soft);
}

.o-mcp-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 1.25rem;
    margin: 0.75rem 0 1rem;
    font-size: 0.875rem;
}

.o-mcp-facts dt {
    color: var(--o-ink-soft);
}

.o-mcp-facts dd {
    margin: 0;
    word-break: break-all;
}

.o-mcp-alert {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--o-line-soft);
    border-radius: var(--o-radius);
    background: var(--o-hover);
    font-size: 0.875rem;
}

.o-mcp-alert p {
    margin: 0 0 0.5rem;
}

.o-mcp-alert p:last-child {
    margin-bottom: 0;
}

.o-mcp-alert-error {
    background: var(--o-danger-bg);
    border-color: transparent;
    color: var(--o-danger);
}

.o-mcp-alert-key {
    background: var(--o-warn-bg);
    border-color: transparent;
    color: var(--o-warn-ink);
}

/* the one time a new access key is on screen: selectable in one go */
.o-mcp-key {
    display: block;
    padding: 0.5rem 0.75rem;
    background: var(--o-surface);
    border: 1px solid var(--o-line);
    border-radius: 6px;
    font-size: 0.8125rem;
    word-break: break-all;
    user-select: all;
}

/* Settings / Technical / API Keys: the keys of one admin (api_keys.html) */
.o-api-key-holder {
    margin: 0.75rem 0 1.25rem;
}

.o-api-key-holder-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    font-size: 0.875rem;
}

.o-api-key-dead {
    color: var(--o-danger);
}

.o-mcp-key-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin: 1rem 0 0.5rem;
}

.o-mcp-key-form label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: var(--o-ink-soft);
}


/* Two-factor authentication (two_factor.html): the QR code beside the key
   to type by hand. The code keeps its own white ground in the dark theme:
   a phone's camera reads dark modules on a light ground. */
.o-2fa-setup {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.5rem;
    margin: 0.75rem 0;
}

.o-2fa-setup .o-mcp-facts {
    flex: 1 1 18rem;
    margin: 0;
}

.o-2fa-qr {
    flex: none;
    line-height: 0;
    border-radius: var(--o-radius);
    overflow: hidden;
}

.o-2fa-qr svg {
    display: block;
}

.o-2fa-key {
    font-size: 1rem;
    letter-spacing: 0.05em;
}

.o-2fa-code {
    width: 10rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.1em;
}

/* --- Intermet additions: notes in the chatter --- */
.o-chatter-composer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--o-line-soft, #e6e6e3);
  margin-bottom: 8px;
}
.o-chatter-composer textarea {
  resize: vertical;
  font-size: 13px;
}
.o-chatter-composer button {
  align-self: flex-end;
}
.o-chatter-note {
  white-space: pre-wrap;
  color: var(--o-ink, #1f1f1f);
  background: var(--o-canvas, #f5f5f4);
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: 4px;
  font-size: 13px;
}


/* --- Intermet additions: the pipeline --- */
.o-stagebar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0 0 12px;
}
.o-stage {
  border: 1px solid var(--o-line, #d6deda);
  background: var(--o-surface, #fff);
  color: var(--o-ink-soft, #3a3d40);
  padding: 7px 14px 7px 18px;
  font-size: 13px;
  font-weight: 500;
  position: relative;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%);
}
.o-stage:first-child { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); padding-left: 14px; border-radius: 6px 0 0 6px; }
.o-stage:last-child { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%); border-radius: 0 6px 6px 0; }
.o-stage:hover { background: var(--o-canvas, #f5f5f4); color: var(--o-ink, #1f1f1f); }
.o-stage-current { background: var(--o-accent, #d20c03); border-color: var(--o-accent, #d20c03); color: #fff; }
.o-stage-current.o-stage-lost { background: #b3423a; border-color: #b3423a; }
.o-stagebar-busy .o-stage { opacity: 0.6; pointer-events: none; }
.o-ribbon {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 8px; font-weight: 600; font-size: 13px; margin-bottom: 12px;
}
.o-ribbon-won { background: rgba(30, 107, 76, 0.14); color: #2f9a6e; }
.o-ribbon-lost { background: rgba(179, 66, 58, 0.14); color: #d2645b; }

.o-board {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  overflow-x: auto;
  padding: 4px 0 16px;
  min-height: calc(100vh - 160px);
}
.o-board-column {
  flex: 0 0 290px;
  background: var(--o-canvas, #f5f5f4);
  border: 1px solid var(--o-line-soft, #e6e6e3);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 170px);
}
.o-board-over { outline: 2px dashed var(--o-accent, #d20c03); }
.o-board-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid var(--o-line-soft, #e6e6e3);
  font-weight: 600; font-size: 14px;
}
.o-board-count { background: var(--o-surface, #fff); color: var(--o-ink, #1f1f1f); border: 1px solid var(--o-line-soft, #e6e6e3); border-radius: 999px; padding: 0 8px; font-size: 12px; }
.o-board-revenue { margin-left: auto; font-size: 12px; color: var(--o-ink-soft, #3a3d40); font-weight: 500; }
.o-board-won .o-board-head { color: #1e6b4c; }
.o-board-lost .o-board-head { color: #a23a32; }
.o-board-folded { flex-basis: 48px; }
.o-board-folded .o-board-head { writing-mode: vertical-rl; transform: rotate(180deg); border-bottom: 0; border-left: 1px solid var(--o-line-soft, #e6e6e3); }
.o-board-folded .o-board-cards { display: none; }
.o-board-folded .o-board-revenue { display: none; }
.o-board-unfold { border: 0; background: none; color: inherit; cursor: pointer; }
.o-board-cards { padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.o-card {
  background: var(--o-surface, #fff); color: var(--o-ink, #1f1f1f); border: 1px solid var(--o-line-soft, #e6e6e3); border-radius: 10px;
  padding: 10px 12px; cursor: grab; box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.o-card:hover { border-color: var(--o-accent, #d20c03); }
.o-card-dragging { opacity: 0.5; }
.o-card-overdue { border-left: 3px solid #b3423a; }
.o-card-title { font-weight: 600; font-size: 14px; line-height: 1.3; }
.o-card-client { color: var(--o-ink-soft, #3a3d40); font-size: 13px; margin-top: 2px; }
.o-card-line { font-size: 12px; color: var(--o-ink-soft, #3a3d40); }
.o-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--o-ink-soft, #3a3d40); flex-wrap: wrap; }
.o-card-stars { color: #e3a008; font-size: 11px; }
.o-star-off { color: #d6deda; }
.o-card-revenue { font-weight: 600; color: var(--o-ink, #1f1f1f); }
.o-card-days { margin-left: auto; }
.o-card-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--o-accent, #d20c03); color: var(--o-on-accent, #fff); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }
.o-ribbon-waiting { background: var(--o-canvas, #f5f5f4); color: var(--o-ink-soft, #3a3d40); }
.o-board-waiting { margin-left: 16px; font-size: 13px; color: var(--o-ink-soft, #3a3d40); }
.o-board-waiting:hover { color: var(--o-accent, #d20c03); }

/* --- Intermet additions: sections layout, appearance menu --- */
.o-sections { display: flex; flex-direction: column; gap: 4px; }
.o-section { padding: 10px 0 14px; border-top: 1px solid var(--o-line-soft, #e6e6e3); }
.o-section:first-child { border-top: 0; padding-top: 0; }
.o-section-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--o-ink-soft, #3a3d40); margin: 0 0 10px;
}
.o-appearance-menu { min-width: 220px; padding: 8px 0; }
.o-appearance-row { display: flex; gap: 6px; padding: 4px 12px 8px; }
.o-appearance-option {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--o-line, #d6deda);
  background: var(--o-surface, #fff); color: var(--o-ink, #1f1f1f); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.o-appearance-option:hover { border-color: var(--o-accent, #d20c03); }
.o-appearance-current { outline: 2px solid var(--o-accent, #d20c03); outline-offset: 1px; }
.o-swatch-intermet { background: linear-gradient(135deg, #f80f05 50%, #1f1f1f 50%); }
.o-swatch-indigo { background: #3f51b5; }
.o-swatch-terracotta { background: #b5543d; }
.o-swatch-olive { background: #6b7d3a; }
.o-card-next { color: var(--o-accent, #d20c03); }
.o-card-next-overdue { color: #b3423a; font-weight: 600; }
.o-config-keys { display: grid; gap: 10px; margin-bottom: 8px; }
.o-config-key label { font-size: 13px; font-weight: 500; display: block; margin-bottom: 2px; }

/* the stages managed on the board (templates/pipeline.html): a column's
   name opens the stage, the last column adds one */
.o-board-name-link { color: inherit; text-decoration: none; }
.o-board-name-link:hover { color: var(--o-accent); text-decoration: underline; }
.o-board-add { flex: 0 0 260px; }
.o-board-add-toggle {
  width: 100%;
  padding: 12px 14px;
  border: 1px dashed var(--o-line, #d5ddda);
  border-radius: 12px;
  background: none;
  color: var(--o-ink-muted);
  font-weight: 600;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.o-board-add-toggle:hover { color: var(--o-accent); border-color: var(--o-accent); }
.o-board-add-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--o-line-soft, #e6e6e3);
  border-radius: 12px;
  background: var(--o-surface);
}
.o-board-add-form[hidden] { display: none; }
.o-board-add-actions { display: flex; gap: 6px; }

/* a client's tags in the list (render.tags): soft chips, six hues */
.o-tag {
  display: inline-block;
  margin: 1px 4px 1px 0;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  background: color-mix(in srgb, var(--o-tag) 16%, var(--o-surface));
  color: color-mix(in srgb, var(--o-tag) 75%, var(--o-ink));
  border: 1px solid color-mix(in srgb, var(--o-tag) 35%, var(--o-surface));
}
.o-tag-0 { --o-tag: #d20c03; }
.o-tag-1 { --o-tag: #4f5bb3; }
.o-tag-2 { --o-tag: #b5603d; }
.o-tag-3 { --o-tag: #7c8f3e; }
.o-tag-4 { --o-tag: #a3477a; }
.o-tag-5 { --o-tag: #3b7fa8; }

/* the gear menu of a record's control panel (record.html): Delete, away
   from the working buttons of the button box */
.o-cp-gear { margin-left: 0.5rem; }
.o-cp-gear-toggle {
  border: 0;
  background: none;
  padding: 0.25rem 0.4rem;
  border-radius: var(--o-radius-sm);
  color: var(--o-ink-muted);
  font-size: 1rem;
}
.o-cp-gear-toggle:hover { color: var(--o-ink); background: var(--o-hover); }
.o-cp-gear .dropdown-item.o-gear-danger { color: var(--o-danger); }

/* a link among the action buttons (Open in Pipeline-CRM) looks like them */
a.o-stat-button { text-decoration: none; color: inherit; }

/* the card the board was opened on (board_url, #lead-<id>) */
.o-card:target {
  outline: 2px solid var(--o-accent);
  outline-offset: 2px;
}

/* the Settings page (templates/settings.html): a section per area, a card
   per screen with its icon, name and one line on what it is for */
.o-settings { display: flex; flex-direction: column; gap: 28px; padding: 24px 28px 32px; }
.o-settings-title {
  margin: 0 0 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--o-ink-faint);
}
.o-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.o-settings-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: var(--o-surface);
  border: 1px solid var(--o-line-soft);
  border-radius: var(--o-radius);
  box-shadow: var(--o-shadow-sm);
  color: var(--o-ink);
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.o-settings-card:hover {
  transform: translateY(-1px);
  border-color: var(--o-line);
  box-shadow: var(--o-shadow-lift);
  color: var(--o-ink);
}
.o-settings-card > i {
  flex: 0 0 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  border-radius: 50%;
  background: var(--o-accent-soft);
  color: var(--o-accent);
}
.o-settings-card-text { display: flex; flex-direction: column; gap: 2px; }
.o-settings-card-label { font-weight: 600; }
.o-settings-card-description { font-size: 0.8125rem; color: var(--o-ink-muted); }

/* the input tokens: a faint fill on the light ground, a lift on the dark */
:root {
    --o-input-bg: color-mix(in srgb, var(--o-canvas) 60%, var(--o-surface));
    --o-input-border: var(--o-line);
}
:root[data-o-mode="dark"] {
    --o-input-bg: #1f2624;
    --o-input-border: #3a4642;
}

/* the picker's text and arrow inside the taller box */
.o-form-sheet .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 26px;
    padding-left: 0;
}
.o-form-sheet .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
}
.o-form-sheet .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0;
}

/* the title of a record: one big box-less line, its placeholder saying what it is */
.o-form-title .form-control,
.o-form-title .form-control:hover,
.o-form-title .form-control:focus {
    padding: 0.1rem 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--o-line-soft);
    border-radius: 0;
    box-shadow: none;
}
.o-form-title .form-control:focus { border-bottom-color: var(--o-accent); }

/* a translated text (forms/translated.html): a row per language, the
   language as a chip in front of its box */
.o-translated { display: flex; flex-direction: column; gap: 0.4rem; }
.o-translated-row { display: flex; align-items: flex-start; gap: 0.5rem; }
.o-translated-input { flex: 1 1 auto; min-width: 0; }
.o-lang-chip {
    flex: 0 0 auto;
    margin-top: 0.55rem;
    min-width: 2.1rem;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    background: var(--o-accent-soft);
    color: var(--o-accent-dark, var(--o-accent));
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
}
.o-translated-wide .o-translated-row { gap: 0.6rem; }

/* a lead's priority as stars (forms/priority.html, render.priority) */
.o-priority { display: inline-flex; align-items: center; gap: 2px; min-height: 38px; }
.o-priority-star { cursor: pointer; margin: 0; color: var(--o-line); font-size: 1.1rem; line-height: 1; }
.o-priority-star input { position: absolute; opacity: 0; width: 0; height: 0; }
.o-priority-star:hover, .o-priority-star.o-priority-on { color: #e3a008; }
.o-priority:hover .o-priority-star { color: var(--o-line); }
.o-priority:hover .o-priority-star:hover, .o-priority:hover .o-priority-star:has(~ .o-priority-star:hover) { color: #e3a008; }
.o-priority-label { margin-left: 0.5rem; font-size: 0.8125rem; color: var(--o-ink-muted); }
.o-stars { color: #e3a008; font-size: 0.75rem; white-space: nowrap; }
.o-stars .o-star-off { color: var(--o-line); }

/* the dialog of an action that takes a form (js/action_dialog.js) */
.o-action-dialog .o-action-text { margin: 0 0 0.75rem; color: var(--o-ink-soft); }
.o-action-dialog .o-action-form .form-label { margin-bottom: 0.25rem; }
.o-action-dialog .o-action-form .mt-3:first-child { margin-top: 0 !important; }
.o-action-dialog .o-error-footer { display: flex; justify-content: flex-end; gap: 0.5rem; }

/* an e-mail in the History (js/chatter.js renderMail): a card like a note,
   the text scrollable so a long message does not push the thread away */
.o-chatter-mail {
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px solid var(--o-line-soft, #e6e6e3);
  border-radius: 8px;
  font-size: 13px;
}
.o-chatter-mail-subject {
  font-weight: 600;
}
.o-chatter-mail-addresses {
  color: var(--o-ink-muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}
/* no height of its own: the History panel is the one thing that scrolls */
.o-chatter-mail-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin-top: 6px;
}
.o-chatter-mail-attachments {
  margin: 6px 0 0;
  padding-left: 1.1rem;
  font-size: 12px;
}
.o-chatter-mail-skipped {
  color: var(--o-ink-muted);
}
/* the message came back (js/chatter.js renderMail): a line in the colour
   of a lost lead, above the text, so it is not missed on a long message */
.o-chatter-mail-undelivered {
  margin-top: 4px;
  color: var(--o-danger);
  font-size: 12px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.o-chatter-mail-reply {
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--o-accent-dark, #1f6f5c);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
/* the composer's two modes (record.html): Log note | Send message */
.o-chatter-modes {
  display: flex;
  gap: 4px;
}
.o-chatter-mode {
  padding: 2px 10px;
  border: 1px solid var(--o-line-soft, #e6e6e3);
  border-radius: 999px;
  background: none;
  color: var(--o-ink-soft, #4b5753);
  font-size: 12px;
  cursor: pointer;
}
.o-chatter-mode.active {
  background: var(--o-accent-soft, #e3f1ec);
  border-color: var(--o-accent-soft, #e3f1ec);
  color: var(--o-accent-dark, #1f6f5c);
  font-weight: 600;
}
.o-chatter-mail-fields {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.o-chatter-mail-to {
  color: var(--o-ink-muted, #7a8683);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.o-chatter-mail-fields input {
  font-size: 13px;
}

/* --- The bell of the top bar (templates/layout.html, js/notifications.js) --- */

.o-navbar-bell {
    margin-left: auto;
}
.o-navbar-bell + .o-navbar-user {
    margin-left: 0;
}
.o-bell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: var(--o-radius-control);
    background: transparent;
    color: var(--o-ink-muted);
    font-size: 1.05rem;
}
.o-bell:hover,
.o-bell[aria-expanded="true"] {
    background: var(--o-accent-soft);
    color: var(--o-accent-dark);
}
.o-bell.o-bell-unread {
    color: var(--o-ink);
}
.o-bell-count {
    position: absolute;
    top: 3px;
    right: 1px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--o-danger);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 17px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--o-navbar-bg);
}
.o-notifications {
    width: 380px;
    max-width: calc(100vw - 16px);
    margin-top: 0.5rem;
    padding: 0;
    overflow: hidden;
}
.o-notifications-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--o-line-soft);
}
.o-notifications-title {
    font-weight: 600;
}
.o-notifications-read-all {
    border: 0;
    padding: 0;
    background: none;
    color: var(--o-accent);
    font-size: 0.8rem;
}
.o-notifications-read-all:hover {
    text-decoration: underline;
}
.o-notifications-list {
    max-height: min(60vh, 480px);
    overflow-y: auto;
}
.o-notifications-empty {
    padding: 1.25rem 0.85rem;
    color: var(--o-ink-muted);
    text-align: center;
}
.o-notifications-empty[hidden] {
    display: none;
}
.o-notification {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 0.6rem 0.6rem 0.85rem;
    border-bottom: 1px solid var(--o-line-soft);
    background: var(--o-accent-soft);
}
.o-notification:last-child {
    border-bottom: 0;
}
.o-notification-read {
    background: transparent;
}
.o-notification-read .o-notification-title,
.o-notification-read .o-notification-icon {
    color: var(--o-ink-muted);
}
.o-notification-icon {
    flex: 0 0 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--o-surface);
    color: var(--o-accent-dark);
    font-size: 0.8rem;
}
.o-notification-email_undelivered {
    color: var(--o-danger);
}
.o-notification-body {
    flex: 1 1 auto;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}
a.o-notification-body:hover .o-notification-title {
    text-decoration: underline;
}
.o-notification-kind {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--o-ink-muted);
}
.o-notification-record {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}
.o-notification-title {
    margin-top: 1px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.o-notification-detail {
    color: var(--o-ink-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.o-notification-time {
    margin-top: 2px;
    font-size: 0.75rem;
    color: var(--o-ink-muted);
}
.o-notification-toggle {
    flex: 0 0 28px;
    height: 28px;
    margin-top: 2px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--o-ink-muted);
    font-size: 0.8rem;
}
.o-notification-toggle:hover {
    background: var(--o-surface);
    color: var(--o-accent-dark);
}
@media (max-width: 800px) {
    .o-notifications {
        position: fixed !important;
        inset: var(--o-navbar-h) 8px auto 8px !important;
        transform: none !important;
        width: auto;
    }
}

/* --- The folded quote of an e-mail card (js/chatter.js renderMail) --- */

.o-chatter-mail-more {
    display: inline-block;
    margin-top: 6px;
    padding: 0 8px;
    border: 1px solid var(--o-line-soft);
    border-radius: 6px;
    background: var(--o-hover);
    color: var(--o-ink-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 0.1em;
}
.o-chatter-mail-more:hover,
.o-chatter-mail-more[aria-expanded="true"] {
    color: var(--o-accent-dark);
    border-color: var(--o-accent);
}
.o-chatter-mail-quoted {
    margin-top: 6px;
    padding-left: 10px;
    border-left: 3px solid var(--o-line);
    color: var(--o-ink-muted);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
/* the entry a notification pointed at, for a moment after the page opened */
.o-chatter-entry-lit {
    animation: o-chatter-lit 4s ease-out;
    border-radius: 8px;
}
@keyframes o-chatter-lit {
    0%, 60% { background: var(--o-accent-soft); box-shadow: 0 0 0 4px var(--o-accent-soft); }
    100% { background: transparent; box-shadow: none; }
}

/* --- E-mail templates: the constructor (js/template_builder.js) --- */

.o-tpl-palette,
.o-tpl-legend {
    margin: 0.25rem 0 0.6rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--o-line-soft);
    border-radius: var(--o-radius-sm);
    background: var(--o-hover);
    font-size: 0.8rem;
}
.o-tpl-palette-title {
    margin-bottom: 0.4rem;
    color: var(--o-ink-muted);
}
.o-tpl-palette-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.3rem;
}
.o-tpl-palette-label {
    min-width: 64px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--o-ink-muted);
}
.o-tpl-chip {
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--o-line);
    border-radius: 999px;
    background: var(--o-surface);
    color: var(--o-accent-dark);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
}
.o-tpl-chip:hover {
    border-color: var(--o-accent);
    background: var(--o-accent-soft);
}
.o-tpl-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 1rem;
    color: var(--o-ink-muted);
}
.o-tpl-legend code {
    padding: 0 0.3rem;
    border-radius: 4px;
    background: var(--o-surface);
    color: var(--o-ink);
}
.o-tpl-preview {
    margin-top: 0.9rem;
    border: 1px solid var(--o-line-soft);
    border-radius: var(--o-radius);
    overflow: hidden;
}
.o-tpl-preview-head {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.5rem 0.85rem;
    border-bottom: 1px solid var(--o-line-soft);
    background: var(--o-hover);
}
.o-tpl-preview-title {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--o-ink-muted);
}
.o-tpl-preview-subject {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.o-tpl-preview-warning {
    padding: 0.4rem 0.85rem;
    background: var(--o-danger-soft-bg);
    color: var(--o-danger);
    font-size: 0.8rem;
}
.o-tpl-preview-frame {
    display: block;
    width: 100%;
    height: 560px;
    border: 0;
    background: #f2f5f4;
}
/* the colour field (templates/forms/color.html) */
.o-color {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.o-color-swatch {
    width: 38px;
    height: 34px;
    padding: 2px;
    border: 1px solid var(--o-line);
    border-radius: var(--o-radius-sm);
    background: var(--o-surface);
}
.o-color-text {
    max-width: 120px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --- the composer's template picker and the preview dialog (js/chatter.js) --- */

.o-chatter-template-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}
.o-chatter-template {
    flex: 1 1 auto;
}
.o-chatter-preview {
    flex: 0 0 auto;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--o-line);
    border-radius: var(--o-radius-sm);
    background: var(--o-surface);
    color: var(--o-accent-dark);
    font-size: 0.8rem;
}
.o-chatter-preview:hover {
    border-color: var(--o-accent);
    background: var(--o-accent-soft);
}
.o-mail-preview-dialog {
    width: min(720px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
}
.o-mail-preview-frame {
    flex: 1 1 auto;
    width: 100%;
    height: min(72vh, 760px);
    border: 0;
    background: #f2f5f4;
}

/* --- who wrote and which way an e-mail went (js/chatter.js renderEntry) --- */

.o-chatter-body {
    flex: 1 1 auto;
}
.o-chatter-meta {
    flex-wrap: wrap;
    gap: 0 0.5rem;
}
.o-chatter-address {
    min-width: 0;
    color: var(--o-ink-muted);
    font-size: 0.75rem;
    overflow-wrap: anywhere;
}
.o-chatter-time {
    margin-left: auto;
}
.o-chatter-avatar {
    position: relative;
}
.o-chatter-badge {
    position: absolute;
    right: -4px;
    bottom: -4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--o-surface);
    color: var(--o-surface);
    font-size: 8px;
    line-height: 1;
}
.o-chatter-badge-in {
    background: var(--o-accent);
}
.o-chatter-badge-out {
    background: var(--o-ink-muted);
}
.o-chatter-badge-failed {
    background: var(--o-danger);
}
/* a message from outside stands out from what we sent ourselves */
.o-chatter-mail-in {
    border-left: 3px solid var(--o-accent);
    background: var(--o-accent-soft);
}
.o-chatter-mail-out {
    border-left: 3px solid var(--o-line);
}
.o-chatter-mail-failed {
    border-left: 3px solid var(--o-danger);
    background: var(--o-danger-soft-bg);
}

/* an e-mail needs the panel's whole width: the avatar and the name are a
   line above the card, not a column beside it. display: contents lifts the
   body's two children into the entry's own flex row, where the card wraps
   under them. */
.o-chatter-entry-mail {
    flex-wrap: wrap;
    align-items: center;
    row-gap: 0.35rem;
}
.o-chatter-entry-mail .o-chatter-body {
    display: contents;
}
.o-chatter-entry-mail .o-chatter-meta {
    flex: 1 1 0;
    min-width: 0;
}
.o-chatter-entry-mail .o-chatter-mail {
    flex: 0 0 100%;
    min-width: 0;
    margin-top: 0;
}
/* a card's own border sets it apart: no rule above it, or under it */
.o-chatter-entry-mail,
.o-chatter-entry-mail + .o-chatter-entry {
    border-top: 0;
}

/* The preset chips of a list (list.html, base_views.preset_searches): the
   places the everyday work is, one click each, beside the title. */
.o-cp-presets {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.25rem;
}

.o-cp-preset {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--tblr-border-color, #dadfe5);
    border-radius: 999px;
    font-size: 0.8125rem;
    line-height: 1.25;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.o-cp-preset:hover {
    background: var(--tblr-bg-surface-secondary, #f1f3f5);
    color: inherit;
    text-decoration: none;
}


/* --- Intermet: the site's touches on the panel ---

   The pieces the tokens above cannot reach: the primary button's red glow
   (the site's .btn--primary), the eyebrow tick in front of section headings
   of the settings page, and the display face on the few titles a page has. */

.btn-primary {
    box-shadow: 0 8px 20px -10px rgba(248, 15, 5, 0.65);
}
.btn-primary:hover,
.btn-primary:focus-visible {
    box-shadow: 0 10px 24px -10px rgba(248, 15, 5, 0.75);
}

/* the titles a page has, in the site's headings face: the list and board
   name in the control panel, the record's title on its sheet, the
   settings sections, the login card */
.o-cp-title,
.o-form-title,
.o-settings-title,
.container-tight .card-title {
    font-family: var(--o-font-display);
    letter-spacing: -0.01em;
}

/* the login card carries the site's logo above its title: the graphite
   strip with the red mark, as on every other page of the panel */
.container-tight .card {
    overflow: hidden;
}
.container-tight .card::before {
    content: "INTERMET";
    display: flex;
    align-items: center;
    gap: 0.6rem;
    height: 64px;
    padding: 0 32px 0 72px;
    background-color: #1f1f1f;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Crect width='28' height='28' rx='7' fill='%23f80f05'/%3E%3Cpath fill='%23fff' d='M9 9h10l2 4H7z'/%3E%3Cpath fill='%23fff' d='M6 15h16l1.5 4h-19z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 28px 28px;
    background-position: 32px center;
    color: #ffffff;
    font-family: var(--o-font-display);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}