/* Global styles - May 2023 design */

/* Header */
.navHeader {
    background-color: #ff9a00;
    position: sticky;
    top: 0;
    z-index: 999999;
    overflow: hidden;
    transition: all 0.2s ease-in-out;
}

.mobileLogo {
    display: none;
}

.mobileDrawerControl {
    display: none !important;
    all: unset;
}

/* Remove default a styling */
.mobileDrawerControl:hover, .mobileDrawerControl:active, .mobileDrawerControl:focus,
.frHeaderUser:hover, .frHeaderUser:active, .frHeaderUser:focus {
    text-decoration: none;
    color: unset;
}

/* Condensed */
.navHeader.condensed {
    height: 5rem;
}

/* Messy, but only safari width fix I could make */
.navHeader.condensed.default .frHeaderLogo img:not(.mobileLogo) {
    max-width: 35px;
}

/* Scaled (for full logo) */
.navHeader.scaled {
    height: 7rem;
}


.navHeaderContainer {
    display: flex;
    margin-left: 3rem;
    margin-right: 3rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    /* Clamp everything down */
    height: 100%;
    gap: 2rem;
}

/* Logo height should be no more than that of its container */
.frHeaderLogo {
    position: relative;
}

.frHeaderLogo img {
    height: 100%;
    width: auto;
}

/* Device specific stuff */
.headerDeviceName {
    user-select: none;
}

a.navDeviceLink {
    /* Unset all a styles */
    all: unset;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    border-radius: 1em;
    height: 2.7rem;
}

/* For the page we're already on */
/* This crazy query just only styles this if we're not hovering over any other pages */
.navHeaderContainer:not(:has(a.navDeviceLink.inactive:hover, a.navDeviceLink.inactive:active, a.navDeviceLink.inactive:focus)) a.navDeviceLink.active,
a.navDeviceLink.inactive:hover, a.navDeviceLink.inactive:active, a.navDeviceLink.inactive:focus {
    text-decoration: none;
    color: white;
    padding-left: 1rem;
    padding-right: 1rem;
    background-color: #222;
}

a.navDeviceLink.active {
    font-weight: bolder;
}

/* User - all this does is open the drawer */
.frHeaderUser {
    all: unset;
    display: flex;
    justify-content: center;
    gap: 1rem;
    font-weight: 600;
    align-items: center;
    margin-left: auto;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.frHeaderUser:hover {
    color: #555;
}

.navDrawer {
    visibility: hidden;
    display: none;
}

.navDrawer.open {
    position: fixed;
    display: flex;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    visibility: visible;
    z-index: 9999999;
    transition: all 0.2s ease-in-out;
}

body:has(.navDrawer.open) {
    /* Disable scrolling when nav open */
    overflow: hidden;
}

.navDrawerUnderlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;

    /* Make it dark */
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
}

.navDrawerContent {
    z-index: 99999999;
    background-color: white;
    /* On mobile we fill the parent */
    width: 100%; 
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    gap: 1rem;
    overflow-y: auto;
    position: fixed;
}

/* Keyframes for drawer opening animation */
@keyframes navDrawerOpen {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes navDrawerOpenDesktop {
    from {
        transform: translateX(200%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes navDrawerFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.navDrawer.opening {
    animation: navDrawerFadeIn 0.3s ease-in-out forwards;
}

.navDrawer.opening .navDrawerContent {
    animation: navDrawerOpen 0.3s ease-in-out forwards;
}

.navDrawer.closing {
    animation: navDrawerFadeIn 0.3s ease-in-out reverse forwards;
}

.navDrawer.closing .navDrawerContent {
    animation: navDrawerOpen 0.3s ease-in-out reverse forwards;
}

/* Close button */
.navDrawerClose {
    margin-left: auto;
    font-size: x-large;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.navDrawerClose:hover {
    opacity: 75%;
}

.navDrawerLogoAndClose {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.navDrawerLogo img {
    height: 4rem;
    width: auto;
}

/* Mobile options */
.navDrawerMobileOptions {
    display: flex;
    flex-direction: column;
}

/* Device total for mobile device links */
.navDrawerMobileOptionsTitle {
    font-size: x-large;
    font-weight: 200;
    margin-bottom: 1rem;
}

.navDrawerLink {
    all: unset;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    display: flex;
    gap: 1rem;
    padding: 1rem;
    font-size: 1.3rem;
    align-items: center;
    /* Bottom border */
    border-bottom: 2px solid #eee;
}

.navDrawerLink.active {
    font-weight: bolder;
}

.navDrawerLink:hover, .navDrawerLink:active, .navDrawerLink:focus {
    text-decoration: none;
    background-color: #eee;
}

.navDrawerCopy {
    text-align: center;
    font-size: small;
}

@keyframes showToolTipOnHover {
    0% {
        opacity: 0;
        transform: translateY(50%);
        scale: 0.5;
    }

    100% {
        opacity: 100%;
        transform: translateY(100%);
        scale: 1;
    }
}

/* On screens smaller than 1285px, turn the nav links into icons and the text into tooltips */
@media (max-width: 1285px) {
    .navDeviceLink {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .navDeviceLink span {
        opacity: 0;
        display: none;
        position: fixed;
        z-index: 999999999;
        padding: 1rem;
        background: #00000070;
        border-radius: 1em;
        backdrop-filter: blur(2px);
    }

    .navDeviceLink i {
        font-size: larger;
    }

    .navDeviceLink:hover span, .navDeviceLink:active span {
        /* Use the tooltip hover animation */
        animation: showToolTipOnHover 0.2s ease-in-out forwards;
        display: block;
    }
}

/* This is when the JS scales up for mobile - we hide the title and just show the full logo or it looks off */
@media (max-width: 736px) {

    /* It's drawer time - hide everything except the logo and device name */
    .navHeaderContainer > *:not(.frHeaderLogo):not(.headerDeviceName):not(.mobileDrawerControl) {
        display: none;
    }

    .headerDeviceName {
        display: none;
    }

    /* Hide the first img tag in  */
    .frHeaderLogo img:not(.mobileLogo) {
        display: none;
    }

    .mobileLogo {
        display: block;
    }

    .mobileDrawerControl {
        display: flex !important;
        cursor: pointer;
        font-size: x-large;
        justify-content: center;
        align-items: center;
    }

    /* Downscale scaled header on mobile or else it'll be way too big */
    .navHeader.scaled {
        height: 5rem;
    }
}


/* Desktop specific drawer styling (screens larger than 850px wide) */
@media (min-width: 850px) {
    .navDrawer.open {
        /* Align to right (with accounts) on desktop */
        justify-content: flex-end;
    }

    .navDrawerContent {
        /* On desktop we're 40% of the screen */
        width: 40%;
        height: 100vh;
    }

    .navDrawer.opening .navDrawerContent {
        animation: navDrawerOpenDesktop 0.3s ease-in-out forwards;
    }

    .navDrawer.closing .navDrawerContent {
        animation: navDrawerOpenDesktop 0.3s ease-in-out reverse forwards;
    }

    /* We already have these in the header - no need to render again */
    .navDrawerMobileOptions {
        visibility: hidden;
        display: none;
    }

    .navDrawerLink {
        gap: 1.5rem;
        font-size: 1.75rem;
    }
}


/* Dark mode */

body.edDark {
    background: #262626;
    filter: invert(1) hue-rotate(180deg);
}

body.edDark .toastContainer {
    position: sticky !important;
    top: calc(100vh - 15rem) !important;
    float: right;
    right: 3rem !important;
    left: auto !important;
    bottom: auto !important;
}

body.edDark .navHeader {
    /* Yes, this looks light, but when inverted it's dark, I promise! */
    background: #c9c9c9;
}

body.edDark dialog, body.edDark dialog::backdrop {
    filter: invert(1) hue-rotate(180deg);
}

body.edDark .backgroundSameInDark {
    filter: invert(1) hue-rotate(180deg);
}

/* That's all the CSS we need for dark mode */

/* Error span at top of page */
span.error:not(:empty):not(#fg_membersite *) {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    color: #8f3939;
    font-size: large;
    padding: 2rem;
    background-color: #ffcfcf;
}

/* Non-paying - any element in a body with class paid-only is blurred and the text obscured minus the header and navDrawer */
body.paid-only *:last-child:not(.navHeader *):not(.navDrawer):not(.navDrawer *):not(#skel-layers-wrapper):not(.error *) {
    filter: blur(10px);
    pointer-events: none;
    cursor: not-allowed;
}

body.paid-only .error {
    background-color: #ffd38e;
    color: #8f5f39;
}

/* No weird padding on mobile - override old themes from old template */
body {
    padding-top: 0 !important;
}

/* Toasts */
.toastContainer {
    display: flex;
    position: fixed;
    bottom: 5rem;
    right: 3rem;
    padding: 1rem;
    z-index: 999999999999;
    flex-direction: column;
    gap: 1rem;
}

.toastMessage {
    padding: 2rem;
    border-radius: 20px;
    width: 40vh;
    background-color: grey;
    color: white;
    font-size: large;
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: flex-start;

    /*
    Removed due to working very unreliably and causing the toast message to fail to display if the animation breaks.
    To be re-implemented if this issue is resolved.

    animation: toastMessage 1s linear forwards;
    opacity: 0;
    */

    transition: all 0.5s ease-in-out;
}

.toastMessage.debug{
    width: unset;
    max-width: 40vh;
    display: flex;
}

@keyframes toastMessage {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }

    /* A little delay */

    75% {
        opacity: 0;
        transform: translateX(100%);
    }

    100% {
        opacity: 100%;
        transform: translateX(0%);
    }
}

.toastMessage.error {
    background-color: #8f3939;
}

.toastMessage.success {
    background-color: rgb(117, 194, 2);
}

.toastMessage.info {
    background-color: #066daf;
}

.toastMessage.warning {
    background-color: #ff9800;
}

.toastContent {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.toastTitle {
    font-variant: all-small-caps;
}

.toastCloseCheckbox {
    display: none !important;
}

label.toastCloseButton {
    /* Disable the pre-existing styling */
    all: unset !important;
    cursor: pointer;
}

label.toastCloseButton::before {
    all: unset !important;
}

.toastMessage:has(.toastCloseCheckbox:checked) {
    opacity: 1;
    animation: closeToast 0.3s ease-in-out forwards;
}

@keyframes closeToast {
    0% {
        opacity: 1;
    }

    90% {
        opacity: 0;
    }

    100% {
        opacity: 0;
        height: 0px;
        overflow: hidden;
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* Mobile toast system - on screen less than 700px */
@media (max-width: 700px) {
    .toastContainer {
        bottom: 0;
        right: 0;
        width: 100%;
        align-items: flex-end;
        justify-content: flex-end;
        gap: 0;
        padding: 0;
    }

    .toastMessage {
        width: 100%;
        border-radius: 0;
        padding: 1rem;
        font-size: medium;
        align-items: center;
        justify-content: flex-start;
    }

    body.edDark .toastContainer {
        top: calc(100vh - 10rem) !important;
        right: 0 !important;
    }
}


/* Developer production DB warning */
.productionDbWarning {
    position: fixed;
    bottom: 0;
    right: 0;
    height: 0px;
}

/* Non-interactive watermark */
.productionDbWarning::before {
    content: "Production DB";
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 1rem;
    font-size: large;
    background-color: #8f3939;
    color: white;
    font-variant: all-small-caps;
    z-index: 999999999999;
}