:root {
    --primary-color: #7e1d2d;
    --primary-light: #de6f81;
    --primary-dark: #55131e;

    --secondary-color: #777074;
    --secondary-light: #857d81;
    --secondary-dark: #686265;

    --highlight-color: #fbe4e9;
    --accent-color: #fff;

    --bg-main: #eee;
    --bg-secondary: #fff;

    --color: var(--primary-color);
    --border: var(--secondary-color);
    --text: var(--accent-color);

    --state-color: var(--accent-color);
    --state-border: var(--primary-color);
    --state-text: var(--primary-color);
}

html, body {
    overflow: hidden;
    background: var(--bg-main);
}

.layout-wrapper {
    display: flex;
    flex-direction: column;
    height: 99vh;
}

body {
    .ui-state-hover, .ui-state-focus {
        background: var(--state-color) !important;
        border-color: var(--state-border) !important;
        color: var(--state-text) !important;
        box-shadow: none !important;

        .ui-icon {
            color: var(--state-text) !important;
        }
    }

    .ui-selectonemenu-panel {
        .ui-selectonemenu-items {
            .ui-selectonemenu-item {
                &.ui-state-highlight,
                &.ui-state-hover {
                    background: var(--highlight-color) !important;
                }
            }
        }
    }

    .ui-datepicker {
        .ui-datepicker-next:focus, .ui-datepicker-prev:focus {
            box-shadow: 0 0 0 .2em var(--highlight-color);
        }

        :hover {
            border-color: var(--color);
        }

        .ui-datepicker-calendar {
            td>a {
                &:hover {
                    background: var(--color);
                    color: var(--text);
                    box-shadow: 0 0 0 .2em var(--color);
                }

                &.ui-state-active {
                    background: var(--color);
                    color: var(--text);
                }

                &:focus {
                    box-shadow: 0 0 0 .2em var(--highlight-color);
                }
            }
        }
    }
}

body select:hover, body input:not([role=combobox],[type=file],.ui-widget,.ui-inputfield):hover
{
    border-color: #751b2e;
}

body select:focus, body input:not([role=combobox],[type=file],.ui-widget,.ui-inputfield):focus
{
    border-color: #751b2e;
    box-shadow: 0 0 0 .2em #d9a9b2;
}

input {
    field-sizing: content;
    width: auto;
    --state-text: var(--text-color);

    &[type="search"]::-webkit-search-cancel-button {
        display: none !important;
    }
}

.ui-toolbar {
    margin: 0.25rem 0;
    background: var(--bg-secondary) !important;
    height: 3.5rem;
    align-content: center;
    flex-wrap: nowrap;

    * {
        flex-wrap: nowrap;
    }
}

.ui-toolbar-group-center {
    flex: 1;
    display: flex;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
}

.ui-messages-error-detail {
    white-space: pre-wrap;
}

.ui-tooltip {
    .ui-tooltip-arrow {
        border-color: var(--primary-dark) transparent !important;
    }

    .ui-tooltip-text {
        background: var(--primary-dark) !important;
    }
}

.ui-confirm-popup {
    border: 1px solid var(--primary-color) !important;

    &:before {
        border-bottom-color: var(--primary-color) !important;
    }

    b {
        color: var(--primary-color);
    }
}

.ui-growl {
    top: 4.5rem !important;
    width: auto !important;
    margin-right: 0.5rem;

    .ui-growl-item-container {
        opacity: 1 !important;
    }

    .ui-growl-message {
        white-space: nowrap !important;
        width: auto !important;
        padding-left: 1rem !important;
        float: left;
    }

    .ui-growl-info {
        background-color: var(--green-200) !important;
        border-color: var(--green-700) !important;
        color: var(--green-900) !important;

        .ui-growl-image-info {
            color: var(--green-900) !important;
        }
    }
}

#copy-panel {
    border: 1px solid var(--primary-color);

    * {
        text-align: center;
    }


    .copy-list {
        padding: 0.25rem !important;


        .ui-button {
            width: stretch !important;
        }
    }
}


#formulaDialog {
    border: 1px solid var(--primary-color);

    .ui-dialog-content {
        .CodeMirror {
            flex: 1;
            padding-right: 1rem;
            align-self: stretch;
        }

        #formulaContent {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: stretch;
            align-items: baseline;
            gap: 1rem;
        }
    }
}

.ui-scrolltop {
    background: var(--color) !important;
    border: var(--border) !important;
    color: var(--text) !important;
    margin: 0.5rem !important;
}

.ui-overlaypanel-close {
    background: none !important;
    border: none !important;
    color: var(--secondary-color) !important;
    margin: 1rem;
}

.ui-button {
    background: var(--color) !important;
    border: var(--border) !important;
    color: var(--text) !important;
    margin: 0.25rem !important;

    &:not(.flat-styled),
    &.menu-button.flat-styled {
        --state-color: var(--primary-dark);
        --state-border: var(--primary-dark);
        --state-text: var(--text);
    }

    &.flat-styled {
        --color: none;
        --border: none;
        --text: var(--secondary-color);
        --state-color: none;
    }

    &.ui-button-text-only > .ui-button-text {
        padding: 0 !important;
    }

    &.ui-button-icon-only {
        padding: 0 !important;
        width: auto !important;
        height: auto !important;
        min-width: 1.5rem;
        min-height: 1.5rem;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;

        .ui-button-text {
            display: none !important;
        }

        .ui-icon {
            position: static !important;
            margin: 0 !important;
        }
    }

    &.menu-button {
        margin: 0 0 0 -1rem !important;
        --color: var(--primary-color);
        --text: var(--accent-color);
        padding: 1rem !important;
        border-radius: 4px 0 0 4px;
    }

    &.large {
        .ui-icon {
            font-size: 1.4rem;
            min-width: 2.5rem;
        }
    }
}

.ui-sidebar {
    background: var(--bg-main) !important;
    width: fit-content !important;
    min-width: 30rem !important;
    max-width: 50vw !important;
}

.tarifMenu-header {
    color: var(--primary-color);
    background: var(--bg-secondary) !important;
    padding: 1rem 0 0;
    font-weight: bold;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ui-accordion {
    .ui-accordion-header {
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        border: none !important;
    }

    .ui-accordion-content {
        border: none !important;
    }
}

.ui-datatable {
    table {
        table-layout: auto;

        th {
            background: #f7f7f7 !important;

            .ui-button {
                --text: var(--text-color) !important;
            }
        }

        width: 100% !important;
    }

    .ui-datatable-tablewrapper {
        td, th {
            padding: 0.75rem !important;
        }

        th {
            font-size: 0.95rem;

            .ui-button {
                font-size: 0.95rem;
            }
        }
    }

    &.left-label {
        td, th {
            &:first-child {
                width: 1vw !important;
                white-space: nowrap !important;
            }
        }
    }

    .index {
        padding: 0 !important;
        text-align: center !important;
    }

    .ui-datatable-data {
        .col {
            display: flex;
            align-items: center;
            justify-content: space-between;

            div {
                font-size: 1.1rem !important;
                text-align: left;
            }

            &:focus, &:hover {
                color: var(--primary-color);
            }
        }

        * {
            border-width: 1px !important;
            text-align: end;
            font-size: 0.95rem;
        }
    }

    .ui-filter-column {
        padding-top: 0 !important;
        background: var(--bg-secondary) !important;
    }
}

.ui-table {
    margin-top: 1rem;
    white-space: nowrap;

    &.ui-fieldset {
        .ui-fieldset-legend {
            background: var(--bg-secondary);
        }

        &:has(> .ui-fieldset-content[style*="display: none"]) {
            border: none;
            background: none;
        }
    }

    .ui-datatable td,
    .ui-datatable th {
        padding: 0.75rem 1rem;
        white-space: nowrap;
        width: auto;
    }
}

.table-container {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: none !important;
    border: none !important;
}

.titlebar {
    text-align: center;
    background: var(--bg-secondary) !important;
    border-color: transparent !important;
    font-size: 1.1rem !important;
    text-overflow: ellipsis !important;
    margin: 0.25rem !important;
    max-width: 100% !important;
}

.ui-autocomplete-panel {
    width: auto !important;
}

.ui-cell-editor-input {
    border: 1px solid var(--state-border) !important;
    border-radius: 4px;

    * {
        border: none !important;
    }

    .cell-edit {

        display: flex !important;
        justify-content: flex-end;

        .ui-button {
            margin: 0 !important;
            border-radius: 0 2px 2px 0;
        }
    }
}