.account_report {
    .fit-content { width: fit-content }

    //------------------------------------------------------------------------------------------------------------------
    // Control panel
    //------------------------------------------------------------------------------------------------------------------
    .o_control_panel_main_buttons {
        .dropdown-item {
            padding: 0;
            .btn-link {
                width: 100%;
                text-align: left;
                padding: 3px 20px;
                border-radius: 0;
            }
        }
    }

    //------------------------------------------------------------------------------------------------------------------
    // Sections
    //------------------------------------------------------------------------------------------------------------------
    .section_selector {
        display: flex;
        gap: 4px;
        margin: 16px 16px 8px 16px;
        justify-content: center;
    }

    //------------------------------------------------------------------------------------------------------------------
    // Alert
    //------------------------------------------------------------------------------------------------------------------
    .warnings { margin-bottom: 1rem }
    .alert {
        margin-bottom: 0;
        border-radius: 0;

        a:hover { cursor:pointer }
    }

    //------------------------------------------------------------------------------------------------------------------
    // No content
    //------------------------------------------------------------------------------------------------------------------
    .o_view_nocontent { z-index: -1 }

    //------------------------------------------------------------------------------------------------------------------
    // Table
    //------------------------------------------------------------------------------------------------------------------
    .table {
        background-color: $o-view-background-color;
        border-collapse: separate; //!\\ Allows to add padding to the table
        border-spacing: 0; //!\\ Removes default spacing between cells due to 'border-collapse: separate'
        font-size: 0.8rem;
        margin: 0 auto 24px;
        padding: 24px;
        width: auto;
        min-width: 800px;
        border: 1px solid $o-gray-300;
        border-radius: 0.25rem;

        > :not(caption) > * > * { padding: 0.25rem 0.75rem } //!\\ Override of bootstrap, keep selector

        > thead {
            > tr {
                th:first-child {
                    color: lightgrey;
                }
                th:not(:first-child) {
                    text-align: center;
                    vertical-align: middle;
                }
            }
            > tr:not(:last-child) > th:not(:first-child) { border: 1px solid $o-gray-300 }
        }

        > tbody {
            > tr {
                &.unfolded { font-weight: bold }
                > td {
                    a { cursor: pointer }
                    .clickable { color: $o-action }
                    &.muted { color: var(--AccountReport-muted-data-color, $o-gray-300) }
                    &:empty::after{ content: "\00a0" } //!\\ Prevents the collapse of empty table rows
                    &:empty { line-height: 1 }
                    .btn_annotation { color: $o-action }
                }

                &:not(.empty) > td { border-bottom: 1px solid var(--AccountReport-fine-line-separator-color, $o-gray-200) }
                &.total { font-weight: bold }
                &.o_bold_tr { font-weight: bold }

                &.unfolded {
                    > td { border-bottom: 1px solid $o-gray-300 }
                    .btn_action { opacity: 1 }
                    .btn_more { opacity: 1 }
                }

                &:hover {
                    &.empty > * { --table-accent-bg: transparent }
                    .auditable {
                        color: $o-action !important;

                        > a:hover { cursor: pointer }
                    }
                    .muted { color: $o-gray-800 }
                    .btn_action, .btn_more {
                        opacity: 1;
                        color: $o-action;
                    }
                    .btn_edit { color: $o-action }
                    .btn_dropdown { color: $o-action }
                    .btn_foldable { color: $o-action }
                    .btn_ellipsis { color: $o-action }
                    .btn_annotation_go { color: $o-action }
                    .btn_debug { color: $o-action }
                }
            }
        }
    }

    table.striped {
        //!\\ Changes the background of every even column starting with the 3rd one
        > thead > tr:not(:first-child) > th:nth-child(2n+3) { background: $o-gray-100 }
        > tbody {
            > tr:not(.line_level_0):not(.empty) > td:nth-child(2n+3) { background: $o-gray-100 }
            > tr.line_level_0 > td:nth-child(2n+3) { background: $o-gray-300 }
        }
    }

    thead.sticky {
        background-color: $o-view-background-color;
        position: sticky;
        top: 0;
        z-index: 999;
    }

    //------------------------------------------------------------------------------------------------------------------
    // Line
    //------------------------------------------------------------------------------------------------------------------
    .line_name {
        > .wrapper {
            display: flex;

            > .content {
                display: flex;
                sup { top: auto }
            }
        }

        .name { white-space: nowrap }
        &.unfoldable:hover { cursor: pointer }
    }

    .line_cell {
        > .wrapper {
            display: flex;
            align-items: center;

            > .content { display: flex }
        }

        &.date > .wrapper { justify-content: center }
        &.numeric > .wrapper { justify-content: flex-end }
        .name { white-space: nowrap }
    }

    .editable-cell {
        input {
            color: $o-action;
            border: none;
            max-width: 100px;
            float: right;

            &:hover {
                cursor: pointer;
            }
        }

        &:hover {
            cursor: pointer;
        }

        &:focus-within {
            border-bottom-color: $o-action !important;

            input {
                color: $o-black;
            }
        }
    }

    .line_level_0 {
        color: $o-gray-700;
        font-weight: bold;

        > td {
            border-bottom: 0 !important;
            background-color: $o-gray-300;
        }
        .muted { color: $o-gray-400 !important }
        .btn_debug { color: $o-gray-400 }
    }

    @for $i from 2 through 16 {
        .line_level_#{$i} {
            $indentation: (($i + 1) * 8px) - 20px; // 20px are for the btn_foldable width

            > td {
                color: $o-gray-700;

                &.line_name.unfoldable .wrapper { column-gap: calc(#{ $indentation }) }
                &.line_name:not(.unfoldable) .wrapper { padding-left: $indentation }
            }
        }
    }

    //------------------------------------------------------------------------------------------------------------------
    // Link
    //------------------------------------------------------------------------------------------------------------------
    .link { color: $o-action }

    //------------------------------------------------------------------------------------------------------------------
    // buttons
    //------------------------------------------------------------------------------------------------------------------
    .btn_debug, .btn_dropdown, .btn_foldable, .btn_foldable_empty, .btn_sortable, .btn_ellipsis,
    .btn_more, .btn_annotation, .btn_annotation_go, .btn_annotation_delete, .btn_action, .btn_edit {
        border: none;
        color: $o-gray-300;
        font-size: inherit;
        font-weight: normal;
        padding: 0;
        text-align: center;
        width: 20px;
        white-space: nowrap;

        &:hover {
            color: $o-action !important;
            cursor: pointer;
        }
    }

    .btn_sortable > .fa-long-arrow-up, .btn_sortable > .fa-long-arrow-down { color: $o-action }
    .btn_foldable { color: $o-gray-500 }
    .btn_foldable_empty:hover { cursor: default  }
    .btn_ellipsis > i { vertical-align: bottom }
    .btn_more { opacity: 1 }
    .btn_annotation { margin-left: 6px }
    .btn_annotation_go { color: $o-gray-600 }
    .btn_annotation_delete {
        margin-left: 4px;
        vertical-align: baseline;
    }
    .btn_action {
        opacity: 0;
        background-color: $o-view-background-color;
        color: $o-gray-600;
        width: auto;
        padding: 0 0.25rem;
        margin: 0 0.25rem;
        border: 1px solid $o-gray-300;
        border-radius: 0.25rem;
    }

    //------------------------------------------------------------------------------------------------------------------
    // Dropdown
    //------------------------------------------------------------------------------------------------------------------
    .dropdown { display: inline }

    //------------------------------------------------------------------------------------------------------------------
    // Annotation
    //------------------------------------------------------------------------------------------------------------------
    .annotations {
        border-top: 1px solid $o-gray-300;
        font-size: 0.8rem;
        padding: 24px 0;

        > li {
            line-height: 24px;
            margin-left: 24px;
            &:hover > button { color: $o-action }
        }
    }
}

//----------------------------------------------------------------------------------------------------------------------
// Dialogs
//----------------------------------------------------------------------------------------------------------------------
.account_report_annotation_dialog {
    textarea {
        border: 1px solid $o-gray-300;
        border-radius: 0.25rem;
        height: 120px;
        padding: .5rem;
    }
}

//----------------------------------------------------------------------------------------------------------------------
// Popovers
//----------------------------------------------------------------------------------------------------------------------
.account_report_popover_edit {
    padding: .5rem 1rem;
    box-sizing: content-box;

    .edit_popover_boolean label { padding: 0 12px 0 4px }

    .edit_popover_string {
        width: 260px;
        padding: 8px;
        border-color: $o-gray-200;
    }

    .btn {
        color: $o-white;
        background-color: $o-action;
    }
}

.account_report_popover_ellipsis {
    > p {
        float: left;
        margin: 1rem;
        width: 360px;
    }
}

.account_report_btn_clone {
    margin: 1rem 1rem 0 0;
    border: none;
    color: $o-gray-300;
    font-size: inherit;
    font-weight: normal;
    padding: 0;
    text-align: center;
    width: 20px;

    &:hover {
        color: $o-action !important;
        cursor: pointer;
    }
}

.account_report_popover_debug {
    width: 350px;
    overflow-x: auto;

    > .line_debug {
        display: flex;
        flex-direction: row;
        padding: .25rem 1rem;

        &:first-child { padding-top: 1rem }
        &:last-child { padding-bottom: 1rem }

        > span:first-child {
            color: $o-gray-600;
            max-width: 25%; //!\\ Not the same as 'width' because of 'display: flex'
            min-width: 25%; //!\\ Not the same as 'width' because of 'display: flex'
            white-space: nowrap;
            margin-right: 10px;
        }
        > span:last-child {
            color: $o-gray-800;
            max-width: 75%; //!\\ Not the same as 'width' because of 'display: flex'
            min-width: 75%; //!\\ Not the same as 'width' because of 'display: flex'
        }

        > code { color: $primary }
    }

    > .totals_separator { margin: .25rem 1rem }
    > .engine_separator { margin: 1rem }
}

.carryover_popover {
    margin: 12px;
    width: 300px;
}

.o_web_client:has(.annotation_popover) {

    .popover:has(.annotation_tooltip) { visibility: hidden; }

    .popover:has(.annotation_popover) {
        max-height: 45%;
        max-width: 60%;
        white-space: pre-wrap;
        overflow-y: auto;

        .annotation_popover {
            overflow: scroll;

            .annotation_popover_line th{
                background-color: $o-white;
                position: sticky;
                top: 0;
                z-index: 10;
            }

        }

        .annotation_popover_line:nth-child(2n+2) { background: $o-gray-200; }

        .annotation_popover_line {
            .o_datetime_input {
                border: none;
            }
        }

        tr, th, td:not(:has(.btn_annotation_update)):not(:has(.btn_annotation_delete)) {
            padding: .5rem 1rem .5rem .5rem;
            vertical-align: top;
        }

        .annotation_popover_editable_cell {
            background-color: transparent;
            border: 0;
            box-shadow: none;
            color: $o-gray-700;
            resize: none;
            width: 85px;
            outline: none;
        }
    }
}

label:focus-within input { border: 0; }

.popover:has(.annotation_tooltip) {

    > .tooltip-inner {
        padding: 0;
        color: $o-white;
        background-color: $o-white;

        > .annotation_tooltip {
            color: $o-gray-700;
            background-color: $o-white;
            white-space: pre-wrap;

            > .annotation_tooltip_line:nth-child(2n+2) { background: $o-gray-200; }

            tr, th, td {
                padding: .25rem .5rem .25rem .25rem;
                overflow: hidden;
                text-overflow: ellipsis;
                vertical-align: top;
            }
        }

        + .popover-arrow {
            &.top-0::after { border-right-color: $o-white; }
            &.bottom-0::after { border-left-color: $o-white; }
            &.start-0::after { border-bottom-color: $o-white; }
            &.end-0::after { border-top-color: $o-white; }
        }
    }
}
