/* Import Assets */
@import './modal/modal.css';

/* * * * * * * * * * * *\
 *     To-Do List      *
 *                     *
 *  By: Dean Wagner    *
 * info@deanwagner.net *
 *                     *
 *   Assignment for:   *
 *  The Odin Project   *
 * theodinproject.com  *
\* * * * * * * * * * * */

:root {
    /* Default/Light Colors */
    --color-accent : #009999;
    --color-notice : #990000;
    --color-shadow : #080808;
    --color-bg     : #fafafa;
    --color-item   : #dddddd;
    --color-text   : #666666;
    --color-title  : #333333;

    /* Default/Light Shadows/Glow */
    --shadow-body   : 0 0 1em rgba(0,0,0,0.3);
    --shadow-text   : 0.05rem 0.05rem 0.1rem rgba(0,0,0,0.3);
    --shadow-title  : 0.1rem 0.1rem 0.2rem rgba(0,0,0,0.3);
    --shadow-link   : 0.05rem 0.05rem 0.1rem rgba(0,0,0,0.3);
    --shadow-box    : 0 0 0.3rem rgba(0,0,0,0.3);
    --shadow-base   : 0.3rem 0.3rem 0;
    --glow-text     : 0 0 0.1rem var(--color-title);
    --glow-box      : 0 0 0.5rem var(--color-title);
    --glow-base     : 0.3rem 0.3rem 0;
    /*
    --shadow-box    : 0 0 0.3rem rgba(0,0,0,0.3), 0.3rem 0.3rem 0 var(--color-accent);
    --shadow-notice : 0 0 0.3rem rgba(0,0,0,0.3), 0.3rem 0.3rem 0 var(--color-notice);

    --glow-box      : 0 0 0.5rem var(--color-title), 0.3rem 0.3rem 0 var(--color-title);
    --glow-notice   : 0 0 0.5rem var(--color-notice), 0.3rem 0.3rem 0 var(--color-notice);
    */

    /* Light Color Scheme */
    color-scheme : light;

    /* Dark Colors */
    --dark-color-accent : #00ffff;
    --dark-color-notice : #ff0000;
    --dark-color-shadow : #080808;
    --dark-color-bg     : #333333;
    --dark-color-item   : #666666;
    --dark-color-text   : #cccccc;
    --dark-color-title  : #fafafa;

    /* Dark Shadows/Glow */
    --dark-shadow-body   : 0 0 1.5em rgba(0,0,0,0.8);
    --dark-shadow-text   : 0.05rem 0.05rem 0.2rem var(--dark-color-shadow);
    --dark-shadow-title  : 0.15rem 0.15rem 0.05rem var(--dark-color-shadow);
    --dark-shadow-link   : 0.1rem 0.1rem 0.1rem var(--dark-color-shadow);
    --dark-shadow-box    : 0 0 0.5rem rgba(0,0,0,0.8);
    --dark-shadow-base   : 0.3rem 0.3rem 0;
    --dark-glow-text     : 0 0 0.2rem var(--dark-color-title);
    --dark-glow-box      : 0 0 0.8rem var(--dark-color-title);
    --dark-glow-base     : 0.3rem 0.3rem 0;
    /*
    --dark-shadow-box    : 0 0 0.5rem rgba(0,0,0,0.8), 0.3rem 0.3rem 0 var(--color-accent);
    --dark-shadow-notice : 0 0 0.5rem rgba(0,0,0,0.8), 0.3rem 0.3rem 0 var(--color-notice);

    --dark-glow-box      : 0 0 0.8rem var(--color-title), 0.3rem 0.3rem 0 var(--color-title);
    --dark-glow-notice   : 0 0 0.8rem var(--color-notice), 0.3rem 0.3rem 0 var(--color-notice);
    */

    /* Dark Color Scheme */
    --dark-color-scheme : dark;

    /* Borders */
    --border-solid  : 1px solid var(--color-title);
    --outline-solid : 2px solid var(--color-accent);
    --border-notice : 1px solid var(--color-notice);

    /* Font Families */
    --font-base  : Tahoma, Verdana, Geneva, sans-serif;
    --font-input : 'Courier New', Courier, monospace;

    /* Transitions */
    --transition-all   : none;
    --transition-stop  : none;
    --transition-start : all 0.2s ease-out;

    /* Gradients */
    --gradient-light : linear-gradient(to bottom right, rgba(255,255,255,0.5), rgba(0,0,0,0.1));
    --gradient-split : linear-gradient(to bottom right, rgba(255,255,255,0.2), rgba(0,0,0,0.2));
    --gradient-dark  : linear-gradient(to bottom right, rgba(255,255,255,0.1), rgba(0,0,0,0.4));

    /* Media Query Flags */
    --dark-mode   : 0;
    --mobile-view : 0;
}

* {
    box-sizing: border-box;
    cursor: default;
    accent-color: var(--color-accent);
}

/* * * * * * * * *\
 * Element Base  *
\* * * * * * * * */

html {
    margin: 0;
    padding: 0;
}

body {
    align-items: flex-start;
    background-color: var(--color-bg);
    box-shadow: inset var(--shadow-body);
    color: var(--color-text);
    display: flex;
    font-family: var(--font-base);
    font-size: 12pt;
    justify-content: flex-start;
    margin: 0;
    min-height: 100vh;
    padding: 0;
    position: relative;
    text-shadow: var(--shadow-text);
}

a, a * {
    cursor: pointer;
    transition: var(--transition-all);
}

a, a:link, a:visited {
    color: var(--color-accent);
    text-decoration: none;
    text-shadow: var(--shadow-link);
}

a:hover, a:focus, a:active {
    color: var(--color-title);
    text-decoration: underline;
    text-shadow: var(--glow-text);
}

a svg {
    filter: drop-shadow(var(--shadow-link));
    transition: var(--transition-all);
}

a svg * {
    fill: var(--color-accent);
    transition: var(--transition-all);
}

a:hover svg,
a:focus svg,
a:active svg {
    filter: drop-shadow(var(--glow-text));
    transform: scale(1.3);
}

a:hover svg *,
a:focus svg *,
a:active svg * {
    fill: var(--color-title);
}

/* * * * * * * * *\
 *     Forms     *
\* * * * * * * * */

input[type='checkbox'],
button, select, option {
    cursor: pointer;
}

input[type='text'],
input[type='number'],
input[type='date'],
input[type='datetime-local'] {
    cursor: text;
}

input[type='text'],
input[type='number'],
input[type='date'],
input[type='datetime-local'],
select {
    background-color: var(--color-text);
    border: var(--border-solid);
    border-radius: 0.3em;
    box-shadow: inset var(--shadow-text);
    color: var(--color-bg);
    font-family: 'Courier New', Courier, monospace;
    padding: 0.3em;
}

input[type='text']:focus,
input[type='number']:focus,
input[type='date']:focus,
input[type='datetime-local']:focus,
select:focus {
    outline: var(--outline-solid);
}

select option {
    margin: 0.5em;
    padding: 0.5em;
}

input[type='color'] {
    background-color: var(--color-text);
    border: var(--border-solid);
    border-radius: 0.5em;
    box-shadow: var(--shadow-text);
    cursor: pointer;
    padding: 0;
}

input[type='color']:hover {
    background-color: var(--color-title);
    box-shadow: var(--shadow-link);
}

button {
    background-color: var(--color-text);
    border: var(--border-solid);
    border-radius: 0.3em;
    box-shadow: var(--shadow-text);
    color: var(--color-bg);
    padding: 0.5em;
    transition: var(--transition-all);
}

button:hover,
button:focus,
button:active {
    background-color: var(--color-title);
    box-shadow: var(--glow-text);
}

/* * * * * * * * *\
 *     Aside     *
\* * * * * * * * */

aside {
    background: var(--color-item) var(--gradient-split);
    box-shadow: var(--shadow-body), 0.3rem 0 0 var(--color-accent);
    display: flex;
    flex-direction: column;
    left: 0;
    min-height: 100vh;
    padding: 1em;
    position: fixed;
    top: 0;
    transition: width 0.1s ease-out;
    width: 16em;
}

aside h1, header h2 {
    color: var(--color-title);
    margin: 0;
    font-family: var(--font-input);
    font-size: 3em;
    font-weight: normal;
    letter-spacing: 0.2rem;
    text-shadow: var(--shadow-title);
}

aside h1, aside h1 * {
    cursor: pointer;
    transition: var(--transition-all);
}

aside h1:hover {
    text-shadow: var(--glow-text);
}

aside h1:hover svg {
    filter: drop-shadow(var(--glow-text));
}

aside h1 svg {
    filter: drop-shadow(var(--shadow-title));
    height: 1em;
    transition: all 0.1s ease-out;
    vertical-align: top;
    width: 1em;
}

aside h1 svg path {
    fill: var(--color-title);
}

/* * * * * * * * *\
 *  Navigation   *
\* * * * * * * * */

nav {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 0 1em;
    height: 100%;
}

nav #empty_space {
    flex: 1;
}

nav a,
nav a:link,
nav a:visited {
    display: block;
    font-size: 1.2em;
    padding: 1em 0 0;
}

nav a:hover,
nav a:focus,
nav a:active {
    text-decoration: none;
    transform: scale(1.2);
}

nav a svg {
    margin-right: 0.5rem;
    height: 1.2em;
    vertical-align: bottom;
    width: 1.2em;
}

nav a:hover svg,
nav a:focus svg,
nav a:active svg {
    margin-left: 0.5rem;
    transform: scale(1);
}

nav a.disable, nav a.disable:link,
nav a.disable:visited, nav a.disable:hover,
nav a.disable:focus, nav a.disable:active {
    color: var(--color-text);
    cursor: default;
    text-shadow: none;
    transform: none;
}

nav a.disable svg, nav a.disable:link svg,
nav a.disable:visited svg, nav a.disable:hover svg,
nav a.disable:focus svg, nav a.disable:active svg {
    cursor: default;
    filter: none;
    margin-left: 0;
}

nav a.disable svg path, nav a.disable:link svg path,
nav a.disable:visited svg path, nav a.disable:hover svg path,
nav a.disable:focus svg path, nav a.disable:active svg path {
    cursor: default;
    fill: var(--color-text);
}

nav a.disable span, nav a.disable:link span,
nav a.disable:visited span, nav a.disable:hover span,
nav a.disable:focus span, nav a.disable:active span {
    cursor: default;
}

#nav_projects_list .bubble {
    background-color: var(--color-accent);
    border-radius: 0.6rem;
    box-shadow: var(--shadow-link);
    color: var(--color-bg);
    display: inline-block;
    font-size: 0.8rem;
    height: 1.2rem;
    margin-right: 0.5rem;
    padding: 0.1em 0;
    text-align: center;
    text-shadow: none;
    vertical-align: bottom;
    width: 1.2rem;
}

#nav_projects_list a:hover .bubble,
#nav_projects_list a:focus .bubble,
#nav_projects_list a:active .bubble {
    background-color: var(--color-title);
    box-shadow: var(--glow-text);
    color: var(--color-item);
    margin-left: 0.5rem;
    text-shadow: 0 0 0.1rem var(--color-item);
}

#nav_projects_list a.disable .bubble,
#nav_projects_list a.disable:link .bubble,
#nav_projects_list a.disable:visited .bubble,
#nav_projects_list a.disable:hover .bubble,
#nav_projects_list a.disable:focus .bubble,
#nav_projects_list a.disable:active .bubble {
    background-color: var(--color-text);
    box-shadow: none;
    color: var(--color-item);
    margin-left: 0;
    text-shadow: none;
}

/* * * * * * * * *\
 * Collapsed Nav *
\* * * * * * * * */

.collapsed aside {
    padding: 1em 0;
    text-align: center;
    width: 3.5em;
}

aside span.label {
    position: static;
    transition-delay: 0.1s;
    transition-duration: 0.2s;
    transition-property: visibility;
    transition-timing-function: ease-out;
    visibility: visible;
    white-space: nowrap;
}

.collapsed aside nav > a:first-child {
    padding-top: 0;
}

.collapsed aside span.label {
    position: absolute;
    transition-delay: 0s;
    transition-duration: 0s;
    visibility: hidden;
}

.collapsed aside a:hover span.label,
.collapsed aside a:focus span.label {
    background-color: var(--color-item);
    box-shadow: var(--shadow-text);
    margin: -0.3em 0 0 0.2em;
    padding: 0.5em 0.8em;
    visibility: visible;
}

.collapsed aside a.disable:hover span.label,
.collapsed aside a.disable:focus span.label {
    visibility: hidden;
}

.collapsed aside h1 svg {
    height: 1.5rem;
    width: 1.5rem;
}

.collapsed aside nav {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 0;
    height: 100%;
}

.collapsed aside nav a {
    text-align: center;
}

.collapsed aside nav a svg,
.collapsed #nav_projects_list .bubble {
    height: 1.5em;
    margin: 0.2em 0;
    width: 1.5em;
}

.collapsed #nav_projects_list a:hover .bubble,
.collapsed #nav_projects_list a:focus .bubble {
    margin-left: 0;
}

.collapsed aside nav #empty_space {
    flex: 0;
    margin-top: 1em;
}

.collapsed section {
    margin-left: 3.5em;
}

/* * * * * * * * *\
 *    Section    *
\* * * * * * * * */

section {
    align-items: flex-start;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 100vh;
    padding: 1em 2em;
    margin-left: 16em;
    transition: margin 0.1s ease-out;
}

/* * * * * * * * *\
 *    Header     *
\* * * * * * * * */

header {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

/* * * * * * * * *\
 *  GitHub Icon  *
\* * * * * * * * */

.github-icon {
    height: 2.3em;
    width: 2.3em;
}

.github-link:hover .github-icon,
.github-link:focus .github-icon,
.github-link:active .github-icon {
    transform: rotate(360deg) scale(1.5);
}

/* * * * * * * * *\
 *     Main      *
\* * * * * * * * */

main {
    flex: 1;
    width: 100%;
}

main table {
    border: none;
    border-collapse: separate;
    border-spacing: 0 2.5em;
    width: 100%;
}

main table tr {
    background: var(--color-item) var(--gradient-split);
    box-shadow: var(--shadow-box), var(--shadow-base) var(--color-accent);
    transition: var(--transition-all);
}

main table tr td,
main table tr th {
    padding: 1em 0;
    text-align: right;
}

main table tr td:first-child,
main table tr th:first-child {
    padding-left: 1em;
    text-align: left;
}

main table tr td:nth-child(2),
main table tr th:nth-child(2),
main table tr td:nth-child(3),
main table tr th:nth-child(3) {
    text-align: left;
}

main table tr td:last-child,
main table tr th:last-child {
    padding-right: 1em;
    white-space: nowrap;
}

main table thead th {
    font-weight: normal;
}

main table thead svg {
    height: 2.5rem;
    margin: -1rem 0;
    width: 2.5rem;
}

main thead th .asc::after {
    content: '▾'; /* ▼ ↓ ⇓ ↧ */
    height: 1em;
    margin-right: 0;
    width: 1em;
}

main thead th .dec::after {
    content: '▴'; /* ▲ ↑ ⇑ ↥ */
    height: 1em;
    margin-right: 0;
    width: 1em;
}

main table tbody tr:hover {
    box-shadow: var(--glow-box), var(--glow-base) var(--color-title);
    outline: var(--border-solid);
}

main table tr.priority {
    box-shadow: var(--shadow-box), var(--shadow-base) var(--color-notice);
}

main table tbody tr.priority:hover {
    box-shadow: var(--glow-box), var(--glow-base) var(--color-notice);
    outline: var(--border-notice);
}

main table tbody tr td {
    padding: 1.5em 0.5em;
}

main table tbody label {
    cursor: pointer;
    display: block;
    font-size: 1.2em;
    font-weight: bold;
}

main table tbody input[type='checkbox'] {
    box-shadow: var(--shadow-text);
    cursor: pointer;
    height: 1.5rem;
    width: 1.5rem;
}

main table tbody .incomplete {
    background:  var(--color-item) var(--gradient-light);
    color: var(--color-title);
}

main table tbody .complete {
    background: var(--color-item) var(--gradient-dark);
    text-decoration: line-through;
}

main table tbody .complete:hover {
    text-decoration: none;
}

main table tbody a {
    padding-left: 0.3rem;
}

main table tbody svg {
    height: 1.8rem;
    width: 1.8rem;
}

main tfoot tr td {
    padding: 1rem;
    text-align: center;
}

main tfoot #task_stats {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

main tfoot #task_stats span {
    color: var(--color-title);
    font-weight: bold;
    text-shadow: var(--shadow-link);
}

/* * * * * * * * *\
 *    Footer     *
\* * * * * * * * */

footer {
    display: block;
    font-size: 0.8em;
    text-align: center;
    width: 100%;
}

/* * * * * * * * *\
 *    Modals     *
\* * * * * * * * */

#modal > div {
    background-color: var(--color-item);
    box-shadow: var(--shadow-box), var(--shadow-base) var(--color-accent);
    padding: 2em;
}

#modal div h3 {
    font-size: 1.4rem;
    font-weight: normal;
    margin: 0 0 1em;
    text-align: center;
}

/* * * * * * * * *\
 *   Settings    *
\* * * * * * * * */

#modal_settings form {
    display: grid;
    grid-gap: 1em;
    grid-template-columns: 1fr 1fr;
}

#modal_settings form input[type='color'] {
    display: block;
    width: 100%;
}

/* * * * * * * * *\
 *  Edit Entry   *
\* * * * * * * * */

#modal_edit form {
    display: grid;
    grid-gap: 1em;
    grid-template-columns: 1fr 2fr;
}

#modal_edit form button {
    grid-column: 1 / span 2;
}

#modal_edit #new_add,
#modal_edit label[for='new_add'] {
    display: none;
}

/* * * * * * * * *\
 *    History    *
\* * * * * * * * */

#modal_default p {
    max-width: 40ch;
}

#modal_default p:nth-child(4) {
    font-style: italic;
    max-width: 40ch;
    text-align: center;
}

#modal_default div {
    align-items: stretch;
    display: flex;
    gap: 0.5em;
    justify-content: stretch;
}

#modal_default button {
    flex: 1;
    padding: 0.5em 2em;
    white-space: nowrap;
}

/* * * * * * * * *\
 * Media Queries *
\* * * * * * * * */

@media screen and (max-width: 1200px) {
    :root { --mobile-view: 1; }
    body { font-size: 10pt; }
}

@media screen and (orientation: portrait) {
    :root { --mobile-view: 1; }
    body { font-size: 10pt; }
}

@media screen and (prefers-color-scheme: dark) {
    :root { --dark-mode: 1; }
}