/*
 * Vaadin 24 application theme for D&DOnline.
 *
 * For Lumo utility classes (font weights, paddings, etc.) prefer
 * com.vaadin.flow.theme.lumo.LumoUtility in Java code.
 *
 * Sections:
 *   1. Imports & CSS custom properties
 *   2. Base layout (html / body / mainview)
 *   3. Panel emulation (v-panel / pdf-panel)
 *   4. Details (vaadin-details)
 *   5. Notification
 *   6. Window / Dialog
 *   7. Fields & icons
 *   8. Buttons & themes
 *   9. Flow buttons
 *  10. Tab
 *  11. Login view
 *  12. Profile window
 *  13. Generic visual helpers
 *  14. Third-party integrations (HugeRTE)
 */

/* =====================================================================
 * 1. Imports & CSS custom properties
 * ===================================================================== */

/* Sidebar menu (WebMenu) styles live in a separate file. */
@import url('styles-menu.css');

:root {
    --vaadin-field-default-width: 6em;
    /*--vaadin-tooltip-offset-bottom: var(--lumo-space-l);*/
}

html {
    --dnd-yellow-color: hsl(57, 100%, 40%);
}

/* =====================================================================
 * 2. Base layout (html / body / mainview)
 * ===================================================================== */

html, body {
    overflow: hidden;        /* no page-level scrollbar */
    height: 100%;
}

.mainview {
    overflow: hidden;        /* sidebar + content row never scrolls */
    height: 100vh;
    width: 100%;
    max-width: 100vw;
}

.mainview .view-content {
    overflow: auto;          /* only the active route scrolls */
    min-height: 0;           /* allow flex child to shrink */
    min-width: 0;            /* allow flex child to shrink */
    width: auto;             /* let flex-grow size it */
    flex: 1 1 0;

    box-sizing: border-box;
    padding: 10px 30px 30px 30px;
}

.mainview .view-content .character {
    padding: 40px 0 0 0;
}

.mainview .view-content > * {
    max-width: 100%;
}

[has-label] {
    padding-top: var(--lumo-space-xs);
}

.v-gridlayout.v-spacing {
    row-gap: var(--lumo-space-xs);
}

vaadin-grid::part(header-cell) {
    min-height: unset;
    padding-top: 4px;
    padding-bottom: 4px;
}

.left-space {
    margin-left: 37px
}

.left-space-1 {
    margin-left: 30px;
}

.left-space-2 {
    margin-left: 60px;
}

.left-space-3 {
    margin-left: 80px;
}

.multiple-choose {
    border: var(--vaadin-input-field-readonly-border, 1px dashed var(--lumo-contrast-30pct));
    border-radius: 0.25em;
}

/* =====================================================================
 * 3. Panel emulation (DndTheme.PANEL / PANEL_CAPTION / PANEL_CONTENT / PANEL_BORDERLESS)
 * ===================================================================== */

.v-panel {
    display: grid;
}

.v-panel-borderless {
}

.v-panel-borderless > .v-panel-content {
    border: none;
    padding: 0;
}

.v-panel-caption {
    line-height: normal;

    padding: var(--lumo-space-s) var(--lumo-space-m);
    font-weight: 600;
    color: var(--lumo-header-text-color);
    border-bottom: 1px solid var(--lumo-contrast-10pct);

    box-sizing: border-box;

    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-right-radius: 5px;
    background-color: hsl(214 100% 65% / 1);
    background-image: linear-gradient(to bottom, hsl(214 100% 65% / 1) 2%, hsl(214 100% 75% / 1) 98%) !important;
}

.v-panel-content {
    padding: var(--lumo-space-m) 0 0 var(--lumo-space-m);
    border-left: hsl(214 100% 85% / 1) 5px solid;
}

.pdf-panel {
    border: none;
    padding: 0;
    box-sizing: border-box;
}

.pdf-panel-redBorder {
    border: red 2px solid !important;
}

.pdf-panel-blueBorder {
    border: blue 2px solid !important;
}

.pdf-panel-label {
    /*position: fixed;*/
    float: right;
    z-index: 999;
    right: 5px;
    text-shadow: 1px 0 0 #fff, 0 1px 0 #fff;
    font-size: 13px;
    font-weight: 300 !important;
}

.v-wrong-value {
    color: red;
    font-weight: bold;
}

/* =====================================================================
 * 4. Details (vaadin-details)
 * ===================================================================== */

.vaadin-details-summary .vaadin-details-borderless {
    border: none;
    box-shadow: none;
    background-color: transparent;
}

vaadin-details-summary {
    padding: var(--lumo-space-s) var(--lumo-space-m);
    font-weight: 600;
    color: var(--lumo-header-text-color);
    border-bottom: 1px solid var(--lumo-contrast-10pct);

    box-sizing: border-box;

    border-radius: 5px 5px 5px 0;
    background-color: hsl(214 100% 65% / 1);
    background-image: linear-gradient(to bottom, hsl(214 100% 65% / 1) 2%, hsl(214 100% 75% / 1) 98%) !important;
}

vaadin-details::part(content) {
    padding: var(--lumo-space-m) 0 0 var(--lumo-space-m);
    border-left: hsl(214 100% 85% / 1) 5px solid;
}

vaadin-details[non-collapsible]::part(summary) {
    pointer-events: none;
}

vaadin-details[non-collapsible]::part(summary-content)::before {
    display: none;
}

/* =====================================================================
 * 5. Notification
 * ===================================================================== */

.notification::part(overlay) {
    background: var(--lumo-base-color) linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
    border-style: solid;
    border-width: 2px;
}

.notification.notification-bottom::part(overlay) {
    border-width: 2px 0 0 0;
}

.notification.notification-bottom::part(content) {
    justify-content: center;
}

.notification.closeable::part(content) {
    padding: 0;
    cursor: pointer !important;
}

.notification .notification-block {
    padding: 12px 24px 12px 12px;
}

.notification .notification-title {
    background: var(--lumo-base-color) linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
    padding-right: 30px;
}

.notification .notification-content {
    color: var(--lumo-secondary-text-color);
    font-size: var(--lumo-font-size-s);
    font-weight: 700;
}

.notification.notification-success::part(overlay) {
    border-color: var(--lumo-success-color);
    color: var(--lumo-success-color);
}

.notification.notification-error::part(overlay) {
    border-color: var(--lumo-error-color);
    color: var(--lumo-error-color);
}

.notification.notification-bottom.notification-success::part(content):before {
    font-family: ThemeIcons, "Font Awesome 6 Free", FontAwesome;
    font-weight: 900;
    content: "\f00c";
    margin-right: 0.5em;
}

.notification.notification-success .notification-title:before {
    font-family: ThemeIcons, "Font Awesome 6 Free", FontAwesome;
    font-weight: 900;
    content: "\f00c";
    margin-right: 0.5em;
}

.notification.notification-error .notification-title:before {
    font-family: ThemeIcons, "Font Awesome 6 Free", FontAwesome;
    font-weight: 900;
    content: "\f05e";
    margin-right: 0.5em;
}

.notification.closeable:after {
    content: "\00d7";
    font-size: 1.5em;
    position: absolute;
    top: 25px;
    margin-top: -12px;
    right: 12px;
    width: 25px;
    height: 25px;
    line-height: 24px;
    cursor: pointer;
    color: #000;
    opacity: 0.5;
    filter: alpha(opacity=50);
    text-align: center;
    border: 1px solid #000;
    border-color: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    transition: opacity 200ms;
}

.notification.closeable:hover:after {
    opacity: 1;
    filter: none;
}

.notification.closeable:active:after {
    background-color: #000;
    color: #fff;
    opacity: 0.3;
    filter: alpha(opacity=30.0);
    transition: none 200ms;
}

/* =====================================================================
 * 6. Window / Dialog (WindowEx / Dialog)
 * ===================================================================== */

vaadin-dialog-overlay.v-window::part(overlay) {
    border-radius: 5px;
    overflow: hidden;
}

vaadin-dialog-overlay.v-window::part(header) {
    line-height: var(--lumo-line-height-xs);
    padding: var(--lumo-space-s) var(--lumo-space-m);
    background-color: hsl(214 100% 90% / 1);
    background-image: linear-gradient(to bottom, hsl(214 100% 87% / 1) 2%, hsl(214 100% 95% / 1) 98%) !important;
    border-bottom: 1px solid var(--lumo-contrast-10pct);
    color: var(--lumo-header-text-color);
    font-weight: 600;
    min-height: auto;
    border-radius: 0;
}

vaadin-dialog-overlay.v-window::part(title) {
    font-size: var(--lumo-font-size-m);
}

vaadin-dialog-overlay.v-window::part(content) {
    padding: var(--lumo-space-m);
}

vaadin-dialog-overlay.v-window [slot="footer"] {
    padding: var(--lumo-space-s) var(--lumo-space-m);
}

/* =====================================================================
 * 7. Fields & icons
 * ===================================================================== */

.label-icon-info-before label::before {
    content: "\f05a"; /* Font Awesome: circle-info (solid) */
    font-family: "Font Awesome 6 Free", FontAwesome;
    font-weight: 900;
    font-size: calc(min(16px, 1em));
    margin-right: 4px;
    color: var(--lumo-primary-color);
}

label.label-icon-info-before::before {
    content: "\f05a"; /* Font Awesome: circle-info (solid) */
    font-family: "Font Awesome 6 Free", FontAwesome;
    font-weight: 900;
    font-size: calc(min(16px, 1em));
    margin-right: 4px;
    color: var(--lumo-primary-color);
}

.label-icon-info-after label::after {
    content: "\f05a"; /* Font Awesome: circle-info (solid) */
    font-family: "Font Awesome 6 Free", FontAwesome;
    font-weight: 900;
    font-size: calc(min(16px, 1em));
    margin-left: 4px;
    color: var(--lumo-primary-color);
}

label.label-icon-info-after::after {
    content: "\f05a"; /* Font Awesome: circle-info (solid) */
    font-family: "Font Awesome 6 Free", FontAwesome;
    font-weight: 900;
    font-size: calc(min(16px, 1em));
    margin-left: 4px;
    color: var(--lumo-primary-color);
}

.html-icon-size vaadin-icon {
    width: calc(min(16px, 1em));
    height: calc(min(16px, 1em));
}

.color-important {
    color: var(--lumo-error-color);
}

.fa,.fab,.fad,.fal,.far,.fas {
    padding: 0.25rem;
    margin: 0 4px 0 0;
}

.required-placeholder [slot="input"]:placeholder-shown {
    opacity: 1 !important;
    color: var(--lumo-error-color);
}

/* =====================================================================
 * 8. Buttons & themes
 * ===================================================================== */

vaadin-button[theme~="button-red"] {
    background: var(--lumo-error-color);
    color: var(--_lumo-button-primary-text-color);
    font-weight: var(--vaadin-button-primary-font-weight, 600);
}

vaadin-button[theme~="button-red"][disabled] {
    background: var(--_lumo-button-background);
    color: var(--lumo-disabled-text-color);
}

vaadin-button[theme~="button-green"] {
    background: var(--lumo-success-color);
    color: var(--_lumo-button-primary-text-color);
    font-weight: var(--vaadin-button-primary-font-weight, 600);
}

vaadin-button[theme~="button-green"][disabled] {
    background: var(--_lumo-button-background);
    color: var(--lumo-disabled-text-color);
}

vaadin-button[theme~="button-yellow"] {
    background: var(--dnd-yellow-color);
    color: var(--lumo-success-text-color);
    font-weight: var(--vaadin-button-primary-font-weight, 600);
}

vaadin-button[theme~="button-yellow"][disabled] {
    background: var(--_lumo-button-background);
    color: var(--lumo-disabled-text-color);
}

vaadin-menu-bar-button[theme~="button-red"] {
    background: var(--lumo-error-color);
    color: var(--_lumo-button-primary-text-color);
    font-weight: var(--vaadin-button-primary-font-weight, 600);
    margin: 4px 0;
}

vaadin-menu-bar-button[theme~="button-red"][disabled] {
    background: var(--_lumo-button-background);
    color: var(--lumo-disabled-text-color);
}

vaadin-menu-bar-button[theme~="button-green"] {
    background: var(--lumo-success-color);
    color: var(--_lumo-button-primary-text-color);
    font-weight: var(--vaadin-button-primary-font-weight, 600);
    margin: 4px 0;
}

vaadin-menu-bar-button[theme~="button-green"][disabled] {
    background: var(--_lumo-button-background);
    color: var(--lumo-disabled-text-color);
}

.buttons-group vaadin-icon {
    font-weight: 300;
    font-size: .7em;
    padding-left: 5px;
    line-height: 1;
    opacity: .6;
    color: inherit;
    filter: none
}

[theme~="button-small"] {
    --lumo-button-size: var(--lumo-size-xs);
    font-size: 12px;
    font-weight: 200;
    width: unset !important;
}

/* Vaadin 24 has no LUMO_WARNING; this class is the project replacement. */
.dnd-button-warning {
    background-color: var(--lumo-warning-color, #e7a23b);
    color: var(--lumo-warning-contrast-color, #fff);
}

.dnd-button-warning:hover {
    background-color: var(--lumo-warning-color-50pct, #d18d27);
}

/* =====================================================================
 * 9. Flow buttons
 * ===================================================================== */

.flow-button-layout-row {
    position: fixed;
    z-index: 999;
    top: 0;
    right: 0;
}

.flow-button-layout {
    padding: 13px 10px 10px 10px;
    margin-top: -3px;
    background: white;
    border-radius: 4px;
    border: 1px solid #d5d5d5;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05);
}

.v-non-flow-buttons {
    margin-top: 12px;
}

.v-non-flow-buttons_border_top {
    padding-top: 25px;
}

/* =====================================================================
 * 10. Tab
 * ===================================================================== */

.tab-icon-above-text {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tab-icon-above-text vaadin-icon {
    width: 1em;
    height: 1em;
}

/* =====================================================================
 * 11. Login view
 * ===================================================================== */

.loginview {
    background-color: var(--lumo-base-color);
    background-image: radial-gradient(circle at 50% 50%, var(--lumo-contrast-5pct), var(--lumo-contrast-10pct));
    padding: 37px 37px 0 37px;
    overflow: auto;
}

.login-panel {
    background: var(--lumo-base-color);
    color: var(--lumo-body-text-color);
    border-radius: var(--lumo-border-radius-m);
    border: 1px solid var(--lumo-contrast-10pct);
    box-shadow: var(--lumo-box-shadow-s);
    padding: var(--lumo-space-l);
    min-width: 208px;
    max-width: 90%;
}

.login-panel .donate-top {
    text-align: right;
}

.login-panel div {
    padding-bottom: 10px;
}

.login-buttons {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
}

@media (max-width: 650px) {
    .login-panel {
        display: grid;
    }

    .login-panel .fields {
        display: grid;
    }

    .login-panel .fields > * {
        width: 100% !important;
    }

    .login-buttons {
        display: grid;
        padding-top: 30px;
        justify-content: unset;
    }

    .login-panel .login-buttons > * {
        width: 100% !important;
    }
}

@media (max-width: 800px) {
    .loginview {
        padding: 10px 10px 0 10px;
    }
}

/* =====================================================================
 * 12. Profile window
 * ===================================================================== */

vaadin-dialog-overlay.profile-window::part(overlay) {
    width: 880px;
    max-width: 90%;
    max-height: 480px;
}

vaadin-dialog-overlay.profile-window vaadin-form-item::part(label) {
    text-align: right;
    font-size: 14px;
}

vaadin-dialog-overlay.profile-window vaadin-form-layout > label {
    text-transform: uppercase;
    font-size: 14px;
    padding-top: 2em;
}

vaadin-dialog-overlay.profile-window vaadin-form-layout .profile-checkbox {
    margin-left: 212px !important;
    width: unset !important;
}

vaadin-dialog-overlay.profile-window #details {
    width: 0px;
    min-width: 0px;
}

vaadin-dialog-overlay.profile-window vaadin-tabs::part(tabs) {
    justify-content: center;
}

/* Tab content inner padding */
vaadin-dialog-overlay.profile-window [role="tablist"] > * {
    padding-left: 37px;
    padding-right: 37px;
}

/* At <=820px: profile-form stacks vertically (image above details) */
@media (max-width: 820px) {
    vaadin-dialog-overlay.profile-window .profile-form {
        flex-direction: column !important;
    }

    vaadin-dialog-overlay.profile-window .profile-form > * {
        margin-left: 0 !important;
    }

    vaadin-dialog-overlay.profile-window #details {
        width: 100%;
    }

    vaadin-dialog-overlay.profile-window vaadin-form-item::part(label) {
        font-size: 14px;
    }

    .mainview .view-content {
        padding: 35px 10px 0 0;
    }

    .mainview .view-content .character {
        padding: 0;
    }
}

/* At <=600px: reduced tab content padding and form layout goes single-column */
@media (max-width: 600px) {
    vaadin-dialog-overlay.profile-window [role="tablist"] > * {
        padding-left: 19px;
        padding-right: 19px;
    }

    /* Force form items to stack (label above field) */
    vaadin-dialog-overlay.profile-window vaadin-form-item {
        flex-direction: column;
        align-items: flex-start;
    }

    vaadin-dialog-overlay.profile-window vaadin-form-item::part(label) {
        border-bottom: none;
        line-height: 1;
        padding-left: 0;
        text-align: left;
    }

    vaadin-dialog-overlay.profile-window vaadin-form-layout .profile-checkbox {
        margin-left: unset !important;
    }
}

.profile-window .profile-button-layout {
    width: calc(100% + 32px) !important;
    padding: 7px 12px;
    background-color: #fafafa;
    background-image: linear-gradient(to bottom,#f0f0f0 0, #fafafa 4px);
    border-top: 1px solid #dfdfdf;
    border-radius: 0 0 4px 4px;
    margin: 0 0px -16px -16px;
}

/* =====================================================================
 * 13. Generic visual helpers ported from the legacy theme
 * ===================================================================== */

.parenthesis {
    border-left-style: solid;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.v-label-underline { text-decoration: underline; }
.v-text-light      { font-weight: 200; }

.repair-padding             { padding: 0 !important; }
.repair-padding-top-bottom  { padding-top: 0 !important; padding-bottom: 0 !important; }
.add-border-bottom          { border-bottom: 1px solid #dfdfdf; }

.v-small-margin   { padding-top: 12px; padding-right: 12px; }
.v-normal-margin  { padding-top: 12px; padding-bottom: 0; }

.v-gridlayout-add-small-padding,
.v-horizontallayout-add-small-padding,
.v-verticallayout-add-small-padding { padding: 12px !important; }

.v-button-square  { padding: 0 6px !important; }
.v-button-spinner { margin-left: -55px !important; }

.v-caption-big-text { font-size: 20px !important; }

.choose-in-grid                    { width: calc(100% - 28px) !important; }
.v-has-caption.v-has-width > .choose-in-grid { width: calc(100% - 28px) !important; }

.grid-row-divider { border-bottom: solid 1px #7d7d7d; }

.v-font-weight-bold {
    font-weight: 700;
}

.v-scrollable {
    overflow: auto;
}

.v-select-optiongroup-horizontal {
    display: flex;
    flex-direction: row;
    gap: var(--lumo-space-s);
}

.small-margin-top {
    margin-top: var(--lumo-space-xs);
}

.multi-choose-button {
    padding: 0 5px 0 5px;
}

/* Background color helpers used by status renderers */
.background-blue       { background-color: #d6e6f5; }
.background-gray       { background-color: #e0e0e0; }
.background-green      { background-color: #d6f5d6; }
.background-lightgreen { background-color: #eaf7ea; }
.background-orange     { background-color: #fce5cd; }
.background-purple     { background-color: #e1d5f5; }
.background-red        { background-color: #f5d6d6; }
.background-yellow     { background-color: #fff2cc; }

/* =====================================================================
 * 14. Third-party integrations
 * ===================================================================== */

/* HugeRTE: keep its popup above Vaadin dialogs/overlays */
.tox.tox-hugerte-aux,
.tox-fullscreen .tox.tox-hugerte-aux {
    z-index: 1000000;
}