@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

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

:root {
    /* ---- Color Palette ---- */
    
    /* Accent Colors */
    --color-Orage-500: oklch(0.6704 0.210788 39.9117);
    --color-Blue-200: oklch(85.9% 0.105 251.813);
    --color-Blue-500: oklch(65.3% 0.160 251.815);
    --color-Amber-300: oklch(92.9% 0.125 95.605);
    --color-Amber-500: oklch(72.9% 0.288 95.08);
    --color-Red-300: oklch(80.8% 0.114 19.571);
    --color-Red-400: oklch(65.4% 0.18 22.216);
    --color-Green-200: oklch(82.4% 0.138 147.216);
    --color-Green-500: oklch(60.4% 0.145 145.216);

    /* Neutral Colors */
    --color-Black: oklch(0% 0 0);   /* Not used */
    --color-White: oklch(99% 0.004 0);

    --color-Dark-700: oklch(28.9% 0 0);
    --color-Dark-800: oklch(18.9% 0 0);
    --color-Dark-900: oklch(08.9% 0 0);

    --color-Gray-100: oklch(96.8% 0.003 264.542);
    --color-Gray-200: oklch(92.8% 0.003 264.531);
    --color-Gray-300: oklch(85.8% 0.003 258.338);
    --color-Gray-400: oklch(80.2% 0.003 258.338); 
    --color-Gray-500: oklch(55.6% 0.00 0);
    --color-Gray-600: oklch(40.8% 0 0);

    /* ---- Colors used in the app ---- */

    --color-Accent: var(--color-Orage-500);

    --color-BG-1: var(--color-Gray-200);
    --color-BG-2: var(--color-Gray-100);
    --color-Text-1: var(--color-Dark-900);
    --color-Text-2: var(--color-Gray-500);
    
    --color-Note-BG: var(--color-White);
    --color-Note-Blue: var(--color-Blue-200);
    --color-Note-Amber: var(--color-Amber-300);
    --color-Note-Red: var(--color-Red-300);
    --color-Note-Green: var(--color-Green-200);

    --color-Ring-Blue: var(--color-Blue-500);
    --color-Ring-Amber: var(--color-Amber-500);
    --color-Ring-Red: var(--color-Red-400);
    --color-Ring-Green: var(--color-Green-500);

    --color-Sort-Filter: var(--color-White);
    --color-Sort-highlight: var(--color-Gray-100);

    --color-Border: var(--color-Gray-400);
    --color-Border-Deep: var(--color-Gray-500);
    --color-Shadow: var(--color-Gray-300);
    --color-Divider: var(--color-Gray-200);
}

.dark-mode { 
    --color-BG-1: var(--color-Dark-900);
    --color-BG-2: var(--color-Dark-800);
    --color-Text-1: var(--color-Gray-100);
    --color-Text-2: var(--color-Gray-300);

    --color-Note-BG: var(--color-Dark-700);
    --color-Note-Blue: var(--color-Blue-500);
    --color-Note-Amber: var(--color-Amber-500);
    --color-Note-Red: var(--color-Red-400);
    --color-Note-Green: var(--color-Green-500);

    --color-Ring-Blue: var(--color-Blue-200);
    --color-Ring-Amber: var(--color-Amber-300);
    --color-Ring-Red: var(--color-Red-300);
    --color-Ring-Green: var(--color-Green-200);

    --color-Sort-Filter: var(--color-Dark-700);
    --color-Sort-highlight: var(--color-Gray-600);

    --color-Border: var(--color-Gray-600);
    --color-Border-Deep: var(--color-Gray-500);
    --color-Shadow: var(--color-Dark-900);
    --color-Divider: var(--color-Dark-700);

    .theme-toggle {
        border-color: var(--color-Dark-700);
        background-color: var(--color-Dark-700);
        box-shadow: -2px -2px 4px 2px var(--color-Gray-600), 
                    2px 2px 4px 3px var(--color-Dark-900),
                    inset -2px -2px 4px var(--color-Gray-600),
                    inset 3px 3px 6px var(--color-Dark-900);
    }

    .form-btn {
        background-color: var(--color-Gray-200);
        transition: 240ms ease;

        svg { fill: var(--color-Drak-700); }

        &:hover { background-color: var(--color-Accent); }
        &:hover svg { fill: var(--color-White); }
    }

    .home-btn,
    .trash-btn,
    .delete-all-btn {
        background-color: var(--color-Gray-100);

        svg { fill: var(--color-Dark-800); }

        &:hover { background-color: var(--color-Accent); }
        &:hover svg { fill: var(--color-White); }
}
    
}

svg {
    fill: var(--color-Text-1);
}

body {
  width: 100vw;
  height: 100vh;
  font-family: "Inter", sans-serif;
}

h1 {
  font-size: 2.5em;
  line-height: 1.1;
}

h4 {
    font-weight: 600;
}

button {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: inherit;
    border: none;
}

ul {
    list-style-type: none;
}

/* ----- Custom Utility Classes ----- */

.flex { display: flex; }

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

.items-start { align-items: start; }

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

.flex-col { flex-direction: column; }

.flex-row { flex-direction: row; }

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

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

.justify-sart { justify-content: flex-start; }

.justify-around { justify-content: space-around; }

.justify-between { justify-content: space-between; }

#root {
    height: 100vh;
    width: 100vw;
    padding: 0.75rem;
    background-color: var(--color-BG-1);
    display: grid;
    grid-template-columns: 8rem 1fr;
    grid-template-areas: "sidebar main";
    gap: 0.75rem;
    color: var(--color-Text-1);
}

.sidebar {
    grid-area: sidebar;
    width: 100%;
    height: 100%;
    padding: 1rem;
    padding-block: 2rem;
    gap: 2rem;
    border-radius: 2rem;
    background-color: var(--color-BG-2);

    border: 1px solid var(--color-Divider);
}

.logo {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-Text-1);
}

.sidebar-functions {
    height: 100%;
    gap: 1rem;
    background-color: rgba(184, 184, 184, 0);
    backdrop-filter: blur(5px);
    border-radius: 2.5rem;
    padding: 0.75rem;
}

.btn-add-note,
.home-btn,
.trash-btn,
.delete-all-btn {
    width: 3.125rem;
    height: 3.125rem;
    border-radius: 50%;
    transition: 240ms ease;
}

.btn-add-note {
    background-color: var(--color-Accent);
}

.btn-add-note svg,
.home-btn svg,
.trash-btn svg,
.delete-all-btn svg {
    fill: var(--color-Gray-100);
}

.home-btn,
.trash-btn,
.delete-all-btn {
    background-color: var(--color-Dark-800);
    &:hover { background-color: var(--color-Accent); }
}

.delete-all-btn {
    margin-block-start: auto;
}

.home-btn.btn-active,
.trash-btn.btn-active  {
    background-color: var(--color-Accent);
    svg { fill: var(--color-Gray-100); }
}

.note-color-option {
    width: auto;
    height: auto;
    border-radius: 1.25rem;
    padding: 0.25rem;
    gap: 1rem;
    position: relative;
    margin-block-end: 1rem;
}

.note-color-label {
    width: 1.5625rem;
    height: 1.5625rem;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    place-content: center;
}

.note-color-label > input {
    position: relative;
    z-index: -1;
}

.note-color-label:first-child:has(input:checked) { border: 2px solid var(--color-Ring-Red); }
.note-color-label:nth-child(2):has(input:checked) { border: 2px solid var(--color-Ring-Green); }
.note-color-label:nth-child(3):has(input:checked) { border: 2px solid var(--color-Ring-Blue); }
.note-color-label:last-child:has(input:checked) { border: 2px solid var(--color-Ring-Amber); }

.color-1 { background-color: var(--color-Note-Blue); }
.color-2 { background-color: var(--color-Note-Amber); }
.color-3 { background-color: var(--color-Note-Red); }
.color-4 { background-color: var(--color-Note-Green); }

main {
    grid-area: main;
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 2rem;
    display: grid;
    grid-template-rows: repeat(2, auto);
    grid-template-areas: 
        "header"
        "notes";
    background-color: var(--color-BG-2);

    border: 1px solid var(--color-Divider);
}

header {
    grid-area: header;
    width: 100%;
    height: 14rem;
    padding-inline: 2rem;
}

.header-itmes-list {
    width: 100%;
    padding-block: 1.25rem;
}

.h-list-item-1 {
    display: flex;
    align-items: last baseline;
    gap: 0.75rem;
    padding-block: 0rem;
}

/* .global-date {
    padding-block: 0.75rem;
    padding-inline: 1.25rem;
    border-radius: 2rem;
    background-color: rgb(246, 246, 246);
    box-shadow: -2px -3px 6px 2px var(--color-White), 2px 3px 6px 2px var(--color-Gray-300);
} */

.search-container {
    width: 30vw;
    height: 2.5rem;
    position: relative;
    padding-inline: 0.75rem;
    padding-inline-start: 0.5rem;
    background-color: var(--color-BG-2);
    background-color: var(--color-Note-BG);
    border-radius: 1.25rem;
    border: 1px solid var(--color-Border);
    transition: border-color 140ms ease, box-shadow 240ms ease;
}

.search-container.active { border: 1px solid var(--color-Border-Deep); }

input[type="search"] {
    width: auto;
    flex: 1;
    height: 90%;
    padding: 0.5rem;
    border: none;
    background-color: transparent;
    font-size: 14px;
    transition: 240ms ease;
    color: var(--color-Text-1);
    caret-color: var(--color-Accent);
    &:focus {
        outline: none;
    }
}

.search-shortcut {
    font-size: 14px;
    color: #636c72;
}

.search-shortcut.hide { display: none; }

.search-shortcut svg {
    fill: #636c72;
    margin-inline-end: 0.18rem;
}

.theme-toggle {
    width: 70px;
    height: 35px;
    position: relative;
    border: 1px solid var(--color-Gray-200);
    border-radius: 25px;
    padding: 0.25rem;
    cursor: pointer;
    background-color: rgb(246, 246, 246);
    box-shadow: -2px -2px 4px 2px var(--color-White), 
                2px 2px 4px 2px var(--color-Shadow),
                inset -2px -2px 4px var(--color-White),
                inset 2px 2px 4px var(--color-Shadow); 
    overflow: hidden;
    &:focus {
        outline: none;
    }
}

.sun, 
.moon {
    width: 25px;
    height: 25px;
    transition: 320ms ease;
}

.toggle-ball {
    height: 30px;
    width: 30px;
    top: 0.25rem;
    right: 0.25rem;
    border-radius: 50%;
    position: absolute;
    background-color: var(--color-Text-1);
    transform: translateY(-8.5%) translateX(7%);
    transition: 240ms ease;
}

.toggle-ball.active {
    height: 29px;
    width: 29px;
    transform: translateY(-7.2%) translateX(-112%);
}

.tab {
    font-size: 2.25rem;
    font-weight: 400;
}

.notes-toolbar { width: 100%; }

.sort-bar {
    width: 100%;
    height: 100%;
    padding-block: 1.25rem;
    border-block-end: 1px solid var(--color-Divider);
}

.sort-list {
    height: 100%;
    width: 100%;
    gap: 1rem;
    border-radius: 1.5rem;
}

.sort-option {
    height: auto;
    width: auto;
    border-radius: 1.25rem;
    box-shadow: 2px 4px 8px var(--color-Shadow);
}

.sort-option label {
    height: auto;
    width: auto;
    position: relative;
    padding: 0.5rem 0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    border-radius: 1.25rem;
    cursor: pointer;
    background-color: var(--color-Sort-Filter);
    transition: background-color 240ms ease;

    &:hover { background-color: var(--color-Sort-highlight); }
}

.sort-option label input {
    position: absolute;
    z-index: -1;
}

.sort-option label:has(input:checked) {
    background-color: var(--color-Accent);
    color: var(--color-Gray-100);
}
.sort-option label:has(input:checked) svg { fill: var(--color-White); }

.dropdown-menu {
    width: 200px;
    position: relative;
    border-radius: 1.25rem;
}

.menu-btn {
    width: 100%;
    height: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 0.6rem;
    font-size: 1rem;
    background-color: var(--color-Sort-Filter);
    box-shadow: 2px 4px 8px var(--color-Shadow);
    transition: 240ms ease;
    color: var(--color-Text-1);

    &:hover {
        background-color: var(--color-Accent);
        color: var(--color-White);
    }
    &:hover svg {
        fill: var(--color-White);
    }
}

.menu-btn svg {
    transform: translateY(1px);
    transition: 240ms ease;
}

.menu-btn span { gap: 0.25rem; }

.menu-btn.active .chevron { transform: rotate(180deg); }

.options-list {
    top: 120%;
    left: 0px;
    width: 100%;
    height: 0rem;
    border-radius: 0.6rem;
    position: absolute;
    background-color: var(--color-Sort-Filter);
    box-shadow: 2px 4px 8px var(--color-Shadow);
    display: none;
    overflow: hidden;
    transition: 200ms ease;
    will-change: height;
    z-index: 1;
}

.options-list.active {
    height: auto;
    display: grid;
    grid-template-rows: repeat(4, auto);
}

.dropdown-option {
    width: 100%;
}

.option-label {
    width: 100%;
    height: 100%;
    padding: 0.75rem;
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    z-index: 1;
    &:hover { background-color: var(--color-Sort-highlight); }
}

.label-first { border-radius: 0.6rem 0.6rem 0rem 0rem; }
.label-last { border-radius: 0rem 0rem 0.6rem 0.6rem; }

.option-label:has(input:checked) { 
    background-color: var(--color-Accent); 
    color: var(--color-White);
}

.sort-opt-input {
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: -1;
    opacity: 0;
}

.notes-area {
    grid-area: notes;
    height: calc(100vh - 14rem - 1.5rem);
    width: 100%;
    padding: 1.25rem 2rem 1.25rem 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, calc((100% - 5rem) / 5)));
    grid-auto-rows: calc((100% - 1.5rem) / 2);
    gap: 1.25rem;
    overflow-y: scroll;
    border-radius: 0rem 0rem 2rem 2rem;
}

dialog {
    top: 5%;
    left: 50%;
    width: 50%;
    height: 95%;
    position: absolute;
   /*  padding: 2rem; */
    border: none;
    border-radius: 2rem;
    background-color: var(--color-BG-2);
    color: var(--color-Text-1);
    transform: translateX(-50%) translateY(-2.5%);
    overflow: hidden;
}

dialog::backdrop {
    background-color: rgba(117, 122, 129, 0.528);
    backdrop-filter: blur(8px);
}

dialog > form {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: auto 2fr;
    position: relative;
}

dialog > form input { background-color: transparent; }

.form-head {
    border-radius: 2rem 2rem 0rem 0rem;
    padding: 2rem;
    gap: 0.5rem;
}

.form-head label {
    font-size: 3.5rem;
    font-weight: 600;
}

#note-form-heading {
    width: 100%;
    height: 55px;
    font-size: 2.5rem;
    font-weight: 600;
    border: 1px solid var(--color-Gray-300);
    outline: none;
    caret-color: var(--color-Accent);
    color: var(--color-Text-1);
    border: none;
}

#note-form-heading::placeholder { color: var(--color-Text-2); }

.tag-container {
    width: 100%;
    height: 100%;
    gap: 1rem;
}

#note-tags {
    height: 30px;
    outline: none;
    border: none;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-Text-1);
}

#note-tags::placeholder { color: var(--color-Text-2); }

.tag-list-item {
    height: 2.5rem;
    width: auto;
    padding: 0.55rem;
    border-radius: 1.5rem;
    background-color: var(--color-Volcano-Orange-100);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

#note-form-text {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0rem 0rem 2rem 2rem;
    padding: 2rem;
    font-size: 1.25rem;
    line-height: 1.5;
    caret-color: var(--color-Accent);
    resize: none;
    outline: none;
    background-color: transparent;
    color: var(--color-Text-1);
}

.form-buttons {
    bottom: 1rem;
    right: 1rem;
    padding: 0.5rem;
    border-radius: 2.5rem;
    background-color: #dddddd1d;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    backdrop-filter: blur(5px);
}

.form-btn {
    height: 55px;
    width: 55px;
    border-radius: 50%;
    background-color: var(--color-Dark-700);
    transition: 240ms ease;

    svg { fill: white; }

    &:hover {
        background-color: var(--color-Accent);
        color: var(--color-White);
    }
}

.note {
    width: 100%;
    height: 100%;
    padding: 0rem;
    display: grid;
    grid-template-rows: 1fr auto;
    cursor: pointer;
    position: relative;
    border-radius: 1.25rem;
    background-color: transparent;
    box-shadow: 4px 4px 10px var(--color-Shadow);
    color: var(--color-Text-1);
}

.note-content {
    border: none;
    resize: none;
    outline: none;
    padding: 1.25rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-Text-2);
    background-color: var(--color-Note-BG);
    border-radius: 1.25rem 1.25rem 0rem 0rem;
}

.note-footer {
    width: 100%;
    height: 80px;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.75rem;
    border-radius: 0rem 0rem 1.25rem 1.25rem;
}

.note-footer h3 {
    font-size: 1.25rem;
    font-weight: 500;
}

.note-actions {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.note-time-date { font-size: 0.75rem; }

.note-actions-list {
    display: flex;
    list-style: none;
    gap: 0.5rem;
}

.hidden { display: none; }

.note-action-btn {
    width: 30px;
    height: 30px;
    padding: 0px;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    outline: none;
    border: none;
    border-radius: 0.75rem;
}

.note:not(.starred) .btn-star svg:first-child { display: block; }
.note:not(.starred) .btn-star svg:last-child { display: none; }
.note.starred .btn-star svg:first-child { display: none; }
.note.starred .btn-star svg:last-child { display: block; }

.note.active .na-list-item-1,
.note.active .na-list-item-2 { display: block; }
.note.active .na-list-item-3 { display: none; }
.note.active .btn-del svg:first-child { display: block; }
.note.active .btn-del svg:last-child { display: none; }

.note.deleted .na-list-item-1,
.note.deleted .na-list-item-2 { display: none; }
.note.deleted .na-list-item-3 { display: block; }
.note.deleted .btn-del svg:first-child { display: none; }
.note.deleted .btn-del svg:last-child { display: block; }