/* --- Global Theme & Reset --- */
:root {
    /* Colors */
    --primary: #3b82f6; --primary-dark: #2563eb; --primary-light: #60a5fa; --primary-bg: #eff6ff;
    --success: #16a34a; --success-bg: #f0fdf4; --warning: #f59e0b; --warning-bg: #fffbeb;
    --danger: #ef4444; --danger-bg: #fef2f2; --text-primary: #1e293b; --text-secondary: #64748b;
    --bg: #f8fafc; --surface: #ff0000; --border: #e2e8f0; --border-light: #f1f5f9;
    /* Spacing */
    --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 12px; --spacing-lg: 16px; --spacing-xl: 24px;
    /* Typography */
    --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem;
    /* Radius */
    --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px;
    /* Safe Area Insets for Mobile */
    --safe-area-top: env(safe-area-inset-top);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    color: var(--text-primary);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    position: fixed;
    background-color: var(--background);
}

/* --- APP LAYOUT (UPDATED FOR SCROLLING) --- */
.app-container { height: 100vh; width: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.main-content { padding: var(--spacing-lg); background-color: var(--background); }

/* --- HEADER (UPDATED FOR COLLAPSE) --- */
.header {
    background: var(--background);
    color: var(--text-primary);
    padding: var(--spacing-lg);
    padding-top: calc(var(--spacing-lg) + var(--safe-area-top));
    z-index: 10;
    transition: padding 0.3s ease-in-out;
}
.header--collapsed {
    padding-top: calc(var(--spacing-sm) + var(--safe-area-top));
    padding-bottom: var(--spacing-sm);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

#header-large { transition: opacity 0.2s ease-out, transform 0.3s ease-in-out, height 0.3s ease-in-out; transform-origin: top; }
.header--collapsed #header-large { opacity: 0; transform: scaleY(0.9); height: 0; overflow: hidden; pointer-events: none; }
#header-small { display: none; justify-content: space-between; align-items: center; font-size: var(--text-sm); font-weight: 600; }
.header--collapsed #header-small { display: flex; }

.header-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--spacing-md); }
.header-title h1 { font-size: var(--text-xl); font-weight: 700; text-transform: uppercase; }
.header-title p { font-size: var(--text-sm); color: var(--text-primary); margin-top: 2px; }
.header-time { display: flex; align-items: center; gap: var(--spacing-sm); background: rgba(0, 0, 0, 0.2); padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; }
.header-time svg { width: 14px; height: 14px; }
.progress-card { background: var(--header-highlight-bg); border-radius: var(--radius-lg); padding: var(--spacing-md); }
.progress-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--spacing-sm); }
.progress-info { flex: 1; }
.progress-text { font-size: var(--text-base); font-weight: 600; }
.progress-subtext { font-size: var(--text-sm); color: var(--text-primary); }
.progress-percentage { text-align: right; }
.progress-percentage .value { font-size: var(--text-xl); font-weight: 800; line-height: 1; }
.progress-percentage .label { font-size: var(--text-xs); color: var(--text-primary); margin-top: 2px; }
.progress-bar { width: 100%; height: 4px; background-color: var(--background); border-radius: 2px; overflow: hidden; margin: var(--spacing-md) 0; }
.progress-fill { width: 0; height: 100%;  background-color: var(--button-primary); border-radius: 2px; transition: width 0.5s ease-out; }
.weekly-target { font-size: var(--text-sm); color: var(--text-primary); line-height: 1.4; }

/* --- THEMED PILL TABS --- */
.tabs-container {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    background-color: var(--background);
    z-index: 5;
    padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-md);
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.tabs {
    flex-grow: 1;
    display: flex;
    gap: var(--spacing-sm);
    overflow-x: auto;
    scrollbar-width: none;
    padding-right: var(--spacing-lg);
    scroll-behavior: smooth;
}

.tabs::-webkit-scrollbar { display: none; }

.tab {
    flex-shrink: 0;
    padding: 8px 12px;
    border-radius: 7px;
    font-size: var(--text-sm);
    font-weight: 500;
    background-color: var(--card-bg);
    color: var(--text-primary);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.tab.active {
    background-color: var(--button-primary);
    color: white;
    font-weight: 600;
}

/* --- SECTION HEADER & TOGGLE SWITCH --- */
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-lg); }
.section-header h2 { font-size: var(--text-xl); font-weight: 700; }
.view-toggle-checkbox { display: none; }
.view-toggle-label { position: relative; display: flex; align-items: center; justify-content: center; background-color: var(--card-bg); border-radius: var(--radius-full); padding: 4px; cursor: pointer; user-select: none; }

.toggle-option {
    width: 90px;
    text-align: center;
    font-size: var(--text-sm);
    font-weight: 600;
    padding: 8px 0;
    z-index: 1;
    transition: color 0.3s ease-in-out;
    /* Set the default/inactive color for both options */
    color: var(--text-primary);
}

.view-toggle-knob {
    position: absolute;
    left: 4px;
    top: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    background-color: var(--button-primary);
    border-radius: var(--radius-full);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
    z-index: 0;
}

/* --- Correct State Logic --- */

/* UNCHECKED (Default state): "Current" is active, make its text white */
.view-toggle-checkbox:not(:checked) ~ .toggle-option:first-of-type {
    color: white;
}

/* CHECKED: "All" is active, make its text white */
.view-toggle-checkbox:checked ~ .toggle-option:last-of-type {
    color: white;
}

/* CHECKED: Move the knob */
.view-toggle-checkbox:checked ~ .view-toggle-knob {
    transform: translateX(100%);
}
        
/* --- TIMESLOT & TARGETS --- */
.timeslot-card { border: 1px solid var(--view-bg); border-radius: var(--radius-xl); margin-bottom: var(--spacing-lg); background: var(--card-bg); transition: opacity 0.3s ease, box-shadow 0.3s ease; overflow: hidden; }
.timeslot-card.status-completed, .timeslot-card.status-upcoming { opacity: 0.75; }
.timeslot-card.status-current { box-shadow: 0 8px 20px rgba(59, 130, 246, 0.12); }
.timeslot-header { display: flex; justify-content: space-between; align-items: flex-start; padding: var(--spacing-md) var(--spacing-lg); }
.timeslot-title { display: flex; align-items: center; gap: var(--spacing-sm); }
.timeslot-title svg { width: 20px; height: 20px; color: var(--text-secondary); }
.timeslot-card.status-current .timeslot-title svg { color: var(--primary); }
.timeslot-title h3 { font-size: var(--text-base); font-weight: 700; text-transform: capitalize; color: var(--text-primary); }
.timeslot-time { font-size: var(--text-xs); color: var(--text-secondary); margin-top: 2px; }
.status-badge { padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; }
.status-badge.completed { background: #dcfce7; color: #166534; }
.status-badge.current { background: var(--button-primary); color: white; }
.status-badge.upcoming { background: #e2e8f0; color: black; }
.timeslot-content { padding: 0 var(--spacing-lg) var(--spacing-lg); display: flex; flex-direction: column; gap: var(--spacing-md); }
.targets-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); }
.target-item { text-align: center; background: var(--header-highlight-bg); padding: var(--spacing-md); border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.target-emoji { font-size: 1.75rem; line-height: 1; }
.target-label { font-size: var(--text-sm); color: var(--text-secondary); margin-top: var(--spacing-sm); }
.target-value { font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); margin-top: 2px; }

/* --- CARD CAROUSEL STYLES --- */
.card-carousel-wrapper {
    position: relative;
    margin-top: var(--spacing-md);
    padding: 0; /* no extra padding */
}

.card-carousel-viewport {
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.content-scroller {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--spacing-sm);
    gap: 12px; /* space between cards */
    scrollbar-width: none;
}
.content-scroller::-webkit-scrollbar { display: none; }

.example-card {
    flex: 0 0 100%; /* slightly less than full width */
    scroll-snap-align: center;
    padding: var(--spacing-md);
    border: 1px solid var(--view-bg);
    border-radius: var(--radius-lg);
    background: var(--card-bg);
    position: relative;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* Carousel arrows */
/* Carousel arrows */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #ffffff14;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 4px 8px rgba(0,0,0,0.12);
    transition: all 0.2s ease;
}

.carousel-btn:hover {
    transform: translateY(-50%) scale(1.1);
}

.carousel-btn svg {
    width: 20px;
    height: 20px;
    stroke: var(--primary);
    stroke-width: 2.5;
}

/* Left and right buttons */
.carousel-btn-left {
    left: -20px;   /* float outside the left edge */
}
.carousel-btn-right {
    right: -20px;  /* float outside the right edge */
}



/* --- END OF CAROUSEL STYLES --- */
        
.example-card-header { display: flex; align-items: flex-start; gap: var(--spacing-sm); margin-bottom: var(--spacing-xs); }
.example-card-emoji { font-size: 1.75rem; line-height: 1; margin-top: -2px; }
.example-card h4 { font-size: var(--text-base); font-weight: 700; line-height: 1.2; }
.example-card .cultural-name { font-size: var(--text-xs); font-weight: 600; color: var(--primary); line-height: 1.2; }
.example-card .description { font-size: var(--text-sm); color: var(--text-secondary); margin: var(--spacing-sm) 0 var(--spacing-md) 0; }
.example-card .details-row { display: flex; justify-content: space-between; align-items: center; font-size: var(--text-sm); padding: var(--spacing-sm) 0; border-bottom: 1px solid var(--view-bg); }
.example-card .details-row:last-child { border-bottom: none; }
.example-card .details-row span { color: var(--text-secondary); }
        
.medicine-item-card { background-color: var(--header-highlight-bg); border: 1px solid var(--view-bg); border-radius: var(--radius-lg); padding: var(--spacing-md); }
.medicine-item-header { display: flex; align-items: flex-start; gap: var(--spacing-sm); }
.medicine-item-emoji { font-size: 1.5rem; line-height: 1; }
.medicine-item-info { flex: 1; }
.medicine-item-info h4 { font-size: var(--text-base); font-weight: 600; }
.medicine-item-info span { font-size: var(--text-sm); color: var(--text-secondary); }
.dose-badge { background-color: var(--border); color: black; padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 600; flex-shrink: 0; }
.medicine-item-details { font-size: var(--text-sm); color: var(--text-secondary); margin-top: var(--spacing-sm); padding-top: var(--spacing-sm); border-top: 1px solid var(--border-light); }
.medicine-item-details strong { color: var(--primary); font-weight: 600; }
        
.content-card { background: var(--card-bg); padding: var(--spacing-lg); border-radius: var(--radius-lg); border: 1px solid var(--view-bg); margin-bottom: var(--spacing-lg); }
.content-card h2 { font-size: var(--text-lg); margin-bottom: var(--spacing-sm); }
.content-card h3 { font-size: var(--text-base); margin-top: var(--spacing-md); margin-bottom: var(--spacing-xs); font-weight: 700; }
.content-card p, .content-card li { font-size: var(--text-sm); color: var(--text-secondary); }
.content-card ul { list-style-position: inside; padding-left: 0; }
.content-card li { margin-bottom: var(--spacing-xs); }
.safety-card.emergency { background: var(--card-bg); border-left: 4px solid var(--danger); }
.safety-card.emergency h2 { color: #991b1b; }
.safety-card.caution { background: var(--card-bg); border-left: 4px solid var(--warning); }
.safety-card.caution h2 { color: #92400e; }
.safety-card-title { display: flex; align-items: center; gap: var(--spacing-sm); }
.safety-card-title svg { width: 20px; height: 20px; }
.emergency-btn { display: block; width: 100%; background: var(--danger); color: white; border: none; padding: var(--spacing-md); border-radius: var(--radius-md); font-size: var(--text-base); font-weight: 700; text-align: center; cursor: pointer; margin-top: var(--spacing-lg); }