:root {
    --my-red: #bf4342;
    --my-beige: #F2E9DE;
    --my-light-beige: #F9F5F1;
    --my-light-braun: #BAA59C;
    --my-braun: #a78a7f;
    --my-mbraun: #8D7068;   /* white text meets WCAG AA 4.5:1 (secondary buttons) */
    --my-dbraun: #735751;
    --my-dark-red: #8c1c13;
    --bs-link-color-rgb: 10, 88, 202;        /* #0a58ca */
    --bs-link-hover-color-rgb: 8, 66, 152;   /* #084298 */
    --bs-code-color: #b81b66;
    --bs-warning: #f59e0b;                   /* Bootstrap #ffc107 is too pale on white; hue shifted to orange, not darkened (that reads brown) */
    --bs-warning-rgb: 245, 158, 11;
}

.color-white {
    color: white;
}

.color-red {
    color: var(--my-red);
}

.color-beige {
    color: var(--my-beige);
}

.color-braun {
    color: var(--my-braun);
}

.color-dbraun {
    color: var(--my-dbraun);
}

.color-dark-red {
    color: var(--my-dark-red);
}

.bg-white {
    background-color: white;
}

body {
    padding-top: 76px;
    padding-bottom: 57px;
    background-color: #FCFBFA;
    scrollbar-color: #666 #FCFBFA;
    scrollbar-width: thin;
    transition: background-color 0.5s ease;
}

html {
    scroll-padding-top: 90px;
}

/* Flash alerts stay visible when a page is opened at an anchor below them (e.g.
   /profile#branding after a branding form was submitted) or when the page is scrolled.
   The padding keeps the alert off the navbar edge and is painted with the page
   background, so the content scrolls behind the whole strip instead of through it. */
.flash-messages {
    position: sticky;
    top: 76px;                  /* navbar height, same value as the body padding-top above */
    z-index: 1020;              /* above the page content, below the navbar (1030) */
    background-color: #FCFBFA;
    padding: .75rem 0;
}

.flash-messages .alert {
    margin-bottom: .5rem;
    box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .08);
}

.flash-messages .alert:last-child {
    margin-bottom: 0;
}

::-webkit-scrollbar {
    width: 5px;
    background-color: #FCFBFA;
}

::-webkit-scrollbar-thumb {
    background-color: #666;
}

hr {
    margin-top: 2rem;
    margin-bottom: 2rem;
    border: 0;
    border-top: 2px solid var(--my-dbraun);
}

a.active {
    font-weight: 700;
    color: var(--my-red) !important;
}

.dropdown-item.active, .dropdown-item:active {
    background-color: var(--my-dbraun);
    color: white !important;
}

ul.romb-list {
    list-style: none;
}

.romb-list li {
    margin-top: 6px;
}

.romb-list li::before {
    content: "\25C6";
    color: var(--my-dbraun);
    font-weight: bold;
    display: inline-block;
    width: 1.5em;
    margin-left: -1.5em;
}

.card-header {
    border-bottom: none;
    background-color: var(--my-beige);
}

.card-home {
    border-color: var(--my-beige);
}

.card-img-top {
    height: auto;
    aspect-ratio: 512 / 210;
    object-fit: cover;
}

.btn-outline-primary {
    --bs-btn-bg: white;
}

.btn-secondary {
    --bs-btn-color: white;
    --bs-btn-border-color: var(--my-mbraun);
    --bs-btn-hover-bg: var(--my-dbraun);
    --bs-btn-hover-border-color: var(--my-dbraun);
    --bs-btn-bg: var(--my-mbraun);
    --bs-btn-active-bg: var(--my-mbraun);
    --bs-btn-active-border-color: var(--my-mbraun);
}

.btn-outline-secondary {
    --bs-btn-color: var(--my-dbraun);
    --bs-btn-border-color: var(--my-braun);
    --bs-btn-hover-bg: var(--my-braun);
    --bs-btn-hover-border-color: var(--my-braun);
    --bs-btn-bg: white;
    --bs-btn-active-bg: var(--my-braun);
    --bs-btn-active-border-color: var(--my-braun);
}

.btn-outline-success {
    --bs-btn-bg: white;
}

/* .btn-warning / .btn-outline-warning carry hardcoded #ffc107 shades in bootstrap.min.css,
   so --bs-warning alone does not reach them; hover/active are tinted 15% / 20% like Bootstrap does for dark-text buttons. */
.btn-warning {
    --bs-btn-bg: var(--bs-warning);
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-bg: #f7ad30;
    --bs-btn-hover-border-color: #f6a823;
    --bs-btn-active-bg: #f7b13c;
    --bs-btn-active-border-color: #f6a823;
    --bs-btn-focus-shadow-rgb: 208, 134, 9;
    --bs-btn-disabled-bg: var(--bs-warning);
    --bs-btn-disabled-border-color: var(--bs-warning);
}

.btn-outline-warning {
    --bs-btn-color: var(--bs-warning);
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-bg: var(--bs-warning);
    --bs-btn-hover-border-color: var(--bs-warning);
    --bs-btn-bg: white;
    --bs-btn-active-bg: var(--bs-warning);
    --bs-btn-active-border-color: var(--bs-warning);
    --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb);
    --bs-btn-disabled-color: var(--bs-warning);
}

.btn-danger {
    --bs-btn-color: white;
    --bs-btn-border-color: var(--my-red);
    --bs-btn-hover-bg: var(--my-dark-red);
    --bs-btn-hover-border-color: var(--my-dark-red);
    --bs-btn-bg: var(--my-red);
    --bs-btn-active-bg: var(--my-red);
    --bs-btn-active-border-color: var(--my-red);
}
.bg-danger {
    background-color: var(--my-red) !important;
}

.btn-outline-danger {
    --bs-btn-color: var(--my-red);
    --bs-btn-border-color: var(--my-red);
    --bs-btn-hover-bg: var(--my-red);
    --bs-btn-hover-border-color: var(--my-red);
    --bs-btn-bg: white;
    --bs-btn-active-bg: var(--my-red);
    --bs-btn-active-border-color: var(--my-red);
}

.my-large-button {
    --bs-btn-bg: var(--my-mbraun);
    --bs-btn-border-color: var(--my-mbraun);
    --bs-btn-hover-bg: var(--my-dbraun);
    --bs-btn-hover-border-color: var(--my-dbraun);
}

.btn-braun {
    --bs-btn-color: var(--my-dbraun);
    --bs-btn-border-color: var(--my-dbraun);
    --bs-btn-hover-bg: var(--my-dbraun);
    --bs-btn-hover-border-color: var(--my-dbraun);
    --bs-btn-bg: white;
}

.accordion-button:not(.collapsed) {
    font-weight: 700;
    color: var(--my-dbraun);
    background-color: white;
}

.accordion-button.cards {
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}

.accordion-item {
    border-color: var(--my-beige);
    background-color: var(--my-light-beige);
}

.accordion-item.cards {
    border-color: #FCFBFA;
    background-color: #FCFBFA;
}

.accordion-button.cards {
    background-color: #FCFBFA;
    font-size: 2rem;
    color: var(--bs-heading-color);
}

.accordion-button a.small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
}

.border-bottom-navbar-start {
    border: 0;
    border-bottom: 2px solid #BBBBBB;
    box-shadow: 0px 4px 8px #BBBBBB;
}

@media (max-width: 991.98px) {
    .navbar.fixed-top .navbar-collapse {
        max-height: calc(100vh - 110px);
        max-height: calc(100dvh - 110px);
        overflow-y: auto;
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Mobile menu polish: full-width rows with comfortable tap targets */
    #navbarSupportedContent .nav-link {
        display: block;
        margin-right: 0;
        padding: .6rem .75rem;
        border-radius: .5rem;
        transition: background-color .15s ease;
    }

    /* Fixed-width icon slot so every label starts on the same vertical line */
    #navbarSupportedContent .nav-link .bi {
        display: inline-block;
        width: 1.6rem;
        text-align: center;
        margin-right: .35rem;
    }

    /* Brand-colored hover / active feedback */
    #navbarSupportedContent .nav-link:hover {
        background-color: var(--my-light-beige);
    }

    #navbarSupportedContent a.active {
        background-color: var(--my-beige);
    }

    /* Top-border divider above each mobile nav group: the admin/profile column itself,
       the profile block, and the billing-off separator between admin items and public links */
    #navbarSupportedContent > .navbar-nav + .navbar-nav,
    #navbarSupportedContent .profile-group,
    #navbarSupportedContent .nav-section-divider {
        margin-top: .5rem;
        padding-top: .5rem;
        border-top: 1px solid var(--my-light-braun);
    }

    /* Don't double the divider when the auth/profile group is the column's first item
       (e.g. both YouTube and FAQ disabled) — the column's own top border already separates it */
    #navbarSupportedContent > .navbar-nav + .navbar-nav > .nav-section-divider:first-child,
    #navbarSupportedContent > .navbar-nav + .navbar-nav > .profile-group:first-child {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }

    /* Set the accounting group off with dividers above and below */
    #navbarSupportedContent .accounting-group {
        margin: .5rem 0;
        padding: .5rem 0;
        border-top: 1px solid var(--my-light-braun);
        border-bottom: 1px solid var(--my-light-braun);
    }
}

/* ============================ site footer ===========================
   The compact fixed footer shown on app / auth / utility pages
   (templates/base/footer-small.html). Same family as the big marketing footer's
   bottom bar (static/css/footer-big.css → .home-footer__bar-inner) — slate slab,
   centered container max-widths — but a touch lighter with brighter text, since
   this thin always-on bar needs the copy to read clearly. Lives here in style.css
   (always loaded) because this footer ships on every page. Unlike the big footer's
   bar it never stacks: a fixed bar must stay a single short row so it fits the
   body's 57px bottom reserve. */
.site-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;                 /* same layer the old Bootstrap fixed-bottom used; cookie bar sits at 1025 */
    background: radial-gradient(120% 380% at 0% 0%, #323d54, #242d3d 60%);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: #d2d8e2;
    font-size: 0.85rem;
}
/* mirror Bootstrap 5.3's responsive .container max-widths so the bar lines up
   with the navbar / content (same breakpoints as .home-footer__wrap) */
.site-footer__inner {
    width: 100%;
    margin-inline: auto;
    padding: 9px 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
@media (min-width: 576px)  { .site-footer__inner { max-width: 540px; } }
@media (min-width: 768px)  { .site-footer__inner { max-width: 720px; } }
@media (min-width: 992px)  { .site-footer__inner { max-width: 960px; } }
@media (min-width: 1200px) { .site-footer__inner { max-width: 1140px; } }
@media (min-width: 1400px) { .site-footer__inner { max-width: 1320px; } }
.site-footer__copy {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    white-space: nowrap;
}
.site-footer__copy > :not(a) { flex: none; }   /* © icon + year keep their size and never get clipped */
.site-footer__copy a {
    flex: 0 1 auto;          /* only the host truncates when space is tight */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit;
    text-decoration: none;
}
.site-footer__copy a:hover { color: #ffffff; }
.site-footer__controls {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 2.5vw, 1rem);
    flex: none;
}
/* legal-info dropup trigger on the dark bar */
.site-footer__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: 0;
    padding: 0.25rem 0.3rem;
    color: #d2d8e2;
    font: inherit;
    font-size: 0.85rem;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}
.site-footer__btn:hover { color: #ffffff; }

/* Cookie notice — a slim, brand-matched bar floating just above the fixed footer,
   instead of a loud Bootstrap "warning" alert wedged between the navbar and the page
   content. Shared across every page that extends base.html. */
.cookie-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 65px;              /* clears the ~57px fixed-bottom footer with a small gap */
    z-index: 1025;             /* under the footer dropup menus (1030) */
    display: flex;
    justify-content: center;
    padding: 0 .75rem;
    pointer-events: none;      /* let clicks pass through the empty side gutters */
}

.cookie-bar__inner {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem .85rem;
    font-size: .9rem;
    color: black;
    background-color: white;
    border: 1px solid var(--my-beige);
    border-radius: 12px;
    box-shadow: 0 10px 30px -12px rgba(115, 87, 81, .5);
    animation: cookie-bar-in .35s ease both;
}

.cookie-bar__icon {
    flex-shrink: 0;
    font-size: 1.15rem;
    color: var(--my-mbraun);
}

.cookie-bar__text {
    flex-grow: 1;
}

.cookie-bar__link {
    color: var(--my-dark-red);
    text-underline-offset: 2px;
}

.cookie-bar__ok {
    flex-shrink: 0;
    color: #fff;
    background-color: var(--my-mbraun);
    border-color: var(--my-mbraun);
}

.cookie-bar__ok:hover,
.cookie-bar__ok:focus-visible {
    color: #fff;
    background-color: var(--my-dbraun);
    border-color: var(--my-dbraun);
}

@keyframes cookie-bar-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 575.98px) {
    .cookie-bar__inner {
        gap: .5rem;
        padding: .5rem .65rem;
        font-size: .82rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cookie-bar__inner {
        animation: none;
    }
}

.form-check-input {
    border-color: var(--my-braun);
}

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

.table-light {
    --bs-table-bg: var(--my-beige);
    --bs-table-border-color: var(--my-beige);
}

.table {
    border-bottom-color: var(--my-beige);
    --bs-table-hover-bg: var(--my-light-beige) !important;
}

.bi-check-lg {
    color: green;
}

.bi-check-circle-fill.green {
    color: green;
}

.bi-check-circle-fill.orange {
    color: orange;
}

.bi-x-lg {
    color: var(--my-red);
}

.br-groove {
    border-right: solid 2px;
}

.tabulator > :not(caption) > * > * {
    padding: 0;
}

.tabulator.table-bordered {
    border: none !important;
}

.tabulator.table-bordered .tabulator-header .tabulator-col, .tabulator.table-bordered .tabulator-tableholder .tabulator-table .tabulator-row .tabulator-cell {
    border: none !important;
}

.tabulator.table:not(.thead-light) .tabulator-header, .tabulator.table:not(.thead-light) .tabulator-header .tabulator-col {
    border: none !important;
    background-color: var(--my-beige) !important;
}

.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input {
    border: 1px solid var(--my-light-braun) !important;
}

.tabulator .tabulator-footer {
    border: none !important;
    background-color: var(--my-beige) !important;
}

.tabulator .tabulator-calcs-bottom .tabulator-cell {
    border: none !important;
    background-color: var(--my-beige) !important;
    text-align: center;
}

.tabulator-calcs-holder {
    border: none !important;
}

/* Tabulator left-aligns the bottomCalc footer (.tabulator-calcs-holder), while
   the header/body inherit Bootstrap's .text-center. When the columns don't fill
   the table width (e.g. the flexible column is hidden via the column chooser),
   that left-aligned footer no longer sits under the centred body. Centre the
   footer too, so header, body and footer stay aligned. The calcs holder is full
   width with Tabulator's grey background, which shows beside the centred calc
   row; paint it (and its row) the footer's beige so the sides blend in. */
.tabulator.table.text-center .tabulator-footer .tabulator-calcs-holder,
.tabulator.table.text-center .tabulator-footer .tabulator-calcs-holder .tabulator-row {
    background: var(--my-beige) !important;
}

.tabulator.table.text-center .tabulator-footer .tabulator-calcs-holder {
    text-align: center;
}

.tabulator-col-title {
    text-align: center !important;
}

.tabulator .tabulator-group {
    text-align: left;
}

/* Column-chooser gear: a bare clickable icon, no button chrome. */
.tabulator-col-gear,
.tabulator-col-reset {
    cursor: pointer;
    color: var(--bs-secondary);
    font-size: 1.15em;
    line-height: 1;
}

.tabulator-col-gear:hover,
.tabulator-col-reset:hover {
    color: var(--my-red);
}

.menu-item {
    display: inline-block;
    margin-right: 15px;
    position: relative;
}

.menu-item-icon:hover ~ .menu-title {
    opacity: 1;
    transform: translateX(0);
    pointer-events: default;
}

.menu-title {
    cursor: default;
    position: absolute;
    top: 100%;
    right: -50%;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.4s ease;
    pointer-events: none;
}

.page-item {
    --bs-pagination-color: var(--bs-body-color);
    --bs-pagination-active-bg: var(--my-braun);
    --bs-pagination-active-border-color: var(--my-braun);
}

.table-heading {
    background-color: var(--my-beige) !important;
    font-weight: bold;
    text-align: center;
}

.table-subheading {
    background-color: var(--my-beige) !important;
    font-weight: bold;
    text-align: center;
}

.changed-app-settings {
    border-color: #dc3545 !important;
}

.tooltip-left .tooltip-inner {
    text-align: left;
    white-space: normal;
}

/* Project type badges on cards */
.project-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: .2rem;
    row-gap: .35rem;
    padding-top: .25rem;
}

.project-badges .badge {
    display: inline-flex;
    align-items: center;
    gap: .3em;
    margin-right: .35rem;
    padding: .35em .7em;
    line-height: 1;
    font-weight: 600;
    letter-spacing: .02em;
    vertical-align: middle;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.project-badges .badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
    filter: saturate(1.15) brightness(1.05);
}

.project-badges .badge i {
    font-size: 1.4em;
    line-height: 1;
    opacity: .9;
}

/* News image carousel — emitted automatically for posts with more than 2 images. */
.news-carousel {
    margin-bottom: 1rem;
}

.news-carousel .carousel-item {
    transition: transform .6s ease-in-out;
}

/* Fixed height + contain keeps the carousel from jumping between slides of
   different aspect ratios; the beige backdrop fills the letterboxed area. */
.news-carousel .carousel-item img,
.news-carousel .carousel-item video {
    display: block;
    width: 100%;
    height: 55vh;
    max-height: 560px;
    object-fit: contain;
    background-color: var(--my-light-beige);
    border-radius: .375rem;
}

/* The default prev/next glyphs are white and vanish on light photos —
   give them a dark disc so they stay legible over any slide. */
.news-carousel .carousel-control-prev-icon,
.news-carousel .carousel-control-next-icon {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 50%;
    background-size: 1rem 1rem;
}

/* Default indicator dots are white too; tint them with the brand colour. */
.news-carousel .carousel-indicators [data-bs-target] {
    background-color: var(--my-dbraun);
}

/* "Our clients" logo wall: a responsive grid of uniform, equal-height cells so
   logos of different aspect ratios read as a tidy row. Every logo renders at full
   colour; linked logos (portfolio or the company's own site) lift on hover. */
.client-logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.client-logo-cell {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.client-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    padding: 1rem;
    border: 1px solid var(--my-beige);
    border-radius: .5rem;
    background-color: #fff;
    transition: box-shadow .15s ease, transform .15s ease;
}

.client-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

a.client-logo:hover {
    transform: translateY(-2px);
    box-shadow: 0 .25rem .75rem rgba(115, 87, 81, .25);  /* --my-dbraun tint */
}

/* Admin "All client logos" overview only: a blue frame marks logos that are
   published on the public clients page (the company opted in). */
.client-logo--published {
    border: 2px solid #0d6efd;
}

.client-logo-owner {
    font-size: .8rem;
    line-height: 1.3;
    text-align: center;
    overflow-wrap: anywhere;
}

.client-logo-owner__name {
    display: block;
    font-weight: 600;
}