:root {
    --safe-area-inset-top: env(safe-area-inset-top, 0px);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-inset-left: env(safe-area-inset-left, 0px);
    --safe-area-inset-right: env(safe-area-inset-right, 0px);
}

body {
    font-family: 'Roboto Flex', Roboto, system-ui, sans-serif;
    padding: var(--safe-area-inset-top) var(--safe-area-inset-right) var(--safe-area-inset-bottom) var(--safe-area-inset-left);
}

select:disabled {
    background-color: #f3f4f6;
    /* Tailwind: bg-gray-100 */
    cursor: not-allowed;
    color: #6b7280;
    /* Tailwind: text-gray-500 */
}

/* Modal backdrop style (ensure it's styled for the common modal) */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

/* Custom select styling (if not using a Tailwind plugin for this) */
/* Ensure this doesn't conflict with other select stylings if you have them */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%236B7280%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right .7em top 50%;
    background-size: .65em auto;
    padding-right: 2.5em;
    /* Adjust if necessary based on your Tailwind form styling */
}

.filter-modal-size {
    width: 100%;
    max-width: 42rem;
    /* Tailwind's max-w-2xl */
}

/* Landing page specific feature card styles */
.feature-card-wrapper {
    display: block;
    /* Or flex if direct children need flex control */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    border-radius: 0.5rem;
    /* Tailwind: rounded-lg */
    background-color: white;
    /* Tailwind: bg-white */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    /* Tailwind: shadow-md */
    height: 100%;
    /* Makes cards in a row have the same height */
}

.feature-card-wrapper:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    /* Tailwind: shadow-lg */
}

.feature-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Ensures the link itself fills the wrapper */
    text-decoration: none;
    color: inherit;
    /* Inherits text color from parent */
    padding: 1.5rem;
    /* Tailwind: p-6 */
    border-radius: 0.5rem;
    /* Consistent with wrapper */
}

/* Styles for signup status indicators */
.status-indicator {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    /* Increased padding slightly */
    font-size: 0.8rem;
    /* Increased font size slightly */
    font-weight: 500;
    border-radius: 9999px;
    margin-left: 0.5rem;
    white-space: nowrap;
    /* Prevent text wrapping on the pill */
}

.status-joined {
    background-color: var(--g-success-container);
    color: var(--g-on-success-container);
}

.status-waitlisted {
    background-color: var(--g-tertiary-container);
    color: var(--g-on-tertiary-container);
}

/* Countdown Pill Styles */
.countdown-pill {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
    text-align: center;
    white-space: nowrap;
}

.countdown-today {
    background-color: var(--g-success-container);
    color: var(--g-on-success-container);
    animation: flashToday 1.5s infinite;
}

.countdown-tomorrow {
    background-color: var(--g-tertiary-container);
    color: var(--g-on-tertiary-container);
}

.countdown-days {
    background-color: var(--g-surface-container-high);
    color: var(--g-on-surface-variant);
}

.countdown-passed {
    background-color: var(--g-error-container);
    color: var(--g-on-error-container);
}

@keyframes flashToday {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }

    /* Adjusted for a more noticeable flash */
}

.match-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.match-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    /* Tailwind's shadow-md, can be increased to shadow-lg if preferred */
}

.member-pic-display {
    width: 32px;
    /* Tailwind: w-8 */
    height: 32px;
    /* Tailwind: h-8 */
    border-radius: 50%;
    /* Tailwind: rounded-full */
    object-fit: cover;
    border: 1px solid #e5e7eb;
    /* Tailwind: border border-gray-200 */
    background-color: #f9fafb;
    /* Tailwind: bg-gray-50 */
}

.community-card-base {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.community-card-base:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    /* Tailwind's shadow-md */
}

.community-description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* Show a maximum of 3 lines */
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 4.5em;
    /* Adjust based on line-height to fit ~3 lines, e.g., 3 * 1.5em if line-height is 1.5 */
    /* max-height: 4.5em; /* Optional: if min-height alone isn't enough with varying content */
}

.community-image-circle-container {
    padding-top: 1rem;
    /* Tailwind: pt-4 */
    padding-bottom: 0.5rem;
    /* Tailwind: pb-2 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.community-image-circle {
    width: 160px;
    /* Or Tailwind: w-24 */
    height: 160px;
    /* Or Tailwind: h-24 */
    border-radius: 50%;
    /* Tailwind: rounded-full */
    object-fit: cover;
    object-position: 50% 50%;
    /* (X-pos Y-pos) - 50% is center horizontally, 25% is near the top vertically */
    border: 2px solid #e5e7eb;
    /* Tailwind: border-2 border-gray-200 */
    background-color: #f3f4f6;
    /* Tailwind: bg-gray-100 for placeholder */
}

.community-placeholder-circle {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e2e8f0;
    /* Tailwind: bg-slate-200 or similar gray */
    border: 2px solid #d1d5db;
    /* Tailwind: border-2 border-gray-300 */
}

.community-pic-list {
    width: 40px;
    /* Tailwind: w-10 */
    height: 40px;
    /* Tailwind: h-10 */
    border-radius: 50%;
    /* Tailwind: rounded-full */
    object-fit: cover;
    border: 1px solid #e5e7eb;
    /* Tailwind: border border-gray-200 */
}


/* Style for timezone select with icon */
.timezone-select-container {
    position: relative;
}

.timezone-select-container .icon {
    position: absolute;
    left: 0.75rem;
    /* Tailwind: left-3 */
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #6b7280;
    /* Tailwind: text-gray-500 */
}

.timezone-select-container select {
    padding-left: 2.5rem;
    /* Tailwind: pl-10, to make space for the icon */
}

/* Basic styling for file input button (Tailwind also offers `file:` variants) */
/* This provides a more consistent look if Tailwind's default file input styling is not preferred */
input[type="file"]::file-selector-button {
    margin-right: 0.5rem;
    /* Tailwind: mr-2 */
    border: 1px solid #cbd5e1;
    /* Tailwind: border border-slate-300 (example) */
    background-color: #f1f5f9;
    /* Tailwind: bg-slate-100 (example) */
    padding: 0.5rem 1rem;
    /* Tailwind: py-2 px-4 */
    border-radius: 0.375rem;
    /* Tailwind: rounded-md */
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    font-weight: 500;
    /* Tailwind: font-medium */
    color: #334155;
    /* Tailwind: text-slate-700 (example) */
}

input[type="file"]::file-selector-button:hover {
    background-color: #e2e8f0;
    /* Tailwind: hover:bg-slate-200 (example) */
}

.profile-pic-display {
    /* For community profile picture on manage page */
    width: 256px;
    /* Tailwind: w-24 */
    height: 256px;
    /* Tailwind: h-24 */
    border-radius: 1rem;
    /* Tailwind: rounded-md */
    object-fit: cover;
    border: 2px solid #e5e7eb;
    /* Tailwind: border-2 border-gray-200 */
    background-color: #f3f4f6;
    /* Tailwind: bg-gray-100 */
}

.profile-pic-display-public {
    /* For public profile picture */
    width: 160px;
    /* Tailwind: w-40 */
    height: 160px;
    /* Tailwind: h-40 */
    border-radius: 50%;
    /* Tailwind: rounded-full */
    object-fit: cover;
    border: 4px solid white;
    /* Tailwind: border-4 border-white */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    /* Tailwind: shadow-lg */
    background-color: #f3f4f6;
    /* Tailwind: bg-gray-100 for placeholder */
}

.profile-pic-preview {
    width: 128px;
    /* Tailwind: w-32 */
    height: 128px;
    /* Tailwind: h-32 */
    border-radius: 50%;
    /* Tailwind: rounded-full */
    object-fit: cover;
    border: 3px solid #e5e7eb;
    /* Tailwind: border-2 border-gray-200 (adjust thickness) */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* Tailwind: shadow-md */
    background-color: #f9fafb;
    /* Tailwind: bg-gray-50 for placeholder */
}

.member-pic-display {
    /* For member pictures in the list */
    width: 38px;
    /* Tailwind: w-8 */
    height: 38px;
    /* Tailwind: h-8 */
    border-radius: 50%;
    /* Tailwind: rounded-full */
    object-fit: cover;
    border: 1px solid #e5e7eb;
    /* Tailwind: border border-gray-200 */
    background-color: #f9fafb;
    /* Tailwind: bg-gray-50 */
}

.status-badge,
.role-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    /* Tailwind: py-0.5 px-2 */
    font-size: 0.75rem;
    /* Tailwind: text-xs */
    font-weight: 500;
    /* Tailwind: font-medium */
    border-radius: 0.375rem;
    /* Tailwind: rounded-md */
    text-transform: capitalize;
}

/* Role Badges */
.role-creator {
    background-color: #d1fae5;
    color: #065f46;
}

/* Tailwind: bg-emerald-100 text-emerald-800 */
.role-admin {
    background-color: #dbeafe;
    color: #1e40af;
}

/* Tailwind: bg-blue-100 text-blue-800 */
.role-member {
    background-color: #e5e7eb;
    color: #374151;
}

/* Tailwind: bg-gray-200 text-gray-700 */

/* Status Badges */
.status-approved {
    background-color: #d1fae5;
    color: #065f46;
}

/* Tailwind: bg-emerald-100 text-emerald-800 */
.status-pending {
    background-color: #fef3c7;
    color: #92400e;
}

/* Tailwind: bg-yellow-100 text-yellow-800 */
.status-rejected,
.status-banned {
    background-color: #fee2e2;
    color: #991b1b;
}

/* Tailwind: bg-red-100 text-red-800 */
.status-invited {
    background-color: #e0e7ff;
    color: #3730a3;
}

/* Tailwind: bg-indigo-100 text-indigo-800 */

.social-link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    /* Tailwind: gap-3 */
}

.social-link-grid-public {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    /* Tailwind: gap-4 */
    /* justify-content: center; /* Added directly in template */
}

.social-link-public a {
    display: inline-flex;
    align-items: center;
    transition: background-color 0.2s;
}

.social-link-public a:hover {
    background-color: transparent;
    /* transparent */
}

.social-link-public img {
    width: 3rem;
    height: 3rem;
    margin-right: 0.75rem;
    /* Increased margin for better spacing (Tailwind: mr-3) */
}

.social-link a {
    display: inline-flex;
    align-items: center;
    font-size: 0.875rem;
    /* Tailwind: text-sm */

}

.social-link svg {
    width: 1rem;
    /* Tailwind: w-4 */
    height: 1rem;
    /* Tailwind: h-4 */
    margin-right: 0.5rem;
    /* Tailwind: mr-2 */

}

.member-bio {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* Keep for older browser support */
    line-clamp: 2;
    /* Add the standard property */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.5em;
    /* Adjust based on line-height */
}

.member-card {
    /* min-height: 120px; <-- Removed this */
    display: flex;
    flex-direction: column;
}

.member-card-content {
    flex-grow: 1;
    /* Allow content to grow */
    display: flex;
    /* Make content area flex */
    flex-direction: column;
    /* Stack description and links vertically */
}

.member-social-icon {
    width: 1.25rem;
    /* Tailwind: w-5 */
    height: 1.25rem;
    /* Tailwind: h-5 */
    opacity: 0.8;
    transition: opacity 0.2s ease-in-out;
}

.member-social-icon:hover {
    opacity: 1;
}

/* Highlight parsed fields with a subtle emerald glow */
.parsed-field {
    border-left: 3px solid #10b981 !important;
    background-color: #f0fdf4;
    transition: all 0.3s ease;
}

.parsed-field:focus {
    background-color: #ffffff;
}


.legal-content h1,
.legal-content h2,
.legal-content h3,
.legal-content h4,
/* Added h4 for completeness */
.legal-content h5,
/* Added h5 for completeness */
.legal-content h6 {
    /* Added h6 for completeness */
    color: var(--g-on-surface);
    margin-bottom: 1rem;
    /* Tailwind: mb-4 */
    margin-top: 1.5rem;
    /* Tailwind: mt-6 */
    font-weight: 600;
    /* Tailwind: font-semibold or font-bold for h1/h2 */
}


.legal-content h2 {
    font-size: 1.5em;
    /* Tailwind: text-2xl */
}

.legal-content h3 {
    font-size: 1.25em;
    /* Tailwind: text-xl */
}

.legal-content h4 {
    font-size: 1.125em;
    /* Tailwind: text-lg */
}


.legal-content p,
.legal-content li {
    color: var(--g-on-surface-variant);
    margin-bottom: 0.75rem;
    /* Tailwind: mb-3 */
    line-height: 1.6;
    /* Tailwind: leading-relaxed */
}

.legal-content ul,
.legal-content ol {
    /* Added ol for ordered lists */
    list-style-position: outside;
    /* Ensures bullets/numbers are outside the text flow */
    margin-left: 1.5rem;
    /* Tailwind: ml-6 */
    margin-bottom: 1rem;
    /* Tailwind: mb-4 */
}

.legal-content ul {
    list-style-type: disc;
}

.legal-content ol {
    list-style-type: decimal;
}

.legal-content li>ul,
/* Nested lists */
.legal-content li>ol {
    margin-top: 0.25rem;
    /* Tailwind: mt-1 */
    margin-bottom: 0.5rem;
    /* Tailwind: mb-2 */
}


.legal-content a {
    color: var(--g-primary);
    text-decoration: underline;
}

.legal-content a:hover {
    color: var(--g-primary-hover);
}

.legal-content strong,
.legal-content b {
    font-weight: 600;
    /* Tailwind: font-semibold or font-bold */
}

.legal-content em,
.legal-content i {
    font-style: italic;
}

/* Basic table styling if Markdown generates tables */
.legal-content table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
    border: 1px solid #e5e7eb;
    /* Tailwind: border border-gray-200 */
}

.legal-content th,
.legal-content td {
    border: 1px solid #e5e7eb;
    /* Tailwind: border border-gray-200 */
    padding: 0.5rem 0.75rem;
    /* Tailwind: px-3 py-2 */
    text-align: left;
}

.legal-content th {
    background-color: #f9fafb;
    /* Tailwind: bg-gray-50 */
    font-weight: 600;
    /* Tailwind: font-semibold */
}

/* Styling for code blocks if Markdown generates them */
.legal-content pre {
    background-color: #f3f4f6;
    /* Tailwind: bg-gray-100 */
    border: 1px solid #e5e7eb;
    /* Tailwind: border border-gray-200 */
    border-radius: 0.375rem;
    /* Tailwind: rounded-md */
    padding: 1rem;
    /* Tailwind: p-4 */
    overflow-x: auto;
    /* Allow horizontal scrolling for long code lines */
    margin-bottom: 1rem;
    /* Tailwind: mb-4 */
}

.legal-content code {
    /* For inline code and code within pre blocks */
    font-family: monospace;
    background-color: #f3f4f6;
    /* Tailwind: bg-gray-100 */
    padding: 0.125rem 0.25rem;
    /* Tailwind: px-1 py-0.5 (approx) */
    border-radius: 0.25rem;
    /* Tailwind: rounded-sm */
    font-size: 0.9em;
    /* Slightly smaller than surrounding text */
}

.legal-content pre code {
    /* Reset padding for code inside pre, as pre handles it */
    padding: 0;
    background-color: transparent;
    border-radius: 0;
}

.legal-content blockquote {
    border-left: 4px solid #d1d5db;
    /* Tailwind: border-l-4 border-gray-300 */
    padding-left: 1rem;
    /* Tailwind: pl-4 */
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 1rem;
    /* Tailwind: mb-4 */
    font-style: italic;
    color: #4b5563;
    /* Tailwind: text-gray-600 */
}


/* General select styling (if not already globally defined) */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%236B7280%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right .7em top 50%;
    background-size: .65em auto;
    padding-right: 2.5em;
    /* Tailwind: pr-10 */
}

/* Table Styles (Tailwind classes are mostly used directly in HTML for tables) */
/* These are more for base styling if you weren't using Tailwind as heavily for tables */
table {
    table-layout: auto;
    /* Or 'fixed' if you prefer */
    width: 100%;
    /* Tailwind: w-full */
}

th,
td {
    padding: 0.75rem;
    /* Tailwind: p-3 (adjust as needed) */
    text-align: left;
    vertical-align: middle;
    /* Tailwind: align-middle */
}

th {
    font-weight: 600;
    /* Tailwind: font-semibold */
    color: #4b5563;
    /* Tailwind: text-gray-600 */
    /* Tailwind classes like bg-gray-50, text-xs, uppercase, tracking-wider are in HTML */
}

td {
    color: #374151;
    /* Tailwind: text-gray-700 */
    /* Tailwind classes like whitespace-nowrap, text-sm are in HTML */
}

/* Modal styles (if not already globally defined) */
/*.hidden { display: none !important; } /* Ensure it overrides Tailwind's base hidden if necessary */
.modal-flex-display {
    display: flex !important;
}

/* For the adjustCreditsModal */

/* Disabled field style for negative credit limit */
#negative_credit_limit_container.disabled-field {
    opacity: 0.5;
    pointer-events: none;
    /* Prevents interaction */
}

#negative_credit_limit_container.disabled-field input {
    background-color: #f3f4f6;
    /* Tailwind: bg-gray-100 */
    /* cursor: not-allowed; /* Optionally add cursor style */
}

/* --- NEW STYLES FOR CALENDAR --- */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
}

.calendar-day {
    min-height: 120px;
    position: relative;
    display: flex;
    flex-direction: column;
}

.day-number {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.today .day-number {
    background-color: var(--g-primary);
    color: var(--g-on-primary);
    font-weight: 600;
}

.other-month {
    color: var(--g-outline);
    background-color: var(--g-surface-container);
}

.event-pill {
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.past-day {
    background-color: var(--g-surface-container);
    opacity: 0.75;
}

.event-pill.past-event {
    background-color: var(--g-surface-container-high);
    color: var(--g-on-surface-variant);
    border: 1px solid var(--g-outline-variant);
}

.event-pill.past-event:hover {
    background-color: var(--g-surface-container);
}

.calendar-day:not(.other-month):not(.past-day):hover {
    background-color: var(--g-surface-container);
    transition: background-color 0.2s ease-in-out;
}

/* Style for days not in the current month to make them recede */
.other-month .day-number {
    color: var(--g-outline);
}

/* --- Mobile Calendar Date Grid Styles (Final Corrected Version) --- */
.date-cell {
    padding: 0.5rem 0;
    border-radius: 9999px;
    /* rounded-full */
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    border: 2px solid transparent;
    /* Ensures consistent size */
}

/* Past dates */
.date-cell.past-day {
    background-color: var(--g-surface-container);
    color: var(--g-on-surface-variant);
    cursor: default;
    pointer-events: none;
    /* Disables click events */
}

/* Hover effect for non-selected, non-today cells */
.date-cell:hover:not(.selected-cell) {
    background-color: var(--g-surface-container);
}

/* Style for any selected date */
.date-cell.selected-cell {
    background-color: var(--g-primary-container);
    color: var(--g-on-primary-container);
}

/* Style for today's date (primary circle) */
.date-cell.today-cell {
    background-color: transparent;
    color: var(--g-on-surface);
    font-weight: 700;
    border: 2px solid var(--g-primary);
}

/* Today's date stays outlined even when selected */
.date-cell.today-cell.selected-cell {
    background-color: var(--g-primary-container);
    color: var(--g-on-primary-container);
    border: 2px solid var(--g-primary);
}

.day-header {
    font-weight: 600;
    color: var(--g-on-surface-variant);
    font-size: 0.875rem;
    padding-bottom: 0.5rem;
}

/* --- NEW STYLES FOR PIE CHART --- */
.pie-chart-container {
    width: 48px;
    /* Adjust size as needed */
    height: 48px;
}

.pie-chart {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    transform: rotate;
    transform-origin: center;
    /* Ensures rotation is around the center */
}

.pie-chart-background {
    fill: none;
    stroke: var(--g-primary-container);
    stroke-width: 3;
}

.pie-chart-progress {
    fill: none;
    stroke: var(--g-primary);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 0.3s ease;
}

.pie-chart-text {
    fill: var(--g-on-surface);
    font-size: 11px;
    font-weight: bold;
    text-anchor: middle;
    transform-origin: center;
    transform: rotate;
}

.pie-chart-numerator {
    font-size: 10px;
    font-weight: bold;
}

.pie-chart-slash {
    font-size: 15px;
    font-weight: normal;
    transform: rotate(15 deg);
}

.pie-chart-denominator {
    font-size: 12px;
    font-weight: bold;
}

.full-status-text {
    font-size: 14px;
    font-weight: bold;
    color: var(--g-error);
    text-transform: uppercase;
}

.calendar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    border: 1px solid transparent;
}

.calendar-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.google-btn {
    background-color: #ffffff;
    color: #4285F4;
    border-color: #E0E0E0;
}

.google-btn:hover {
    background-color: #f8f9fa;
    border-color: #d1d5db;
}

.apple-btn {
    background-color: #000000;
    color: #ffffff;
    border-color: #000000;
}

.apple-btn:hover {
    background-color: #333333;
}

.parsed-field {
    border-left: 3px solid #28a745;
    background-color: #f0fff4;
    animation: highlight-fade 2s ease-in-out;
}

@keyframes highlight-fade {
    0% {
        background-color: #d4edda;
    }

    100% {
        background-color: #f0fff4;
    }
}

.parse-info-banner {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Smooth transitions for layout changes */
#file-input-wrapper {
    transition: flex 0.3s ease-in-out;
}

#upload-controls {
    transition: opacity 0.3s ease-in-out;
}

#upload-controls.hidden {
    display: none;
}

/* Ensure consistent text sizing with other helper text */
#upload-controls label,
#upload-controls .text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}

/* Upload button styling adjustments */
#upload-button {
    min-height: 38px;
    /* Match input field height */
}

/* Checkbox alignment */
#extract-checkbox {
    margin-top: 1px;
    /* Fine-tune vertical alignment */
}



/* General hidden class if needed and not fully covered by Tailwind's `hidden` in all contexts */
/* .hidden { display: none !important; } */
/* Tailwind's 'hidden' class should generally be preferred and usually works fine. */