/* Basic CSS to make the page usable and demonstrate filtering */

/* Body and container minimum styles */
body {
    font-family: sans-serif; /* Use a common sans-serif font if Tailwind isn't fully applied */
    margin: 0;
    padding: 0;
    background-color: #f3f4f6; /* Keep Tailwind bg-gray-50 equivalent */
    color: #374151; /* Keep Tailwind text-gray-800 equivalent */
}

.container {
    max-width: 1200px; /* Limit container width */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem; /* Match Tailwind px-4 */
    padding-right: 1rem; /* Match Tailwind px-4 */
}

/* Header Styles */
header {
    background-color: #1e3a8a; /* Match Tailwind bg-blue-900 */
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Match Tailwind shadow-md */
    padding-top: 1.5rem; /* Match Tailwind py-6 */
    padding-bottom: 1.5rem; /* Match Tailwind py-6 */
}

header .container {
    display: flex; /* Match Tailwind flex */
    justify-content: space-between; /* Match Tailwind justify-between */
    align-items: center; /* Match Tailwind items-center */
}

header h1 {
    font-size: 1.5rem; /* Match Tailwind text-2xl */
    font-weight: bold; /* Match Tailwind font-bold */
    margin-left: 1rem; /* Match Tailwind space-x-4 */
}

header svg {
    height: 2.5rem; /* Match Tailwind h-10 */
    width: 2.5rem; /* Match Tailwind w-10 */
    fill: white;
}


/* Main Content Area */
main .container {
    padding-top: 2rem; /* Match Tailwind py-8 */
    padding-bottom: 2rem; /* Match Tailwind py-8 */
}

/* Filter Options Section */
#filter-options { /* This is the ID of the div wrapping the two filter groups */
    /* This div itself isn't styled with bg-white, etc. in Tailwind; its children are. */
    /* So, we style the direct children as they were in Tailwind */
}

#filter-options > div:first-child { /* This refers to the div that wraps both hashtag and sort options.
                                      The HTML structure implies #filter-options is an outer div with p-4 bg-white etc.
                                      Let's style #filter-options itself then */
     background-color: white; /* Match Tailwind bg-white */
     border-radius: 0.5rem; /* Match Tailwind rounded-lg */
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); /* Match Tailwind shadow-md */
     padding: 1rem; /* Match Tailwind p-4 */
     margin-bottom: 2rem; /* Match Tailwind mb-8 on the section containing filter-options div */
}


#filter-options h2 {
    font-size: 1.25rem; /* Match Tailwind text-xl */
    font-weight: 600; /* Match Tailwind font-semibold */
    margin-bottom: 1rem; /* Match Tailwind mb-4 */
}

#filter-options > div:first-child > div { /* Target the grid columns */
    /* This structure is getting complex if trying to replicate Tailwind grid directly.
       Let's simplify. The grid definition is on #filter-options in HTML.
       The label and hashtag container are inside the first grid child.
    */
}

/* General label styling within filter options */
#filter-options label {
    display: block; /* Match Tailwind block */
    font-size: 0.875rem; /* Match Tailwind text-sm */
    font-weight: 500; /* Match Tailwind font-medium */
    color: #4b5563; /* Match Tailwind text-gray-700 */
    margin-bottom: 0.5rem; /* Match Tailwind mb-2 */
}

#filter-options select {
    width: 100%; /* Match Tailwind w-full */
    padding: 0.5rem 0.75rem; /* Match Tailwind px-3 py-2 */
    border: 1px solid #d1d5db; /* Match Tailwind border border-gray-300 */
    border-radius: 0.375rem; /* Match Tailwind rounded-md */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* Match Tailwind shadow-sm */
    /* Focus styles are complex, omit for basic CSS */
}

/* Hashtag Filter Container */
#hashtag-filter-container {
    border: 1px solid #d1d5db; /* Match Tailwind border border-gray-300 */
    border-radius: 0.375rem; /* Match Tailwind rounded-md */
    padding: 0.75rem; /* Match Tailwind p-3 */
    background-color: #f9fafb; /* Match Tailwind bg-gray-50 */
    max-height: 12rem; /* Match Tailwind max-h-48 */
    overflow-y: auto; /* Keep overflow-y-auto */
    /* space-y-2 applied via JS-generated divs */
}

#hashtag-filter-container .flex { /* Styling for the div containing checkbox and label */
    display: flex;
    align-items: center;
    padding-top: 0.25rem; /* Approx space-y-2 */
    padding-bottom: 0.25rem; /* Approx space-y-2 */
}


#hashtag-filter-container input[type="checkbox"] {
    height: 1rem; /* Match Tailwind h-4 */
    width: 1rem; /* Match Tailwind w-4 */
    color: #2563eb; /* Match Tailwind text-blue-600 */
    border-color: #d1d5db; /* Match Tailwind border-gray-300 */
    border-radius: 0.25rem; /* Match Tailwind rounded */
    /* focus:ring styles omitted */
    cursor: pointer;
}

#hashtag-filter-container label { /* This label is specific to hashtags */
    font-size: 0.875rem; /* Match Tailwind text-sm */
    color: #4b5563; /* Match Tailwind text-gray-700 */
    margin-left: 0.5rem; /* Match Tailwind ml-2 */
    display: inline-block; /* Make label clickable */
    cursor: pointer;
    user-select: none; /* Match Tailwind select-none */
    margin-bottom: 0; /* Override general label margin-bottom if necessary */
}

/* Tweets Container (Grid) */
#tweets {
    display: grid; /* Match Tailwind grid */
    /* grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); Tailwind uses responsive prefixes.
       This is a simplified version. For md:grid-cols-2 lg:grid-cols-3, we need media queries.
       For now, a flexible grid: */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Better for responsiveness */
    gap: 1.5rem; /* Match Tailwind gap-6 */
}

/* Individual Tweet Cards */
.tweet-card { /* Class added in script.js */
    background-color: white; /* Match Tailwind bg-white */
    border-radius: 0.5rem; /* Match Tailwind rounded-lg */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); /* Match Tailwind shadow-md */
    padding: 1rem; /* Match Tailwind p-4 */
    display: flex; /* Match Tailwind flex */
    flex-direction: column; /* Match Tailwind flex-col */
    height: 100%; /* Match Tailwind h-full */
}

.tweet-text { /* Class added in script.js */
    flex-grow: 1; /* Match Tailwind flex-grow */
}

.tweet-text p {
    font-size: 0.875rem; /* Match Tailwind text-sm */
    color: #374151; /* Match Tailwind text-gray-700 */
    margin-bottom: 0.5rem; /* Match Tailwind mb-2 */
    white-space: pre-wrap; /* Match Tailwind whitespace-pre-wrap */
    word-break: break-word; /* Match Tailwind break-words */
}

.tweet-text a {
    color: #3b82f6; /* Match Tailwind text-blue-500 */
    text-decoration: underline;
}

.tweet-text span.font-semibold { /* Hashtags highlighted in text */
    color: #1d4ed8; /* Match Tailwind text-blue-700 */
    font-weight: 600; /* Match Tailwind font-semibold */
}


.tweet-hashtags { /* Class added in script.js for the list of hashtags */
    margin-top: 0.5rem; /* Match Tailwind mt-2 */
    font-size: 0.75rem; /* Match Tailwind text-xs */
    color: #2563eb; /* Match Tailwind text-blue-600 */
}

.tweet-hashtags span {
    margin-right: 0.5em; /* Space between hashtags */
}


.media img {
    display: block; /* Prevent extra space below image */
    margin-top: 0.5rem; /* Match Tailwind mt-2 */
    max-height: 12rem; /* Match Tailwind max-h-48 */
    width: auto; /* Match Tailwind w-auto */
    border-radius: 0.375rem; /* Match Tailwind rounded-md */
    object-fit: contain; /* Match Tailwind object-contain */
}

.media a {
     font-size: 0.75rem; /* Match Tailwind text-xs */
     color: #3b82f6; /* Match Tailwind text-blue-500 */
     text-decoration: underline;
     word-break: break-all;
}

.tweet-timestamp { /* Class added in script.js */
    font-size: 0.75rem; /* Match Tailwind text-xs */
    color: #9ca3af; /* Match Tailwind text-gray-400 */
    /* margin-top: 0.25rem;  Tailwind mt-1 */
    padding-top: 0.5rem; /* Match Tailwind pt-2 */
    margin-top: auto; /* Match Tailwind mt-auto */
}


/* Special states like loading/no tweets */
#tweets > .col-span-full, /* Loading/No results message */
#tweets > div.col-span-full /* More specific if needed from JS generation */
 {
    grid-column: 1 / -1; /* Make it span all columns */
    text-align: center;
    padding: 3rem; /* Match Tailwind p-12 */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #6b7280; /* Match Tailwind text-gray-500 */
}

#tweets .animate-spin { /* Targeting the spinner class within #tweets */
     display: inline-block; /* Ensure spinner is visible */
     border-radius: 50%; /* Match Tailwind rounded-full */
     height: 3rem; /* Match Tailwind h-12 */
     width: 3rem; /* Match Tailwind w-12 */
     border-bottom-width: 2px; /* Match Tailwind border-b-2 */
     border-style: solid; /* Make sure border style is set */
     border-top-color: transparent; /* For typical spinner look */
     border-right-color: transparent;
     border-left-color: transparent;
     border-bottom-color: #1e3a8a; /* Match Tailwind border-blue-900 */
     animation: spin 1s linear infinite;
}

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

#tweets > .col-span-full span, /* Text next to spinner */
#tweets > div.col-span-full span
 {
    margin-left: 0.75rem; /* Match Tailwind ml-3 */
    font-size: 1.125rem; /* Match Tailwind text-lg */
     font-weight: 500; /* Match Tailwind font-medium */
}

#tweets p.text-red-500, /* Styling for error messages in tweets area */
#tweets > .col-span-full.text-red-500 /* If the error message itself is the col-span-full element */
 {
     color: #ef4444; /* Match Tailwind text-red-500 */
      padding: 2.5rem; /* Match Tailwind py-10 */
}
#hashtag-filter-container p.text-red-500,
#hashtag-filter-container p.text-xs.text-red-500 /* More specific if needed */
 {
     color: #ef4444;
     font-size: 0.75rem; /* Match Tailwind text-xs */
}


/* Footer Styles */
footer {
    background-color: #1e3a8a; /* Match Tailwind bg-blue-900 */
    color: white;
    padding-top: 1.5rem; /* Match Tailwind py-6 */
    padding-bottom: 1.5rem; /* Match Tailwind py-6 */
    margin-top: 2rem; /* Match Tailwind mt-8 */
    text-align: center; /* Match Tailwind text-center */
}

footer p {
    font-size: 1rem;
}

footer p.text-sm {
     font-size: 0.875rem; /* Match Tailwind text-sm */
}

/* Responsive Grid for Tweets (approximating Tailwind's md and lg breakpoints) */
@media (min-width: 768px) { /* md breakpoint */
    #tweets {
        /* grid-template-columns: repeat(2, 1fr); Tailwind's md:grid-cols-2 */
    }
     /* The auto-fill with minmax should handle this gracefully already */
}

@media (min-width: 1024px) { /* lg breakpoint */
    #tweets {
        /* grid-template-columns: repeat(3, 1fr); Tailwind's lg:grid-cols-3 */
    }
    /* The auto-fill with minmax should handle this gracefully already */
}

/* Filter options grid (approximating Tailwind's md:grid-cols-2) */
/* The HTML uses "grid grid-cols-1 md:grid-cols-2 gap-6" on #filter-options > div:first-child > div.
   Let's select that wrapper directly. Its ID is "filter-options" from HTML, but its direct child is the grid.
   HTML: <div id="filter-options" class="grid grid-cols-1 md:grid-cols-2 gap-6">
   Let's target the #filter-options element if it's meant to be the grid container for filters.
   Ah, the HTML structure is:
   <section class="mb-8">
      <div class="p-4 bg-white rounded-lg shadow-md"> <--- This is the item I styled as #filter-options > div:first-child
        <h2...>Filter Options</h2>
        <div id="filter-options" class="grid grid-cols-1 md:grid-cols-2 gap-6"> <-- This is the actual grid
   So the CSS selector for the grid should be `#filter-options`.
*/

#filter-options { /* This IS the grid container for filters in HTML */
    display: grid;
    grid-template-columns: 1fr; /* Default to 1 column */
    gap: 1.5rem; /* Tailwind gap-6 */
}

@media (min-width: 768px) { /* md breakpoint */
    #filter-options {
        grid-template-columns: repeat(2, 1fr); /* md:grid-cols-2 */
    }
}