@font-face {
    font-family: 'Atkinson Hyperlegible';
    src: url('./assets/font/AtkinsonHyperlegible-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Atkinson Hyperlegible';
    src: url('./assets/font/AtkinsonHyperlegible-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Atkinson Hyperlegible';
    src: url('./assets/font/AtkinsonHyperlegible-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Atkinson Hyperlegible';
    src: url('./assets/font/AtkinsonHyperlegible-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

:root {
    --color-mint-green: #ecf7ef;
    --color-vivid-green: #72cf31;
    --color-fern-green: #66a51b;
    --color-dark-green: #368235;
    --color-light-green: #ebf5eb;
    --color-grey-green: #243a30;
    --color-spring-mist: #d9f4cb;
    --color-sunshine-gold: #7a6200;
}

* {
    box-sizing: border-box;
}

body {
    font-family:
        'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
        sans-serif;
    margin: 0;
    font-size: 16px;
    background: linear-gradient(135deg, var(--color-mint-green) 0%, var(--color-light-green) 50%, var(--color-spring-mist) 100%);
    min-height: 100vh;
}

.auth-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
}

.auth-card {
    background: white;
    padding: 40px;
    border-radius: 16px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.04);
    width: 100%;
    max-width: 420px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.auth-header {
    text-align: center;
    margin-bottom: 30px;
}

.auth-header .icon {
    font-size: 48px;
    margin-bottom: 10px;
}

.banner {
    max-width: 300px;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.auth-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-dark-green);
    margin-top: 6px;
    letter-spacing: 0.5px;
}

.auth-tabs {
    display: flex;
    border-bottom: 2px solid var(--color-mint-green);
    margin-bottom: 25px;
    gap: 4px;
}

.auth-tab {
    flex: 1;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    font-weight: 500;
    color: #757575;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all 0.3s ease;
    border-radius: 8px 8px 0 0;
}

.auth-tab:hover {
    background-color: var(--color-light-green);
    color: var(--color-dark-green);
}

.auth-tab.active {
    color: var(--color-dark-green);
    border-bottom-color: var(--color-vivid-green);
    background-color: var(--color-light-green);
}

.auth-form {
    display: none;
}

.auth-form.active {
    display: block;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--color-grey-green);
}

.form-group input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-size: 14px;
    transition: all 0.3s ease;
    background-color: #fafafa;
}

.form-group input:focus {
    outline: none;
    border-color: var(--color-fern-green);
    background-color: white;
    box-shadow: 0 0 0 3px rgba(102, 165, 27, 0.15);
}

.auth-button, .button, .btn-save-next {
    background-color: var(--color-fern-green);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(102, 165, 27, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.auth-button {
    width: 100%;
    padding: 14px;
}

.button {
    padding: 14px 24px;
    min-height: 48px;
}

.btn-save-next {
    padding: 14px;
    box-shadow: 0 4px 12px rgba(114, 207, 49, 0.3);
}

.auth-button:hover, .button:hover, .btn-save-next:hover {
    background-color: var(--color-dark-green);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 165, 27, 0.4);
}

.auth-button:active, .button:active, .btn-save-next:active {
    transform: translateY(0);
}

.auth-button:disabled, .button:disabled, .btn-save-next:disabled {
    background: #e0e0e0;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.loading {
    opacity: 0.6;
    position: relative;
}

.loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 2px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.error-message {
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
    color: #c62828;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 15px;
    display: none;
    border-left: 4px solid #e53935;
}

.error-message.show {
    display: block;
    animation: slideIn 0.3s ease;
}

.success-message {
    background: linear-gradient(135deg, var(--color-mint-green) 0%, var(--color-spring-mist) 100%);
    color: var(--color-dark-green);
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 15px;
    display: none;
    border-left: 4px solid var(--color-fern-green);
}

.success-message.show {
    display: block;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.auth-footer {
    margin-top: 24px;
    text-align: center;
    font-size: 12px;
    color: #9e9e9e;
}

.app-container {
    display: none;
    flex-direction: column;
    height: 100vh;
}

.app-container.show {
    display: flex;
}

.sidebar {
    width: 260px;
    background: #ffffff;
    color: #333;
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
    overflow-y: auto;
    border-right: 1px solid var(--color-mint-green);
    display: flex;
    flex-direction: column;
}

.header {
    padding: 20px 16px;
    border-bottom: 1px solid var(--color-mint-green);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
}

.header-info {
    line-height: 1.3;
    text-align: center;
    width: 100%;
}

.header-info .banner {
    max-width: 200px;
    margin-bottom: 4px;
}

.header-info div:last-child {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-grey-green);
    letter-spacing: 0.3px;
}

.user-info {
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-mint-green);
    background: var(--color-light-green);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.user-info-email {
    font-size: 14px;
    color: var(--color-grey-green);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.logout-button {
    padding: 6px 12px;
    background-color: white;
    border: 1px solid var(--color-mint-green);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--color-grey-green);
    white-space: nowrap;
}

.logout-button:hover {
    background-color: var(--color-mint-green);
    border-color: var(--color-fern-green);
    color: var(--color-dark-green);
}

.menu-list {
    list-style: none;
    padding: 8px 0;
    margin: 0;
    flex: 1;
}

.menu-item {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 15px;
    transition: all 0.15s ease;
    user-select: none;
    margin: 1px 6px;
    border-radius: 8px;
    color: var(--color-grey-green);
}

.menu-item:hover:not(.active) {
    background: var(--color-light-green);
    color: var(--color-dark-green);
}

.menu-item:hover:not(.active) .icon {
    color: var(--color-dark-green);
}

.menu-item.active {
    background: var(--color-spring-mist);
    color: var(--color-dark-green);
    font-weight: 600;
}

.menu-item.active .icon {
    color: var(--color-dark-green);
}

.menu-item.sidebar-add-new {
    margin: 4px 10px;
    padding: 5px 12px;
    border: 1.5px dashed var(--color-fern-green);
    border-radius: 6px;
    color: var(--color-fern-green);
    font-size: 12px;
    font-weight: 500;
    justify-content: center;
    opacity: 0.7;
    transition: all 0.15s ease;
}

.menu-item.sidebar-add-new:hover {
    opacity: 1;
    background: var(--color-light-green);
    border-color: var(--color-dark-green);
    color: var(--color-dark-green);
}

.menu-item.sidebar-add-new .icon {
    margin-right: 4px;
    color: inherit;
}

.menu-item .icon {
    margin-right: 10px;
    font-size: 18px;
    opacity: 0.9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-fern-green);
}

.menu-item .icon svg {
    flex-shrink: 0;
}

.menu-item .menu-text {
    flex: 1;
}

.menu-item .dropdown-toggle {
    margin-left: auto;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    color: var(--color-fern-green);
    opacity: 0.7;
}

.menu-item.collapsible-parent:hover .dropdown-toggle {
    opacity: 1;
}

.submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease-out;
    background: #fafafa;
    border-radius: 6px;
    margin: 2px 6px;
}

.submenu.open {
    max-height: 800px;
    transition: max-height 0.3s ease-in;
}

.submenu-item {
    padding: 8px 16px 8px 42px;
    cursor: pointer;
    color: #666;
    font-size: 14px;
    transition: all 0.15s ease;
    border-radius: 6px;
    margin: 1px 4px;
}

.submenu-item:hover:not(.active) {
    background: var(--color-mint-green);
    color: var(--color-dark-green);
}

.submenu-item.active {
    font-weight: 600;
    color: var(--color-dark-green);
    background: var(--color-mint-green);
}

.main-content {
    flex-grow: 1;
    padding: 32px;
    overflow-y: auto;
    background: linear-gradient(135deg, #fafafa 0%, var(--color-light-green) 100%);
}

.view-title {
    font-size: 32px;
    font-weight: 300;
    margin-bottom: 24px;
    color: var(--color-dark-green);
    letter-spacing: -0.5px;
}

.view-content {
    padding: 24px;
    background: white;
    border-radius: 16px;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.06),
        0 1px 4px rgba(0, 0, 0, 0.04);
    min-height: 70vh;
    border: 1px solid rgba(102, 165, 27, 0.15);
}

.title {
    font-size: 26px;
    font-weight: 600;
    color: var(--color-dark-green);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--color-spring-mist);
    letter-spacing: -0.5px;
}

.scope-tags {
    display: flex;
    gap: 6px;
    margin-top: -12px;
    margin-bottom: 16px;
}

.scope-tag {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 12px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.scope-1 {
    background: #e8f5e9;
    color: #2e7d32;
}

.scope-2 {
    background: #e3f2fd;
    color: #1565c0;
}

.scope-3 {
    background: #fff3e0;
    color: #e65100;
}

.input-group {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 24px;
}

.flex-grow {
    flex-grow: 1;
    width: 100%;
    min-width: 180px;
}

.w-small {
    width: 200px;
}

label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-grey-green);
    margin-bottom: 6px;
    letter-spacing: 0.2px;
}

input[type="number"],
select {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-size: 14px;
    transition: all 0.3s ease;
    background-color: white;
}

input[type="number"]:focus,
select:focus {
    outline: none;
    border-color: var(--color-vivid-green);
    box-shadow: 0 0 0 3px rgba(114, 207, 49, 0.15);
}

input[type="number"] {
    text-align: right;
}

select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23243a30' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}



#addBtn {
    height: 42px;
}

#addBtn:not(:disabled) {
    box-shadow: 0 2px 8px rgba(102, 165, 27, 0.3);
}

#addBtn:not(:disabled):hover {
    box-shadow: 0 4px 12px rgba(102, 165, 27, 0.4);
}

#saveBtn {
    margin: 0 !important;
    width: auto !important;
    padding: 14px 24px !important;
}

.btn-danger {
    background-color: #e53935;
    box-shadow: 0 4px 12px rgba(229, 57, 53, 0.3);
}

.btn-danger:hover {
    background-color: #d32f2f;
    box-shadow: 0 6px 16px rgba(229, 57, 53, 0.4);
}

.btn-delete {
    background: #e0e0e0;
    color: #888;
    box-shadow: none;
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.btn-delete:hover {
    background-color: #e53935;
    color: white;
    box-shadow: 0 6px 16px rgba(229, 57, 53, 0.4);
}

.btn-secondary {
    background: var(--color-mint-green);
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--color-grey-green);
    font-weight: 600;
}

.btn-secondary:hover {
    background: var(--color-spring-mist);
}

.form-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin-top: 10px;
    border: 1px solid var(--color-mint-green);
    border-radius: 8px;
    overflow: hidden;
}

.form-table th,
.form-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
}

.form-table thead th {
    text-align: left;
    background-color: var(--color-light-green);
    color: var(--color-dark-green);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px;
}

.form-table tbody tr {
    transition: background-color 0.2s ease;
    background-color: white;
}

.form-table tbody tr:not(#emptyRow):hover {
    background-color: var(--color-mint-green);
}

.form-table tbody tr:last-child td {
    border-bottom: none;
}

.form-table td:nth-child(2) {
    text-align: right;
    font-weight: 500;
    color: var(--color-grey-green);
}

.form-table td:nth-child(3) {
    text-align: center;
}

.form-table.dist-table td:nth-child(2) {
    text-align: left;
    font-weight: 400;
    color: inherit;
}

.form-table.dist-table td:nth-child(3) {
    text-align: right;
}

.form-table input {
    width: 80px;
    padding: 6px;
    border-radius: 4px;
    border: 1px solid #cbd5e0;
}

/* Data-widget row actions: share the unit-card icon-button visuals. The
 * `.edit-btn` / `.remove-btn` classes stay on the elements as JS hooks. */
.actions {
    white-space: nowrap;
    text-align: right;
}
.form-table .actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

.form-table tbody tr.editing-row {
    background-color: #e8f5e9;
    box-shadow: inset 3px 0 0 var(--color-fern-green);
}

.form-table tbody tr.editing-row:hover {
    background-color: #dcedc8;
}

#emptyRow td {
    text-align: center;
    color: #9e9e9e;
    font-style: italic;
    padding: 24px 16px;
    background-color: #fafafa;
}

@media (max-width: 768px) {
    .sidebar {
        width: 240px;
    }

    .main-content {
        padding: 20px;
    }

    .container {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .input-group {
        flex-direction: column;
        align-items: stretch;
    }

    .w-small {
        width: 100%;
    }

    #addBtn {
        height: 42px;
        margin-top: 8px;
    }

    .auth-card {
        padding: 28px;
    }
}

.home-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
}
.home-title {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 40px;
    color: var(--color-grey-green);
    text-align: center;
}
.home-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}
.home-card {
    background: white;
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid #e0e0e0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

.home-card-cta {
    margin-top: 24px;
    color: var(--color-fern-green);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.5px;
    padding: 10px 24px;
    border-radius: 30px;
    background-color: var(--color-light-green);
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.home-card:hover .home-card-cta {
    background-color: var(--color-fern-green);
    color: white;
    box-shadow: 0 4px 12px rgba(102, 165, 27, 0.3);
}

.year-chip {
    padding: 8px 14px;
    border-radius: 20px;
    border: 1.5px solid var(--color-mint-green);
    background: white;
    color: var(--color-dark-green);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.year-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid var(--color-mint-green);
    background: white;
    color: var(--color-grey-green);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.year-arrow:hover {
    border-color: var(--color-fern-green);
    color: var(--color-fern-green);
}
.year-chip:hover { border-color: var(--color-fern-green); }
.year-chip.active {
    background: var(--color-fern-green);
    color: white;
    border-color: var(--color-fern-green);
}

.home-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    border-color: var(--color-vivid-green);
}
.home-card.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #fafafa;
}
.home-card.disabled:hover {
    transform: none;
    box-shadow: none;
    border-color: #e0e0e0;
}
.home-card-icon {
    font-size: 56px;
    margin-bottom: 24px;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.home-card-icon img {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

.home-card-icon svg {
    width: 56px;
    height: 56px;
    color: var(--color-fern-green);
}
.home-card-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-grey-green);
    margin-bottom: 12px;
}
.home-card-description {
    font-size: 15px;
    color: #666;
    line-height: 1.5;
    display: block;
    margin-bottom: 16px;
    flex-grow: 1;
}
.info-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--color-spring-mist);
    color: var(--color-dark-green);
    border: none;
    font-family: serif;
    font-style: italic;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s;
    z-index: 2;
}
.info-btn:hover {
    background-color: var(--color-vivid-green);
    color: white;
    transform: scale(1.1);
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: fadeIn 0.2s forwards;
    backdrop-filter: blur(2px);
}

.modal-content {
    background: white;
    width: 90%;
    max-width: 600px;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    transform: scale(0.9);
    animation: scaleIn 0.2s forwards;
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.modal-header {
    padding: 20px 24px;
    background: linear-gradient(135deg, var(--color-light-green) 0%, #ffffff 100%);
    border-bottom: 1px solid var(--color-mint-green);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--color-dark-green);
}

.modal-close {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: #9e9e9e;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s;
}

.modal-close:hover {
    color: #e53935;
}

.modal-body {
    padding: 24px;
    line-height: 1.6;
    color: var(--color-grey-green);
    font-size: 15px;
    max-height: 70vh;
    overflow-y: auto;
}

.modal-body p {
    margin-top: 0;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

@keyframes scaleIn {
    to { transform: scale(1); }
}

.home-card-badge {
    display: inline-block;
    background: #f5f5f5;
    color: #9e9e9e;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 24px;
    border-radius: 30px;
    margin-top: 24px;
    border: 1px solid #e0e0e0;
}
@media (max-width: 600px) {
    .home-card-grid {
        grid-template-columns: 1fr;
    }
}
.form-body {
    background: #fcfdfc;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--color-mint-green);
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.selection-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.selection-row .flex-grow {
    flex: 1;
    min-width: 200px;
}

.dynamic-fields-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    width: 100%;
}

.dynamic-fields-grid .flex-grow {
    width: 100%;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-fern-green);
    cursor: pointer;
}

.add-container {
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #eee;
    padding-top: 15px;
}

#addBtn {
    min-width: 120px;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 28px;
    border-radius: 16px;
    background: white;
    border: 2px solid var(--color-mint-green);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
.vineyard-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-mint-green);
}

.vineyard-section:first-of-type {
    margin-top: 8px;
}

.menu-header-item {
    padding: 12px 20px 8px;
    list-style: none;
}

.vineyard-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-dark-green);
    letter-spacing: -0.2px;
}

.vineyard-type {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-grey-green);
    margin-top: 2px;
    text-transform: capitalize;
    opacity: 0.85;
}

.vineyard-section .menu-item {
    margin-left: 6px;
    margin-right: 6px;
}

.sidebar::-webkit-scrollbar {
    width: 6px;
}
.sidebar::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
    background: var(--color-mint-green);
    border-radius: 10px;
}

.intro-wrapper {
    margin-bottom: 40px;
    line-height: 1.6;
    color: var(--color-grey-green);
    font-size: 15px;
}

.intro-header {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-dark-green);
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center;
    border-bottom: 2px solid var(--color-mint-green);
    padding-bottom: 16px;
}

.intro-section-title {
    font-weight: 700;
    color: var(--color-grey-green);
    margin-top: 24px;
    margin-bottom: 12px;
    font-size: 16px;
}

.intro-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
}

.intro-list li {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    align-items: flex-start;
}

.intro-list li span:first-child {
    font-size: 18px;
    min-width: 24px;
}

.intro-list li .list-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    color: var(--color-fern-green);
}

.intro-list li .list-icon svg {
    width: 16px;
    height: 16px;
}

.intro-footer {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--color-mint-green);
    text-align: center;
}

.intro-footer p {
    margin: 8px 0;
}

.styled-text-content {
    line-height: 1.6;
    color: var(--color-grey-green);
    font-size: 15px;
}

.styled-text-content h3 {
    font-size: 16px;
    color: var(--color-dark-green);
    margin-bottom: 12px;
    margin-top: 24px;
    font-weight: 600;
    border-bottom: 1px solid var(--color-mint-green);
    padding-bottom: 6px;
    letter-spacing: -0.2px;
}

.styled-text-content h3:first-child {
    margin-top: 0;
}

.styled-text-content h4 {
    font-size: 14px;
    color: var(--color-dark-green);
    margin-bottom: 8px;
    margin-top: 16px;
    font-weight: 600;
}

.styled-text-content p {
    margin-bottom: 12px;
}

.styled-text-content ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 16px;
}

.styled-text-content li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 6px;
}

.styled-text-content li::before {
    content: "•";
    color: var(--color-fern-green);
    font-weight: bold;
    position: absolute;
    left: 4px;
    font-size: 1.2em;
    line-height: 1.4;
}

.styled-text-content strong {
    color: var(--color-grey-green);
    font-weight: 600;
}

.styled-text-content .note {
    background: var(--color-light-green);
    padding: 12px 16px;
    border-radius: 8px;
    border-left: 3px solid var(--color-fern-green);
    font-size: 13px;
    margin-top: 16px;
    color: var(--color-grey-green);
}

.styled-text-content .note strong {
    color: var(--color-dark-green);
}

.styled-text-content .warning {
    background: #fff8e1;
    padding: 12px 16px;
    border-radius: 8px;
    border-left: 3px solid var(--color-sunshine-gold);
    font-size: 13px;
    margin-top: 16px;
    color: #5d4037;
}

.styled-text-content .warning strong {
    color: var(--color-sunshine-gold);
}


/* -- Home Intro Enhancements -- */
.intro-lead {
    font-size: 18px;
    font-weight: 500;
    color: var(--color-fern-green);
    margin-bottom: 16px;
}

.intro-steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 16px;
    margin-bottom: 32px;
}

.intro-step {
    display: flex;
    gap: 16px;
    background: white;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    border: 1px solid var(--color-mint-green);
    border-left: 4px solid var(--color-fern-green);
}

.step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--color-light-green);
    color: var(--color-dark-green);
    border-radius: 50%;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}

.step-content {
    flex-grow: 1;
    line-height: 1.6;
}

/* `display: block` used to live here, from the old home-intro module cards
   where <strong> was a title line. Inside the 3-step shell it applied to
   every bold word in every step, so mid-sentence emphasis ("use the separate
   <strong>Grape Supplier Calculator</strong> to…") broke onto its own line.
   Emphasis stays inline; the one rule that relied on the block behaviour
   (.module-text strong) has no markup left using it. */
.step-content strong {
    color: var(--color-dark-green);
    font-size: 16px;
}

.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.module-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: var(--color-mint-green);
    border-radius: 8px;
    border: 1px solid var(--color-light-green);
}

.module-emoji {
    font-size: 24px;
    line-height: 1;
    background: white;
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.module-text {
    font-size: 14px;
}

.module-text strong {
    font-size: 15px;
    margin-bottom: 2px;
}

.intro-tips {
    background: linear-gradient(135deg, var(--color-spring-mist) 0%, var(--color-light-green) 100%);
    padding: 24px;
    border-radius: 12px;
    border: 1px solid var(--color-mint-green);
    margin-top: 40px;
    margin-bottom: 24px;
}

.tips-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-dark-green);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tips-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.tips-list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14px;
    color: var(--color-grey-green);
}

.tips-list li span {
    font-size: 16px;
    margin-top: -2px;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding-bottom: 20px;
    margin-top: 20px;
}

.form-card {
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    margin-bottom: 25px;
    border: 1px solid var(--color-mint-green);
}

.info-title {
    color: var(--color-grey-green);
    font-weight: 700;
    border-bottom: 2px solid var(--color-mint-green);
    padding-bottom: 10px;
    margin-bottom: 20px;
    font-size: 1.1em;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.mixed-panel {
    background: var(--color-light-green);
    border: 1px solid var(--color-mint-green);
    padding: 15px;
    border-radius: 8px;
    margin-top: 15px;
}

.check-item {
    display: block;
    margin-bottom: 10px;
    cursor: pointer;
    font-size: 0.9em;
    color: var(--color-grey-green);
}

.check-item input {
    margin-right: 10px;
}

.config-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 25px;
    border-bottom: 2px solid var(--color-mint-green);
    padding-bottom: 15px;
}

.config-header .title {
    margin: 0 !important;
    border: none !important;
    padding: 0 !important;
    font-size: 24px !important;
    width: auto !important;
    display: block;
}


.input-readonly {
    background: #eee;
}


.section-divider {
    border-top: 1px solid var(--color-mint-green);
    margin-top: 15px;
    padding-top: 15px;
}

.section-divider-thick {
    margin-top: 20px;
    border-top: 1px solid var(--color-mint-green);
    padding-top: 20px;
}

.validation-success {
    color: var(--color-dark-green);
}

.validation-error {
    color: #c53030;
}

.text-muted {
    color: #757575;
}

.text-secondary {
    color: #666;
}

.text-tertiary {
    color: #888;
}

.text-primary {
    color: #333;
}

.intro-footer-text {
    color: #666;
}

.filter-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--color-mint-green);
    padding-bottom: 12px;
}

.filter-btn {
    padding: 10px 18px;
    border-radius: 24px;
    border: 1px solid #e0e0e0;
    background: #fff;
    color: #555;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.filter-btn:hover {
    border-color: #cbd5e0;
    color: var(--color-dark-green);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.04);
}

.filter-btn.active {
    border-color: var(--color-fern-green);
    background: var(--color-mint-green);
    color: var(--color-dark-green);
    transform: none;
    box-shadow: none;
}

.logistics-container {
    margin-bottom: 20px;
    padding: 15px;
    background: var(--color-light-green);
    border-radius: 8px;
    border: 1px solid var(--color-mint-green);
}

.q-btn {
    padding: 8px 16px;
    border-radius: 4px;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s;
}

.q-btn:hover {
    border-color: var(--color-fern-green);
}

.q-btn.active {
    border-color: var(--color-fern-green);
    background: var(--color-mint-green);
    color: var(--color-dark-green);
}

.q-feedback {
    margin-top: 8px;
    color: var(--color-dark-green);
    font-style: italic;
    min-height: 20px;
}

.q-block-divider {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--color-mint-green);
}

.custom-select-display {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    min-height: 42px;
    transition: all 0.3s ease;
}

.custom-select-display:hover {
    border-color: #cbd5e0;
}

.custom-select-display:focus,
.custom-select-display.active {
    border-color: var(--color-fern-green);
    box-shadow: 0 0 0 3px rgba(102, 165, 27, 0.15);
    outline: none;
}

.custom-select-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

.custom-select-text.placeholder {
    color: #666;
}

.custom-select-text.selected {
    color: #333;
    font-weight: 500;
}

.custom-select-arrow {
    font-size: 10px;
    color: var(--color-grey-green);
    transition: transform 0.3s ease;
}

.custom-select-display.active .custom-select-arrow {
    transform: rotate(180deg);
}

.custom-select-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    z-index: 1000;
    margin-top: 8px;
    flex-direction: column;
    max-height: 320px;
    overflow: hidden;
    animation: fadeInDown 0.2s ease-out forwards;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.custom-select-search-wrapper {
    padding: 12px;
    border-bottom: 1px solid var(--color-mint-green);
    background: #fafafa;
}

.custom-select-search {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 14px;
    transition: all 0.2s;
}

.custom-select-search:focus {
    outline: none;
    border-color: var(--color-fern-green);
    box-shadow: 0 0 0 2px rgba(102, 165, 27, 0.1);
}

.custom-select-options {
    overflow-y: auto;
    flex-grow: 1;
    padding-bottom: 8px;
}

/* Custom Scrollbar for Options */
.custom-select-options::-webkit-scrollbar {
    width: 6px;
}
.custom-select-options::-webkit-scrollbar-track {
    background: transparent;
}
.custom-select-options::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 10px;
}
.custom-select-options::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

.select-optgroup-header {
    padding: 8px 14px;
    font-weight: 700;
    background: #f8fcf9;
    font-size: 11px;
    color: var(--color-dark-green);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 1px solid var(--color-mint-green);
}

.select-option {
    padding: 10px 14px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    transition: background-color 0.15s ease, color 0.15s ease;
    display: flex;
    align-items: center;
}

.select-option:hover, .select-option.active {
    background-color: var(--color-mint-green);
    color: var(--color-dark-green);
}

.select-option.indented {
    padding-left: 24px;
}

.select-empty-state {
    padding: 20px;
    text-align: center;
    color: #999;
    font-size: 14px;
    font-style: italic;
}

/* --- Grouped collapsible select (cascading-pest-widget) --------------
   The product list is wider than the trigger because group labels
   ("Group 1 – ACCase Inhibitors / Graminicides (POST)") and some
   product names run long. Override the parent's right:0 so the dropdown
   can grow past the trigger's right edge — clamped to the viewport so
   we never overflow on narrow screens. */
.grouped-select-dropdown {
    max-height: 460px;
    right: auto;
    width: max-content;
    min-width: 100%;
    max-width: min(520px, calc(100vw - 40px));
}

.grouped-select-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--color-mint-green);
    background: #fafcf7;
    font-size: 12px;
    color: var(--color-grey-green);
}

.grouped-select-stats {
    color: #888;
    letter-spacing: 0.2px;
}

.grouped-select-toggle-all {
    border: 1px solid #d8e3cf;
    background: #fff;
    color: var(--color-dark-green);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.grouped-select-toggle-all:hover {
    background: var(--color-mint-green);
    border-color: var(--color-fern-green);
}

.grouped-select-options {
    padding-top: 4px;
}

.grouped-select-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #f5faf2;
    color: var(--color-dark-green);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    border-bottom: 1px solid #e6efe2;
    cursor: pointer;
    user-select: none;
    position: sticky;
    top: 0;
    z-index: 1;
    transition: background-color 0.15s ease;
}

.grouped-select-header:hover {
    background: #ecf6e6;
}

.grouped-select-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    color: var(--color-fern-green);
    transition: transform 0.18s ease;
    flex-shrink: 0;
}

.grouped-select-header.collapsed .grouped-select-chevron {
    transform: rotate(-90deg);
}

.grouped-select-header-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grouped-select-count {
    background: #fff;
    border: 1px solid #d8e3cf;
    color: var(--color-grey-green);
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 999px;
    min-width: 22px;
    text-align: center;
}

.grouped-select-product {
    padding: 8px 14px 8px 36px;
    font-size: 14px;
    color: #333;
    border-left: 3px solid transparent;
    cursor: pointer;
}

.grouped-select-product:hover,
.grouped-select-product.active {
    background-color: var(--color-mint-green);
    color: var(--color-dark-green);
    border-left-color: var(--color-fern-green);
}

.grouped-select-product.selected {
    color: var(--color-dark-green);
    font-weight: 600;
    border-left-color: var(--color-fern-green);
}


.note-input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

.form-text-display {
    display: none;
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-size: 14px;
    background-color: #fafafa;
    color: var(--color-grey-green);
    box-sizing: border-box;
    align-items: center;
    min-height: 42px;
}

.form-text-display.visible {
    display: flex;
}

.dashboard {
    max-width: 1200px;
    margin: 0 auto;
}

.dashboard-header {
    margin-bottom: 24px;
}

.dashboard-title {
    font-size: 36px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--color-dark-green) 0%, var(--color-fern-green) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 0 4px 0;
    letter-spacing: -1px;
}

.dashboard-subtitle {
    color: #666;
    font-size: 16px;
}

.dashboard-header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.dashboard-actions {
    display: flex;
    gap: 10px;
}

.download-btn {
    padding: 8px 16px;
    background-color: white;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #616161;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.download-btn:hover {
    background-color: var(--color-mint-green);
    border-color: var(--color-fern-green);
    color: var(--color-dark-green);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(102, 165, 27, 0.15);
}

.download-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.dashboard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
    margin-top: 24px;
}

.dashboard-card {
    background: linear-gradient(135deg, #ffffff 0%, var(--color-light-green) 100%);
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--color-mint-green);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.dashboard-card-label {
    font-size: 15px;
    color: #546e7a;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 600;
    margin-bottom: 12px;
}

.dashboard-card-value {
    font-size: 42px;
    font-weight: 700;
    color: var(--color-dark-green);
    line-height: 1.1;
    letter-spacing: -1px;
}

.dashboard-card-unit {
    font-size: 15px;
    color: var(--color-vivid-green);
    font-weight: 500;
    margin-top: 6px;
}

.table-container {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    border: 1px solid var(--color-mint-green);
    margin-bottom: 40px;
}

.table-header {
    padding: 20px 28px;
    border-bottom: 2px solid var(--color-mint-green);
    background: linear-gradient(135deg, var(--color-light-green) 0%, #ffffff 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.table-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-dark-green);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.table-title::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 18px;
    background: var(--color-fern-green);
    border-radius: 2px;
}

.table-title-centered {
    margin-bottom: 20px;
    text-align: center;
    justify-content: center;
}

.dashboard-table {
    width: 100%;
    border-collapse: collapse;
}

.dashboard-table th {
    text-align: left;
    padding: 16px 28px;
    background: #fafafa;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-dark-green);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--color-mint-green);
}

.dashboard-table th:nth-child(2),
.dashboard-table th:nth-child(3) {
    text-align: right;
}

.dashboard-table td {
    padding: 16px 28px;
    border-bottom: 1px solid var(--color-light-green);
    font-size: 16px;
    color: var(--color-grey-green);
}

.dashboard-table tr:last-child td {
    border-bottom: none;
}

.dashboard-table tr:hover {
    background: #fafafa;
}

.total-row {
    background: #f5f5f5;
    font-weight: 600;
    font-size: 15px;
}

.total-row:hover {
    background: #f5f5f5;
}

.total-row td {
    border-bottom: 2px solid #e0e0e0;
}

.category-row {
    font-weight: 600;
    background: #fafafa;
}

.category-row:hover {
    background: var(--color-light-green);
}

.subcategory-row td:first-child {
    padding-left: 48px;
    color: #666;
    font-size: 13px;
}

.value-cell {
    text-align: right;
    font-weight: 500;
    color: #1a1a1a;
}

.percent-cell {
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.percent-text {
    width: 50px;
    text-align: right;
    font-size: 13px;
    color: #666;
}

.progress-bar {
    height: 6px;
    width: 80px;
    border-radius: 3px;
    background: #e8e8e8;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: var(--color-fern-green);
    border-radius: 3px;
}

.negative .value-cell,
.negative .percent-text {
    color: var(--color-dark-green);
}

.negative .progress-bar-fill {
    background: var(--color-dark-green);
}

.zero-value td {
    color: #aaa;
}

.zero-value .progress-bar {
    opacity: 0.3;
}

.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.chart-wrapper {
    background: white;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--color-mint-green);
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.chart-wrapper-main {
    flex: 1;
    width: 100%;
    min-width: 0;
}

.grid-chart-wrapper {
    background: white;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--color-mint-green);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.grid-chart-title {
    text-align: center;
    color: var(--color-dark-green);
    margin-bottom: 15px;
    font-size: 14px;
    font-weight: 600;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.grid-chart-canvas-container {
    position: relative;
    height: 200px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.charts-container {
    display: flex;
    margin-bottom: 40px;
    width: 100%;
}

.dashboard-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
    border-bottom: 2px solid var(--color-mint-green);
    padding-bottom: 0;
}

.tab-btn {
    background: none;
    border: none;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
    margin-bottom: -2px;
}

.tab-btn:hover {
    color: var(--color-dark-green);
    background: var(--color-light-green);
    border-radius: 8px 8px 0 0;
}

.tab-btn.active {
    color: var(--color-dark-green);
    border-bottom-color: var(--color-dark-green);
    background: var(--color-light-green);
    border-radius: 8px 8px 0 0;
}

.glossary-tab {
    background: none;
    border: 1.5px solid transparent;
    padding: 7px 18px;
    font-size: 14px;
    font-weight: 600;
    color: #888;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
}

.glossary-tab:hover {
    color: var(--color-dark-green);
    background: var(--color-mint-green);
}

.glossary-tab.active {
    color: white;
    background: var(--color-dark-green);
    border-color: var(--color-dark-green);
}

.toggle-switch-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #666;
    cursor: pointer;
    margin-right: 15px;
}

.toggle-zeros-label {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: var(--color-grey-green);
    cursor: pointer;
    user-select: none;
}

.toggle-zeros-label input {
    margin-right: 6px;
    accent-color: var(--color-fern-green);
    width: 16px;
    height: 16px;
    cursor: pointer;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.toggle-zeros-label:hover {
    color: var(--color-dark-green);
}

.hide-zeros .subcategory-row.zero-value,
.hide-zeros .category-row.zero-value {
    display: none;
}

.hide-water-zeros tr.water-zero-value {
    display: none !important;
}

@media (max-width: 768px) {
    .dashboard-cards {
        grid-template-columns: 1fr;
    }
    .charts-grid {
        grid-template-columns: 1fr;
    }
    .dashboard-table th,
    .dashboard-table td {
        padding: 10px 16px;
    }
    .subcategory-row td:first-child {
        padding-left: 32px;
    }
    .progress-bar {
        width: 60px;
    }
    .dashboard-header-content {
        flex-direction: column;
        gap: 16px;
    }
    .dashboard-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

@media print {
    .sidebar, .view-title, .dashboard-actions, .auth-container, #addBtn, #saveBtn, .button {
        display: none !important;
    }
    .print-only {
        display: block !important;
    }
    .app-container, .main-content, .view-content, .dashboard {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        border: none !important;
        max-width: none !important;
    }
    .dashboard-header {
        margin-bottom: 30px;
        border-bottom: 2px solid #000;
        padding-bottom: 10px;
    }
    .dashboard-title {
        font-size: 22pt;
        color: black !important;
        margin: 0;
        font-weight: bold;
        -webkit-text-fill-color: black !important;
    }
    .dashboard-subtitle {
        font-size: 12pt;
        color: #444 !important;
        margin-top: 5px;
    }
    .report-meta {
        margin-top: 4px;
        font-size: 10pt;
        color: #666;
        font-style: italic;
    }
    .dashboard-cards {
        display: flex !important;
        justify-content: space-between;
        margin-bottom: 30px;
        gap: 15px;
    }
    .dashboard-card {
        border: 1px solid #000;
        border-radius: 0;
        box-shadow: none !important;
        padding: 12px;
        flex: 1;
        text-align: center;
        background: transparent !important;
    }
    .dashboard-card-label {
        font-size: 10pt;
        color: #444;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 5px;
    }
    .dashboard-card-value {
        font-size: 16pt;
        font-weight: bold;
        color: black;
        margin: 5px 0;
    }
    .dashboard-card-unit {
        font-size: 9pt;
        color: #666;
    }
    .charts-container, .charts-grid {
        page-break-inside: avoid;
    }
    .chart-wrapper, .grid-chart-wrapper {
        border: 1px solid #ddd;
        box-shadow: none !important;
    }
    .table-container {
        box-shadow: none !important;
        border: none !important;
        margin-bottom: 40px;
        background: transparent !important;
    }
    .table-header {
        padding: 0 0 10px 0;
        border-bottom: none;
        background: transparent !important;
    }
    .table-title {
        font-size: 14pt;
        color: black;
        border-bottom: 1px solid #000;
        padding-bottom: 5px;
        margin-bottom: 10px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    .table-title::before {
        display: none;
    }
    .dashboard-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 10pt;
    }
    .dashboard-table thead {
        display: table-header-group;
    }
    .dashboard-table tr {
        page-break-inside: avoid;
    }
    .dashboard-table th {
        background: transparent !important;
        color: black !important;
        border-bottom: 2px solid #000;
        padding: 6px 0;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 9pt;
    }
    .dashboard-table td {
        border-bottom: 1px solid #ccc;
        padding: 6px 0;
        color: black !important;
    }
    .category-row td {
        font-weight: bold;
        padding-top: 10px;
    }
    .subcategory-row td:first-child {
        padding-left: 20px;
    }
    .zero-value td {
        color: #ccc !important;
    }
    .progress-bar {
        border: 1px solid #666;
        background: #eee !important;
        height: 8px;
        border-radius: 0;
        width: 60px;
    }
    .progress-bar-fill {
        background: var(--color-dark-green) !important;
        border-radius: 0;
    }
    .zero-value .progress-bar {
        opacity: 0.1;
        border-color: #eee;
    }
    .print-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 8pt;
        color: #888;
        border-top: 1px solid #ddd;
        padding-top: 10px;
    }
}

.floating-nav {
    position: fixed;
    bottom: 24px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 24px;
    pointer-events: none;
    z-index: 100;
}

.floating-nav-btn {
    pointer-events: auto;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--color-fern-green);
    color: var(--color-grey-green);
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4px);
}

.floating-nav-btn:hover {
    background: var(--color-mint-green);
    border-color: var(--color-dark-green);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.floating-nav-btn:active {
    transform: translateY(0);
}

.expand-icon {
    display: inline-block;
    width: 16px;
    margin-right: 8px;
    cursor: pointer;
    font-size: 10px;
    color: var(--color-fern-green);
    transition: transform 0.2s ease;
}

.expand-icon:hover {
    color: var(--color-dark-green);
}

.chart-row {
    background: #fafafa !important;
}

.chart-row:hover {
    background: #fafafa !important;
}

.chart-row td {
    padding: 0 !important;
    border-bottom: 1px solid var(--color-mint-green);
}

.inline-chart-container {
    padding: 12px 20px;
    height: 140px;
    max-width: 400px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.inline-chart-container canvas {
    max-width: 100%;
    max-height: 100%;
}

.chart-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 16px;
}

.chart-header-row .grid-chart-title {
    margin-bottom: 0;
    height: auto;
}

.year-selector {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.year-btn {
    padding: 6px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    background: white;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
}

.year-btn:hover {
    border-color: var(--color-fern-green);
    color: var(--color-dark-green);
}

.year-btn.active {
    background: var(--color-fern-green);
    border-color: var(--color-fern-green);
    color: white;
}

.category-row td:first-child {
    cursor: pointer;
}

.chart-type-toggle {
    display: flex;
    gap: 2px;
    background: #f0f0f0;
    border-radius: 8px;
    padding: 2px;
}

.chart-type-btn {
    padding: 5px 10px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    color: #888;
    transition: all 0.2s ease;
    line-height: 1;
}

.chart-type-btn:hover {
    color: var(--color-dark-green);
}

.chart-type-btn.active {
    background: white;
    color: var(--color-dark-green);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

@media print {
    .year-selector, .expand-icon, .chart-type-toggle {
        display: none !important;
    }
    .chart-row {
        display: none !important;
    }
}

/* ============================================
   3-STEP NAVIGATION LAYOUT
   ============================================ */

.step-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 56px;
    background: white;
    border-bottom: 2px solid var(--color-mint-green);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
}

.step-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.step-logo {
    height: 32px;
    width: auto;
}

.step-nav {
    display: flex;
    gap: 4px;
}

.step-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #888;
    transition: all 0.2s ease;
    font-family: inherit;
}

.step-tab:hover {
    background: var(--color-light-green);
    color: var(--color-dark-green);
}

.step-tab.active {
    background: var(--color-mint-green);
    color: var(--color-dark-green);
}

.step-tab.active .step-num {
    background: var(--color-fern-green);
    color: white;
}

.step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ddd;
    color: #666;
    font-size: 12px;
    font-weight: 700;
    transition: all 0.2s ease;
}

.step-label {
    font-size: 14px;
}

.step-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.step-user {
    font-size: 13px;
    color: var(--color-grey-green);
}

.step-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 32px;
    background: linear-gradient(135deg, #fafafa 0%, var(--color-light-green) 100%);
}

/* Step 1: Units */
.units-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.unit-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    border: 2px solid var(--color-mint-green);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.unit-card:hover {
    border-color: var(--color-fern-green);
    box-shadow: 0 4px 12px rgba(102, 165, 27, 0.15);
}

.unit-card.selected {
    border-color: var(--color-fern-green);
    background: var(--color-mint-green);
}

.unit-card-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-dark-green);
    margin-bottom: 4px;
}

.unit-card-type {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-grey-green);
    text-transform: capitalize;
    opacity: 0.85;
}

.unit-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.unit-card-actions button {
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid var(--color-mint-green);
    background: white;
    color: var(--color-grey-green);
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    font-weight: 600;
}

.unit-card-actions button:hover {
    background: var(--color-light-green);
    border-color: var(--color-fern-green);
    color: var(--color-dark-green);
}

.unit-card-actions .btn-delete-unit {
    border-color: #ffcdd2;
    color: #c62828;
}

.unit-card-actions .btn-delete-unit:hover {
    background: #ffebee;
    border-color: #e53935;
}

.unit-card-actions .btn-goto-footprint {
    background: var(--color-fern-green);
    color: white;
    border-color: var(--color-fern-green);
}

.unit-card-actions .btn-goto-footprint:hover {
    background: var(--color-dark-green);
    border-color: var(--color-dark-green);
}

.add-unit-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    border: 2px dashed var(--color-fern-green);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    opacity: 0.7;
}

.add-unit-card:hover {
    opacity: 1;
    background: var(--color-light-green);
    border-color: var(--color-dark-green);
}

.add-unit-card-icon {
    font-size: 28px;
    color: var(--color-fern-green);
    margin-bottom: 8px;
}

.add-unit-card-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-fern-green);
}

/* Step 2: Footprint */
.footprint-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 16px;
}

.footprint-header-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.step2-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.step2-breadcrumb-item {
    color: #888;
}

.step2-breadcrumb-sep {
    color: #ccc;
}

.step2-breadcrumb-unit {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--color-grey-green);
}

.unit-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.step2-hint {
    font-size: 12px;
    color: #999;
    margin: 0;
}

.step2-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12px;
    color: #666;
}

.step2-legend .scope-tag {
    font-size: 10px;
    padding: 2px 6px;
}

.legend-sep {
    width: 1px;
    height: 12px;
    background: #ddd;
    margin: 0 4px;
}

.legend-indicator {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid var(--color-mint-green);
}

.legend-indicator.has-data {
    background: var(--color-fern-green);
    border-color: var(--color-fern-green);
}

.unit-selector {
    display: flex;
    align-items: center;
    gap: 8px;
}

.unit-selector label {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-grey-green);
}

.unit-selector select {
    padding: 8px 32px 8px 12px;
    border: 2px solid var(--color-mint-green);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-dark-green);
    background: white;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23243a30' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    min-width: 200px;
}

.footprint-categories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.footprint-category {
    background: white;
    border-radius: 10px;
    padding: 16px;
    border: 1px solid var(--color-mint-green);
    cursor: pointer;
    transition: all 0.2s ease;
}

.footprint-category:hover {
    border-color: var(--color-fern-green);
    box-shadow: 0 2px 8px rgba(102, 165, 27, 0.1);
}

.footprint-category-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-dark-green);
}

.footprint-category-scope {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}

.footprint-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--color-mint-green);
    background: white;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-grey-green);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.footprint-back-btn:hover {
    background: var(--color-light-green);
    color: var(--color-dark-green);
}

/* Detail view header */
.detail-view-header {
    margin-bottom: 16px;
}

.detail-view-context {
    background: var(--color-light-green);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 20px;
    border: 1px solid var(--color-mint-green);
}

.detail-view-unit {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.detail-view-unit-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-dark-green);
}

.detail-view-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.detail-view-cat-num {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-fern-green);
    background: var(--color-mint-green);
    padding: 2px 8px;
    border-radius: 6px;
}

.detail-view-cat-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-dark-green);
}

.detail-view-desc {
    font-size: 13px;
    color: #666;
    margin: 0;
    line-height: 1.5;
}

/* Unit type badges */
.type-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.type-badge.own_grapes { background: #e8f5e9; color: #2e7d32; }
.type-badge.third_party_grapes { background: #e3f2fd; color: #1565c0; }
.type-badge.winery { background: #fff3e0; color: #e65100; }
.type-badge.corporate { background: #f3e5f5; color: #7b1fa2; }

/* Category group labels */
.category-group {
    margin-top: 32px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-mint-green);
}

.category-group-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-dark-green);
}

.category-group-header {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-grey-green);
    margin-top: 24px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--color-mint-green);
}

.footprint-category-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.footprint-category-top {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.footprint-category-num {
    font-size: 10px;
    color: #999;
    font-weight: 600;
}

.footprint-category-badge {
    font-size: 9px;
    padding: 1px 6px;
    border-radius: 8px;
    background: var(--color-fern-green);
    color: white;
    font-weight: 600;
}

.unit-card-actions .btn-configure-unit {
    background: var(--color-spring-mist);
    color: var(--color-dark-green);
    border-color: var(--color-fern-green);
}

@media (max-width: 768px) {
    .step-header {
        flex-direction: column;
        height: auto;
        padding: 12px 16px;
        gap: 10px;
    }
    .step-nav {
        width: 100%;
        justify-content: center;
    }
    .step-tab {
        padding: 8px 12px;
        font-size: 13px;
    }
    .step-content {
        padding: 16px;
    }
    .units-grid {
        grid-template-columns: 1fr;
    }
    .footprint-categories {
        grid-template-columns: 1fr;
    }
}

/* Category grid enhancements */
.footprint-category.has-data {
    border-left: 3px solid var(--color-vivid-green);
}

.footprint-category-types {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.type-badge-sm {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Progress bar */
.step2-progress-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 12px;
    color: #666;
}

.progress-track {
    width: 120px;
    height: 6px;
    background: var(--color-mint-green);
    border-radius: 3px;
    overflow: hidden;
    display: inline-block;
}

.progress-fill {
    height: 100%;
    background: var(--color-vivid-green);
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* Breadcrumb current item */
.step2-breadcrumb-item.cur {
    color: var(--color-dark-green);
    font-weight: 600;
}

/* Variant tabs for multi-unit categories */
.variant-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--color-mint-green);
    padding-bottom: 8px;
}

.variant-tab {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--color-mint-green);
    background: white;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
    font-family: inherit;
}

.variant-tab:hover {
    border-color: var(--color-fern-green);
    background: var(--color-light-green);
}

.variant-tab.active {
    background: var(--color-mint-green);
    border-color: var(--color-fern-green);
    color: var(--color-dark-green);
}

.variant-tab-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Org unit column in data table */
.org-unit-col {
    font-size: 12px;
    color: var(--color-grey-green);
    white-space: nowrap;
}

/* Inline Category Table (v3 style) */
.inline-widget {
    max-width: 960px;
    margin: 0 auto;
}

.inline-header {
    margin-bottom: 16px;
}

.inline-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-dark-green);
    margin: 0 0 8px 0;
}

.inline-scopes {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.inline-table-wrap {
    overflow-x: auto;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background: white;
    margin-bottom: 16px;
}

.inline-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.inline-table thead th {
    background: #f7f7f7;
    padding: 10px 8px;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 1px solid #e0e0e0;
    white-space: nowrap;
}

.inline-table tbody td {
    padding: 8px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: top;
}

.inline-cat-row td {
    background: #fafafa;
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #777;
    padding: 6px 8px;
    border-bottom: 1px solid #e8e8e8;
}

.inline-row {
    transition: background 0.15s;
}

.inline-row:hover {
    background: #fafefa;
}

.inline-row.has-data {
    border-left: 3px solid var(--color-vivid-green);
}

.inline-row.has-data td:first-child {
    padding-left: 5px;
}

.inline-num {
    color: #aaa;
    font-size: 11px;
    text-align: center;
    padding-top: 14px !important;
}

.inline-item {
    font-weight: 500;
    color: #333;
    min-width: 140px;
}

.inline-option select,
.inline-method select,
.inline-unit-cell select,
.inline-ownership select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 12px;
    background: white;
    color: #333;
}

.inline-fields {
    min-width: 140px;
}

.inline-field {
    margin-bottom: 6px;
}

.inline-field:last-child {
    margin-bottom: 0;
}

.inline-field label {
    display: block;
    font-size: 10px;
    color: #666;
    margin-bottom: 2px;
}

.inline-field input {
    width: 100%;
    padding: 6px 8px;
    border: 1.5px solid var(--color-mint-green);
    border-radius: 6px;
    font-size: 13px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    background: #f6fdf7;
    color: #333;
}

.inline-field input:focus {
    outline: none;
    border-color: var(--color-vivid-green);
    background: white;
}

.inline-field input::placeholder {
    color: #ccc;
}

.inline-unit-label {
    color: #999;
    font-weight: 400;
}

.inline-custom-name {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
}

.inline-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding-top: 10px !important;
    white-space: nowrap;
}

.inline-dup {
    background: none;
    border: none;
    color: var(--color-fern-green);
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 4px;
    min-width: 22px;
}

.inline-dup:hover {
    background: var(--color-mint-green);
}

.inline-remove {
    background: none;
    border: none;
    color: #c44;
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 4px;
    min-width: 22px;
}

.inline-remove:hover {
    background: #fee;
}

.inline-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 4px 20px;
}

.btn-outline {
    padding: 8px 16px;
    border: 1px solid var(--color-fern-green);
    background: white;
    color: var(--color-fern-green);
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.15s;
}

.btn-outline:hover {
    background: var(--color-mint-green);
}

/* ===========================================================================
 * v4 — 3-step shell + business profile + unit grid + modals
 *
 * 2026-05-12c — full UX redesign pass. Self-contained block: every v4 class
 * is defined below, the legacy v3 styles above stay untouched so the
 * data-widget and configuration views keep working. Search for "@layer v4"
 * blocks below for each region of the app.
 * =========================================================================== */

:root {
    /* Surface */
    --v4-bg: #f5faf2;
    --v4-bg-grad-top: #f7fbf4;
    --v4-bg-grad-bot: #eef6e7;
    --v4-surface: #ffffff;
    --v4-surface-soft: #fbfdf9;
    --v4-surface-tint: #f3f8ef;

    /* Border */
    --v4-border-faint: #ecf3e6;
    --v4-border-soft: #dde9d2;
    --v4-border-strong: #c4d5b5;

    /* Text */
    --v4-text-strong: #1f3128;
    --v4-text-default: #3a4d42;
    --v4-text-muted: #6a7a72;
    --v4-text-faint: #94a39c;

    /* Accent */
    --v4-accent: #5a9416;
    --v4-accent-strong: #4a7a12;
    --v4-accent-tint: #e9f4dc;
    --v4-accent-tint-strong: #d2ebb4;

    /* Status */
    --v4-success: #3d8a30;
    --v4-warning: #b97000;
    --v4-warning-tint: #fff4dc;
    --v4-danger: #c62828;
    --v4-danger-tint: #fdecec;

    /* Shadow */
    --v4-shadow-low: 0 1px 2px rgba(24, 40, 30, 0.04), 0 1px 1px rgba(24, 40, 30, 0.03);
    --v4-shadow-med: 0 4px 14px rgba(24, 40, 30, 0.06), 0 2px 4px rgba(24, 40, 30, 0.03);
    --v4-shadow-high: 0 16px 32px rgba(24, 40, 30, 0.1), 0 4px 8px rgba(24, 40, 30, 0.04);
    --v4-shadow-hover: 0 8px 20px rgba(90, 148, 22, 0.12), 0 2px 4px rgba(24, 40, 30, 0.04);
    --v4-ring: 0 0 0 4px rgba(90, 148, 22, 0.18);

    /* Geometry */
    --v4-radius-sm: 8px;
    --v4-radius: 12px;
    --v4-radius-lg: 16px;
    --v4-radius-xl: 20px;
    --v4-radius-pill: 999px;

    /* Motion */
    --v4-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
    --v4-dur: 180ms;
    --v4-dur-fast: 120ms;
}

/* ---------------------------------------------------------------------------
 * AUTH SCREEN
 * ------------------------------------------------------------------------- */

body {
    background: linear-gradient(160deg, var(--v4-bg-grad-top) 0%, #f1f7eb 45%, var(--v4-bg-grad-bot) 100%);
}

.auth-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 32px 20px;
}

.auth-frame {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 420px;
    gap: 18px;
}

.auth-brand {
    text-align: center;
    margin-bottom: 4px;
}
.tutorial-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    padding: 7px 12px;
    border: 1px solid var(--v4-border-soft);
    border-radius: var(--v4-radius-sm);
    color: var(--v4-accent-strong);
    background: var(--v4-surface);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.tutorial-button:hover { background: var(--v4-accent-tint); border-color: var(--v4-accent); }
.tutorial-button:focus-visible, .auth-legal a:focus-visible, .auth-contact summary:focus-visible { outline: 2px solid var(--v4-accent-strong); outline-offset: 3px; }
.auth-contact { margin-top: 6px; }
.auth-contact summary { width: fit-content; margin: auto; padding: 5px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.auth-legal .auth-contact p { margin: 8px 0; font-size: 12px; line-height: 1.6; color: var(--v4-text-muted); }
.auth-logo {
    max-width: 220px;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 2px 6px rgba(24, 40, 30, 0.08));
}
.auth-eyebrow {
    font-size: 12px;
    font-weight: 600;
    color: var(--v4-accent-strong);
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin: 8px 0 0;
}

.auth-card {
    background: var(--v4-surface);
    padding: 32px;
    border-radius: var(--v4-radius-xl);
    box-shadow: var(--v4-shadow-high);
    width: 100%;
    border: 1px solid var(--v4-border-faint);
    backdrop-filter: none;
}
.auth-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--v4-text-strong);
    margin: 0 0 6px;
    letter-spacing: -0.3px;
    text-align: left;
}
.auth-lede {
    font-size: 14px;
    color: var(--v4-text-muted);
    margin: 0 0 22px;
    line-height: 1.55;
}
.auth-subtitle {
    font-size: 16px;
    font-weight: 700;
    color: var(--v4-text-strong);
    margin: 0 0 14px;
}
.auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 16px; }
.auth-link { background: none; border: none; padding: 8px 0; color: var(--v4-accent-strong); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }
.auth-link:disabled { opacity: 0.6; cursor: wait; }
.auth-link:focus-visible { outline: 2px solid var(--v4-accent-strong); outline-offset: 3px; }
.auth-hint { font-size: 13px; line-height: 1.5; color: var(--v4-text-muted); margin: 6px 0 16px; overflow-wrap: anywhere; }
/* Prominent "need an invitation code?" helper on the login form */
.auth-help { margin-top: 22px; padding: 12px 16px 10px; background: var(--v4-accent-tint); border: 1px solid var(--v4-border-soft); border-radius: var(--v4-radius-sm); text-align: center; }
.auth-help summary { font-size: 14px; font-weight: 600; color: var(--v4-accent-strong); cursor: pointer; list-style: none; }
.auth-help summary::-webkit-details-marker { display: none; }
.auth-help summary:hover { text-decoration: underline; text-underline-offset: 2px; }
.auth-help summary:focus-visible { outline: 2px solid var(--v4-accent-strong); outline-offset: 3px; }
.auth-help p { margin: 8px 0 2px; font-size: 13px; line-height: 1.5; color: var(--v4-text-default); }
.auth-help a { color: var(--v4-accent-strong); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.privacy-notice { margin: 0 0 24px; font-size: 13px; line-height: 1.5; color: var(--v4-text); }
.privacy-notice > p { margin: 0 0 12px; }
.privacy-notice a, .auth-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.privacy-consent { display: flex; align-items: flex-start; gap: 10px; }
.privacy-consent input { flex: 0 0 18px; width: 18px; height: 18px; margin: 2px 0 0; accent-color: #368235; }
.privacy-consent label { min-width: 0; cursor: pointer; }
.auth-legal {
    font-size: 11.5px;
    color: var(--v4-text-faint);
    text-align: center;
    margin: 0;
    letter-spacing: 0.3px;
}
.auth-legal > p { margin: 0; }

.auth-button {
    width: 100%;
    padding: 13px 18px;
    background: var(--v4-accent);
    color: white;
    border: none;
    border-radius: var(--v4-radius);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--v4-dur) var(--v4-ease), box-shadow var(--v4-dur) var(--v4-ease), transform var(--v4-dur) var(--v4-ease);
    box-shadow: 0 4px 12px rgba(90, 148, 22, 0.22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.auth-button:hover {
    background: var(--v4-accent-strong);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(90, 148, 22, 0.28);
}
.auth-button:active { transform: translateY(0); }
.auth-button:disabled { background: #d8dfd4; cursor: not-allowed; box-shadow: none; transform: none; }

.auth-card .form-group { margin-bottom: 16px; }
.auth-card .form-group label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--v4-text-muted);
    letter-spacing: 0.2px;
}
.auth-card .form-group input {
    border-radius: var(--v4-radius);
    border: 1.5px solid var(--v4-border-soft);
    background: var(--v4-surface);
    transition: border-color var(--v4-dur) var(--v4-ease), box-shadow var(--v4-dur) var(--v4-ease);
}
.auth-card .form-group input:focus {
    border-color: var(--v4-accent);
    box-shadow: var(--v4-ring);
    background: var(--v4-surface);
}

/* ---------------------------------------------------------------------------
 * APP SHELL — header + content
 * ------------------------------------------------------------------------- */

.app-container { background: transparent; }

.step-header {
    display: grid;
    /* Equal side columns keep the workflow centered, regardless of email length. */
    grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
    grid-template-areas: "brand steps actions";
    align-items: center;
    gap: 24px;
    padding: 0 32px;
    height: 72px;
    background: var(--v4-surface);
    border-bottom: 1px solid var(--v4-border-faint);
    box-shadow: var(--v4-shadow-low);
    flex-shrink: 0;
    position: relative;
    z-index: 5;
}

.step-header-left {
    grid-area: brand;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.step-logo {
    height: 40px;
    width: auto;
    flex-shrink: 0;
}
.step-wordmark {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: var(--v4-text-muted);
    letter-spacing: 1.6px;
    text-transform: uppercase;
    padding: 4px 10px;
    background: var(--v4-accent-tint);
    color: var(--v4-accent-strong);
    border-radius: 6px;
}

.step-nav {
    grid-area: steps;
    justify-self: center;
    width: max-content;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--v4-surface-tint);
    border: 1px solid var(--v4-border-faint);
    border-radius: var(--v4-radius-pill);
    padding: 5px;
}
.step-rail { display: none; }

.step-tab {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 18px 7px 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--v4-radius-pill);
    font-size: 14px;
    font-weight: 600;
    color: var(--v4-text-muted);
    transition: background var(--v4-dur) var(--v4-ease), color var(--v4-dur) var(--v4-ease);
    font-family: inherit;
    line-height: 1;
}
.step-tab:hover {
    color: var(--v4-text-strong);
}
.step-tab:hover .step-num {
    background: var(--v4-accent-tint-strong);
    color: var(--v4-accent-strong);
}
.step-tab.active {
    background: var(--v4-accent);
    color: white;
    box-shadow: 0 2px 8px rgba(90, 148, 22, 0.28);
}
.step-tab.active .step-num {
    background: rgba(255, 255, 255, 0.22);
    color: white;
}

.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--v4-surface);
    color: var(--v4-text-muted);
    font-size: 12px;
    font-weight: 700;
    transition: background var(--v4-dur) var(--v4-ease), color var(--v4-dur) var(--v4-ease);
}

.step-label { font-size: 13.5px; }

.step-header-right {
    grid-area: actions;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
}
.step-header-right > :not(.step-user) { flex-shrink: 0; white-space: nowrap; }
.step-user {
    min-width: 0;
    font-weight: 500;
    font-size: 13px;
    color: var(--v4-text-muted);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 4px;
}
.logout-button {
    padding: 7px 14px;
    background: transparent;
    border: 1px solid var(--v4-border-soft);
    border-radius: var(--v4-radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: var(--v4-text-default);
    transition: background var(--v4-dur) var(--v4-ease), border-color var(--v4-dur) var(--v4-ease), color var(--v4-dur) var(--v4-ease);
    font-family: inherit;
    line-height: 1;
}
.logout-button:hover {
    background: var(--v4-accent-tint);
    color: var(--v4-accent-strong);
    border-color: var(--v4-accent);
}

.help-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px 7px 10px;
    background: transparent;
    border: 1px solid var(--v4-border-soft);
    border-radius: var(--v4-radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: var(--v4-text-default);
    transition: background var(--v4-dur) var(--v4-ease), border-color var(--v4-dur) var(--v4-ease), color var(--v4-dur) var(--v4-ease);
    font-family: inherit;
    line-height: 1;
}
.help-button:hover {
    background: var(--v4-accent-tint);
    color: var(--v4-accent-strong);
    border-color: var(--v4-accent);
}
.help-button:focus-visible {
    outline: none;
    box-shadow: var(--v4-ring);
}
.help-button-icon { display: inline-block; flex-shrink: 0; }
.help-button-label { line-height: 1; }

.step-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 40px 32px 80px;
    background: linear-gradient(180deg, var(--v4-bg-grad-top) 0%, #eaf3e1 100%);
}

/* ---------------------------------------------------------------------------
 * PAGE PRIMITIVES (hero, eyebrow, empty)
 * ------------------------------------------------------------------------- */

.page-hero {
    max-width: 1120px;
    margin: 0 auto 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: start;
}
.page-hero-text { min-width: 0; }
.iso-standard {
    display: flex;
    align-items: center;
    gap: 14px;
    width: fit-content;
    max-width: 100%;
    padding: 13px 18px;
    border: 1px solid var(--v4-border-soft);
    border-radius: var(--v4-radius-lg);
    background: linear-gradient(120deg, #fff 0%, #f3f8ef 100%);
}
.iso-standard-logo {
    width: 52px;
    height: auto;
    flex: 0 0 52px;
    display: block;
}
.iso-standard-copy { display: grid; gap: 3px; min-width: 0; }
.iso-standard-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--v4-text-muted);
}
.iso-standard-title { font-size: 16px; line-height: 1.2; color: var(--v4-text-strong); }
.iso-standard-description { font-size: 12px; line-height: 1.4; color: var(--v4-text-muted); }
.page-hero-text > .iso-standard { margin-top: 18px; }
.profile-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 24px; margin-bottom: 28px; }
.profile-intro .profile-lede { margin-bottom: 0; }
@media (max-width: 760px) {
    .profile-intro { grid-template-columns: 1fr; gap: 20px; }
    .iso-standard { padding: 12px 14px; }
}
.page-hero-aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.page-eyebrow {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--v4-accent-strong);
    margin-bottom: 12px;
}
.page-eyebrow-sep { color: var(--v4-border-strong); }
.page-eyebrow-link {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--v4-text-muted);
    font: inherit;
    cursor: pointer;
    letter-spacing: inherit;
    text-transform: inherit;
    transition: color var(--v4-dur) var(--v4-ease);
}
.page-eyebrow-link:hover { color: var(--v4-accent-strong); text-decoration: underline; }

.page-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--v4-text-strong);
    margin: 0 0 8px;
    letter-spacing: -0.5px;
    line-height: 1.1;
}
/* Inline unit chip in the page title — used when Step 2 is filtered to a
   specific unit so the user reads "Entering data for [emoji Unit Name]" as
   one phrase, not as title + separate label. */
.page-title-unit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--v4-accent-tint);
    color: var(--v4-accent-strong);
    padding: 2px 14px 4px;
    border-radius: 14px;
    font-size: 0.82em;
    letter-spacing: -0.25px;
    line-height: 1.2;
    vertical-align: 6%;
}
.page-title-unit-emoji {
    font-size: 0.9em;
    line-height: 1;
}
.page-subtitle {
    font-size: 15px;
    color: var(--v4-text-muted);
    margin: 0;
    max-width: 660px;
    line-height: 1.55;
}

.muted { color: var(--v4-text-muted); }
.muted a { color: var(--v4-accent-strong); text-decoration: underline; }

.link-button {
    background: transparent;
    border: none;
    padding: 6px 10px;
    margin: 0;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--v4-accent-strong);
    cursor: pointer;
    border-radius: 6px;
    transition: background var(--v4-dur) var(--v4-ease);
}
.link-button:hover { background: var(--v4-accent-tint); }

/* Empty state used across steps */
.step-empty {
    max-width: 520px;
    margin: 80px auto;
    background: var(--v4-surface);
    border: 1px solid var(--v4-border-faint);
    border-radius: var(--v4-radius-xl);
    padding: 48px 36px;
    text-align: center;
    box-shadow: var(--v4-shadow-med);
}
.step-empty-glyph {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--v4-accent-tint);
    color: var(--v4-accent-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 16px;
}
.step-empty h2 {
    color: var(--v4-text-strong);
    font-size: 22px;
    margin: 0 0 8px;
    letter-spacing: -0.3px;
}
.step-empty p {
    color: var(--v4-text-muted);
    margin: 0 0 24px;
    line-height: 1.55;
}

/* ---------------------------------------------------------------------------
 * BUTTONS (override v3 base button)
 * ------------------------------------------------------------------------- */

/* `.button` defaults to primary green so the v3 data-widget buttons
   (#addBtn, #saveBtn, etc.) keep working unchanged. Use `.btn-secondary`
   for outlined and `.btn-danger` for destructive variants. */
.button {
    padding: 11px 20px;
    border: 1.5px solid var(--v4-accent);
    border-radius: var(--v4-radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--v4-dur) var(--v4-ease), border-color var(--v4-dur) var(--v4-ease), color var(--v4-dur) var(--v4-ease), box-shadow var(--v4-dur) var(--v4-ease), transform var(--v4-dur) var(--v4-ease);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    line-height: 1.2;
    background: var(--v4-accent);
    color: white;
    box-shadow: 0 4px 12px rgba(90, 148, 22, 0.22);
    min-height: 42px;
    letter-spacing: 0.1px;
}
.button:hover {
    background: var(--v4-accent-strong);
    border-color: var(--v4-accent-strong);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(90, 148, 22, 0.28);
}
.button:active { transform: translateY(0); }
.button:disabled {
    background: #d9e0d4;
    border-color: #d9e0d4;
    color: var(--v4-text-faint);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

.button.btn-primary {
    /* Alias of `.button` — explicit semantic naming for new code. */
    background: var(--v4-accent);
    color: white;
    border-color: var(--v4-accent);
    box-shadow: 0 4px 12px rgba(90, 148, 22, 0.24);
}
.button.btn-primary:hover {
    background: var(--v4-accent-strong);
    border-color: var(--v4-accent-strong);
}

.button.btn-secondary {
    background: var(--v4-surface);
    color: var(--v4-text-strong);
    border-color: var(--v4-border-soft);
    box-shadow: none;
}
.button.btn-secondary:hover {
    background: var(--v4-accent-tint);
    color: var(--v4-accent-strong);
    border-color: var(--v4-accent);
    transform: none;
    box-shadow: none;
}

.button.btn-danger {
    background: var(--v4-danger);
    color: white;
    border-color: var(--v4-danger);
    box-shadow: 0 4px 12px rgba(198, 40, 40, 0.25);
}
.button.btn-danger:hover {
    background: #a51f1f;
    border-color: #a51f1f;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(198, 40, 40, 0.32);
}

/* Form-group inputs inside v4 (modals, profile, etc.) */
.app-modal-body .form-group,
.profile-card .form-group { margin-bottom: 14px; }
.app-modal-body .form-group input,
.app-modal-body .form-group select,
.app-modal-body .form-group textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--v4-border-soft);
    border-radius: var(--v4-radius);
    font-size: 14px;
    background: var(--v4-surface);
    color: var(--v4-text-strong);
    transition: border-color var(--v4-dur) var(--v4-ease), box-shadow var(--v4-dur) var(--v4-ease);
    font-family: inherit;
}
.app-modal-body .form-group input:focus,
.app-modal-body .form-group select:focus,
.app-modal-body .form-group textarea:focus {
    outline: none;
    border-color: var(--v4-accent);
    box-shadow: var(--v4-ring);
}

/* ---------------------------------------------------------------------------
 * STEP 1 — PROFILE CARD (Q0 form)
 * ------------------------------------------------------------------------- */

.units-page {
    max-width: 1120px;
    margin: 0 auto;
}

.profile-card {
    background: var(--v4-surface);
    border: 1px solid var(--v4-border-faint);
    border-radius: var(--v4-radius-xl);
    padding: 36px 40px;
    margin: 24px auto 0;
    max-width: 820px;
    box-shadow: var(--v4-shadow-med);
}

.profile-eyebrow {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--v4-accent-strong);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 12px;
}
.profile-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--v4-text-strong);
    margin: 0 0 8px;
    letter-spacing: -0.4px;
    line-height: 1.15;
}
.profile-lede {
    font-size: 15px;
    color: var(--v4-text-muted);
    margin: 0 0 28px;
    line-height: 1.55;
    max-width: 560px;
}

.profile-section-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--v4-text-strong);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin: 4px 0 12px;
}
.profile-section-hint {
    font-size: 13px;
    color: var(--v4-text-muted);
    margin: -6px 0 12px;
    line-height: 1.5;
}

.profile-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 10px;
    margin: 0 0 4px;
}
.profile-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1.5px solid var(--v4-border-soft);
    border-radius: var(--v4-radius);
    background: var(--v4-surface);
    cursor: pointer;
    transition: border-color var(--v4-dur) var(--v4-ease), background var(--v4-dur) var(--v4-ease), box-shadow var(--v4-dur) var(--v4-ease);
    user-select: none;
}
.profile-option input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.profile-option:hover {
    border-color: var(--v4-accent);
    background: var(--v4-accent-tint);
}
.profile-option.checked {
    border-color: var(--v4-accent);
    background: var(--v4-accent-tint);
    box-shadow: 0 2px 8px rgba(90, 148, 22, 0.12);
}
.option-emoji {
    width: 36px;
    height: 36px;
    border-radius: var(--v4-radius-sm);
    background: var(--v4-surface);
    border: 1px solid var(--v4-border-faint);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.profile-option.checked .option-emoji {
    background: var(--v4-surface);
    border-color: var(--v4-accent-tint-strong);
}
.option-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.option-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--v4-text-strong);
    line-height: 1.3;
}
.option-hint {
    font-size: 12px;
    color: var(--v4-text-muted);
    line-height: 1.35;
}
.option-check {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1.5px solid var(--v4-border-strong);
    background: var(--v4-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
    transition: background var(--v4-dur) var(--v4-ease), border-color var(--v4-dur) var(--v4-ease);
}
.option-check svg {
    width: 14px;
    height: 14px;
    opacity: 0;
    transition: opacity var(--v4-dur-fast) var(--v4-ease);
}
.profile-option.checked .option-check {
    background: var(--v4-accent);
    border-color: var(--v4-accent);
}
.profile-option.checked .option-check svg { opacity: 1; }

.profile-divider {
    height: 1px;
    background: var(--v4-border-faint);
    margin: 24px 0 20px;
}

.profile-period-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.profile-period-row select {
    flex: 1;
    min-width: 180px;
    padding: 11px 14px;
    border: 1.5px solid var(--v4-border-soft);
    border-radius: var(--v4-radius);
    background: var(--v4-surface);
    font-size: 14px;
    color: var(--v4-text-strong);
    font-family: inherit;
    transition: border-color var(--v4-dur) var(--v4-ease), box-shadow var(--v4-dur) var(--v4-ease);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235a9416' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
}
.profile-period-row select:focus {
    outline: none;
    border-color: var(--v4-accent);
    box-shadow: var(--v4-ring);
}
.profile-period-row select:disabled {
    background-color: var(--v4-surface-tint);
    color: var(--v4-text-faint);
    cursor: not-allowed;
}

.profile-actions {
    display: flex;
    gap: 10px;
    margin-top: 28px;
}
.profile-actions .button { min-width: 140px; }

.profile-validation {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--v4-danger);
    display: none;
}
.profile-validation.show { display: block; }

/* ---------------------------------------------------------------------------
 * STEP 1 — RETURNING-USER HEADER (profile summary)
 *
 * Light summary in the .page-hero-aside slot. Simple, compact, sits
 * alongside the page title so Step 1 aligns with Step 2/3.
 * ------------------------------------------------------------------------- */

.profile-summary {
    min-width: 260px;
    max-width: 360px;
    background: var(--v4-surface);
    border: 1px solid var(--v4-border-faint);
    border-radius: var(--v4-radius);
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-self: start;
}
.profile-summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--v4-border-faint);
}
.profile-summary-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    color: var(--v4-text-muted);
}
.profile-summary-label svg {
    flex-shrink: 0;
    color: var(--v4-accent);
}

.profile-summary-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.profile-summary-key {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    color: var(--v4-text-muted);
}
.profile-summary-value {
    font-size: 14px;
    color: var(--v4-text-strong);
    font-weight: 500;
    line-height: 1.4;
}
.profile-summary-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.profile-summary-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--v4-radius-pill);
    background: var(--v4-accent-tint);
    color: var(--v4-accent-strong);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}
.profile-summary-chip.is-all {
    background: var(--v4-accent);
    color: white;
}
.profile-summary-empty {
    font-size: 13px;
    color: var(--v4-text-faint);
    font-style: italic;
}

/* ---------------------------------------------------------------------------
 * STEP 1 — UNITS BLOCKS + GRID
 * ------------------------------------------------------------------------- */

.units-block,
.add-block {
    background: transparent;
    margin-bottom: 28px;
}

.block-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 12px;
    flex-wrap: wrap;
}
.block-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--v4-text-strong);
    margin: 0;
    letter-spacing: -0.1px;
}
.block-meta,
.block-hint {
    font-size: 11px;
    color: var(--v4-text-muted);
    font-weight: 700;
    line-height: 1.3;
}
.block-meta {
    background: var(--v4-surface);
    border: 1px solid var(--v4-border-faint);
    padding: 3px 10px;
    border-radius: var(--v4-radius-pill);
    letter-spacing: 0.2px;
}

.units-grid-stack {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.verification-preview { margin: 0 0 20px; text-align: center; }
.verification-modal .app-modal-head { grid-template-columns: 1fr auto; }
.verification-badge { display: block; width: 180px; max-width: 100%; height: auto; margin: 0 auto 8px; font-family: inherit; }
.verification-preview figcaption { font-size: 12px; color: var(--v4-text-muted); }
.submitted-years { margin: 0 0 28px; border: 1px solid var(--v4-border-soft); border-radius: var(--v4-radius); background: var(--v4-surface); }
.submitted-years summary { padding: 16px 18px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--v4-text-muted); }
.submitted-years summary .block-meta { margin-left: 8px; }
.submitted-years-list { padding: 0 18px 8px; }
.submitted-year { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 14px 0; border: 0; border-top: 1px solid var(--v4-border-faint); background: transparent; color: var(--v4-accent-strong); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.submitted-year-count { margin-left: 12px; font-size: 12px; color: var(--v4-text-muted); }
.submitted-year:hover { color: var(--v4-text-strong); }
.submitted-years summary:focus-visible, .submitted-year:focus-visible { outline: 2px solid var(--v4-accent-strong); outline-offset: 2px; }

.unit-group {}
.unit-group-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.unit-group-emoji { font-size: 16px; line-height: 1; }
.unit-group-title {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--v4-text-muted);
}
.unit-group-count {
    background: var(--v4-surface);
    color: var(--v4-text-muted);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--v4-radius-pill);
    border: 1px solid var(--v4-border-faint);
    letter-spacing: 0.2px;
    line-height: 1.3;
}

.units-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.unit-card {
    position: relative;
    background: var(--v4-surface);
    border: 1px solid var(--v4-border-faint);
    border-radius: var(--v4-radius-lg);
    /* overflow: visible so action-button tooltips can escape the card edges */
    overflow: visible;
    transition: border-color var(--v4-dur) var(--v4-ease), box-shadow var(--v4-dur) var(--v4-ease), transform var(--v4-dur) var(--v4-ease);
    box-shadow: var(--v4-shadow-low);
    display: flex;
}
.unit-card-rail {
    border-radius: var(--v4-radius-lg) 0 0 var(--v4-radius-lg);
}
.unit-card.is-deleting { overflow: hidden; }
.unit-card:hover {
    border-color: var(--v4-accent);
    box-shadow: var(--v4-shadow-hover);
    transform: translateY(-1px);
}
.unit-card.is-deleting {
    pointer-events: none;
    animation: unitCardDelete 420ms cubic-bezier(.4, 0, .6, 1) forwards;
}
@keyframes unitCardDelete {
    0%   { opacity: 1; transform: scale(1)     translateX(0);    max-height: 200px; margin-bottom: 0; }
    35%  { opacity: 0.4; transform: scale(0.97) translateX(-6px); }
    100% { opacity: 0; transform: scale(0.92) translateX(-24px); max-height: 0; margin-bottom: -12px; padding: 0; border-width: 0; }
}
.unit-card-rail {
    flex-shrink: 0;
    width: 5px;
    background: var(--v4-border-strong);
    transition: background var(--v4-dur) var(--v4-ease);
}
.unit-card[data-unit-type="own_grapes"] .unit-card-rail { background: #2e7d32; }
.unit-card[data-unit-type="third_party_grapes"] .unit-card-rail { background: #1565c0; }
.unit-card[data-unit-type="purchased_wine"] .unit-card-rail { background: #c2185b; }
.unit-card[data-unit-type="winery"] .unit-card-rail { background: #e65100; }
.unit-card[data-unit-type="contract_winemaking"] .unit-card-rail { background: #00695c; }
.unit-card[data-unit-type="logistics"] .unit-card-rail { background: #f57f17; }
.unit-card[data-unit-type="corporate"] .unit-card-rail { background: #7b1fa2; }

.unit-card-body {
    flex: 1;
    padding: 16px 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.unit-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.unit-card-menu {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity var(--v4-dur) var(--v4-ease);
}
.unit-card:hover .unit-card-menu,
.unit-card:focus-within .unit-card-menu { opacity: 1; }
.unit-card-icon-btn {
    width: 28px;
    height: 28px;
    border-radius: var(--v4-radius-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--v4-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    transition: background var(--v4-dur-fast) var(--v4-ease), color var(--v4-dur-fast) var(--v4-ease), border-color var(--v4-dur-fast) var(--v4-ease);
}
.unit-card-icon-btn:hover {
    background: var(--v4-accent-tint);
    color: var(--v4-accent-strong);
}
.unit-card-icon-btn.btn-delete-unit:hover {
    background: var(--v4-danger-tint);
    color: var(--v4-danger);
}
.unit-card-icon-btn:focus-visible {
    outline: none;
    border-color: var(--v4-accent);
    box-shadow: var(--v4-ring);
}

.unit-card-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--v4-text-strong);
    line-height: 1.3;
    word-break: break-word;
    letter-spacing: -0.1px;
}

.unit-card-cta {
    margin-top: auto;
    padding: 10px 14px;
    background: var(--v4-accent);
    color: white;
    border: 1px solid var(--v4-accent);
    border-radius: var(--v4-radius);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 200ms var(--v4-ease),
                border-color 200ms var(--v4-ease),
                transform 220ms cubic-bezier(.2, .9, .3, 1.2),
                box-shadow 220ms var(--v4-ease);
    box-shadow: 0 2px 6px rgba(90, 148, 22, 0.18);
}
.unit-card-cta:hover {
    background: var(--v4-accent-strong);
    border-color: var(--v4-accent-strong);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(90, 148, 22, 0.30);
}
.unit-card-cta:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(90, 148, 22, 0.22);
    transition-duration: 80ms;
}
.unit-card-cta:focus-visible {
    outline: none;
    box-shadow: 0 6px 14px rgba(90, 148, 22, 0.30),
                0 0 0 3px rgba(90, 148, 22, 0.32);
}

/* Configuration CTA — the gear "wheel" rotates on hover for a tactile,
   satisfying feel. Matches the polish of the corner icon buttons. */
.unit-card-cta .cta-cog {
    flex-shrink: 0;
    transition: transform 520ms cubic-bezier(.2, .9, .3, 1.2);
    transform-origin: center;
}
.unit-card-cta:hover .cta-cog,
.unit-card-cta:focus-visible .cta-cog {
    transform: rotate(60deg);
}
.unit-card-cta:active .cta-cog {
    transform: rotate(90deg);
    transition-duration: 280ms;
}
.unit-card-cta .cta-label {
    letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
    .unit-card-cta,
    .unit-card-cta .cta-cog { transition: none; }
    .unit-card-cta:hover,
    .unit-card-cta:active { transform: none; }
    .unit-card-cta:hover .cta-cog,
    .unit-card-cta:focus-visible .cta-cog,
    .unit-card-cta:active .cta-cog { transform: none; }
}

/* Type badges */
.type-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--v4-radius-pill);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.4;
    background: var(--v4-accent-tint);
    color: var(--v4-accent-strong);
}
.type-badge.own_grapes { background: #e8f5e9; color: #2e7d32; }
.type-badge.third_party_grapes { background: #e3f2fd; color: #1565c0; }
.type-badge.purchased_wine { background: #fce4ec; color: #c2185b; }
.type-badge.winery { background: #fff3e0; color: #e65100; }
.type-badge.contract_winemaking { background: #e0f2f1; color: #00695c; }
.type-badge.logistics { background: #fff8e1; color: #f57f17; }
.type-badge.corporate { background: #f3e5f5; color: #7b1fa2; }

/* ---------------------------------------------------------------------------
 * STEP 1 — UNIT TYPE PICKER (Add a unit)
 * ------------------------------------------------------------------------- */

.type-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}
.type-card {
    background: var(--v4-surface);
    border: 1px solid var(--v4-border-faint);
    border-radius: var(--v4-radius-lg);
    padding: 18px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--v4-dur) var(--v4-ease), box-shadow var(--v4-dur) var(--v4-ease), transform var(--v4-dur) var(--v4-ease);
    font-family: inherit;
    color: var(--v4-text-strong);
    box-shadow: var(--v4-shadow-low);
}
.type-card:hover {
    border-color: var(--v4-accent);
    box-shadow: var(--v4-shadow-hover);
    transform: translateY(-1px);
}
.type-card-emoji {
    width: 44px;
    height: 44px;
    border-radius: var(--v4-radius);
    background: var(--v4-accent-tint);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.type-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.type-card-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--v4-text-strong);
    letter-spacing: -0.1px;
}
.type-card-desc {
    font-size: 13px;
    color: var(--v4-text-muted);
    line-height: 1.5;
}
.type-card-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--v4-accent-strong);
    background: var(--v4-accent-tint);
    padding: 2px 8px;
    border-radius: var(--v4-radius-pill);
    align-self: flex-start;
    margin-top: 4px;
}
.type-card-plus {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--v4-surface-tint);
    color: var(--v4-accent-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: auto;
    transition: background var(--v4-dur) var(--v4-ease), color var(--v4-dur) var(--v4-ease);
}
.type-card:hover .type-card-plus {
    background: var(--v4-accent);
    color: white;
}

.empty-hero {
    background: var(--v4-surface);
    border: 1px dashed var(--v4-border-strong);
    border-radius: var(--v4-radius-xl);
    padding: 36px 32px;
    text-align: center;
    margin-bottom: 28px;
}
.empty-hero-glyph {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--v4-accent-tint);
    color: var(--v4-accent-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}
.empty-hero-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--v4-text-strong);
    margin: 0 0 6px;
    letter-spacing: -0.2px;
}
.empty-hero-text {
    color: var(--v4-text-muted);
    font-size: 15px;
    line-height: 1.55;
    margin: 0 auto;
    max-width: 460px;
}

.empty-soft {
    background: var(--v4-surface-tint);
    border: 1px dashed var(--v4-border-soft);
    border-radius: var(--v4-radius);
    padding: 18px;
    color: var(--v4-text-muted);
    font-size: 14px;
}
.empty-soft a { color: var(--v4-accent-strong); }

.step-footer {
    margin-top: 20px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}
.step-footer-text {
    font-size: 13px;
    color: var(--v4-text-muted);
    font-weight: 400;
    opacity: 0.85;
}
.step-footer .button { min-width: 0; padding-left: 18px; padding-right: 18px; }

/* ---------------------------------------------------------------------------
 * STEP 1 — CONFIGURE PANE (inline unit settings)
 * ------------------------------------------------------------------------- */

.configure-pane {
    max-width: 980px;
    margin: 0 auto;
}
.ghost-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: var(--v4-text-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: var(--v4-radius-sm);
    cursor: pointer;
    margin-bottom: 12px;
    transition: background var(--v4-dur) var(--v4-ease), color var(--v4-dur) var(--v4-ease);
}
.ghost-back:hover {
    color: var(--v4-accent-strong);
    background: var(--v4-accent-tint);
}

.detail-hero {
    background: var(--v4-surface);
    border: 1px solid var(--v4-border-faint);
    border-radius: var(--v4-radius-xl);
    padding: 28px 32px;
    margin-bottom: 24px;
    box-shadow: var(--v4-shadow-low);
}
.detail-hero-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.detail-hero-eyebrow {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--v4-text-muted);
    text-transform: uppercase;
    letter-spacing: 1.2px;
}
.detail-hero-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--v4-text-strong);
    margin: 0 0 8px;
    letter-spacing: -0.4px;
    line-height: 1.15;
}
.detail-hero-lede {
    font-size: 15px;
    color: var(--v4-text-muted);
    margin: 0;
    line-height: 1.55;
    max-width: 660px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.detail-hero-for {
    font-size: 13px;
    font-weight: 600;
    color: var(--v4-text-muted);
    text-transform: lowercase;
    letter-spacing: 0;
}
/* The "[emoji  Unit Name · Type]" chip that anchors the detail-hero so the
   user sees the unit context at the same eye-level as the category title. */
.detail-hero-unit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 10px;
    background: var(--v4-accent-tint);
    border: 1.5px solid color-mix(in srgb, var(--chip-accent, var(--v4-accent-strong)) 35%, transparent);
    border-radius: var(--v4-radius);
    position: relative;
    overflow: hidden;
}
.detail-hero-unit::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--chip-accent, var(--v4-accent-strong));
}
.detail-hero-unit-emoji {
    font-size: 18px;
    line-height: 1;
    margin-left: 6px;
}
.detail-hero-unit-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--v4-text-strong);
    letter-spacing: -0.1px;
}
.detail-hero-unit-sep {
    color: var(--v4-text-muted);
    font-weight: 400;
}
.detail-hero-unit-type {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--v4-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.detail-hero-desc {
    font-size: 14px;
    color: var(--v4-text-muted);
    margin: 12px 0 0;
    line-height: 1.55;
    max-width: 660px;
}

.config-view-wrapper {
    background: var(--v4-surface);
    border: 1px solid var(--v4-border-faint);
    border-radius: var(--v4-radius-xl);
    padding: 24px 28px;
    box-shadow: var(--v4-shadow-low);
}
.config-view-wrapper .container {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    max-width: none;
}
.config-view-wrapper #form-app { padding: 0 !important; }
/* Hide the in-form Delete button (unit card has the delete affordance) */
.config-view-wrapper .btn-delete,
.config-view-wrapper #deleteBtn { display: none !important; }

/* ---------------------------------------------------------------------------
 * MODAL (add / edit / confirm)
 * ------------------------------------------------------------------------- */

.app-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(20, 38, 30, 0.5);
    backdrop-filter: blur(6px);
    display: flex;
    /* `safe center` falls back to flex-start when the modal is taller than
     * the viewport, so the top stays reachable when the overlay scrolls. */
    align-items: safe center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity var(--v4-dur) var(--v4-ease);
    overflow: auto;
}
.app-modal-overlay.open { opacity: 1; }

.app-modal {
    background: var(--v4-surface);
    border-radius: var(--v4-radius-xl);
    box-shadow: var(--v4-shadow-high);
    width: 100%;
    max-width: 500px;
    /* No max-height / overflow clip here: absolute children like the
     * location-picker dropdown need to spill outside the modal box. The
     * overlay above handles scrolling when the modal exceeds the viewport. */
    transform: translateY(8px) scale(0.99);
    transition: transform var(--v4-dur) var(--v4-ease);
    border: 1px solid var(--v4-border-faint);
}
.app-modal-overlay.open .app-modal {
    transform: translateY(0) scale(1);
}

.app-modal-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: flex-start;
    gap: 14px;
    padding: 24px 28px 12px;
}
.app-modal-emoji {
    width: 44px;
    height: 44px;
    border-radius: var(--v4-radius);
    background: var(--v4-accent-tint);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
.app-modal-titles { min-width: 0; }
.app-modal-eyebrow {
    font-size: 11px;
    font-weight: 700;
    color: var(--v4-accent-strong);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 2px;
}
.app-modal-title {
    font-size: 19px;
    font-weight: 700;
    color: var(--v4-text-strong);
    margin: 0;
    line-height: 1.25;
    letter-spacing: -0.2px;
}
.app-modal-subtitle {
    font-size: 13px;
    color: var(--v4-text-muted);
    margin: 4px 0 0;
    line-height: 1.45;
}
.app-modal-close {
    width: 32px;
    height: 32px;
    border-radius: var(--v4-radius-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--v4-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    transition: background var(--v4-dur-fast) var(--v4-ease), color var(--v4-dur-fast) var(--v4-ease);
}
.app-modal-close:hover {
    background: var(--v4-surface-tint);
    color: var(--v4-text-strong);
}
.app-modal-body { padding: 8px 28px 26px; }
.app-modal-body .form-group label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--v4-text-default);
    letter-spacing: 0.2px;
    margin-bottom: 6px;
}
.modal-validation {
    margin: 12px 0;
    padding: 10px 14px;
    background: var(--v4-danger-tint);
    color: var(--v4-danger);
    border-radius: var(--v4-radius-sm);
    border-left: 3px solid var(--v4-danger);
    font-size: 13px;
}
.modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}
.modal-actions .button { flex: 1; }

.confirm-body {
    font-size: 14.5px;
    color: var(--v4-text-default);
    line-height: 1.55;
    margin: 4px 0 4px;
    /* Unit names can be one long word. */
    overflow-wrap: anywhere;
}

/* Year chip control inside modal */
.year-chip-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}
.year-chip-list {
    display: flex;
    gap: 6px;
    flex: 1;
    justify-content: center;
}
.year-chip {
    flex: 1;
    padding: 9px 12px;
    border: 1.5px solid var(--v4-border-soft);
    background: var(--v4-surface);
    border-radius: var(--v4-radius);
    font-size: 13px;
    font-weight: 600;
    color: var(--v4-text-strong);
    cursor: pointer;
    transition: border-color var(--v4-dur) var(--v4-ease), background var(--v4-dur) var(--v4-ease), color var(--v4-dur) var(--v4-ease);
    font-family: inherit;
}
.year-chip:hover {
    background: var(--v4-accent-tint);
    border-color: var(--v4-accent);
    color: var(--v4-accent-strong);
}
.year-chip.active {
    background: var(--v4-accent);
    color: white;
    border-color: var(--v4-accent);
    box-shadow: 0 2px 6px rgba(90, 148, 22, 0.28);
}
.year-arrow {
    width: 32px;
    height: 38px;
    border: 1.5px solid var(--v4-border-soft);
    background: var(--v4-surface);
    border-radius: var(--v4-radius);
    font-size: 16px;
    color: var(--v4-accent-strong);
    cursor: pointer;
    font-weight: 700;
    line-height: 1;
    font-family: inherit;
    transition: background var(--v4-dur) var(--v4-ease), border-color var(--v4-dur) var(--v4-ease);
}
.year-arrow:hover {
    background: var(--v4-accent-tint);
    border-color: var(--v4-accent);
}
.form-hint {
    font-size: 12px;
    color: var(--v4-text-muted);
    margin: 8px 0 0;
}

/* ---------------------------------------------------------------------------
 * STEP 2 — CATEGORY LIST
 * ------------------------------------------------------------------------- */

.footprint-page {
    max-width: 1120px;
    margin: 0 auto;
}

.progress-callout {
    background: var(--v4-surface);
    border: 1px solid var(--v4-border-faint);
    border-radius: var(--v4-radius-lg);
    padding: 14px 18px;
    min-width: 240px;
    box-shadow: var(--v4-shadow-low);
}
.progress-callout-stat {
    font-size: 22px;
    color: var(--v4-text-strong);
    line-height: 1.1;
    letter-spacing: -0.3px;
    font-weight: 500;
}
.progress-callout-stat strong {
    color: var(--v4-accent-strong);
    font-weight: 700;
    font-size: 26px;
}
.progress-callout-label {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--v4-text-muted);
    margin: 4px 0 10px;
    font-weight: 600;
}
.progress-track {
    display: block;
    height: 8px;
    background: var(--v4-border-faint);
    border-radius: var(--v4-radius-pill);
    overflow: hidden;
}
.progress-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--v4-accent) 0%, #7fc935 100%);
    border-radius: var(--v4-radius-pill);
    transition: width 0.4s var(--v4-ease);
}

.categories-stack {
    display: flex;
    flex-direction: column;
    gap: 26px;
    margin-top: 6px;
}

.category-group {}
.category-group-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--v4-border-faint);
}
.category-group-icon {
    width: 28px;
    height: 28px;
    border-radius: var(--v4-radius-sm);
    background: var(--v4-accent-tint);
    color: var(--v4-accent-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
}
.category-group-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--v4-text-strong);
    letter-spacing: -0.1px;
    flex: 1;
    line-height: 1.3;
}
.category-group-meter {
    font-size: 11px;
    font-weight: 700;
    color: var(--v4-text-muted);
    background: var(--v4-surface);
    border: 1px solid var(--v4-border-faint);
    padding: 3px 10px;
    border-radius: var(--v4-radius-pill);
    letter-spacing: 0.2px;
    line-height: 1.3;
}

.footprint-categories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
}

.footprint-category {
    position: relative;
    background: var(--v4-surface);
    border: 1px solid var(--v4-border-faint);
    border-radius: var(--v4-radius-lg);
    padding: 16px 18px;
    cursor: pointer;
    transition: border-color var(--v4-dur) var(--v4-ease), box-shadow var(--v4-dur) var(--v4-ease), transform var(--v4-dur) var(--v4-ease);
    text-align: left;
    font-family: inherit;
    display: grid;
    grid-template-columns: 22px 1fr 16px;
    gap: 12px;
    color: var(--v4-text-default);
    box-shadow: var(--v4-shadow-low);
}
.footprint-category:hover:not(.is-dim) {
    border-color: var(--v4-accent);
    box-shadow: var(--v4-shadow-hover);
    transform: translateY(-1px);
}
.footprint-category.is-dim {
    background: var(--v4-surface-tint);
    cursor: default;
    opacity: 0.85;
    box-shadow: none;
}

.footprint-category-status {
    color: var(--v4-text-faint);
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    transition: background var(--v4-dur) var(--v4-ease), color var(--v4-dur) var(--v4-ease);
}
.footprint-category.has-data {
    border-color: var(--v4-accent);
    background: linear-gradient(180deg, #ffffff 0%, var(--v4-accent-tint) 100%);
}
.footprint-category.has-data .footprint-category-status {
    background: var(--v4-accent);
    color: white;
}
.footprint-category.is-dim .footprint-category-status {
    background: var(--v4-warning-tint);
    color: var(--v4-warning);
}

.footprint-category-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.footprint-category-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--v4-text-strong);
    line-height: 1.25;
    letter-spacing: -0.1px;
}
.footprint-category-desc {
    font-size: 13px;
    color: var(--v4-text-muted);
    line-height: 1.5;
}
.footprint-category-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 4px;
}
.footprint-category-meta,
.footprint-category-types {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}
.footprint-category-badge {
    margin-left: auto;
    font-size: 11px;
    padding: 3px 9px;
    border-radius: var(--v4-radius-pill);
    background: var(--v4-accent);
    color: white;
    font-weight: 700;
    letter-spacing: 0.2px;
}
.footprint-category-hint {
    font-size: 11.5px;
    color: var(--v4-warning);
    background: var(--v4-warning-tint);
    border-radius: var(--v4-radius-sm);
    padding: 5px 9px;
    margin-top: 6px;
    align-self: flex-start;
}
.footprint-category-go {
    color: var(--v4-text-faint);
    align-self: center;
    transition: color var(--v4-dur) var(--v4-ease), transform var(--v4-dur) var(--v4-ease);
}
.footprint-category:hover .footprint-category-go {
    color: var(--v4-accent);
    transform: translateX(2px);
}

/* Inline mini-badges */
.scope-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--v4-radius-pill);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    line-height: 1.4;
}
.type-badge-sm {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--v4-radius-pill);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
}
/* Dim variant: the user doesn't have a unit of this type yet — surface the
   category's full scope without misleading the eye into thinking it applies
   right now. */
.type-badge-sm.is-dim {
    opacity: 0.6;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(0, 0, 0, 0.2);
}

/* "Other categories" collapsible */
.other-categories {
    margin-top: 36px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px dashed var(--v4-border-soft);
    border-radius: var(--v4-radius-lg);
    padding: 14px 20px;
}
.other-categories[open] { background: var(--v4-surface); }
.other-categories > summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: var(--v4-text-strong);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}
.other-categories > summary::-webkit-details-marker { display: none; }
.other-categories > summary::before {
    content: "›";
    color: var(--v4-accent-strong);
    transition: transform var(--v4-dur) var(--v4-ease);
    margin-right: 4px;
    font-size: 16px;
    line-height: 1;
}
.other-categories[open] > summary::before { transform: rotate(90deg); display: inline-block; }
.other-categories-count {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--v4-text-muted);
    margin-left: auto;
}
.other-categories .footprint-categories { margin-top: 12px; }

/* ---------------------------------------------------------------------------
 * STEP 2 — CATEGORY DETAIL
 * ------------------------------------------------------------------------- */

.footprint-detail {
    max-width: 1000px;
    margin: 0 auto;
}
.detail-hero-titlerow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.detail-hero-scopes {
    display: inline-flex;
    gap: 6px;
    margin-left: auto;
}

.variant-tabs-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.variant-tabs-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--v4-text-default);
}
.variant-tabs {
    display: inline-flex;
    gap: 6px;
    background: var(--v4-surface);
    border: 1px solid var(--v4-border-faint);
    padding: 4px;
    border-radius: var(--v4-radius-pill);
    box-shadow: var(--v4-shadow-low);
    flex-wrap: wrap;
}
.variant-tab {
    padding: 7px 14px;
    border-radius: var(--v4-radius-pill);
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--v4-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    transition: background var(--v4-dur) var(--v4-ease), color var(--v4-dur) var(--v4-ease);
}
.variant-tab:hover { color: var(--v4-text-strong); background: var(--v4-surface-tint); }
.variant-tab.active {
    background: var(--v4-accent);
    color: white;
    box-shadow: 0 2px 8px rgba(90, 148, 22, 0.28);
}
.variant-tab-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.variant-tab.active .variant-tab-dot { background: rgba(255, 255, 255, 0.9) !important; }

/* Step 2 — Scope bar ("entering data for" chips).
   Mirrors the Step 3 unit-filter chips so "which unit am I looking at?"
   reads the same everywhere. Label above the chips (not beside) — keeps
   the strip from feeling off-center when there are many chips.

   In-flow (was sticky; users found the always-on-screen bar annoying).
   The detail-hero just above already carries the unit context. */
.scope-bar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 16px;
}
.scope-bar-label {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--v4-text-muted);
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.scope-bar-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    padding: 2px 2px 4px;
    margin: 0 -2px;
}
.scope-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--v4-surface);
    border: 1.5px solid var(--v4-border-soft);
    border-radius: var(--v4-radius);
    cursor: pointer;
    font-family: inherit;
    color: var(--v4-text-default);
    text-align: left;
    transition: background var(--v4-dur) var(--v4-ease),
                border-color var(--v4-dur) var(--v4-ease),
                color var(--v4-dur) var(--v4-ease),
                box-shadow var(--v4-dur) var(--v4-ease),
                transform var(--v4-dur) var(--v4-ease);
    overflow: hidden;
    box-shadow: var(--v4-shadow-low);
}
.scope-chip::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--chip-accent, var(--v4-accent-strong));
    transition: background var(--v4-dur) var(--v4-ease);
}
.scope-chip:hover:not(.is-static) {
    border-color: var(--v4-accent);
    background: var(--v4-accent-tint);
    color: var(--v4-text-strong);
    transform: translateY(-1px);
    box-shadow: var(--v4-shadow-hover);
}
.scope-chip:focus-visible {
    outline: none;
    box-shadow: var(--v4-ring);
}
.scope-chip.is-active {
    border-color: var(--v4-accent);
    background: var(--v4-accent);
    color: white;
    box-shadow: 0 6px 16px rgba(90, 148, 22, 0.32);
    transform: none;
}
.scope-chip.is-active::before {
    background: rgba(255, 255, 255, 0.78);
}
.scope-chip.is-active:hover:not(.is-static) {
    background: var(--v4-accent-strong);
    border-color: var(--v4-accent-strong);
    color: white;
}
/* Single-chip case: the chip is purely informational — there's no other
   unit to switch to, so kill the cursor and the hover lift. Still styled
   as the "active" pill so the unit context reads clearly at a glance. */
.scope-chip.is-static {
    cursor: default;
}
.scope-chip-glyph {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--v4-surface-tint);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
    transition: background var(--v4-dur) var(--v4-ease);
}
.scope-chip:hover:not(.is-static) .scope-chip-glyph { background: white; }
.scope-chip.is-active .scope-chip-glyph { background: rgba(255, 255, 255, 0.22); }
.scope-chip-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    line-height: 1.2;
}
.scope-chip-name {
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -0.1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Roomy enough for the longest type label plus a year
       ("CORPORATE & HOSPITALITY · 2024"); the strip scrolls horizontally, so a
       wider chip costs nothing but a clipped one reads as broken. */
    max-width: 230px;
}
.scope-chip-sub {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--v4-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Roomy enough for the longest type label plus a year
       ("CORPORATE & HOSPITALITY · 2024"); the strip scrolls horizontally, so a
       wider chip costs nothing but a clipped one reads as broken. */
    max-width: 230px;
}
.scope-chip.is-active .scope-chip-sub { color: rgba(255, 255, 255, 0.82); }

.footprint-view-host {
    background: var(--v4-surface);
    border: 1px solid var(--v4-border-faint);
    border-radius: var(--v4-radius-xl);
    padding: 24px 28px;
    box-shadow: var(--v4-shadow-low);
}
/* Strip the v3 widget's outer container, since the host already provides one */
.footprint-view-host .view-content,
.footprint-view-host .container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    margin: 0 !important;
}
.footprint-view-host .title {
    font-size: 18px !important;
    border-bottom: 1px solid var(--v4-border-faint) !important;
    padding-bottom: 12px !important;
    margin-bottom: 18px !important;
    color: var(--v4-text-strong) !important;
}
.footprint-view-host #form-app { padding: 0 !important; }
.footprint-view-host .form-body {
    background: var(--v4-surface-tint);
    border: 1px solid var(--v4-border-faint);
}

/* ---------------------------------------------------------------------------
 * STEP 3 — DASHBOARD HOST
 * ------------------------------------------------------------------------- */

.dashboard-page {
    max-width: 1200px;
    margin: 0 auto;
}
.dashboard-host {
    background: transparent;
}

/* ---------------------------------------------------------------------------
 * STEP 3 — UNIT FILTER
 *
 * The "Viewing" chip strip above the dashboard. Each chip is a button
 * with: emoji glyph, unit name, type subtitle, and a thin coloured rail
 * on the left edge keyed to the unit type. The active chip fills green.
 * ------------------------------------------------------------------------- */

.unit-filter {
    /* No own max-width — inherit the parent column's width so the strip
       lines up flush with the page-hero and the categories below. Step 2's
       footprint-page caps at 1120, Step 3's dashboard-page caps at 1200;
       a separate 1200 here would punch outside on Step 2. */
    margin: 0 0 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.unit-filter-label {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--v4-text-muted);
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.unit-filter-chips {
    /* Single horizontal scroll row — caps the strip at one line no matter
       how many units the user has (we've seen 20+). Wraps to 2-3 lines
       max on narrow viewports via the @media block at the bottom. */
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    /* The vertical padding is room for hover-lift + focus-ring; horizontal
       margin compensates so chips still start flush with the label above. */
    padding: 4px 2px 6px;
    margin: 0 -2px;
}

.unit-filter-chip {
    flex-shrink: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--v4-surface);
    border: 1.5px solid var(--v4-border-soft);
    border-radius: var(--v4-radius);
    cursor: pointer;
    font-family: inherit;
    color: var(--v4-text-default);
    text-align: left;
    transition: background var(--v4-dur) var(--v4-ease),
                border-color var(--v4-dur) var(--v4-ease),
                color var(--v4-dur) var(--v4-ease),
                box-shadow var(--v4-dur) var(--v4-ease),
                transform var(--v4-dur) var(--v4-ease);
    overflow: hidden;
    box-shadow: var(--v4-shadow-low);
}
/* Coloured left rail (driven by inline --chip-accent set per-unit-type). */
.unit-filter-chip::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--chip-accent, var(--v4-accent-strong));
    transition: background var(--v4-dur) var(--v4-ease);
}
.unit-filter-chip:hover {
    border-color: var(--v4-accent);
    background: var(--v4-accent-tint);
    color: var(--v4-text-strong);
    transform: translateY(-1px);
    box-shadow: var(--v4-shadow-hover);
}
.unit-filter-chip:focus-visible {
    outline: none;
    box-shadow: var(--v4-ring);
}
.unit-filter-chip.is-active {
    border-color: var(--v4-accent);
    background: var(--v4-accent);
    color: white;
    box-shadow: 0 6px 16px rgba(90, 148, 22, 0.32);
    transform: none;
}
.unit-filter-chip.is-active::before {
    background: rgba(255, 255, 255, 0.78);
}
.unit-filter-chip.is-active:hover {
    background: var(--v4-accent-strong);
    border-color: var(--v4-accent-strong);
    color: white;
}

.unit-filter-glyph {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--v4-surface-tint);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
    transition: background var(--v4-dur) var(--v4-ease);
}
.unit-filter-chip:hover .unit-filter-glyph {
    background: white;
}
.unit-filter-chip.is-active .unit-filter-glyph {
    background: rgba(255, 255, 255, 0.22);
}

.unit-filter-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    line-height: 1.2;
}
.unit-filter-name {
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -0.1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Roomy enough for the longest type label plus a year
       ("CORPORATE & HOSPITALITY · 2024"); the strip scrolls horizontally, so a
       wider chip costs nothing but a clipped one reads as broken. */
    max-width: 230px;
}
.unit-filter-sub {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--v4-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Roomy enough for the longest type label plus a year
       ("CORPORATE & HOSPITALITY · 2024"); the strip scrolls horizontally, so a
       wider chip costs nothing but a clipped one reads as broken. */
    max-width: 230px;
}
.unit-filter-chip.is-active .unit-filter-sub {
    color: rgba(255, 255, 255, 0.82);
}

/* ---------------------------------------------------------------------------
 * RESPONSIVE
 * ------------------------------------------------------------------------- */

@media (max-width: 1120px) {
    .step-header {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "brand actions" "steps steps";
        height: auto;
        padding: 14px 24px;
        gap: 12px 24px;
    }
}

@media (max-width: 1000px) {
    .page-hero {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    .page-hero-aside { align-items: flex-start; }
    .progress-callout { width: 100%; }
    .profile-summary { max-width: none; width: 100%; }
}

@media (max-width: 720px) {
    .step-header {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "brand" "steps" "actions";
        height: auto;
        padding: 12px 14px;
        gap: 10px;
    }
    .step-header-left { width: 100%; justify-content: flex-start; }
    .step-logo { height: 32px; }
    .step-nav {
        width: 100%;
        justify-content: center;
        padding: 4px;
    }
    .step-tab { padding: 6px 12px 6px 6px; font-size: 12.5px; }
    .step-tab .step-label { display: none; }
    .step-tab.active .step-label { display: inline; }
    .step-num { width: 22px; height: 22px; font-size: 11.5px; }
    .step-header-right { width: 100%; justify-content: space-between; }

    .step-content { padding: 24px 16px 64px; }

    .page-title { font-size: 26px; }
    .page-subtitle { font-size: 14px; }
    .profile-card { padding: 24px; }
    .profile-title { font-size: 24px; }
    .profile-options { grid-template-columns: 1fr; }
    .units-grid,
    .type-card-grid,
    .footprint-categories { grid-template-columns: 1fr; }

    .step-footer { flex-direction: column; align-items: stretch; }
    .step-footer .button { width: 100%; }

    .detail-hero { padding: 22px; }
    .detail-hero-title { font-size: 22px; }
    .config-view-wrapper,
    .footprint-view-host { padding: 18px; border-radius: var(--v4-radius-lg); }
    .app-modal-head, .app-modal-body { padding-left: 20px; padding-right: 20px; }
    .app-modal { border-radius: var(--v4-radius-lg); }

    .progress-callout { min-width: 0; }
    .footprint-category { grid-template-columns: 20px 1fr 14px; padding: 14px; }

    .unit-filter { gap: 6px; }
    .unit-filter-label { font-size: 11px; letter-spacing: 1.1px; }
    .unit-filter-chip { padding: 7px 12px; gap: 9px; }
    .unit-filter-glyph { width: 26px; height: 26px; font-size: 15px; }
    .unit-filter-name { font-size: 13px; max-width: 140px; }
    .unit-filter-sub { font-size: 10px; }

    .scope-bar { gap: 6px; }
    .scope-chip { padding: 7px 12px; gap: 9px; }
    .scope-chip-glyph { width: 26px; height: 26px; font-size: 15px; }
    .scope-chip-name { font-size: 13px; max-width: 140px; }
    .scope-chip-sub { font-size: 10px; }
}

@media (max-width: 480px) {
    .step-content { padding: 18px 12px 56px; }
    .page-title { font-size: 22px; letter-spacing: -0.3px; }
    .profile-card { padding: 20px; border-radius: var(--v4-radius-lg); }
    .profile-title { font-size: 21px; }
    .profile-lede { font-size: 14px; margin-bottom: 20px; }
    .unit-card-name { font-size: 16px; }
    .profile-summary { padding: 14px 16px; }
}

/* ===========================================================================
 * RESULTS PAGE (.fp-*) — Step 3
 *
 * Two audiences, one page. The headline band answers "what is it"; one chart
 * answers "where from"; the tables under it each hold a dimension the chart
 * doesn't. Chart colours live in footprint-model.js — the screen and the PDF
 * read the same values.
 * =========================================================================== */

.fp {
    --fp-bar: #5a9416;
    /* Same blue as Scope 3 in footprint-model.js — one blue in the product. */
    --fp-water: #0f6d96;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Loading ── */
.fp-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 48px 24px;
    justify-content: center;
    color: var(--v4-text-muted);
    font-size: 15px;
}
.fp-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--v4-accent-tint-strong);
    border-top-color: var(--v4-accent);
    border-radius: 50%;
    animation: fp-spin 700ms linear infinite;
}
@keyframes fp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .fp-spinner { animation-duration: 2s; }
    .fp-key-row { transition: none !important; }
    .fp-key-row:hover { transform: none !important; }
}

.q-helper {
    margin: 10px 0 0;
    max-width: 78ch;
    color: #5f7067;
    font-size: 13px;
    line-height: 1.5;
}

/* ── Filter row + exports ──
   One filter row above everything it scopes; never a filter inside a chart. */
/* Two rows on purpose: the unit strip gets the full width (it scrolls
   horizontally when there are many units, and a half-clipped chip reads as a
   bug), then period and exports share the row below it. */
.fp-topbar {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.fp-topbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
}
/* Holds the exports right when there's only one period to choose from. */
.fp-spacer { flex: 1 1 0; }

.fp-exports {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.fp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border-radius: var(--v4-radius);
    border: 1px solid var(--v4-border-soft);
    background: var(--v4-surface);
    color: var(--v4-text-default);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--v4-dur) var(--v4-ease), border-color var(--v4-dur) var(--v4-ease),
        color var(--v4-dur) var(--v4-ease), box-shadow var(--v4-dur) var(--v4-ease);
}
.fp-btn:hover:not(:disabled) {
    border-color: var(--v4-accent);
    color: var(--v4-accent-strong);
    background: var(--v4-accent-tint);
}
.fp-btn:focus-visible { outline: none; box-shadow: var(--v4-ring); }
.fp-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.fp-btn-primary {
    background: var(--v4-accent);
    border-color: var(--v4-accent);
    color: #fff;
    box-shadow: var(--v4-shadow-low);
}
.fp-btn-primary:hover:not(:disabled) {
    background: var(--v4-accent-strong);
    border-color: var(--v4-accent-strong);
    color: #fff;
    box-shadow: var(--v4-shadow-hover);
}

/* ── Segmented control (period, group-by) ── */
.fp-seg {
    display: inline-flex;
    /* Wraps rather than overflowing once a business has several reporting
       years plus a "Year not set" pill. */
    flex-wrap: wrap;
    max-width: 100%;
    padding: 3px;
    gap: 2px;
    background: var(--v4-surface-tint);
    border: 1px solid var(--v4-border-faint);
    border-radius: var(--v4-radius-pill);
}
.fp-seg-btn {
    border: none;
    background: transparent;
    color: var(--v4-text-muted);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: var(--v4-radius-pill);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--v4-dur) var(--v4-ease), color var(--v4-dur) var(--v4-ease);
}
.fp-seg-btn:hover { color: var(--v4-text-strong); }
.fp-seg-btn.is-active {
    background: var(--v4-surface);
    color: var(--v4-accent-strong);
    box-shadow: var(--v4-shadow-low);
}
.fp-seg-btn:focus-visible { outline: none; box-shadow: var(--v4-ring); }

/* ── Notices ── */
.fp-notice {
    display: block;
    padding: 13px 16px;
    border-radius: var(--v4-radius);
    border: 1px solid var(--v4-border-soft);
    background: var(--v4-surface-soft);
    color: var(--v4-text-default);
    font-size: 14.5px;
    line-height: 1.55;
}
.fp-notice strong { color: var(--v4-text-strong); }
.fp-notice.is-warning {
    border-color: #f0d27a;
    background: var(--v4-warning-tint);
    color: #6b5b1f;
}
.fp-notice.is-warning strong { color: #5a4a10; }

/* ── Headline band: the one hero figure on the page ── */
.fp-headline {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 32px;
    align-items: center;
    justify-content: space-between;
    padding: 26px 28px;
    border-radius: var(--v4-radius-xl);
    border: 1px solid var(--v4-border-faint);
    background: linear-gradient(135deg, var(--v4-surface) 0%, var(--v4-surface-tint) 100%);
    box-shadow: var(--v4-shadow-low);
}
.fp-headline-main { min-width: 260px; flex: 1 1 320px; }
.fp-headline-caption {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--v4-text-faint);
    margin-bottom: 8px;
}
.fp-hero {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 12px;
}
.fp-hero-value {
    font-size: 58px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--v4-text-strong);
    /* Proportional figures: tabular digits look loose at display sizes. */
    font-variant-numeric: normal;
}
.fp-hero-unit {
    font-size: 16px;
    color: var(--v4-text-muted);
    display: inline-flex;
    align-items: center;
}
.fp-delta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: var(--v4-radius-pill);
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
}
.fp-delta.is-good { background: var(--v4-accent-tint); color: var(--v4-accent-strong); }
.fp-delta.is-bad { background: var(--v4-warning-tint); color: #8a5400; }
.fp-delta-vs { font-weight: 500; opacity: 0.85; }
.fp-headline-lead {
    margin: 14px 0 0;
    font-size: 16px;
    line-height: 1.55;
    color: var(--v4-text-default);
    max-width: 52ch;
}
.fp-headline-lead strong { color: var(--v4-text-strong); }

/* Stat tiles: label / value / unit, no plot. */
.fp-tiles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.fp-tile {
    min-width: 148px;
    padding: 14px 16px;
    border-radius: var(--v4-radius);
    border: 1px solid var(--v4-border-faint);
    background: var(--v4-surface);
}
.fp-tile-value {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--v4-text-strong);
    display: flex;
    align-items: baseline;
    gap: 5px;
}
.fp-tile-unit { font-size: 12.5px; font-weight: 600; color: var(--v4-text-muted); }
.fp-tile-label {
    margin-top: 5px;
    font-size: 13px;
    color: var(--v4-text-muted);
    line-height: 1.4;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.fp-tiles-empty {
    margin: 0;
    max-width: 280px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--v4-text-muted);
    padding: 14px 16px;
    border-radius: var(--v4-radius);
    border: 1px dashed var(--v4-border-strong);
    background: var(--v4-surface);
}

/* ── Cards ── */
.fp-card {
    background: var(--v4-surface);
    border: 1px solid var(--v4-border-faint);
    border-radius: var(--v4-radius-xl);
    box-shadow: var(--v4-shadow-low);
    padding: 22px 24px 20px;
}
.fp-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 20px;
    margin-bottom: 18px;
}
.fp-card-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--v4-text-strong);
    letter-spacing: -0.2px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.fp-card-sub {
    margin: 5px 0 0;
    font-size: 14.5px;
    color: var(--v4-text-muted);
    line-height: 1.5;
    max-width: 62ch;
}
.fp-card-hint { align-self: center; }
/* Group-by and chart-type sit together: what you're splitting, how it's drawn. */
.fp-card-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}
.fp-card-foot {
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--v4-text-faint);
}

/* ── The chart ── */
.fp-chart-wrap {
    position: relative;
    width: 100%;
    /* Height is set inline from the row count so the axis band is always
       inside the box — a fixed height would clip the tick labels. */
    margin-bottom: 18px;
}

/* Pie + key. The key is the legend: a pie without one is colour-only.
   Sized to the content rather than stretched to the card, so six rows don't
   end up with 400px of air between a name and its number. */
.fp-plate {
    display: grid;
    grid-template-columns: 250px minmax(0, 620px);
    justify-content: start;
    gap: 32px;
    align-items: center;
    margin-bottom: 18px;
}
.fp-pie-wrap { position: relative; height: 250px; }
.fp-key {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.fp-key.fp-key-compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2px 12px;
    margin: -8px 0 18px;
}
.fp-key-row {
    display: grid;
    grid-template-columns: 12px 1fr auto auto;
    width: 100%;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: var(--v4-radius-sm);
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: opacity var(--v4-dur) var(--v4-ease), background var(--v4-dur) var(--v4-ease), transform var(--v4-dur) var(--v4-ease);
}
.fp-key > li:nth-child(odd) .fp-key-row { background: var(--v4-surface-soft); }
.fp-key-row:hover { background: var(--v4-accent-tint); transform: translateX(2px); }
.fp-key-row:focus-visible { outline: none; box-shadow: var(--v4-ring); }
.fp-key-row.is-hidden { opacity: 0.42; }
.fp-key-row.is-hidden .fp-key-name { text-decoration: line-through; }
.fp-key-name {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--v4-text-strong);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fp-key-value {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--v4-text-strong);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.fp-key-pct {
    width: 52px;
    text-align: right;
    font-size: 13px;
    color: var(--v4-text-muted);
    font-variant-numeric: tabular-nums;
}

.fp-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex: 0 0 auto;
}

.fp-chart-interaction {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 28px;
    margin: -8px 0 18px;
    color: var(--v4-text-faint);
    font-size: 12.5px;
}
.fp-chart-reset {
    border: 0;
    padding: 2px 0;
    background: transparent;
    color: var(--v4-accent-strong);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.fp-chart-reset:hover { text-decoration: underline; }
.fp-chart-reset:focus-visible { outline: none; box-shadow: var(--v4-ring); }

/* ── Table tools ── */
.fp-table-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 12px 0 14px;
    border-top: 1px solid var(--v4-border-faint);
}
.fp-chip-btn {
    min-height: 38px;
    padding: 0 14px;
    border-radius: var(--v4-radius-pill);
    border: 1px solid var(--v4-border-soft);
    background: var(--v4-surface);
    color: var(--v4-text-muted);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--v4-dur) var(--v4-ease);
}
.fp-chip-btn:hover { border-color: var(--v4-accent); color: var(--v4-accent-strong); }
.fp-chip-btn.is-on {
    background: var(--v4-accent-tint);
    border-color: var(--v4-accent);
    color: var(--v4-accent-strong);
}
.fp-chip-btn:focus-visible { outline: none; box-shadow: var(--v4-ring); }
.fp-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--v4-text-muted);
    cursor: pointer;
    user-select: none;
}
.fp-check input {
    width: 17px;
    height: 17px;
    accent-color: var(--v4-accent);
    cursor: pointer;
}

/* ── Table ── */
.fp-table-scroll {
    /* Wide year-column sets scroll inside the card; the page never does.
       Focusable (tabindex in the markup) so the scroll is keyboard-reachable. */
    overflow-x: auto;
    margin: 0 -24px;
    padding: 0 24px;
}
.fp-table-scroll:focus-visible {
    outline: none;
    box-shadow: var(--v4-ring);
    border-radius: var(--v4-radius-sm);
}
.fp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
}
.fp-table thead th {
    text-align: left;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--v4-text-faint);
    background: var(--v4-surface-tint);
    border-bottom: 1px solid var(--v4-border-soft);
    white-space: nowrap;
}
.fp-table thead th:first-child { border-radius: var(--v4-radius-sm) 0 0 0; }
.fp-table thead th:last-child { border-radius: 0 var(--v4-radius-sm) 0 0; }
.fp-table th.fp-num, .fp-table th.fp-num-head { text-align: right; }
.fp-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--v4-border-faint);
    color: var(--v4-text-default);
    vertical-align: middle;
}
.fp-table tbody tr:last-child td { border-bottom: none; }
.fp-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.fp-dim { color: var(--v4-text-faint); }
.fp-table-empty {
    text-align: center;
    color: var(--v4-text-muted);
    padding: 26px 12px !important;
}

.fp-row-total td {
    background: var(--v4-surface-tint);
    font-weight: 700;
    color: var(--v4-text-strong);
    border-bottom: 2px solid var(--v4-accent-tint-strong);
}
.fp-row-group > td:first-child { padding-left: 6px; }
.fp-row-group td {
    font-weight: 700;
    color: var(--v4-text-strong);
    background: #fcfefb;
}
.fp-row-group.is-empty td, .fp-row-sub.is-empty td { color: var(--v4-text-faint); font-weight: 500; }
.fp-row-group.is-residual td { background: var(--v4-warning-tint); }
.fp-row-sub td:first-child { padding-left: 40px; }
.fp-row-sub td { font-size: 14px; color: var(--v4-text-muted); }
.fp-row-sub:hover td, .fp-row-group:hover td { background: var(--v4-accent-tint); }

.fp-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: transparent;
    font: inherit;
    font-weight: 700;
    color: inherit;
    text-align: left;
    padding: 4px 6px;
    margin: -4px -6px;
    border-radius: var(--v4-radius-sm);
    cursor: pointer;
}
.fp-toggle.is-static { cursor: default; }
.fp-toggle:focus-visible { outline: none; box-shadow: var(--v4-ring); }
.fp-chev {
    flex: 0 0 auto;
    color: var(--v4-accent);
    transition: transform var(--v4-dur) var(--v4-ease);
}
.fp-toggle[aria-expanded="true"] .fp-chev { transform: rotate(90deg); }
.fp-row-name { min-width: 0; }
.fp-row-count {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--v4-text-faint);
    background: var(--v4-surface-tint);
    border-radius: var(--v4-radius-pill);
    padding: 1px 7px;
}
.fp-unit-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: none;
    padding: 4px 6px;
    margin: -4px -6px;
    border-radius: var(--v4-radius-sm);
    font: inherit;
    font-weight: 700;
    color: var(--v4-text-strong);
    text-align: left;
    cursor: pointer;
}
.fp-unit-name:hover { color: var(--v4-accent-strong); text-decoration: underline; }
.fp-unit-name:focus-visible { outline: none; box-shadow: var(--v4-ring); }

/* Meter: fill on a lighter step of the same ramp, so state reads across it. */
.fp-meter {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}
.fp-meter-track {
    width: 78px;
    height: 6px;
    border-radius: 3px;
    background: var(--v4-accent-tint);
    overflow: hidden;
    flex: 0 0 auto;
}
.fp-meter-fill {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--fp-bar);
}
.fp-meter-fill.is-negative { background: #22470b; }
.fp-meter-fill.is-water { background: var(--fp-water); }
.fp-meter-track.is-water { background: #dbeef6; }
.fp-meter-text {
    width: 54px;
    text-align: right;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--v4-text-muted);
}
.fp-num.is-good { color: var(--v4-success); font-weight: 700; }
.fp-num.is-bad { color: #8a5400; font-weight: 700; }

.fp-stamp {
    margin: 0 0 8px;
    text-align: center;
    font-size: 12.5px;
    color: var(--v4-text-faint);
    line-height: 1.5;
}

@media (max-width: 860px) {
    .fp-plate { grid-template-columns: 1fr; gap: 18px; }
    .fp-pie-wrap { height: 210px; }
    .fp-hero-value { font-size: 46px; }
    .fp-headline { padding: 20px; }
    .fp-card { padding: 18px 16px 16px; }
    .fp-table-scroll { margin: 0 -16px; padding: 0 16px; }
    /* Give the name column room and let the card scroll, rather than squeezing
       "Vineyard field operations" onto three lines. */
    .fp-table { min-width: 620px; }
    .fp-row-sub td:first-child { padding-left: 24px; }
    .fp-meter-track { width: 48px; }
    .fp-exports { width: 100%; }
    .fp-btn-primary { flex: 1 1 auto; justify-content: center; }
}

/* ---------------------------------------------------------------------------
 * PRINT (Step 3 stays printable, hide chrome)
 *
 * Plain Ctrl+P is the fallback — "Download report" builds the real document.
 * ------------------------------------------------------------------------- */

@media print {
    .step-header, .auth-container, .step-footer, .ghost-back,
    .page-hero-aside, .other-categories, .variant-tabs-wrap,
    .unit-filter, .fp-topbar, .fp-table-tools, .fp-card-hint,
    .help-hint, .fp-chart-interaction { display: none !important; }
    .fp-key-row.is-hidden { opacity: 1 !important; transition: none !important; }
    .fp-key-row.is-hidden .fp-key-name { text-decoration: none !important; }
    .fp-card, .fp-headline {
        box-shadow: none !important;
        break-inside: avoid;
        background: #fff !important;
    }
    .fp-row-sub[hidden] { display: table-row !important; }
    .fp-table-scroll { overflow: visible !important; margin: 0 !important; padding: 0 !important; }
    .step-content { padding: 0 !important; background: white !important; }
    .footprint-view-host, .detail-hero, .config-view-wrapper {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }
}

/* ===========================================================================
 * v4 — 2026-05-12d UX overhaul for grandma + Gen-Z-with-ADHD usability
 *
 * Goal: every action visible, every state explained, no jargon by itself,
 * no surprise affordances, no floating overlays in the 3-step flow.
 * =========================================================================== */

/* --- 1. Step shell: bigger tap targets, never-hidden actions on cards --- */

/* Sign out: small but always visible, with a confirm dialog (see auth.js) */
.logout-button { min-height: 36px; }

/* Help button: matches sign-out chrome; icon-only on narrow screens */
.help-button { min-height: 36px; }
@media (max-width: 720px) {
    .help-button { padding: 7px 10px; }
    .help-button-label { display: none; }
}

/* Step tabs: big enough to actually tap with a fingertip */
.step-tab { min-height: 40px; }
.step-num { width: 24px; height: 24px; font-size: 13px; }

/* Unit-card action buttons — fixed-size icon buttons with floating tooltips
   on hover. Tooltips are absolutely positioned so they never push the badge. */
.unit-card-menu {
    opacity: 1 !important;
    gap: 6px;
}
.unit-card-icon-btn {
    position: relative;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--v4-radius-sm);
    background: var(--v4-surface-tint);
    border: 1px solid var(--v4-border-faint);
    color: var(--v4-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 160ms ease, color 160ms ease,
                border-color 160ms ease, transform 160ms cubic-bezier(.2,.9,.3,1.2);
}
.unit-card-icon-btn .btn-icon { flex-shrink: 0; }

.unit-card-icon-btn:hover,
.unit-card-icon-btn:focus-visible {
    background: var(--v4-accent-tint);
    color: var(--v4-accent-strong);
    border-color: var(--v4-accent);
    transform: translateY(-1px);
}
.unit-card-icon-btn.btn-edit-unit:hover,
.unit-card-icon-btn.btn-edit-unit:focus-visible {
    background: #e3f0ff;
    color: #1565c0;
    border-color: #1565c0;
}
.unit-card-icon-btn.btn-delete-unit:hover,
.unit-card-icon-btn.btn-delete-unit:focus-visible {
    background: var(--v4-danger-tint);
    color: var(--v4-danger);
    border-color: var(--v4-danger);
}

/* Floating tooltip — anchored to the button, escapes the card. */
.unit-card-icon-btn .btn-label {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px) scale(0.92);
    transform-origin: top center;
    background: #1f2a25;
    color: #fff;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.08);
    z-index: 20;
    transition: opacity 140ms ease, transform 200ms cubic-bezier(.2,.9,.3,1.4);
}
.unit-card-icon-btn .btn-label::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-bottom-color: #1f2a25;
}
.unit-card-icon-btn:hover .btn-label,
.unit-card-icon-btn:focus-visible .btn-label {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    transition-delay: 80ms;
}
.unit-card-icon-btn.btn-edit-unit .btn-label,
.unit-card-icon-btn.btn-edit-unit .btn-label::before { background: #1565c0; }
.unit-card-icon-btn.btn-edit-unit .btn-label::before { border-bottom-color: #1565c0; }
.unit-card-icon-btn.btn-delete-unit .btn-label,
.unit-card-icon-btn.btn-delete-unit .btn-label::before { background: var(--v4-danger); }
.unit-card-icon-btn.btn-delete-unit .btn-label::before { border-bottom-color: var(--v4-danger); }

@media (prefers-reduced-motion: reduce) {
    .unit-card-icon-btn,
    .unit-card-icon-btn .btn-label { transition: none; }
}

/* --- 2. Data widget host: no double titles, no floating prev/next ------- */

/* The category page hero already shows the title and scope — hide the
   widget's own duplicate header when it's rendered inside the 3-step shell. */
.footprint-view-host .widget-header { display: none !important; }
.footprint-view-host .title + .scope-tags { display: none; }

/* Floating prev/next pollutes the 3-step flow. Kill it everywhere inside
   the app shell (Step 1 inline configure + Step 2 category detail). */
.app-container .floating-nav { display: none !important; }

/* Help button at the top of a data-entry view (replaces the bare "i" circle) */
.widget-help-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--v4-surface-tint);
    border: 1px solid var(--v4-border-faint);
    color: var(--v4-accent-strong);
    padding: 7px 12px;
    border-radius: var(--v4-radius);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 14px;
    font-family: inherit;
    transition: background var(--v4-dur) var(--v4-ease), border-color var(--v4-dur) var(--v4-ease);
}
.widget-help-btn:hover {
    background: var(--v4-accent-tint);
    border-color: var(--v4-accent);
}

/* Filter pills: clearer labels with a non-cryptic "Recommended" tag */
.footprint-view-host .filter-container {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 18px;
    gap: 8px;
}
.footprint-view-host .filter-btn {
    padding: 10px 16px;
    border-radius: var(--v4-radius);
    font-size: 13.5px;
    border-color: var(--v4-border-soft);
    background: var(--v4-surface);
    box-shadow: none;
    transform: none;
    min-height: 40px;
}
.footprint-view-host .filter-btn:hover {
    border-color: var(--v4-accent);
    background: var(--v4-accent-tint);
    color: var(--v4-accent-strong);
    transform: none;
    box-shadow: none;
}
.footprint-view-host .filter-btn.active {
    background: var(--v4-accent);
    border-color: var(--v4-accent);
    color: white;
    box-shadow: 0 2px 6px rgba(90, 148, 22, 0.22);
}
.footprint-view-host .filter-container .filter-hint {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding: 0 4px;
}
.filter-recommended {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.footprint-view-host .filter-btn:not(.active) .filter-recommended {
    background: var(--v4-accent-tint);
    color: var(--v4-accent-strong);
}

/* Data-widget form: roomier labels, friendlier inputs */
.footprint-view-host .selection-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}
.footprint-view-host label {
    font-size: 13px;
    color: var(--v4-text-default);
    font-weight: 600;
    margin-bottom: 8px;
}
.footprint-view-host input[type="number"],
.footprint-view-host select,
.footprint-view-host .custom-select-display {
    border: 1.5px solid var(--v4-border-soft);
    border-radius: var(--v4-radius);
    background: var(--v4-surface);
    min-height: 46px;
    font-size: 15px;
    transition: border-color var(--v4-dur) var(--v4-ease), box-shadow var(--v4-dur) var(--v4-ease);
}
.footprint-view-host input[type="number"]:focus,
.footprint-view-host select:focus,
.footprint-view-host .custom-select-display:focus,
.footprint-view-host .custom-select-display.active {
    outline: none;
    border-color: var(--v4-accent);
    box-shadow: var(--v4-ring);
}
.footprint-view-host .custom-select-text { font-size: 15px; }
.footprint-view-host .custom-select-text.placeholder { color: var(--v4-text-muted); }

/* The primary picker is a styled custom dropdown; Source/Fuel, Type, Entry
   Method, Unit etc. are native <select>s. The surrounding `background`
   shorthand above wiped their arrow (leaving appearance:none with no glyph),
   so they read as plain boxes next to the custom picker. Restore a matching
   arrow, add the same hover, and mirror the muted-placeholder / strong-selected
   text treatment so the whole row looks like one designed control set. */
.footprint-view-host select {
    color: var(--v4-text-strong);
    font-weight: 500;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%23243a30' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 10px;
    padding-right: 38px;
}
.footprint-view-host select:hover,
.footprint-view-host .custom-select-display:hover {
    border-color: var(--v4-border-strong);
}
.footprint-view-host select:has(option[value=""]:checked) {
    color: var(--v4-text-muted);
    font-weight: 400;
}

/* Live auto-save status in the action bar. Every add/edit/delete persists on
   its own now, so this pill is the user's proof the list is safe. */
.footprint-view-host .form-actions-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.footprint-view-host .form-actions-status svg { flex-shrink: 0; }
.footprint-view-host .form-actions-status.is-saved { color: var(--v4-success); font-weight: 600; }
.footprint-view-host .form-actions-status.is-saving { color: var(--v4-text-muted); font-weight: 500; }
.footprint-view-host .form-actions-status.is-empty { color: var(--v4-text-muted); font-weight: 500; }
.footprint-view-host .form-actions-status.is-error { color: var(--v4-danger); font-weight: 600; }
.footprint-view-host .form-actions-status .save-retry {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-weight: 700;
    color: var(--v4-danger);
    text-decoration: underline;
    cursor: pointer;
}
.save-spinner {
    display: inline-block;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid var(--v4-accent-tint-strong);
    border-top-color: var(--v4-accent);
    animation: spin 0.7s linear infinite;
}

/* Brief green pulse on a row the moment it's added, pairing with the "Saved"
   pill so it's obvious the entry landed and was stored. */
@keyframes rowJustSaved {
    from { background-color: var(--v4-accent-tint); }
    to { background-color: transparent; }
}
.footprint-view-host .form-table tr.row-just-saved td {
    animation: rowJustSaved 1.2s var(--v4-ease);
}

/* Add Entry row: just the right-aligned add button. */
.footprint-view-host .add-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-top: 1px solid var(--v4-border-faint);
    padding-top: 18px;
    margin-top: 6px;
}
.footprint-view-host #addBtn {
    min-width: 160px;
    min-height: 46px;
    font-size: 14.5px;
    padding: 12px 22px;
}

/* The data table: stronger contrast on the empty state, friendlier header.
 * `overflow: visible` lets the per-row action tooltips escape the table. */
.footprint-view-host .form-table {
    border-radius: var(--v4-radius-lg);
    border-color: var(--v4-border-faint);
    margin-top: 18px;
    overflow: visible;
}
.footprint-view-host .form-table thead th:first-child { border-top-left-radius: var(--v4-radius-lg); }
.footprint-view-host .form-table thead th:last-child { border-top-right-radius: var(--v4-radius-lg); }
.footprint-view-host .form-table thead th {
    background: var(--v4-surface-tint);
    color: var(--v4-text-strong);
    font-size: 11.5px;
    letter-spacing: 0.5px;
}
.footprint-view-host .form-table #emptyRow td {
    color: var(--v4-text-muted);
    text-align: center;
    padding: 24px;
    font-size: 14px;
    background: var(--v4-surface-tint);
}

/* In-flow save bar at the end of the form (was sticky — felt like it floated). */
.footprint-view-host .form-actions {
    background: transparent;
    border-top: 1px solid var(--v4-border-faint);
    padding: 14px 0 4px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.footprint-view-host .form-actions-status {
    flex: 1 1 auto;
    color: var(--v4-text-muted);
    font-size: 13px;
    font-weight: 500;
}
.footprint-view-host .form-actions-status.dirty {
    color: var(--v4-warning);
    font-weight: 600;
}
.footprint-view-host .form-actions .button {
    min-width: 140px;
    min-height: 44px;
}

/* Same in-flow save bar for configuration pages. */
.config-view-wrapper .form-actions {
    background: transparent;
    border-top: 1px solid var(--v4-border-faint);
    padding: 14px 0 4px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
}
.config-view-wrapper .form-actions .button,
.config-view-wrapper .form-actions .btn-save-next {
    min-width: 140px;
    min-height: 44px;
}

/* --- 3. Step 2 category list: friendlier scopes, calmer card layout ----- */

.footprint-category {
    grid-template-columns: 26px 1fr 16px;
    padding: 18px 20px;
    gap: 14px;
    min-height: 96px;
}
.footprint-category-status {
    width: 26px;
    height: 26px;
}
.footprint-category-title { font-size: 15px; line-height: 1.3; }
.footprint-category-desc { font-size: 13px; line-height: 1.5; }

/* New: friendlier scope labels (Direct / Energy / Supply chain) */
.scope-friendly {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    letter-spacing: 0.2px;
    line-height: 1.5;
    text-transform: none;
}
.scope-friendly[data-scope="1"] { background: #e8f5e9; color: #2e7d32; }
.scope-friendly[data-scope="2"] { background: #e3f2fd; color: #1565c0; }
.scope-friendly[data-scope="3"] { background: #fff3e0; color: #e65100; }
.scope-friendly[data-scope="water"] { background: #e0f2f1; color: #00695c; }
.scope-friendly-glyph { font-size: 13px; line-height: 1; }

/* Hide the small unit-type badges in step-2 list — the eyebrow header
   already says which units apply. They add noise without helping. */
.footprint-category .footprint-category-types { display: none; }

/* Stronger done state: full green tint, check at left, faint shadow */
.footprint-category.has-data {
    background: linear-gradient(180deg, #ffffff 0%, var(--v4-accent-tint) 100%);
    border-color: var(--v4-accent);
    box-shadow: 0 4px 14px rgba(90, 148, 22, 0.12);
}
.footprint-category.has-data .footprint-category-title { color: var(--v4-accent-strong); }

/* Hide group meter when it shows 0/0 (cleaner for sparse profiles) */
.category-group-meter[data-empty] { display: none; }

/* --- 4. Step 2 detail header: tighter, no redundant scope tag duplication */

.detail-hero-scopes .scope-friendly { font-size: 12px; padding: 5px 12px; }

/* Empty-data state shown inside step 3 when no entries exist yet */
.dashboard-empty {
    background: var(--v4-surface);
    border: 1px dashed var(--v4-border-strong);
    border-radius: var(--v4-radius-xl);
    padding: 36px 28px;
    text-align: center;
    margin-top: 16px;
    box-shadow: var(--v4-shadow-low);
}
.dashboard-empty h3 {
    margin: 0 0 6px;
    color: var(--v4-text-strong);
    font-size: 20px;
}
.dashboard-empty p { color: var(--v4-text-muted); margin: 0 0 16px; line-height: 1.55; }

/* --- 6. Modals: bigger close, more legible body --------------------------- */

.app-modal { max-width: 540px; }
.app-modal-body { font-size: 14.5px; }
.app-modal-close { width: 36px; height: 36px; }
.app-modal-body .form-group input,
.app-modal-body .form-group select { min-height: 46px; font-size: 15px; }
.modal-actions .button { min-height: 44px; }

/* The location picker dropdown can extend past the viewport on small
   screens; keep it constrained */
.location-picker-wrapper select { font-size: 15px; }

/* --- 7. Toast: theme to v4 instead of an inline-style island ---------- */
#globalSuccessMessage {
    background-color: var(--v4-accent) !important;
    color: white !important;
    box-shadow: 0 8px 24px rgba(90, 148, 22, 0.28) !important;
    border-radius: var(--v4-radius) !important;
    padding: 12px 22px !important;
    font-size: 14.5px !important;
}

/* --- 8. Focus visibility (keyboard users + reduced surprise) ------------- */
.button:focus-visible,
.unit-card-cta:focus-visible,
.unit-card-icon-btn:focus-visible,
.filter-btn:focus-visible,
.year-chip:focus-visible,
.year-arrow:focus-visible,
.variant-tab:focus-visible,
.tab-btn:focus-visible,
.download-btn:focus-visible,
.profile-option:focus-within,
.type-card:focus-visible,
.footprint-category:focus-visible,
.page-eyebrow-link:focus-visible,
.link-button:focus-visible,
.logout-button:focus-visible {
    outline: none;
    box-shadow: var(--v4-ring);
}

/* --- 9. Step-empty calmer (less shadow, bigger CTA) ---------------------- */
.step-empty .button { min-width: 200px; }

/* --- 10. Responsive tweaks for the data widget ------------------------- */
@media (max-width: 720px) {
    .footprint-view-host .form-actions { flex-wrap: wrap; }
    .footprint-view-host .form-actions .button { flex: 1 1 auto; }
    .add-block .type-card-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
 * --- 11. Configure forms: v4 polish
 *
 * The configuration views (vineyard / supplier / winery / corporate / wine
 * supplier / contract winemaking) ship their HTML with v3-era classes
 * (.form-card, .info-title, .form-group, .check-item, ...). The 3-step shell
 * shows them inside .config-view-wrapper, so we scope all overrides there.
 * The goal: same markup, v4 look — roomier inputs, no card-on-card stack,
 * cleaner section headings, focus rings, and modernised info modals.
 * ------------------------------------------------------------------------- */

/* Kill the inline Inter override the legacy templates carry. */
.config-view-wrapper #form-app,
.config-view-wrapper #supplier-app,
.config-view-wrapper #corporate-app,
.config-view-wrapper #winery-app,
.config-view-wrapper #wine-supplier-app,
.config-view-wrapper #contract-wm-app {
    font-family: inherit !important;
    padding: 0 !important;
    color: var(--v4-text-default);
}

/* The Save / Save & Continue buttons inherit legacy fern-green; pull them
 * onto the v4 accent so the form actions match every other v4 button. */
.config-view-wrapper .btn-save-next {
    background-color: var(--v4-accent);
    color: white;
    border: 1.5px solid var(--v4-accent);
    border-radius: var(--v4-radius);
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(90, 148, 22, 0.22);
    min-height: 44px;
    transition: background var(--v4-dur) var(--v4-ease), border-color var(--v4-dur) var(--v4-ease), transform var(--v4-dur) var(--v4-ease), box-shadow var(--v4-dur) var(--v4-ease);
}
.config-view-wrapper .btn-save-next:hover {
    background-color: var(--v4-accent-strong);
    border-color: var(--v4-accent-strong);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(90, 148, 22, 0.28);
}
.config-view-wrapper .btn-save-next:disabled {
    background: #d9e0d4;
    border-color: #d9e0d4;
    color: var(--v4-text-faint);
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
}

/* Wrapper already has a card; the inner form-cards should feel like sections
 * inside it, not nested cards. Drop their own borders/shadows and use a
 * thin divider between sections. */
.config-view-wrapper .form-card {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin: 0 0 28px;
    position: relative;
}
.config-view-wrapper .form-card + .form-card {
    border-top: 1px solid var(--v4-border-faint);
    padding-top: 24px;
}

/* Section heading — replaces the underlined .info-title. */
.config-view-wrapper .info-title {
    color: var(--v4-text-strong);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.1px;
    border-bottom: none;
    padding-bottom: 0;
    margin: 0 0 16px;
    line-height: 1.3;
}

/* Inputs, selects, textareas — match the data-widget feel. */
.config-view-wrapper .form-group { margin-bottom: 16px; min-width: 0; }
.config-view-wrapper .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.config-view-wrapper .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) {
    .config-view-wrapper .grid-2,
    .config-view-wrapper .grid-3 { grid-template-columns: minmax(0, 1fr); }
}
.config-view-wrapper .form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--v4-text-default);
    margin-bottom: 8px;
    letter-spacing: 0.1px;
}
.config-view-wrapper input[type="text"],
.config-view-wrapper input[type="number"],
.config-view-wrapper input[type="email"],
.config-view-wrapper select,
.config-view-wrapper textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--v4-border-soft);
    border-radius: var(--v4-radius);
    font-size: 14.5px;
    background: var(--v4-surface);
    color: var(--v4-text-strong);
    font-family: inherit;
    min-height: 46px;
    transition: border-color var(--v4-dur) var(--v4-ease), box-shadow var(--v4-dur) var(--v4-ease), background var(--v4-dur) var(--v4-ease);
}
.config-view-wrapper input::placeholder,
.config-view-wrapper textarea::placeholder { color: var(--v4-text-faint); }
.config-view-wrapper input:focus,
.config-view-wrapper select:focus,
.config-view-wrapper textarea:focus {
    outline: none;
    border-color: var(--v4-accent);
    box-shadow: var(--v4-ring);
    background: var(--v4-surface);
}
.config-view-wrapper select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235a9416' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
    cursor: pointer;
}
.config-view-wrapper .year-period-hint {
    font-size: 12px;
    color: var(--v4-text-muted);
    margin-top: 6px;
}

/* Location picker — match v4 input styling so it doesn't feel grafted on. */
.config-view-wrapper .custom-select-display {
    border: 1.5px solid var(--v4-border-soft);
    border-radius: var(--v4-radius);
    background: var(--v4-surface);
    min-height: 46px;
    padding: 11px 14px;
    transition: border-color var(--v4-dur) var(--v4-ease), box-shadow var(--v4-dur) var(--v4-ease);
}
.config-view-wrapper .custom-select-display:hover {
    border-color: var(--v4-border-strong);
}
.config-view-wrapper .custom-select-display:focus,
.config-view-wrapper .custom-select-display.active {
    border-color: var(--v4-accent);
    box-shadow: var(--v4-ring);
}
.config-view-wrapper .custom-select-text { font-size: 14.5px; color: var(--v4-text-strong); }
.config-view-wrapper .custom-select-text.placeholder { color: var(--v4-text-faint); }
.config-view-wrapper .custom-select-arrow { color: var(--v4-accent-strong); }

/* Checkbox rows — clean v4 row, no card affordance. */
.config-view-wrapper .check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin: 0 -10px;
    border-radius: var(--v4-radius-sm);
    font-size: 13.5px;
    color: var(--v4-text-default);
    cursor: pointer;
    transition: background var(--v4-dur-fast) var(--v4-ease);
}
.config-view-wrapper .check-item:hover { background: var(--v4-surface-tint); }
.config-view-wrapper .check-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--v4-accent);
    cursor: pointer;
}

/* The "mixed approach" highlighted block (e.g. tillage mix, grape categories). */
.config-view-wrapper .mixed-panel {
    background: var(--v4-surface-tint);
    border: 1px solid var(--v4-border-faint);
    border-radius: var(--v4-radius);
    padding: 16px;
    margin-top: 12px;
}

/* Dividers between sub-blocks within a form-card. */
.config-view-wrapper .section-divider {
    border-top: 1px solid var(--v4-border-faint);
    margin-top: 18px;
    padding-top: 18px;
}
.config-view-wrapper .section-divider-thick {
    border-top: 1px solid var(--v4-border-faint);
    margin-top: 20px;
    padding-top: 20px;
}

/* Info "i" button — corner ghost, matches v4 tones. */
.config-view-wrapper .info-btn {
    position: absolute;
    top: -4px;
    right: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--v4-surface-tint);
    border: 1px solid var(--v4-border-faint);
    color: var(--v4-accent-strong);
    font-family: inherit;
    font-style: italic;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: background var(--v4-dur) var(--v4-ease), border-color var(--v4-dur) var(--v4-ease), color var(--v4-dur) var(--v4-ease), transform var(--v4-dur) var(--v4-ease);
}
.config-view-wrapper .info-btn:hover {
    background: var(--v4-accent-tint);
    border-color: var(--v4-accent);
    color: var(--v4-accent-strong);
    transform: none;
}
.config-view-wrapper .info-btn:focus-visible {
    outline: none;
    box-shadow: var(--v4-ring);
}

/* Validation hint colours. */
.config-view-wrapper .validation-success { color: var(--v4-success); font-weight: 600; }
.config-view-wrapper .validation-error { color: var(--v4-danger); font-weight: 600; }
.config-view-wrapper .text-muted { color: var(--v4-text-muted); }

/* Inline "note" boxes inside modal body. */
.config-view-wrapper .modal-body .note {
    border-radius: var(--v4-radius-sm);
}

/* Distribution widget table inside winery config. */
.config-view-wrapper .dist-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--v4-border-faint);
    border-radius: var(--v4-radius);
    overflow: hidden;
    margin-top: 12px;
}
.config-view-wrapper .dist-table thead th {
    background: var(--v4-surface-tint);
    color: var(--v4-text-strong);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--v4-border-faint);
}
.config-view-wrapper .dist-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--v4-border-faint);
    font-size: 13.5px;
    color: var(--v4-text-default);
}
.config-view-wrapper .dist-table tbody tr:last-child td { border-bottom: none; }
/* Tooltip on the row-remove button needs to escape the table. */
.config-view-wrapper .dist-table { overflow: visible; }

/* Subsection heading inside a form-card (e.g. "Wine Production Mix"). */
.config-view-wrapper .wine-mix-heading {
    font-size: 14px;
    font-weight: 700;
    color: var(--v4-text-strong);
    letter-spacing: 0.1px;
    margin: 0 0 4px;
}
.config-view-wrapper .wine-mix-hint {
    font-size: 13px;
    color: var(--v4-text-muted);
    margin: 0 0 14px;
    line-height: 1.5;
}

/* Wine production mix — computed % display next to each litre input. */
.config-view-wrapper .wine-mix-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 12px;
}
.config-view-wrapper .wine-mix-row {
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 14px;
    align-items: end;
}
.config-view-wrapper .wine-mix-row .form-group { margin-bottom: 0; }
.config-view-wrapper .wine-mix-pct {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 0;
}
.config-view-wrapper .wine-mix-pct-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--v4-text-muted);
}
.config-view-wrapper .wine-mix-pct-value {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 11px 14px;
    border: 1.5px dashed var(--v4-border-soft);
    border-radius: var(--v4-radius);
    background: var(--v4-surface-tint);
    color: var(--v4-text-muted);
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: color var(--v4-dur) var(--v4-ease), border-color var(--v4-dur) var(--v4-ease), background var(--v4-dur) var(--v4-ease);
}
.config-view-wrapper .wine-mix-pct-value.has-value {
    color: var(--v4-accent-strong);
    border-color: var(--v4-accent-tint-strong);
    border-style: solid;
    background: var(--v4-accent-tint);
}
.config-view-wrapper .wine-mix-pct-value::after { content: "%"; margin-left: 2px; }
@media (max-width: 540px) {
    .config-view-wrapper .wine-mix-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* The info modals shipped with each config (.modal-overlay/.modal-content) —
 * give them the v4 sheen so they don't feel like a different app. */
.config-view-wrapper .modal-overlay {
    background: rgba(20, 38, 30, 0.55);
    backdrop-filter: blur(6px);
    padding: 24px;
}
.config-view-wrapper .modal-content {
    background: var(--v4-surface);
    border: 1px solid var(--v4-border-faint);
    border-radius: var(--v4-radius-xl);
    box-shadow: var(--v4-shadow-high);
    max-width: 560px;
}
.config-view-wrapper .modal-header {
    background: var(--v4-surface);
    border-bottom: 1px solid var(--v4-border-faint);
    padding: 22px 26px 14px;
}
.config-view-wrapper .modal-header .modal-title {
    color: var(--v4-text-strong);
    font-size: 19px;
    letter-spacing: -0.2px;
    font-weight: 700;
}
.config-view-wrapper .modal-header .close-modal {
    background: transparent;
    border: 1px solid transparent;
    color: var(--v4-text-muted);
    width: 32px;
    height: 32px;
    border-radius: var(--v4-radius-sm);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--v4-dur-fast) var(--v4-ease), color var(--v4-dur-fast) var(--v4-ease);
}
.config-view-wrapper .modal-header .close-modal:hover {
    background: var(--v4-surface-tint);
    color: var(--v4-text-strong);
}
.config-view-wrapper .modal-body {
    padding: 18px 26px 24px;
    color: var(--v4-text-default);
    font-size: 14.5px;
    line-height: 1.6;
}
.config-view-wrapper .modal-body strong { color: var(--v4-text-strong); }

/* ===========================================================================
 * Submitted reports
 *
 * Submitting a year makes its units read-only. Their screens keep the data
 * on show and drop the controls that would change it; the database rejects
 * any write regardless.
 * =========================================================================== */

/* Step 3: the year's finishing step, then its calm "done" state. */
.fp-btn-submit,
.fp-btn-submitted {
    background: var(--color-mint-green);
    color: var(--color-dark-green);
}
.fp-btn-submit { border-color: var(--color-fern-green); }
.fp-btn-submitted { border-color: transparent; }

.lock-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin: 0 0 16px;
    padding: 12px 16px;
    background: var(--color-mint-green);
    border: 1px solid var(--v4-accent-tint-strong);
    border-radius: var(--v4-radius);
    color: var(--color-dark-green);
    font-size: 14.5px;
}
.lock-note-btn { min-height: 38px; padding: 8px 16px; }

.unit-card-tag {
    padding: 3px 10px;
    border-radius: var(--v4-radius-pill);
    background: var(--color-mint-green);
    color: var(--color-dark-green);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.lock-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
/* What `disabled` doesn't reach, which would still look clickable: the
   location picker's div and the form guide's button. */
.lock-fieldset .lp-display { pointer-events: none; }
.lock-fieldset .info-btn { display: none; }
/* Read-only reads as finished: ticks stand out, nothing invites a click. */
.lock-fieldset .check-item:not(:has(:checked)) { opacity: .6; }
.lock-fieldset .check-item,
.config-view-wrapper .lock-fieldset :is(select, input):disabled { cursor: default; }
.lock-fieldset .check-item:hover { background: none; }
.is-locked .form-actions,
.footprint-detail.is-locked .form-body,
.footprint-detail.is-locked .form-table td.actions,
.footprint-detail.is-locked .form-table th:last-child,
.footprint-detail.is-locked .q-btn:not(.active),
.footprint-detail.is-locked .q-helper { display: none !important; }
/* The entry-method tabs only steer the add form. The pest widget's tabs also
   filter its table, so those stay. */
.footprint-detail.is-locked .filter-container:has(.filter-btn[data-index]) { display: none !important; }
.footprint-detail.is-locked .q-btn { pointer-events: none; }
/* Freight saved before the payer question has no answer to show. */
.footprint-detail.is-locked .logistics-container:not(:has(.q-btn.active)) { display: none !important; }

.revision-list {
    list-style: none;
    margin: 14px 0;
    padding: 0;
    border: 1px solid var(--v4-border-faint);
    border-radius: var(--v4-radius);
}
.revision-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 8px 8px 14px;
    font-size: 14px;
    color: var(--v4-text-default);
}
.revision-list li + li { border-top: 1px solid var(--v4-border-faint); }
.revision-list .fp-btn { min-height: 34px; padding: 0 12px; }
.confirm-note { font-size: 13.5px; color: var(--v4-text-muted); }

.is-celebrating .app-modal-emoji { animation: celebrate 640ms var(--v4-ease) both; }
@keyframes celebrate {
    0% { transform: scale(0.4) rotate(-18deg); }
    60% { transform: scale(1.25) rotate(8deg); }
    100% { transform: scale(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
    .is-celebrating .app-modal-emoji { animation: none; }
}

/* ===========================================================================
 * PDF report (dashboard → Save as PDF)
 *
 * A purpose-built A4 report document that mounts to <body> when the user
 * clicks the PDF button. Charts are pre-captured to PNG, so the print
 * output is sharp vector text + crisp images — not a screenshot of the
 * live dashboard. Hidden on screen; the @media print block at the bottom
 * shows the report and hides everything else.
 * =========================================================================== */

.pdf-report {
    display: none;
}

/* All print rules are scoped to body.is-printing-pdf-report so that
   plain Ctrl+P on other steps falls through to the legacy print block
   above (and an empty Ctrl+P on a step without the report doesn't blank
   the page). The class is toggled by generatePdfReport in dashboard.js;
   the corresponding @page rule is injected dynamically so its 0-margin
   only applies to the PDF report flow. */

@media print {
    body.is-printing-pdf-report,
    html:has(body.is-printing-pdf-report) {
        background: #ffffff !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.is-printing-pdf-report > *:not(#pdf-report-root) {
        display: none !important;
    }

    body.is-printing-pdf-report .pdf-report {
        display: block !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }
}

/* Typography lives OUTSIDE @media print on purpose. The paginator in
   report-pdf.js measures row heights while the document is mounted off-screen
   (screen media) and the printer then lays out the same DOM under print media
   — if font-size or line-height differed between the two, every page break
   would be computed against the wrong row height. */
.pdf-report {
    color: #1f3128;
    font-family: 'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 10pt;
    line-height: 1.4;
}

/* The next block governs both screen-preview (if we ever want to show
   the report on-screen for debugging) and the @media-print rendering.
   Most rules don't depend on print-only context — they just style
   .pdf-report content. Keeping them outside @media print means they
   also apply if a developer toggles `display: block` on the root. */

.pdf-report,
.pdf-report * {
    box-sizing: border-box;
}

.pdf-page {
    position: relative;
    width: 210mm;
    /* A hair under A4 so sub-pixel rounding can't spill into a blank page. */
    height: 296.6mm;
    padding: 16mm 16mm 12mm;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    page-break-after: always;
    break-after: page;
    overflow: hidden;
}

.pdf-page:last-child {
    page-break-after: auto;
    break-after: auto;
}

/* Fixed height + hidden overflow is what makes the JS paginator in
   report-pdf.js able to detect an overflow: scrollHeight > clientHeight. */
.pdf-page-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ─── Running head (top of every internal page) ─── */
.pdf-running-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 6mm;
    margin-bottom: 8mm;
    border-bottom: 1px solid #dde9d2;
    font-size: 8.5pt;
    color: #6a7a72;
    letter-spacing: 0.04em;
}
.pdf-running-head-brand {
    font-weight: 700;
    color: #5a9416;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 9pt;
}
.pdf-running-head-doc {
    text-transform: uppercase;
    font-size: 8pt;
    letter-spacing: 0.12em;
    color: #94a39c;
}

/* ─── Page footer ─── */
.pdf-page-footer {
    flex: 0 0 auto;
    margin-top: 10mm;
    padding-top: 4mm;
    border-top: 1px solid #ecf3e6;
    display: flex;
    justify-content: space-between;
    font-size: 8pt;
    color: #94a39c;
    letter-spacing: 0.04em;
}

/* ─── Cover page ─── */
.pdf-page-cover {
    padding: 0;
    color: #1f3128;
    background:
        radial-gradient(120% 80% at 100% 0%, #ecf7ef 0%, #ffffff 55%),
        #ffffff;
    overflow: hidden;
}

.pdf-cover-band {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 18mm 18mm 10mm;
    gap: 8mm;
}
.pdf-cover-logo {
    height: 14mm;
    width: auto;
}
.pdf-cover-eyebrow {
    font-size: 10pt;
    font-weight: 700;
    color: #5a9416;
    text-transform: uppercase;
    letter-spacing: 0.32em;
}
.pdf-cover-assurance {
    flex: 0 0 auto;
    margin: 0 18mm;
    color: #3a4d42;
    font-size: 9pt;
    line-height: 1.45;
}

.config-view-wrapper .production-ownership {
    margin: 18px 0 0;
    padding: 18px;
    border: 1px solid var(--v4-accent-tint-strong);
    border-radius: var(--v4-radius);
    background: var(--v4-accent-tint);
}
.config-view-wrapper .production-ownership .grid-2 { margin-top: 12px; }
.config-view-wrapper .production-ownership .form-group { margin-bottom: 0; }

.pdf-cover-main {
    flex: 1 1 auto;
    padding: 0 18mm;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6mm;
}
.pdf-cover-prep {
    margin: 0;
    font-size: 11pt;
    color: #6a7a72;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.pdf-cover-title {
    margin: 0;
    font-size: 36pt;
    line-height: 1.05;
    font-weight: 700;
    color: #1f3128;
    letter-spacing: -0.01em;
    max-width: 150mm;
}
.pdf-cover-period {
    margin: 0;
    font-size: 12pt;
    color: #3a4d42;
}

.pdf-cover-headline {
    margin-top: 12mm;
    padding: 10mm 12mm;
    background: #1f3128;
    color: #ffffff;
    border-radius: 4mm;
    display: flex;
    flex-direction: column;
    gap: 4mm;
    max-width: 130mm;
    box-shadow: 0 6mm 12mm rgba(31, 49, 40, 0.10);
}
.pdf-cover-headline-label {
    font-size: 10pt;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: #b8d99b;
    font-weight: 600;
}
.pdf-cover-headline-figure {
    display: flex;
    align-items: baseline;
    gap: 4mm;
}
.pdf-cover-headline-value {
    font-size: 48pt;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    letter-spacing: -0.02em;
}
.pdf-cover-headline-unit {
    font-size: 13pt;
    color: #b8d99b;
    letter-spacing: 0.04em;
}

.pdf-cover-headline-delta {
    font-size: 11pt;
    font-weight: 700;
    color: #d2ebb4;
    letter-spacing: 0.04em;
}
.pdf-cover-units {
    margin: 6mm 0 0;
    font-size: 10pt;
    color: #6a7a72;
    max-width: 140mm;
    line-height: 1.45;
}

.pdf-cover-foot {
    flex: 0 0 auto;
    padding: 12mm 18mm 18mm;
    border-top: 4px solid #5a9416;
    background: linear-gradient(0deg, #5a9416 0%, #5a9416 12%, transparent 12%);
    display: flex;
    flex-direction: column;
    gap: 4mm;
}
.pdf-cover-tagline {
    margin: 0;
    font-size: 13pt;
    color: #1f3128;
    font-weight: 700;
    font-style: italic;
}
.pdf-cover-meta {
    display: flex;
    justify-content: space-between;
    font-size: 9pt;
    color: #6a7a72;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ─── Section typography (internal pages) ─── */
.pdf-section-eyebrow {
    margin: 0 0 2mm;
    font-size: 9pt;
    font-weight: 700;
    color: #5a9416;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}
.pdf-section-title {
    margin: 0 0 4mm;
    font-size: 22pt;
    font-weight: 700;
    color: #1f3128;
    letter-spacing: -0.01em;
    line-height: 1.15;
}
.pdf-section-lede {
    margin: 0 0 8mm;
    font-size: 11pt;
    color: #3a4d42;
    max-width: 160mm;
    line-height: 1.45;
}
.pdf-section-lede strong {
    color: #1f3128;
    font-weight: 700;
}

/* ─── Stat cards (summary page) ─── */
.pdf-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4mm;
    margin-bottom: 10mm;
}
.pdf-stat {
    padding: 5mm 5mm 6mm;
    border: 1px solid #dde9d2;
    border-radius: 3mm;
    background: #fbfdf9;
}
.pdf-stat-primary {
    background: #5a9416;
    border-color: #5a9416;
    color: #ffffff;
}
.pdf-stat-label {
    font-size: 8.5pt;
    font-weight: 600;
    color: #6a7a72;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 3mm;
    line-height: 1.3;
    min-height: 8mm;
}
.pdf-stat-primary .pdf-stat-label {
    color: #d2ebb4;
}
.pdf-stat-value {
    font-size: 22pt;
    font-weight: 700;
    line-height: 1;
    color: #1f3128;
    letter-spacing: -0.01em;
}
.pdf-stat-primary .pdf-stat-value {
    color: #ffffff;
}
.pdf-stat-unit {
    margin-top: 2mm;
    font-size: 9pt;
    color: #6a7a72;
}
.pdf-stat-primary .pdf-stat-unit {
    color: #d2ebb4;
}
/* Direction of travel, not a series colour: down is good for emissions. */
.pdf-stat-down { color: #3d8a30; }
.pdf-stat-up { color: #8a5400; }

/* ─── Figure / chart card ─── */
.pdf-figure {
    margin: 4mm 0 6mm;
    page-break-inside: avoid;
}
.pdf-figure-compact { margin: 4mm 0; }
.pdf-figure-title {
    margin: 0 0 4mm;
    font-size: 13pt;
    font-weight: 700;
    color: #1f3128;
}
.pdf-subhead {
    margin: 8mm 0 3mm;
    font-size: 12pt;
}

.pdf-chart-card {
    display: grid;
    grid-template-columns: 70mm 1fr;
    gap: 8mm;
    align-items: center;
    padding: 5mm 5mm 5mm 3mm;
    border: 1px solid #ecf3e6;
    border-radius: 3mm;
    background: #ffffff;
    page-break-inside: avoid;
}
.pdf-chart-image-col {
    display: flex;
    align-items: center;
    justify-content: center;
}
.pdf-fig-img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    /* Belt to the JS cap in report-pdf.js: never taller than the page body. */
    max-height: 205mm;
    object-fit: contain;
}
.pdf-figure-caption {
    margin: 3mm 0 0;
    font-size: 8.5pt;
    line-height: 1.45;
    color: #6a7a72;
}
.pdf-note {
    margin: 0 0 6mm;
    padding: 4mm;
    border-left: 2px solid #d2ebb4;
    background: #fbfdf9;
    font-size: 8.5pt;
    line-height: 1.6;
    color: #6a7a72;
}
.pdf-note strong { color: #3a4d42; }

/* ─── Contents ─── */
.pdf-toc {
    list-style: none;
    counter-reset: toc;
    margin: 4mm 0 0;
    padding: 0;
}
.pdf-toc li {
    counter-increment: toc;
    display: flex;
    align-items: baseline;
    gap: 3mm;
    padding: 3mm 0;
    border-bottom: 1px solid #f3f8ef;
    font-size: 11pt;
    color: #1f3128;
}
.pdf-toc li::before {
    content: counter(toc, decimal-leading-zero);
    font-size: 9pt;
    font-weight: 700;
    color: #5a9416;
    letter-spacing: 0.08em;
}
.pdf-toc-title { font-weight: 700; }
.pdf-toc-dots {
    flex: 1 1 auto;
    border-bottom: 1px dotted #c4d5b5;
    transform: translateY(-1mm);
}
.pdf-toc-page {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: #6a7a72;
}
.pdf-toc-note {
    margin: 8mm 0 0;
    font-size: 9.5pt;
    line-height: 1.6;
    color: #6a7a72;
    max-width: 150mm;
}

/* Repeated when a table runs onto another page. */
.pdf-continued {
    margin: 0 0 3mm;
    font-size: 9pt;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #94a39c;
}

/* ─── Coverage (assessment boundary) ─── */
.pdf-coverage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8mm;
    margin-bottom: 8mm;
}
.pdf-coverage-col h4 {
    margin: 0 0 3mm;
    font-size: 9pt;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #5a9416;
}
.pdf-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 9.5pt;
}
.pdf-list li {
    display: flex;
    justify-content: space-between;
    gap: 4mm;
    padding: 1.6mm 0;
    border-bottom: 1px solid #f3f8ef;
    color: #1f3128;
}
.pdf-list-value {
    font-variant-numeric: tabular-nums;
    color: #3a4d42;
    white-space: nowrap;
}
.pdf-list-muted li { color: #94a39c; }

.pdf-table-plain thead th {
    background: #f3f8ef;
    color: #3a4d42;
}
.pdf-table-plain tbody td { font-size: 9.5pt; }
.pdf-table-plain .pdf-row-sub td:first-child { padding-left: 3mm; color: #3a4d42; }

/* Legend table inside chart card */
.pdf-legend-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 9.5pt;
}
.pdf-legend-table thead th {
    text-align: left;
    font-size: 8pt;
    font-weight: 700;
    color: #94a39c;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0 0 2mm;
    border-bottom: 1px solid #ecf3e6;
}
.pdf-legend-table thead th:nth-child(3),
.pdf-legend-table thead th:nth-child(4) {
    text-align: right;
}
.pdf-legend-table tbody td {
    padding: 1.6mm 0;
    border-bottom: 1px solid #f3f8ef;
    vertical-align: middle;
}
.pdf-legend-table tbody tr:last-child td {
    border-bottom: none;
}
.pdf-legend-swatch-cell {
    width: 4mm;
    padding-right: 2mm !important;
}
.pdf-legend-swatch {
    display: inline-block;
    width: 3mm;
    height: 3mm;
    border-radius: 0.6mm;
    vertical-align: middle;
}
.pdf-legend-label {
    color: #1f3128;
    font-weight: 500;
}
.pdf-legend-value,
.pdf-legend-pct {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: #3a4d42;
    white-space: nowrap;
    padding-left: 4mm !important;
}
.pdf-legend-pct {
    color: #5a9416;
    font-weight: 600;
}

/* ─── Data table ─── */
.pdf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 9.5pt;
    margin-top: 2mm;
}
.pdf-table thead th {
    text-align: left;
    font-size: 8pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #ffffff;
    background: #1f3128;
    padding: 3mm 3mm;
    border-bottom: none;
}
.pdf-table thead th.pdf-table-num {
    text-align: right;
}
.pdf-table tbody td {
    padding: 2.2mm 3mm;
    border-bottom: 1px solid #ecf3e6;
    vertical-align: middle;
}
.pdf-table tbody tr {
    page-break-inside: avoid;
}
.pdf-table-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.pdf-row-total td {
    background: #1f3128;
    color: #ffffff;
    font-weight: 700;
    font-size: 10pt;
    border-bottom: 2px solid #5a9416;
}
.pdf-row-group td {
    background: #f3f8ef;
    color: #1f3128;
    font-weight: 700;
    border-bottom: 1px solid #d2ebb4;
}
.pdf-row-sub td {
    color: #3a4d42;
}
.pdf-row-sub td:first-child {
    padding-left: 8mm;
    color: #6a7a72;
}

/* ─── Scope key (Scopes page) ─── */
.pdf-scope-key {
    display: flex;
    flex-direction: column;
    gap: 3mm;
    margin-bottom: 6mm;
    padding: 5mm;
    background: #f3f8ef;
    border-left: 3px solid #5a9416;
    border-radius: 1.5mm;
    font-size: 9.5pt;
    color: #3a4d42;
}
.pdf-scope-key-item {
    display: flex;
    align-items: flex-start;
    gap: 3mm;
}
.pdf-scope-key-item strong {
    color: #1f3128;
}
.pdf-scope-key-dot {
    flex: 0 0 auto;
    width: 3.5mm;
    height: 3.5mm;
    border-radius: 50%;
    margin-top: 1mm;
}

/* ─── About this report (last page) ─── */
.pdf-about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6mm 8mm;
    margin-top: 2mm;
}
.pdf-about-block {
    padding: 5mm;
    border: 1px solid #ecf3e6;
    border-radius: 2mm;
    background: #fbfdf9;
}
.pdf-about-block h4 {
    margin: 0 0 2mm;
    font-size: 11pt;
    font-weight: 700;
    color: #5a9416;
}
.pdf-about-block p {
    margin: 0;
    font-size: 9.5pt;
    line-height: 1.5;
    color: #3a4d42;
}

/* ============================================================================
 * help-hint — inline "(?)" tooltip affordance
 * Reusable next to any label, heading, or chip. Hover or focus reveals the
 * bubble. See helpHint() in navigation-utils.js for the markup helper.
 * ========================================================================== */
.help-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    border-radius: 50%;
    background: var(--v4-surface-tint);
    border: 1px solid var(--v4-border-soft);
    color: var(--v4-text-muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    vertical-align: middle;
    user-select: none;
    outline: none;
    transition: background var(--v4-dur) var(--v4-ease),
                border-color var(--v4-dur) var(--v4-ease),
                color var(--v4-dur) var(--v4-ease),
                box-shadow var(--v4-dur) var(--v4-ease);
}
.help-hint:hover,
.help-hint:focus-visible,
.help-hint:focus-within {
    background: var(--v4-accent-tint);
    border-color: var(--v4-accent);
    color: var(--v4-accent-strong);
}
.help-hint:focus-visible {
    box-shadow: var(--v4-ring);
}
.help-hint-icon {
    pointer-events: none;
    font-family: inherit;
}
.help-hint-bubble {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    width: max-content;
    max-width: 280px;
    padding: 10px 12px;
    background: #1f3128;
    color: #fff;
    border-radius: var(--v4-radius-sm);
    font-size: 12.5px;
    line-height: 1.5;
    font-weight: 500;
    letter-spacing: 0.005em;
    text-transform: none;
    text-align: left;
    white-space: normal;
    box-shadow: var(--v4-shadow-high);
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 4px);
    transition: opacity var(--v4-dur) var(--v4-ease),
                transform var(--v4-dur) var(--v4-ease);
    z-index: 1000;
}
.help-hint-bubble::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1f3128;
}
.help-hint:hover .help-hint-bubble,
.help-hint:focus-visible .help-hint-bubble,
.help-hint:focus-within .help-hint-bubble {
    opacity: 1;
    transform: translate(-50%, 0);
}
.help-hint[data-align="bottom"] .help-hint-bubble {
    bottom: auto;
    top: calc(100% + 8px);
    transform: translate(-50%, -4px);
}
.help-hint[data-align="bottom"] .help-hint-bubble::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #1f3128;
}
.help-hint[data-align="bottom"]:hover .help-hint-bubble,
.help-hint[data-align="bottom"]:focus-visible .help-hint-bubble,
.help-hint[data-align="bottom"]:focus-within .help-hint-bubble {
    transform: translate(-50%, 0);
}
.help-hint[data-align="right"] .help-hint-bubble {
    bottom: auto;
    top: 50%;
    left: calc(100% + 10px);
    transform: translate(-4px, -50%);
}
.help-hint[data-align="right"] .help-hint-bubble::after {
    top: 50%;
    left: -12px;
    right: auto;
    bottom: auto;
    transform: translateY(-50%);
    border-color: transparent;
    border-right-color: #1f3128;
}
.help-hint[data-align="right"]:hover .help-hint-bubble,
.help-hint[data-align="right"]:focus-visible .help-hint-bubble,
.help-hint[data-align="right"]:focus-within .help-hint-bubble {
    transform: translate(0, -50%);
}
@media (max-width: 560px) {
    .help-hint-bubble {
        max-width: min(260px, calc(100vw - 32px));
    }
}

/* When JS positions the bubble in viewport coordinates (see
 * setupHelpHintPositioning in navigation-utils.js), the static CSS arrow no
 * longer points at the icon — hide it. The bubble is positioned close enough
 * to its (?) icon that the visual association is still clear. */
.help-hint-bubble--floating::after { display: none; }

/* ===========================================================================
 * Readability tuning — slightly larger text for older eyes
 *
 * Bumps lede body to 16px (WCAG min for body copy), descriptions/hints to
 * ~14px, and small uppercase labels from 11/11.5/12 to 12.5/13 — and drops
 * their letter-spacing from 1.1–1.2px to 0.6px. Heavy tracking on small
 * capitals fights legibility more than it helps. (?) icon + bubble grow too.
 * =========================================================================== */

.page-subtitle,
.detail-hero-lede,
.empty-hero-text,
.profile-lede {
    font-size: 16px;
}

.type-card-desc,
.footprint-category-desc { font-size: 14.5px; }
.profile-section-hint { font-size: 14px; }
.profile-summary-empty,
.option-hint { font-size: 13.5px; }

.page-eyebrow,
.profile-eyebrow,
.detail-hero-eyebrow,
.profile-section-label,
.unit-group-title {
    font-size: 13px;
    letter-spacing: 0.6px;
}
.profile-summary-label,
.profile-summary-key {
    font-size: 12.5px;
    letter-spacing: 0.6px;
}

.block-meta,
.block-hint,
.unit-group-count,
.category-group-meter,
.type-card-count {
    font-size: 12.5px;
}
.profile-summary-chip { font-size: 13px; }

.help-hint-bubble {
    font-size: 14px;
    line-height: 1.55;
}
.help-hint {
    width: 18px;
    height: 18px;
    font-size: 12.5px;
}