body {
            font-family: 'Poppins', sans-serif;
        }

        /* Styling for location boxes (Map View) */
        .location-box {
            border: 1px solid #cbd5e1; color: #1f2937; padding: 0.3rem 0.4rem;
            text-align: center; cursor: pointer; border-radius: 0.375rem;
            transition: all 0.2s ease-in-out;
            font-size: 0.85rem; font-weight: 500;
            line-height: 1.15rem; display: flex; align-items: center;
            justify-content: center; min-height: 48px;
            overflow-wrap: break-word; word-break: break-word;
            position: relative; background-color: #f8fafc; overflow: hidden; z-index: 1;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        }
        .location-box::before {
            content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
            background-size: cover; background-position: center; opacity: 0.15;
            z-index: -1; transition: opacity 0.2s ease-in-out;
        }
        .location-box.us-flag::before { background-image: url('https://upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg'); }
        .location-box.ca-flag::before { background-image: url('https://upload.wikimedia.org/wikipedia/en/c/cf/Flag_of_Canada.svg'); }
        .location-box:hover { transform: scale(1.03); border-color: #94a3b8; }
        .location-box.selected {
            border-color: #4b5563; color: #ffffff; font-weight: 600;
            background-color: rgba(55, 65, 81, 0.8); /* bg-gray-700 overlay */
            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
        }
        .location-box.selected::before { opacity: 0.4; }
        .location-box.home {
             color: #ffffff; font-weight: 700;
             text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
        }
        .location-box.home::before { opacity: 0; display: none; }
        .location-box.home.us-flag { background-color: #002868; border-color: #001f4f; }
        .location-box.home.ca-flag { background-color: #FF0000; border-color: #cc0000; }

        /* Styling for tabs and export button */
        .controls-container {
            display: flex; flex-direction: column; align-items: center;
            margin-bottom: 1.5rem;
        }
        .tabs-wrapper {
             display: flex; justify-content: center; space-x: 4;
             width: 100%; border-bottom: 1px solid #e5e7eb;
             padding-bottom: 0.75rem; margin-bottom: 1rem;
        }
        .tab-button, .export-button {
            padding: 0.5rem 1rem; border-radius: 0.375rem; cursor: pointer;
            font-weight: 500; transition: background-color 0.2s ease, color 0.2s ease;
            border: 1px solid transparent;
        }
        .tab-button { background-color: #e5e7eb; color: #374151; }
        .tab-button:hover { background-color: #d1d5db; }
        .tab-button.active { background-color: #4f46e5; color: white; border-color: #4338ca; }
        .export-button {
            background-color: #FFFFFF; color: grey; border-color: #059669;
        }
        .export-button:hover { background-color: #EEEEEE; }

        /* Styling for view containers */
        .view-container { display: none; }
        .view-container.active { display: block; }

        /* Styling for the modal */
        #date-modal {
            display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%;
            overflow: auto; background-color: rgba(0,0,0,0.5); align-items: center; justify-content: center;
        }
        #date-modal.active { display: flex; }
        .modal-content {
            background-color: #fefefe; margin: auto; padding: 1.5rem 2rem;
            border: 1px solid #888; width: 90%; max-width: 500px;
            border-radius: 0.5rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1); text-align: center;
        }
        .modal-close-btn {
            position: absolute; top: 10px; right: 15px; color: #aaa; font-size: 28px;
            font-weight: bold; cursor: pointer;
        }
        .modal-close-btn:hover, .modal-close-btn:focus { color: black; text-decoration: none; }
        .date-input, .reason-input {
            padding: 0.6rem; border: 1px solid #cbd5e1; border-radius: 0.375rem;
            background-color: white; font-size: 0.9rem; width: 100%;
        }
        .date-input { margin-bottom: 0.5rem; }
        .reason-input { min-height: 60px; resize: vertical; }
        .date-section { margin-bottom: 1.5rem; }
        .date-section-{ font-weight: 600; color: #374151; margin-bottom: 0.5rem; display: block; text-align: left; }
        .checkbox-label {
             display: flex; align-items: center; justify-content: center; margin-bottom: 0.75rem; cursor: pointer;
        }
        .checkbox-label input { margin-right: 0.5rem; width: 1rem; height: 1rem; }

        /* Hide sections based on checkboxes */
        .home-active .date-section { display: none; }
        .birthplace-active:not(.home-active) #first-visit-section { display: none; }

        /* Grid layouts */
        .map-grid { display: grid; gap: 0.5rem; }
        .us-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        @media (min-width: 640px) { .us-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
        @media (min-width: 1024px) { .us-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
        .ca-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        @media (min-width: 640px) { .ca-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
        @media (min-width: 1024px) { .ca-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

        /* --- List view styling --- */
        #list-view ul { list-style: none; padding: 0; }
        #list-view li {
            background-color: #f9fafb; /* Base background */
            border: 1px solid #e5e7eb; border-radius: 0.375rem;
            margin-bottom: 0.5rem;
            display: flex; /* Use flexbox for layout */
            align-items: fill; /* Make children fill height */
            position: relative; overflow: hidden;
            /* REMOVED padding */
        }

        /* Container for the flag image and gradient overlay */
        .list-flag-container {
            position: relative; /* For positioning the overlay */
            flex-shrink: 0; /* Prevent shrinking */
            width: 100px; /* Fixed width for the flag area */
            overflow: hidden; /* Hide overflowing gradient */
        }

        /* Flag image element */
        .list-flag-img {
            display: block; /* Remove extra space below image */
            height: 100%; /* Fill height of container */
            width: 100%; /* Fill width of container */
            object-fit: cover; /* Cover the area, maintaining aspect ratio */
            object-position: left center; /* Show left side of flag */
            z-index: 0; /* Behind gradient */
        }

        /* Gradient overlay using pseudo-element on the container */
        .list-flag-container::before {
            content: ""; position: absolute; left: 0; top: 0; bottom: 0; right: 0; /* Cover the container */
            /* Gradient fading to standard background */
            background-image: linear-gradient(to right, rgba(249, 250, 251, 0.4) 0%, rgba(249, 250, 251, 1) 100%);
            pointer-events: none;
            z-index: 1; /* Above flag, below text */
        }

        /* Home item specific styles */
        #list-view li.home-item {
            background-color: #ecfdf5; /* Override base background */
            border-color: #a7f3d0;
        }
        /* Gradient overlay for Home Item */
        #list-view li.home-item .list-flag-container::before {
             background-image: linear-gradient(to right, rgba(236, 253, 245, 0.4) 30%, rgba(236, 253, 245, 1) 100%);
        }
        #list-view .list-content-wrapper {
            flex-grow: 1;
            padding: 0.75rem 1rem; 
            position: relative; 
            display: flex; 
            justify-content: space-between;
            align-items: flex;
            flex-wrap: wrap;
            z-index: 2;
        }
        #list-view .location-name {
            font-weight: 700;
            font-size: 1.25rem; 
            color: #1f2937; 
            margin-right: 1rem;
            flex-shrink: 0;
            margin-bottom: 0.25rem;
            text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.7);
        }
         @media (min-width: 640px) { #list-view .location-name { margin-bottom: 0; } }
        #list-view .visit-details {
            color: #374151;
            font-size: 0.85rem; text-align: left; flex-grow: 1;
            text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.6); /* White shadow */
        }
         @media (min-width: 640px) { #list-view .visit-details { text-align: right; } }
         #list-view .visit-info { margin-bottom: 0.5rem; }
         #list-view .visit-info:last-child { margin-bottom: 0; }
         #list-view .visit-date { font-weight: 500; }
         #list-view .visit-reason {
            font-style: italic; color: #4b5563;
            display: block;
            margin-top: 0.1rem; white-space: pre-wrap; word-break: break-word;
         }
         #list-view .location-label {
             font-weight: 700; margin-left: 0.5rem; font-size: 0.8em;
             vertical-align: middle; display: inline-block;
             padding: 0.1rem 0.4rem; border-radius: 0.25rem;
             text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
         }
         #list-view .home-label { color: #047857; background-color: #d1fae5; }
         #list-view .birthplace-label { color: #991b1b; background-color: #fee2e2; }