/* -------------------------------- GLOBAL -------------------------------- */

.typography__title {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 24px;
}

.typography__paragraph {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 16px;
}

/* -------------------------------- LOGIN --------------------------------- */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, sans-serif;
    min-width: 720px;
}

.login-form__container {
    min-height: 100vh;
    background-image: url(https://adplorer-gmbh-and-co-kg.odoo.com/web_enterprise/static/img/background-light.svg);
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-form {
    width: 320px;
    padding: 32px;
    border-radius: 8px;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, .2);
    background-color: white;
}

.login-form__form {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.login-form__label {
    font-weight: 500;
}

.login-form__input {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.login-form__error {
    color: #c00;
}

.login-form__button {
    padding: 10px 16px;
    margin-top: 24px;
    background: #714B67;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.login-form__button:hover {
    background: #604058;
}

/* -------------------------------- REPORT -------------------------------- */

.report {
    min-height: 100vh;
    max-height: inherit;
    padding-bottom: 16px;
}

.report__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 64px;
    width: 100%;
    padding: 0 32px;
    border-bottom: 1px solid #3C3E4B;
    margin-bottom: 32px;
    background-color: #272A35;
}

.report__user-info {
    color: #E4E4E4;
}

.report__logout {
    color: #B2B2B2;
    transition: .1s;
}

.report__logout:hover {
    opacity: .6;
}

.report__body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.report__main {
    position: relative;
    width: 688px;
    margin: 0 32px 32px 32px;
    background-color: #272A35;
    border: 1px solid #3C3E4B;
    border-radius: 4px;
    overflow: hidden;
    color: #B1B3BC;
}

.report__main .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border-bottom: 1px solid #3C3E4B;
    min-height: 40px;
}

.report__main .row.header {
    background: #3C3E4B;
    font-weight: 500;
}

.report__main .row .label {
    display: flex;
    align-items: center;
    gap: 4px;
}

.report__main .row .value {
    display: flex;
    align-items: center;
}

.report__main .row .value .amount {
    font-variant-numeric: tabular-nums;
}

.report__main .toggle {
    cursor: pointer;
    padding: 4px;
    color: #9CA3AF;
    font-size: 12px;
}

.report__main .sub-row {
    padding-left: 34px;
}

.report__main .sub-section {
    display: none;
}

.report__main .sub-section.open {
    display: block;
}

.report__main .section-content.collapsed {
    display: none;
}

/* --------------------------- SCOPE LEVELS ---------------------------- */
/* Visual distinction and increasing indentation for nested rows */
.report__main .row.scope-2 {
    padding-left: 12px;
}
.report__main .row.scope-2 .label {
    color: #E6E7EA;
}

.report__main .row.scope-3 {
    padding-left: 34px;
}
.report__main .row.scope-3 .label {
    color: #C8CBD1;
}

.report__main .row.scope-4 {
    padding-left: 56px;
}
.report__main .row.scope-4 .label {
    color: #AEB3B8;
}

/* ensure sub-row default remains reasonable when scope classes present */
.report__main .sub-row.scope-3,
.report__main .sub-row.scope-4 {
    border-left: none;
}
/* ----------------------------- DATE FILTER ------------------------------ */

.date-filter {
    position: relative;
    width: 688px;
    margin: 0 32px 32px 32px;
}

.date-filter__pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background-color: #272A35;
    border: 1px solid #3C3E4B;
    border-radius: 4px;
    cursor: pointer;
    color: #E4E4E4;
    font-weight: 500;
    transition: background-color 0.2s;
}

.date-filter__pill:hover {
    background-color: #2E3139;
}

.date-filter__icon {
    width: 16px;
    height: 16px;
    color: #B2B2B2;
}

.date-filter__modal {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    background-color: #272A35;
    border: 1px solid #3C3E4B;
    border-radius: 4px;
    padding: 16px;
    z-index: 1000;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    min-width: 350px;
}

.date-filter__options {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.date-filter__option {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.date-filter__label {
    color: #E4E4E4;
    font-weight: 500;
    font-size: 14px;
}

.date-filter__month-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.date-filter__nav-btn {
    background-color: #3C3E4B;
    border: 1px solid #4A4D57;
    color: #B2B2B2;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    transition: background-color 0.2s;
    padding: 0;
}

.date-filter__nav-btn:hover {
    background-color: #4A4D57;
}

.date-filter__month-display {
    color: #E4E4E4;
    font-weight: 500;
    text-align: center;
    flex: 1;
    min-width: 120px;
}

.date-filter__quarter-display,
.date-filter__year-display {
    color: #E4E4E4;
    font-weight: 500;
    text-align: center;
    flex: 1;
    min-width: 140px;
}

/* quarter/year grid/button styles removed (using nav controls instead) */

.date-filter__custom-dates {
    display: flex;
    align-items: center;
    gap: 8px;
}

.date-filter__input {
    flex: 1;
    padding: 8px;
    background-color: #3C3E4B;
    border: 1px solid #4A4D57;
    border-radius: 4px;
    color: #E4E4E4;
    font-size: 14px;
}

.date-filter__input:focus {
    outline: none;
    border-color: #714B67;
    background-color: #404651;
}

.date-filter__separator {
    color: #B2B2B2;
    font-size: 14px;
}

/* ----------------------------- COMPARISON FILTER ----------------------------- */

.comparison-filter {
    position: relative;
    width: 688px;
    margin: 0 32px 32px 32px;
}

.comparison-filter__pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background-color: #272A35;
    border: 1px solid #3C3E4B;
    border-radius: 4px;
    cursor: pointer;
    color: #E4E4E4;
    font-weight: 500;
    transition: background-color 0.2s;
}

.comparison-filter__pill:hover {
    background-color: #2E3139;
}

.comparison-filter__icon {
    width: 16px;
    height: 16px;
    color: #B2B2B2;
}

.comparison-filter__modal {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    background-color: #272A35;
    border: 1px solid #3C3E4B;
    border-radius: 4px;
    padding: 16px;
    z-index: 1000;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    min-width: 350px;
}

.comparison-filter__options {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.comparison-filter__option {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.comparison-filter__label {
    color: #E4E4E4;
    font-weight: 500;
    font-size: 14px;
}

.comparison-filter__buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.comparison-filter__btn {
    padding: 10px;
    background-color: #3C3E4B;
    border: 1px solid #4A4D57;
    border-radius: 4px;
    color: #B2B2B2;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
    font-weight: 500;
}

.comparison-filter__btn:hover {
    background-color: #4A4D57;
}

.comparison-filter__btn.selected {
    background-color: #714B67;
    color: #E4E4E4;
    border-color: #714B67;
}

.comparison-filter__custom-dates {
    display: flex;
    align-items: center;
    gap: 8px;
}

.comparison-filter__input {
    flex: 1;
    padding: 8px;
    background-color: #3C3E4B;
    border: 1px solid #4A4D57;
    border-radius: 4px;
    color: #E4E4E4;
    font-size: 14px;
}

.comparison-filter__input:focus {
    outline: none;
    border-color: #714B67;
    background-color: #404651;
}

.comparison-filter__separator {
    color: #B2B2B2;
    font-size: 14px;
}

/* -------------------------------- VALUE COLUMNS (3-COLUMN COMPARISON) - */

.value-columns {
    display: flex;
    align-items: center;
    gap: 12px;
}

.value-main {
    flex: 0 0 auto;
    min-width: 100px;
    text-align: right;
}

.value-comp {
    flex: 0 0 auto;
    min-width: 100px;
    text-align: right;
    color: #9CA3AF;
}

.value-sep {
    color: #4A4D57;
    font-size: 12px;
}

.value-change {
    flex: 0 0 auto;
    min-width: 90px;
    text-align: right;
    font-weight: 500;
}

.value-change.positive {
    color: #10B981;
}

.value-change.negative {
    color: #EF4444;
}

.value-change:not(.positive):not(.negative) {
    color: #9CA3AF;
}