/* General Styling */

html, body, main {
    height: 100%;
    width: 100%;
}

#page_body {
    background: url("../../images/subtle-prism.svg");
    font-family: 'Roboto', sans-serif;
}

.table-container {
    max-height: 30rem;
    overflow: auto
}

.settings-header {
    color: var(--bs-primary-text);
    text-align: center;
    background-color: var(--bs-primary-bg-subtle);
    border-top-left-radius: 0.625rem;
    border-top-right-radius: 0.625rem;
    font-size: 2.5rem;
    padding-top: .5rem;
    padding-bottom: 1rem;
}

.input-group-text {
    min-width: 1.4375rem;
}

svg {
    pointer-events: none;
}

.debug-strip {
    box-shadow: 0 0 0.625rem inset white;
    background: repeating-linear-gradient( 45deg, #ffd800, #ffd800 10px, #000000 10px, #000000 20px );
}

.debug-text {
    background: rgba(0,0,0,.8);
    color: yellow;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    font-family: Copperplate,fantasy;
    animation: fade 1s linear infinite alternate;
}

/* Bootstrap Variables */

main form{
    background-color: var(--bs-body-bg) !important;
}

.theme-body {
    color: var(--bs-body-color) !important;
    background-color: var(--bs-body-bg) !important;
    border-color: var(--bs-border-color) !important;
}

.theme-secondary {
    color: var(--bs-secondary-color) !important;
    background-color: var(--bs-secondary-bg) !important;
    border-color: var(--bs-border-color) !important;
}

.theme-tertiary {
    color: var(--bs-tertiary-color) !important;
    background-color: var(--bs-tertiary-bg) !important;
    border-color: var(--bs-border-color) !important;
}

.theme-primary {
    color: var(--bs-primary-text) !important;
    background-color: var(--bs-primary-bg-subtle) !important;
    border-color: var(--bs-primary-border-subtle) !important;
}

.theme-success {
    color: var(--bs-success-text) !important;
    background-color: var(--bs-success-bg-subtle) !important;
    border-color: var(--bs-success-border-subtle) !important;
}

.theme-warning {
    color: var(--bs-warning-text) !important;
    background-color: var(--bs-warning-bg-subtle) !important;
    border-color: var(--bs-warning-border-subtle) !important;
}

.theme-danger {
    color: var(--bs-danger-text) !important;
    background-color: var(--bs-danger-bg-subtle) !important;
    border-color: var(--bs-danger-border-subtle) !important;
}

.theme-light {
    color: var(--bs-light-text) !important;
    background-color: var(--bs-light-bg-subtle) !important;
    border-color: var(--bs-light-border-subtle) !important;
}

.theme-dark {
    color: var(--bs-dark-text) !important;
    background-color: var(--bs-dark-bg-subtle) !important;
    border-color: var(--bs-dark-border-subtle) !important;
}

.theme-info {
    color: var(--bs-info-text) !important;
    background-color: var(--bs-info-bg-subtle) !important;
    border-color: var(--bs-info-border-subtle) !important;
}

/* Sidebar & Offcanvas */

#sidebar {
    position: fixed;
    height: 4.5rem;
    width: 100%;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.75);
    background-color: #142D55;
    z-index: 1040;
}

#profileIcon {
    border-radius: 1.5rem;
}

#profileName {
    color: greenyellow;
    background: rgba(0, 0, 0, 0.6);
    transition: all .2s ease-out;
}

#profileImage:hover #profileName {
    opacity: 0
}

#logo {
    transition: all .2s ease-out;
    background: url("../../images/logo.svg");
    height: 180px;
    width: 296px;
}

#logo:hover {
    box-shadow: inset 0 0 10px grey;
}

.offcanvas-header {
    max-height: 180px;
    border-bottom: 1px solid var(--bs-border-color);
    background: url("../../images/subtle-prism.svg");
}

.offcanvas-body {
    background: url("../../images/subtle-prism.svg");
}

#refresh_area {
    display: none;
}

#refresh_area.active {
    display: flex;
}

#refresh_button {
    transition: all .2s ease-out;
}

.navtile {
    width: 3rem;
    height: 3rem;
}

.navsvg {
    font-size: 2.1rem;
}

/* Badges */

.day-badge-width {
    min-width: 2.5rem;
}

.badge-builder > .badge {
    border-radius: 0;
    border-width: 1px;
    border-style: solid;
}

.badge-builder > .badge:first-child {
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
}

.badge-builder > .badge:last-child {
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
}

/* Icons */

.mini-icon {
    font-size: 0.75rem;
}

.small-icon {
    font-size: 1rem;
}

.medium-icon {
    font-size: 2.5rem;
}

.huge-icon {
    font-size: 20rem;
}

/* Scrollbar */

::-webkit-scrollbar {
    width: 15px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 2px grey;
    border-radius: 4px;
    background: none;
}

::-webkit-scrollbar-thumb {
    border: 4px solid transparent;
    border-radius: 9px;
    background: #808080;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    border: 3px solid transparent;
    border-radius: 11px;
    background: #909090;
    background-clip: content-box;
}

::-webkit-scrollbar-corner {
    box-shadow: inset 0 0 2px grey;
    border-radius: 2px;
    background: none;
}

/* BG-Colors & Darkmode */

.dark #page_body, .dark .offcanvas-header, .dark .offcanvas-body {
    background: url("../../images/subtle-prism-dark.svg");
}

.dark #logo {
    background: url("../../images/logo-inverse.svg");
}

.dark .swal2-popup {
    background-color: var(--bs-body-bg) !important;
}

.dark .swal2-content {
    color: var(--bs-body-color);
}

.dark .swal2-popup.swal2-toast {
    background-color: var(--bs-body-bg);
    box-shadow: 0 0 0.625em var(--bs-tertiary-color);
}

.dark .swal2-popup h2 {
    color: var(--bs-body-color);
}

.dark .swal2-popup textarea, .dark .swal2-popup input {
    color: var(--bs-body-color);
    background-color: var(--bs-secondary-bg);
}

/* Animations */

@keyframes fade {
    from {
        color: yellow;
    }
    to {
        color: rgba(0, 0, 0, 0);
    }
}