@import './shared/theme.css';
@import './shared/toolbars.css';
@import './shared/mark-role.css';
@import './shared/utils.css';
@import './shared/widgets.css';
@import './shared/tables.css';
@import './shared/mud-helpers.css';

:root {
    --owner: #1a237e;
    --super: #2e7d32;
    --admin: #653137;
    --manage: #1565c0;
    --content-radius: 1rem;
    --padding: 4px;
    --padding-1-5: 6px;
    --padding-2: calc(2 * var(--padding));
    --padding-2-5: 10px;
    --padding-3: calc(3 * var(--padding));
    --padding-3-5: 14px;
    --padding-4: calc(4 * var(--padding));
    --padding-4-5: 18px;
    --padding-5: calc(5 * var(--padding));
    --margin: 4px;
    --margin-2: calc(2 * var(--margin));
    --margin-3: calc(3 * var(--margin));
    --margin-4: calc(4 * var(--margin));
    --margin-neg: calc(-1 * var(--margin));
    --margin-neg-2: calc(2 * var(--margin-neg));
    --appbar: calc(var(--mud-appbar-height) - var(--mud-appbar-height) / 8);
    --appbar-dense: calc(var(--mud-appbar-height) - var(--mud-appbar-height) / 4);
    --appbar-media: var(--mud-appbar-height);
    --appbar-landscape: 50px;
    --h-toolbar: calc(100% - var(--mud-appbar-height));
    --h-toolbar-dense: calc(100% - var(--appbar-dense));
    --h-toolbar-duo: calc(100% - (2 * var(--appbar)));
    --h-toolbar-dense-duo: calc(100% - (2 * var(--appbar-dense)));
}


html {
    overflow: hidden;
}

body {
    background-color: var(--mud-palette-appbar-background);
}

    body #wm-layout {
        height: 100dvh;
        display: flex;
        flex-direction: column;
        /* This forces the layout to respect the notch and home indicator */
        /* Ensure padding doesn't push the height past 100% */
        box-sizing: border-box;
    }


.app-bar-logo {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 25% !important;
    border-bottom-left-radius: 0 !important;
}

.rounded-content {
    border: 2px solid var(--mud-palette-background);
    -webkit-border-top-left-radius: var(--content-radius);
    border-top-left-radius: var(--content-radius);
    -webkit-border-top-right-radius: var(--content-radius);
    border-top-right-radius: var(--content-radius);
    margin-right: 0.3rem;
}

.rounded-top {
    -webkit-border-top-left-radius: var(--mud-default-borderradius);
    border-top-left-radius: var(--mud-default-borderradius);
    -webkit-border-top-right-radius: var(--mud-default-borderradius);
    border-top-right-radius: var(--mud-default-borderradius);
}

.rounded-top-left {
    -webkit-border-top-left-radius: var(--mud-default-borderradius);
    border-top-left-radius: var(--mud-default-borderradius);
    -webkit-border-top-right-radius: 0px;
    border-top-right-radius: 0px;
    -webkit-border-bottom-left-radius: 0px;
    border-bottom-left-radius: 0px;
    -webkit-border-bottom-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.rounded-left {
    -webkit-border-top-left-radius: var(--mud-default-borderradius);
    border-top-left-radius: var(--mud-default-borderradius);
    -webkit-border-top-right-radius: 0px;
    border-top-right-radius: 0px;
    -webkit-border-bottom-left-radius: var(--mud-default-borderradius);
    border-bottom-left-radius: var(--mud-default-borderradius);
    -webkit-border-bottom-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.drawer-rounded {
    border-radius: var(--content-radius);
    -webkit-border-radius: var(--content-radius);
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.wm-navigator.drawer-rounded {
    /* Navigation is done via collapsible menulist which has own scroll behaviour */
    overflow-y: hidden; 
}

.mud-style-select {
    padding: inherit;
    background: none;
    width: 100%;
}

.mud-input-required label.mud-input-label-inputcontrol::after {
    color: var(--mud-palette-error);
    margin-left: 4px;
}

.sticky-before, .sticky-after {
    position: relative;
}

    .sticky-before > .mud-autocomplete-before-items:has(> *),
    .sticky-after > .mud-autocomplete-after-items:has(> *) {
        position: sticky;
        z-index: 1;
        background-color: var(--mud-palette-background);
    }

    .sticky-before > .mud-autocomplete-before-items:has(> *) {
        top: 0;
        border-bottom: 1px solid var(--mud-palette-background);
    }

    .sticky-after > .mud-autocomplete-after-items:has(> *) {
        bottom: 0;
    }

.input-rounded,
.input-rounded .mud-input {
    -moz-border-radius: var(--mud-default-borderradius);
    -webkit-border-radius: var(--mud-default-borderradius);
    border-radius: var(--mud-default-borderradius);
}

.wm-inline-edit-cell .mud-table-cell.edit-mode-cell {
    padding-left: var(--padding-2);
    padding-right: var(--padding-2);
}

.wm-inline-edit-input input.mud-input-root {
    background-color: var(--mud-palette-background);
    -moz-border-radius: var(--mud-default-borderradius);
    -webkit-border-radius: var(--mud-default-borderradius);
    border-radius: var(--mud-default-borderradius);
    padding: var(--padding-2) var(--padding-2) !important;
   
}

/* Grid like flex box */
.d-flex.w-item-1\/2,
.d-flex.w-item-1\/3 {
    gap: 0px !important;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

    .d-flex.w-item-1\/2 > *:not(.mud-flex-break) {
        padding-top: var(--padding-2);
        padding-bottom: var(--padding-2);
        width: 50% !important;
        min-width: 50% !important;
        max-width: 50% !important;
    }

    .d-flex.w-item-1\/3 > *:not(.mud-flex-break) {
        padding-top: var(--padding-2);
        padding-bottom: var(--padding-2);
        width: 33% !important;
        min-width: 33% !important;
        max-width: 33% !important;
    }

/* Target autocompleted inputs */
.login-input input,
.login-input input:-webkit-autofill,
.login-input input:-webkit-autofill:hover,
.login-input input:-webkit-autofill:focus,
.login-input input:-webkit-autofill:active {
    /* 1. Force Text Color and Size */
    -webkit-text-fill-color: var(--mud-pallete-background) !important; /* Your desired text color */
    font-size: 20px !important; /* Your desired font size */
    /* 2. Force Background Color */
    transition: background-color 9999s ease-in-out 0s;
    /* 3. Optional: Match the caret (cursor) color */
    caret-color: var(--mud-pallete-primary);
}

    .login-input input::selection
    .login-input input::-moz-selection {
        background: var(--mud-pallete-primary); /* selection background color */
        color: var(--mud-pallete-primary-text); /* selection text color */
    }

/* Media 
    - phone portratit
    - phone landscape
    - tablet portrait
*/

@media screen and (max-width: 600px), screen and (max-height: 600px) and (orientation: landscape), screen and (max-width: 959px) and (orientation: portrait) {
    :root {
        --h-toolbar: calc(100% - var(--appbar) - var(--margin-4));
        --h-toolbar-dense: calc(100% - var(--appbar-dense) - var(--margin-2));
        --h-toolbar-duo: calc(100% - (2 * var(--appbar)) - var(--margin-4));
        --h-toolbar-dense-duo: calc(100% - (2 * var(--appbar-dense)) - var(--margin-2));
    }

    body #wm-layout {
        height: 100dvh; /* Dynamic Viewport Height is key here */
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        /* Keep your safe area insets */

        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: max(0px, env(safe-area-inset-left));
    }

    .app-bar-logo {
        border-top-left-radius: 30% !important;
        border-top-right-radius: 30% !important;
        border-bottom-right-radius: 30% !important;
        border-bottom-left-radius: 30% !important;
        position: unset;
        left: unset;
        top: unset;
    }

    .rounded-content {
        height: 100%;
        margin-left: 0;
        margin-right: 0;
        border: none;
        border-radius: 0px;
        -webkit-border-radius: 0px;
    }

        .rounded-content .rounded-left {
            border-radius: 0px;
            -webkit-border-radius: 0px;
        }

    .drawer-normal > .mud-drawer,
    .drawer-dense > .mud-drawer {
        margin: var(--margin-2) !important;
        margin-top: calc(var(--appbar) + var(--margin-2)) !important;
        width: calc(100% - var(--margin-4)) !important;
        max-height: calc(100% - var(--margin-4) - var(--appbar)) !important;
    }

    .drawer-dense > .mud-drawer {
        margin-top: calc(var(--appbar-dense) + var(--margin-2)) !important;
        max-height: calc(100% - var(--margin-4) - 2 * var(--appbar-dense)) !important;
    }

    .drawer-normal > .mud-overlay.mud-drawer-overlay {
        margin-top: var(--appbar) !important;
        max-height: calc(100% - var(--margin-2) - 2 * var(--appbar)) !important;
    }

    .drawer-dense > .mud-overlay.mud-drawer-overlay {
        margin-top: var(--appbar-dense) !important;
        max-height: calc(100% - var(--margin-2) - 2 * var(--appbar-dense)) !important;
    }

    .h-toolbar, .h-duo-toolbar {
        margin-bottom: var(--margin);
    }

    #wm-layout-sm-appbar {
        margin-bottom: var(--margin);
    }

    /* Grid like flex*/
    .d-flex.w-item-10r > .mud-dlex-break,
    .d-flex.w-item-1\/2 > .mud-flex-break,
    .d-flex.w-item-1\/3 > .mud-flex-break {
        display: none;
    }

    .d-flex.w-item-10r > *:not(.mud-flex-break) {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }

    .d-flex.w-item-1\/2 > *:not(.mud-flex-break) {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }

    .d-flex.w-item-1\/3 > *:not(.mud-flex-break) {
        width: 50% !important;
        min-width: 50% !important;
        max-width: 50% !important;
    }
}


/* Landscpae only */
@media screen and (max-height: 600px) and (orientation: landscape) {
    html, body {
        /* Give the browser slightly more than 100% height to trigger the native scroll-to-hide */
        min-height: 101vh;
        overflow-y: scroll;
    }

    #wm-layout.drawer-landscape {
        height: unset;
        min-height: calc(100vh - var(--margin-2));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        margin-top: var(--margin);
        margin-right: calc(var(--appbar-landscape) + var(--margin));
    }

        #wm-layout.drawer-landscape #wm-layout-body {
            min-height: 100%;
        }

    .drawer-normal > .mud-drawer,
    .drawer-dense > .mud-drawer {
        position: fixed;
        margin: var(--margin-2) !important;
        margin-left: max(var(--margin-2), env(safe-area-inset-left)) !important;
        max-height: calc(100% - var(--margin-4) - var(--appbar)) !important;
        max-width: calc(100% - var(--margin-4) - var(--appbar-landscape) - max(0px, env(safe-area-inset-left)));
    }

    .drawer-normal > .mud-overlay.mud-drawer-overlay,
    .drawer-dense > .mud-overlay.mud-drawer-overlay {
        max-height: unset !important;
        margin-top: 0px !important;
        position: fixed;
        top: 0;
        z-index: calc(var(--mud-zindex-appbar) - 1);
    }

    .h-toolbar, .h-duo-toolbar {
        margin-bottom: unset;
    }

    #wm-layout-sm-appbar.drawer-landscape {
        width: auto;
        margin: 0px var(--margin-3);
        margin-bottom: max(var(--margin-2),env(safe-area-inset-bottom));
        left: max(0px, env(safe-area-inset-left));
        right: max(var(--appbar-landscape), env(safe-area-inset-right));
        background-color: rgba(var(--mud-palette-primary-rgb), 0.65) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 12px;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        color: #fff;
    }

    .appbar-landscape {
        width: calc(var(--appbar-landscape) + 1px);
        position: fixed;
        top: 0;
        bottom: 0;
        z-index: calc(var(--mud-zindex-appbar) - 1);
        right: 2px;
        height: 100dvh;
        padding-top: max(var(--padding-2), env(safe-area-inset-bottom)) !important;
        padding-bottom: max(var(--padding-2), env(safe-area-inset-bottom)) !important;
    }

    #wm-content > * {
        min-height: 90dvh;
    }
}