:root {
    --poy-bulma-box-shadow: rgba(0, 0, 0, 0.1);
    --poy-bulma-added-background: rgb(231 243 231);
    --poy-bulma-removed-background: rgb(219, 209, 209);
    --poy-bulma-highlight-background: rgba(128, 0, 128, 0.2);
    --poy-bulma-highlight-border: rgba(128, 0, 128, 0.5);
    --bulma-control-padding-vertical:0.3em;
    --bulma-control-padding-horizontal:0.5em;
    --bulma-control-height: 2.2em;
}


@media (prefers-media-schema:dark) {
    :root {
        --poy-bulma-box-shadow: rgba(255, 255, 255, 0.1);
    }
}

.footer {
    --bulma-footer-padding: 1.5rem 1.5rem 2rem;
}

footer.footer {
    margin-top: 2rem;
}

html.app .main-content {
    margin: 0.3rem 0.6rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* gap: 10px; */

    /* padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1rem;
    padding-right: 1rem; */
    >div {

        &.table-full-height-container {
            margin-right: 0;
        }
    }

    overflow: hidden;
}


.is-main-page-menu-container {
    padding-left: 1rem;
    padding-right: 1rem;
}

@media screen and (min-width: 769px) {

    html.app,
    html.app body {
        overflow: hidden;
        height: 100dvh;
    }

    .is-scrollable-content {
        overflow-y: auto;
        overflow-x: auto;
        height: 100%;
        /* margin-top:12px;
        margin-right: 12px; */
    }

}

.is-fullheight {
    height: 100%;
    overflow: hidden;
}

.bottom-buttons.fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--bulma-body-background-color);
    /* Optional: to ensure the buttons are visible */
    padding: 1rem;
    box-shadow: 0 -2px 5px var(--poy-bulma-box-shadow);
    /* Optional: to add a shadow effect */
    z-index: 1000;
    /* Ensure it is above other content */
    transition: transform 0.3s ease-in-out;
}



.menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

table.report {
    border-collapse: separate;

    tr.level-0 {
        th:first-child {
            text-transform: uppercase;
        }

        th,
        td {
            font-size: 1em;
        }

        th {
            font-weight: 700;
        }

        &.is-total {
            th {
                border-top: solid 1px var(--bulma-text);
            }
        }

        &.is-summary {
            height: 4em;

            th {
                vertical-align: middle;
                border-top: solid 2px var(--bulma-text);
            }
        }
    }

    tr.level-1 {

        th,
        td {
            font-size: 0.95em;
        }

        td:first-child,
        th:first-child {
            padding-left: 1em;
        }

        th {
            font-weight: 600;
        }

        &.is-total {
            th {
                border-top: solid 1px var(--bulma-text);
            }
        }
    }

    tr.level-2 {

        th,
        td {
            font-size: 0.9em;
        }

        td:first-child,
        th:first-child {
            padding-left: 2em;
        }

        th {
            font-weight: 500;
        }

        &.is-total {
            th {
                border-top: solid 1px var(--bulma-text);
            }
        }

    }

    tr.level-3 {

        th,
        td {
            font-size: 0.85em;
        }

        td:first-child,
        th:first-child {
            padding-left: 3em;
        }

        th {
            font-weight: 400;
        }

        &.is-total {
            th {
                border-top: solid 0.9px var(--bulma-text);
            }
        }

    }

    tr.level-4 {

        th,
        td {
            font-size: 0.8em;
        }

        td:first-child,
        th:first-child {
            padding-left: 4em;
        }

        th {
            font-weight: 300;
        }
    }

    tr.level-5 {

        th,
        td {
            font-size: 0.75em;
        }

        td:first-child,
        th:first-child {
            padding-left: 5em;
        }

        th {
            font-weight: 300;
        }
    }

    tr.added {
        background-color: var(--poy-bulma-added-background);
    }

    tr.removed {
        background-color: var(--poy-bulma-removed-background);
    }

    tr.entry-row.removed {
        text-decoration: line-through;
    }

    tr.adjustment-row {
        td {
            padding-top: 0;
            border-top: solid 2px var(--bulma-text);
            font-size: smaller;
            font-weight: bold;
        }
    }
}

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

.upload {
    border: 2px dashed var(--bulma-border);
    color: var(--bulma-text);
    padding: 20px;
    text-align: center;
}

.upload.sie {
    height: 200px;
    width: 90dvh;
}

.upload.active {
    border-color: var(--bulma-primary);
}

.upload.disabled {
    border-color: var(--bulma-border);
    color: var(--bulma-text);
    background-color: var(--bulma-background);
}

.attachment-card {

    min-height: 100px;
    position: relative;

    .hoover-button-group {
        position: absolute;
        top: 10px;
        right: 8px;
        z-index: 1000;
    }

}

.attachment-thumbnail-placeholder {
    overflow: hidden;

    .disabled {
        filter: grayscale(100%);
        opacity: 0.5;
    }

    img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    .secure-image-component {
        width: 100%;

        .pdf-thumb {
            width: 100%;
            position: relative;
            padding-top: 141.4%;

            .pdf-thumb-content {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;

                embed {
                    width: 100%;
                    height: 100%;
                }
            }

        }

        iframe,
        object {
            width: 100%;
            height: 50dvh;
        }

    }
}

table.register-drafts-table {
    tbody {

        tr.success {
            background-color: var(--bulma-success-90);

            td,
            th {
                color: var(--bulma-success-90-invert);
            }
        }

        tr.success:hover {
            background-color: var(--bulma-success-80);
        }

        tr.danger {
            background-color: var(--bulma-danger-90);

            td,
            th {

                color: var(--bulma-danger-90-invert);
            }
        }

        tr.danger:hover {
            background-color: var(--bulma-danger-80);
        }
    }
}

.has-text-nowrap {
    white-space: nowrap;
}



.breadcrumb.toolbar {
    margin: 0;
    /* justify-content: center; */
}

.buttons.toolbar {
    margin: 0;
    /* justify-content: center; */

    .button {
        border-radius: 4px;
        transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
    }

    .button:hover {
        transform: scale(1.1);
    }
}


.order-summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.summary-component {
    div:first-child {
        font-weight: bold;
        white-space: nowrap;
    }

    div:nth-child(2) {
        text-align: right;
    }
}

label.radio {
    padding-right: 0.5rem;

    input {
        margin-right: 0.5rem;
    }
}

/* .loader {
    width: 48px;
    height: 48px;
    border: 5px solid var(--bulma-body-background-color);
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
} */

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.poy-progress {
    width: 100%;
    height: 13px;
    position: relative;
    background-color: var(--bulma-border-weak);
    /* border-radius: 2rem; */
    overflow: hidden;

    &.inactive {
        background-color: transparent;
    }

    .poy-progress-text {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--bulma-text);
        font-size: 0.7rem;
    }

    .poy-progress-bar {
        height: 100%;
        background-color: var(--bulma-info);

        &.indeterminate {
            animation-duration: 1.5s;
            animation-iteration-count: infinite;
            animation-name: moveIndeterminate;
            animation-timing-function: linear;
            background-color: hsl(221, 14%, 93%);
            background-image: linear-gradient(to right, hsla(198deg, 100%, 70%, 1) 30%, hsl(221, 14%, 93%) 30%);
            background-position: 0 0;
            background-repeat: no-repeat;
            background-size: 150% 150%;
        }
    }
}

@keyframes moveIndeterminate {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

th.content-date {
    min-width: 7.1em;
}

th.content-currency {
    min-width: 7em;
}

table.is-nowrap {

    th,
    td {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 20vw;
    }
}

.table-full-height-container {
    overflow-y: auto;

    flex: 1;


    table {
        border-collapse: separate;
        border-spacing: 0;

        th {
            border-top-width: 1px;
            border-bottom-width: 1px;
            border-right-width: 1px;
        }

        td {
            border-bottom-width: 1px;
            border-right-width: 1px;
        }

        th:first-child,
        td:first-child {
            border-left-width: 1px;
        }

        thead {
            position: sticky;
            top: 0;
            z-index: 1;
            background-color: var(--bulma-body-background-color);

            th,
            td {
                background-color: var(--bulma-body-background-color);
            }
        }
    }
}

.table-full-height-footer {
    flex-shrink: 0;
}

.date-range-picker {
    position: relative;
    line-height: 1.7em;
}

.date-range-picker-popup {
    position: absolute;
    z-index: 1000;
    background-color: var(--bulma-body-background-color);
    border: 1px solid var(--bulma-border);
    padding: 0.5rem;
    box-shadow: 0 0 5px var(--poy-bulma-box-shadow);
    display: flex;

    .row {
        display: flex;
        gap: 3px;
    }

    .col {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    li.selected {
        background: var(--bulma-info);
        color: var(--bulma-info-invert);
    }

    .month-calendar {
        .header {
            display: flex;
            justify-content: space-around;

            button.button {
                width: 1em;
                height: 1em;
                border: 0;
                padding: 0;
            }
        }

        .days {
            .row {
                gap: 0;

                &.header {
                    font-weight: bold;
                    border-bottom: solid 1px var(--bulma-border);

                    div {
                        color: var(--bulma-text);
                    }
                }

                div {
                    width: 1.8em;
                    padding: 0.3em;
                    text-align: right;
                    font-size: 0.9em;
                    color: var(--bulma-border);
                    border-top: 2px solid transparent;
                    border-bottom: 2px solid transparent;
                    height: 1.8em;
                    line-height: 1.8em;
                    display: flex;
                    justify-content: center;
                    align-items: center;


                    &.current-month {
                        color: var(--bulma-text);
                    }

                    &.in-range {
                        background: var(--poy-bulma-highlight-background);
                        color: var(--bulma-text-invert);
                        border-top: 2px solid var(--poy-bulma-highlight-border);
                        border-bottom: 2px solid var(--poy-bulma-highlight-border);

                        width: 100%;

                        font-size: 0.9em;
                        text-align: center;

                    }

                    &.start-date {
                        border-left: 2px solid var(--poy-bulma-highlight-border);
                        border-top-left-radius: 50%;
                        border-bottom-left-radius: 50%;
                    }

                    &.end-date {
                        border-right: 2px solid var(--poy-bulma-highlight-border);
                        border-top-right-radius: 50%;
                        border-bottom-right-radius: 50%;
                    }
                }
            }
        }
    }
}


.reset-bulma-wrapper {
    pre {
        padding: 0;
        background-color: unset;
    }
}

.table {

    /** bulma is missing the table-layout feature*/
    &.is-fullwidth {
        width: 100%;
        table-layout: fixed;
    }

    &.is-small-font {
        font-size: 0.7em;
    }
}

.table.transactions-report {

    th,
    td {
        background-color: var(--bulma-body-background-color);
        border: 0;
    }

    tr.transaction-row-heading {

        th,
        td {
            border-bottom: var(--bulma-border) 1px solid;
            border-top: 10px solid transparent;
        }
    }
}

.table.ledger-report {
    thead {

        th,
        td {
            border: 0;
        }
    }

    td,
    th {
        background-color: var(--bulma-body-background-color);
        border: 0;
    }

    .account-row-heading {

        td,
        th {
            border-bottom: var(--bulma-border) 1px solid;
        }
    }

    .total-row {

        td,
        th {
            border-top: var(--bulma-border) 1px solid;
            height: 50px;
        }
    }
}

.full-transactions-report {
    .transaction {
        &.no-print-break {
            break-inside: avoid;
            break-after: auto;
        }

        .header {
            break-inside: avoid;
            break-after: auto;

            .table.transactions-entries-table {
                border-collapse: collapse;
                font-size: 0.9em;
                margin-bottom: 1em;

                td,
                th {
                    border: solid 1px var(--bulma-text);
                }
            }

        }

        .attachments {
            margin-bottom: 2em;

            .attachment-card {
                max-width: 50vh;
            }
        }

    }

}

@media print {

    body {
        font-size: 11px;
        margin-left: 40px;
    }

    .table-full-height-container {
        overflow: visible;
    }

    html.app {
        .main-content {
            margin: 0;

            /* some issue with printing flex layout hides the lower part of some items in flex. swap to block to be sure*/
            display: block;
        }

        .no-print {
            display: none !important;
        }

        .print-is-small {
            font-size: 0.5em;
        }

        table {
            tbody.no-break {
                break-inside: avoid;
                break-after: auto;
            }

            tr {
                break-inside: avoid;
                break-after: auto;
            }
        }

        table.report {
            width: 100%;
            tr {

                td,
                th {
                    border: 0;
                }
            }

        }
    }

    .tag {
        font-size: 0.8em;
    }
}

@media screen {
    .no-screen {
        display: none !important;
    }
}

.control.currency {

    label.label {
        text-align: left;
    }

    input {
        text-align: right;
    }

}

.id-number {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.currency {
    text-align: right !important;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.date {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

tr.is-subrow {
    font-size: 0.8em;
}

.select-input-control {
    div.select {
        width: 100%;

        select {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%;

            option {
                white-space: nowrap;
            }
        }
    }
}

.closing-action-item {
    .level-left {
        align-items: self-start;

        .level-item.action-icon {
            margin-top: 0.2em;
        }
    }
}

ul.log-message-component {
    font-family: monospace;
    background-color: var(--bulma-background);
    /* #f8f8f8;*/
    border: 1px solid var(--bulma-border);
    /*#ddd;*/
    padding: 10px;
    margin: 10px;
    list-style: none;

    li {
        .timestamp {
            font-variant-numeric: tabular-nums;
            padding-right: 0.5em;
        }
    }

    li.is-info {
        background-color: var(--bulma-info-90);
        color: var(--bulma-info-90-invert);
    }

    li.is-debug {
        background-color: var(--bulma-default-90);
        color: var(--bulma-default-90-invert);
    }

    li.is-error {
        background-color: var(--bulma-danger-90);
        color: var(--bulma-danger-90-invert);
    }

    li.is-warning {
        background-color: var(--bulma-warning-90);
        color: var(--bulma-warning-90-invert);
    }


}

.is-unselectable {
    user-select: none;
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
}


/* Fix for calendar icon on dark mode */
@media (prefers-color-scheme: dark) {
    input[type="date"]::-webkit-calendar-picker-indicator {
        filter: invert(1);
        /* Inverts the icon color for dark mode */
    }
}