/* file: zygo.css */

:root {
    color-scheme: light;

    /* base */
    --base-0: oklch(99.5% 0 0);
    --base-1: oklch(91.87% 0.003 264.54);
    --base-2: oklch(84.61% 0.004 286.31);
    --base-3: oklch(76.89% 0.004 247.87);
    --base-4: oklch(69.17% 0.004 247.88);
    --base-5: oklch(61.01% 0.005 271.34);
    --base-6: oklch(52.79% 0.005 271.32);
    --base-7: oklch(43.87% 0.005 271.3);
    --base-8: oklch(35.02% 0.005 236.66);
    --base-9: oklch(25.11% 0.006 258.36);
    --base-10: oklch(14.30% 0.007 256.88);
    /* gray */
    --gray-1: oklch(95.57% 0.003 286.35);
    --gray-2: oklch(92.04% 0.002 197.12);
    --gray-3: oklch(88.28% 0.003 286.34);
    --gray-4: oklch(84.68% 0.002 197.12);
    --gray-5: oklch(80.73% 0.002 247.84);
    --gray-6: oklch(75.03% 0.002 247.85);
    --gray-7: oklch(69.01% 0.003 286.32);
    --gray-8: oklch(63.12% 0.004 219.55);
    --gray-9: oklch(56.82% 0.004 247.89);
    /* red */
    --red-1: oklch(88.98% 0.052 3.28);
    --red-2: oklch(78.78% 0.109 4.54);
    --red-3: oklch(69.86% 0.162 7.82);
    --red-4: oklch(62.73% 0.209 12.37);
    --red-5: oklch(58.63% 0.231 19.6);
    --red-6: oklch(54.41% 0.214 19.06);
    --red-7: oklch(49.95% 0.195 18.34);
    --red-8: oklch(45.8% 0.177 17.7);
    --red-9: oklch(41.17% 0.157 16.58);
    /* pink */
    --pink-1: oklch(95.8% 0.023 354.27);
    --pink-2: oklch(92.14% 0.046 352.31);
    --pink-3: oklch(88.9% 0.066 354.39);
    --pink-4: oklch(85.43% 0.09 354.1);
    --pink-5: oklch(82.23% 0.112 355.33);
    --pink-6: oklch(76.37% 0.101 355.37);
    --pink-7: oklch(70.23% 0.092 354.96);
    --pink-8: oklch(64.11% 0.084 353.91);
    --pink-9: oklch(57.68% 0.074 353.14);
    /* purple */
    --purple-1: oklch(89.1% 0.046 305.24);
    --purple-2: oklch(78.68% 0.091 305);
    --purple-3: oklch(68.5% 0.136 303.78);
    --purple-4: oklch(58.47% 0.181 302.06);
    --purple-5: oklch(49.39% 0.215 298.31);
    --purple-6: oklch(46.11% 0.198 298.4);
    --purple-7: oklch(42.77% 0.181 298.49);
    --purple-8: oklch(39.46% 0.164 298.29);
    --purple-9: oklch(36.01% 0.145 298.35);
    /* blue */
    --blue-1: oklch(89.66% 0.046 260.67);
    --blue-2: oklch(80.17% 0.091 258.88);
    --blue-3: oklch(70.94% 0.136 258.06);
    --blue-4: oklch(62.39% 0.181 258.33);
    --blue-5: oklch(54.87% 0.222 260.33);
    --blue-6: oklch(51.15% 0.204 260.17);
    --blue-7: oklch(47.36% 0.185 259.89);
    --blue-8: oklch(43.48% 0.17 260.2);
    --blue-9: oklch(39.53% 0.15 259.87);
    /* green */
    --green-1: oklch(93.96% 0.05 148.74);
    --green-2: oklch(88.77% 0.096 147.71);
    --green-3: oklch(83.74% 0.139 146.57);
    --green-4: oklch(79.33% 0.179 145.62);
    --green-5: oklch(75.23% 0.209 144.64);
    --green-6: oklch(70.03% 0.194 144.71);
    --green-7: oklch(64.24% 0.175 144.92);
    --green-8: oklch(58.83% 0.158 145.05);
    --green-9: oklch(52.77% 0.138 145.41);
    /* yellow */
    --yellow-1: oklch(97.05% 0.039 91.2);
    --yellow-2: oklch(95% 0.07 92.39);
    --yellow-3: oklch(92.76% 0.098 92.58);
    --yellow-4: oklch(90.92% 0.125 92.56);
    --yellow-5: oklch(89% 0.146 91.5);
    --yellow-6: oklch(82.39% 0.133 91.5);
    --yellow-7: oklch(75.84% 0.122 92.21);
    --yellow-8: oklch(69.14% 0.109 91.04);
    --yellow-9: oklch(62.29% 0.097 91.9);
    /* orange */
    --orange-1: oklch(93.83% 0.037 56.93);
    --orange-2: oklch(88.37% 0.07258208750520016 55.80328658240742);
    --orange-3: oklch(83.56% 0.10753627570574478 56.492594564236946);
    --orange-4: oklch(78.75% 0.14163582809066333 54.32911089172009);
    --orange-5: oklch(74.61% 0.171 51.56);
    --orange-6: oklch(69.33% 0.157 52.18);
    --orange-7: oklch(63.8% 0.142 52.1);
    --orange-8: oklch(58.28% 0.128 52.2);
    --orange-9: oklch(52.49% 0.113 51.98);

    /* Basic overrideable configuration */

    --font-family: "Noto Sans";
    --font-size: 1rem;
    --font-size-small: 0.9rem;
    --font-size-smaller: 0.8rem;
    --line-height: 1.6;
    --letter-spacing: 0.3px;

    --border-width: 2px;
    --border-radius: 3px;

    --bg-1: var(--base-1);
    --bg-2: var(--base-2);
    --bg-3: var(--base-3);

    --fg-1: var(--base-9);
    --fg-2: var(--base-8);
    --fg-3: var(--base-7);

    --primary-bg: var(--blue-6);
    --primary-bg-hover: var(--blue-8);
    --primary-fg: var(--base-0);

    --secondary-bg: var(--red-4);
    --secondary-bg-hover: var(--red-8);
    --secondary-fg: var(--base-9);


    --info: var(--blue-4);
    --info-inv: var(--base-0);
    --success: var(--green-4);
    --success-inv: var(--green-0);
    --warning: var(--yellow-4);
    --warning-inv: var(--yellow-0);
    --error: var(--red-4);
    --error-inv: var(--red-0);

}

body.dark {
    color-scheme: dark;

    /* override for dark theme is needed */

    --bg-1: var(--base-9);
    --bg-2: var(--base-8);
    --bg-3: var(--base-7);

    --fg-1: var(--base-1);
    --fg-2: var(--base-2);
    --fg-3: var(--base-3);

}

@media (prefers-color-scheme: dark) {
    /* Use media query for further override */
}


/* MINIMAL RESET */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
}


/* BODY */

body {
    background-color: var(--bg-1);
    color: var(--fg-1);
    font-family: var(--font-family);
    font-size: var(--font-size);
    margin:0;
}


/* TYPOGRAPHY */

h1, h2 {
    color: var(--fg-3);
    text-transform: uppercase;
    word-spacing: 0.2em;
    font-family: var(--font-family);
    margin-bottom: var(--spacing-4);
    width:100%;
}
h2 {
    margin-bottom: var(--spacing-2);
}

p {
    font-size: var(--font-size);
    line-height: var(--line-height);
    letter-spacing: var(--letter-spacing);
    display: inline-block;
    margin-top: 0;
    width:100%;
}
p + p, p + ul, ul + p {
    margin-top:  var(--spacing-2);
}
p + h1, p + h2 {
    margin-top:  var(--spacing-4);
}

a {
    color:inherit;
}
a:hover {
    color:var(--primary-bg);
}
a.no {
    text-decoration: none;
}

mark {
    background-color: var(--primary-bg);
    color:var(--primary-fg);
    padding:0 var(--spacing-2);
}


.normal {
    font-size: var(--font-size);
}

.small {
    font-size: var(--font-size-small);
}

.smaller {
    font-size: var(--font-size-smaller);
}

.bld {
    font-weight: bold;
}

/* SECTION */

section, .section {
    padding: 0 0;
    display:flex;
    flex-direction: column;
    align-items: center;

    &>* {
        max-width:80%;
        width:80%;
    }
}


/* BUTTON */

.btn {
    display: inline-flex;
    width:fit-content;
    padding:var(--spacing-2) var(--spacing-4);
    text-align: center;
    font-size: var(--font-size);
    background-color: var(--bg);
    color: var(--fg);
    border:none;
    text-decoration: none;
}

.primary {
    background-color: var(--primary-bg);
    color: var(--primary-fg)
}
.primary:hover {
    background-color: var(--primary-bg-hover);
    color: var(--primary-fg)
}

.secondary {
    background-color: var(--secondary-bg);
    color: var(--secondary-fg)
}
.secondary:hover {
    background-color: var(--secondary-bg-hover);
    color: var(--secondary-fg)
}


/* CARD */

.card {
    background-color: var(--bg-2);
    border-radius: var(--border-radius);
    padding-top:var(--spacing-4);
    padding-bottom:var(--spacing-4);
    width:100%;
}
.card>* {
    margin:var(--spacing-4);
}

.card .image {
    max-height:600px;
    overflow:hidden;
    margin:0;
}

/* FORM */

form {
    width:100%;
}

fieldset {
    margin:0;
    padding:0;
    border:none;
}

legend {
    font-size: calc(var(--font-size) * 1.2);
    text-transform: uppercase;
}

label {
    display: block;
    xwidth:100%;
    margin: var(--spacing-4) 0 var(--spacing-2) 0;
    padding-top:var(--spacing-2);
    font-size: var(--font-size-smaller);
    text-transform: uppercase;
    font-size:smaller;
    color: var(--fg-2);
}

input {
    display:block;
}

input[type="file"] {
    display:block;
    xwidth:100%;
    padding:8px 8px;
    border:2px solid var(--primary-bg);
    background-color: var(--bg-3);
}


input[type="checkbox"], input[type="radio"] {
    width:1rem;
    height:1rem;
    display: inline;
    /* accent-color: var(--secondary); */
}

input[type="text"], input[type="email"], input[type="password"], textarea, select {
    width:100%;
    padding:8px 8px;
    border:2px solid var(--primary-bg);
    /* background-color: var(--bg-3); */
}
input:focus {
    border:2px solid var(--secondary-bg);
    box-shadow: none;
    outline: none;
}

sup {
    color:var(--fg-3);
}


/* list */

ul {
    list-style-type:square;
    padding-left:20px;
    font-size: var(--font-size-small);
}


/* NAV */

nav {

    display:flex;
    align-content: center;
    justify-content: space-between;
    width:100%;
    background-color: var(--nav-background-color);

    &>* {
        display: flex;
    }

    a {
        display:flex;
        height:100%;
        align-items: center;
    }
    a:hover {
        /* background-color: var(--neutral-darker); */
    }


    ul {
        display: flex;
        flex-direction: row;
        margin:0;
        padding:0;
        list-style-type:none;
        font-size: var(--font-size);

        li {
            /* align-items: center;
            display: flex; */
            margin:0 10px 0 0;
            padding:0;


            a {
                padding:var(--spacing-2);
                text-decoration: none;
                color: var(--nav-link-color);
            }

            .submenu{
                display: flex;
                flex-direction: column;
                position:absolute;
                width:200px;
                /* top:0px; */
                /* left:50%; */
                /* margin-left:-100px; */
                /* transform:skewX(-25deg); */
                /* transform-origin:left top; */
              }
              .submenu li{
                /* background-color: var(--neutral-dark); */
                position:relative;
                /* overflow:hidden; */
              }
              /* .submenu > li > a {
                padding: 1em 2em;
              } */
              /* .submenu > li::after {
                content: '';
                position: absolute;
                top: -125%;
                height: 100%;
                width: 100%;
                box-shadow: 0 0 50px rgba(0, 0, 0, .9);
              } */

              .submenu,.submenu li{
                opacity:0;
                visibility: hidden;
              }
              .submenu li{
                transition:all 0.2s ease-out;
              }
              &:hover .submenu,
              &:hover .submenu li{
                opacity:1;
                visibility:visible;
              }


        }

    }
}


/* Badge */

.badge {
    display: inline;
    border-radius: var(--border-radius);
    padding:calc(var(--spacing-2) * 0.5) calc(var(--spacing-2) * 0.7);
    text-transform: uppercase;
    font-size:var(--font-size-smaller);
}


/* */


/* */
/* */


/* */

/* MESSAGE */

div.message {
    padding:var(--spacing-4);
    border-radius: var(--border-radius);
}


/* TABLE */


table {
    border-collapse: collapse;
    border-spacing: 0;
    width:100%;
    thead {
        background-color: var(--bg-3);
    }
    tbody {
        background-color: var(--bg-2);
    }
    tr {
        border-bottom: 1px solid var(--bg-3);
        th {
            text-align: left;
            font-family: var(--font-family);
        }
        th, td {
            padding:10px;
        }
        td {
            font-size: var(--font-size-small);
        }
    }
}



/* title */

div.title {
    font-size:30px;
    padding:30px;
}
div.title a {
    text-decoration: none;
    color: var(--text-muted);
    font-family: var(--font-family);
}


/* action-list */

.action-bar {
    display:flex;
    width:fit-content;
    height:fit-content;
    gap: 1em;
}
.action-bar>* {
    background-color: var(--bg-2);
    display:block;
    padding:0.5em;
    border-radius: var(--border-radius);
    border:1px solid var(--bg-3);
}


.action-list {
    display:flex;
    width:fit-content;

}


/* v-sidebar */

v-tab {
    width:100%;
}

v-tab-item {
}

v-sidebar .sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
}

v-sidebar .sidebar nav {
    display: block;
}

v-sidebar .sidebar nav a {
    font-family: var(--font-family);
    color: var(--text-dark);
    display:block;
    padding: 8px 3px 8px 20px;
    text-decoration: none;
    font-weight: lighter;
    border-left:5px solid transparent;
}

v-sidebar .sidebar nav a:hover {
    background-color: var(--background-dark);
    border-left:5px solid var(--primary-bg);
}




/* column */
img {
    display: block;
    width:100%;
    height:auto;
}


.columns {
    display: grid;
}

@media (min-width: 35em) {
    .columns {
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
    }
}





/* COLOR UTILITIES */

.bg-1 { background-color: var(--bg-1); }
.bg-2 { background-color: var(--bg-2); }
.bg-3 { background-color: var(--bg-3); }

.fg-1 { background-color: var(--fg-1); }
.fg-2 { background-color: var(--fg-2); }
.fg-3 { background-color: var(--fg-3); }

.fg-primary {    color: var(--primary-fg);   }
.bg-primary {    background-color: var(--primary-bg);   }

.fg-secondary {    color: var(--secondary-fg);   }
.bg-secondary {    background-color: var(--secondary-bg);   }

.fg-info {    color: var(--info-inv);   }
.bg-info {    background-color: var(--info);   }

.fg-success {    color: var(--success-inv);   }
.bg-success {    background-color: var(--success);   }
.bo-success {    border:2px solid var(--success);   }

.fg-warning {    color: var(--warning-inv);   }
.bg-warning {    background-color: var(--warning);   }
.bo-warning {    border:2px solid var(--warning);   }

.fg-error {    color: var(--error-inv);   }
.bg-error {    background-color: var(--error);   }

/* PADDING */

/* see js */

/* FLEX UTILS */

.flex { display: flex; }

.fit { width:fit-content; height:fit-content; }
.w-fit { width:fit-content; }
.h-fit { height:fit-content; }

.justify-end { justify-content: end; }
.justify-center { justify-content: center; }
.justify-start { justify-content: start; }

.items-end { align-items: end; }
.items-center { align-items: center; }
.items-stretch { align-items: stretch; }

.border-0 { border: none; }
.border-1 { border-width: 1px; }
.border-2 { border-width: 2px; }

/* OTHER UTILITIES */

.round {
    border-radius: var(--border-radius);
}


/* DETAILS */

details {
    background-color: var(--bg-2);
    border-radius: var(--border-radius);
}

details[open] summary {border-radius: 5px 5px 0 0;}

summary {
    border-radius: var(--border-radius);
    background-color: var(--primary-bg);
    color: white;
    padding: 10px;
  }