/* Mowze is a dark mode site. Unless otherwise needed, text is white, background is dark. Underlines are green. */
* {
    box-sizing: border-box;
}

:root {
    touch-action: pan-x pan-y;
    height: 100%;
    color-scheme: dark;
    text-rendering: optimizeLegibility;
    --toastContainerRight: auto;
    --toastContainerLeft: 1rem;
    --toastContainerTop: calc(1rem + 58px);
    --mowzeGreen: #00a94f;
}

html, body {
    position: relative;
    overflow: hidden;
    touch-action: pan-x pan-y;
    height: 100vh;
    width: 100vw;
    padding: 0;
    margin: 0;
}


body {
    background: #343434;
    color: whitesmoke;
    font-family: "Helvetica Neue", sans-serif;
    font-weight: 400;
    overflow: hidden;
}

a {
    color: rgb(72 163 255);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:visited {
    color: rgb(0, 100, 200);
}

label {
    display: block;
}

summary {
    cursor: pointer;
    margin-bottom: 0.5em;
}

input, button, select, textarea {
    font-family: inherit;
    font-size: inherit;
    padding: 0.4em;
    border: none;
    /*noinspection CssInvalidFunction*/
    color: light-dark(black, whitesmoke);
    /*noinspection CssInvalidFunction*/
    background: light-dark(#cecece, #4b4b4b);
}

::placeholder {
    /*noinspection CssInvalidFunction*/
    color: light-dark(#4b4b4b, #cecece);
}

h1, h2, h3 {
    font-weight: 200;
}

/*noinspection CssInvalidFunction*/
kbd {
    background-color: light-dark(#f7f7f7, #898b90);
    color: light-dark(#222325, #222325);
    box-shadow: 0 2px 0 1px light-dark(#cbcccd, #3d3e42);
    border: 1px solid light-dark(#cbcccd, #3d3e42);
    border-radius: 0.25rem;
    cursor: default;
    font-family: sans-serif;
    font-size: 0.75em;
    line-height: 1;
    min-width: 0.75rem;
    display: inline-block;
    text-align: center;
    padding: 2px 5px;
    position: relative;
    top: -1px;
}

input[type="file"] {
    background: unset;
}

input[type="button"], button {
    cursor: pointer;
}

input[type="button"]:disabled, button:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Track */
input[type="checkbox"][role="switch"] {
    appearance: none;
    min-width: 2.25em;
    width: 2.25em;
    height: 1.25em;
    padding: 0;
    border: 1px solid #ced4da;
    border-radius: 1.25em;
    background: #e9ecef;
    cursor: pointer;
    transition: background .1s ease-in-out, border-color .1s ease-in-out;
}

/* Thumb */
input[type="checkbox"][role="switch"]::before {
    content: '';
    display: block;
    aspect-ratio: 1;
    height: 100%;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 2px rgba(0, 0, 0, .2);
    transition: margin .1s ease-in-out;
}

/* Checked state */
input[type="checkbox"][role="switch"]:checked {
    background: var(--mowzeGreen);
    border-color: var(--mowzeGreen);
}

input[type="checkbox"][role="switch"]:checked::before {
    margin-left: calc(2.25em - 1.25em); /* slide thumb to right */
}

/* Focus ring */
input[type="checkbox"][role="switch"]:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--mowzeGreen) 25%, transparent);
}

/* Disabled */
input[type="checkbox"][role="switch"][disabled] {
    opacity: .5;
    cursor: not-allowed;
}

input[type="range"] {
    accent-color: var(--mowzeGreen);
}

table {
    width: 100%;
    /*font-weight: lighter;*/
}

/* All our scrollbars should look consistent */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #666;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

.flex-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.flex {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* --- 1. Strip the default browser styling --- */
details summary {
    list-style: none;
    display: flex;
    align-items: center;
    cursor: pointer;
}

/* Removes the triangle in Safari / older WebKit browsers */
details summary::-webkit-details-marker {
    display: none;
}

/* --- 2. Inject the Material SVG via CSS Mask --- */
details summary::before {
    content: "";
    width: 1.2em;
    height: 1.2em;

    background-color: currentColor;

    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z'/%3E%3C/svg%3E") no-repeat center / contain;

    transition: transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
    transform: rotate(-90deg);
}

details[open] summary::before {
    transform: rotate(0deg);
}

.primary {
    padding: 10px;
    border-radius: 10px;
    font-size: 30px;
    background: var(--mowzeGreen);
    color: white;
    flex: 1;
}


.full_button {
    background: #4b4b4b;
    color: white;
    border: 5px solid #4b4b4b;
    padding: 5px;
    border-radius: 20px;
    cursor: pointer;
    width: 100%;
    /*aspect-ratio: 1;*/
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}