/*
Notes:
-- Unit Conversion --
---------------------
* 1 rem --> 16 px | * 1 rem --> 12 pt

-- CSS Styling Order System --
------------------------------
I use my own custom CSS Architecture for prioritizing maintainability,
which I named it 'FoCoMUR' styling system
* 1.Fo - Foundation  : Reset, Variables, Base Elements
    (e.g., :root, body, h1, etc.)
* 2.Co - Component   : BEM Blocks/Elements
    (e.g., .navbar, .card__image, etc.)
* 3.M - Modifier     : State/theme Overrides
    (e.g., .button--is-active, .image--is-hidden, etc.)
* 4.U - Utilities    : Atomic helpers
    (e.g., .u-margin-top-10, .util-text-center, etc.)
* 5.R - Responsive   : Mobile-first media queries
    (e.g., @media (min-width: 768px) { ... },etc.)
*/

/*  # -------------------------------------------------- #
    #                   Foundation                       #
    # -------------------------------------------------- # */

* {
    /* --- Box Model --- */
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
/* =# Variables #= */

    /* ==# 8-Point Spacing System #== */
    --space-3xs: 0.125rem;  /* 2px - For Tiny Detail */
    --space-2xs: 0.25rem;   /* 4px - For Small Detail */
    --space-xs: 0.5rem;     /* 8px - Space between small elements */
    --space-sm: 1rem;       /* 16px - Space between items inside a component */
    --space-md: 1.5rem;     /* 24px - Space between paragraph or the suchlike */
    --space-lg: 2rem;       /* 32px - Space padding inside small component */
    --space-xl: 3rem;       /* 48px - Space padding inside section */
    --space-2xl: 4rem;      /* 64px - Big space when needed */
    --space-3xl: 5rem;      /* 80px - More bigger space when needed */
    --space-4xl: 6rem;      /* 96px - Extra big space when needed */
    --space-5xl: 7rem;      /* 128px - Extra big space when needed */
    --space-6xl: 8rem;      /* 160px - Extra big space when needed */
    /* ==# ---------------------- #== */

    /* ==# Typographic Scale System #== */
    --font-size-xs: 0.75rem;    /* 12px or 9pt */
    --font-size-sm: 0.875rem;   /* 14px or 10.5pt */
    --font-size-base: 1rem;     /* 16px or 12pt */
    --font-size-md: 1.25rem;    /* 20px or 15pt */
    --font-size-lg: 1.5rem;     /* 24px or 18pt */
    --font-size-xl: 2rem;       /* 32px or 24pt */
    --font-size-2xl: 2.5rem;    /* 40px or 30pt */
    --font-size-3xl: 3rem;      /* 48px or 36pt */
    --font-size-4xl: 3.5rem;    /* 56px or 42pt */
    /* ==# ------------------------ #== */

    /* ==# Line Height #== */
    --line-height-very-tight: 1;
    --line-height-tight: 1.2;    /* Line spacing for heading text (h1,h2,h3,etc.) */
    --line-height-slightly-tight: 1.4;
    --line-height-normal: 1.6;    /* Line spacing for body text */
    --line-height-slightly-loose: 1.8;
    --line-height-loose: 2;      /* Optional line spacing for large text blocks */
    /* ==# ------------ #== */

    /* ==# Radius Value #== */
    --radius-xs: 0.125rem;  /* 2px - For small elements */
    --radius-sm: 0.25rem;   /* 4px - For medium */
    --radius-base: 0.5rem;  /* 8px - For large elements */
    --radius-lg: 0.75rem;   /* 12px - For large elements */
    --radius-xl: 1rem;      /* 16px - For extra large elements */
    --radius-2xl: 1.5rem;   /* 24px - For extra large elements */
    /* ==# ------------ #== */

    /* ==# Coloring #== */
        /* ===# COLOR PRIMITIVES (Raw RGB Hex) #=== */
        --color-light-violet-rgb: 220, 214, 247;
        --color-light-blue-rgb: 144, 213, 255;
        --color-light-green-rgb: 136, 231, 136;
        --color-light-red-rgb: 255, 138, 128;
        --color-violet-rgb: 175, 105, 238;
        --color-blue-rgb: 37, 99, 235;
        --color-green-rgb: 30, 132, 73;
        --color-red-rgb: 255, 80, 80;
        --color-yellow-rgb: 255, 244, 79;

        --color-gray-100-rgb: 248, 248, 248;
        --color-gray-200-rgb: 224, 224, 224;
        --color-gray-300-rgb: 210, 210, 210;
        --color-gray-400-rgb: 192, 192, 192;
        --color-gray-500-rgb: 160, 160, 160;
        --color-gray-600-rgb: 130, 130, 130;
        --color-gray-700-rgb: 100, 100, 100;
        --color-gray-900-rgb: 33, 33, 33;
        /* ===# ------------------------------ #=== */

        /* ===# SEMANTIC COLORS (Ready-to-Use Palette) #=== */
        /* -- Brand & Actions -- */
        --color-brand-primary: rgb(var(--color-violet-rgb));
        --color-brand-secondary: rgb(var(--color-light-violet-rgb));
        --color-action-primary: rgb(var(--color-blue-rgb));
        --color-action-success: rgb(var(--color-green-rgb));
        --color-action-danger: rgb(var(--color-red-rgb));
        --color-action-warning: rgb(var(--color-yellow-rgb));

        /* -- Backgrounds -- */
        --color-background-body: rgb(var(--color-gray-100-rgb));
        --color-background-component: white;
        --color-overlay-subtle: rgba(var(--color-gray-900-rgb), 0.075);

        /* -- Text -- */
        --color-text-primary: rgb(var(--color-gray-900-rgb));
        --color-text-secondary: rgb(var(--color-gray-600-rgb));
        --color-text-secondary: rgb(var(--color-gray-600-rgb));
        --color-text-subtle: rgb(var(--color-gray-400-rgb));
        --color-text-button: white;

        /* -- Borders -- */
        --color-border-default: rgb(var(--color-gray-400-rgb));
        /* ===# ------------------------------------- #=== */
    /* ==# -------- #== */


    /* ==# Task Note Card Colors #== */
    --color-card-1: rgb(255, 179, 186); /* Light Pink */
    --color-card-2: rgb(255, 223, 186); /* Light Orange */
    --color-card-3: rgb(255, 255, 186); /* Light Yellow */
    --color-card-4: rgb(186, 255, 201); /* Light Green */
    --color-card-5: rgb(186, 225, 255); /* Light Blue */
    /* ==# --------------------- #== */

/* =# --------- #= */
}

html {
    /* --- Box Model --- */
    padding: var(--space-lg);

    /* --- Interaction, Animation, & Misc --- */
    scroll-behavior: smooth;
}

body {
    /* --- Typography --- */
    font-family: 'Arial', sans-serif;
    line-height: var(--line-height-normal);
    background-color: var(--color-background-body);
}

/*  # -------------------------------------------------- #
    #                   Component                        #
    # -------------------------------------------------- # */

/* ==# Global Styling and Reuse-able Rulesets #== */

.page-container {
    /* --- Box Model --- */
    max-width: 48rem; /* 768px */
    margin: var(--space-md) auto;
    padding: var(--space-md);
}

.todo-app__section-title {
    /* --- Layout & Positioning --- */
    position: relative;

    /* --- Box Model --- */
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-xs);

    /* --- Typography --- */
    font-size: var(--font-size-xl);
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
    text-align: center;
}

.todo-app {
    --placeholder: ;
}

.todo-app__input-group {
    /* --- Layout & Positioning --- */
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);

    /* --- Box Model --- */
    margin-bottom: var(--space-lg);
}

.todo-app__label {
    /* --- Typography --- */
    font-weight: bold;
    font-size: var(--font-size-base);
}

.todo-app__input-area {
    /* --- Box Model --- */
    padding: var(--space-sm);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-base);
    
    /* --- Typography --- */
    font-family: inherit;
    font-size: var(--font-size-base);
}

.todo-app__item {
    /* --- Layout & Positioning --- */
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "header header header"
        "checker body deleter";
    column-gap: var(--space-xs);
    
    position: relative;

    /* --- Box Model --- */
    margin-bottom: var(--space-lg);
    border-radius: var(--radius-base);

    /* --- Visual --- */
    list-style: none; /* Menghilangkan bullet points! */
}

.todo-app__item:nth-child(4n + 1) {
    background-color: var(--color-card-1);
}

.todo-app__item:nth-child(4n + 2) {
    background-color: var(--color-card-2);
}

.todo-app__item:nth-child(4n + 3) {
    background-color: var(--color-card-3);
}

.todo-app__item:nth-child(4n + 4) {
    background-color: var(--color-card-4);
}

.todo-app__item:nth-child(4n + 5) {
    background-color: var(--color-card-5);
}

.todo-app__item-column-content-header {
    /* --- Layout & Positioning */
    grid-area: header;

    /* --- Box Model --- */
    margin-bottom: var(--space-2xs);
    padding: var(--space-md) var(--space-md) var(--space-lg) var(--space-md);
    border-radius: var(--radius-base) var(--radius-base) 0 0;

    /* --- Typography --- */
    font-size: var(--font-size-md);
    font-weight: bolder;
    color: var(--color-text-primary);
    line-height: var(--line-height-normal);
    text-align: center;

    /* --- Visual --- */
    background-color: var(--color-overlay-subtle);

}

.todo-app__item-date {
    /* --- Layout & Positioning --- */
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);

    /* --- Box Model --- */
    padding: var(--space-xs);;
    border-radius: var(--radius-sm);

    /* --- Typography --- */
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-slightly-tight);
    text-align: left;

    /* --- Visual --- */
    background-color: var(--color-overlay-subtle);
}

.todo-app__item-column-checkbox {
    /* --- Layout & Positioning --- */
    grid-area: checker;

    /* --- Box Model --- */
    padding: var(--space-sm) 0 0 var(--space-sm);
}

.todo-app__item-complete-checkbox {
    width: 2rem;
    height: 2rem;
    cursor: pointer;
}

.todo-app__item-column-content-body {
    grid-area: body;
}

.todo-app__item-details {
    /* --- Box Model --- */
    padding: var(--space-sm);

    /* --- Typography --- */
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    line-height: var(--line-height-normal);
    white-space: pre-wrap; /* Preserve whitespace and line breaks */
}

.todo-app__item-column-delete-btn {
    padding: var(--space-sm) var(--space-sm) 0 0;
    grid-area: deleter;
    align-self: start;
}

.todo-app__item-delete-button {
    cursor: pointer;
}

.todo-app__item-delete-button svg {
    /* --- Box Model --- */
    width: 2rem;
    height: 2rem;

    /* --- Interaction --- */
    pointer-events: none;
}

/* ==# -------------------------------------- #== */

/* ==# Application-Specific Rulesets #== */

.app-header__title {
    /* --- Layout & Positioning --- */
    text-align: center;

    /* --- Box Model --- */
    margin-bottom: var(--space-xs);

    /* --- Typography --- */
    font-size: var(--font-size-3xl);
    color: rgb(var(--color-violet-rgb));
    line-height: var(--line-height-tight);
}

.app-header__slogan {
    /* --- Layout & Positioning --- */
    margin-bottom: var(--space-lg);

    /* --- Typography --- */
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    text-align: center;
}

.todo-app__submit-btn {
    /* --- Box Model --- */
    width: 100%;
    padding: var(--space-sm) var(--space-lg);
    border: none;
    border-radius: var(--radius-base);
    
    /* --- Typography --- */
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    
    /* --- Visual --- */
    background-color: rgb(var(--color-light-violet-rgb));
}

/* ==# ----------------------------- #== */

/* ==# Extras #== */
.app-header__prototype-label {
    text-align: center;
    color: var(--color-text-subtle);
    font-style: italic;
    font-size: var(--font-size-sm);
    margin-top: calc(var(--space-lg) * -0.5); /* Sedikit naik agar lebih dekat dengan slogan */
    margin-bottom: var(--space-lg);
    background-color: var(--color-background-component);
    border-radius: var(--radius-base);
}

.app-footer {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-sm);
    text-align: right; /* Mendorong konten ke kanan */
}

.app-footer__version {
    color: var(--color-text-subtle);
    font-size: var(--font-size-sm);
}

/* ==# ------ #== */



/*  # -------------------------------------------------- #
    #                   Modifier                         #
    # -------------------------------------------------- # */

/* =# Transition Declarations #= */
.todo-app__input-area {
    transition: all 0.4s ease-in-out;
}

.todo-app__submit-btn {
    transition: all 0.3s ease-in-out, transform 0.2s ease-in-out;
}

.todo-app__item {
    transition: 
        filter 0.5s ease,
        opacity 1s ease,
        transform 0.5s ease;
}

.todo-app__item-title,
.todo-app__item-details {
    transition: color 0.3s ease, opacity 1s ease;
}

.todo-app__item-delete-button svg {
    transition: stroke 1s ease;
}

/* =# -------------------- #= */

/* =# Decorations #= */

/* ==# Creating a floating card look for page container #== */
.todo-app__add-section,
.todo-app__list-section {
    /* --- Box Model --- */
    padding: var(--space-xl);
    margin-bottom: var(--space-xl);
    border-radius: var(--radius-base);

    /* --- Visual --- */
    background-color: var(--color-background-component);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* ==# Creating a floating card look for notes #== */
.todo-app__item {
    box-shadow: 3px 6px 8px rgba(0, 0, 0, 0.25);
}

/* ==# Drawing line under h2 #== */
.todo-app__section-title::after {
    /* --- Layout & Positioning --- */
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;

    /* --- Box Model --- */
    height: 0.25rem;
    width: 25rem;
    border-radius: var(--radius-sm);

    /* --- Visual --- */
    background-color: rgb(var(--color-gray-400-rgb));

    /* --- Interaction & Animation --- */
    transform: translateX(-50%);
    content: "";
}

/* =# ----------- #= */

/* =# Animations #= */

/* ==# Changing clicked input-area's highlight color #== */

.todo-app__input-area:focus {
    outline: none; /* Hapus outline default yang kurang menarik */
    border-color: rgb(var(--color-violet-rgb)); /* Ganti warna border saat aktif */
    box-shadow: 0 0 0 3px rgba(var(--color-violet-rgb), 0.4); /* Tambahkan "glow" effect */
}

/* ==# Hovering FX for submit button #== */
.todo-app__submit-btn {
    cursor: pointer;
}

.todo-app__submit-btn:hover {
    background-color: rgb(var(--color-light-violet-rgb));
    transform: translateY(-4px); /* Slight lift effect */
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.075);
}

.todo-app__submit-btn:focus {
    outline: none;
    transform: translateY(-4px); /* Slight lift effect */
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.075);
}

/* ==# Completed/Uncompleted state smooth transition #== */
[data-completed="true"] .todo-app__item-title,
[data-completed="true"] .todo-app__item-details {
    color: var(--color-text-secondary);
    text-decoration: line-through;
}

.todo-app__item[data-completed="true"] {
    filter: grayscale(50%) opacity(70%);
    transform: scale(0.95);
}

/* =# ---------- #= */

/* =# Text Modifier #= */
.bold {
    font-weight: bold;
}

.italic {
    font-style: italic;
}

.underline {
    text-decoration: underline;
}

/*  # -------------------------------------------------- #
    #                  Utilities                         #
    # -------------------------------------------------- # */

/*  # -------------------------------------------------- #
    #              Responsive Media                      #
    # -------------------------------------------------- # */