/* Global color tokens - LOOMI Theme */
:root { 
    --loomi-blue: #5A9CB5;      /* Main Headers & Background depth */
    --loomi-yellow: #FACE68;    /* Action Buttons (Add/Save) */
    --loomi-coral: #FA6868;     /* The Uniform Child Color & Delete 'X' */
    --hive-cream: #FDF4E3;    /* The Card Color (Warm & Cozy) */
    --text-dark: #134686;     /* Deep Blue for clear text */
    --bg-darker: #E6F1F5;     /* Darker, richer blue-grey background */
    --white: #ffffff; 
    --shadow: 0 10px 25px rgba(0,0,0,0.1);
    /* Legacy aliases for compatibility */
    --bg: var(--bg-darker);
    --bg-page: var(--bg-darker);
    --bg-soft-sky: var(--bg-darker);
    --bg-sky: var(--bg-darker);
    --bg-light: #ffffff;
    --hive-cream: #FDF4E3;
    --text-main: var(--text-dark);
    --loomi-brown: var(--text-dark);
    --loomi-gold: var(--loomi-yellow);
    --honey-warm: var(--white);
    --accent-sage: var(--loomi-yellow);
    --loomi-red: var(--loomi-coral);
    --action-red: var(--loomi-coral);
    --accent-coral: var(--loomi-coral);
    --honey: var(--loomi-coral);
    --child-blue: #BBDEFB;
    --child-pink: #F8BBD0;
    --child-green: #C8E6C9;
    
    /* The 10 Kid Colors - Rich & Harmonious */
    --kid-1: #5A9CB5; /* Your Bee Blue */
    --kid-2: #FA6868; /* Your Bee Coral */
    --kid-3: #FACE68; /* Your Bee Yellow */
    --kid-4: #8BC34A; /* Leafy Green (Like Lori's tag) */
    --kid-5: #9C27B0; /* Deep Grape (Like Lani's tag) */
    --kid-6: #FF9800; /* Honey Orange */
    --kid-7: #00BCD4; /* Bright Teal */
    --kid-8: #795548; /* Earthy Brown */
    --kid-9: #E91E63; /* Strawberry Red */
    --kid-10: #3F51B5; /* Royal Blue */
    
    /* צבעים שזיהיתי מהתמונות שלך */
    --color-ido: #5A9CB5;    /* כחול עמוק */
    --color-lani: #9C27B0;   /* סגול של לני */
    --color-lori: #8BC34A;   /* ירוק של לורי */
    --color-mom: #E91E63;    /* ורוד/מג'נטה של אמא */
    --color-amom: #E91E63;   /* ורוד/מג'נטה של אמא (עם א') */
    --color-אמא: #E91E63;   /* ורוד/מג'נטה של אמא (עברית) */
    --color-עידו: #5A9CB5;  /* כחול עמוק (עברית) */
    --color-לני: #9C27B0;   /* סגול של לני (עברית) */
    --color-לורי: #8BC34A;  /* ירוק של לורי (עברית) */
}

/* Reset baseline styles */
* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    font-family: 'Fredoka', sans-serif !important; 
    color: var(--text-dark);
    direction: rtl; 
}

/* Ensure Material Symbols icons always render correctly */
.material-symbols-rounded,
i.material-symbols-rounded,
span.material-symbols-rounded {
    font-family: 'Material Symbols Rounded' !important;
}

/* Center the main document layout */
body {
    /* Use a deeper version of your blue for the background to make cards POP */
    background: linear-gradient(180deg, #5A9CB5 0%, #8FBCCB 100%); 
    color: var(--text-dark);
    min-height: 100vh; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
}

/* Splash screen */
.splash-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #F7F5EE !important;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    transition: opacity 0.5s ease-out;
}

#splash-screen.fade-out {
    opacity: 0;
    pointer-events: none;
}

.splash-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 500px;
    width: 90%;
    animation: fadeIn 0.8s ease-out;
}

.hero-image {
    width: 100%;
    height: auto;
    mix-blend-mode: multiply;
    margin-bottom: 20px;
}

.greeting-container {
    margin-top: 20px;
    text-align: center;
}

.greeting-text,
#splash-greeting {
    font-family: 'Fredoka', sans-serif !important;
    color: #2D4E8A;
    font-size: 2rem;
    font-weight: 500;
    direction: rtl;
    text-shadow: 0 2px 4px rgba(0,0,0,0.05);
    animation: slideUp 0.8s ease-out;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Animations */
@keyframes hoverBee {
    0%, 100% { transform: translateY(0) rotate(5deg); }
    50% { transform: translateY(-15px) rotate(-5deg); }
}
@keyframes beeFloat {
    0%, 100% { transform: translateY(0) rotate(5deg); }
    50% { transform: translateY(-25px) rotate(-5deg); }
}
@keyframes fadeOut {
    to { 
        opacity: 0; 
        pointer-events: none;
        visibility: hidden;
    }
}

/* Loomi icon using background-image */
.loomi-icon {
    width: 32px;
    height: 32px;
    background-image: url('loomi-icon.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    vertical-align: middle;
}

.loomi-icon-small {
    width: 15px;
    height: 15px;
    background-image: url('loomi-icon.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    vertical-align: middle;
}

/* The Loomi Icon Stack (legacy) */
.loomi-icon-imgs-stack, .loomi-icons-stack {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 32px;
    vertical-align: middle;
    margin: 0 4px;
}
.loomi-icon-img {
    width: 32px;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1));
    transition: transform 0.2s;
}

/* Loomi icon - duplicate rule (keeping for compatibility) */
.loomi-icon {
    width: 32px;
    height: 32px;
    background-image: url('loomi-icon.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    vertical-align: middle;
}
.loomi-back {
    transform: translate(2px, 2px) scale(0.9);
    opacity: 0.7;
    z-index: 1;
}
.loomi-front {
    z-index: 2;
}
.loomi-icon-imgs-stack:hover .loomi-front {
    transform: scale(1.1);
}

/* Loomi display without pill */
.loomi-display {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 800;
    color: var(--text-main);
}
.loomi-number {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--text-main);
}

/* The Beez Counter Pill */
.loomi-pill {
    background: linear-gradient(to bottom, #ffffff, #fffdf0); /* Subtle honey tint */
    border: 2px solid var(--loomi-yellow); /* Gold border */
    padding: 6px 14px;
    border-radius: 25px;
    display: inline-flex;
    align-items: center;
    font-weight: 800;
    color: var(--text-main); /* Darker brown text is easier to read than gold */
    box-shadow: 0 4px 10px rgba(245, 197, 24, 0.2);
}

/* Header styling */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px 20px;
    background: #134686; /* Deep Blue header */
    z-index: 1000;
    position: relative;
    border-bottom: none;
}
header .icon-btn {
    color: #ffffff !important; /* White icon on blue background */
}
header #clock {
    color: #ffffff !important; /* White clock text on blue background */
    font-weight: bold;
}

.header-container,
.top-header {
    background-color: #134686 !important; /* Deep Blue Bar */
    height: 60px !important;
    display: flex !important;
    justify-content: center !important; 
    align-items: center !important;
    padding: 10px 0;
    width: 100%;
    z-index: 1000;
    position: relative;
    border-bottom: none;
}

.header-bar {
    background-color: #134686 !important;
    height: 55px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100%;
    z-index: 1000;
    position: relative;
    border-bottom: none;
}

#header-kids-nav {
    display: flex;
    gap: 10px;
    justify-content: center; /* Re-centers the names */
    flex-grow: 1;
    align-items: center;
}

/* The name bubbles in the header */
.child-nav-pill,
.child-name-pill {
    background-color: #ffffff !important; 
    color: #134686 !important; /* Deep Blue Text */
    font-weight: 900 !important;
    border: 2px solid #FAAC68 !important; /* Orange border */
    border-radius: 50px;
    padding: 5px 20px !important;
    margin: 0 10px;
    font-size: 0.9rem !important;
    transition: all 0.3s ease;
    white-space: nowrap;
    visibility: visible !important;
    display: block !important;
    align-items: center;
    justify-content: center;
}

.child-pill {
    background: white !important;
    color: #134686 !important;
    padding: 4px 18px !important;
    border-radius: 20px !important;
    border: 2px solid #FAAC68 !important;
    font-weight: 800 !important;
    margin: 0 6px !important;
}

.child-nav-pill.active {
    background: #FA6868 !important; /* Coral for the active child */
    color: #ffffff !important;
    border-color: #ffffff;
}

/* Dynamic styling for the name pills in the header */
.child-pill-assigned {
    border-width: 3px !important;
    border-style: solid !important;
    transition: all 0.2s ease;
}

/* Apply this to both the Header Pill and the Calendar Event Chip */
.kid-color-1 { border-color: var(--kid-1) !important; color: var(--kid-1) !important; }
.kid-color-2 { border-color: var(--kid-2) !important; color: var(--kid-2) !important; }
.kid-color-3 { border-color: var(--kid-3) !important; color: var(--kid-3) !important; }
.kid-color-4 { border-color: var(--kid-4) !important; color: var(--kid-4) !important; }
.kid-color-5 { border-color: var(--kid-5) !important; color: var(--kid-5) !important; }
.kid-color-6 { border-color: var(--kid-6) !important; color: var(--kid-6) !important; }
.kid-color-7 { border-color: var(--kid-7) !important; color: var(--kid-7) !important; }
.kid-color-8 { border-color: var(--kid-8) !important; color: var(--kid-8) !important; }
.kid-color-9 { border-color: var(--kid-9) !important; color: var(--kid-9) !important; }
.kid-color-10 { border-color: var(--kid-10) !important; color: var(--kid-10) !important; }

/* מחלקות דינמיות שיחולו על ה-Event Chip */
.event-ido { border-right: 6px solid var(--color-ido) !important; color: var(--color-ido) !important; }
.event-lani { border-right: 6px solid var(--color-lani) !important; color: var(--color-lani) !important; }
.event-lori { border-right: 6px solid var(--color-lori) !important; color: var(--color-lori) !important; }
.event-mom { border-right: 6px solid var(--color-mom) !important; color: var(--color-mom) !important; }
.event-amom { border-right: 6px solid var(--color-mom) !important; color: var(--color-mom) !important; }
.event-אמא { border-right: 6px solid var(--color-אמא) !important; color: var(--color-אמא) !important; }
.event-עידו { border-right: 6px solid var(--color-עידו) !important; color: var(--color-עידו) !important; }
.event-לני { border-right: 6px solid var(--color-לני) !important; color: var(--color-לני) !important; }
.event-לורי { border-right: 6px solid var(--color-לורי) !important; color: var(--color-לורי) !important; }

/* אירוע ששייך לכולם - כמו יום הולדת */
.event-everyone {
    background-color: #fff9eb !important; /* רקע קרם חם יותר */
    border: 2px dashed #134686 !important; /* מסגרת מקווקוות בכחול כהה */
    border-right: 10px solid #134686 !important; /* פס כחול כהה בולט */
    box-shadow: 0 4px 10px rgba(19, 70, 134, 0.2);
}

/* כותרת אירוע - כל האירועים */
.event-title {
    color: #134686;
    font-weight: 700;
}

/* טקסט חגיגי לאירוע משפחתי */
.event-everyone .event-title {
    font-weight: 900;
}

/* כפתור במודאל "מי ביצע את המטלה?" */
.modal-child-btn {
    background: white !important;
    border: 3px solid !important;
    border-radius: 50px !important;
    padding: 15px !important;
    font-weight: 900 !important;
    transition: transform 0.1s;
    color: #134686 !important; /* Deep Blue Text */
    font-size: 1.2rem !important;
    cursor: pointer;
    width: 100%;
}

.modal-child-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* שיוך צבע לכפתור לפי הילד */
.btn-ido { border-color: var(--color-ido) !important; }
.btn-lani { border-color: var(--color-lani) !important; }
.btn-lori { border-color: var(--color-lori) !important; }
.btn-mom { border-color: var(--color-mom) !important; }
.btn-amom { border-color: var(--color-mom) !important; }
.btn-אמא { border-color: var(--color-אמא) !important; }
.btn-עידו { border-color: var(--color-עידו) !important; }
.btn-לני { border-color: var(--color-לני) !important; }
.btn-לורי { border-color: var(--color-לורי) !important; }

/* שיוך צבע ל-header pill לפי הילד */
.pill-ido { border-color: var(--color-ido) !important; }
.pill-lani { border-color: var(--color-lani) !important; }
.pill-lori { border-color: var(--color-lori) !important; }
.pill-mom { border-color: var(--color-mom) !important; }
.pill-amom { border-color: var(--color-mom) !important; }
.pill-אמא { border-color: var(--color-אמא) !important; }
.pill-עידו { border-color: var(--color-עידו) !important; }
.pill-לני { border-color: var(--color-לני) !important; }
.pill-לורי { border-color: var(--color-לורי) !important; }

/* Market selection buttons - match header pill styling */
.market-selection-btn {
    background-color: #ffffff !important;
    color: #134686 !important; /* Deep Blue Text */
    font-weight: 900 !important;
    border: 3px solid !important; /* Border color comes from kid-color class */
    border-radius: 50px;
    padding: 15px !important;
    font-size: 1.2rem !important;
    transition: all 0.3s ease;
    cursor: pointer;
    width: 100%;
}

.market-selection-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.view { width: 100%; max-width: 600px; padding: 20px; display: flex; flex-direction: column; }

/* Routine view specific styling */
#view-routine {
    overflow: hidden !important;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 20px !important; /* Match other views for consistent back button positioning */
}

/* Ensure the header in routine view positions the back button correctly */
#view-routine > div:first-child {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 15px !important;
    width: 100% !important;
}

/* Make the routine page title dark and visible */
#view-routine > div:first-child h2 {
    color: #134686 !important; /* Dark blue for visibility */
    font-weight: 900 !important; /* Extra bold */
    font-size: 1.5rem !important;
}
.hidden { display: none !important; }

/* Allow the week section to expand wider than the default card width */
#view-week {
    max-width: 960px;
}

/* Home Menu Grid */
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.menu-card { 
    aspect-ratio: 1/1; display: flex; flex-direction: column; align-items: center; 
    justify-content: center; border-radius: 30px; border: none; box-shadow: var(--shadow); 
    cursor: pointer; transition: transform 0.1s;
}
.menu-card:active { transform: scale(0.95); }
/* Morning Button */
/* Morning Button - Yellow */
.morning { 
    background-color: #FACE68 !important; 
    color: #134686 !important; 
}

/* Evening Button - Orange */
.evening { 
    background-color: #FAAC68 !important; 
    color: #134686 !important; 
}

/* Market/Chores Bank - Red */
.market-card {
    background-color: #FA6868 !important; /* Coral */
    color: #ffffff !important;
}

/* Weekly Schedule Button */
.week {
    background-color: #FDF4E3 !important; /* Cream */
    color: #134686 !important;
    border: 3px solid #5A9CB5; /* Blue border */
}
.menu-icon { 
    font-size: 3.5rem !important; 
    margin-bottom: 10px;
    font-family: 'Material Symbols Rounded' !important;
    font-weight: normal;
    font-style: normal;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.menu-text { font-size: 1.4rem; font-weight: 800; }

/* Settings Grid Layout */
#view-settings { max-width: 900px; }

/* The three main management cards at the top */
/* Container for the 3 main cards */
.settings-grid-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    align-items: flex-start; /* Prevents cards from stretching to match neighbors */
    padding: 0;
    margin-bottom: 30px;
}

.settings-container {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important; /* Keeps the top of the cards aligned */
    gap: 25px !important;
}

.settings-card {
    width: 310px !important;
    height: 420px !important; /* LOCKED height for perfect rows */
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important; /* Prevents content from stretching the card */
    background-color: #FDF4E3 !important;
    border-radius: 30px !important;
    padding: 20px !important;
    box-shadow: none !important; /* Remove lower blue shadow */
    margin: 0 !important;
    box-sizing: border-box;
}

.settings-card h3 {
    color: #134686 !important; /* Dark blue like kids name in header */
    font-size: 1.1rem !important; /* Slightly smaller */
    font-weight: 800 !important;
    margin-bottom: 8px !important; /* Reduced margin */
    margin-top: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important; /* Reduced gap */
    text-align: center !important;
    letter-spacing: -0.5px !important;
    flex-shrink: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Specific styling for the 'Easy Beezy' themed cards */
.settings-card-purple, .settings-card-green, .settings-card-blue { 
    background: var(--white); /* White cards */
    border: none; /* No borders */
}
/* Target the specific Event Card */
.add-event-card {
    background-color: #FDF4E3 !important; /* Cream background like add-task card */
    border-radius: 30px !important;
    border: none !important;
    border-top: 6px solid #FAAC68 !important; /* Orange top border like add-task yellow border */
    box-shadow: none !important; /* No shadow */
    transition: transform 0.2s ease;
}

.add-event-card:active {
    /* Subtle 'click' effect */
    transform: translateY(2px);
}

.add-event-card input, .add-event-card select {
    width: 100%;
    max-width: 100%;
    padding: 8px 10px;
    margin: 0;
    margin-bottom: 6px;
    border-radius: 8px;
    border: 2px solid #E6F1F5; /* Soft blue border */
    cursor: pointer; /* Ensures the cursor looks right */
    box-sizing: border-box;
    font-size: 0.85rem;
}
/* Keep the icons inside blue to match the theme */
.add-event-card i {
    color: #5A9CB5;
}

/* Event type toggle (weekly/once) */
.type-toggle {
    display: flex;
    background: #f0f0f0;
    border-radius: 25px;
    padding: 4px;
    margin-bottom: 12px;
}

.type-toggle button {
    flex: 1;
    border: none;
    padding: 8px 12px;
    border-radius: 20px;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    color: #134686;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.type-toggle button.active {
    background: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    font-weight: bold;
}

#date-input-container {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.date-input {
    width: 85px !important;
    flex-shrink: 0;
    padding: 4px 2px !important;
    font-size: 0.65rem !important;
    border: 2px solid #E2E8F0 !important;
    border-radius: 8px !important;
    background: #F8FAFC !important;
}

/* Example for the middle "Add Task" card */
.settings-card.add-task,
.add-task-card,
.settings-card-green {
    border-top: 6px solid #FACE68; /* The Yellow accent */
}
/* The "Add Member" card could have a Coral border-top */
.add-member-card,
.settings-card-blue {
    border-top: 6px solid #FA6868; /* Coral */
}
.settings-card-purple h3, .settings-card-green h3, .settings-card-blue h3 { 
    color: #134686 !important; /* Dark blue like kids name in header */
}
/* Make the icons in headers match the blue palette */
.settings-card h3 i {
    color: #5A9CB5; /* Palette Blue */
    margin-left: 10px;
}

.settings-card-input, .settings-card-select {
    background: #F8FAFC;
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    padding: 6px 8px; /* Reduced padding to match child cards */
    font-size: 0.8rem; /* Slightly smaller font */
    transition: all 0.2s;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0; /* Allow inputs to shrink */
    margin-bottom: 3px; /* Reduced spacing */
}

#event-target {
    margin-bottom: 8px !important; /* Reduce space before add button */
}

.settings-card-input:focus, .settings-card-select:focus {
    outline: none;
    border-color: var(--loomi-yellow);
    background: #ffffff;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
}

.day-time-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    margin-bottom: 6px;
    direction: rtl; /* RTL layout: day/date on right, time on left */
}

/* New event card layout */
.event-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 8px;
}

.event-kid-select {
    width: 80px !important;
    flex-shrink: 0;
}

.event-day-select {
    width: 100% !important;
}

.event-date-select {
    width: 100% !important;
}

.event-time-row {
    justify-content: center;
    direction: ltr;
}

.day-selector-narrow {
    width: 50px !important; /* Narrow width for single letter */
    flex-shrink: 0;
    padding: 4px 4px !important; /* Match time selector height */
    font-size: 0.9rem !important;
    height: auto; /* Allow height to match content */
    line-height: 1.2; /* Match line height for consistent height */
}

.settings-card-time {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    direction: ltr !important;
    unicode-bidi: isolate; /* Isolate from parent RTL */
    font-size: 0.75rem;
    background: transparent;
    padding: 0;
    border-radius: 8px;
    box-sizing: border-box;
    gap: 2px;
}

/* The "Add" Buttons - make them look like candy */
/* The Yellow "Add" Buttons - add-to-all-btn included to ensure same size */
.settings-card-btn, .action-btn-green, .action-btn-yellow, .add-to-all-btn {
    background-color: #FACE68 !important; /* Soft Honey */
    color: #134686 !important; /* Dark Blue text for high-end contrast */
    border-radius: 15px;
    box-shadow: 0 4px 0px #E5B959; /* 3D bottom */
    border: none;
    font-weight: 800 !important;
    padding: 8px 12px !important; /* Reduced padding to move button higher */
    font-size: 0.9rem !important;
    transition: all 0.1s;
    cursor: pointer;
    margin-top: 0 !important; /* Remove auto margin */
    margin-bottom: 8px !important; /* Add small margin before list */
    flex-shrink: 0; /* Ensure button is always visible */
    width: 100%;
    box-sizing: border-box;
}
/* Use Orange for the 'Add' buttons inside the cards to make them pop */
.add-btn-inside-card {
    background-color: #FAAC68 !important;
    color: #134686;
    border-radius: 20px;
    border: none;
    font-weight: 800 !important;
    padding: 12px !important;
    font-size: 0.95rem !important;
    transition: all 0.1s;
    cursor: pointer;
}

/* The row with the input and the yellow Add button - use add-task-row instead */
.add-task-input-group {
    display: flex !important;
    flex-direction: row-reverse !important; /* Hebrew alignment */
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.add-task-input-group input {
    flex: 1 !important;
    height: 40px !important;
    border-radius: 12px !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    border: 2px solid #E2E8F0 !important;
    background: #F8FAFC !important;
    font-size: 0.9rem !important;
}

.add-task-input-group .add-btn,
.add-task-input-group .settings-card-btn {
    width: 70px !important;
    height: 40px !important;
    padding: 0 !important;
    font-size: 0.9rem !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    border-radius: 12px !important;
}

/* Container for the input and yellow button */
.add-task-row {
    display: flex !important;
    flex-direction: row-reverse !important; /* Hebrew alignment */
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 15px !important;
    width: 100% !important;
}

.add-task-row input,
.add-task-row .settings-card-input {
    flex: 1 !important; /* Input takes all space except the button */
    height: 40px !important;
    border-radius: 12px !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    border: 2px solid #E2E8F0 !important;
    background: #F8FAFC !important;
    font-size: 0.9rem !important;
}

.add-task-row .add-btn,
.add-task-row .settings-card-btn {
    width: 70px !important; /* Keep it compact */
    height: 40px !important;
    padding: 0 !important;
    font-size: 0.9rem !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    border-radius: 12px !important;
}
.settings-card-btn:active, .action-btn-green:active, .action-btn-yellow:active, .add-to-all-btn:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0px #E5B959 !important;
}

.add-to-all-btn:active {
    box-shadow: 0 2px 0px #E5954F !important; /* Orange shadow on press */
}


.settings-card-list {
    flex: 1;
    overflow-y: auto;
    font-size: 0.7rem;
    margin-top: 0;
    margin-bottom: 2px;
    min-height: 0;
    /* No max-height - let it fill to the bottom of the card */
}

.settings-card-list .chore-edit-row {
    padding: 4px 0;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e2e8f0;
}

.settings-card-list .chore-edit-row span {
    flex: 1;
    text-align: right;
}

/* עיצוב שורת משימה - בדיוק כמו אירוע */
.task-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0; /* צמצום הגובה */
    border-bottom: 1px solid #eee; /* קו מפריד עדין כמו בצד ימין */
    background: transparent; /* הסרת הרקע הלבן הכבד */
    box-shadow: none; /* הסרת הצללית */
}

/* כיתוב המשימה */
.task-info {
    font-size: 0.95rem; /* פונט קטן ועדין יותר */
    color: #134686; /* הכחול הכהה שלך */
    font-weight: 500; /* פחות עבה מהמקור */
    flex-grow: 1;
    text-align: right;
    margin-right: 10px;
}

.task-info .loomi-points {
    font-size: 0.85rem;
    color: #5A9CB5;
    font-weight: 400;
}

/* כפתור ה-X למחיקה */
.delete-btn {
    color: #FA6868;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0 5px;
    transition: opacity 0.2s;
}

.delete-btn:hover {
    opacity: 0.7;
}

/* כפתורי הבונוס (הדבורה עם ה-+/-) - נעשה אותם קטנים ועדינים יותר */
.loomi-counter {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    border: 1px solid #FACE68;
    border-radius: 20px;
    padding: 2px 8px;
    transform: scale(0.8); /* מקטין את כל היחידה כדי שלא תהיה "שמנה" */
}

.loomi-counter button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    color: #134686;
    padding: 0 3px;
    font-weight: 700;
}

.loomi-counter button:hover {
    opacity: 0.7;
}

.loomi-counter img {
    width: 15px;
    height: 15px;
}

/* Task edit row - new layout */
.task-edit-row {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
    gap: 8px;
}

.task-edit-row .del-chore-btn {
    color: #FA6868;
    font-size: 1.1rem;
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
}

.task-edit-row .task-name {
    flex: 1;
    text-align: right;
    color: #134686;
    font-size: 0.85rem;
}

.task-loomi-controls {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 4px;
}

.loomi-btn {
    width: 20px;
    height: 20px;
    border: 2px solid #FACE68;
    border-radius: 5px;
    background: white;
    color: #134686;
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loomi-btn:hover {
    background: #FFF9EB;
}

.loomi-btn.plus {
    border-color: #8BC34A;
}

.loomi-btn.minus {
    border-color: #FA6868;
}

.loomi-display-inline {
    display: flex;
    align-items: center;
    gap: 2px;
}

.loomi-icon-medium {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.loomi-count {
    font-weight: 700;
    color: #FAAC68;
    font-size: 0.65rem;
    min-width: 12px;
    text-align: center;
}

/* Child cards horizontal slider in settings */
.settings-child-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 15px;
    padding: 10px 0;
    -webkit-overflow-scrolling: touch;
    align-items: stretch; /* Make all child cards same height */
}

.settings-child-slider::-webkit-scrollbar {
    height: 6px;
}

.settings-child-slider::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

/* 2. UNIFY THE CHILD EDIT CARDS */
.settings-child-card {
    flex: 0 0 280px;
    scroll-snap-align: start;
    background: var(--hive-cream);
    border-top: 10px solid var(--loomi-coral) !important; /* Uniform coral top for ALL kids */
    border-radius: 30px;
    padding: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.settings-child-card h4 {
    color: var(--loomi-blue) !important;
    font-size: 1.4rem;
    margin-bottom: 15px;
    text-align: center;
    font-weight: 800;
    letter-spacing: -0.5px;
}

/* Make the "Add Child" card h3 match other settings card headers */
.settings-child-card h3 {
    color: #134686 !important; /* Dark blue like kids name in header */
    font-size: 1.1rem !important; /* Slightly smaller */
    font-weight: 800 !important;
    margin-bottom: 8px !important; /* Reduced margin */
    margin-top: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important; /* Reduced gap */
    text-align: center !important;
    letter-spacing: -0.5px !important;
    flex-shrink: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.settings-child-card h3 i,
.settings-child-card h3 .material-symbols-rounded {
    font-family: 'Material Symbols Rounded' !important;
    color: #5A9CB5; /* Palette Blue */
    margin-left: 10px;
}

.settings-child-card .chore-edit-row {
    padding: 6px 0;
    font-size: 0.75rem; /* Match event list font size */
}

/* Fix chore text in child cards to match event list size */
.settings-child-card .chore-edit-row span {
    font-size: 0.75rem !important; /* Match event list font size */
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Content Cards */
.settings-section, .day-column { background: white; padding: 8px 20px 20px; border-radius: 20px; margin-bottom: 15px; box-shadow: var(--shadow); font-size: 0.95rem; direction: rtl; }

.settings-section h3 {
    margin-bottom: 10px;
    font-size: 1.05rem;
}

.settings-section .action-btn-purple {
    font-size: 0.95rem;
    padding: 8px 18px;
}

/* All main section headers in the blue from your palette */
/* 4. HEADERS IN THE BLUE PALETTE */
h2, h3, .compact-h3 {
    color: #134686 !important; /* Dark blue for better visibility */
    font-weight: 900 !important; /* Extra bold */
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}
.settings-section-title {
    color: #134686;
    font-size: 1.8rem;
    font-weight: 900;
    position: relative;
    display: inline-block;
}
.settings-section-title::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 60%;
    height: 4px;
    background: #FAAC68; /* Orange underline */
    border-radius: 10px;
}
h2.page-title {
    color: #134686;
    text-shadow: 0 0 10px rgba(250, 172, 104, 0.3); /* Subtle Orange glow */
}
h4 {
    color: var(--loomi-blue) !important;
    font-weight: 800;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}
.compact-h3 {
    margin: 0;
    font-size: 1rem;
}
.form-group-compact { display: flex; gap: 8px; align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.time-range-selectors {
    display: inline-flex;
    direction: ltr;
    align-items: center;
    gap: 3px;
    border-radius: 8px;
    padding: 4px 6px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}
.time-group {
    display: flex;
    flex-direction: row !important;
    align-items: center;
    gap: 1px;
    direction: ltr !important;
    flex-shrink: 0;
}

.time-group select,
.time-group span {
    direction: ltr !important;
}

.time-arrow {
    color: #94a3b8;
    font-size: 1rem;
}

.mini-select-time {
    border: 2px solid #E2E8F0;
    background: #F8FAFC !important;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: normal !important;
    text-align: center;
    appearance: none;
    cursor: pointer;
    padding: 6px 8px;
    min-width: 45px !important;
    width: 50px;
    box-sizing: border-box;
}
.mini-select {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 4px 8px;
    background: white;
    font-size: 0.9rem;
}
.mini-add-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #5599ff;
    color: white;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    display: grid;
    place-items: center;
}
.loomi-adjuster {
    min-width: 32px;
    justify-content: center;
}
.form-group-compact input[type="text"],
.form-group-compact select {
    height: 36px;
}
.form-group-compact button {
    height: 36px;
}
.compact-chore-list { display: flex; flex-direction: column; gap: 8px; }
.settings-child-card {
    background: var(--hive-cream);
    border-top: 10px solid var(--loomi-coral) !important; /* Uniform coral top for ALL kids */
    border-radius: 30px;
    padding: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    margin-bottom: 15px;
    position: relative;
}
.child-card-info { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.del-chore-btn {
    background: none;
    border: none;
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
    position: relative;
}
/* Creating an 'X' using pseudo-elements */
/* 3. CLEAN UP THE DELETE 'X' */
.del-chore-btn::before, .del-chore-btn::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 3px;
    background-color: var(--loomi-coral) !important;
    border-radius: 2px;
}
.del-chore-btn::before { transform: rotate(45deg); }
.del-chore-btn::after { transform: rotate(-45deg); }
.del-chore-btn:hover {
    transform: scale(1.2);
}
.del-chore-btn img {
    display: none; /* Hide the image, use CSS X instead */
}
.reset-btn-small,
.reset-loomi-btn {
    background-color: #FA6868; /* Coral */
    color: white !important;
    border-radius: 8px;
    padding: 2px 10px;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    transition: opacity 0.2s;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}
.reset-loomi-btn:hover {
    opacity: 0.8;
}
/* Friendly Reset Link in the corner */
.reset-loomi-link {
    color: #5A9CB5; 
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: underline;
    cursor: pointer;
}


/* The 'Reset' word next to the number */
.reset-loomi-text {
    color: #134686 !important; /* Dark blue */
    font-size: 0.75rem !important; /* Tiny but readable */
    font-weight: 400; /* Not bold */
    text-decoration: underline; /* Makes it look clickable */
    cursor: pointer;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin-right: 8px; /* Space between the number and the word */
    display: inline-block;
    vertical-align: middle;
}

.reset-loomi-text:hover {
    color: #134686 !important; /* Turns blue when hovering for feedback */
}

.loomi-display-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.loomi-number {
    font-size: 0.85rem;
    color: #666;
    display: flex;
    align-items: center;
    gap: 4px;
}
.peek-week-btn {
    background: #FACE68;
    color: #134686;
    border: none;
    border-radius: 20px;
    padding: 10px 25px;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 15px;
    box-shadow: 0 4px 0 #E5B959;
    transition: all 0.2s;
}

.peek-week-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #E5B959;
}

.peek-week-btn:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #E5B959;
}

.week-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.week-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    table-layout: fixed;
}

.week-table th,
.calendar-header {
    background-color: #134686;
    color: white;
    font-weight: 900;
    font-size: 1.2rem;
    padding: 14px 0;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,0.2);
    width: calc(100% / 7);
}

.week-table th:last-child {
    border-right: none;
}

.week-table th:nth-child(7), .week-day-cell:nth-child(7) {
    border-left: 2px solid #FAAC68; /* Orange divider */
}

.week-table th.today-col,
.calendar-day.active {
    background-color: #FACE68 !important; /* Yellow for selected day */
    color: #134686;
}

.week-day-cell {
    padding: 15px;
    border-right: 1px solid #e2e8f0;
    vertical-align: top;
    min-height: 150px;
    background: #FDF4E3; /* Cream background */
    width: calc(100% / 7);
}

.week-day-cell:last-child {
    border-right: none;
}

.week-day-cell.empty {
    opacity: 0.3;
}

.event-chip {
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #ffffff;
    border-left: 4px solid #FAAC68; /* Orange accent */
    box-shadow: 0 5px 12px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: #134686; /* Deep blue text */
}

.calendar-event-box {
    background-color: #FDF4E3; /* Cream */
    border-right: 5px solid #5A9CB5; /* Blue accent */
    border-radius: 12px;
    color: #134686;
    font-weight: 700;
    margin-bottom: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Specific styling for the Calendar Event Boxes */
.calendar-event {
    background-color: #FDF4E3 !important; /* Keep the cozy background */
    border-right: 6px solid; /* The color comes from the kid-color class */
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 8px;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.calendar-event-item {
    background-color: #FDF4E3 !important; /* Clean Cream */
    border-left: 4px solid #5A9CB5 !important; /* Blue Accent */
    color: #134686 !important;
    padding: 5px !important;
    border-radius: 5px;
}

.event-chip .event-time {
    font-size: 0.85rem;
    color: #134686; /* Deep blue time text */
    text-align: left;
    font-weight: 400; /* Normal weight so time fits on one line */
    white-space: nowrap;
}

/* Target the actual daily boxes and event containers */
.calendar-day-content, .event-item, .task-slot {
    background-color: #FDF4E3 !important; /* Our Palette Cream */
    color: #134686 !important; /* Deep Blue Text */
    border: 1px solid #5A9CB5 !important; /* Light Blue Border */
    border-radius: 8px !important;
}

/* Fix the 'Selected/Today' inner box */
.calendar-day.selected .event-item {
    background-color: #FACE68 !important; /* Sunny Yellow */
    border-color: #134686 !important;
}

.calendar-event-item {
    background-color: #FDF4E3 !important; /* Clean Cream */
    border-left: 4px solid #5A9CB5 !important; /* Blue Accent */
    color: #134686 !important;
    padding: 5px !important;
    border-radius: 5px;
}

/* Forces the inner event boxes to be readable */
.fc-daygrid-event, .calendar-item-inner {
    background-color: #FDF4E3 !important; 
    border: none !important;
    border-right: 4px solid #5A9CB5 !important;
    color: #134686 !important;
    font-size: 0.8rem !important;
    padding: 2px 5px !important;
}

.week-table-wrapper::-webkit-scrollbar {
    height: 6px;
}

.week-table-wrapper::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}
.chore-edit-row { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid #f1f5f9; }
.task-line-item {
    background: white;
    border: 1px solid #E6F1F5; /* Very soft version of your blue */
    border-radius: 20px;
    margin-bottom: 8px;
    padding: 5px 15px;
}
.event-tag { margin-top: 10px; padding: 12px; border-radius: 12px; display: flex; justify-content: space-between; align-items: center; font-weight: bold; }

/* Market Manager (The Green Card) */
.market-manager-card {
    background-color: #e8f9e7 !important;
    border: 2px solid #6ec06b !important;
    border-radius: 25px !important;
    padding: 14px 18px 10px !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
    direction: rtl;
}

.market-manager-card h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #145c32;
    padding-right: 6px;
}

.market-edit-row {
    background: #F1F5F9;
    border-radius: 20px;
    margin-bottom: 8px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    direction: rtl;
    transition: transform 0.15s ease;
}

.market-edit-row:hover {
    transform: translateY(-1px);
}
.task-bank-item {
    background-color: #FDF4E3 !important; /* Warm Cream background */
    border-left: 10px solid #FA6868; /* Use Coral only as a side accent */
    color: #134686; /* Deep Blue text */
    margin-bottom: 12px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    padding: 15px;
    width: 100%;
}

/* Sort button for chores bank */
.sort-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #FDF4E3;
    border: 2px solid #FAAC68;
    border-radius: 20px;
    padding: 6px 14px;
    color: #134686;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.sort-btn:hover {
    background: #FAAC68;
    color: white;
}
.sort-btn i {
    font-family: 'Material Symbols Rounded' !important;
}

/* Icon-only sort button */
.sort-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #FDF4E3;
    border: 2px solid #FAAC68;
    border-radius: 50%;
    color: #134686;
    cursor: pointer;
    transition: all 0.2s;
}
.sort-btn-icon:hover {
    background: #FAAC68;
    color: white;
}
.sort-btn-icon i {
    font-family: 'Material Symbols Rounded' !important;
    font-size: 1.2rem;
}

/* Fix the icon color inside the line */
.task-bank-item i {
    color: #5A9CB5 !important; /* Palette Blue for the icon */
    font-family: 'Material Symbols Rounded' !important;
    font-weight: normal;
    font-style: normal;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    flex-shrink: 0;
}
.task-line {
    display: flex;
    align-items: center;
}
.task-input-line span {
    color: #134686 !important;
    font-weight: 800;
}
/* Danger Pill for Delete */
.delete-child-pill {
    background-color: #FA6868 !important;
    color: white !important;
    border-radius: 20px;
    padding: 2px 12px;
    font-size: 0.8rem;
    cursor: pointer;
    border: none;
    font-weight: 700;
}

/* Pill for adjusting market beez cost */
/* The Beez Stepper (the +/- pill) */
.loomi-stepper,
.star-stepper {
    border: 2px solid #FAAC68 !important; /* Orange accent */
    background: #ffffff;
    border-radius: 30px;
    padding: 4px 8px; /* Reduced padding to make it narrower */
    display: flex;
    flex-direction: column; /* Vertical layout */
    align-items: center;
    gap: 2px; /* Reduced gap */
    flex-shrink: 0;
    min-width: fit-content; /* Only as wide as content */
}

.loomi-stepper button {
    border: none;
    background: none;
    font-size: 0.8rem;
    font-weight: bold;
    cursor: pointer;
    color: #1e293b;
    padding: 0 4px; /* Slightly more padding */
    line-height: 1;
    min-width: 20px; /* Consistent button width */
}
.loomi-stepper .loomi-icon-imgs-stack {
    width: 16px;
    height: 16px;
}
.loomi-stepper .loomi-icon-img {
    width: 16px;
}
.loomi-stepper .loomi-count {
    font-size: 0.85rem; /* Slightly larger */
    min-width: 24px; /* Fixed width for number */
    text-align: center;
    color: #FAAC68 !important; /* Orange numbers feel like honey */
}

/* The Bee counters inside the white pills */
.star-count {
    color: #FAAC68 !important; /* Orange number */
    font-size: 1.3rem;
    font-weight: 800;
    min-width: 40px; 
    text-align: center; 
}

/* Task row loomi count - smaller */
.task-edit-row .loomi-count {
    font-size: 0.7rem !important;
    font-weight: 700;
    color: #FAAC68;
    min-width: 14px;
}
.market-task-name { 
    font-weight: 600; 
    color: #134686; 
    font-size: 1rem; 
    flex: 1;
    margin: 0 10px;
    text-align: right;
    min-width: 0; /* Allow text to shrink if needed */
}

/* The text for the actual chore/task name */
.chore-name-text {
    color: #134686 !important;
    font-weight: 700;
    font-size: 1rem;
}

/* General Buttons */
.delete-bin-btn-small { background: #fff1f2; color: #e11d48; border: 1px solid #fecdd3; padding: 5px 8px; border-radius: 8px; cursor: pointer; }
/* Settings Header Actions */
.settings-header-actions {
    background-color: #134686; /* Deep Blue anchor */
    padding: 15px;
    border-radius: 0 0 30px 30px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}

/* Update the buttons to shine against the blue */
.save-btn { 
    background-color: #FACE68 !important; 
    color: #134686; 
    font-weight: 800;
    border: none;
    border-radius: 15px;
    padding: 10px 25px;
    cursor: pointer;
    transition: all 0.1s;
}
.save-btn:active {
    transform: translateY(3px);
}

.back-btn { 
    background-color: #FAAC68 !important; 
    color: #134686 !important; 
    font-weight: 800;
    border: none;
    border-radius: 15px;
    padding: 10px 25px;
    cursor: pointer;
    transition: all 0.1s;
    box-shadow: 0 4px 0px #E5954F; /* 3D effect matching save button */
}
.back-btn:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0px #E5954F !important;
}
.back-to-settings-btn {
    background-color: #FAAC68 !important; /* Palette Orange */
    color: #134686 !important;
    padding: 12px 40px;
    border-radius: 50px;
    font-weight: 800;
    border: none;
    box-shadow: 0 4px 0px #E5954F;
    margin-top: 20px;
    cursor: pointer;
    transition: all 0.1s;
}
.back-to-settings-btn:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0px #E5954F !important;
}

/* Override just the colors for add-to-all-btn (size comes from shared rule above) */
.add-to-all-btn {
    background-color: #FAAC68 !important; /* Orange instead of yellow */
    box-shadow: 0 4px 0px #E5954F !important; /* Orange shadow */
    margin-bottom: 0 !important; /* No margin when in flex row with other button */
}

/* Buttons in the same row - force identical sizing */
.add-btn-row {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.4 !important;
    box-shadow: 0 6px 0px #E5B959 !important; /* Thicker 3D shadow */
}

/* Orange variant - only change colors */
.add-btn-orange {
    background-color: #FAAC68 !important;
    box-shadow: 0 6px 0px #E5954F !important; /* Thicker 3D shadow */
}
.add-btn-orange:active {
    transform: translateY(3px);
    box-shadow: 0 3px 0px #E5954F !important;
}
.add-btn-row:active {
    transform: translateY(3px);
    box-shadow: 0 3px 0px #E5B959 !important;
}
/* Slider that hosts the routine cards */
.snap-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 20px;
    padding: 10px;
    width: 100%;
    height: calc(100vh - 150px); /* Limit height to prevent page scrolling */
    overflow-y: hidden; /* Prevent vertical scrolling of the slider */
}

/* Cards for each child inside the slider */
.routine-child-card {
    min-width: 90%;
    background: #F9FAFB;
    border-radius: 40px;
    padding: 30px;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%; /* Fill the slider height */
    overflow: hidden; /* Prevent card overflow */
    max-height: 100%; /* Ensure card doesn't exceed container */
}

.routine-card {
    height: 100%; /* Cards stretch to fill the 2x2 grid slots */
    background: white;
    border-radius: 25px;
    box-shadow: 0 10px 0px #FDF4E3; /* Cream 3D base */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* Card heading styles */
.routine-child-header {
    text-align: center;
    margin-bottom: 20px;
    flex-shrink: 0; /* Prevent header from shrinking */
}

.routine-child-header h2 {
    color: #134686 !important; /* Dark blue for better readability */
    font-weight: 900 !important; /* Extra bold */
    font-size: 2.5rem;
    color: var(--text-main);
    margin-bottom: 20px;
    font-weight: 800;
}

/* Task grid to mirror the visual reference */
.routine-container {
    height: 80vh; /* Keeps content within view */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.routine-tasks-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr); /* 6 slots (2 columns × 3 rows) */
    gap: 20px;
    flex-grow: 1;
    width: 100%;
    height: 70vh; /* Fixed height to match evening routine */
    overflow-y: auto; /* Allow scrolling within the task list if more than 6 tasks */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    padding-bottom: 20px;
    align-items: stretch; /* Ensure items stretch to fill grid cells */
    grid-auto-rows: 1fr; /* Make all rows equal height */
}

/* Force the Morning grid to match the Evening layout */
.morning-routine-container, #morning-tasks-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(2, 1fr) !important;
    gap: 15px !important;
    height: 70vh !important; /* Limits height so button stays visible */
    overflow-y: auto !important; /* Allow scrolling within task list */
    overflow-x: hidden !important; /* Prevent horizontal scrolling */
}

#morning-routine-view .chores-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
    max-height: 60vh; /* Leaves room for the Back button */
    gap: 15px;
}

/* Ensure routine view doesn't scroll - only the task list inside */
#view-routine {
    overflow: hidden !important;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 20px !important; /* Match other views for consistent back button positioning */
}

/* Ensure the back button is always at the bottom */
.back-button-container {
    position: sticky;
    bottom: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 100;
}

.routine-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    grid-template-rows: repeat(2, 1fr);    /* 2 rows */
    gap: 20px;
    height: 70vh; /* Fixed height to keep the Back button on screen */
    padding-bottom: 20px;
}

.routine-item {
    background: white;
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    transition: all 0.2s ease;
    overflow: hidden; /* Prevent content overflow */
    border: 2px solid transparent;
    position: relative; /* Ensure proper positioning */
    width: 100%; /* Fill grid cell */
    height: 100%; /* Fill grid cell */
    min-height: 0; /* Allow items to shrink in grid */
    box-sizing: border-box; /* Include padding in size calculation */
}

.routine-item .task-text {
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
    margin-top: 10px;
}

.routine-item .task-icon {
    font-size: 2rem;
    margin-bottom: 5px;
}

/* Chore icons - simple line style */
.chore-icon {
    font-family: 'Material Symbols Rounded' !important;
    font-weight: 300 !important; /* Lighter weight for line-drawing look */
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24 !important;
    color: #5A9CB5 !important; /* Loomi blue */
    font-size: 2.5rem !important;
}

.routine-item.completed {
    background: #fcfcfc;
    border: 2px solid #e2e8f0;
    opacity: 0.6;
}

.routine-item.completed .task-text {
    text-decoration: line-through;
}

/* Circular indicator for each task icon */
.task-check-circle {
    width: 28px;
    height: 28px;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    background: white;
    margin-bottom: 10px;
}

.routine-item.completed .task-check-circle {
    background: #22c55e;
    border-color: #22c55e;
}

.add-task-header {
    display: flex !important;
    flex-direction: row-reverse !important; /* Right-to-left for Hebrew */
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    margin-bottom: 15px !important;
}

.add-task-header input {
    flex: 1 !important; /* Takes up all available space */
    height: 40px !important;
    border-radius: 12px !important;
}

.add-task-header .add-btn {
    width: 70px !important; /* Compact button */
    height: 40px !important;
    white-space: nowrap !important;
}

.add-task-header-row {
    display: flex !important;
    flex-direction: row-reverse !important; /* Hebrew RTL */
    flex-wrap: nowrap !important; /* Forces input and button to stay on one line */
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
}

.card-content-list {
    flex-grow: 1;
    overflow-y: auto !important; /* Allows scrolling inside the card only */
    margin-top: 10px;
    padding-right: 5px;
}

/* ========================================
   CHILD PERSONAL PAGE STYLES
   ======================================== */

.child-page-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    padding: 10px;
}

.child-page-card {
    background: #FDF4E3;
    border-radius: 25px;
    padding: 20px;
    box-shadow: 0 8px 0px rgba(0,0,0,0.05);
    border-top: 6px solid #5A9CB5;
}

.child-page-card h3 {
    color: #134686;
    font-size: 1.3rem;
    font-weight: 800;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.child-page-card h3 .material-symbols-rounded {
    font-size: 1.5rem;
    color: #5A9CB5;
}

.card-subtitle {
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
    display: block;
    margin-top: 4px;
}

/* Child page header */
.child-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

/* Header loomis display */
.header-loomis {
    display: flex;
    align-items: center;
    gap: 10px;
    direction: ltr;
}

.header-loomis-icon {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

.header-loomis-count {
    font-size: 1.4rem;
    font-weight: 800;
    color: #134686;
}

/* Bank Card */
.bank-card {
    border-top-color: #8BC34A;
}

.bank-display {
    text-align: center;
    padding: 15px;
    background: white;
    border-radius: 20px;
    margin-bottom: 15px;
}

.bank-amount {
    font-size: 2.5rem;
    font-weight: 900;
    color: #134686;
}

.bank-controls {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.bank-btn {
    width: 50px;
    height: 40px;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
}

.bank-btn.plus {
    background: #8BC34A;
    color: white;
    box-shadow: 0 3px 0 #6B9B3A;
}

.bank-btn.plus:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #6B9B3A;
}

.bank-btn.minus {
    background: #FA6868;
    color: white;
    box-shadow: 0 3px 0 #D85858;
}

.bank-btn.minus:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #D85858;
}

/* Memos Card */
.memos-card {
    border-top-color: #FA6868;
}

.memo-input-row {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
    direction: rtl;
}

.memo-input {
    flex: 1;
    padding: 10px 12px;
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    font-family: inherit;
    font-size: 0.9rem;
}

.memo-date-input {
    width: 110px;
    padding: 8px 6px;
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    font-family: inherit;
    font-size: 0.75rem;
}

.memo-add-btn {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 12px;
    background: #FACE68;
    color: #134686;
    font-size: 1.5rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 3px 0 #E5B95A;
    transition: all 0.2s;
}

.memo-add-btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #E5B95A;
}

.memos-list {
    max-height: 250px;
    overflow-y: auto;
}

.memo-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: white;
    border-radius: 12px;
    margin-bottom: 8px;
    border-right: 4px solid #5A9CB5;
}

.memo-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.memo-text {
    color: #134686;
    font-weight: 600;
    font-size: 0.95rem;
}

.memo-date {
    color: #64748b;
    font-size: 0.8rem;
}

.memo-delete-btn {
    background: none;
    border: none;
    color: #FA6868;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 5px;
}

.no-memos {
    text-align: center;
    color: #94a3b8;
    padding: 20px;
    font-size: 0.9rem;
}

/* Calendar memo chip - same as regular events, just with icon */
.calendar-memo .event-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.calendar-memo .memo-icon {
    font-family: 'Material Symbols Rounded' !important;
    font-size: 1rem;
    flex-shrink: 0;
}

/* Color variants for child page cards */
.child-page-card.event-ido { border-top-color: #5A9CB5; }
.child-page-card.event-lani { border-top-color: #9C27B0; }
.child-page-card.event-lori { border-top-color: #8BC34A; }
.child-page-card.event-mom { border-top-color: #E91E63; }