/* # Font imports */

@font-face {
    font-family: 'Open Sans';
    src: url('/fonts/OpenSans-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Open Sans SemiCondensed';
    src: url('/fonts/OpenSans_SemiCondensed-Regular.ttf') format('truetype');
}


/* # Useful aliases */

:root {
    /*
    Formula:
        rem = x px / body font-size (default is usually 16)
    Example:
        rem1px = 1 / 16 = 0.0625
    */
    --rem1px: .0625rem;
    --rem2px: .125rem;
    --rem3px: .1875rem;
    --rem4px: .25rem;
    --rem5px: .3125rem;
    --rem6px: .375rem;
    --rem8px: .5rem;
    --rem10px: .625rem;
    --rem12px: .75rem;
    --rem13px: .8125rem;
    --rem14px: .875rem;
    --rem16px: 1rem;
    --rem18px: 1.125rem;
    --rem20px: 1.25rem;
    --rem28px: 1.75rem;
    --rem30px: 1.875rem;
    --rem40px: 2.5rem;
}


/* # My variables */

:root {
    --my-default-font: 'Open Sans SemiCondensed', 'Open Sans', sans-serif;
    --my-default-font-condensed: 'Open Sans SemiCondensed', sans-serif;
    --my-default-font-monospaced: 'Consolas', monospaced;
    --my-default-font-size: var(--rem14px);
    --my-smaller-font-size: var(--rem13px);
    --my-even-smaller-font-size: var(--rem12px);
    --my-table-border-color: var(--bs-gray-200);
    --my-accent-color: darkorange;
    --my-neutral-color: var(--bs-gray-500);
}


/* # Overwrite Bootstrap defaults */

:root {
    --bs-font-sans-serif: var(--my-default-font);
    --bs-body-font-size: var(--my-default-font-size);
    /* Set all border radius to zero. */
    --my-border-radius: 0;
    --bs-border-radius: var(--my-border-radius);
    --bs-border-radius-sm: var(--my-border-radius);
    --bs-border-radius-lg: var(--my-border-radius);
    --bs-border-radius-xl: var(--my-border-radius);
    --bs-border-radius-2xl: var(--my-border-radius);
}

@media (min-width: 992px) {
    div.container {
        max-width: 900px;
    }
}

.content {
    padding-bottom: var(--rem40px);
}

@media (min-width: 1200px) {
    .h1, h1 {
        font-size: var(--rem28px);
    }
}


/* # Custom classes */

h1.brand {
    color: var(--my-accent-color);
    text-transform: uppercase;
    margin: var(--rem20px) 0 var(--rem30px);
}

.condensed-font,
h1,
h2,
h3,
h4,
h5 {
    font-family: var(--my-default-font-condensed);
}

h5.caption {
    font-size: var(--my-default-font-size);
    color: var(--my-accent-color);
    text-transform: uppercase;
    margin-bottom: var(--rem4px);
}

div.caption {
    font-size: var(--my-default-font-size);
    color: var(--my-accent-color);
    text-transform: uppercase;
    margin-bottom: var(--rem4px);

    h5 {
        font-size: var(--my-default-font-size);
        margin-bottom: var(--rem4px);
    }

    div.legend {
        float: inline-end;
        color: var(--my-neutral-color);
        margin-top: -1px;

        i.bi {
            color: var(--my-accent-color);
        }
    }
}

.navbar-brand {
    font-family: var(--my-default-font-condensed);
    text-transform: uppercase;

    i.bi {
        margin-right: var(--rem6px);
        font-size: var(--rem18px);
    }
}

nav.secondary-nav .nav-tabs {
    font-family: var(--my-default-font-condensed);

    .nav-link i.bi {
        margin-right: var(--rem3px);
        font-size: var(--rem16px);
    }
}

nav.main-nav {
    font-family: var(--my-default-font-condensed);

    .nav-link i.bi {
        margin-right: var(--rem6px);
        font-size: var(--rem16px);
    }
}

.accent {
    color: var(--my-accent-color);
}

.neutral {
    color: var(--my-neutral-color);
}

h5 span {

    &.week-day-highlighted {
        color: var(--my-accent-color);
    }

    &.week-day {
        color: var(--my-neutral-color);
        margin-left: var(--rem6px);
    }
}

div.panel-with-opacity {
    opacity: 0.25;
    transition: opacity 0.3s;

    &:hover {
        opacity: 1;
    }
}

p.well-done i {
    color: var(--my-accent-color);
}

div.events-list {
    font-family: var(--my-default-font-condensed);
    font-size: var(--my-default-font-size);

    &.events-list-with-max-height {
        max-height: 300px;
        overflow-y: auto;
    }

    > div.row {
        border-top: 1px solid var(--my-table-border-color);
        padding: var(--rem4px) 0 !important;
        margin: 0;

        > div {
            padding: 0 var(--rem10px) 0 0 !important;
            position: relative;

            &.col-auto {
                margin-right: 15px;

                &.column-id {
                    width: 260px;
                }

                &.column-status {
                    width: 80px;
                }

                &.column-date {
                    width: 90px;
                }

                &.column-date-range {
                    width: 160px;
                }

                &.column-created-on {
                    width: 60px;
                    text-align: end;
                }

                &.column-day {
                    width: 70px;

                    span.week-day {
                        color: var(--my-neutral-color);
                        margin-left: var(--rem6px);
                    }
                }

                &.column-compare {
                    width: 98px;
                }
            }

            a {
                text-decoration: none;
            }

            span.date-span {
                display: inline-block;
                width: 90px;
            }

            span.big-festival {
                color: var(--my-accent-color);
            }

            span.small-festival {
                color: var(--my-neutral-color);
            }

            button.btn {
                font-size: var(--my-default-font-size);
                padding: 0 var(--rem5px);
            }

            div.badge-recently-updated {
                position: absolute;
                top: var(--rem1px);
                left: 0;
                float: left !important;
                margin-left: -18px;

                i {
                    color: var(--my-accent-color);
                }
            }

            span.badge {
                background-color: white !important;
                text-transform: uppercase;
                color: var(--my-accent-color) !important;
                font-weight: unset;
                margin-left: var(--rem5px);
                padding: var(--rem3px);
                padding-bottom: var(--rem2px);
                border: 1px solid var(--my-accent-color);

                &.badge-canceled-recently {
                    background-color: var(--my-accent-color) !important;
                    color: white !important;
                    border: 1px solid var(--my-accent-color);
                }

                &.badge-processed-status-neutral {
                    color: var(--my-neutral-color) !important;
                    border: 1px solid var(--my-neutral-color);
                }

                &.badge-processed-status-done {
                    background-color: green !important;
                    color: white !important;
                    border: 1px solid green;
                }

                &.badge-processed-status-out-of-scope {
                    background-color: red !important;
                    color: white !important;
                    border: 1px solid red;
                }
            }

            i {
                color: var(--my-neutral-color);
            }
        }
    }
}

div.admin-events-list {
    font-size: var(--my-smaller-font-size);

    & > div.row {
        padding: 0 !important;

        & > div {
            & button.btn {
                font-size: var(--my-even-smaller-font-size);
                padding: 0 var(--rem5px);
            }
        }
    }
}

.icon-success {
    color: green;
}

.icon-warning {
    color: darkorange;
}

.icon-fail {
    color: red;
}

table.admin-table {
    width: auto;

    tr {
        &.row-fail {
            background-color: seashell;

            td:not(.cell-buttons) {
                background-color: unset;
            }

            td.cell-icon {
                color: red;
            }
        }

        &.row-success {
            td.cell-icon {
                color: green;
            }
        }
    }

    th {
        font-family: var(--my-default-font-condensed);
        font-size: var(--my-default-font-size);
        font-weight: unset;
        padding: var(--rem2px) var(--rem10px);
    }

    td {
        font-family: var(--my-default-font-condensed);
        font-size: var(--my-default-font-size);
        vertical-align: middle;
        padding: var(--rem2px) var(--rem10px);
        min-width: var(--rem30px);

        a {
            text-decoration: none;
        }

        a.btn,
        button {
            font-family: var(--my-default-font-condensed);
            font-size: var(--my-default-font-size);
            padding: 0 var(--rem5px);
        }
    }
}

form {
    margin-bottom: var(--rem28px);
}

form.condensed-form * {
    font-family: var(--my-default-font-condensed) !important;
    font-size: var(--my-default-font-size);
}

form.condensed-form div.row {
    margin-bottom: var(--rem6px);
}

form.condensed-form div.row > * {
    padding-left: 0;
    padding-right: var(--rem6px) !important;
}

form.condensed-form .col-form-label,
form.condensed-form .form-control,
form.condensed-form .form-control-plaintext,
form.condensed-form a.form-control,
form.condensed-form .form-select,
form.condensed-form a.btn,
form.condensed-form button {
    padding: var(--rem2px) var(--rem6px);
}

form.condensed-form .form-select {
    background-position: right var(--rem4px) center;
}

form.condensed-form input.is-canceled[type="text"] {
    color: red;
    text-decoration: line-through;
}

div.logs p {
    margin-bottom: 0;
    font-family: Consolas;
    font-size: var(--rem12px);
    line-height: initial;

    &.log-error {
        color: red;
    }

    &.log-warning {
        color: darkorange;
    }
}

.form-check-input[type="checkbox"] {
    border-radius: 0;
}

form.condensed-form a.form-control {
    width: initial;
    background-color: var(--bs-secondary-bg);
    opacity: 1;
    color: revert;
    text-decoration: none;
}

form.condensed-form pre {
    padding: var(--rem4px) var(--rem8px) !important;
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-light-rgb),var(--bs-bg-opacity)) !important;

    &.diff {
        padding: 0 var(--rem3px) !important;
        margin: 0 !important;

        code {
            height: unset;
            overflow-y: unset;
        }
    }

    &.diff-line-added {
        background-color: green !important;
        color: white !important;
    }

    &.diff-line-deleted {
        background-color: red !important;
        color: white !important;
    }
}

form.condensed-form pre code {
    word-break: break-all;
}

form.condensed-form code {
    display: inline-block;
    height: 300px;
    overflow-y: scroll;
    white-space: pre-line;
}

form.condensed-form a.btn,
form.condensed-form button,
form.condensed-form .col-auto label {
    margin-right: var(--rem5px);
}

form.condensed-form a.btn i,
form.condensed-form button i {
    margin-right: var(--rem2px);
}

form.condensed-form button i.bi-x-lg {
    color: red;
}

form.condensed-form button i.bi-x-lg {
    margin-right: 0;
}

form.compare-form div.row {
    margin-bottom: 0;
}

form.compare-form .form-control {
    margin-bottom: var(--rem6px);
}