/* --- GENERAL --- */

/* z index of  0 : selections event sink
 *             1 : desktop icons
 *             2 : selections render
 *             3+: windows
 *           999 : taskbar
 *          1010 : start menu
 *          2010 : menu bar menus
 *
 *  The reason for the huge gap for windows is bc each window has its own
 *  z-index (to properly support window ordering)
 */
:root {
    --gray: #C0C0C0;
    --inset: inset -1px -1px #0a0a0a,inset 1px 1px #dfdfdf,inset -2px -2px grey,inset 2px 2px #fff;
    --inset__inverse: inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey; 
    --icon-shadow: -1px -1px #dfdfdf, 1px 1px gray;
    --icon-shadow__active: 1px 1px #dfdfdf, -1px -1px gray;

    --control-shadow: inset 1px 0px #fff, inset 0px 1px #fff, inset 0 -1px gray, inset -1px 0px grey, -1px 0px gray, 0 -1px gray, 1px 0px #fff, 0px 1px #fff;
    
}

html {
    max-height: 100vh;
    max-width: 100vw;
    overflow: hidden;
}

body {
    background-color: #008888;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    margin: 0;

    overflow: hidden; /* disables elastic scroll on ios */

    font-family: "Pixelated MS Sans Serif";
    font-smooth: never;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    height: 100vh; /* should be overwritten by js, this is for noscript */
}

/* --- TYPOGRAPHY --- */

h1, h2, h3, h4, h5 {
    font-family: "Arial", -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}

noscript {
    color: red;
    font-weight: bold;
}
.typography h1 {
    font-size: 2rem;
    margin: 0;
    font-family: "Arial", -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif !important;
}

.typography--normaltext {
    background-color: white;
    padding: 4px;
    font-size: 12px;
    font-family: "Arial", -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif !important;
    box-shadow: var(--inset__inverse);
}

.text--highlighted {
    text-decoration: underline;
}

.typography h2 {
    font-size: 1.75rem;
    margin: 0;
}
.typography h4 {
    font-size: 1.25rem;
    margin: 0;
}

.typography p {
    line-height: 1.5;
}

.typography li {
    margin-bottom: 3px;
}

.typography {
    max-width: min(25rem, 75vw);
}

hr.hr--accent {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, red, blue);
}
hr.hr--accent2 {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, green, blue);
}

/* --- FILE MENU BARS --- */

.menu-bar__container {
    box-shadow: var(--control-shadow);
}

.menu-bar__menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    -webkit-user-select: none;
    user-select: none;
}

.menu-bar__item {
    margin: 0 2px;
    padding: 0 2px;
    cursor: pointer;
    position: relative;
}

.menu-bar__item:hover {
    box-shadow: var(--icon-shadow);
}

.menu-bar__item:active, .menu-bar__item--active {
    box-shadow: var(--icon-shadow__active);
}

.menu-bar__hr {
    border-top: 1px solid gray;
    border-bottom: 1px solid white;
}

.menu-bar__divider {
    border-left:  1px solid gray;
    border-right: 1px solid white;
    align-self: stretch;
    margin: 0px 1px;
}
.menu-bar__handle {
    align-self: stretch;
    box-shadow: inset -1px -1px #0a0a0a,inset 1px 1px #dfdfdf,inset -2px -2px grey,inset 2px 2px #fff;
    width: 2px;
    min-height: 22px;
    margin: 2px;
}

.menu-bar__spacer {
    flex-grow: 1;
}
.menu-bar__label {
    margin: 2px 4px;
}

.menu-bar__dropdown {
    flex-grow: 1;
    margin: 2px 4px;
}

.menu-bar__btn--disabled {
    color: gray;
    text-shadow: 1px 1px white;
}

.menu-bar__btn {
    align-self: stretch;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    margin: 4px 2px;
    padding: 0px 4px;
    min-width: 36px;

    cursor: pointer;
}

.menu-bar__btn:not(.menu-bar__btn--disabled):hover {
    box-shadow: var(--icon-shadow);
}
.menu-bar__btn:not(.menu-bar__btn--disabled):active {
    box-shadow: var(--icon-shadow__active);
}
.menu-bar__btn:not(.menu-bar__btn--disabled):active > * {
    transform: translate(1px, 1px);
}

.menu-bar__btn > img {
    height: 20px;
    width:  20px;
    margin: 2px;
}

.menu-bar__input {
    flex-grow: 1;
}

.menu-bar__submenu.menu-bar__submenu--active {
    opacity: 1;
    pointer-events: initial;
}

.menu-bar__submenu {
    cursor: initial;

    padding: 2px 1px;
    margin: 0;
    list-style: none;
    
    z-index: 2011;

    position: absolute;
    top: 1rem;
    left: 0px;

    box-shadow: var(--inset);
    background-color: var(--gray);
    min-width: 100px;

    opacity: 0;
    pointer-events: none;
}
.menu-bar__item--active {
    pointer-events: none;
}

.menu-bar__subitem {
    padding: 1px 2px;
    margin: 0 2px;
    cursor: pointer;
}

.menu-bar__subitem:hover {
    background-color: navy;
    color: white;
}

.menu-bar__subitem--disabled {
    cursor: initial;
    pointer-events: none;
    color: gray;
    text-shadow: 1px 1px white;
}

.menu-bar__submenu-bg {
    position: fixed;
    z-index: 2010;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;

    pointer-events: none;
    opacity: 0;
}

.menu-bar__submenu-bg--active {
    pointer-events: initial;
    opacity: 1;
}

/* --- DIALOGS --- */

.window__dialog {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.window__dialog-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 10px;
}
.window__dialog-info > p {
    flex-grow: 1;
}
.window__dialog-info > img {
    margin: 10px 10px 10px 0;
}
.window__dialog-action {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}

.window__dialog-action button {
    margin: 0 2px;
    min-width: 0px;
}


/* --- START MENU --- */

.start-menu__container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0px;

    display: none;

    z-index: 1010;
}



.start-menu {
    position: fixed;
    bottom: 26px;
    left: 0;

    background-color: var(--gray);

    min-height: 100px;
    width: 174px;

    box-shadow: var(--inset);

    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    padding: 2px;

    -webkit-user-select: none;
    user-select: none;
}
.start-menu__stripe {
    background: linear-gradient(180deg, navy, #1084d0);
    width: 21px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 1em;
}
.start-menu__stripe-text {
    transform: rotate(270deg);
    color: white;
}

.start-menu__menu {
    flex-grow: 1;
    display: flex;
    flex-direction: column-reverse;

    align-items: stretch;
    justify-content: flex-start;
}

.start-menu__menu a {
    text-decoration: none;
    color: black;
}

.start-menu__item {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 4px 6px;
    margin: 1px 0;
    cursor: pointer;
}
.start-menu__icon {
    width: 24px;
    height: 24px;
    margin-right: 1rem;
}
.start-menu__item-text {
    flex-grow: 1;
}
.start-menu__item:hover {
    background-color: navy;
    color: white;
}
.start-menu__item:last-child {
    margin-top: 0px;
}
.start-menu__item-menu-indicator {
    width: 4px;
    height: 7px;
}
.start-menu__item:hover > .start-menu__item-menu-indicator {
    filter: invert();
}
.start-menu__divider {
    border-bottom: 1px solid white;
    border-top: 1px solid gray;
    margin: 2px 2px;
}


.start-menu__item > .start-menu__submenu-container > .start-menu__submenu {
    top: -8px;
    left: 4px;
}
.start-menu__submenu-container {
    position: relative;
    width: 0;
    height: 16px;

    opacity: 0;
    pointer-events: none;

}
.start-menu__item:hover > .start-menu__submenu-container,
.start-menu__submenu-item:hover > .start-menu__submenu-container {
    opacity: 1;
    pointer-events: initial;
}

.start-menu__submenu {
    position: absolute;
    top: -4px;
    left: 0px;
    min-width: 130px;
    box-shadow: var(--inset);
    background-color: var(--gray);
    color: black;
    padding: 2px;

}
.start-menu__submenu-item {
    padding: 2px 3px 2px 4px;

    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;

    cursor: pointer;
}
.start-menu__submenu-item > .start-menu__submenu-icon {
    width: 16px;
    height: 16px;
    margin-right: 8px;
}
.start-menu__submenu-item > span {
    flex-grow: 1;
}
.start-menu__submenu-item:hover {
    color: white;
    background-color: navy;
}

/* --- SELECTIONS --- */

.selections-container {
    height: 0;
}

canvas#selections {
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;

    pointer-events: none;

    /* will be sized by js */
}

/* --- DESKTOP --- */

.desktop-container {
    flex-grow: 1;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    z-index: 1;
    touch-action: manipulation;
}

.desktop {
    height: 100%;
    padding: 10px;

    position: absolute;
    display: grid;
    grid-template-rows: repeat(auto-fill, 78px);
    grid-template-columns: repeat(auto-fill, 64px);
    grid-auto-flow: column;

    grid-column-gap: 10px;
    grid-row-gap: 10px;

    color: white;
}

.desktop-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width:  78px;
    height: 64px;
    margin: 5px;

    text-align: center;


}
.desktop-icon > img {
    width: 32px;
    height: 32px;
}
.desktop-icon > span {
    margin-top: 5px;
    border: 1px solid transparent;
}
.desktop-icon[data-active="true"] > span {
    background-color: blue;
    border: 1px dotted gray;
    color: white;
}
.desktop-icon[data-active="true"] img {
    filter: url(#blueselect);
}

.desktop-icon__shortcut {
    height: 0;
    transform: translate(-11px, -11px);
    pointer-events: none;
}

/* --- TASKBAR --- */

.task-bar {
    background-color: var(--gray);
    /*
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    */
    height: 28px;
    padding: 2px 2px 0 2px;
    /*box-shadow: inset -1px -1px #0a0a0a,inset 1px 1px #dfdfdf,inset -2px -2px grey,inset 2px 2px #fff;*/
    box-shadow: inset 0px 1px #dfdfdf, inset 0px 2px #fff;

    z-index: 999;

    width: 100vw;

    display: flex;
    flex-direction: row;
    justify-content: flex-begin;
    align-items: center;

    user-select: none;
    -webkit-user-select: none;
}

@media (max-width: 768px) {
    .task-bar__quick, .task-bar__tray {
        display: none !important;
    }
}

.task-bar__divider {
    box-shadow: inset -1px -1px #0a0a0a,inset 1px 1px #dfdfdf,inset -2px -2px grey,inset 2px 2px #fff;
    height: 22px;
    width: 2px;
    margin: 0px 2px;
}

.task-bar__quick {
    margin: 0 2px;
    cursor: pointer;
    padding: 2px;
}
.task-bar__quick:hover {
    box-shadow: -1px -1px #dfdfdf, 1px 1px gray;
}
.task-bar__quick:active {
    box-shadow: 1px 1px #dfdfdf, -1px -1px gray;
}

.task-bar__main {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.task-bar__launch {
    /*min-width: 0px !important;*/
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0 5px !important;
    margin: 2px;
    cursor: pointer;
}
.task-bar__launch > img {
    width: 16px;
    height: 16px;
}
.task-bar__launch--active {
    box-shadow: var(--inset__inverse);
    background-image: url(../img/selected_texture.png);
}
.task-bar__launch > img {
    margin-right: 4px;
}

.task-bar__tray {
    height: 22px;
    box-shadow: var(--icon-shadow__active);
    padding: 0 2px;
    margin: 0 2px;

    display: flex;
    flex-direction: row;
    align-items: center;
}
.task-bar__tray__icon {
    margin: 0 1px;
}

/* --- WINDOWING --- */

.window-host { 
    z-index: 5;
}
.window-host > .window[data-window] {
    position: fixed;
    /*
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;*/
}
.window-resize-handle {
    position: absolute;
    right: 0px;
    bottom: 0px;
    height: 16px;
    width:  16px;
    cursor: nwse-resize;
    background-color: transparent;

}
@media (max-width: 768px) {
    .window-resize-handle {
        transform: scale(2);
        transform-origin: 100% 100%;
    }
}

.window-host > .window:not([data-wm_order="0"]) > .title-bar {
    background: #85878A;
}

/* --- UTILS --- */

.layout__row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.layout__column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.layout--justify-end {
    justify-content: flex-end;
}


.util__flex-grow { flex-grow: 1; }
.util__nomargin {
    margin: 0;
}
.util__margin--horizontal {
    margin: 0 1rem;
}

/* --- SHIMS ----*/

.window > .title-bar { user-select: none; -webkit-user-select: none; }
.window > .title-bar:active { cursor: move; }
.window .title-bar-controls > button { cursor: pointer; }
.window .title-bar-controls > button:active { padding: 0; }
.window-body--nomargin { margin: 0; }
.window { position: relative; }
.window[data-window] > .window-body {height: calc(100% - 36px);}
.window[data-window] > .window-body.window-body--nomargin {height: calc(100% - 20px);}
.window[data-isresizing="true"] { user-select: none; -webkit-user-select: none;}
.window[data-wm_minimized="true"] { pointer-events: none; opacity: 0; }
.window-body--overflow-x { overflow-x: auto; }
.window-body--overflow-y { overflow-y: scroll; }
.window[data-wm_maximized="true"] {
    height: calc(100% - 36px) !important;
    width:  100% !important;
    left: 0px !important;
    top:  0px !important;
    transform: translateX(-3px)
}
.window-body--app {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}

img {
    image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
    image-rendering: -moz-crisp-edges;          /* Firefox                        */
    image-rendering:   -o-crisp-edges;          /* Opera                          */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: pixelated; /* Chrome */
    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */

}
.svg__defsonly {
    height: 0px;
}

#start-btn {
    min-width: 0px !important;
    padding: 0 2px;
    cursor: pointer;
}
#start-btn > img {
    margin-top: 1px;
}
#start-btn:active > img {
    transform: translate(1px, 1px);
}

#start-btn.start-btn--active {
    transform: translate(1px, 1px);
    box-shadow: var(--inset__inverse);
}
#start-btn.start-btn--active > img {
    border: 1px dotted black;
    margin: -1px;
}

#dummy { height: 0; width: 0; opacity: 0; }

#time {
    margin: 0 4px;
}

.window[data-_wm_id="initialwindow"] {
    left: 50px;
}
@media (min-width: 768px) {
    .window[data-_wm_id="initialwindow"] {
        left: 110px;
    }
}