/* ===============================
   Google Font
================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Poppins:wght@300;400;500;600&display=swap');

/* ===============================
   Reset
================================ */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
}

/* ===============================
   Variables
================================ */

:root{

    /* Background */
    --bg:#F8F5F3;
    --surface:#f8f8f8;
    --surface-hover:#FCFAF9;

    /* Primary Accent */
    --primary:#6E3F42;
    --primary-hover:#5B3437;

    /* Secondary Accent */
    --accent:#B48A64;

    /* Status */
    --success:#6B8F71;
    --danger:#B35A5A;

    /* Typography */
    --text:#332A29;
    --text-light:#7A706B;

    /* Borders */
    --border:#E7DFDA;

    /* Shadow */
    --shadow:0 20px 60px rgba(48,34,30,.08);

    /* Radius */
    --radius:14px;

}

body.dark-mode{

    --bg: #0F172A;      /* Deep navy */
    --surface: #1E293B;         /* Slate blue */
    --primary: #C2A878;         /* Warm antique gold */
    --primary-dark: #A88A5A;
    --accent: #7FA6C9;          /* Muted steel blue */

    --text: #00050a;
    --text-secondary: #060c12;

    --border: #334155;

}
/* ===============================
   Body
================================ */
body{

    min-height:100vh;

    background:var(--bg);

    color:var(--text);

    font-family:'Poppins',sans-serif;

    padding:50px 20px;

}

/* ===============================
   Main App
================================ */

.app{

    max-width:980px;

    margin:auto;

}

body{

    user-select:none;

}

input{

    user-select:text;

}

/* ===============================
   Header
================================ */

.header{

    text-align:center;

    margin-bottom:55px;

}

.header h1{

    font-size:3.4rem;

    font-family: 'Playfair Display', serif;
    font-weight:600;

    letter-spacing:-1px;

    color:var(--primary);

}

.header p{

    margin-top:16px;

    color:var(--text-light);
    
    letter-spacing:.3px;
    
    font-size:1.05rem;

}
/* ===============================
   Card
================================ */

.todo-container{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:20px;

    padding:56px;

    box-shadow:var(--shadow);

}

/* ===============================
   Input
================================ */
button,
input,
.task-item{

    transition:.25s ease;

}
.input-section{

    display:flex;

    flex-direction:column;

    gap:20px;

}
input::placeholder{

    color:#9D948F;

}
.input-section input[type="text"]{

    width:100%;

    padding:16px 18px;

    background:#FCFAF8;

    border:1px solid var(--border);

    color:var(--text);

    transition:.25s ease;

    border-radius:12px;

    outline:none;

    font-size:1rem;

}
.input-section input:focus,
.task-options input:focus{

    border-color:var(--accent);

    background:white;

}
.task-options{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

.task-options input{

    flex:1;

    min-width:180px;

    padding:16px;

    background:#FCFAF8;

    border:1px solid var(--border);

    border-radius:12px;

    color:var(--text);

    transition:.25s;
}
.task-options input:focus{

    border-color:var(--accent);

    background:white;

}

.datetime-group{

    display:flex;

    flex:1;

    gap:15px;

}

.datetime-group input{

    flex:1;

}
.task-options input,
#addTaskBtn{

    height:56px;

}
#addTaskBtn{

   

    border:none;

    height:58px;

    padding:0 32px;

    border-radius:12px;

    cursor:pointer;

    background:var(--primary);

    color:white;

    font-size:1rem;
    font-weight:600;

    transition:.25s;

    display:flex;

    align-items:center;

    gap:8px;

}
#addTaskBtn:hover{

    background:var(--primary-hover);

    transform:translateY(-2px);

}
#addTaskBtn:active{

    transform:translateY(0);

}

/* ===============================
   Schedule
================================ */

.schedule-section{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.schedule-title{

    font-size:.95rem;

    font-weight:500;

    color:var(--text-light);

    padding-left:4px;

    letter-spacing:.4px;

}
/* ===============================
   Search
================================ */

.search-section{

    display:flex;

    align-items:center;

    gap:12px;

    margin:30px 0;

    width:100%;

    padding:0 16px;

    background:#FCFAF8;

    border:1px solid var(--border);

    border-radius:16px;

}

.search-section i{

    font-size:1.25rem;

    color:var(--text-light);

    flex-shrink:0;

}

.search-section input{

    flex:1;

    display:block;

    width:100%;

    border:none;

    outline:none;

    background:transparent;

    color:var(--text);

    font-size:1rem;

    padding:16px 0;

    min-width:0;

}
.search-section:focus-within{

    border-color:var(--accent);

    background:white;
    

}



/* ===============================
   Filters
================================ */

.filters{

    display:flex;

    gap:15px;

    margin:34px 0 40px;

    margin-bottom:28px;

    flex-wrap:wrap;

}

.filter-btn{

    padding:10px 22px;

    border:none;

    border-radius:30px;

    cursor:pointer;

}

.filter-btn.active{

    background:var(--primary);

    color:white;

}

/* ===============================
   Task List
================================ */

.task-list{

    list-style:none;

    display:flex;

    flex-direction:column;

    gap:18px;

}

/* Placeholder until JS creates tasks */

.task-item{

    background:white;

    border:1px solid var(--border);

    border-radius:16px;

    padding:18px 22px;

    transition:.25s ease;

}
.task-item:hover{

    transform:translateY(-2px);

    box-shadow:0 8px 22px rgba(0,0,0,.05);

}

.task-content h3{

    font-size:1.15rem;

    font-weight:600;

    margin-bottom:8px;

    color:var(--text);

}

.task-meta{

    display:flex;

    align-items:center;

    gap:18px;

    color:var(--text-light);

    font-size:.9rem;

}

.task-meta span{

    display:flex;

    align-items:center;

    gap:6px;

}

.task-actions{

    display:flex;

    align-items:center;

    gap:10px;

}


.complete-btn,
.edit-btn,
.delete-btn{

    width:40px;

    height:40px;

    border:none;

    background:transparent;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    font-size:1.2rem;

    color:var(--text-light);

    transition:.25s ease;

}

.complete-btn:hover{

    color:var(--success);

    background:#EDF6EF;

}
.complete-btn i{

    font-size:1.45rem;

}
.ri-checkbox-circle-fill{

    color:var(--success);

}

.edit-btn:hover{

    color:var(--accent);

    background:#F8F2EB;

}

.delete-btn:hover{

    color:var(--danger);

    background:#FBEEEE;

}


/* ===============================
   Empty State
================================ */

.empty-state{

    text-align:center;

    padding:50px 0;

    color:var(--text-light);

}

.empty-state i{

    font-size:4rem;

    margin-bottom:15px;

}

/* ===============================
   Footer
================================ */

.footer{

    margin-top:35px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}

.task-info{

    color:var(--text-light);

    font-size:.95rem;

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

#clearCompleted{

    padding:12px 18px;

    border:none;

    border-radius:10px;

    cursor:pointer;

    background:#F4ECE8;

    color:var(--primary);

    border:1px solid var(--border);
}
#clearCompleted:hover{

    background:#EAD9D6;

}

/* ===============================
   Progress
================================ */

.progress-section{

    margin-top:35px;

}

.progress-header{

    display:flex;

    justify-content:space-between;

    margin-bottom:10px;

}

.progress-bar{

    height:8px;

    background:#EFE8E4;

    border-radius:999px;

}

#progressFill{

    width:0%;

    height:100%;

    background:var(--accent);

}

.task{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

}

.task-left{

    display:flex;

    align-items:center;

    gap:18px;

}

.completed{

    text-decoration:line-through;

    opacity:.6;

}

#clearCompleted:disabled{

    opacity:.5;

    cursor:not-allowed;

}

/* ===============================
   Footer
================================ */

.app-footer{

    text-align:center;

    margin:50px 0 20px;

    color:var(--text-light);

    font-size:.9rem;

}

.app-footer strong{

    color:var(--primary);

    font-weight:600;

}

/* ===============================
   Responsive
================================ */

/* ===============================
   Tablet (768px)
================================ */

@media (max-width:768px){

    body{
        padding:30px 16px;
    }

    .header{
        margin-bottom:45px;
    }

    .header h1{
        font-size:2.5rem;
    }

    .header p{
        font-size:.95rem;
    }

    .todo-container{
        padding:30px;
    }

    /* ---------- Input Section ---------- */

    .datetime-group{
        display:flex;
        width:100%;
        gap:15px;
    }

    .datetime-group input{
        flex:1;
    }

    .task-options{
        display:flex;
        flex-direction:column;
        gap:15px;
    }

    #addTaskBtn{
        width:100%;
        justify-content:center;
    }

    /* ---------- Task Card ---------- */

    .task{
        gap:15px;
    }

    .task-left{
        flex:1;
        min-width:0;
    }

    .task-actions{
        display:flex;
        gap:8px;
    }

    .task-content h3{
        font-size:1rem;
    }

    .task-meta{
        display:flex;
        flex-wrap:wrap;
        gap:12px;
        font-size:.9rem;
    }

    /* ---------- Footer ---------- */

    .footer{
        flex-direction:column;
        align-items:flex-start;
        gap:25px;
    }

    .task-info{
        width:100%;
        justify-content:space-between;
        flex-wrap:wrap;
    }

    #clearCompleted{
        width:100%;
    }

}


/* ===============================
   Mobile (480px)
================================ */

@media (max-width:480px){

    body{
        padding:20px 12px;
    }

    .header{
        margin-bottom:35px;
    }

    .header h1{
        font-size:2rem;
    }

    .header p{
        font-size:.9rem;
    }

    .todo-container{
        padding:20px;
        border-radius:16px;
    }

    /* ---------- Inputs ---------- */

    .input-section{
        gap:16px;
    }

    .input-section input,
    .datetime-group input,
    #addTaskBtn{
        height:50px;
    }

    .datetime-group{
        display:flex;
        flex-direction:row;
        gap:10px;
    }

    .datetime-group input{
        flex:1;
        min-width:0;
    }

    .search-section{
        height:52px;
        margin:28px 0;
    }

    /* ---------- Filters ---------- */

    .filters{
        gap:10px;
    }

    .filter-btn{
        flex:1;
        min-width:0;
        font-size:.9rem;
        padding:10px 0;
    }

    /* ---------- Task ---------- */

    .task{
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:10px;
    }

    .task-left{
        display:flex;
        align-items:center;
        gap:14px;
        flex:1;
        min-width:0;
    }

    .task-content h3{
        font-size:1rem;
    }

    .task-meta{
        display:flex;
        flex-wrap:wrap;
        gap:10px;
        font-size:.82rem;
    }

    .task-actions{
        display:flex;
        gap:4px;
    }

    .complete-btn,
    .edit-btn,
    .delete-btn{
        width:34px;
        height:34px;
        font-size:1rem;
    }

    /* ---------- Footer ---------- */

    .footer{
        gap:18px;
    }

.task-info{

    display:flex;

    justify-content:space-between;

    width:100%;

    flex-wrap:nowrap;

    font-size:.90rem;

}

    #clearCompleted{
        width:100%;
    }

    .progress-header{
        font-size:.9rem;
    }

}

#theme-toggle{
    width:42px;
    height:42px;
    border:none;
    border-radius:50%;
    background:var(--surface);
    color:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:0.3s;
    font-size:1.3rem;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
}

#theme-toggle:hover{
    transform:translateY(-2px);
    color:var(--accent);
}