:root {
    --leaf-900: #0f3f17;
    --leaf-800: #17551f;
    --leaf-700: #247229;
    --leaf-600: #358f31;
    --leaf-500: #53aa41;
    --leaf-300: #9cd86f;
    --leaf-200: #bde88e;
    --leaf-100: #e9f9d8;
    --ink: #12301a;
    --surface: #ffffff;
}

body {
    min-height: 100vh;
    font-family: "Manrope", "Segoe UI", Tahoma, sans-serif;
    color: var(--ink);
    background:
        radial-gradient(1200px 500px at 5% -10%, #78c85d80 0, #78c85d00 60%),
        radial-gradient(900px 450px at 100% 0, #2f8b3650 0, #2f8b3600 60%),
        linear-gradient(160deg, #f4fde9 0%, #e4f7cf 45%, #dcf4ca 100%);
}

.topbar {
    border-bottom: 1px solid #9cd86f66;
    background: #f6ffe8d4;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.topbar-inner {
    min-height: 70px;
}

.navbar-brand {
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--leaf-900);
}

.brand-dot {
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--leaf-500), var(--leaf-700));
    box-shadow: 0 0 0 6px #7fcf5e2e;
}

.navbar-toggler {
    border-color: #83c96599;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem #4aab4f33;
}

.navbar-nav .nav-link {
    color: #1a5b27;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: #0f421b;
    background: #90d46736;
}

.user-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.83rem;
    font-weight: 700;
    color: #1c5f29;
    border: 1px solid #8ccf6a;
    background: #f4ffe9;
    border-radius: 999px;
    padding: 0.25rem 0.7rem;
}

.hero-card {
    background: linear-gradient(135deg, #ffffffcf 0%, #f3ffe4cf 100%);
    border: 1px solid #98d86b7a;
    border-radius: 1.25rem;
    padding: clamp(1.1rem, 2vw, 2rem);
    box-shadow: 0 20px 50px #2a692010;
}

.eyebrow {
    display: inline-block;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--leaf-700);
}

.btn-emerald {
    --bs-btn-bg: var(--leaf-700);
    --bs-btn-border-color: var(--leaf-700);
    --bs-btn-hover-bg: var(--leaf-800);
    --bs-btn-hover-border-color: var(--leaf-800);
    --bs-btn-active-bg: var(--leaf-900);
    --bs-btn-active-border-color: var(--leaf-900);
    --bs-btn-color: #f8fff2;
    border-radius: 0.85rem;
    font-weight: 700;
    padding: 0.58rem 1rem;
}

.module {
    border-radius: 1rem;
    background:
        radial-gradient(220px 80px at 100% 0, #9fdf7529 0, #9fdf7500 72%),
        linear-gradient(180deg, #ffffff 0%, #f6ffeb 100%);
    box-shadow: 0 10px 30px #4b84210f;
}

.module-kicker {
    color: var(--leaf-700);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.btn-outline-success {
    --bs-btn-color: var(--leaf-700);
    --bs-btn-border-color: #6dbd52;
    --bs-btn-hover-bg: var(--leaf-700);
    --bs-btn-hover-border-color: var(--leaf-700);
    --bs-btn-hover-color: #f8fff4;
}

.table-sort {
    color: #1a5b27;
    font-weight: 700;
    text-decoration: none;
}

.table-sort:hover,
.table-sort:focus {
    color: #0f421b;
    text-decoration: none;
}

.sort-indicator {
    display: inline-block;
    min-width: 0.9rem;
    margin-left: 0.2rem;
    color: #2b7a36;
    font-size: 0.85em;
}

.mail-search-input {
    max-width: 420px;
}

.mail-page-size {
    width: 110px;
}

.mail-actions-col {
    width: 98px;
    text-align: center;
}

.offers-actions-col {
    width: 110px;
    white-space: nowrap;
    text-align: left;
}

.customers-actions-col {
    width: 130px;
    white-space: nowrap;
    text-align: left;
}

.mail-date-col {
    min-width: 132px;
    white-space: nowrap;
}

.mail-price-col {
    white-space: nowrap;
}

.inquiry-actions-stack {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: stretch;
}

.mail-title-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-height: 1.2;
    max-height: calc(1.2em * 3);
    overflow: hidden;
}

.mail-date-name {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mail-anfrage-cell {
    min-width: 300px;
    white-space: pre-wrap;
}

.mail-original-body {
    white-space: pre-wrap;
    overflow-x: auto;
    line-height: 1.45;
}

.dashboard-inbox-list {
    max-height: 260px;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.dashboard-inbox-item {
    display: grid;
    grid-template-columns: minmax(118px, auto) minmax(0, 1fr);
    gap: 0.55rem;
    align-items: baseline;
    padding: 0.28rem 0.35rem;
    border-bottom: 1px solid #9cd86f40;
    border-radius: 0.35rem;
    font-size: 0.88rem;
}

.dashboard-inbox-item:last-child {
    border-bottom: 0;
}

.dashboard-inbox-item.is-imported {
    background: #e7f8d7;
    box-shadow: inset 0 0 0 1px #9cd86f66;
}

.dashboard-inbox-date {
    color: #376040;
    white-space: nowrap;
}

.dashboard-inbox-subject {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.offer-position-row.offer-position-selected {
    background: #f2ffe5;
    border-radius: 0.75rem;
    box-shadow: inset 0 0 0 1px #9cd86f;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

.inquiry-row-new>td {
    background: #f2ffe5;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0;
    border: 1px solid transparent;
}

.status-badge::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: currentColor;
}

.status-badge.status-entwurf {
    background: #fff7df;
    border-color: #ebd083;
    color: #7a5b0f;
}

.status-badge.status-gesendet {
    background: #e9f9d8;
    border-color: #9cd86f;
    color: #1f6f2f;
}

.status-badge.status-angenommen {
    background: #dcf7ed;
    border-color: #74cdb0;
    color: #11614e;
}

.status-badge.status-nicht-angenommen {
    background: #f5ece7;
    border-color: #d6a78f;
    color: #7a3e24;
}

.status-badge.status-rechnung-erstellt {
    background: #e7f0fb;
    border-color: #93b9df;
    color: #205278;
}

.status-badge.status-abgeschlossen {
    background: #eef2f5;
    border-color: #aeb9c2;
    color: #36424c;
}

.status-badge.status-default {
    background: #eef2f5;
    border-color: #c8d2da;
    color: #4e5b66;
}

.footer {
    color: #285f32;
    padding: 1.4rem 0 2.1rem;
}

.footer-note {
    color: #3f7547;
}

.login-wrap {
    width: min(460px, 100%);
    margin-top: clamp(1rem, 3vh, 2.5rem);
}

.form-control {
    border-radius: 0.7rem;
    border-color: #9dd277;
    background: #fbfff6;
}

.form-control:focus {
    border-color: #5da844;
    box-shadow: 0 0 0 0.2rem #63b94a33;
}

.form-control.name-field-missing,
.form-select.name-field-missing {
    border-color: #b00020;
    background-color: #ffd6d6;
    color: #5c0010;
}

.form-control.name-field-missing:focus,
.form-select.name-field-missing:focus {
    border-color: #9a001b;
    box-shadow: 0 0 0 0.22rem #d0002f40;
}

.offer-type-select-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
}

.offer-type-select-wrap>select {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.offer-type-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
}

.offer-type-btn {
    min-width: 7.4rem;
}

@media (max-width: 576px) {

    .offers-actions-col .btn,
    .customers-actions-col .btn {
        width: 100%;
    }

    .inquiries-compact-table .mail-actions-col {
        width: 76px;
        vertical-align: top;
    }

    .inquiries-compact-table .mail-date-col {
        min-width: 110px;
        vertical-align: top;
        white-space: normal;
    }

    .inquiries-compact-table .mail-price-col {
        min-width: 78px;
        text-align: right;
        vertical-align: top;
    }

    .inquiries-compact-table td,
    .inquiries-compact-table th {
        padding-top: 0.28rem;
        padding-bottom: 0.28rem;
        padding-left: 0.35rem;
        padding-right: 0.35rem;
    }

    .inquiries-compact-table .mail-actions-col .btn {
        width: 100%;
        min-width: 0;
        padding: 0.18rem 0.35rem;
        line-height: 1.1;
        font-size: 0.78rem;
    }

    .inquiry-actions-stack {
        gap: 0.18rem;
    }

    .inquiries-compact-table .mail-title-clamp {
        line-height: 1.15;
        max-height: calc(1.15em * 3);
    }

    .inquiries-compact-table .mail-date-name {
        max-width: 7.8rem;
        line-height: 1.15;
    }
}

.select2-container--default .select2-selection--single {
    min-height: 38px;
    border-color: #9dd277;
    border-radius: 0.7rem;
    background: #fbfff6;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px;
    color: var(--ink);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
}

.select2-dropdown {
    border-color: #9dd277;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--leaf-700);
}

.is-ready .hero-card,
.is-ready .module {
    animation: rise-in 480ms ease both;
}

.is-ready .module:nth-child(2) {
    animation-delay: 60ms;
}

.is-ready .module:nth-child(3) {
    animation-delay: 120ms;
}

.is-ready .module:nth-child(4) {
    animation-delay: 180ms;
}

@keyframes rise-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
\n\n/* ---- Blue color scheme (app.color_scheme = blue) ---- */\n:root[data-color-scheme=\ blue\] {\n    --leaf-900: #0a1e3d;\n    --leaf-800: #0f2d5c;\n    --leaf-700: #164a8a;\n    --leaf-600: #2563b8;\n    --leaf-500: #3b82d0;\n    --leaf-300: #7ab8f0;\n    --leaf-200: #a8d4fc;\n    --leaf-100: #dceefb;\n    --ink: #0c1a2e;\n}\n\n:root[data-color-scheme=\blue\] body {\n    background:\n        radial-gradient(1200px 500px at 5% -10%, #5b9bd580 0, #5b9bd500 60%),\n        radial-gradient(900px 450px at 100% 0, #2563b850 0, #2563b800 60%),\n        linear-gradient(160deg, #e8f0fd 0%, #cde0f9 45%, #c7ddfa 100%);\n}\n\n:root[data-color-scheme=\blue\] .topbar {\n    border-bottom: 1px solid #7ab8f066;\n    background: #eef4fcd4;\n}