/*
 * style.css
 * Theme Setup: Fixed Tag Visibility (All Cards), Night Glass, & AI Isolation
 */

/* =========================================
   1. THEME VARIABLES & SETUP
   ========================================= */

/* --- DEFAULT THEME: LIGHT MODE --- */
:root {
    /* Backgrounds */
    --bg-body: #f8fafc;
    --bg-card: #ffffff;
    --bg-inner-card: #f1f5f9;
    --bg-input: #ffffff;
    
    /* Transparent White Header */
    --bg-nav: rgba(255, 255, 255, 0.8); 
    
    /* Borders & Shadows */
    --border-color: #e2e8f0;
    --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    
    /* Text Colors */
    --text-main: #334155;
    --text-heading: #0f172a;
    --text-muted: #64748b;
    
    /* FIXED: Nav Font & Line is BLACK */
    --text-nav: #000000;       
    --text-nav-hover: #000000; /* No color change on hover */
    --nav-active-line: #000000; /* Black underline for active state */
    
    /* Mobile Menu Button Variables (Light Theme) */
    --nav-mobile-bg: #ffffff;
    --nav-mobile-border: #e2e8f0;
    --nav-mobile-text: #334155;
    --nav-mobile-active-bg: #2563eb;
    --nav-mobile-active-text: #ffffff;

    /* Success Message Colors */
    --bg-success: #dcfce7;
    --text-success: #166534;
    
    /* Accents */
    --accent-primary: #2563eb;
}

/* --- THEME: DARK MODE --- */
[data-theme="dark"] {
    /* Backgrounds */
    --bg-body: #020617;
    --bg-card: #1e293b;        
    --bg-inner-card: #0f172a;  
    --bg-input: #1e293b;       
    
    /* Header Background (Transparent Dark) */
    --bg-nav: rgba(15, 23, 42, 0.8); 
    
    /* Borders & Shadows */
    --border-color: #334155;
    --shadow-card: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    
    /* Text Colors */
    --text-main: #e2e8f0;
    --text-heading: #ffffff;
    --text-muted: #cbd5e1;
    
    /* Nav Font & Line is WHITE */
    --text-nav: #ffffff;
    --text-nav-hover: #ffffff; 
    --nav-active-line: #ffffff; 
    
    /* Mobile Menu Button Variables (Dark Theme) */
    --nav-mobile-bg: #1e293b;
    --nav-mobile-border: #334155;
    --nav-mobile-text: #f8fafc;
    --nav-mobile-active-bg: #60a5fa;
    --nav-mobile-active-text: #ffffff;

    /* Success Message Colors */
    --bg-success: #064e3b;
    --text-success: #ffffff;
    
    /* Accents */
    --accent-primary: #60a5fa;
}

/* --- THEME: COLOUR POP --- */
[data-theme="colourpop"] {
    --bg-body: linear-gradient(120deg, #5c6bc0, #ab47bc);
    --bg-card: rgba(255, 255, 255, 0.75);
    --bg-inner-card: #ffffff;
    --bg-nav: rgba(255, 255, 255, 0.1);
    --bg-input: rgba(255, 255, 255, 0.6);
    --border-color: rgba(255, 255, 255, 0.3);
    --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.1);
    
    --text-main: #404040;
    --text-heading: #1f2937;
    --text-muted: #4b5563;
    
    /* Nav Font & Line is WHITE */
    --text-nav: #ffffff;       
    --text-nav-hover: #ffffff;
    --nav-active-line: #ffffff;
    
    /* Mobile Menu Button Variables (Coloured) */
    --nav-mobile-bg: rgba(255, 255, 255, 0.95);
    --nav-mobile-border: #ffffff;
    --nav-mobile-text: #312e81;
    --nav-mobile-active-bg: #6d28d9;
    --nav-mobile-active-text: #ffffff;

    --bg-success: #dcfce7; 
    --text-success: #166534;
    --accent-primary: #2563eb;
}

/* --- THEME: NIGHT GLASS (Dark Liquid) --- */
[data-theme="ios"] {
    /* Moody, cloudy, dark liquid background */
    --bg-body: url('https://images.unsplash.com/photo-1485470733090-0aae1788d5af?q=80&w=2117&auto=format&fit=crop'); 
    
    /* DARK LIQUID GLASS CARDS */
    --bg-card: rgba(20, 20, 20, 0.4); 
    --bg-inner-card: rgba(255, 255, 255, 0.05);
    --bg-nav: rgba(0, 0, 0, 0.2);
    --bg-input: rgba(255, 255, 255, 0.1);
    
    /* Subtle Borders */
    --border-color: rgba(255, 255, 255, 0.15);
    --shadow-card: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    
    /* Text Colors */
    --text-main: #e2e8f0;
    --text-heading: #ffffff;
    --text-muted: #cbd5e1;
    
    /* Nav: White Text */
    --text-nav: #ffffff;       
    --text-nav-hover: #ffffff;
    --nav-active-line: #ffffff;
    
    /* Mobile Menu Button Variables (Glassy) */
    --nav-mobile-bg: rgba(255, 255, 255, 0.1);
    --nav-mobile-border: rgba(255, 255, 255, 0.15);
    --nav-mobile-text: #ffffff;
    --nav-mobile-active-bg: rgba(255, 255, 255, 0.25);
    --nav-mobile-active-text: #ffffff;

    --bg-success: rgba(16, 185, 129, 0.2); 
    --text-success: #ffffff;
    --accent-primary: #38bdf8;
}

/* Apply blur to Night Glass cards */
[data-theme="ios"] .card, 
[data-theme="ios"] header,
[data-theme="ios"] .glass-inner-card,
[data-theme="ios"] .history-card-premium,
[data-theme="ios"] .eisenhower-quadrant,
[data-theme="ios"] #quick-study-timer-main,
[data-theme="ios"] #history,
[data-theme="ios"] #mobile-menu {
    backdrop-filter: blur(40px) saturate(100%);
    -webkit-backdrop-filter: blur(40px) saturate(100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/* =========================================
   2. GLOBAL ASSIGNMENTS & ANIMATIONS
   ========================================= */

body {
    background: var(--bg-body);
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    color: var(--text-main);
    transition: background 0.3s ease, color 0.3s ease;
}

/* Apply Variables */
.card, .history-card-premium { 
    background-color: var(--bg-card) !important; 
    border-color: var(--border-color) !important; 
    color: var(--text-main) !important; 
}

.glass-inner-card { 
    background-color: var(--bg-inner-card) !important; 
    border-color: var(--border-color) !important; 
    color: var(--text-main) !important; 
}

/* Header Background Assignment */
header { 
    background-color: var(--bg-nav) !important; 
    border-bottom: 1px solid var(--border-color) !important;
}

/* --- NAVIGATION STYLING --- */

/* 1. Desktop Nav Links */
.nav-link {
    @apply px-3 py-2 text-sm;
    color: var(--text-nav) !important; 
    font-weight: 600 !important; 
    position: relative;
    transition: opacity 0.2s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 0%; 
    height: 3px; 
    background-color: var(--nav-active-line);
    transition: width 0.3s ease-in-out;
}

.nav-link:hover::after { width: 100%; }
.nav-link.active-nav::after { width: 100% !important; }
.nav-link.active-nav { font-weight: 800 !important; opacity: 1; }

/* 2. Mobile Menu Container */
#mobile-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    padding: 1.5rem;
    z-index: 50;
    background-color: var(--bg-card) !important;
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);

    /* --- THE FIX: SCROLLABLE MENU --- */
    max-height: 80vh;  /* Limits height to 80% of screen */
    overflow-y: auto;  /* Adds scrollbar if content overflows */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* 3. Mobile Menu Buttons */
.nav-link-mobile {
    display: block;
    width: 100%;
    padding: 14px 20px;
    margin-bottom: 12px;
    border-radius: 12px;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    background-color: var(--nav-mobile-bg);
    border: 1px solid var(--nav-mobile-border);
    color: var(--nav-mobile-text) !important;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.nav-link-mobile:hover,
.nav-link-mobile:active {
    transform: translateY(-2px);
    opacity: 0.9;
}

.nav-link-mobile.active-nav-mobile {
    background-color: var(--nav-mobile-active-bg) !important;
    color: var(--nav-mobile-active-text) !important;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Mobile Profile Section */
#mobile-menu .border-t {
    border-color: var(--border-color) !important;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
}
#profile-name-mobile {
    color: var(--text-heading) !important;
    font-weight: 700;
}
#profile-email-mobile {
    color: var(--text-muted) !important;
}

/* Other Header Elements */
#profile-name, #mobile-menu-button { color: var(--text-nav) !important; }
h1, h2, h3, h4, .font-semibold { color: var(--text-heading) !important; }
p, .card-description, .text-gray-600 { color: var(--text-muted) !important; }

#current-goal-success-msg {
    background-color: var(--bg-success);
    color: var(--text-success);
}

/* Standard Inputs */
input, .premium-input, .glass-input-field, .timer-input-glass { 
    background-color: var(--bg-input) !important; 
    color: var(--text-main) !important; 
    border-color: var(--border-color) !important; 
}

/* --- ANIMATION: SETTINGS ROTATION --- */
#settings-btn svg {
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#settings-btn:hover svg {
    transform: rotate(-30deg); 
}
#settings-btn.rotate-active svg {
    transform: rotate(180deg);
}

/* =========================================
   3. SPECIFIC OVERRIDES & PATCHES
   ========================================= */

/* A) FIX: Blue Glow Highlight for Card 1 Inputs */
#new-daily-goal-input,
#new-daily-goal-date,
#add-daily-goal-btn {
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.3); 
    border-color: rgba(59, 130, 246, 0.5) !important;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
}
#new-daily-goal-input:focus,
#new-daily-goal-date:focus,
#add-daily-goal-btn:hover {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.6);
    transform: translateY(-2px);
}

/* B) FIX: Add Goal Button Sizing */
#add-daily-goal-btn {
    width: 50% !important;        
    margin: 1.5rem auto 0 auto;   
    display: block;               
    padding: 10px 0;              
}

/* C) FIX: Dark Mode Dashboard Lists */
[data-theme="dark"] #daily-goals-list > div,
[data-theme="dark"] #upcoming-goals-list > div {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Generic span fix, EXCLUDING colored tags */
[data-theme="dark"] #daily-goals-list span:not([class*="text-red-"]):not([class*="text-blue-"]),
[data-theme="dark"] #upcoming-goals-list span:not([class*="text-red-"]):not([class*="text-blue-"]) {
    color: #f1f5f9 !important;
}

/* D) FIX: Dark Mode Time Tools */
[data-theme="dark"] .eisenhower-quadrant,
[data-theme="dark"] #quick-study-timer-main {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
}
[data-theme="dark"] .eisenhower-quadrant h4,
[data-theme="dark"] .eisenhower-quadrant p,
[data-theme="dark"] .eisenhower-quadrant li,
[data-theme="dark"] #quick-study-timer-main h4,
[data-theme="dark"] #quick-study-timer-main p {
    color: #ffffff !important;
}
[data-theme="dark"] #quick-timer-display {
    color: var(--accent-primary) !important;
}
[data-theme="dark"] #quick-timer-minutes,
[data-theme="dark"] #quick-timer-seconds {
    background-color: var(--bg-inner-card) !important;
    color: #ffffff !important;
}

/* E) FIX: Dark Mode Timer Buttons */
[data-theme="dark"] .control-btn-bubble {
    background-color: #334155 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .control-btn-bubble:hover {
    background-color: #475569 !important;
}

/* F) FIX: History Toggle Buttons */
[data-theme="dark"] button.bg-gray-100 {
    color: #000000 !important;
    background-color: #f3f4f6 !important;
}
[data-theme="dark"] button.bg-blue-600 {
    color: #ffffff !important;
    background-color: #2563eb !important;
}

/* G) FIX: List Labels */
[data-theme="dark"] #all-goals-progress-list h5,
[data-theme="dark"] .history-card-premium li,
[data-theme="dark"] .history-card-premium div.text-sm {
    color: #e2e8f0 !important;
}

/* H) FIX: Preserve White Input in Dark Mode */
[data-theme="dark"] #new-daily-goal-input,
[data-theme="dark"] #new-daily-goal-date {
    background-color: #ffffff !important;
    color: #1f2937 !important;
}

/* I) NIGHT GLASS FIXES */
[data-theme="ios"] #daily-goals-list > div,
[data-theme="ios"] #upcoming-goals-list > div {
    background-color: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
[data-theme="ios"] #daily-goals-list span:not([class*="text-red-"]):not([class*="text-blue-"]),
[data-theme="ios"] #upcoming-goals-list span:not([class*="text-red-"]):not([class*="text-blue-"]) {
    color: #ffffff !important;
}
[data-theme="ios"] .eisenhower-quadrant,
[data-theme="ios"] #quick-study-timer-main {
    background-color: rgba(20, 20, 20, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(40px);
}
[data-theme="ios"] .control-btn-bubble {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* FIX: NIGHT GLASS MOBILE MENU BLUR */
[data-theme="ios"] #mobile-menu {
    background-color: rgba(5, 5, 5, 0.85) !important; 
    backdrop-filter: blur(50px) !important; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* J) AI CARD ISOLATION */
#ai-chat-window:not(.ai-theme-dark),
#ai-chat-window.ai-theme-light {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
}
#ai-chat-window:not(.ai-theme-dark) h3, 
#ai-chat-window:not(.ai-theme-dark) .text-gray-800,
#ai-chat-window.ai-theme-light h3, 
#ai-chat-window.ai-theme-light .text-gray-800 {
    color: #1f2937 !important;
}
#ai-chat-window:not(.ai-theme-dark) #ai-input,
#ai-chat-window.ai-theme-light #ai-input {
    background-color: #ffffff !important;
    color: #1f2937 !important;
    border-color: #d1d5db !important;
}
#ai-chat-window:not(.ai-theme-dark) #ai-messages-area,
#ai-chat-window.ai-theme-light #ai-messages-area {
    background-color: #ffffff !important;
}
#ai-chat-window:not(.ai-theme-dark) #ai-footer,
#ai-chat-window.ai-theme-light #ai-footer {
    background-color: #f9fafb !important;
    border-top-color: #e5e7eb !important;
}

#ai-chat-window.ai-theme-dark {
    background-color: #111827 !important;
    border-color: #374151 !important;
}
#ai-chat-window.ai-theme-dark h3, 
#ai-chat-window.ai-theme-dark .text-gray-800 {
    color: #f3f4f6 !important;
}
#ai-chat-window.ai-theme-dark #ai-input {
    background-color: #374151 !important;
    color: #ffffff !important;
    border-color: #4b5563 !important;
}
#ai-chat-window.ai-theme-dark #ai-messages-area {
    background-color: #111827 !important;
}
#ai-chat-window.ai-theme-dark #ai-footer {
    background-color: #1f2937 !important;
    border-top-color: #374151 !important;
}

/* K) CRITICAL FIX: TAG COLORS FOR OVERDUE AND TODAY */
/* Force specific colors for these tags in ALL themes with Ultra Specificity */

/* Target the spans inside ALL possible containers */
#daily-goals-list span.text-red-600, 
#upcoming-goals-list span.text-red-600,
#all-goals-progress-list .text-red-600,
.card .text-red-600 {
    color: #ef4444 !important; /* Red */
    font-weight: 800 !important;
    font-size: 0.9rem !important; /* Larger */
}

#daily-goals-list span.text-blue-600, 
#upcoming-goals-list span.text-blue-600,
#all-goals-progress-list .text-blue-600,
.card .text-blue-600 {
    color: #3b82f6 !important; /* Blue */
    font-weight: 800 !important;
    font-size: 0.9rem !important;
}

/* Dashboard logo */

#dashboard-logo-container {
    background-color: rgb(255, 255, 255);
    border: 1px solid rgba(252, 252, 252, 0.1);
    border-radius: 20px;
    align-items: center;
    justify-content: center;
}


/* 3. Card Styling (NEW: Frosted Glass / Glassmorphism) */
.card {
    /* The "frosted glass" effect from your example */
    background-color: rgba(255, 255, 255, 0.75); /* More white, less transparent */
    backdrop-filter: blur(20px) saturate(1.5);
    
    /* A subtle white border */
    border: 1px solid rgba(255, 255, 255, 0.3);
    
    /* Standard card styles */
    border-radius: 0.75rem; /* 12px */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); /* Softer shadow */
    transition: transform 0.3s ease-in-out;
    color: #0b0b0b; /* <-- Make text white for contrast */
    align-items: space-evenly;
    
    /* It will inherit the dark text color from the body, which is correct */
}

.card:hover {
    transform: translateY(-7px);
}

.card-description {
    @apply text-gray-700 mt-2 text-sm; /* Darker description text */
    color: #0b0b0b;
    font-size: medium;
    font-weight: normal;
    margin: 8%;
    margin-left: 0%;
}

.font-semibold{
    @apply font-bold text-2xl text-gray-800; /* Darker title text */
    color: #0b0b0b;
    font-size: x-large;
    font-weight: bold;
}

.goal-input-tools {
    height: 55px;
    margin: 5%;
    margin-left: 0%;
    margin-right: 0%;
    margin-bottom: 5%;
}

#new-daily-goal-input {
    border: 2px solid rgba(0, 0, 0, 0.495);
}

#add-daily-goal-btn {
    background-color: rgba(255, 255, 255, 0.536);
    border-radius: 30px;
    border: 1.5px solid rgba(233, 229, 229, 0.625);
    color: #3d3636e2;
    font-size: large;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

#add-daily-goal-btn:hover {
    transform: translateY(-3px);
    background-color: rgba(255, 255, 255, 0.655);
    color: #1a1616e3;
    border-bottom: 3px solid rgba(233, 229, 229, 0.616);
    
}

#add-daily-goal-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}    

/*card-1 : listed goals styling */

.select-goal-btn {
    background-color: #bf42d8b6;
    color: #ffffff;
    border: 1px solid #cc5cdda8;
    border-bottom: 3px solid #cc5cdda8;
    border-radius: 8px;
}

.select-goal-btn:hover {
    background-color: #a136c8;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(161, 54, 200, 0.2);
    border-radius: 10px;
    transition-delay: 0.1s;
}

.select-goal-btn:disabled {
    background-color: #e5e7eb;
    color: #dbdfe7;
    border: 1px solid #d1d5db;
    border-bottom: 3px solid #9ca3af;
    cursor: not-allowed;
    box-shadow: none;
}

.select-goal-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid #cc5cdda8;
    transition-delay: 0.1s;
}

.delete-goal-btn {
    background-color: #6e5c81;
    color: #ffffff;
    border: 1px solid #6f607e;
    border-bottom: 3px solid #6f607e;
    border-radius: 10px;
}

.delete-goal-btn:hover {
    background-color: #6f607e;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2);
    border-radius: 10px;
    transition-delay: 0.1s;
}

.delete-goal-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid #6f607e;
    transition-delay: 0.1s;
}
    

#current-goal-prompt-msg {
    height: 50px;
    margin: 25px;
    margin-top: 5%;
    font-size: larger;
    border-radius: 12px;
    margin-left: 0%;
    margin-right: 0%;
    text-align: center;
    align-items: center;
    justify-content: center;
    padding-top: 2%;

}


/* 4. Dashboard Elements */

/* Main Timer Buttons */
.timer-btn {
    @apply px-6 py-3 rounded-md text-lg font-bold transition-all duration-200 transform;
}

.timer-btn:hover {
    @apply shadow-lg scale-105;
}

.timer-btn:active {
    @apply scale-95 shadow-inner;
}

.daily-set-set-list{
    margin-top: 15%;
}

/*timer input section*/





/*  Progress Bars (Refined) */
.progress-bar-container {
    width: 100%;
    height: 12px; /* A bit thicker */
    background-color: #f0f0f0; /* <-- This is the NEW "remaining" color (pure white looking) */
    border-radius: 9999px; /* Fully rounded */
    overflow: hidden; /* Ensures the inner bar stays rounded */
}

.progress-bar {
    height: 100%;
    background-color: #6d28d9; /* Default fill color (purple) */
    border-radius: 9999px; /* Fully rounded */
    transition: width 0.3s ease-in-out;
}

/* Specific Progress Bars */
#current-goal-completion-bar {
    background-color: #2563eb; /* Blue for current goal */

}

/* Today's Status Bar container*/

#today-status-bar-container {
    margin-top: auto; /* <--- THIS IS THE MAGIC LINE */
    margin-bottom: 0;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb; /* Optional: Adds a nice separation line */
    
}
#card-3 {
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensures it fills the grid row height */
}


#today-status-bar {
    background-color: #6d28d9; /* Purple for "Today's Status" */
}

/* For 'all-goals-progress-list' in script.js */
.goal-progress-bar-container {
    background-color: #f0f0f0; /* <-- THIS IS THE FIX. Changed grey to white */
    border-radius: 9999px;
    height: 0.75rem;
    overflow: hidden;
    width: 100%;
}
.goal-progress-bar {
    background-color: #10b981; /* Green for completion */
    height: 100%;
    width: 0%;
    border-radius: 9999px;
    transition: width 0.5s ease-in-out;
}


/* 5. Chart Container */
.chart-container {
    position: relative;
    width: 100%;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    height: 320px;
    max-height: 400px;
}

/* Responsive adjustment for chart */
@media (min-width: 768px) {
    .chart-container {
        height: 400px;
    }
}

/* 6. Animations */

/* Fade-in-up animation for cards */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* NEW: Spinner for Auth Loader */
.loader-spinner {
    border: 4px solid #f3f3f3; /* Light grey */
    border-top: 4px solid #3b82f6; /* Blue */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* 7. Accordion Styles (from techniques.html) */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}
.accordion-item.open .accordion-content {
    max-height: 1000px; /* Sufficiently large value */
}

/* 8. Eisenhower Matrix Styles (from timetools.html) */
.eisenhower-quadrant {
    border: 2px dashed #d1d5db;
    min-height: 300px;
    display: flex;
    flex-direction: column;
}
.eisenhower-quadrant ul {
    flex-grow: 1; /* Makes the list grow to fill space */
}

.eisenhower-task-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.eisenhower-task-item label {
    flex-grow: 1;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.eisenhower-task-item input[type="checkbox"] {
    margin-right: 0.5rem;
}

/* Style for completed Eisenhower tasks */
.eisenhower-task-item.completed span {
    text-decoration: line-through;
    color: #9ca3af; /* Muted color */
}

/* 9. NEW: Login Modal & Welcome Page Styles */

/* Base style for social login buttons */
.social-login-btn {
    @apply w-full flex items-center justify-center py-3 px-4 border border-gray-300 rounded-lg shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 transition;
}
/* This is a new style for the <img> tag inside the button */
.social-login-btn img {
    @apply mr-3;
}
.social-login-btn-disabled {
    @apply w-full flex items-center justify-center py-3 px-4 border border-gray-200 rounded-lg shadow-sm text-sm font-medium text-gray-400 bg-gray-100 cursor-not-allowed;
}

/* NEW: This class will visually disable the goal section */
.disabled-section {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* 10. NEW: Current Goal Success Message */
#current-goal-success-msg {
    background-color: #dcfce7; /* Light green background */
    color: #166534; /* Dark green text */
    border: 2px solid #86efac; /* A slightly darker green border */
    
    /* Animation for it to appear */
    animation: fadeInUp 0.5s ease-out;
}

/* 11. NEW: Current Goal Prompt Message */
#current-goal-prompt-msg {
    background-color: #32bd67b3; /* Light gray background */
    color: #ffffff; /* Dark gray text */
    border: 2px solid #e5e7eb; /* A slightly darker gray border */
    
    /* Animation for it to appear */
    animation: fadeInUp 0.5s ease-out;
}

/* 12. NEW: Global Disabled Styles */
/* This will automatically apply to any <input> or <button>
   when you set '.disabled = true' in JavaScript. */
input:disabled,
button:disabled {
    opacity: 0.5;
    cursor: not-allowed;

}

/* 13. NEW: Premium Light Glassmorphism Card (Refined for Purple BG) */
.history-card-premium {
    /* The "light glass" effect - more transparent, more blur on purple */
    background-color: rgba(255, 255, 255, 0.15); /* Slightly transparent white */
    backdrop-filter: blur(20px) saturate(1.8); /* Stronger blur and saturation */
    
    /* Subtle border that works on dark backgrounds */
    border: 1px solid rgba(255, 255, 255, 0.2); 
    
    /* Standard card styles */
    border-radius: 0.75rem; /* 12px */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); /* Deeper shadow for depth on dark background */
    transition: transform 0.3s ease-in-out;
    padding: 2rem; /* Keep increased padding for bigger cards (32px) */
    
    /* Added some bottom margin to separate cards more */
    margin-bottom: 1.5rem;
}

.history-card-premium:hover {
    transform: translateY(-7px); /* More noticeable lift on hover */
}


/* =========================================
   14. FIXED: HISTORY SECTION THEME LOGIC
   ========================================= */

/* A) BASE HISTORY CONTAINER (Default Layout) */
#history {
    /* No background color by default - lets the theme body show through */
    background: transparent; 
    padding-top: 3rem;
    padding-bottom: 3rem;
    margin-top: -3rem; 
    margin-bottom: -3rem;
    border-radius: 0.5rem;
}

/* B) COLOUR POP THEME ONLY: The Vibrant Purple Gradient */
[data-theme="colourpop"] #history {
    background-image: linear-gradient(120deg, #3f51b5, #9c27b0);
    box-shadow: 0 10px 30px rgba(156, 39, 176, 0.3);
}

/* C) NIGHT GLASS (iOS) THEME ONLY: Glass Effect */
[data-theme="ios"] #history {
    background-color: rgba(0, 0, 0, 0.2); /* Subtle dark tint */
    backdrop-filter: blur(30px); /* Heavy Blur */
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* D) TEXT COLORS: Handle visibility based on theme */

/* 1. Default (Light Mode): Dark Text */
#history h1, #history h2, #history h3, #history h4 {
    color: #1f2937; /* Dark Gray */
}
#history p, #history .text-gray-600 {
    color: #4b5563; /* Medium Gray */
}

/* 2. Dark Themes (Dark, Colour Pop, Night Glass): FORCE White Text */
[data-theme="dark"] #history h1, [data-theme="dark"] #history h2, [data-theme="dark"] #history h3, [data-theme="dark"] #history h4,
[data-theme="colourpop"] #history h1, [data-theme="colourpop"] #history h2, [data-theme="colourpop"] #history h3, [data-theme="colourpop"] #history h4,
[data-theme="ios"] #history h1, [data-theme="ios"] #history h2, [data-theme="ios"] #history h3, [data-theme="ios"] #history h4 {
    color: #ffffff !important;
}

[data-theme="dark"] #history p, [data-theme="dark"] #history .text-gray-600,
[data-theme="colourpop"] #history p, [data-theme="colourpop"] #history .text-gray-600,
[data-theme="ios"] #history p, [data-theme="ios"] #history .text-gray-600 {
    color: #e2e8f0 !important; /* Light Gray text */
}
/* Ensure history titles are white on this dark background */
#history h1, #history h2, #history h3, #history p {
    color: #ffffff !important;
}

/* Ensure subtitle text is also light */
#history .text-gray-600 { /* For "Review your past daily progress..." */
    color: #e0e0e0 !important;
}

/* 15. NEW: Text Color Overrides for Dark BG */

/* This targets all main titles and subtitles in each section */
.view > .text-center {
    color: #ffffff;
}
.view > .text-center p {
    color: #e0e0e0; /* Lighter grey for subtitles */
}



/* Footer text */
footer {
    color: #e0e0e0;
}

/* 16. NEW: Current Goal V4 (White Inner Cards) */

/* 1. Main Title */
.current-goal-title {
    @apply font-bold text-2xl text-gray-800; /* Darker title text */
    font-size: x-large;
    font-weight: bold;
    
    
}



/* 2. Inner Floating Glass Cards (NOW OPAQUE WHITE) */
.glass-inner-card {
    background-color: #ffffff; /* OPAQUE WHITE */
    border: 1px solid #e5e7eb; /* Standard light border */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border-radius: 1.5rem; /* 24px */
    padding: 1.1rem; /* 24px */
}

/* 3. Timer Input Fields (LIGHT GREY) */
.timer-input-glass {
    @apply w-full p-3 border-none rounded-2xl text-center text-lg font-bold;
    background-color: #f3f4f6; /* Light grey background */
    color: #1f2937; /* DARK TEXT */
    caret-color: #3b82f6;
}
.timer-input-glass::placeholder {
    color: #9ca3af; /* Medium grey placeholder */
}
.timer-input-glass:focus {
    @apply ring-2 ring-blue-500;
} 

#timer-display {
    @apply text-6xl font-bold text-blue-600 mt-0; /* Dark blue timer text */
}

/*timer input section*/

#timer-set-inputs-container-inner {
    @apply w-full p-3 border-none rounded-2xl text-center text-lg font-bold;
    background-color: rgba(174, 118, 223, 0.479); /* More white, less transparent */
    text-align: center;
    
}

.timer-set-input-tools {
    background-color: rgba(48, 218, 198, 0.871);
    text-align: center;
    
}

#timer-hours, #timer-minutes, #timer-seconds {
    background-color: rgb(255, 255, 255);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    text-align: center;
}

/* 4. "Save Time to Goal" Button (TRANSLUCENT PURPLE) */
/* --- UPDATED: Save Button Styling (Sparking & Disabled States) --- */

/* 1. Define the "Sparking" Animation */
@keyframes glowingPulse {
    0% {
        box-shadow: 0 0 5px rgba(139, 92, 246, 0.5), 0 0 10px rgba(139, 92, 246, 0.3);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 20px rgba(139, 92, 246, 0.8), 0 0 30px rgba(59, 130, 246, 0.6);
        transform: scale(1.02);
    }
    100% {
        box-shadow: 0 0 5px rgba(139, 92, 246, 0.5), 0 0 10px rgba(139, 92, 246, 0.3);
        transform: scale(1);
    }
}

#timer-save-btn {
    @apply w-full py-3 px-4 text-base font-bold rounded-2xl transition-all duration-300; 
    margin-left: 25%;
    margin-right: 25%;
    width: 65%;
    border-radius: 15px;
    border: 1px solid transparent;
}

/* --- STATE: ENABLED (Ready to Save) --- */
#timer-save-btn:not(:disabled) {
    /* Colorful, High Opacity, Glowing */
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.9), rgba(59, 130, 246, 0.9)); 
    color: #ffffff; /* White text for better contrast */
    cursor: pointer;
    opacity: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    
    /* The Sparking Animation */
    animation: glowingPulse 2s infinite ease-in-out;
}

#timer-save-btn:not(:disabled):hover {
    /* Stop animation on hover and solidify */
    animation: none;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(124, 58, 237, 0.6); 
    background: linear-gradient(135deg, #8b5cf6, #3b82f6);
}

#timer-save-btn:not(:disabled):active {
    transform: translateY(0);
}

/* --- STATE: DISABLED (Saved or Zero) --- */
#timer-save-btn:disabled {
    /* Gray, Low Opacity, Flat */
    background-color: #e5e7eb; /* Light Gray */
    color: #9ca3af; /* Gray Text */
    border: 1px solid #d1d5db;
    cursor: not-allowed;
    opacity: 0.6;
    box-shadow: none;
    transform: none;
    animation: none; /* No glow */
    pointer-events: none; /* No hover effects */
}
#timer-save-btn:hover {
    background-color: rgba(139, 92, 246, 0.25); /* Brighter on hover */
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
    transform: translateY(-2px); /* Slight lift */
    color: rgb(117, 37, 191);
    border-bottom: 3px solid rgba(180, 114, 223, 0.324);
}
#timer-save-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

/* 5. Large Timer Display */
#timer-display {
    @apply text-6xl font-bold text-blue-600 mt-0; /* Dark blue timer text */
}

/* 6. "Bubble" Control Buttons (TRANSLUCENT) */
.control-btn-bubble {
    @apply py-3 w-full rounded-2xl text-lg font-bold transition-all duration-200; /* Rounded corners, bold text */
    backdrop-filter: blur(5px);
    border: 1px solid rgba(0, 0, 0, 0.08); /* Slightly more visible border */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Subtle shadow */
}
.control-btn-bubble:hover {
    transform: translateY(-2px); /* Slight lift */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.control-btn-bubble:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

/* 7. Bubble Button Colors (TRANSLUCENT + DARK TEXT) */
#timer-start-btn {
    background-color: rgba(59, 131, 246, 0.406); /* Translucent Blue */
    color: #0135c6; /* DARK BLUE TEXT */
    border-radius: 13px;
}
#timer-start-btn:hover {
    background-color: rgba(59, 131, 246, 0.753); /* Slightly less translucent on hover */
    color: #012a9c; /* DARKER BLUE TEXT */
}

#timer-pause-btn {
    background-color: rgba(209, 213, 219, 0.365); /* Translucent Grey */
    color: #374151; /* DARK GREY TEXT */
    border-radius: 13px;
}
#timer-pause-btn:hover {
    background-color: rgba(209, 213, 219, 0.6); /* Slightly less translucent on hover */
    color: #162131; /* DARKER GREY TEXT */
}

#timer-reset-btn {
    background-color: rgba(239, 114, 68, 0.413); /* Translucent Red */
    color: #b91c1c; /* DARK RED TEXT */
    border-radius: 13px;
}
#timer-reset-btn:hover {
    background-color: rgba(239, 68, 68, 0.489); /* Slightly less translucent on hover */
    color: #a21414; /* DARKER RED TEXT */
}

#timer-done-btn {
    background-color: rgba(16, 185, 129, 0.422); /* Translucent Green */
    color: #056147; /* DARK GREEN TEXT */
    border-radius: 13px;
}

#timer-done-btn:hover {
    background-color: rgba(16, 185, 129, 0.65); /* Slightly less translucent on hover */
    color: #036247; /* DARKER GREEN TEXT */
}

/* --- FIX FOR GRAPH LOCK SCREEN TEXT --- */
/* This overrides the "White Text" rule specifically for the lock screen card */

#history #graph-lock-screen h3,
#history #graph-lock-screen p {
    color: #1f2937 !important; /* Force Dark Gray Text */
}

#history #graph-lock-screen .text-blue-600 {
    color: #2563eb !important; /* Force Blue Icon */
}

/* --- FIX FOR CARD HISTORY UPGRADE MESSAGE --- */
/* This targets the "See Your Full History" card at the bottom of the list */

/* We target the h4 (title) and p (subtitle) inside the upgrade div */
#history-container div.text-center h4,
#history-container div.text-center p {
    color: #1f2937 !important; /* Force Dark Gray Text */
}


/* LOGIN PAGE STYLING (GLASS MORPHISM) */
/* --- GLASS MODAL THEME (New Login Style) --- */

/* 1. The Glass Container */
.glass-panel {
    background: rgba(255, 255, 255, 0.15); /* Low opacity white */
    backdrop-filter: blur(20px); /* The blur effect */
    -webkit-backdrop-filter: blur(20px); /* For Safari */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle border */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); /* Deep shadow */
    color: white !important; /* Force white text */
}

/* 2. Glass Inputs */
.glass-input-field {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    transition: all 0.3s ease;
}
.glass-input-field::placeholder {
    color: #e0e0e0 !important; /* Light gray placeholder */
}
.glass-input-field:focus {
    background: rgba(255, 255, 255, 0.3) !important;
    outline: none;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

/* 3. Buttons (Matching the reference image) */
.btn-glass-green {
    background: linear-gradient(135deg, #84cc16, #22c55e); /* Lime to Green */
    color: white;
    border: none;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
}
.btn-glass-green:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
}

.btn-glass-blue {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    backdrop-filter: blur(5px);
}
.btn-glass-blue:hover {
    background: rgba(255, 255, 255, 0.3);
}

.btn-glass-red {
    background: #ea4335; /* Google Red */
    color: white;
    border: none;
    font-weight: bold;
}
.btn-glass-red:hover {
    background: #d93025;
}

/* --- PREMIUM DASHBOARD INPUTS --- */

.premium-input {
    /* Glass Effect */
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    /* Borders & Shape */
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 1rem; /* 16px for that smooth oval look */
    
    /* Floating Shadow */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 
                0 2px 4px -1px rgba(0, 0, 0, 0.03);
    
    /* Text & Transitions */
    color: #374151; /* Gray-700 */
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.premium-input:focus {
    background: #ffffff; /* Solid white on focus */
    transform: translateY(-2px); /* Lift up slightly */
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.15), /* Blue glow shadow */
                0 4px 6px -2px rgba(37, 99, 235, 0.1);
    border-color: #60a5fa; /* Light blue border */
    outline: none;
}

.premium-input::placeholder {
    color: #9ca3af; /* Gray-400 */
}

/* --- CUSTOMIZE DATE PICKER ICON --- */

/* Remove default ugly styles */
input[type="date"].premium-input {
    position: relative;
    padding-right: 10px;
    color: #4b5563; /* Gray-600 */
}

/* Target the calendar icon specifically */
input[type="date"].premium-input::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    /* This makes the WHOLE input clickable to open the calendar, 
       which feels much better on mobile and desktop */
}

/* Add a custom icon using a background image on the input itself 
   so we have total control */
input[type="date"].premium-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%232563eb'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.25rem;
}

/* Hide the default icon but keep functionality */
input[type="date"].premium-input::-webkit-inner-spin-button,
input[type="date"].premium-input::-webkit-calendar-picker-indicator {
    opacity: 0; /* Make the native icon invisible but clickable */
}

/* =========================================
   CUSTOM FLATPICKR THEME (Fixed Width & Shortcuts)
   ========================================= */

/* 1. The Calendar Container (Base / Light Mode) */
.flatpickr-calendar {
    width: 340px !important; /* Increased width to fit Saturday */
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 0 20px rgba(37, 99, 235, 0.2) !important; /* Blue Glow */
    font-family: 'Inter', sans-serif !important;
    padding: 12px !important;
    z-index: 9999 !important;
    animation: fpFadeInDown 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* 2. Header (Month/Year) Visibility Fix */
.flatpickr-months {
    background: transparent !important;
    margin-bottom: 10px !important;
    align-items: center !important;
}
.flatpickr-current-month {
    font-size: 110% !important;
    font-weight: 800 !important;
    color: #1f2937 !important; /* Dark Text */
    padding-top: 0 !important;
}
/* Fix Year Input Visibility */
.flatpickr-current-month input.cur-year {
    color: #1f2937 !important; /* Force Dark Text */
    font-weight: 700 !important;
}
.flatpickr-prev-month, .flatpickr-next-month {
    fill: #2563eb !important; /* Blue Arrows */
    padding: 10px !important;
}

/* 3. Weekdays */
.flatpickr-weekdays {
    margin-bottom: 8px !important;
}
span.flatpickr-weekday {
    color: #6b7280 !important; /* Gray-500 */
    font-weight: 700 !important;
    font-size: 0.9rem !important;
}

/* 4. Days (The numbers) */
.flatpickr-day {
    border-radius: 8px !important;
    color: #374151 !important;
    font-weight: 600 !important;
    border: none !important;
    height: 38px !important;
    line-height: 38px !important;
    margin-top: 2px !important;
}
.flatpickr-day:hover {
    background: #eff6ff !important;
    color: #2563eb !important;
}
.flatpickr-day.today {
    border: 2px solid #2563eb !important;
    background: transparent !important;
    color: #2563eb !important;
}
.flatpickr-day.selected {
    background: #2563eb !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.4) !important;
}

/* 5. SHORTCUT BUTTONS FOOTER (New Feature) */
.flatpickr-footer {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #e2e8f0;
}
.flatpickr-shortcut-btn {
    flex: 1;
    padding: 8px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
    background-color: #f3f4f6;
    color: #374151;
    border: none;
}
.flatpickr-shortcut-btn:hover {
    background-color: #dbeafe;
    color: #2563eb;
}

/* --- DARK MODE OVERRIDES --- */
[data-theme="dark"] .flatpickr-calendar {
    background: #1e293b !important; /* Slate 800 */
    border: 1px solid #334155 !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(96, 165, 250, 0.3) !important; /* Blue Glow */
}
[data-theme="dark"] .flatpickr-current-month,
[data-theme="dark"] .flatpickr-current-month input.cur-year {
    color: #f8fafc !important; /* White Text */
}
[data-theme="dark"] .flatpickr-prev-month, 
[data-theme="dark"] .flatpickr-next-month {
    fill: #60a5fa !important; /* Lighter Blue */
}
[data-theme="dark"] span.flatpickr-weekday {
    color: #94a3b8 !important;
}
[data-theme="dark"] .flatpickr-day {
    color: #e2e8f0 !important;
}
[data-theme="dark"] .flatpickr-day:hover {
    background: #334155 !important;
    color: #60a5fa !important;
}
[data-theme="dark"] .flatpickr-day.today {
    border-color: #60a5fa !important;
    color: #60a5fa !important;
}
[data-theme="dark"] .flatpickr-day.selected {
    background: #3b82f6 !important;
    color: #ffffff !important;
}
[data-theme="dark"] .flatpickr-footer {
    border-top-color: #334155;
}
[data-theme="dark"] .flatpickr-shortcut-btn {
    background-color: #334155;
    color: #e2e8f0;
}
[data-theme="dark"] .flatpickr-shortcut-btn:hover {
    background-color: #2563eb;
    color: white;
}

/* --- NIGHT GLASS (iOS) OVERRIDES --- */
[data-theme="ios"] .flatpickr-calendar {
    background: rgba(20, 20, 20, 0.85) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5), 0 0 25px rgba(56, 189, 248, 0.3) !important;
}
[data-theme="ios"] .flatpickr-current-month,
[data-theme="ios"] .flatpickr-current-month input.cur-year {
    color: #ffffff !important;
}
[data-theme="ios"] span.flatpickr-weekday {
    color: #cbd5e1 !important;
}
[data-theme="ios"] .flatpickr-day {
    color: #ffffff !important;
}
[data-theme="ios"] .flatpickr-day:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}
[data-theme="ios"] .flatpickr-footer {
    border-top-color: rgba(255, 255, 255, 0.2);
}
[data-theme="ios"] .flatpickr-shortcut-btn {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}
[data-theme="ios"] .flatpickr-shortcut-btn:hover {
    background-color: rgba(56, 189, 248, 0.5);
}

/* --- SCROLLABLE LIST CONTAINERS --- */

/* 1. Today's Goals List (Fits approx 4 items) */
.scrollable-list-today {
    max-height: 260px; /* Height for roughly 4 items */
    overflow-y: auto;  /* Show scrollbar only when needed */
    padding-right: 5px; /* Space for the scrollbar */
}

/* 2. Upcoming Goals List (Fits approx 2 items) */
.scrollable-list-upcoming {
    max-height: 140px; /* Height for roughly 2 items */
    overflow-y: auto;
    padding-right: 5px;
}

/* 3. Progress List (Card 3) */
.scrollable-list-progress {
    /* MOBILE LOGIC: Shorter height for phones so the user isn't stuck scrolling */
    max-height: 300px; 
    
    /* SCROLLING & VISUALS */
    overflow-y: auto;
    background-color: rgba(255, 255, 255, 0.3);
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px;
    margin-top: 1rem;    
    margin-bottom: 1rem;
}

/* DESKTOP LOGIC: Restore your specific 530px limit on screens wider than 768px (Tablets/PC) */
@media (min-width: 768px) {
    .scrollable-list-progress {
        max-height: 530px;
    }
}

/* --- UNIFIED PREMIUM WINDOWS 11 SCROLLBARS --- */
/* Applies to: Today's Goals (Card 1), Upcoming Goals (Card 1), and Progress List (Card 3) */

/* 1. The Container: Set the 'Hitbox' width */
.scrollable-list-today::-webkit-scrollbar,
.scrollable-list-upcoming::-webkit-scrollbar,
.scrollable-list-progress::-webkit-scrollbar {
    width: 12px; /* Wide hitbox for easy clicking */
    background-color: transparent; /* Invisible track */
}

/* 2. The Track: Totally transparent spacing */
.scrollable-list-today::-webkit-scrollbar-track,
.scrollable-list-upcoming::-webkit-scrollbar-track,
.scrollable-list-progress::-webkit-scrollbar-track {
    background: transparent;
    margin-top: 4px;
    margin-bottom: 4px;
}

/* 3. The Thumb (Default State - Thin & Sleek) */
.scrollable-list-today::-webkit-scrollbar-thumb,
.scrollable-list-upcoming::-webkit-scrollbar-thumb,
.scrollable-list-progress::-webkit-scrollbar-thumb {
    background-color: rgba(75, 85, 99, 0.4); /* Subtle dark grey transparency */
    border-radius: 20px; /* Pill shape */
    
    /* THE TRICK: Thick transparent borders squeeze the visible color inward */
    border: 4px solid transparent; 
    background-clip: content-box; /* Clips background to inside the border */
    
    transition: background-color 0.3s ease, border 0.3s ease;
}

/* 4. The Thumb (Hover State - Expanded & Darker) */
.scrollable-list-today::-webkit-scrollbar-thumb:hover,
.scrollable-list-upcoming::-webkit-scrollbar-thumb:hover,
.scrollable-list-progress::-webkit-scrollbar-thumb:hover {
    background-color: rgba(75, 85, 99, 0.7); /* Darker on hover */
    
    /* Remove the border squeeze so it expands to fill the 12px width */
    border: 1px solid transparent; 
}

/* =========================================
   AI WIDGET STYLES (Fixed Dark Mode & Resizing)
   ========================================= */

/* 1. Show/Hide Animation */
.ai-open {
    display: flex !important;
    opacity: 1 !important;
    transform: scale(100%) !important;
}

/* 2. RESIZE HANDLES */
.resize-handle {
    position: absolute;
    background-color: rgba(139, 92, 246, 0.5); /* Purple handle */
    border-radius: 999px;
    transition: background-color 0.2s;
    z-index: 20;
}
.resize-handle:hover, .resize-handle.resizing {
    background-color: #7c3aed; /* Darker purple on hover/drag */
}

/* Top Handle (expands up) */
.resize-handle-top {
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 6px;
    cursor: ns-resize; /* Up/Down cursor */
}

/* Left Handle (expands left) */
.resize-handle-left {
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 60px;
    cursor: ew-resize; /* Left/Right cursor */
}

/* 3. LIGHT THEME (Default) */
.ai-theme-light #ai-chat-window {
    background-color: #ffffff;
    border-color: #e5e7eb;
}
.ai-theme-light #ai-messages-area {
    background-color: #ffffff;
}
.ai-theme-light .ai-bot-bubble {
    background-color: #f3f4f6;
    color: #1f2937;
    border: 1px solid #e5e7eb;
}
.ai-theme-light #ai-footer {
    background-color: #f9fafb; /* Light gray footer */
    border-top-color: #e5e7eb;
}
.ai-theme-light #ai-input {
    background-color: #ffffff;
    color: #1f2937;
    border: 1px solid #d1d5db;
}

/* 4. DARK THEME (Fixed) */
.ai-theme-dark #ai-chat-window {
    background-color: #111827; /* Dark background */
    border-color: #374151;
}
.ai-theme-dark .bg-gray-100, 
.ai-theme-dark .bg-gradient-to-r {
    /* Fix Header Background */
    background: #1f2937 !important; 
    border-color: #374151 !important;
}
.ai-theme-dark h3, .ai-theme-dark .text-gray-800 {
    color: #f3f4f6 !important; /* Fix Text Color */
}
.ai-theme-dark #ai-messages-area {
    background-color: #111827; /* Dark message area */
}
/* Fix Footer/Input Area Background */
.ai-theme-dark #ai-footer {
    background-color: #1f2937 !important;
    border-top-color: #374151 !important;
}
.ai-theme-dark #ai-input {
    background-color: #374151 !important; /* Dark Input box */
    color: #ffffff !important; /* White typing text */
    border-color: #4b5563 !important;
}
.ai-theme-dark #ai-input::placeholder {
    color: #9ca3af;
}

/* Dark Theme Bubbles */
.ai-theme-dark .ai-user-bubble {
    background: linear-gradient(135deg, #6d28d9, #4f46e5);
    color: white;
    border: none;
}
.ai-theme-dark .ai-bot-bubble {
    background-color: #1f2937;
    border: 1px solid #374151;
    color: #e5e7eb;
}

/* Common Bubble Styles */
.ai-bot-bubble, .ai-user-bubble {
    font-size: 0.95rem; /* Slightly larger text */
    line-height: 1.5;
}

/* =========================================
   AI WIDGET SCROLLBAR (Windows 11 Style)
   ========================================= */

/* 1. The Scrollbar Container (The "Hitbox") */
#ai-messages-area::-webkit-scrollbar {
    width: 12px; /* Total width including the invisible hover area */
    background-color: transparent;
}

/* 2. The Track (Background) */
#ai-messages-area::-webkit-scrollbar-track {
    background-color: transparent;
    margin-top: 4px;
    margin-bottom: 4px;
}

/* 3. The Thumb (The Moving Part) - Default Thin State */
#ai-messages-area::-webkit-scrollbar-thumb {
    /* Light Mode Default Color */
    background-color: rgba(156, 163, 175, 0.5); 
    border-radius: 20px;
    
    /* THE TRICK: A thick transparent border squeezes the color into a thin line */
    border: 4px solid transparent; 
    background-clip: content-box; /* Keeps the color inside the border */
    
    transition: background-color 0.3s ease, border 0.3s ease;
}

/* 4. The Thumb - Hover State (Expands) */
#ai-messages-area::-webkit-scrollbar-thumb:hover {
    /* Make it darker/more visible */
    background-color: rgba(107, 114, 128, 0.8); 
    
    /* Reduce border to 1px, allowing the color to fill the 12px width */
    border: 1px solid transparent; 
}

/* 5. DARK THEME SPECIFIC STYLES */
/* When the AI window has the class 'ai-theme-dark' */

.ai-theme-dark #ai-messages-area::-webkit-scrollbar-thumb {
    /* Dark Mode: Lighter gray so it pops against the black bg */
    background-color: rgba(255, 255, 255, 0.3); 
}

.ai-theme-dark #ai-messages-area::-webkit-scrollbar-thumb:hover {
    /* Dark Mode Hover: Brighter white */
    background-color: rgba(255, 255, 255, 0.6); 
}

/* =========================================
   AI CANVAS & ACTION BAR STYLES
   ========================================= */

/* 1. The Canvas Container (Wrapper for Bot Messages) */
/* We override padding here to handle the header/footer layout manually */
.ai-canvas-bubble {
    padding: 0 !important; 
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Ensures the footer respects rounded corners */
}

/* 2. The Text Content Area */
.ai-content-area {
    padding: 16px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: inherit;
}

/* 3. The Action Bar (Footer) */
.ai-action-bar {
    display: flex;
    justify-content: flex-end; /* Align buttons to right */
    gap: 8px;
    padding: 8px 12px;
    border-top: 1px solid;
    transition: background-color 0.3s ease;
}

/* 4. Action Buttons (Copy & Share) */
.ai-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    background: transparent;
    border: none;
}

/* --- LIGHT THEME COLORS --- */
.ai-theme-light .ai-action-bar {
    background-color: rgba(0, 0, 0, 0.02); /* Very subtle grey */
    border-top-color: rgba(0, 0, 0, 0.05);
}
.ai-theme-light .ai-action-btn {
    color: #6b7280; /* Gray-500 */
}
.ai-theme-light .ai-action-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: #374151;
}

/* --- DARK THEME COLORS --- */
.ai-theme-dark .ai-action-bar {
    background-color: rgba(255, 255, 255, 0.03); /* Very subtle white */
    border-top-color: rgba(255, 255, 255, 0.1);
}
.ai-theme-dark .ai-action-btn {
    color: #9ca3af; /* Gray-400 */
}
.ai-theme-dark .ai-action-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #f3f4f6;
}

/* =========================================
   GAMIFICATION STYLES
   ========================================= */

/* 1. Pop-up Text Animation (+50 XP) */
@keyframes floatUpFade {
    0% { 
        opacity: 0; 
        transform: translate(-50%, 10px) scale(0.8); 
    }
    20% { 
        opacity: 1; 
        transform: translate(-50%, -15px) scale(1.1); 
        text-shadow: 0 2px 10px rgba(22, 163, 74, 0.4); 
    }
    100% { 
        opacity: 0; 
        transform: translate(-50%, -60px) scale(1); 
    }
}

.xp-popup-text {
    position: absolute;
    /* Centers text on the anchor point */
    left: 50%; 
    top: 0;
    font-weight: 800;
    font-size: 15px;
    color: #15803d; /* Darker Green for visibility */
    pointer-events: none; 
    animation: floatUpFade 2.5s ease-out forwards;
    white-space: nowrap;
    z-index: 100;
}

/* 2. Level Up Overlay (Full Screen Blur) */
#level-up-overlay {
    opacity: 0;
    transition: opacity 0.5s ease;
    backdrop-filter: blur(12px); /* Heavy blur */
    -webkit-backdrop-filter: blur(12px);
    background-color: rgba(0, 0, 0, 0.4); /* Dark dimming */
}

/* 3. Dark Mode Support */
[data-theme="dark"] #current-level-badge {
    background-color: #fbbf24; 
    color: #000;
    border-color: #1e293b;
}

[data-theme="dark"] .xp-popup-text {
    color: #4ade80; /* Brighter Green for dark mode */
    text-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
}

[data-theme="dark"] #xp-dashboard-widget .bg-gray-200 {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* =========================================
   XP WIDGET THEME LOGIC
   ========================================= */

/* --- 1. DEFAULT / LIGHT THEME --- */
#xp-dashboard-widget {
    background-color: rgba(255, 255, 255, 0.6); /* Semi-transparent White */
    border: 1px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.xp-widget-label { color: #64748b; /* Gray-500 */ }
.xp-widget-value { color: #334155; /* Gray-700 */ }
.xp-bar-track {
    background-color: #e2e8f0; /* Gray-200 */
    border-color: #cbd5e1;
}
.xp-next-level-icon {
    background-color: #f1f5f9;
    color: #94a3b8;
}

/* --- 2. DARK MODE OVERRIDES --- */
[data-theme="dark"] #xp-dashboard-widget {
    background-color: rgba(30, 41, 59, 0.6); /* Semi-transparent Slate-800 */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .header-welcome-text { color: #ffffff !important; }
[data-theme="dark"] .header-subtitle-text { color: #cbd5e1 !important; }

[data-theme="dark"] .xp-widget-label { color: #94a3b8 !important; /* Light Gray */ }
[data-theme="dark"] .xp-widget-value { color: #f8fafc !important; /* White */ }

[data-theme="dark"] .xp-bar-track {
    background-color: rgba(255, 255, 255, 0.1); /* Darker Track */
    border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .xp-next-level-icon {
    background-color: #0f172a;
    border-color: #334155;
    color: #64748b;
}

/* --- 3. COLOUR POP OVERRIDES --- */
[data-theme="colourpop"] #xp-dashboard-widget {
    background-color: rgba(255, 255, 255, 0.85); /* More Opaque White */
    border: 2px solid rgba(255, 255, 255, 1);
}
[data-theme="colourpop"] .header-welcome-text { color: #ffffff !important; text-shadow: 0 2px 4px rgba(0,0,0,0.1); }
[data-theme="colourpop"] .header-subtitle-text { color: #f1f5f9 !important; font-weight: 500; }

/* --- 4. NIGHT GLASS (iOS) OVERRIDES --- */
[data-theme="ios"] #xp-dashboard-widget {
    background-color: rgba(0, 0, 0, 0.3); /* Dark Glass */
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px) saturate(180%);
}
[data-theme="ios"] .header-welcome-text { color: #ffffff !important; }
[data-theme="ios"] .header-subtitle-text { color: #cbd5e1 !important; }

[data-theme="ios"] .xp-widget-label { color: #cbd5e1 !important; }
[data-theme="ios"] .xp-widget-value { color: #ffffff !important; }

[data-theme="ios"] .xp-bar-track {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}
[data-theme="ios"] .xp-next-level-icon {
    background-color: rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* =========================================
   XP WIDGET GLOW EFFECTS
   ========================================= */

/* 1. Badge Pulse Animation (Attracts Attention) */
@keyframes badgePulse {
    0% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.7); transform: scale(1); }
    70% { box-shadow: 0 0 0 10px rgba(234, 179, 8, 0); transform: scale(1.05); }
    100% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0); transform: scale(1); }
}

.xp-badge-glow {
    animation: badgePulse 2s infinite;
}

/* 2. Container Glow Logic (Theme Specific) */

/* Default Light Mode: Blue/Purple Glow */
.xp-container-glow {
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.15), 0 0 0 1px rgba(37, 99, 235, 0.1);
}

/* Dark Mode: White/Blue Glow */
[data-theme="dark"] .xp-container-glow {
    box-shadow: 0 0 25px rgba(56, 189, 248, 0.15), 0 0 0 1px rgba(56, 189, 248, 0.2);
}

/* Colour Pop: White Halo */
[data-theme="colourpop"] .xp-container-glow {
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 0 2px rgba(255, 255, 255, 0.8);
}

/* Night Glass: Neon Green/Blue Glow */
[data-theme="ios"] .xp-container-glow {
    box-shadow: 0 0 30px rgba(34, 197, 94, 0.15), inset 0 0 20px rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* 3. Text Visibility Boosts */
/* Increase contrast for the labels in all themes */
.xp-widget-label { opacity: 0.9; }
.xp-widget-value { letter-spacing: 0.5px; }

/* =========================================
   FIX: SUCCESS MESSAGE VISIBILITY
   ========================================= */

/* Force the Success Message to always have Dark Text on the Light Green Background */
#current-goal-success-msg {
    color: #14532d !important; /* Dark Green/Black Text */
    background-color: #dcfce7 !important; /* Light Green Background */
    border-color: #86efac !important;
    font-weight: 700 !important;
}

/* Specific override for Dark/Night themes to prevent white text inheritance */
[data-theme="dark"] #current-goal-success-msg,
[data-theme="ios"] #current-goal-success-msg {
    color: #052e16 !important; /* Extra Dark Green (almost black) */
    background-color: #dcfce7 !important; /* Keep background light */
}

/* =========================================
   FIX: HISTORY GOAL NAMES VISIBILITY
   ========================================= */

/* Force goal names (list items) to be White in Dark & Night Glass themes */
[data-theme="dark"] #history li,
[data-theme="ios"] #history li {
    color: #ffffff !important; /* Pure White */
}

/* Optional: Make the small "Set: 00:00 | Spent: 00:00" text lighter too */
[data-theme="dark"] #history li .text-gray-500,
[data-theme="ios"] #history li .text-gray-500 {
    color: #94a3b8 !important; /* Lighter Gray (Slate-400) for readability */
}

/* AI Chat Bold Text */
.ai-content-area strong {
    font-weight: 700;
    color: #4f46e5; /* Indigo-600 (or your theme color) */
}

/* Dark Mode Override */
[data-theme="dark"] .ai-content-area strong {
    color: #818cf8; /* Indigo-400 */
}

/* =========================================
   FIX: AI CHAT HEADING COLORS (DARK MODE)
   ========================================= */

/* 1. Light Mode (Default) - Keep it as is */
/* The default strong tag is likely inheriting the blue color you liked. 
   We ensure it stays that way. */
.ai-content-area strong {
    color: #2563eb; /* Bright Blue (Tailwind blue-600) */
}

/* 2. Dark Mode Overrides */
[data-theme="dark"] .ai-content-area strong,
[data-theme="ios"] .ai-content-area strong {
    color: #60a5fa !important; /* Lighter Blue (Tailwind blue-400) for better contrast */
}

/* 3. Colour Pop Override (Optional, to keep it white/bright) */
[data-theme="colourpop"] .ai-content-area strong {
    color: #4f46e5 !important; /* Indigo-600 to match theme */
}

/* =========================================
   PROGRESS SECTION STYLES
   ========================================= */

/* Slow Bounce for the Main Flame */
@keyframes bounceSlow {
    0%, 100% { transform: translateY(-5%); }
    50% { transform: translateY(5%); }
}
.animate-bounce-slow {
    animation: bounceSlow 3s infinite ease-in-out;
}

/* Modal Scale In Animation */
.scale-in {
    transform: scale(1) !important;
}

/* Theme Overrides for Progress Section */
[data-theme="dark"] .card h3, [data-theme="dark"] .streak-day-label {
    color: #ffffff !important;
}
[data-theme="dark"] .card p {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .bg-orange-100 {
    background-color: rgba(234, 88, 12, 0.2) !important; /* Dark Orange tint */
    border-color: rgba(234, 88, 12, 0.4) !important;
}
[data-theme="ios"] .bg-orange-100 {
    background-color: rgba(234, 88, 12, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* =========================================
   FIX: PERMANENT VISIBILITY FOR NUMBER INPUT SPINNER ARROWS
   ========================================= */

/* 1. Webkit Browsers (Chrome, Safari) */
/* This rule makes the arrows always visible on number inputs */
#timer-section input[type="number"]::-webkit-outer-spin-button,
#timer-section input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: always !important; 
    opacity: 1 !important; /* Ensure opacity is not zero */
    margin: 0; /* Remove default margin for clean alignment */
}

/* 2. Standard CSS / Firefox */
/* This rule is generally less effective for forcing permanent visibility
   but included for completeness and to override default styles. */
#timer-section input[type="number"] {
    -moz-appearance: textfield; /* Standard way to style number inputs in Firefox */
}

/* 3. Theme Adaptation */
/* Adjust the color of the spinner arrows based on the theme
   (The arrow color often inherits the text color, but this provides a fallback/override) */

/* General / Light Mode Appearance */
#timer-section input[type="number"]::-webkit-inner-spin-button {
    color: var(--text-muted); /* Use muted color for the arrows */
}

/* Dark Mode Appearance */
[data-theme="dark"] #timer-section input[type="number"]::-webkit-inner-spin-button,
[data-theme="ios"] #timer-section input[type="number"]::-webkit-inner-spin-button,
[data-theme="night"] #timer-section input[type="number"]::-webkit-inner-spin-button {
    color: #cbd5e1; /* Tailwind slate-300 or similar light color for dark themes */
}

/* =========================================
   FIX: FORCE VISIBILITY OF TIMER ARROWS (SPINNERS)
   ========================================= */

/* Target the specific IDs of your timer inputs to ensure 100% accuracy */
#timer-hours::-webkit-inner-spin-button,
#timer-hours::-webkit-outer-spin-button,
#timer-minutes::-webkit-inner-spin-button,
#timer-minutes::-webkit-outer-spin-button,
#timer-seconds::-webkit-inner-spin-button,
#timer-seconds::-webkit-outer-spin-button {
    /* 1. Force the browser to render the 'inner-spin-button' appearance */
    -webkit-appearance: inner-spin-button !important;
    
    /* 2. Force opacity to 1 so they are visible without hovering */
    opacity: 1 !important;
    
    /* 3. Ensure they are displayed as a block element */
    display: block !important;
    
    /* 4. Reset margins to prevent layout shifting */
    margin: 0 !important;
    
    /* 5. Ensure they are clickable */
    pointer-events: auto !important;
}

/* Firefox Fallback (Ensures number input behavior) */
#timer-hours, 
#timer-minutes, 
#timer-seconds {
    -moz-appearance: number-input;
}

/* =========================================
   FIX: COLOUR POP THEME - VISIBLE TIMER INPUT CONTAINERS
   ========================================= */

/* Target the timer inputs specifically within the Colour Pop theme */
[data-theme="colourpop"] .timer-input-glass {
    /* Set a visible white background */
    background-color: #ffffff !important; 
    
    /* Ensure the text is dark */
    color: #1f2937 !important; 

    /* Add a solid border so the box shape is clearly visible */
    border: 2px solid #e5e7eb !important;
    
    /* Optional: Add a subtle shadow to make it pop */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}

/* Ensure the separators (:) are visible in this theme too */
[data-theme="colourpop"] #timer-set-inputs-container span {
    color: #1f2937 !important;
}

/* =========================================
   FIX: STREAK MODAL THEME ADAPTATION & VISIBILITY
   ========================================= */

/* 1. Base / Light Theme (Default) */
/* Force full opacity and a clean white background */
#streak-modal-card {
    background-color: #ffffff !important;
    color: #1f2937 !important; /* Dark Gray Text */
    opacity: 1 !important; /* Fix potential low opacity issues */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

/* 2. Dark Mode Overrides */
[data-theme="dark"] #streak-modal-card {
    background-color: #1e293b !important; /* Dark Slate Background */
    border: 1px solid #334155; /* Subtle Border */
}
[data-theme="dark"] #streak-modal-card h2 {
    color: #f3f4f6 !important; /* White Title */
}
[data-theme="dark"] #streak-modal-card p {
    color: #cbd5e1 !important; /* Light Gray Subtitle */
}
/* Fix the Flame Icon Circle in Dark Mode */
[data-theme="dark"] #streak-modal-card .bg-orange-100 {
    background-color: rgba(234, 88, 12, 0.2) !important; /* Dark transparent orange */
    color: #fb923c !important; /* Lighter orange icon */
}
/* Fix the Streak Count Box in Dark Mode */
[data-theme="dark"] #streak-modal-card .bg-orange-50 {
    background-color: rgba(67, 20, 7, 0.5) !important; /* Very dark orange bg */
    border-color: #7c2d12 !important;
}
[data-theme="dark"] #streak-modal-card .text-orange-600 {
    color: #fdba74 !important; /* Light orange text */
}
/* Fix the "Continue" button in Dark Mode */
[data-theme="dark"] #modal-continue-btn {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] #modal-continue-btn:hover {
    background-color: #475569 !important;
}

/* 3. Night Glass (iOS) Overrides */
[data-theme="ios"] #streak-modal-card {
    background-color: rgba(20, 20, 20, 0.9) !important; /* High opacity dark glass */
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7); /* Deep shadow */
}
[data-theme="ios"] #streak-modal-card h2 {
    color: #ffffff !important;
}
[data-theme="ios"] #streak-modal-card p {
    color: #e2e8f0 !important;
}
/* Night Glass Flame & Box */
[data-theme="ios"] #streak-modal-card .bg-orange-100 {
    background-color: rgba(234, 88, 12, 0.3) !important;
    box-shadow: 0 0 20px rgba(234, 88, 12, 0.4); /* Glowing flame */
}
[data-theme="ios"] #streak-modal-card .bg-orange-50 {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}
[data-theme="ios"] #streak-modal-card .text-orange-600 {
    color: #fb923c !important; /* Neon Orange */
    text-shadow: 0 0 10px rgba(251, 146, 60, 0.4);
}
/* Night Glass Buttons */
[data-theme="ios"] #modal-continue-btn {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
[data-theme="ios"] #modal-continue-btn:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* 4. Colour Pop Overrides */
[data-theme="colourpop"] #streak-modal-card {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border: 3px solid #ffffff;
    box-shadow: 0 20px 50px rgba(168, 85, 247, 0.4); /* Purple glow */
}

/* =========================================
   FIX: REMINDER TIME PICKER (PERFECT ALIGNMENT & SPACING)
   ========================================= */

/* 1. Main Container - Increase breathing room */
.flatpickr-time {
    height: auto !important;
    padding: 30px 0 !important; /* More vertical space */
    overflow: visible !important;
    display: flex !important;
    align-items: center !important; /* Vertically center everything */
    justify-content: center !important;
    line-height: normal !important; /* Reset line height to avoid inheritance issues */
}

/* 2. Wrapper for Input + Arrows (Keep tight) */
.flatpickr-time .numInputWrapper {
    height: auto !important;
    width: auto !important;
    display: flex;
    flex-direction: column;
}

/* 3. The Input Fields (Large & Aligned) */
.flatpickr-time input.flatpickr-hour, 
.flatpickr-time input.flatpickr-minute {
    font-size: 3.5rem !important; /* Large, clear text */
    line-height: 1 !important; /* Tight line height */
    height: 3.5rem !important; /* Match height to font size for alignment */
    background: transparent !important;
    border: none !important;
    color: #333 !important;
    appearance: textfield !important;
    -moz-appearance: textfield !important;
    width: 90px !important; /* Slightly wider */
    text-align: center;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 700 !important;
}

/* 4. The Arrows (Spinners) - Cleaner look */
.flatpickr-time .arrowUp, 
.flatpickr-time .arrowDown {
    display: flex !important; /* Use flex to center the arrow icon */
    align-items: center;
    justify-content: center;
    height: 18px !important; /* Taller hit area */
    cursor: pointer !important;
    border: 0 !important;
    width: 100% !important;
    opacity: 0.4;
    transition: all 0.2s;
    background: transparent !important;
}

.flatpickr-time .arrowUp:hover, 
.flatpickr-time .arrowDown:hover {
    opacity: 1 !important;
    background: rgba(0,0,0,0.05) !important;
}

/* Hide native browser arrows */
.flatpickr-time input::-webkit-outer-spin-button,
.flatpickr-time input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* 5. Separator (:) - The Alignment Key */
.flatpickr-time .flatpickr-time-separator {
    font-size: 3.5rem !important; /* Match input font size */
    line-height: 1 !important;
    height: 3.5rem !important; /* Match input height */
    font-weight: 700 !important;
    color: #333 !important;
    display: flex !important; /* Use flex box */
    align-items: center !important; /* Center vertically perfectly */
    margin: 0 15px !important; /* More horizontal space */
    padding: 0 !important;
    transform: translateY(-2%); /* Micro-adjustment for perfect visual baseline baseline */
}

/* 6. AM/PM Selector - Aligned with inputs */
.flatpickr-time .flatpickr-am-pm {
    height: 3.5rem !important; /* Match input height */
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    margin-left: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center text vertically */
}

/* 7. Focus State */
.flatpickr-time input:focus {
    background-color: rgba(0,0,0,0.05) !important;
    border-radius: 12px;
    outline: none;
}

/* 8. Dark Mode Support */
[data-theme="dark"] .flatpickr-calendar {
    background: #1e293b !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5) !important;
}
[data-theme="dark"] .flatpickr-time input.flatpickr-hour, 
[data-theme="dark"] .flatpickr-time input.flatpickr-minute,
[data-theme="dark"] .flatpickr-time .flatpickr-time-separator,
[data-theme="dark"] .flatpickr-time .flatpickr-am-pm {
    color: #fff !important;
}
/* Dark Mode Arrows */
[data-theme="dark"] .flatpickr-time .arrowUp::after, 
[data-theme="dark"] .flatpickr-time .arrowDown::after {
    border-bottom-color: #cbd5e1 !important;
    border-top-color: #cbd5e1 !important;
}
[data-theme="dark"] .flatpickr-time input:focus {
    background-color: rgba(255,255,255,0.1) !important;
}

/* =========================================
   FIX: REMINDER LIST ITEM THEME STYLING
   ========================================= */

/* 1. Base / Light Mode */
.reminder-item {
    background-color: #faf5ff; /* Light Purple */
    border: 1px solid #e9d5ff; /* Light Purple Border */
}
.reminder-item .task-title {
    color: #1f2937; /* Dark Gray Text */
}
.reminder-item .task-time {
    color: #7e22ce; /* Deep Purple Text */
}
.reminder-item .delete-btn {
    color: #9ca3af; /* Gray Icon */
}
.reminder-item .delete-btn:hover {
    background-color: #fee2e2; /* Light Red Hover */
    color: #ef4444; /* Red Icon */
}

/* 2. Dark Mode */
[data-theme="dark"] .reminder-item {
    background-color: rgba(255, 255, 255, 0.05) !important; /* Dark Transparent */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
[data-theme="dark"] .reminder-item .task-title {
    color: #f3f4f6 !important; /* White Text */
}
[data-theme="dark"] .reminder-item .task-time {
    color: #a78bfa !important; /* Light Purple Text */
}
[data-theme="dark"] .reminder-item .delete-btn {
    color: #9ca3af !important;
}
[data-theme="dark"] .reminder-item .delete-btn:hover {
    background-color: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
}

/* 3. Night Glass (iOS) */
[data-theme="ios"] .reminder-item {
    background-color: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
[data-theme="ios"] .reminder-item .task-title {
    color: #ffffff !important;
}
[data-theme="ios"] .reminder-item .task-time {
    color: #e0f2fe !important; /* Light Blueish text */
}
[data-theme="ios"] .reminder-item .delete-btn:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #f87171 !important;
}

/* 4. Colour Pop */
[data-theme="colourpop"] .reminder-item {
    background-color: #ffffff !important;
    border: 2px solid #9333ea !important; /* Purple Border */
}
[data-theme="colourpop"] .reminder-item .task-title {
    color: #1f2937 !important;
}
[data-theme="colourpop"] .reminder-item .task-time {
    color: #9333ea !important;
}