/* === GLOBAL & BASE STYLES (Light Mode) === */
body {
    font-family: Arial, sans-serif; /* Consider 'Inter' from your HTML for consistency */
    background-color: #f4f4f4;
    color: #333; /* Base text color */
    margin: 0;
    padding: 20px;
    transition: background-color 0.3s, color 0.3s;
    font-size: 100%;
}

h1, h2 {
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    color: #333; /* Heading color for light mode */
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}
h1 { font-size: 1.8em; }
h2 { font-size: 1.4em; }

hr {
    margin: 30px 0;
    border: 0;
    height: 1px;
    background-color: #ccc; /* Light mode separator */
}

/* === COMPONENT: Navigation Bar (Light Mode) === */
nav {
    background-color: #026aa7;
    padding: 10px;
    text-align: center;
    margin: 0 0 20px 0;
    border-bottom: 1px solid #005c91;
}
nav a {
    color: white;
    margin: 0 15px;
    text-decoration: none;
    font-weight: bold;
    padding: 5px 0;
    transition: color 0.2s;
}
nav a:hover {
    color: #cceeff;
}

/* === COMPONENT: Auth Controls (Light Mode) === */
#auth-controls {
    padding: 10px 20px;
    background-color: #f0f0f0;
    border-bottom: 1px solid #ccc;
    text-align: right;
    margin-bottom: 20px;
}
/* Theme toggle button specific light mode style if needed,
   but it seems to have its own base and dark mode already defined later.
   If #theme-toggle has distinct light mode styles not covered by .btn, add here.
*/


/* === COMPONENT: Login Prompt (Light Mode) === */
/* Use the refined version from previous answer or integrate here */
#login-prompt {
    width: 90%;
    max-width: 1000px;
    margin: 30px auto;
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    background-color: #fff; /* Explicit light mode BG */
    border: 1px solid #e5e7eb; /* Light mode border */
    text-align: left;
    color: #333; /* Default text for login prompt */
}
#login-prompt h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-align: center;
    color: #005c91; /* Specific color for this heading in light mode */
    border-bottom: none;
}
#login-prompt .app-description p {
    margin-bottom: 1rem;
    line-height: 1.6;
    font-size: 0.875rem;
    color: #333; /* Light mode text */
}
#login-prompt .app-description h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: #1f2937; /* Darker heading text for light mode */
}
#login-prompt .app-description ul {
    list-style-type: disc;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: #333; /* Light mode text */
}
#login-prompt .app-description ul li {
    margin-bottom: 0.25rem;
}
#login-prompt .connect-prompt {
    margin-top: 2rem;
    text-align: center;
    font-size: 0.875rem;
    color: #555; /* Slightly muted text for light mode */
}


/* === COMPONENT: Cards Section (#cards grid - Light Mode) === */
#cards {
    background-color: transparent;
    border: none;
    padding: 0;
    margin-top: 20px;
    max-height: none;
    overflow-y: visible;
    font-family: inherit; /* This is unusual for a container, usually for text elements */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

/* === COMPONENT: Triage Card (.triage-card - Light Mode) === */
.triage-card {
    border: 1px solid #ddd;
    margin-bottom: 0; /* Already part of grid gap */
    padding: 15px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: box-shadow 0.2s ease-in-out, background-color 0.3s, border-color 0.3s; /* Added transitions */
}
.triage-card:hover {
    box-shadow: 0 8px 16px rgba(0,0,0,0.15), 0 4px 6px rgba(0,0,0,0.12);
}
.triage-card .card-content { flex-grow: 1; }
.triage-card .card-content p { margin: 5px 0; color: #333; } /* Ensure text color */
.triage-card .card-suggestion { font-style: italic; color: #555; margin-top: 10px; margin-bottom: 10px; }
.triage-card .card-suggestion strong { font-style: normal; }
.triage-card .card-desc { font-size: 0.9em; color: #666; margin-top: 10px; line-height: 1.4; }
.triage-card .card-actions {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #eee;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

/* === COMPONENT: Override UI (.override-ui-container - Light Mode) === */
.override-ui-container {
    margin-top: 15px;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    background-color: #f9f9f9;
    transition: background-color 0.3s, border-color 0.3s;
}
.override-select-section { /* No specific theme styles needed unless children do */
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
}
.override-create-section {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
    padding-top: 10px;
    border-top: 1px dashed #ddd; /* Light mode separator */
    transition: border-color 0.3s;
}
.override-select,
.new-list-input {
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background-color: #fff; /* Light mode input background */
    color: #333; /* Light mode input text */
    flex-grow: 1;
    min-width: 150px;
    font-size: 0.9em;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.override-error-msg {
    color: #dc3545; /* Red, typically okay for both modes but can be adjusted */
    font-size: 0.8em;
    font-weight: bold;
    margin-top: -5px;
    width: 100%;
}

/* === COMPONENT: General Button Styles (.btn - Light Mode) === */
/* These are well-defined and mostly rely on their own background for theme */
.btn { padding: 8px 15px; border: none; border-radius: 4px; cursor: pointer; font-size: 0.9em; font-weight: bold; transition: background-color 0.2s, opacity 0.2s, transform 0.1s, color 0.2s, border-color 0.2s; display: inline-flex; align-items: center; gap: 6px; line-height: 1; white-space: nowrap; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.btn i { font-size: 0.95em; }

/* Specific Button Variants (Light Mode Defaults) */
.btn-suggest { background-color: #007bff; color: white; flex-grow: 1; }
.btn-suggest:hover:not(:disabled) { background-color: #0056b3; }

.btn-secondary { padding: 6px 10px; font-size: 0.8em; background-color: #f0f0f0; color: #555; border: 1px solid #ccc; }
.btn-secondary:hover:not(:disabled) { background-color: #e0e0e0; border-color: #bbb; color: #333; }
.btn-secondary i { font-size: 1em; margin-right: 0; }

.btn-confirm { background-color: #28a745; color: white; }
.btn-confirm:hover:not(:disabled) { background-color: #218838; }
.btn-override { background-color: #ffc107; color: #333; } /* Note: text color is dark */
.btn-override:hover:not(:disabled) { background-color: #e0a800; }
.btn-delete { background-color: #dc3545; color: white; }
.btn-delete:hover:not(:disabled) { background-color: #c82333; }

.btn-override.btn-secondary { background-color: #f8f9fa; color: #555; border: 1px solid #ccc; } /* Light mode default */
.btn-override.btn-secondary:hover:not(:disabled) { background-color: #e2e6ea; border-color: #bbb; color: #333; }
.btn-delete.btn-secondary { background-color: #f8f9fa; color: #dc3545; border: 1px solid #ccc; } /* Light mode default */
.btn-delete.btn-secondary:hover:not(:disabled) { background-color: #e2e6ea; border-color: #bbb; color: #c82333; }

.btn-submit-override { background-color: #007bff; color: white; padding: 8px 12px; }
.btn-submit-override:hover:not(:disabled) { background-color: #0056b3; }
.btn-create-list { background-color: #28a745; color: white; padding: 8px 12px; }
.btn-create-list:hover:not(:disabled) { background-color: #218838; }
.btn-cancel-override { background-color: #6c757d; color: white; padding: 8px 12px; margin-left: auto; }
.btn-cancel-override:hover:not(:disabled) { background-color: #5a6268; }

.action-error-msg { color: red; font-size: 0.8em; font-weight: bold; margin-left: 10px; }


/* === COMPONENT: Board View (#board, .list, .board .card - Light Mode) === */
.board {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
    padding: 15px;
    background-color: #e0e0e0; /* Overall board background */
    border-radius: 5px;
    min-height: 300px;
    border: 1px solid #ccc;
    transition: background-color 0.3s, border-color 0.3s;
}
.list { /* This is for board lists, not to be confused with ul/ol */
    background-color: #ebecf0; /* Trello-like list background */
    border-radius: 5px;
    padding: 10px;
    transition: background-color 0.3s;
    max-height: calc(80vh - 40px); /* Your existing value */
    /* max-height: 75vh; /* From your later comment, choose one */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    flex-shrink: 0; /* From your comment */
}
.list h2 { /* List titles */
    font-size: 0.95em;
    margin: 0 0 10px 0;
    padding: 5px;
    font-weight: bold;
    color: #172b4d; /* Trello-like list title color */
    border-bottom: none;
    flex-shrink: 0;
    transition: color 0.3s;
}
.list .cards-container { /* Container for cards within a list */
    flex-grow: 1;
    overflow-y: auto;
    min-height: 50px;
    padding: 5px 5px 5px 0; /* Original */
}
.board .card { /* Cards within the board view */
    background-color: #ffffff;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(9, 30, 66, 0.2);
    margin-bottom: 8px;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 0.9em;
    color: #172b4d; /* Trello-like card text color */
    transition: background-color 0.2s, box-shadow 0.2s, border-color 0.2s, color 0.2s;
    border: 1px solid #eee; /* Subtle border for cards */
}
.board .card:hover {
    background-color: #f4f5f7;
    box-shadow: 0 3px 6px rgba(9, 30, 66, 0.25);
}


/* === COMPONENT: Add Task Form (#add-task-form - Light Mode) === */
#add-task-form {
    margin-top: 20px;
    padding: 20px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    transition: background-color 0.3s, border-color 0.3s;
}
#add-task-form h2 { /* Form title */
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.2em;
    border-bottom: none;
    color: #333; /* Default heading color */
    transition: color 0.3s;
}
#add-task-form textarea {
    width: calc(100% - 22px); /* Adjust if using box-sizing: border-box on textareas */
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-family: inherit;
    font-size: 1em;
    display: block;
    resize: vertical;
    background-color: #fff; /* Textarea BG */
    color: #333; /* Textarea text color */
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
#add-task-form button[type="submit"] { /* This uses .btn styles but can be more specific */
    padding: 10px 20px;
    background-color: #5aac44; /* Specific green */
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    transition: background-color 0.2s;
}
#add-task-form button[type="submit"]:hover {
    background-color: #4a9c34;
}


/* === COMPONENT: Logs Section (#logs - Light Mode) === */
/* Your #logs already seems to be styled for a darkish appearance by default.
   If it should have a distinct light mode look, define it here.
   Otherwise, its current definition IS its "light mode" or base style.
*/
#logs {
    /* Current base style IS darkish: */
    background-color: #222; /* Dark BG */
    border: 1px solid #444; /* Dark border */
    color: #ddd; /* Light text */
    /* If you want a light-themed log for light mode: */
    /* background-color: #f8f9fa; */
    /* border: 1px solid #dee2e6; */
    /* color: #495057; */

    padding: 15px;
    margin-top: 20px;
    max-height: 300px;
    overflow-y: auto;
    font-family: monospace;
    font-size: 0.85em;
    border-radius: 5px;
    white-space: pre-wrap;
    word-break: break-all;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* === COMPONENT: Theme Toggle Button (#theme-toggle) === */
/* This seems to be styled for appearing on a darkish nav bar by default */
#theme-toggle {
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.2); /* For dark nav */
    color: white; /* For dark nav */
    border: 1px solid rgba(255, 255, 255, 0.5); /* For dark nav */
    padding: 5px 10px;
    border-radius: 5px;
    margin-left: 15px;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    font-size: 0.8em;
}
#theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.4); /* For dark nav */
}


/* =========================================== */
/* === DARK MODE OVERRIDES === */
/* =========================================== */

body.dark-mode {
    background-color: #1d2125;
    color: #d1d9e0; /* Base dark mode text color */
}

body.dark-mode h1,
body.dark-mode h2 {
    color: #e1e9f0; /* Dark mode heading color */
    border-bottom-color: #454c54;
}

body.dark-mode hr {
    background-color: #454c54; /* Dark mode separator */
}

/* Dark Mode: Navigation Bar */
body.dark-mode nav {
    background-color: #171a1d;
    border-bottom-color: #333;
}
body.dark-mode nav a {
    color: #a6b3be;
}
body.dark-mode nav a:hover {
    color: #ffffff;
}

/* Dark Mode: Auth Controls */
body.dark-mode #auth-controls {
    background-color: #2c3136;
    border-bottom-color: #444;
}
/* Theme toggle button on dark mode auth controls (if auth controls itself isn't always dark) */
body.dark-mode #theme-toggle { /* This assumes theme toggle might not always be on a dark background like nav */
    background-color: rgba(0, 0, 0, 0.3); /* Darker variant for general dark mode page */
    border-color: rgba(255, 255, 255, 0.3);
    color: #a6b3be;
}
body.dark-mode #theme-toggle:hover {
    background-color: rgba(0, 0, 0, 0.5);
    color: #ffffff;
}


/* Dark Mode: Login Prompt */
body.dark-mode #login-prompt {
    background-color: #2c3136; /* Consistent with other dark UI elements */
    color: #d1d9e0;
    border-color: #454c54;
}
body.dark-mode #login-prompt h2 {
    color: #e1e9f0;
}
body.dark-mode #login-prompt .app-description p,
body.dark-mode #login-prompt .app-description ul {
    color: #a6b3be;
}
body.dark-mode #login-prompt .app-description h3 {
    color: #d1d9e0; /* Or e1e9f0 for more emphasis */
}
body.dark-mode #login-prompt .connect-prompt {
    color: #a6b3be;
}


/* Dark Mode: Cards Section (#cards grid) */
body.dark-mode #cards {
    /* No specific background change for the grid container itself */
}

/* Dark Mode: Triage Card (.triage-card) */
body.dark-mode .triage-card {
    background-color: #3c4146;
    border-color: #555c64;
    box-shadow: 0 5px 10px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3);
    color: #d1d9e0; /* Set base text color for card content in dark mode */
}
body.dark-mode .triage-card:hover {
    box-shadow: 0 8px 16px rgba(0,0,0,0.5), 0 4px 6px rgba(0,0,0,0.4);
}
body.dark-mode .triage-card .card-content p { color: #d1d9e0; }
body.dark-mode .triage-card .card-suggestion,
body.dark-mode .triage-card .card-desc {
    color: #a6b3be;
}
body.dark-mode .triage-card .card-actions {
    border-top-color: #555c64;
}

/* Dark Mode: Override UI (.override-ui-container) */
body.dark-mode .override-ui-container {
    background-color: #2c3136;
    border-color: #555c64;
}
body.dark-mode .override-create-section {
    border-top-color: #454c54; /* Darker separator */
}
body.dark-mode .override-select,
body.dark-mode .new-list-input {
    background-color: #3c4146;
    border-color: #555c64;
    color: #d1d9e0;
}
body.dark-mode .override-error-msg {
    color: #ff8a80; /* Lighter red for dark background */
}

/* Dark Mode: Button Variants */
body.dark-mode .btn-secondary {
    background-color: #555c64;
    color: #c1c9d0;
    border-color: #6a7178;
}
body.dark-mode .btn-secondary:hover:not(:disabled) {
    background-color: #6a7178;
    border-color: #7a8188;
    color: #e1e9f0;
}
/* Specific secondary button overrides for dark mode, if different from above */
body.dark-mode .btn-override.btn-secondary {
    background-color: #555c64; /* Or a specific dark yellow background */
    color: #ffc107; /* Keep warning color */
    border-color: #6a7178; /* Consistent with other dark secondary buttons */
}
body.dark-mode .btn-override.btn-secondary:hover:not(:disabled) {
    background-color: #6a7178;
    border-color: #7a8188;
}
body.dark-mode .btn-delete.btn-secondary {
    background-color: #555c64; /* Or a specific dark red background */
    color: #dc3545; /* Keep error color */
    border-color: #6a7178;
}
body.dark-mode .btn-delete.btn-secondary:hover:not(:disabled) {
    background-color: #6a7178;
    border-color: #7a8188;
}

/* For primary action buttons, often the color indicates action, so might not change much,
   but hover states might need adjustment if they rely on darkening. */
body.dark-mode .btn-suggest { background-color: #007bff; /* Stays same, or use a darker blue if preferred */ }
body.dark-mode .btn-suggest:hover:not(:disabled) { background-color: #0056b3; /* Stays same */ }

body.dark-mode .btn-confirm { background-color: #28a745; /* Stays same, or darker green */ }
body.dark-mode .btn-confirm:hover:not(:disabled) { background-color: #218838; /* Stays same */ }

body.dark-mode .btn-override { background-color: #ffc107; color: #333; /* Stays same, text already dark */ }
body.dark-mode .btn-override:hover:not(:disabled) { background-color: #e0a800; /* Stays same */ }

body.dark-mode .btn-delete { background-color: #dc3545; /* Stays same */ }
body.dark-mode .btn-delete:hover:not(:disabled) { background-color: #c82333; /* Stays same */ }

body.dark-mode .btn-create-list {
    background-color: #4a9c34; /* Your existing dark mode green */
}
body.dark-mode .btn-create-list:hover:not(:disabled) {
    background-color: #5aac44; /* Your existing dark mode green hover */
}
body.dark-mode .btn-cancel-override {
    background-color: #5a6268; /* Your existing dark mode cancel */
}
body.dark-mode .btn-cancel-override:hover:not(:disabled) {
    background-color: #6c757d; /* Your existing dark mode cancel hover */
}


/* Dark Mode: Board View */
body.dark-mode .board {
    background-color: #2c3136;
    border-color: #454c54;
}
body.dark-mode .list { /* Board lists */
    background-color: #3c4146;
}
body.dark-mode .list h2 { /* List titles */
    color: #d1d9e0;
}
body.dark-mode .board .card { /* Cards in board view */
    background-color: #454c54;
    color: #d1d9e0;
    border-color: #5a6168;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
body.dark-mode .board .card:hover {
    background-color: #555c64;
    box-shadow: 0 3px 6px rgba(0,0,0,0.35);
}

/* Dark Mode: Add Task Form */
body.dark-mode #add-task-form {
    background-color: #2c3136;
    border-color: #454c54;
}
body.dark-mode #add-task-form h2 {
    color: #e1e9f0; /* Dark mode form title */
}
body.dark-mode #add-task-form textarea {
    background-color: #3c4146;
    border-color: #555c64;
    color: #d1d9e0;
}
body.dark-mode #add-task-form button[type="submit"] {
    background-color: #4a9c34; /* Your existing dark mode green */
}
body.dark-mode #add-task-form button[type="submit"]:hover {
    background-color: #5aac44; /* Your existing dark mode green hover */
}

/* Dark Mode: Logs Section */
body.dark-mode #logs {
    background-color: #171a1d; /* Even darker for logs, or match other components */
    border-color: #333;
    color: #a6b3be;
}


/* === Ty mode === (Keep as is or refactor with CSS Variables later) */
/* ... your ty-mode styles ... */

/* === Modern Mode === (Keep as is or refactor with CSS Variables later) */
/* ... your modern-mode styles ... */

/* === Responsive Adjustments === (Generally theme-agnostic, keep at the end) */
/* ... your @media query ... */
/* === Dark Mode === */
body.dark-mode { background-color: #1d2125; color: #d1d9e0; }
body.dark-mode h1, body.dark-mode h2 { color: #e1e9f0; border-bottom-color: #454c54;}
body.dark-mode hr { background-color: #454c54; }
body.dark-mode #auth-controls { background-color: #2c3136; border-bottom-color: #444; }
body.dark-mode nav { background-color: #171a1d; border-bottom-color: #333; }
body.dark-mode nav a { color: #a6b3be; }
body.dark-mode nav a:hover { color: #ffffff; }
body.dark-mode #cards { /* Grid container - no background */ }
body.dark-mode .triage-card { background-color: #3c4146; border-color: #555c64; box-shadow: 0 5px 10px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3); }
body.dark-mode .triage-card:hover { box-shadow: 0 8px 16px rgba(0,0,0,0.5), 0 4px 6px rgba(0,0,0,0.4); }
body.dark-mode .triage-card .card-suggestion, body.dark-mode .triage-card .card-desc { color: #a6b3be; }
body.dark-mode .triage-card .card-actions { border-top-color: #555c64; }
body.dark-mode .override-ui-container { background-color: #2c3136; border-color: #555c64; }
body.dark-mode .override-select, body.dark-mode .new-list-input { background-color: #3c4146; border-color: #555c64; color: #d1d9e0; } /* Added input */
body.dark-mode .override-error-msg { color: #ff8a80; } /* Lighter red */
body.dark-mode .board { background-color: #2c3136; border-color: #454c54; }
body.dark-mode .list { background-color: #3c4146; }
body.dark-mode .list h2 { color: #d1d9e0; }
body.dark-mode .board .card { background-color: #454c54; color: #d1d9e0; border-color: #5a6168; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
body.dark-mode .board .card:hover { background-color: #555c64; box-shadow: 0 3px 6px rgba(0,0,0,0.35); }
body.dark-mode #add-task-form { background-color: #2c3136; border-color: #454c54; }
body.dark-mode #add-task-form textarea { background-color: #3c4146; border-color: #555c64; color: #d1d9e0; }
body.dark-mode #add-task-form button[type="submit"] { background-color: #4a9c34; }
body.dark-mode #add-task-form button[type="submit"]:hover { background-color: #5aac44; }
body.dark-mode #logs { background-color: #171a1d; border-color: #333; color: #a6b3be; }
body.dark-mode .btn-secondary { background-color: #555c64; color: #c1c9d0; border-color: #6a7178; }
body.dark-mode .btn-secondary:hover:not(:disabled) { background-color: #6a7178; border-color: #7a8188; color: #e1e9f0; }
body.dark-mode .btn-override.btn-secondary { color: #ffc107; }
body.dark-mode .btn-delete.btn-secondary { color: #dc3545; }
body.dark-mode .btn-create-list { background-color: #4a9c34; } /* Consistent green */
body.dark-mode .btn-create-list:hover:not(:disabled) { background-color: #5aac44; }
body.dark-mode .btn-cancel-override { background-color: #5a6268; }
body.dark-mode .btn-cancel-override:hover:not(:disabled) { background-color: #6c757d; }
body.dark-mode #theme-toggle { background-color: rgba(0, 0, 0, 0.3); border-color: rgba(255, 255, 255, 0.3); color: #a6b3be; }
body.dark-mode #theme-toggle:hover { background-color: rgba(0, 0, 0, 0.5); color: #ffffff; }


/* === Ty mode === (Example: Shades of blue/purple) */
body.ty-mode { background-color: #2a2a4a; color: #d8d8f8; }
body.ty-mode h1, body.ty-mode h2 { color: #e8e8f8; border-bottom-color: #5a5a7a; }
body.ty-mode hr { background-color: #5a5a7a; }
body.ty-mode #auth-controls { background-color: #3a3a5a; border-bottom-color: #5a5a7a; }
body.ty-mode nav { background-color: #1a1a3a; border-bottom-color: #4a4a6a; }
body.ty-mode nav a { color: #b8b8e8; }
body.ty-mode nav a:hover { color: #ffffff; }
body.ty-mode #cards { /* Grid container - no background */ }
body.ty-mode .triage-card { background-color: #4a4a6a; border-color: #6a6a8a; box-shadow: 0 5px 10px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.2); }
body.ty-mode .triage-card:hover { box-shadow: 0 8px 16px rgba(0,0,0,0.3), 0 4px 6px rgba(0,0,0,0.25); }
body.ty-mode .triage-card .card-suggestion, body.ty-mode .triage-card .card-desc { color: #b8b8d8; }
body.ty-mode .triage-card .card-actions { border-top-color: #6a6a8a; }
body.ty-mode .override-ui-container { background-color: #3a3a5a; border-color: #6a6a8a; }
body.ty-mode .override-select, body.ty-mode .new-list-input { background-color: #4a4a6a; border-color: #6a6a8a; color: #d8d8f8; } /* Added input */
body.ty-mode .override-error-msg { color: #ffabab; } /* Lighter red */
body.ty-mode .board { background-color: #3a3a5a; border-color: #5a5a7a; }
body.ty-mode .list { background-color: #4a4a6a; }
body.ty-mode .list h2 { color: #d8d8f8; }
body.ty-mode .board .card { background-color: #5a5a7a; color: #d8d8f8; border-color: #7a7a9a; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
body.ty-mode .board .card:hover { background-color: #6a6a8a; box-shadow: 0 3px 6px rgba(0,0,0,0.35); }
body.ty-mode #add-task-form { background-color: #3a3a5a; border-color: #5a5a7a; }
body.ty-mode #add-task-form textarea { background-color: #4a4a6a; border-color: #6a6a8a; color: #d8d8f8; }
body.ty-mode #add-task-form button[type="submit"] { background-color: #6a6af0; } /* Ty mode accent */
body.ty-mode #add-task-form button[type="submit"]:hover { background-color: #5a5ae0; }
body.ty-mode #logs { background-color: #1a1a3a; border-color: #4a4a6a; color: #b8b8e8; }
body.ty-mode .btn-secondary { background-color: #6a6a8a; color: #d8d8f8; border-color: #8a8aac; }
body.ty-mode .btn-secondary:hover:not(:disabled) { background-color: #7a7a9a; border-color: #9a9ac0; color: #ffffff; }
body.ty-mode .btn-override.btn-secondary { color: #ffeb3b; }
body.ty-mode .btn-delete.btn-secondary { color: #ff8a80; }
body.ty-mode .btn-create-list { background-color: #6a6af0; } /* Ty mode accent */
body.ty-mode .btn-create-list:hover:not(:disabled) { background-color: #5a5ae0; }
body.ty-mode .btn-cancel-override { background-color: #5a5a7a; }
body.ty-mode .btn-cancel-override:hover:not(:disabled) { background-color: #6a6a8a; }
body.ty-mode #theme-toggle { background-color: rgba(0, 0, 50, 0.3); border-color: rgba(200, 200, 255, 0.3); color: #b8b8e8; }
body.ty-mode #theme-toggle:hover { background-color: rgba(0, 0, 50, 0.5); color: #ffffff; }


/* === Modern Mode === (Example Style - Customize as desired!) */
body.modern-mode { background-color: #eef2f7; color: #334155; font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 105%; }
body.modern-mode h1, body.modern-mode h2 { color: #1e293b; border-bottom-color: #cbd5e1; font-weight: 600; }
body.modern-mode hr { background-color: #cbd5e1; }
body.modern-mode #auth-controls { background-color: #ffffff; border-bottom-color: #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
body.modern-mode nav { background: linear-gradient(90deg, #4f46e5, #7c3aed); border-bottom: none; }
body.modern-mode nav a { color: #ffffff; font-weight: 500; }
body.modern-mode nav a:hover { color: #ede9fe; }
body.modern-mode #cards { gap: 25px; }
body.modern-mode .triage-card { background-color: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 6px 12px rgba(79, 70, 229, 0.08), 0 2px 4px rgba(79, 70, 229, 0.05); }
body.modern-mode .triage-card:hover { box-shadow: 0 10px 20px rgba(79, 70, 229, 0.1), 0 4px 8px rgba(79, 70, 229, 0.07); }
body.modern-mode .triage-card .card-content p strong { font-weight: 600; color: #1e293b; }
body.modern-mode .triage-card .card-suggestion { color: #4f46e5; font-style: normal; }
body.modern-mode .triage-card .card-suggestion strong { font-weight: 600; }
body.modern-mode .triage-card .card-desc { color: #64748b; font-size: 0.95em; }
body.modern-mode .triage-card .card-actions { border-top-color: #e2e8f0; }
body.modern-mode .override-ui-container { background-color: #f8fafc; border-color: #e2e8f0; border-radius: 6px; } /* Added border radius */
body.modern-mode .override-select, body.modern-mode .new-list-input { background-color: #ffffff; border-color: #cbd5e1; color: #334155; font-size: 0.95em; border-radius: 6px; } /* Added input & radius */
body.modern-mode .override-error-msg { color: #dc3545; } /* Keep red error */
body.modern-mode .board { background-color: #eef2f7; border-color: #cbd5e1; padding: 20px; }
body.modern-mode .list { background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; }
body.modern-mode .list h2 { color: #4f46e5; font-weight: 600; font-size: 1em; }
body.modern-mode .board .card { background-color: #ffffff; color: #334155; border-color: #e2e8f0; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.07); border-radius: 4px; font-size: 0.95em; }
body.modern-mode .board .card:hover { background-color: #f1f5f9; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
body.modern-mode #add-task-form { background-color: #ffffff; border-color: #e2e8f0; border-radius: 8px; }
body.modern-mode #add-task-form h2 { color: #1e293b; }
body.modern-mode #add-task-form textarea { background-color: #ffffff; border-color: #cbd5e1; color: #334155; border-radius: 4px; }
body.modern-mode #add-task-form button[type="submit"] { background-color: #10b981; border-radius: 6px; font-weight: 600; padding: 12px 24px; font-size: 0.95em; }
body.modern-mode #add-task-form button[type="submit"]:hover { background-color: #059669; }
body.modern-mode #logs { background-color: #f8fafc; border-color: #e2e8f0; color: #475569; font-size: 0.8em; border-radius: 6px; } /* Light logs */
body.modern-mode .btn { border-radius: 6px; font-weight: 500; font-size: 0.95em; }
body.modern-mode .btn-suggest { background-color: #6366f1; }
body.modern-mode .btn-suggest:hover:not(:disabled) { background-color: #4f46e5; }
body.modern-mode .btn-secondary { background-color: #eef2f7; color: #475569; border-color: #cbd5e1; }
body.modern-mode .btn-secondary:hover:not(:disabled) { background-color: #e2e8f0; border-color: #94a3b8; color: #1e293b; }
body.modern-mode .btn-override.btn-secondary { color: #f59e0b; }
body.modern-mode .btn-delete.btn-secondary { color: #ef4444; }
body.modern-mode .btn-submit-override { background-color: #6366f1; } /* Indigo submit override */
body.modern-mode .btn-submit-override:hover:not(:disabled) { background-color: #4f46e5; }
body.modern-mode .btn-create-list { background-color: #10b981; } /* Emerald create */
body.modern-mode .btn-create-list:hover:not(:disabled) { background-color: #059669; }
body.modern-mode .btn-cancel-override { background-color: #94a3b8; } /* Slate cancel */
body.modern-mode .btn-cancel-override:hover:not(:disabled) { background-color: #64748b; }
body.modern-mode #theme-toggle { background-color: rgba(79, 70, 229, 0.1); border-color: rgba(79, 70, 229, 0.3); color: #4f46e5; font-weight: 500; }
body.modern-mode #theme-toggle:hover { background-color: rgba(79, 70, 229, 0.2); color: #4338ca; }


/* === Responsive Adjustments === */
@media (max-width: 768px) {
    body { padding: 10px; }
    #auth-controls { padding: 10px; margin: 0 0 10px 0; }
    nav { margin: 0 0 10px 0; }
    nav a { margin: 0 8px; font-size: 0.9em; }
    h1 { font-size: 1.5em; }
    h2 { font-size: 1.2em; }
    #cards { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 15px; }
    .triage-card { padding: 12px; }
    .board { padding: 5px; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
    .list { max-height: 70vh; }
    #add-task-form { padding: 15px; }
    #add-task-form textarea { padding: 8px; }
    #add-task-form button[type="submit"] { padding: 8px 15px; }
    #auth-controls button { display: block; width: calc(100% - 20px); margin: 10px auto 0 auto; text-align: center; }
    #board-selector { width: 90%; padding: 15px;}
    #board-select-dropdown { width: 90%; }
    .btn { padding: 6px 12px; font-size: 0.85em; }
    .btn-secondary { padding: 5px 8px; font-size: 0.75em; }
    .override-ui-container { flex-direction: column; align-items: stretch; } /* Stack override controls on mobile */
    .override-select-section, .override-create-section { flex-direction: column; align-items: stretch; }
    .override-select, .new-list-input { min-width: 0; } /* Remove min-width */
    .btn-cancel-override { margin-left: 0; margin-top: 10px; }
}

/* In your CSS or <style> block */
.list {
    /* width: 280px;  <-- Remove or comment out fixed CSS width */
    flex-shrink: 0;
    max-height: 75vh; /* Or adjust as needed */
    /* Apply width using Tailwind classes on the list elements themselves */
 }