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

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Jost', sans-serif; transition: background 0.3s ease; }

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* This is a vibrant gradient like the one in the video */
    background: linear-gradient(45deg, #f06, #9f6); 
    /* OR use an image for the full glass effect: */
    /* background: url('https://images.unsplash.com/photo-1550684848-fac1c5b4e853') no-repeat center center/cover; */
}

.to-do-app {
    width: 100%;
    max-width: 480px;
    padding: 2rem;
    border-radius: 25px;
    
    /* GLASSMORPHISM EFFECT */
    background: rgba(255, 255, 255, 0.1); /* Semi-transparent white */
    backdrop-filter: blur(15px); /* This creates the frosted glass look */
    -webkit-backdrop-filter: blur(15px); 
    
    border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle white border */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    color: white; /* Make text white to stand out */
}

/* Make sure your headings and labels are readable */
h1 {
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Adjust the input field to fit the glass theme */
#task-input, #task-desc, #task-date, #task-priority {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
}

#task-input::placeholder, #task-desc::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

/* Style the list items to be slightly darker glass */
li {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
}

/* Dark Mode Overrides */
body.dark-mode { background: #121212; color: white; }
body.dark-mode .to-do-app { background: rgba(30, 30, 30, 0.9); border: 1px solid #444; }
body.dark-mode li { background: #252525; color: white; }
body.dark-mode input, body.dark-mode select { background: #333; color: white; border: 1px solid #555; }

.header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }

#theme-btn { background: #eee; border: none; padding: 10px; border-radius: 50%; cursor: pointer; }
body.dark-mode #theme-btn { background: #444; color: gold; }

/* Inputs */
.input-area { display: flex; gap: 10px; margin-bottom: 10px; }
#task-input { flex: 1; padding: 12px; border-radius: 10px; border: 1px solid #ddd; outline: none; }
#add-task-button { padding: 0 20px; border-radius: 10px; border: none; background: #ff69b4; color: white; cursor: pointer; }

.extra-inputs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.extra-inputs input, .extra-inputs select { padding: 8px; border-radius: 8px; border: 1px solid #ddd; outline: none; }
.extra-inputs .row { display: flex; gap: 8px; }
.extra-inputs .row * { flex: 1; }

/* Stats */
/* 1. The "Keep it up!" Progress Container */
.stat-container { 
    /* Using RGBA for semi-transparent red (0.7 is the opacity) */
    background: rgba(200, 16, 46, 0.7); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    color: white; 
    padding: 15px; 
    border-radius: 15px; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* The actual moving progress line */
.progress { 
    height: 100%; 
    background: #f1f1f1; /* Light gray for contrast against the red */
    border-radius: 10px; 
    width: 0%; 
    transition: 0.4s; 
}

/* The circular number display */
.numbers { 
    background: rgba(255, 255, 255, 0.15); 
    border: 1px solid rgba(255, 255, 255, 0.4);
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}


/* 2. The "+" Add Button */
#add-task-button { 
    padding: 0 20px; 
    border-radius: 10px; 
    border: 1px solid rgba(255, 255, 255, 0.2); 
    
    /* Matching the semi-transparent red */
    background: rgba(200, 16, 46, 0.7); 
    backdrop-filter: blur(5px);
    
    color: white; 
    cursor: pointer; 
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

#add-task-button:hover { 
    background: rgba(227, 27, 35, 0.9); /* Slightly brighter/more solid on hover */
    transform: scale(1.05);
}

/* 3. The Dark Mode Toggle Button (Gold accent) */
body.dark-mode #theme-btn { 
    background: #C8102E; 
    color: #FFD700; /* Gold icon when in dark mode */
}

/* LIGHT MODE TASK TEXT FIX */
/* This targets the text when the body is NOT in dark mode */
body:not(.dark-mode) .task-title {
    color: #333; /* Dark gray for the main title */
}

body:not(.dark-mode) .task-details {
    color: #666; /* Medium gray for the description/date */
}

/* Also ensure subtasks are visible in Light Mode */
body:not(.dark-mode) .subtask-item span {
    color: #333;
}

/* List Items */
li { 
    list-style: none; background: #f9f9f9; padding: 12px; border-radius: 12px; margin-bottom: 10px;
    display: flex; justify-content: space-between; align-items: center; border-left: 5px solid #ccc;
}
li.completed { opacity: 0.5; }
li.completed span { text-decoration: line-through; }

/* Priority Colors */
li.prio-high { border-left-color: #ff4d4d; }
li.prio-medium { border-left-color: #ffcc00; }
li.prio-low { border-left-color: #2ecc71; }

.task-content { display: flex; flex-direction: column; flex: 1; margin: 0 15px; }
.task-title { font-weight: 600; }
.task-details { font-size: 0.8rem; color: #777; }

.task-buttons button { background: none; border: none; cursor: pointer; margin-left: 5px; color: #777; }
.empty-image { width: 100px; display: block; margin: 20px auto; }

/* --- NEW FILTER STYLES --- */
.filter-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

#search-bar {
    flex: 2;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    outline: none;
}

#filter-category {
    flex: 1;
    padding: 5px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

/* Ensure the text inside the dropdown is readable in dark/light mode */
#filter-category option {
    background: #222; /* Dark background so text is visible */
    color: white;
}

.subtask-container {
    margin-left: 45px;
    margin-top: 10px;
    padding-left: 10px;
    border-left: 2px dashed rgba(255, 255, 255, 0.2);
}

.subtask-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.subtask-item input[type="checkbox"] {
    width: 14px;
    height: 14px;
}

.add-subtask-btn {
    font-size: 0.7rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 2px 8px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 5px;
}