/* style.css - Updated with Media Queries for Mobile Responsiveness */

/* Import Lato font from Google Fonts (No change) */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;900&display=swap');

/* Apply box-sizing: border-box; to all elements and pseudo-elements */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Basic styling (Default styles for larger screens - mostly unchanged) */
body {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    background-color: #f8f8f8;
    padding: 20px;
    font-size: 140%; /* Default font size - you can adjust this base size */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Lato', sans-serif;
    font-weight: 900;
}

h1, h2 {
    text-align: center;
}

h2 {
    margin-top: 30px;
}

ul {
    list-style: none;
    padding: 0;
}

li {
    margin-bottom: 10px;
}

.app-header {
    display: flex;
    justify-content: space-between; /* Pushes items to ends */
    align-items: center; /* Vertically aligns items */
    padding: 5px 15px; /* Adjust padding as needed */
    margin-bottom: 15px; /* Space below header */
}

/* Style the link containing the logo */
.header-logo-link {
    line-height: 0; /* Prevent extra space from link line height */
}

.header-logo {
    width: 200px;  /* Set desired width */
    height: auto;  /* Let height adjust automatically */
    display: block; /* Good practice for images */
    vertical-align: middle; /* Helps alignment within link */
}

/* Style the logout link itself TO LOOK LIKE A BUTTON */
.header-logout a {
    /* --- Styles adapted from old .logout-button a --- */
    background-color: #4CAF50; /* Green */
    border: none;
    color: white !important; /* Use !important to ensure white overrides default link colors */
    padding: 8px 16px; /* Default padding - adjust as needed */
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1em; /* Default font size - adjust as needed */
    margin: 4px 2px; /* Keep margin */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer;
    font-weight: 900; /* Bold text */
    /* --- End adapted styles --- */
}

/* Optional: Add a hover effect */
.header-logout a:hover {
    background-color: #45a049; /* Darker green on hover */
    text-decoration: none;
    color: white !important;
}

/* Grid container (Default 2-column grid for larger screens - No change) */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns on larger screens */
    grid-template-rows: auto auto;
    gap: 20px;
    width: 100%;
}

/* Section boxes (No change) */
.section {
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    width: 100%; /* Ensure sections take full width of grid cell */
    display: flex; /* Use flexbox to control SVG sizing within section */
    flex-direction: column; /* Stack h2 and svg vertically */

}
.section > svg { /* Target SVG elements that are direct children of .section */
    flex-grow: 1; /* Allow SVG to grow and take available space */
    min-height: 0; /* Important for flexbox height calculation */
}

/* Pastel colors for sections (No change) */
.section:nth-of-type(1) { /* Chores for Today */
    background-color: #FFB6C1; /*Light Pink */
}

.section:nth-of-type(2) { /* Chores Available to Claim */
    background-color: #FFFFD0; /* Light Green */
}

.section:nth-of-type(3) { /* Points for the Last 7 Days */
    background-color: #ADD8E6; /* Light Blue */
}

.section:nth-of-type(4) { /* Points for the Last 4 Weeks */
    background-color: #90EE90; /* Light Yellow */
}

/* Form elements, buttons, logout button, etc. (No change - these are generally fine as they are) */
form {
    display: inline-block;
}

input[type="checkbox"] {
    margin-right: 5px;
}

.disabled-checkbox {
    pointer-events: none; /* Disable interaction */
    opacity: 0.6;           /* Visually indicate it's disabled */
}

button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 8px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
}

.claim-button { /* New selector - more robust and semantic */
    font-weight: 500;        /* Make Claim Button Text Medium-Bold (adjust as needed) */
}



ul:empty {
    display: none;
}

.toggle-description {
    border: 1px solid #222;
    background-color: transparent;
    border-radius: 50%;
    padding: 2px;
    cursor: pointer;
    font-size: 0.5em;
    line-height: 1;
    position: relative;
    top: -0.4em;
    color: red;

}

.long-description {
    border: 1px solid #222;
    padding: 10px;
    font-size: 0.9em;
    display: none;
    font-weight: 500;
}

.long-description-visible {
  display: block;
}
.long-description-hidden {
  display: none;
}

.hidden-button {
  display: none;
}

.visible-button {
  display: inline;
}
.page-container {
    max-width: 700px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ccc; /* Example border */
}

/* Basic form group spacing */
.page-container .form-group {
    margin-bottom: 15px;
}

/* Basic label styling */
.page-container label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

/* Basic input/select styling */
.page-container input[type="number"],
.page-container input[type="text"],
.page-container select {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    margin-bottom: 5px;
    border: 1px solid #ccc; /* Example border */
}

/* Kid selection styling */
.page-container .kid-selection label {
    display: inline-block;
    margin-left: 5px;
    margin-right: 15px;
    font-weight: normal;
}
.page-container .kid-selection input[type="checkbox"] {
    margin-right: 3px;
    vertical-align: middle; /* Align checkbox with label */
}

/* Common styles for Submit button and Cancel link */
.page-container button[type="submit"],
.page-container .cancel-link {
    display: inline-block; /* Allow margin/padding */
    padding: 10px 15px;
    margin: 10px 10px 0 0; /* Add some margin */
    border: 1px solid transparent; /* Start with transparent border */
    border-radius: 5px; /* Rounded corners */
    font-weight: bold;
    text-decoration: none; /* Remove underline from link */
    cursor: pointer;
    text-align: center;
    font-size: 1em; /* Match base font size */
}

/* Specific styles for Submit button (Green) */
.page-container button[type="submit"] {
    background-color: #4CAF50; /* Green */
    border-color: #4CAF50;
    color: white;
}

/* Specific styles for Cancel link (Red) */
.page-container .cancel-link {
    background-color: #dc3545; /* Red */
    border-color: #dc3545;
    color: white !important; /* Ensure white text overrides link color */
}

/* Hover effects */
.page-container button[type="submit"]:hover {
    background-color: #45a049; /* Darker green */
    border-color: #45a049;
}

.page-container .cancel-link:hover {
    background-color: #c82333; /* Darker red */
    border-color: #bd2130;
    color: white !important;
    text-decoration: none;
}

/* Message styling */
.page-container .message {
    border: 1px solid;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px; /* Optional rounded corners */
}
.page-container .message.error {
    color: #721c24; /* Darker red text */
    background-color: #f8d7da; /* Light red background */
    border-color: #f5c6cb; /* Reddish border */
}
.page-container .message.success {
    color: #155724; /* Darker green text */
    background-color: #d4edda; /* Light green background */
    border-color: #c3e6cb; /* Greenish border */
}


/* Target screen widths up to 992px (wider mobile/tablet breakpoint) */
@media screen and (max-width: 992px) {  /* BREAKPOINT CHANGED TO 992px */
    body {
        font-size: 280%; /* Double the font size on mobile */
        padding: 10px; /* Adjust padding for smaller screens */
    }

    h2 {
        margin-top: 20px; /* Adjust heading margins on mobile */
    }

    /* Change grid to a single column layout for mobile */
    .grid-container {
        grid-template-columns: 1fr; /* Single column on mobile */
        grid-template-rows: auto auto auto auto; /* Stack sections vertically */
        gap: 15px; /* Adjust gap for mobile */
    }

    .section {
        padding: 15px; /* Adjust section padding on mobile */
        margin-bottom: 15px; /* Adjust section margin on mobile */
    }

}


/* --- Mobile Styling for Dropdown Menu --- */
label[for="user-select"] { /* Label before dropdown */
    font-size: 1.2em; /* Slightly larger label text */
}

select#user-select { /* The dropdown itself */
    font-size: 1.5em; /* Larger dropdown text */
    padding: 8px;       /* Add some padding */
    margin: 5px 0;      /* Add vertical margin */
}

/* --- Mobile Styling for Checkboxes --- */
input[type="checkbox"] {
    transform: scale(1.8); /* Make checkboxes larger (scale by 1.8) */
    margin-right: 10px;    /* Increase right margin for spacing */
    margin-bottom: 5px;   /* Add a little bottom margin */
}

/* --- Mobile Styling for Buttons (Claim, Logout, etc.) --- */
.claim-button, .logout-button a { /* Target .claim-button and .logout-button a specifically */
    font-size: 1.3em;
    padding: 12px 24px;
    /* font-weight: inherit; */
}


 svg {
    display: block;        /* Make SVG a block-level element to take full width */
    width: 100%;         /* Make SVG width 100% of its container */
    height: auto;        /* Maintain aspect ratio, adjust height automatically */
    max-width: 100%;     /* Ensure it doesn't exceed container width */
    max-height: 100%;    /* Optional: Limit max height if needed */
}

.chore-completed .chore-name,
.chore-completed .chore-points { /* Target the chore name and points spans */
    text-decoration: line-through;
    color: #6c757d; /* Optional: Use Bootstrap's secondary text color for a 'grayed out' text feel */
}

/* Ensure interactive elements are NOT struck through if the rule accidentally applies */
.chore-completed input[type="checkbox"],
.chore-completed button {
    text-decoration: none;
    color: initial; /* Reset color if needed */
}
.past-day-chore {
    background-color: #f8f9fa; /* Example: Light grey background */
    /* You could also dim the text slightly: */
    /* opacity: 0.85; */
  }
  
  /* Optional: Style specific elements within past chores */
  .past-day-chore .chore-name {
    /* color: #555; */ /* Example: Slightly darker grey text */
  }