@import url('components/theme.css');
@import url('components/plugins.css');
@import url('components/buttons.css');
@import url('components/tx-styles.css');
@import url('components/formfields.css');

html {
    color-scheme: light dark;
}

body {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
    background: linear-gradient(180deg, rgba(var(--primary-color-rgba), .08) 0%, rgba(var(--tertiary-color-rgba), .05) 100%), var(--main-body-color);
    color: var(--text-color);
    overflow: auto;
    overflow-x: hidden;
}

    body::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(-45deg, var(--primary-color), var(--tertiary-color), var(--secondary-color));
        background-size: 400% 400%;
        animation: gradient 22s ease infinite;
        opacity: 0.3;
        pointer-events: none;
    }

/*body::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: url(/images/paper-background.png) center center / cover no-repeat;
    z-index: -1;
}
*/

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

/* Paper background behind the whole scrollable page */
body {
    background-image: url(/images/paper-background.png);
    background-position: center top;
    background-repeat: repeat-y; /* or repeat if it tiles nicely */
    background-size: cover; /* or adjust to suit your texture */
}

/* Layout shell */
.app-shell {
    min-height: 100dvh;
    display: grid;
    grid-template-rows: var(--header-h) 1fr;
}

.container {
    width: min(100%, var(--container-max));
    margin-inline: auto;
}

/* Glass card */
.glass {
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: var(--glass-radius);
    backdrop-filter: saturate(140%) blur(var(--glass-blur));
    -webkit-backdrop-filter: saturate(140%) blur(var(--glass-blur));
}

.glass.light {
    backdrop-filter: unset;
    -webkit-backdrop-filter: unset;
}

.glass.hover-over:hover {
    backdrop-filter: saturate(140%) blur(6px) brightness(110%);
    -webkit-backdrop-filter: saturate(140%) blur(6px) brightness(110%);
}

/* Primary button (header Login) */
.btn-primary {
    appearance: none;
    border: 0;
    cursor: pointer;
    padding: 10px 14px;
    border-radius: 15px;
    background: linear-gradient(90deg, rgba(var(--primary-color-rgba), 1), rgba(var(--tertiary-color-rgba), .95));
    color: white;
    font-weight: 600;
    letter-spacing: .2px;
    box-shadow: 0 8px 18px rgba(var(--primary-color-rgba), .28);
    text-decoration: none;
}

    .btn-primary:focus-visible {
        outline: 2px solid var(--secondary-color);
        outline-offset: 2px;
    }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

.app-main {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
}

input:not([type="radio"]) {
    outline: var(--tertiary-color) solid 1px !important;
}

:focus-visible {
    outline: unset;
}

h2 {
    font-size: 22px;
    font-weight: 700;
    width: fit-content;
}

.main-page-container {
    margin-top: 20vh;
    padding-top:10px;
    margin-bottom: 20px;
}

.tab-contents {
    background-color: unset !important;
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: var(--glass-radius);
}

.results-area {
    max-height: calc(80vh - 140px) !important;
}

@media (max-width: 768px) {
    input,
    textarea,
    select {
        font-size: 16px !important;
    }

    .input-container textarea {
        min-height: 2rem;
        max-height: 10rem;
        resize: vertical;
        overflow-y: auto;
    }

    .input-container.row-2 textarea {
        min-height: 3rem;
        max-height: 10rem;
        resize: vertical;
        overflow-y: auto;
    }

    .input-container.row-3 textarea {
        min-height: 4rem;
        max-height: 10rem;
        resize: vertical;
        overflow-y: auto;
    }

    @supports (-webkit-touch-callout: none) {
        img,
        svg,
        video {
            max-width: 100%;
            height: auto;
            box-sizing: border-box;
        }
    }
}



/* Subtle branded reconnect toast */
.twx-reconnect > div {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    box-shadow: 0 0.15rem 0.45rem rgba(0, 0, 0, 0.25);
    background: var(--main-content-color, #333);
    color: var(--primary-color);
    font-size: 0.9rem;
    display: none; /* shown conditionally below */
    z-index: 9999;
    display: none;
    gap: 0.5rem;
    align-items: center;
    border-left: 4px solid var(--tertiary-color, #4caf50);
    opacity: 0.96;
}

/* When everything is fine */
.components-reconnect-hide > div {
    display: none;
}

/* When trying to reconnect (normal case) */
.components-reconnect-show > .twx-reconnect__attempting,
.components-reconnect-retrying > .twx-reconnect__attempting {
    display: inline-flex;
    align-items: center;
}

    .components-reconnect-show > .twx-reconnect__attempting button,
    .components-reconnect-retrying > .twx-reconnect__attempting button {
        margin: unset !important;
        background: var(--primary-color) !important;
        color: var(--main-content-color) !important;
    }

/* When reconnection failed but might come back */
.components-reconnect-failed > .twx-reconnect__failed {
    display: inline-flex;
    align-items: center;
}

.components-reconnect-failed > .twx-reconnect__failed button {
    margin: unset !important;
    background: var(--primary-color) !important;
    color: var(--main-content-color) !important;
}

/* When the server has rejected reconnect (state is lost) */
.components-reconnect-rejected > .twx-reconnect__rejected {
    display: inline-flex;
    align-items: center;
}

/* Body copy inside toast */
.twx-reconnect span {
    font-weight: 500;
}

.twx-reconnect small {
    font-size: 0.8rem;
    opacity: 0.8;
}

/* Little pill-style buttons */
.twx-reconnect button {
    border: none;
    border-radius: 999px;
    padding: 0.25rem 0.9rem;
    cursor: pointer;
    font-size: 0.85rem;
    background: var(--tertiary-color, #4caf50);
    color: #fff;
    transition: transform 0.05s ease-out, box-shadow 0.05s ease-out;
}

    .twx-reconnect button:hover {
        transform: translateY(-1px);
        box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.25);
    }

/* Optional: delay before the toast shows, so micro-blips don’t flash */
#components-reconnect-modal {
    transition: visibility 0s linear 1000ms; /* 1s delay */
}

    #components-reconnect-modal button {
        margin: unset !important;
        background: var(--primary-color) !important;
        color: var(--main-content-color) !important;
    }