html,
body {
    height: 100%;
}

::selection {
    background: var(--emphasis-red); /* highlight color */
    color: white; /* text color while selected */
}

.min-width-0 {
    min-width: 0 !important;
}

.bi {
    display: inline-block;
    width: 1rem;
    height: 1rem;
}

/*
 * Sidebar
 */

@media (max-width: 767.98px) {
    .sidebar {
        position: absolute;
        width: 0;
        height: 0;
        overflow: visible;
        padding: 0 !important;
    }
}

@media (min-width: 768px) {
    .sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
    }

    .sidebar .offcanvas-lg {
        position: -webkit-sticky;
        position: sticky;
        top: 48px;
    }

    .navbar-search {
        display: block;
    }
}

.sidebar .nav-link {
    font-size: .875rem;
    font-weight: 500;
}


.sidebar-heading {
    font-size: .75rem;
}

/*
 * Navbar
 */

.navbar-brand {
    padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: rgba(0, 0, 0, .25);
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}

.navbar .form-control {
    padding: .75rem 1rem;
}


.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

@media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }
}

.index-divider {
    width: 100%;
    height: 3rem;
    background-color: rgba(0, 0, 0, .1);
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.b-example-vr {
    flex-shrink: 0;
    width: 1.5rem;
    height: 100vh;
}

.bi {
    vertical-align: -.125em;
    fill: currentColor;
}

.nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;
}

.nav-scroller .nav {
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.btn-bd-primary {
    --bd-violet-bg: #712cf9;
    --bd-violet-rgb: 112.520718, 44.062154, 249.437846;

    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bd-violet-bg);
    --bs-btn-border-color: var(--bd-violet-bg);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: #6528e0;
    --bs-btn-hover-border-color: #6528e0;
    --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
    --bs-btn-active-color: var(--bs-btn-hover-color);
    --bs-btn-active-bg: #5a23c8;
    --bs-btn-active-border-color: #5a23c8;
}

.bd-mode-toggle {
    z-index: 1500;
}

.bd-mode-toggle .dropdown-menu .active .bi {
    display: block !important;
}

.table td, .table th {
    /*text-align: center;*/
    vertical-align: middle;
}

.dt-scroll-body {
    min-height: 200px;
}

.form-max-width {
    max-width: 330px;
}

@media (max-width: 768px) {
    /*.dt-layout-table {*/
    /*    height: calc(100vh - 305px);*/
    /*}*/
    .dt-scroll-body {
        max-height: calc(100vh - 350px);
    }
}


@media (min-width: 768px) {
    /*.dt-layout-table {*/
    /*    height: calc(100vh - 230px);*/
    /*}*/
    .dt-scroll-body {
        max-height: calc(100vh - 280px);
    }
}


/*.dataTable {*/
/*    !*height: 100%;*!*/
/*    overflow-y: auto;*/

/*}*/


.is-hidden {
    display: none !important;
}


.card-title {
    margin-bottom: 0;
}

.sidebar-line {
    width: 3px;
}

.invalid-feedback {
    display: block;
}


.back-arrow {
    cursor: pointer;
    display: inline-block;
    transition: transform 0.3s ease, color 0.3s ease;
    color: black;
}

.back-arrow {
    transition: transform 0.2s ease, color 0.2s ease;
}

.back-arrow i {
    color: var(--bs-body-color);
}

.back-arrow:hover {
    transform: scale(1.3);
    color: var(--bs-link-hover-color);
}

.back-arrow:hover i {
    color: var(--bs-link-hover-color);
}

p {
    margin-bottom: 0.5rem;
}

.priceListLabel {
    width: 229px;
}

.priceListValue {
    width: 130px;
}

.quill-content {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    background-color: #f9f9f9;
    margin: 10px 0;
    font-family: 'Arial', sans-serif;
    font-size: 14px;
}

.custom-input input {
    border: none;
    border-bottom: 2px dashed #ccc;
    padding: 5px 0;
    width: 100%;
}

.custom-input strong {
    font-weight: bold;
}

.input-strong input {
    font-weight: bold;
}

.order-component-summary {
    /*min-width: 1100px;*/

}

.order-component-summary-wrapper {
    position: relative;
}

.scroll-prompt {
    display: none;
}

@media (max-width: 941px) {
    .scroll-prompt {
        display: block;
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        font-size: 14px;
        color: #888;
        pointer-events: none;
        animation: fade-in-out 2s infinite;
    }

    @keyframes fade-in-out {
        0%, 100% {
            opacity: 0.5;
        }
        50% {
            opacity: 1;
        }
    }

}

.euro-input::after {
    content: "€";
    position: absolute;
    right: 10px;
}

.video-container {
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-overlay {
    z-index: 2;
}

/* Primary CTA button — Awerka brand orange with black text for WCAG contrast */
.btn-awerka {
    background-color: #FE7F2D;
    background-image: linear-gradient(180deg, #ff9b52 0%, #FE7F2D 55%, #ef6f1b 100%);
    border: 1px solid #e56a1a;
    color: #000;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45),
                0 4px 10px rgba(254, 127, 45, 0.35),
                0 2px 3px rgba(0, 0, 0, 0.18);
    transition: transform 0.08s ease, box-shadow 0.15s ease, background-image 0.15s ease;
}

.btn-awerka:hover,
.btn-awerka:focus {
    background-color: #fb8636;
    background-image: linear-gradient(180deg, #ffa766 0%, #fb8636 55%, #f2741f 100%);
    border-color: #d96716;
    color: #000;
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
                0 7px 18px rgba(254, 127, 45, 0.45),
                0 3px 5px rgba(0, 0, 0, 0.22);
}

.btn-awerka:active {
    background-color: #ef6f1b;
    background-image: linear-gradient(180deg, #ef6f1b 0%, #FE7F2D 100%);
    border-color: #cf6014;
    color: #000;
    transform: translateY(1px);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.25),
                0 2px 6px rgba(254, 127, 45, 0.3);
}

.bg-awerka {
    background-color: #FE7F2D !important;
}

.text-awerka {
    color: #FE7F2D !important;
}

.border-awerka {
    border: 2px solid #FE7F2D !important;
}

.hand-underline {
    position: relative;
    display: inline-block;
    isolation: isolate;
}

.hand-underline::after {
    content: '';
    position: absolute;
    left: -3%;
    bottom: 0.05em;
    width: 110%;
    height: 0.18em;
    z-index: -1;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M3 7 C40 6, 70 5, 120 4 S170 3, 197 3' stroke='%23FE7F2D' stroke-width='8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
    background-size: 100% 100%;
    transform: rotate(-2deg);
}

.user-profile-link-container {
    /*background-color: var(--bs-gray-900);*/
    text-overflow: clip;
    /*overflow: hidden;*/
}

.shadowed-sidebar {
    background: radial-gradient(circle, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.6) 100%, transparent 100%);
    /*box-shadow: 5px 0 15px rgba(0, 0, 0, 0.5);*/
    /*height: 100vh;*/
    /*padding: 1rem;*/
    /*width: 250px;*/
    color: white;
}

.shadowed-sidebar a {
    color: white;
    text-decoration: none;
    transition: color 0.2s, text-shadow 0.2s;
}

.shadowed-sidebar a:hover {
    color: var(--sidebar-hover-color) !important;
    text-shadow: 0 0 8px rgba(128, 143, 135, 0.52);
}

.shadowed-sidebar a:active {
    color: var(--battleship-grey) !important;
    text-shadow: 0 0 20px var(--battleship-grey), 0 0 40px var(--battleship-grey);
    transition: text-shadow 0.1s ease-out;
}

.shadowed-sidebar a.active {
    color: var(--emphasis-red) !important;
}

.sidebar li a:active {
    color: var(--battleship-grey) !important;
}


.card img {
    /*width: 100%;*/
    height: auto;
    display: block;
}

.image-wrapper {
    position: relative;
    /*width: 100px; !* Adjust size as needed *!*/
    /*height: 100px; !* Keep it square *!*/
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px; /* Rounded corners */
    border: 3px solid rgba(0, 0, 0, 0.1); /* Subtle border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Modern shadow */
    background-color: white; /* Optional background */
}

/*.image-wrapper img {*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    object-fit: cover; !* Ensures the image fills the wrapper nicely *!*/
/*    border-radius: 10px; !* Ensures the image follows the wrapper's rounded corners *!*/
/*}*/


.category-hover {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
    z-index: 10;
}

.image-wrapper:hover .category-hover {
    opacity: 1;
}

.btn-toggle-nav {
    padding-left: 0;
    margin-left: 2rem;
    list-style: none;
}

.btn-toggle-nav li {
    position: relative;
    padding-left: 1.5rem;
    border-left: 1px solid var(--bs-border-color);
}

/* Horizontal branch */
.btn-toggle-nav li::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 0.65em;
    width: 1rem;
    border-top: 1px solid var(--bs-border-color);
}

/* Last item corner */
.btn-toggle-nav li:last-child {
    border-left-color: transparent;
}

.btn-toggle-nav li:last-child::after {
    content: "";
    position: absolute;
    left: -1px;
    top: 0;
    height: 0.65em;
    border-left: 1px solid var(--bs-border-color);
}

.sidebar-line {
    position: relative;
    width: 4px; /* Adjust width */
    height: 100%;
    background: linear-gradient(transparent, var(--battleship-grey) 30%, var(--battleship-grey) 70%, transparent);
    overflow: hidden;
}

.sidebar-line::before {
    content: "";
    position: absolute;
    left: 50%;
    width: 8px;
    height: 100%;
    background: linear-gradient(45deg, yellow, transparent, yellow);
    filter: drop-shadow(0 0 8px yellow);
    transform: translateX(-50%) translateY(-100%);
    opacity: 0;
}

.sidebar-line:hover::before,
.sidebar-line:active::before {
    animation: lightning 2s ease-in-out infinite;
    opacity: 1;
}

@keyframes lightning {
    0% {
        transform: translateX(-50%) translateY(-100%);
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) translateY(100%);
        opacity: 0;
    }
}

.status-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: bold;
    text-align: center;
}

.status-created {
    background-color: var(--status-created-bg);
    color: var(--status-created-color);
}

.status-planning {
    background-color: var(--status-planning-bg);
    color: var(--status-planning-color);
}

.status-in-progress {
    background-color: var(--status-in-progress-bg);
    color: var(--status-in-progress-color);
}

.status-critical {
    background-color: var(--status-critical-bg);
    color: var(--status-critical-color);
}

.status-done {
    background-color: var(--status-done-bg);
    color: var(--status-done-color);
}

/* Reuse base .status-badge styles from Task */
.status-placed {
    background-color: var(--status-planning-bg);
    color: var(--status-planning-color);
}

.status-partially-delivered {
    background-color: var(--status-in-progress-bg);
    color: var(--status-in-progress-color);
}

.status-fully-delivered {
    background-color: var(--status-done-bg);
    color: var(--status-done-color);
}

.status-fully-delivered-to-customer {
    background-color: var(--status-critical-bg);
    color: var(--status-critical-color);
}

.project-status-badge {
    display: inline-block;
    max-width: 100%; /* don’t overflow the container */
    white-space: normal; /* allow wrapping */
    word-break: break-word; /* break very long words */
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: bold;
    text-align: center;
}


.status-badge-fixed-width {
    min-width: 150px;
    max-width: 150px;
}

.project-status-default {
    background-color: var(--bs-gray);
    color: var(--status-planning-color);
}

.project-status-archived {
    background-color: var(--bs-gray);
    color: white;
}

.project-status-new {
    background-color: var(--status-created-bg);
    color: var(--status-created-color);
}

.project-status-in-progress {
    background-color: var(--status-in-progress-bg);
    color: var(--status-in-progress-color);
}

.project-status-done {
    background-color: var(--status-done-bg);
    color: var(--status-done-color);
}

.project-status-on-hold {
    background-color: #fff3cd;
    color: #997404;
}


.small-scrollable-card-body {
    max-height: 50vh;
    overflow: scroll;
}

.delete-column {
    opacity: 0;
    max-width: 0;
    padding: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-width 0.3s ease, padding 0.3s ease;
}

.delete-column.show {
    opacity: 1;
    max-width: 100px;
    padding: 0.5rem;
}

.heading-text {

    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0.1em;
    padding-bottom: 0.1em;
}

/* Old card-header blue style removed - now using gradient in card section */

/* Task widget */
.task-checkbox {
    cursor: pointer;
    color: var(--bs-secondary);
    transition: color 0.15s ease-in-out;
}
.task-checkbox:hover .checkbox-empty {
    display: none !important;
}
.task-checkbox:hover .checkbox-hover {
    display: inline-block !important;
}
.task-completed {
    opacity: 0.5;
    transition: opacity 0.3s ease, max-height 0.4s ease 0.8s, margin 0.4s ease 0.8s, padding 0.4s ease 0.8s;
    max-height: 200px;
    overflow: hidden;
}
.task-completed a {
    text-decoration: line-through;
}
.task-completed.task-slide-out {
    overflow: hidden;
    opacity: 0;
    max-height: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.confirm-actions {
    display: flex;
    gap: 5px;
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 99;
}
#task-sortable-list .task-drag-handle:hover {
    color: var(--bs-primary) !important;
}
#task-sortable-list .task-drag-handle:active {
    cursor: grabbing !important;
}
#task-sortable-list .sortable-ghost {
    opacity: 0.4;
}

/* Clean DataTable header styling */
table.dataTable thead th {
    /* German labels are long ("Netto Einkaufspreis"). Kept on one line they set
       the column's minimum width, so empty columns with wordy headers took
       space away from the column that carries the content. Wrapping the label
       costs one header row and gives every data row its width back. */
    vertical-align: bottom;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
    text-transform: none;
    letter-spacing: normal;
    border-bottom: 1px solid var(--bs-border-color) !important;
    background: transparent !important;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

/* Subtle sorting indicator */
table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order,
table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order,
table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order,
table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order {
    opacity: 0.5;
}

table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order,
table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order {
    opacity: 1;
}

table.dataTable tr {
    cursor: pointer;
}

/* Clamp a free-text cell to a couple of lines. Without it a single imported
   article name — often a full tender position — grows one row to 20 lines and
   the table loses the rhythm a table is read by. Rendered through renderText()
   in utils.js, which keeps the full value for search, sort and the tooltip. */
.cell-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--clamp-lines, 2);
    line-clamp: var(--clamp-lines, 2);
    overflow: hidden;
    max-width: var(--clamp-width, 28rem);
    /* NOT word-break: that makes the min-content width one character wide, and
       an auto-layout table then squeezes the column down to nothing. This one
       breaks a long word only when it has to and leaves sizing alone. */
    overflow-wrap: break-word;
}

/* Clamped cells are two lines at most, so a checkbox or an action menu reads as
   placed rather than slipped when it sits on the row's centre line. */
table.dataTable tbody td {
    vertical-align: middle;
}

/* Reusable row de-emphasis for any DataTable: fade settled/closed rows so focus
   stays on what still needs attention. Apply via initializeDataTable's
   `rowClass` option, e.g. rowClass: (d) => d.payment_status === 'paid'
   ? 'dt-row-muted' : ''. Hover restores full readability. */
table.dataTable tbody tr.dt-row-muted > td {
    opacity: 0.45;
    transition: opacity 0.15s ease-in-out;
}

table.dataTable tbody tr.dt-row-muted:hover > td {
    opacity: 1;
}

tr.filters th {
    background-color: #f8f9fa;
    padding: 0.25rem 0.375rem;
}

tr.filters .select2-container {
    font-size: 0.8125rem;
}

tr.filters .select2-container--default .select2-selection--multiple {
    min-height: 28px;
    padding: 1px 4px;
}

tr.filters .select2-container--default .select2-selection--multiple .select2-selection__choice {
    font-size: 0.75rem;
    padding: 1px 6px;
    margin: 1px 2px;
}

tr.filters .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0 4px;
}

/* Fix Select2 background in filter rows */
tr.filters .select2-selection {
    background-color: #f8f9fa !important;
    border-color: #dee2e6;
}

/* Dark mode filter bar styles */
[data-bs-theme=dark] tr.filters th {
    background-color: var(--bs-tertiary-bg);
}

[data-bs-theme=dark] tr.filters .select2-selection {
    background-color: var(--bs-tertiary-bg) !important;
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-bs-theme=dark] tr.filters .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

/* Column header filter dropdown */
.dt-scroll-head {
    overflow: hidden !important;
}

.dt-header-filter {
    vertical-align: baseline;
}

.dt-header-filter-btn {
    line-height: 1;
    vertical-align: baseline;
    opacity: 0.5;
    transition: opacity 0.15s;
}

.dt-header-filter-btn:hover,
.dt-header-filter-btn.text-primary {
    opacity: 1;
}

.dt-header-filter-menu {
    min-width: 200px;
    max-width: 280px;
    font-size: 0.8125rem;
    z-index: 1050;
    position: fixed !important;
}

/* DataTables scrollX clones the header into a hidden sizing table on every
   draw — an open dropdown gets cloned with .show and would linger as an
   unclosable ghost. Never render menus inside the scroll-body clone. */
.dt-scroll-body .dt-header-filter-menu,
.dataTables_scrollBody .dt-header-filter-menu {
    display: none !important;
}

.dt-header-filter-list {
    max-height: 220px;
    overflow-y: auto;
}

.dt-header-filter-list .form-check {
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
}

.dt-header-filter-list .form-check-input {
    margin-top: 0.2em;
}

#userList .list-group-item:hover {
    background-color: #f0f0f0;
    cursor: pointer;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    right: auto;
    margin-top: -0.1rem;
    display: none;
}

.dropdown-submenu .dropdown-menu.show {
    display: block;
}

.dropdown-submenu.open-left .dropdown-menu {
    left: auto;
    right: 100%;
}

/* Image-tile menu button floats above the tile's image link.
   No z-3 utility here — its !important would trump the open-state rule below. */
.image-tile-menu {
    z-index: 3;
}

/* Positioned dropdown wrappers (e.g. image-tile menus) create per-tile stacking
   contexts — while open, the wrapper must rise above sibling tiles' toggles */
.dropdown:has(> .dropdown-menu.show) {
    z-index: var(--bs-dropdown-zindex, 1000);
}


.checkbox-container {
    height: 58px;
}

.project-filter-dropdown-menu-width {
    min-width: 380px;
}

@media (min-width: 576px) {
    .project-filter-dropdown-menu-width {
        min-width: 500px;
    }
}

@media (min-width: 700px) {
    .project-filter-dropdown-menu-width {
        min-width: 600px;
    }
}

@media (min-width: 1200px) {
    .project-filter-dropdown-menu-width {
        min-width: 900px;
    }
}

dd {
    min-height: 24px;
}

.padded_main {
    padding-top: 82px;
}

.index-logo {
    height: 50px;
    width: 55px;
}


.machine {
    width: 40vmin;
    fill: #198754;
}

.machine-small-shadow, .machine-medium-shadow, .machine-large-shadow {
    fill: rgba(0, 0, 0, 0.05);
}

.machine-small {
    -webkit-animation: counter-rotation 5s infinite linear;
    -moz-animation: counter-rotation 5s infinite linear;
    -o-animation: counter-rotation 5s infinite linear;
    animation: counter-rotation 5s infinite linear;
    -webkit-transform-origin: 100.136px 225.345px;
    -ms-transform-origin: 100.136px 225.345px;
    transform-origin: 100.136px 225.345px;
}

.machine-small-shadow {
    -webkit-animation: counter-rotation 5s infinite linear;
    -moz-animation: counter-rotation 5s infinite linear;
    -o-animation: counter-rotation 5s infinite linear;
    animation: counter-rotation 5s infinite linear;
    -webkit-transform-origin: 110.136px 235.345px;
    -ms-transform-origin: 110.136px 235.345px;
    transform-origin: 110.136px 235.345px;
}

.machine-medium {
    -webkit-animation: rotation 7.5s infinite linear;
    -moz-animation: rotation 7.5s infinite linear;
    -o-animation: rotation 7.5s infinite linear;
    animation: rotation 7.5s infinite linear;
    -webkit-transform-origin: 254.675px 379.447px;
    -ms-transform-origin: 254.675px 379.447px;
    transform-origin: 254.675px 379.447px;
}

.machine-medium-shadow {
    -webkit-animation: rotation 7.5s infinite linear;
    -moz-animation: rotation 7.5s infinite linear;
    -o-animation: rotation 7.5s infinite linear;
    animation: rotation 7.5s infinite linear;
    -webkit-transform-origin: 264.675px 389.447px;
    -ms-transform-origin: 264.675px 389.447px;
    transform-origin: 264.675px 389.447px;
}

.machine-large {
    -webkit-animation: counter-rotation 10s infinite linear;
    -moz-animation: counter-rotation 10s infinite linear;
    -o-animation: counter-rotation 10s infinite linear;
    animation: counter-rotation 10s infinite linear;
    -webkit-transform-origin: 461.37px 173.694px;
    -ms-transform-origin: 461.37px 173.694px;
    transform-origin: 461.37px 173.694px;
}

.machine-large-shadow {
    -webkit-animation: counter-rotation 10s infinite linear;
    -moz-animation: counter-rotation 10s infinite linear;
    -o-animation: counter-rotation 10s infinite linear;
    animation: counter-rotation 10s infinite linear;
    -webkit-transform-origin: 471.37px 183.694px;
    -ms-transform-origin: 471.37px 183.694px;
    transform-origin: 471.37px 183.694px;
}

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(359deg);
    }
}

@-moz-keyframes rotation {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(359deg);
    }
}

@-o-keyframes rotation {
    from {
        -o-transform: rotate(0deg);
    }
    to {
        -o-transform: rotate(359deg);
    }
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

@-webkit-keyframes counter-rotation {
    from {
        -webkit-transform: rotate(359deg);
    }
    to {
        -webkit-transform: rotate(0deg);
    }
}

@-moz-keyframes counter-rotation {
    from {
        -moz-transform: rotate(359deg);
    }
    to {
        -moz-transform: rotate(0deg);
    }
}

@-o-keyframes counter-rotation {
    from {
        -o-transform: rotate(359deg);
    }
    to {
        -o-transform: rotate(0deg);
    }
}

@keyframes counter-rotation {
    from {
        transform: rotate(359deg);
    }
    to {
        transform: rotate(0deg);
    }
}

.card-pricing {
    border: none;
    border-radius: 1.5rem;
    transition: all 0.3s ease-in-out;
    background: linear-gradient(to bottom right, #ffffff, #f8f9fa);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transform-style: preserve-3d;
    perspective: 1000px;
}

.card-pricing:hover {
    transform: scale(1.02) translateY(-5px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
}

/*.card-pricing .card-header {*/
/*    border-bottom: none;*/
/*    background: transparent;*/
/*}*/

.card-pricing .card-title {
    font-size: 2.5rem;
    font-weight: 700;
}

.card-pricing ul li {
    padding: 0.25rem 0;
    font-size: 1rem;
}

.btn-outline-primary:hover {
    background-color: #0d6efd;
    color: white;
    border-color: #0d6efd;
}

/* FullCalendar base styles - see full_calendar_custom.css for theming */
.fc-scroller-harness, .fc-scroller, .fc-timeline-body {
    background-color: var(--bs-body-bg);
}

/* Set first column width */
.fc-datagrid-header col:first-child,
.fc-datagrid-body col:first-child {
    width: 150px;
}

/* Zebra striping for even rows */
.fc-datagrid-body tbody tr:nth-child(even),
.fc-timeline-body tbody tr:nth-child(even) {
    background-color: var(--bs-tertiary-bg);
}

.text-red {
    color: var(--emphasis-red);
}

.go-team-logo {
    font-weight: 400;
    font-size: 26px;
    color: var(--emphasis-red);
    letter-spacing: 1.0px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.sidebar-logo {
    /*max-height: 70px;*/
    /*max-width: 175px;*/
    height: 50px;
    width: 150px;
    object-fit: cover;
    border-radius: 6px;
    z-index: 0;
}

.img-list-thumbnail {
    width: 48px;
    height: 48px;
    max-width: 48px;
    max-height: 48px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
    margin: auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.img-detail-thumbnail {
    margin-left: auto;
    margin-right: auto;
    width: 100px;
    height: 100px;
    max-width: 100px;
    max-height: 100px;
    border-radius: 10px;
    object-fit: cover;
    aspect-ratio: 1/1;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.ai-textarea,
.form-floating > textarea.ai-textarea {
    height: 174px;
    min-height: 174px;
    resize: vertical;
}

.ql-toolbar {
    background-color: var(--bs-tertiary-bg);
    border-top-left-radius: var(--bs-border-radius);
    border-top-right-radius: var(--bs-border-radius);
}

.ql-container {
    min-height: 130px;
    background-color: var(--bs-body-bg);
    border-bottom-left-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius);
}

.pdf-iframe {
    width: 100%;
    height: 1500px;
}

/* ============ PDF edit split-view shell (0343) ============
   Sidebar with form on the left, live iframe preview on the right.
   Sized to the viewport so the iframe stays visible while the form
   scrolls. Collapses to a stacked layout on narrow screens. */
.pdf-edit-shell {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 56px);
}
.pdf-edit-shell__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .5rem 1rem;
    background: transparent;
    border-bottom: 1px solid var(--bs-border-color);
    position: sticky;
    top: 0;
    z-index: 5;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.pdf-edit-shell__split {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    gap: 0;
    padding: 0;
}
/* Inline form column on ≥lg; on smaller screens Bootstrap's offcanvas-lg
   class hides this element and turns it into a slide-in drawer.
   Rendered AFTER the preview in the DOM, so the sidebar lands on the right. */
@media (min-width: 992px) {
    .pdf-edit-shell__form {
        flex: 0 0 380px;
        max-width: 380px;
        overflow-y: auto;
        padding: 1.25rem 1rem;
        background: var(--bs-body-bg, #fff);
        border: 0;
        border-left: 1px solid var(--bs-border-color);
        border-radius: 0;
        align-self: stretch;
    }
    .pdf-edit-shell__form .offcanvas-body {
        padding: 0;
    }
}
/* The preview is the "workspace" — a darker grey desk with the document
   floating on it. Borderless so the eye lands on the white sheet. */
.pdf-edit-shell__preview {
    flex: 1 1 auto;
    min-width: 0;
    align-self: stretch;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    background: #e2e6ea;
    background-image: linear-gradient(180deg, #e9ecef 0%, #dde2e7 100%);
}
.pdf-edit-shell__preview iframe {
    width: 100%;
    height: 100%;
    min-height: 80vh;
    border: 0;
    display: block;
}

/* Final-PDF inline viewer — lives in the same column as the editor
   iframe, swapped via the Editor/Final toggle. Pdf.js renders each page
   into a stack of canvases; we mimic the iframe size so the layout
   doesn't jump. */
.pdf-edit-shell__final {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 80vh;
    overflow-y: auto;
    background: transparent;
    padding: 24px;
}
.pdf-edit-shell__final #pdf-final-pages {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.pdf-final-canvas {
    background: white;
    border-radius: 8px;
    max-width: 100%;
    height: auto;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, .04),
        0 8px 24px rgba(15, 23, 42, .08),
        0 24px 56px -12px rgba(15, 23, 42, .12);
}
@media (max-width: 991px) {
    .pdf-edit-shell__final {
        min-height: 70vh;
    }
}
@media (max-width: 991px) {
    .pdf-edit-shell__preview iframe {
        min-height: 70vh;
    }
}

.drag-handle {
    font-size: 1.2rem;
    color: #6c757d;
    cursor: grab;
}

.drag-handle:active {
    cursor: grabbing;
}

.alert-error {
    background-color: var(--alert-red) !important;
    border-color: var(--alert-red) !important;
    color: #fff !important;
}

.btn-red {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--emphasis-red);
    --bs-btn-border-color: var(--emphasis-red);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--emphasis-red-light);
    --bs-btn-hover-border-color: var(--emphasis-red-light);
    --bs-btn-focus-shadow-rgb: 217, 164, 6;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--emphasis-red-light);
    --bs-btn-active-border-color: var(--emphasis-red-light);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: var(--emphasis-red);
    --bs-btn-disabled-border-color: var(--emphasis-red);
}


.feature-card {
    border-radius: 0.75rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: inherit;
}

.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.feature-icon {
    color: var(--primary-blue);
    transition: color 0.3s ease, transform 0.3s ease;
}

.feature-card:hover .feature-icon {
    color: var(--emphasis-red);
    transform: scale(1.2);
}

.feature-card h5,
.feature-card p {
    transition: color 0.3s ease;
}

.feature-card:hover h5 {
    color: var(--emphasis-red);
}

/* Sidebar icon badges */
.icon-badge {
    --badge-size: 28px;
    --badge-radius: 10px;
    --badge-bg: var(--bs-secondary);
    --badge-fg: currentColor;
    --badge-bg-hover: var(--bs-secondary);
    --badge-bg-active: var(--emphasis-red);
    --badge-fg-active: var(--emphasis-red);

    width: var(--badge-size);
    height: var(--badge-size);
    border-radius: var(--badge-radius);
    display: grid;
    place-items: center;
    flex: 0 0 var(--badge-size);
    background: var(--badge-bg);
    color: var(--badge-fg);
    transition: background .15s ease, color .15s ease, transform .15s ease;
}

.nav-pills .nav-link:hover .icon-badge {
    color: var(--emphasis-red);
}


.icon-badge i {
    font-size: 0.95rem;
    line-height: 1;
}

/* Dark mode tweak (Bootstrap 5.3 data-bs-theme) */
[data-bs-theme="dark"] .icon-badge {
    --badge-bg: color-mix(in srgb, var(--bs-body-color) 18%, transparent);
    --badge-bg-hover: color-mix(in srgb, var(--bs-primary) 28%, transparent);
}

/* Optional sizes */
.icon-badge-sm {
    /*--badge-size: 24px;*/
}

.icon-badge-lg {
    --badge-size: 32px;
}

.icon-badge-red {
    --badge-bg: var(--emphasis-red)
}

.icon-badge-primary {
    --badge-bg: var(--bs-primary);
}

.icon-badge-light-green {
    --badge-bg: var(--nice-green);
}

.icon-badge-danger {
    --badge-bg: var(--bs-danger);
}

.icon-badge-black {
    --badge-bg: var(--bs-black);
}

/* Dark mode: Keep colored badges with their colors */
[data-bs-theme="dark"] .icon-badge-red {
    --badge-bg: var(--emphasis-red);
}

[data-bs-theme="dark"] .icon-badge-primary {
    --badge-bg: var(--bs-primary);
}

[data-bs-theme="dark"] .icon-badge-light-green {
    --badge-bg: var(--nice-green);
}

[data-bs-theme="dark"] .icon-badge-danger {
    --badge-bg: var(--bs-danger);
}

[data-bs-theme="dark"] .icon-badge-black {
    --badge-bg: color-mix(in srgb, var(--bs-body-color) 30%, transparent);
}

.uppy-Dashboard-inner {
    width: 100% !important;
}

.looks-disabled {
    background-color: var(--bs-tertiary-bg);
}

/* Always keep floating labels in the floated position.
   Dim via text color, NOT opacity — opacity would make the textarea
   mask below semi-transparent and let scrolled text bleed through. */
.form-floating > label {
    color: rgba(var(--bs-body-color-rgb), 0.65);
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

.form-floating > .form-control,
.form-floating > .form-select {
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
}

/* Keep the same styling when focused */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    color: rgba(var(--bs-body-color-rgb), 0.65);
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

/* Textarea floating label: render it as an opaque chip so content scrolling
   up doesn't overlap/bleed through the label text. Bootstrap's full-height
   transparent label can't mask the scrolled lines; an opaque, text-width
   label sitting above the textarea (z-index) does. Relies on the color-based
   dimming above — opacity would make the chip semi-transparent again. */
.form-floating > textarea.form-control ~ label {
    height: auto;
    width: auto;
    top: 1rem;
    left: 0.5rem;
    right: auto;
    max-width: calc(100% - 1rem);
    padding: 0 0.25rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background-color: var(--bs-body-bg);
    z-index: 2;
}

/* ==========================================================================
   Required Field Indicators
   ========================================================================== */

/* Orange asterisk for required fields */
.required-indicator {
    color: var(--emphasis-orange, #FE7F2D);
    font-weight: 600;
    margin-left: 2px;
}

/* Hide submenu arrows in DataTables dropdowns */
div.dt-button-collection .dropdown-toggle::after,
.dt-button-collection .dt-button.dropdown-toggle::after,
.dt-button-collection a.dropdown-toggle::after {
    display: none !important;
}

/* Help icon (question mark) — reusable across headings and card headers */
.help-icon {
    font-size: 0.7em;
    opacity: 0.6;
    transition: opacity 0.2s;
    vertical-align: middle;
    color: var(--bs-body-tertiary-color, var(--bs-tertiary-color));
    text-decoration: none;
}

.help-icon:hover {
    opacity: 1;
}

/* Hide DataTables toolbar buttons (export, settings) on mobile */
@media (max-width: 767.98px) {
    .dt-container > .row:has(.dt-buttons) {
        display: none !important;
    }
}

/* List-header search + actions: on phones the shared .input-group crams the
   search field and action buttons into one non-wrapping row. Let it wrap so
   the search takes a full-width row of its own and the buttons flow onto the
   row below. Desktop (>=576px) keeps the connected input-group look. */
@media (max-width: 575.98px) {
    .header-bar .btn-toolbar > .input-group {
        flex-wrap: wrap;
        gap: .5rem;
    }

    .header-bar .btn-toolbar > .input-group > * {
        margin-left: 0 !important;
        border-radius: var(--bs-border-radius) !important;
    }

    .header-bar .btn-toolbar > .input-group > .form-control,
    .header-bar .btn-toolbar > .input-group > .form-select {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* ==========================================================================
   Nav Tabs Styling
   ========================================================================== */

.nav-tabs .nav-link {
    color: var(--bs-body-color);
}

.nav-tabs .nav-link:hover {
    color: var(--bs-primary);
}

.nav-tabs .nav-link.active {
    /*color: var(--bs-primary);*/
    font-weight: 600;
}

/* ==========================================================================
   Subtle Button Variants
   ========================================================================== */

.btn-subtle-primary {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    border: 1px solid transparent;
}

.btn-subtle-primary:hover {
    background-color: var(--bs-primary);
    color: #fff;
}

.btn-subtle-success {
    background-color: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
    border: 1px solid transparent;
}

.btn-subtle-success:hover {
    background-color: var(--bs-success);
    color: #fff;
}

.btn-subtle-info {
    background-color: var(--bs-info-bg-subtle);
    color: var(--bs-info-text-emphasis);
    border: 1px solid transparent;
}

.btn-subtle-info:hover {
    background-color: var(--bs-info);
    color: #fff;
}

.btn-subtle-warning {
    background-color: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
    border: 1px solid transparent;
}

.btn-subtle-warning:hover {
    background-color: var(--bs-warning);
    color: #000;
}

.btn-subtle-danger {
    background-color: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
    border: 1px solid transparent;
}

.btn-subtle-danger:hover {
    background-color: var(--bs-danger);
    color: #fff;
}

.btn-subtle-secondary {
    background-color: var(--bs-secondary-bg-subtle);
    color: var(--bs-secondary-text-emphasis);
    border: 1px solid transparent;
}

.btn-subtle-secondary:hover {
    background-color: var(--bs-secondary);
    color: #fff;
}

/* ==========================================================================
   Modern Card Styling (Glassmorphism)
   ========================================================================== */

.card {
    --card-bg: rgba(var(--bs-body-bg-rgb), 0.95);
    --card-border: rgba(var(--bs-emphasis-color-rgb), 0.08);
    --card-glow: rgba(var(--bs-primary-rgb), 0.15);

    /*border: 0 solid var(--card-border);*/
    /*border-radius: 16px;*/
    background: var(--card-bg);
    box-shadow: 0 4px 24px -4px rgba(0, 0, 0, 0.08),
    0 0 0 1px var(--card-border);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /*overflow: hidden;  !* Clip content to rounded corners *!*/
}

/*.card:hover {*/
/*    box-shadow: 0 8px 32px -4px rgba(0, 0, 0, 0.12),*/
/*    0 0 0 1px var(--card-border);*/
/*    transform: translateY(-1px);*/
/*}*/

.card:focus-within {
    box-shadow: 0 8px 32px -4px rgba(0, 0, 0, 0.12),
    0 0 0 2px var(--card-glow),
    0 0 24px -4px var(--card-glow);
}
.card:focus {
    box-shadow: 0 8px 32px -4px rgba(0, 0, 0, 0.12),
    0 0 0 2px var(--card-glow),
    0 0 24px -4px var(--card-glow);
}
.card-header {
    --bs-card-cap-bg: transparent;  /* Override Bootstrap default */
    border-bottom: 1px solid var(--card-border);
    padding: 0.75rem 1.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.025em;
}

.card-header .card-title,
.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6 {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: inherit;
    text-transform: inherit;
    margin: 0;
}

/* Only apply gradient bg if no explicit bg class is set */
.card-header:not([class*="bg-"]) {
    /* Use same color at 0 opacity instead of 'transparent' to avoid color interpolation artifacts */
    background: linear-gradient(to bottom, rgba(var(--primary-blue-rgb), 0.15), rgba(var(--primary-blue-rgb), 0));
    color: var(--bs-body-color);
}

.card-body {
    padding: 1.25rem;
}

.card-footer {
    background: transparent;
    border-top: 1px solid var(--card-border);
    padding: 0.875rem 1.25rem;
}

/* List group inside cards - transparent background */
.card .list-group,
.card .list-group-item {
    --bs-list-group-bg: transparent;
    background: transparent;
}

/* Dark mode adjustments */
[data-bs-theme="dark"] .card {
    --card-bg: var(--surface-card-bg);
    --card-border: rgba(255, 255, 255, 0.08);
    --card-glow: rgba(var(--bs-primary-rgb), 0.25);
}

.badge-card-header {
    font-size: 0.75rem !important;
}

/* Dashboard KPI values - responsive typography */
.kpi-value {
    font-size: 1.25rem;
    white-space: nowrap;
}

@media (min-width: 1400px) {
    .kpi-value {
        font-size: 1.5rem;
    }
}

@media (max-width: 991px) {
    .kpi-value {
        font-size: 1.4rem;
    }
}

/* Meter Filter Styling */
.meter-inactive {
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.meter-inactive:hover {
    opacity: 0.85;
}

/* Button group styling for meter filter */
#meter-filter-toggle .btn {
    transition: all 0.2s ease;
}

#meter-filter-toggle .btn.active {
    font-weight: 500;
}

/* ==========================================================================
   Icon Picker Widget
   ========================================================================== */

/* Icon Picker Trigger Button — sized like a floating-label input (58px, global radius) */
.icon-picker-trigger {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: calc(3.5rem + 2px);
    padding: 0.5rem 0.75rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    cursor: pointer;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    text-align: left;
}

.icon-picker-trigger:hover {
    border-color: var(--bs-primary);
}

.icon-picker-trigger:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
    outline: none;
}

.icon-picker-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--bs-body-secondary-bg);
    /* Nested inside the 20px trigger radius minus its 0.5rem padding */
    border-radius: calc(var(--bs-border-radius) - 0.5rem);
    font-size: 1.25rem;
    color: var(--bs-body-color);
    flex-shrink: 0;
}

/* Color Input — match floating-label input height and the global radius */
input[type="color"].form-control {
    min-height: calc(3.5rem + 2px);
    padding: 0.5rem 0.75rem;
    border-radius: var(--bs-border-radius);
}

input[type="color"].form-control::-webkit-color-swatch-wrapper {
    padding: 0;
}

input[type="color"].form-control::-webkit-color-swatch {
    border: none;
    border-radius: calc(var(--bs-border-radius) - 0.5rem);
}

input[type="color"].form-control::-moz-color-swatch {
    border: none;
    border-radius: calc(var(--bs-border-radius) - 0.5rem);
}

.icon-picker-label {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.icon-picker-name {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--bs-body-color);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.icon-picker-arrow {
    flex-shrink: 0;
}

/* Icon Grid (Modal) */
.icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 0.375rem;
}

.icon-grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem 0.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 1.25rem;
    color: var(--bs-body-color);
    transition: all 0.15s ease-in-out;
}

.icon-grid-item:hover {
    background-color: var(--bs-primary);
    color: white;
    border-color: var(--bs-primary);
}

.icon-grid-item:focus {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

.icon-grid-item.selected {
    background-color: var(--bs-primary);
    color: white;
    border-color: var(--bs-primary);
}

.icon-grid-label {
    font-size: 0.6rem;
    text-align: center;
    line-height: 1.1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.7;
}

.icon-grid-item:hover .icon-grid-label,
.icon-grid-item.selected .icon-grid-label {
    opacity: 1;
}

.icon-category {
    grid-column: 1 / -1;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
    margin-top: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.icon-category:first-child {
    margin-top: 0;
}

/* Sidebar running entries */
#sidebar-running-entries {
    max-height: 160px;
    overflow-y: auto;
}

.sidebar-running-entry {
    transition: background-color 0.15s ease;
}

.sidebar-running-entry:hover {
    background: rgba(var(--bs-emphasis-color-rgb), 0.05);
}

.sidebar-running-stop {
    padding: 0.25rem;
    margin: -0.25rem;
}

.sidebar-running-timer {
    color: rgba(255, 255, 255, 0.6);
}

/* Detail image: glassmorphism overlay on hover */
.card-title-badges:not(:has(*)) {
    display: none !important;
}

.detail-image-container:hover .detail-image-overlay {
    opacity: 1 !important;
}

/* Time card on project detail: cap the height of long lists so the card
   doesn't dominate the column. Scroll vertically when content exceeds. */
.time-card-tasks-scroll {
    max-height: 18rem;
    overflow-y: auto;
}
.time-card-employees-scroll {
    max-height: 16rem;
    overflow-y: auto;
}

.collapse-toggle .collapse-chevron {
    transition: transform 0.2s ease;
}
.collapse-toggle[aria-expanded="true"] .collapse-chevron {
    transform: rotate(90deg);
}

.sidebar-section-label {
    font-size: 0.65rem;
    letter-spacing: 0.05em;
}

/* Stacked avatar group — overlapping circles via row-reverse */
.avatar-stack {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}
.avatar-stack > * {
    margin-right: -8px;
}

/* Click toggles .expanded — collapsed shows overlap, expanded shows name + role per row. */
.avatar-stack--expandable {
    cursor: pointer;
}
.avatar-stack--expandable .avatar-stack__item {
    display: flex;
    align-items: center;
    margin-right: -8px;
}
.avatar-stack--expandable .avatar-stack__meta {
    display: none;
}
.avatar-stack--expandable.expanded {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 0.35rem;
}
.avatar-stack--expandable.expanded .avatar-stack__item {
    margin-right: 0;
    gap: 0.5rem;
}
.avatar-stack--expandable.expanded .avatar-stack__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    line-height: 1.2;
}

/* Round icon-only buttons (e.g. plus buttons in card headers) */
.btn-icon {
    border-radius: 50% !important;
    width: 2rem;
    height: 2rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-sm.btn-icon {
    width: 1.625rem;
    height: 1.625rem;
}

/* ============================================================
   Hero (split layout) — pricing-page dark palette experiment
   ============================================================ */

.hero-split {
    --p-bg: #0f1117;
    --p-surface: #181c27;
    --p-border: #252a38;
    --p-accent: #f97316;
    --p-brand-blue: #004560;
    --p-text: #f0f2f7;
    --p-muted: #7c8399;

    /* Hero: dark at edges, slightly lifted in middle — matches section pattern */
    background:
        linear-gradient(to bottom,
            #0f1117 0%,
            #14171f 50%,
            #0f1117 100%),
        var(--p-bg);
    color: var(--p-text);
    border-bottom: none;
    /* Fill the viewport on first load (minus the 82px fixed navbar) */
    min-height: calc(100vh - 82px);
    display: flex;
    align-items: center;
}

.hero-split > .container {
    width: 100%;
}

.hero-seo-kicker {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 13px;
    letter-spacing: 0.18em;
    color: #FE7F2D;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    font-weight: 700;
}

.hero-split .hero-visual-headline {
    color: var(--p-text);
    letter-spacing: -0.03em;
}

.hero-split .hero-subline {
    color: #ffffff;
    opacity: 0.92;
    max-width: 540px;
}

.hero-split .hero-sublabel {
    color: #ffffff;
    opacity: 0.85;
}

/* ============================================================
   Hero — fullscreen video variant (replaces .hero-split on index)
   ============================================================ */
.hero-video {
    min-height: calc(100vh - 82px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #0f1117;
    color: #fff;
}

.hero-video__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

.hero-video__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* No tint over the video — legibility comes from the text-shadow below. */
    background: transparent;
}

.hero-video__content {
    position: relative;
    z-index: 2;
    padding: 0 1rem;
    max-width: 900px;
    /* legibility over a bright video with NO overlay veil — layered shadow */
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.70), 0 1px 4px rgba(0, 0, 0, 0.55);
}

/* The CTA already has its own solid background — don't let the content
   text-shadow bleed onto the button label. */
.hero-video__content .btn {
    text-shadow: none;
}

/* Smaller hero CTA on phones — the btn-lg/px-5/fs-5 combo is oversized there */
@media (max-width: 575.98px) {
    .hero-video__content .btn {
        font-size: 1rem;
        padding: 0.65rem 1.5rem;
    }
}

.hero-video__headline {
    color: #fff;
    letter-spacing: -0.03em;
    /* big and bold via Bootstrap .display-1; long words wrap instead of overflowing */
    min-height: 1.15em;
}

.hero-rotator {
    display: inline-block;
}

.hero-rotator__word {
    display: inline-block;
    color: #FE7F2D;
    transition: opacity 0.28s ease, transform 0.28s ease;
}

.hero-rotator__word.is-out {
    opacity: 0;
    transform: translateY(-0.35em);
}

.hero-video__subline {
    color: #fff;
    opacity: 0.92;
}

.hero-video__trialnote {
    color: #fff;
    opacity: 0.62;
    font-size: 0.9rem;
    font-weight: 500;
}

@media (max-width: 575.98px) {
    .hero-video__trialnote {
        opacity: 0.55;
        font-size: 0.72rem;
    }
}

.hero-video__scroll {
    position: absolute;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    z-index: 2;
    font-size: 1.4rem;
    color: #fff;
    opacity: 0.6;
    animation: hero-scroll-bob 1.8s ease-in-out infinite;
}

@keyframes hero-scroll-bob {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(6px); }
}

/* Smaller headline on phones so the word fits on one line */
@media (max-width: 575.98px) {
    .hero-video__subline { font-size: 1.25rem !important; }
}

/* Respect reduced-motion: no bob, no word-fade transition.
   (Video autoplay is additionally guarded in JS — later task.) */
@media (prefers-reduced-motion: reduce) {
    .hero-video__scroll { animation: none; }
    .hero-rotator__word { transition: none; }
}

/* ============================================================
   Process timeline — "company day" story marker atop each step
   ============================================================ */
.process-timeline {
    position: sticky;
    top: 90px;               /* pins just below the fixed navbar */
    z-index: 6;
    display: flex;
    align-items: flex-start;
    gap: 0;
    list-style: none;
    margin: 0 auto 2.75rem;
    max-width: 760px;
    padding: 0.7rem 1.5rem 0.55rem;
    background: rgba(15, 17, 23, 0.82);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid #252a38;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

.process-timeline__step {
    flex: 1;
    text-align: center;
    position: relative;
    min-width: 0;
}

/* connector line to the previous step */
.process-timeline__step::before {
    content: "";
    position: absolute;
    top: 14px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: #252a38;
    z-index: 0;
}

.process-timeline__step:first-child::before { display: none; }

.process-timeline__step.is-done::before,
.process-timeline__step.is-active::before { background: #FE7F2D; }

.process-timeline__dot {
    position: relative;
    z-index: 1;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin: 0 auto 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    background: #181c27;
    border: 2px solid #252a38;
    color: #7c8399;
}

.process-timeline__step.is-done .process-timeline__dot {
    background: #FE7F2D;
    border-color: #FE7F2D;
    color: #06270a;
}

.process-timeline__step.is-active .process-timeline__dot {
    background: #FE7F2D;
    border-color: #FE7F2D;
    color: #06270a;
    box-shadow: 0 0 0 5px rgba(254, 127, 45, 0.22);
}

.process-timeline__label {
    display: block;
    font-size: 0.8rem;
    line-height: 1.25;
    color: #7c8399;
    padding: 0 0.25rem;
}

.process-timeline__step.is-active .process-timeline__label {
    color: #fff;
    font-weight: 700;
}

.process-timeline__step.is-done .process-timeline__label { color: #f0f2f7; }

@media (max-width: 575.98px) {
    .process-timeline__dot { width: 24px; height: 24px; font-size: 11px; }
    .process-timeline__label { font-size: 0.62rem; }
    .process-timeline__step::before { top: 11px; }
}

.hero-visual {
    max-width: 480px;
    min-height: 420px;
}

.hero-phone-frame {
    max-width: 240px;
    padding: 14px 10px;
    background: #000;
    border-radius: 36px;
    box-shadow:
        0 30px 60px -20px rgba(0, 0, 0, 0.6),
        0 10px 20px -5px rgba(249, 115, 22, 0.08);
    position: relative;
    z-index: 1;
}

.hero-phone-frame::before {
    content: "";
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 6px;
    background: #000;
    border-radius: 3px;
    z-index: 2;
}

.hero-phone-frame img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 24px;
}

.hero-feature-bubbles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.hero-feature-bubble {
    position: absolute;
    background: var(--p-surface);
    color: var(--p-text);
    border: 1px solid var(--p-border);
    border-radius: 999px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
    pointer-events: auto;
    animation: hero-bubble-float 6s ease-in-out infinite;
}

.hero-feature-bubble i {
    color: var(--p-accent) !important;
}

/* Bridge section — same dark navy as the rest, accent only via the orange word */
.bridge-section-dark {
    background:
        linear-gradient(to bottom,
            #0f1117 0%,
            #14171f 50%,
            #0f1117 100%),
        #0f1117;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

.bridge-section-dark::before {
    /* Very subtle radial — gives a hint of warmth, no color block */
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center top, rgba(249, 115, 22, 0.04) 0%, transparent 65%);
    pointer-events: none;
}

.bridge-section-dark > * {
    position: relative;
    z-index: 1;
}

/* Atmospheric image bleed on the right — angle grinder + sparks fading
   into the dark bg. Hidden on mobile so the text stays the focus. */
.bridge-section-dark__bg-image {
    position: absolute;
    top: 0;
    right: 0;
    width: 65%;
    height: 100%;
    object-fit: cover;
    object-position: 60% center;
    /* Radial mask: sparks fully visible at right-center, fading to
       transparent toward all edges so the image bleeds into bg. */
    mask-image: radial-gradient(ellipse 75% 90% at 70% center,
                                rgba(0, 0, 0, 1) 30%,
                                rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: radial-gradient(ellipse 75% 90% at 70% center,
                                        rgba(0, 0, 0, 1) 30%,
                                        rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

@media (max-width: 991.98px) {
    /* On mobile: text vertically centered, CTA group pinned to the bottom.
       Two equal auto-margins split the free space so the text lands in the
       middle and the button sits at the foot of the section. */
    .bridge-section-dark__col {
        display: flex;
        flex-direction: column;
        min-height: 80vh;
    }

    .bridge-section-dark__text {
        margin-top: auto;
    }

    .bridge-section-dark__cta {
        margin-top: auto;
    }

    /* On mobile the image becomes a faded full-bleed backdrop behind the
       centered text, masked from the right edge so the copy stays readable. */
    .bridge-section-dark__bg-image {
        width: 100%;
        object-position: 65% center;
        opacity: 0.32;
        mask-image: linear-gradient(to left,
                                    rgba(0, 0, 0, 1) 0%,
                                    rgba(0, 0, 0, 0.55) 45%,
                                    rgba(0, 0, 0, 0) 100%);
        -webkit-mask-image: linear-gradient(to left,
                                            rgba(0, 0, 0, 1) 0%,
                                            rgba(0, 0, 0, 0.55) 45%,
                                            rgba(0, 0, 0, 0) 100%);
    }
}

.bridge-section-dark h2 {
    color: #ffffff;
}

.bridge-section-dark .text-awerka {
    color: #f97316 !important;
}

@keyframes hero-bubble-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-feature-bubble {
        animation: none;
    }
}

.hero-feature-bubble[data-pos="top-right"]           { top:  5%; right: -10%; animation-delay: 0s;   }
.hero-feature-bubble[data-pos="middle-right-top"]    { top: 28%; right: -15%; animation-delay: 0.8s; }
.hero-feature-bubble[data-pos="middle-right-bottom"] { top: 52%; right: -15%; animation-delay: 1.6s; }
.hero-feature-bubble[data-pos="bottom-right"]        { bottom: 8%; right: -10%; animation-delay: 2.4s; }
.hero-feature-bubble[data-pos="top-left"]            { top: 18%; left:  -12%; animation-delay: 3.2s; }

/* Mobile / tablet: bubbles become a vertical centered list under the phone */
@media (max-width: 991.98px) {
    .hero-visual {
        min-height: auto;
    }
    .hero-feature-bubbles {
        position: static;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-top: 1.5rem;
        align-items: center;
    }
    .hero-feature-bubble {
        position: static;
        animation: none;
        transform: none;
    }
}

/* ============================================================
   Public navbar — center links: brighter, more breathing room
   ============================================================ */

.navbar .navbar-nav-center .nav-link {
    color: rgba(255, 255, 255, 0.85);
    padding-left: 1rem;
    padding-right: 1rem;
    font-weight: 500;
    transition: color 0.15s ease;
}

.navbar .navbar-nav-center .nav-link:hover,
.navbar .navbar-nav-center .nav-link:focus {
    color: #fff;
}

.navbar .navbar-nav-center .nav-link.active,
.navbar .navbar-nav-center .nav-link.show {
    color: #fff;
}

@media (min-width: 992px) {
    .navbar .navbar-nav-center {
        gap: 0.5rem;
    }
}

/* ============================================================
   Public navbar — burger toggler visibility on narrow screens
   ============================================================ */

.navbar .navbar-toggler {
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 0.5rem 0.75rem;
    color: #fff;
}

.navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

.navbar .navbar-toggler i {
    font-size: 1.25rem;
    color: #fff;
}

/* ============================================================
   Public navbar — keep brand+toggler visible at any viewport
   ============================================================ */

.navbar .navbar-toggler {
    flex-shrink: 0;
    margin-left: auto; /* push to the right even if the collapse logic shifts */
}

.navbar .navbar-brand {
    flex-shrink: 0;
}

/* Tighten container padding on very narrow viewports so brand+toggler always fit */
@media (max-width: 575.98px) {
    .navbar > .container-fluid {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    .navbar .navbar-toggler {
        padding: 0.4rem 0.6rem;
    }
}

/* ============================================================
   Public index — unified dark theme section utilities
   Used together with data-bs-theme="dark" on the section element
   ============================================================ */

.section-dark {
    /* Subtle vertical gradient: lifted edges + dark middle.
       When two sections meet, both their edges blend into a soft "seam" of light. */
    background:
        linear-gradient(to bottom,
            #0f1117 0%,
            #14171f 50%,
            #0f1117 100%),
        #0f1117;
    color: #f0f2f7;
}

/* Same background as .section-dark — kept as a class so the markup signals
   "this section showcases content via elevated cards" without needing
   different surrounding colors. */
.section-brand {
    background:
        linear-gradient(to bottom,
            #0f1117 0%,
            #14171f 50%,
            #0f1117 100%),
        #0f1117;
    color: #f0f2f7;
    position: relative;
    overflow: hidden;
}

.section-brand::before {
    /* Very subtle internal radial — gives the section a soft "spotlight" feel
       without changing the perceived bg color */
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center top, rgba(249, 115, 22, 0.05) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.section-brand > * {
    position: relative;
    z-index: 1;
}

/* Headings and emphasis text — keep crisp white regardless of Bootstrap muting */
.section-dark .text-body-emphasis,
.section-brand .text-body-emphasis,
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4, .section-dark h5,
.section-brand h1, .section-brand h2, .section-brand h3, .section-brand h4, .section-brand h5 {
    color: #ffffff;
}

/* Body / secondary text — slightly muted but still readable */
.section-dark .text-body-secondary,
.section-brand .text-body-secondary {
    color: rgba(255, 255, 255, 0.78) !important;
}

/* Bordered/info boxes inside dark sections */
.section-dark .border,
.section-brand .border {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Cards inside dark sections — slightly elevated dark surface */
.section-dark .card,
.section-brand .card {
    background: #181c27;
    color: #f0f2f7;
    border-color: rgba(255, 255, 255, 0.08);
}

/* Cards in spotlight sections get a more elevated surface for visual rhythm */
.section-brand .card {
    background: #181c27;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.4);
}

/* Sections all share the same bg — no dividers between them needed */

/* Hide the legacy .index-divider gradient line — built for light theme */
.section-dark + .index-divider,
.section-brand + .index-divider,
.index-divider + .section-dark,
.index-divider + .section-brand {
    display: none;
}

/* ============================================================
   Index dark theme — make the underlying main + mobile-app section
   match the dark palette so no light bg shows through anywhere
   ============================================================ */

/* Target only the index page (via :has the hero-split section as a child) */
main.padded_main:has(.hero-split),
main.padded_main:has(.hero-video) {
    background: #0f1117;
    /* Clip any horizontal overflow so a long rotating word / wide section can't
       widen the layout viewport — which on iOS would push the fixed navbar.
       `clip` (unlike `hidden`) does NOT create a scroll container, so the
       sticky process-timeline keeps sticking to the viewport. */
    overflow-x: clip;
}

/* Mobile-app section in index_base — align to our palette */
main.padded_main:has(.hero-split) section.bg-dark,
main.padded_main:has(.hero-video) section.bg-dark {
    background: #0f1117 !important;
}

/* ============================================================
   Trust Stats — number-counter row above the bridge section
   ============================================================ */

.trust-stats .trust-stat-number {
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.trust-stats .trust-stat-label {
    margin-top: 0.5rem;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.3;
}

@media (min-width: 768px) {
    .trust-stats .trust-stat-label {
        font-size: 1rem;
    }
}

/* ============================================================
   Hero — scale up typography + container on large screens
   ============================================================ */

/* xxl (≥1400px) — typical 13"-15" external monitors */
@media (min-width: 1400px) {
    .hero-split > .container {
        max-width: 1500px;
    }
    .hero-split .hero-visual-headline {
        font-size: 4.75rem;
    }
    .hero-seo-kicker {
        font-size: 14px;
    }
    .hero-split .hero-subline {
        font-size: 1.2rem;
        max-width: 600px;
    }
    .hero-split .btn-lg {
        padding: 0.9rem 2rem;
        font-size: 1.15rem;
    }
    .hero-split .hero-sublabel {
        font-size: 0.95rem;
    }
}

/* xxxl (≥1800px) — 21"+ desktop / 4K-ish */
@media (min-width: 1800px) {
    .hero-split > .container {
        max-width: 1720px;
    }
    .hero-split .hero-visual-headline {
        font-size: 6rem;
    }
    .hero-seo-kicker {
        font-size: 16px;
        letter-spacing: 0.2em;
    }
    .hero-split .hero-subline {
        font-size: 1.35rem;
        max-width: 680px;
    }
    .hero-split .btn-lg {
        padding: 1.1rem 2.4rem;
        font-size: 1.25rem;
    }
}

/* Very large displays (≥2400px) — ultra-wide / 27"+ */
@media (min-width: 2400px) {
    .hero-split > .container {
        max-width: 2000px;
    }
    .hero-split .hero-visual-headline {
        font-size: 7rem;
    }
    .hero-split .hero-subline {
        font-size: 1.5rem;
        max-width: 760px;
    }
}

/* ============================================================
   Public sections — each fills at least the viewport for a
   "slide"-style scroll experience. Vertical content centering
   in every section.
   ============================================================ */

.section-dark,
.section-brand,
.bridge-section-dark {
    min-height: calc(100vh - 82px);
    display: flex;
    align-items: center;
}

/* The direct .container inside each section grows to fill the
   flex axis so its content can stretch when needed. */
.section-dark > .container,
.section-brand > .container,
.bridge-section-dark > .container {
    width: 100%;
}

/* ============================================================
   Public sections — scroll-snap for slide-style scroll feel
   Uses "proximity" so snap kicks in near boundaries without
   feeling aggressive mid-scroll.

   Desktop-only via `(pointer: fine)` — on touch devices iOS Safari
   fights any scroll-snap setup (even `proximity`) and makes momentum
   scrolling feel sluggish, so we leave native behaviour intact there.
   ============================================================ */

@media (pointer: fine) {
    html:has(.hero-split),
    html:has(.hero-video) {
        scroll-snap-type: y proximity;
        /* Offset the snap point by the fixed navbar so content lands below it */
        scroll-padding-top: 82px;
    }

    .hero-split,
    .hero-video,
    .section-dark,
    .section-brand,
    .bridge-section-dark {
        scroll-snap-align: start;
    }
}

/* ============================================================
   Bridge section — scale up typography on larger screens
   ============================================================ */

@media (min-width: 1400px) {
    .bridge-section-dark h2 {
        font-size: 4rem;
    }
    .bridge-section-dark .lead {
        font-size: 1.5rem;
    }
    .bridge-section-dark p:not(.lead):not(.small) {
        font-size: 1.15rem;
    }
}

@media (min-width: 1800px) {
    .bridge-section-dark h2 {
        font-size: 5rem;
    }
    .bridge-section-dark .lead {
        font-size: 1.75rem;
    }
    .bridge-section-dark p:not(.lead):not(.small) {
        font-size: 1.3rem;
    }
}

@media (min-width: 2400px) {
    .bridge-section-dark h2 {
        font-size: 6rem;
    }
    .bridge-section-dark .lead {
        font-size: 2rem;
    }
    .bridge-section-dark p:not(.lead):not(.small) {
        font-size: 1.45rem;
    }
}

/* ============================================================
   What carousel — Golden-Circle WHAT, coverflow focus carousel
   Active card centered + bright, neighbors scaled down + dimmed.
   ============================================================ */

.what-carousel {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    outline: none;
}

.what-carousel-viewport {
    position: relative;
    height: 340px;
    overflow: hidden;
}

.what-card {
    position: absolute;
    top: 0;
    left: 50%;
    width: min(360px, 78vw);
    min-height: 300px;
    padding: 2rem 1.75rem;
    background: #181c27;
    border: 1px solid #252a38;
    border-radius: 20px;
    box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.7);
    text-align: left;
    cursor: pointer;
    /* JS sets transform/opacity/z-index; this is the smooth coverflow glide */
    transform: translateX(-50%);
    transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.55s ease;
    will-change: transform, opacity;
}

.what-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 1.25rem;
    border-radius: 50%;
    background: #0f1117;
    border: 1px solid #252a38;
    color: #f97316;
    font-size: 1.4rem;
}

.what-card-title {
    font-size: 1.45rem;
    font-weight: 700;
    color: #f0f2f7;
    margin-bottom: 0.6rem;
    letter-spacing: -0.01em;
}

.what-card-text {
    font-size: 1rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
}

.what-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid #252a38;
    background: rgba(24, 28, 39, 0.9);
    color: #f0f2f7;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.what-carousel-arrow:hover,
.what-carousel-arrow:focus-visible {
    background: #f97316;
    border-color: #f97316;
    color: #0f1117;
}

.what-carousel-prev {
    left: 0;
}

.what-carousel-next {
    right: 0;
}

.what-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 1.75rem;
}

.what-carousel-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.25);
    cursor: pointer;
    transition: width 0.25s ease, background 0.25s ease;
}

.what-carousel-dot.active {
    width: 28px;
    background: #f97316;
}

/* Tablet / mobile: tighter viewport, arrows out of the way */
@media (max-width: 767.98px) {
    .what-carousel-viewport {
        height: 360px;
    }
    .what-carousel-arrow {
        display: none;
    }
}

/* Larger screens: more presence */
@media (min-width: 1400px) {
    .what-carousel {
        max-width: 960px;
    }
    .what-carousel-viewport {
        height: 380px;
    }
    .what-card {
        width: 440px;
        min-height: 340px;
        padding: 2.5rem 2.25rem;
    }
    .what-card-icon {
        width: 64px;
        height: 64px;
        font-size: 1.6rem;
        margin-bottom: 1.5rem;
    }
    .what-card-title {
        font-size: 1.7rem;
    }
    .what-card-text {
        font-size: 1.1rem;
    }
}

/* 21"+ desktops / 1080p and up — generous, confident scale */
@media (min-width: 1800px) {
    .what-carousel {
        max-width: 1120px;
    }
    .what-carousel-viewport {
        height: 420px;
    }
    .what-card {
        width: 500px;
        min-height: 380px;
        padding: 2.75rem 2.5rem;
        border-radius: 24px;
    }
    .what-card-icon {
        width: 72px;
        height: 72px;
        font-size: 1.8rem;
    }
    .what-card-title {
        font-size: 1.95rem;
    }
    .what-card-text {
        font-size: 1.2rem;
        line-height: 1.6;
    }
    .what-carousel-arrow {
        width: 56px;
        height: 56px;
        font-size: 1.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .what-card {
        transition: none;
    }
}

/* ============================================================
   Price comparison — "End subscription rip-offs" Why section
   ============================================================ */

.price-compare-card {
    background: #181c27;
    border: 1px solid #252a38;
    border-radius: 18px;
    padding: 1.75rem;
    height: 100%;
}

.price-compare-card--awerka {
    border-color: rgba(249, 115, 22, 0.55);
    box-shadow: 0 24px 50px -24px rgba(249, 115, 22, 0.25);
}

.price-compare-head {
    font-size: 1.05rem;
    font-weight: 700;
    color: #f0f2f7;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #252a38;
}

.price-compare-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0;
    color: rgba(255, 255, 255, 0.75);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.price-compare-list li:last-child {
    border-bottom: none;
}

.price-compare-list--check li {
    justify-content: flex-start;
}

.price-compare-list li span:last-child {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
}

.price-compare-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #252a38;
    font-weight: 700;
    font-size: 1.6rem;
}

.price-compare-total small {
    font-size: 0.8rem;
    font-weight: 500;
    opacity: 0.6;
}

.price-compare-total--bad span:last-child {
    color: #f87171;
}

.price-compare-total--good span:last-child {
    color: #f97316;
}

.price-compare-vs {
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.45);
    padding: 0.5rem 0;
}

@media (min-width: 1800px) {
    .price-compare-head {
        font-size: 1.2rem;
    }
    .price-compare-list li,
    .price-compare-list--check li {
        font-size: 1.05rem;
    }
    .price-compare-total {
        font-size: 1.85rem;
    }
}

/* ============================================================
   Tool-Chaos Before/After Diagonal Split
   index.html "Done with paperwork and tool chaos" section —
   two photos side-by-side touching, with an orange diagonal seam
   overlay between them. "Before" is desaturated/dimmed.
   Mobile (<lg): images stack vertically, seam hidden, captions
   interleaved under their image via CSS grid.
   ============================================================ */

.tool-chaos-split__panes {
    position: relative;
    display: flex;
    gap: 0;
    align-items: stretch;
}

.tool-chaos-split__image {
    flex: 1 1 50%;
    min-width: 0;
    width: 50%;
    /* Cinema 2.5:1 crop keeps the whole section on one viewport for
       13" laptops while keeping the faces well-framed. */
    aspect-ratio: 5 / 2;
    object-fit: cover;
    object-position: center;
    height: auto;
    display: block;
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.35);
}

.tool-chaos-split__image--before {
    border-top-left-radius: 1.5rem;
    border-bottom-left-radius: 1.5rem;
    /* "Somewhat greyer/darker" — readable, signals unwanted state. */
    filter: grayscale(0.7) brightness(0.78) contrast(0.95);
}

.tool-chaos-split__image--after {
    border-top-right-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
    /* Bias crop upward so the woman's head stays fully in frame
       at the wide 5:2 aspect (her face sits in the upper third). */
    object-position: center 30%;
}

.tool-chaos-split__seam {
    /* Diagonal orange stroke that overlays the seam between the two
       images. Extends slightly above/below the image edge for drama. */
    position: absolute;
    top: -1.5rem;
    bottom: -1.5rem;
    left: 50%;
    width: 8px;
    background: #f97316;
    transform: translateX(-50%) rotate(12deg);
    border-radius: 999px;
    box-shadow: 0 0 2.5rem rgba(249, 115, 22, 0.55);
    z-index: 3;
    pointer-events: none;
}

.tool-chaos-split__captions {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    padding: 0 0.5rem;
}

.tool-chaos-split__caption {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
}

.tool-chaos-split__caption--before {
    color: rgba(240, 242, 247, 0.5);
}

.tool-chaos-split__caption--after {
    color: #f97316;
}

/* Two-column text mirror below the images: left column (before) is
   slightly dimmed to echo the desaturated chaos photo; right column
   (after) carries the brand-orange highlight + workflow story. */
.tool-chaos-text--before {
    opacity: 0.7;
}

/* "Built for your industry" diversity banner: wide lineup of people on
   a white background sits inside a dark section, so we fade the left
   and right edges into the bg via mask-image. */
.industries-people-banner {
    position: relative;
    overflow: hidden;
    border-radius: 0.75rem;
}

.industries-people-banner img {
    display: block;
    width: 100%;
    height: auto;
    mask-image: linear-gradient(to right,
                                transparent 0%,
                                rgba(0, 0, 0, 1) 8%,
                                rgba(0, 0, 0, 1) 92%,
                                transparent 100%);
    -webkit-mask-image: linear-gradient(to right,
                                        transparent 0%,
                                        rgba(0, 0, 0, 1) 8%,
                                        rgba(0, 0, 0, 1) 92%,
                                        transparent 100%);
}

@media (max-width: 991.98px) {
    /* Stack images vertically; interleave captions under their image.
       display: contents on the wrappers lets the outer grid see all
       four leaf elements directly. */
    .tool-chaos-split {
        display: grid;
        grid-template-areas:
            "before-img"
            "before-cap"
            "after-img"
            "after-cap";
        gap: 0.5rem;
    }
    .tool-chaos-split__panes,
    .tool-chaos-split__captions {
        display: contents;
    }
    .tool-chaos-split__image--before {
        grid-area: before-img;
        width: 100%;
        border-radius: 1rem;
        margin-bottom: 0.5rem;
    }
    .tool-chaos-split__image--after {
        grid-area: after-img;
        width: 100%;
        border-radius: 1rem;
        margin-top: 0.75rem;
        margin-bottom: 0.5rem;
    }
    .tool-chaos-split__caption--before { grid-area: before-cap; }
    .tool-chaos-split__caption--after { grid-area: after-cap; }
    .tool-chaos-split__seam {
        display: none;
    }
}

/* Rendered Markdown in detail-page description boxes (detail_description tag). */
.detail-md > :first-child { margin-top: 0; }
.detail-md > :last-child { margin-bottom: 0; }
.detail-md ul, .detail-md ol { padding-left: 1.25rem; margin-bottom: 0.5rem; }
.detail-md pre { white-space: pre-wrap; }
.detail-md img { max-width: 100%; height: auto; }
/* Collapsed preview: clamp height instead of slicing the Markdown source. */
.detail-md--clamped { max-height: 7.5em; overflow: hidden; }

/* One-time hints (coachmarks). The callout sits directly under the feature it
   explains and points up at it — no floating popover, so it can't cover the
   input on a phone and needs no positioning JS. */
.app-hint-inner {
    position: relative;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    background-color: rgba(var(--bs-primary-rgb), 0.06);
}
.app-hint-inner::before,
.app-hint-inner::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 1.25rem;
    border: 0.5rem solid transparent;
}
/* Two triangles: the lower one paints the fill over the border's tip. */
.app-hint-inner::before {
    border-bottom-color: var(--bs-border-color);
}
.app-hint-inner::after {
    margin-bottom: -1px;
    border-bottom-color: rgba(var(--bs-primary-rgb), 0.06);
}
[data-bs-theme="dark"] .app-hint-inner {
    background-color: rgba(var(--bs-primary-rgb), 0.12);
}
[data-bs-theme="dark"] .app-hint-inner::after {
    border-bottom-color: rgba(var(--bs-primary-rgb), 0.12);
}

/* Received mail (PCP-T-2026-1561) --------------------------------------- */

/* The frame's height is set by mail-view.js from its content; this is only
   the floor for the moment before the script runs, so the card does not
   jump. A fixed height here would put the old 320px problem back. */
.email_iframe {
    min-height: 80px;
    display: block;
}

.mail-plain {
    white-space: pre-wrap;
    word-break: break-word;
    margin-bottom: 0;
}

/* Attachments as tiles rather than full-width rows: three screenshots used
   to take as much vertical space as the message itself, and their filenames
   said nothing about what was in them. */
.mail-attachment {
    width: 8.5rem;
    overflow: hidden;
    background: var(--bs-body-bg);
}

.mail-attachment__thumb {
    width: 100%;
    height: 5.5rem;
    object-fit: cover;
    display: block;
    background: var(--bs-secondary-bg);
}

.mail-attachment__thumb--file {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mail-attachment__meta {
    padding: 0.375rem 0.5rem;
}

.mail-preview {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.75);
    cursor: zoom-out;
}

.mail-preview[hidden] {
    display: none;
}

.mail-preview__figure {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    text-align: center;
}

.mail-preview__img {
    max-width: 100%;
    max-height: calc(100vh - 6rem);
    object-fit: contain;
}

.mail-preview__caption {
    color: #fff;
    font-size: 0.875rem;
    padding-top: 0.5rem;
}

/* File Hub: the whole page is the drop zone, so show where a dragged file lands.
   Uppy's DropTarget puts .uppy-is-drag-over on its target element (body). */
body.uppy-is-drag-over #filehub-app {
    outline: 2px dashed var(--bs-primary);
    outline-offset: 6px;
    border-radius: var(--bs-border-radius-lg);
}