/* ==========================================================================
   1. General Styles
   ========================================================================== */

/* Set a stable scrollbar to prevent layout shifts */
html {
    scrollbar-gutter: stable;
}

/* Custom scrollbar for a cleaner look */
::-webkit-scrollbar {
    width: 6px;
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(128, 128, 128, 0.5);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(102, 102, 102, 0.7);
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

/* Basic body styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 5px;
    display: flex;
    gap: 10px;
    background-color: #ebebeb;
}

/* ==========================================================================
   2. Entry Page & Password
   ========================================================================== */

/* Full-screen container for the entry page */
#entry-page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

/* Hide background content when the entry page is visible */
body > *:not(#entry-page) {
    opacity: 0;
    pointer-events: none;
}

/* Show background content when unlocked */
body.unlocked > *:not(#entry-page) {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.25s ease-in;
}

/* Password input fields */
#entry-password, #entry-confirm-password {
    width: 100%;
    padding: 10px;
    padding-right: 40px;
    box-sizing: border-box;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
}

/* Password visibility toggle icons */
#toggle-password-visibility, #toggle-confirm-password-visibility {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-85%);
    cursor: pointer;
    color: #007BFF;
}

/* Container for password inputs */
#entry-container div {
    position: relative;
    width: 100%;
}

/* Entry page container */
#entry-container {
    background: #d3d3d3;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    width: 300px;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.5s, transform 0.5s;
}

#entry-container.show {
    opacity: 1;
    transform: translateY(0);
}

#entry-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lock-icon {
    font-size: 3em;
    color: #007BFF;
    margin-bottom: 10px;
}

.lock-icon.shake {
    animation: shake 0.5s ease-in-out;
}

#entry-title {
    margin: 10px 0;
    font-size: 1.5em;
}

#entry-message {
    font-size: 0.9em;
    color: #555;
    margin-bottom: 20px;
}

#entry-button {
    background: #007BFF;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
}

#entry-button:hover {
    background: #0056b3;
}

/* Confirm password container (initially hidden) */
#confirm-password-container {
    position: relative;
    width: 100%;
    display: none;
}

/* Language selection dropdown on the entry page */
#entry-language-select {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 60px;
    padding: 5px;
    font-size: 0.9em;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #fff;
    color: #555;
}

/* ==========================================================================
   3. Dark Mode
   ========================================================================== */

.dark-mode {
    background-color: #121212;
    color: white;
}

.dark-mode .column {
    background: #333;
    border-color: #777;
}

.dark-mode .column h2 {
    background-color: #555;
    color: rgb(200, 200, 200);
}

.dark-mode .popup, .dark-mode .settings-popup, .dark-mode .filter-popup {
    background: #333;
    color: white;
}

.dark-mode .popup input, .dark-mode .popup textarea, .dark-mode .filter-popup select {
    background: #8f8f8f;
    color: white;
}

.dark-mode input[type="date"] {
    background: #8f8f8f;
    color: white;
}

.dark-mode .task .task-footer {
    color: #ccc;
}

.dark-mode .task.grey {
    background: #8f8f8f25;
}

.dark-mode #entry-message {
    color: white;
}

.dark-mode .task .task-separator {
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

/* Dark mode priority colors */
.dark-mode .task.red-1 { background: linear-gradient(135deg, rgba(200, 80, 70, 0.4) 0%, rgba(200, 80, 70, 0.1) 100%); }
.dark-mode .task.red-2 { background: linear-gradient(135deg, rgba(190, 110, 60, 0.4) 0%, rgba(190, 110, 60, 0.1) 100%); }
.dark-mode .task.red-3 { background: linear-gradient(135deg, rgba(190, 140, 80, 0.4) 0%, rgba(190, 140, 80, 0.1) 100%); }
.dark-mode .task.red-4 { background: linear-gradient(135deg, rgba(200, 160, 100, 0.4) 0%, rgba(200, 160, 100, 0.1) 100%); }
.dark-mode .task.red-5 { background: linear-gradient(135deg, rgba(210, 180, 120, 0.4) 0%, rgba(210, 180, 120, 0.1) 100%); }
.dark-mode .task.red-6 { background: linear-gradient(135deg, rgba(150, 150, 150, 0.4) 0%, rgba(150, 150, 150, 0.1) 100%); }
.dark-mode .task.red-7 { background: linear-gradient(135deg, rgba(120, 120, 120, 0.4) 0%, rgba(120, 120, 120, 0.1) 100%); }

.dark-mode .task.green {
    background: linear-gradient(135deg, rgba(110, 168, 119, 0.4) 0%, rgba(110, 168, 119, 0.1) 100%);
}

.dark-mode .task.today {
    background: linear-gradient(135deg, rgba(51, 51, 51, 0.5) 0%, rgba(51, 51, 51, 0.2) 100%);
    border: 2px solid white;
}

.dark-mode .task.past {
    background: linear-gradient(135deg, rgba(51, 51, 51, 0.5) 0%, rgba(51, 51, 51, 0.2) 100%);
    border: 2px dashed white;
}

.dark-mode .popup input[list] { background: #555; }
.dark-mode .popup input, .dark-mode .popup textarea { background: #555; border: 1px solid #777; color: #ccc; }
.dark-mode .popup input:focus, .dark-mode .popup textarea:focus { background: #333; border: 1px solid #fff; color: #fff; }
.dark-mode .popup datalist { background: #555; color: #fff; }
.dark-mode .popup hr { border-top: 1px solid #666; }
.dark-mode #validation-error { background-color: #b71c1c !important; color: #fff !important; border-left-color: #ff6b6b !important; }
.dark-mode .popup button, .dark-mode .settings-popup button, .dark-mode .filter-popup button { background: #FF7F00; opacity: 0.9; }
.dark-mode .popup button:hover, .dark-mode .settings-popup button:hover, .dark-mode .filter-popup button:hover { background: #CC6600; opacity: 1; }
.dark-mode .task-context-menu { background: #333; border-color: #555; }
.dark-mode .context-menu-button { background: #333; color: #fff; }
.dark-mode .context-menu-button:hover { background-color: #555; }
.reorder-alert, .copy-alert {
    opacity: 0.7 !important;
}

.dark-mode .reorder-alert, .dark-mode .copy-alert { background-color: #FF7F00; color: white; opacity: 0.9; }
.dark-mode .settings-icon, .dark-mode .filter-icon, .dark-mode .reorder-icon, .dark-mode .add-task-icon, .dark-mode .copy-icon { color: #FF7F00; opacity: 0.9; }
.dark-mode .settings-icon:hover, .dark-mode .filter-icon:hover, .dark-mode .reorder-icon:hover, .dark-mode .add-task-icon:hover, .dark-mode .copy-icon:hover { color: #CC6600; opacity: 1; }
.dark-mode .delete-icon { color: #FF0000; }
.dark-mode .delete-icon:hover { color: #CC0000; }
.dark-mode .switch .slider { background-color: #FF7F00; opacity: 0.9; }
.dark-mode .switch input:checked + .slider { background-color: #CC6600; opacity: 1; }
.dark-mode .switch input + .slider { background-color: #ccc; }
.dark-mode .switch input + .slider:before { background-color: white; }
.dark-mode .close-popup { color: #FF7F00; opacity: 0.9; }
.dark-mode .close-popup:hover { color: #CC6600; }
.dark-mode .add-task-icon { color: #4CAF50; }
.dark-mode .add-task-icon:hover { color: #388E3C; }
.dark-mode .filter-popup { background: #333; color: white; }
.dark-mode .filter-popup select { background: #555; color: white; border: 1px solid #777; }
.dark-mode .floating-button { background-color: rgba(255, 127, 0, 0.7); }
.dark-mode .floating-button:hover { background-color: rgba(204, 102, 0, 0.7); }
.dark-mode .floating-popup { background-color: #333; color: white; border-color: #777; }
.dark-mode .floating-popup li:hover { background-color: #555; }
.dark-mode .filter-tile { background-color: #555; color: white; border-color: #777; }
.dark-mode .filter-tile:hover { background-color: #444; }
.dark-mode .filter-tile.selected { background-color: #FF7F00; color: black; }
.dark-mode .task.prioritary { background: #ffeb3b31; box-shadow: 0 0 10px #FFEB3B; }
.dark-mode .popup label[for="taskPriority"] { color: #ccc; }
.dark-mode .popup-button { background: #FF7F00; }
.dark-mode .popup-button:hover { background: #CC6600; }
.dark-mode .font-style-btn { border: 2px solid #FF7F00; background: #444; color: #fff; }
.dark-mode .font-style-btn:hover { background: #555; }
.dark-mode .font-style-btn.selected { background: #555; color: #FF7F00; }
.dark-mode #entry-language-select { background: #555; color: #ccc; border: 1px solid #777; }
.dark-mode #entry-container { background: #333; }
.dark-mode .date-tile { border-left-color: #64B5F6; border-right-color: #64B5F6; }

/* One Color Mode (for minimalist view) */
.one-color-mode .task { background: linear-gradient(135deg, rgba(233, 233, 233, 0.4) 0%, rgba(233, 233, 233, 0.1) 100%) !important; }
.one-color-mode .task.today, .one-color-mode .task.past { background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.2) 100%) !important; }
.dark-mode.one-color-mode .task { background: linear-gradient(135deg, rgba(150, 150, 150, 0.4) 0%, rgba(150, 150, 150, 0.1) 100%) !important; }
.dark-mode.one-color-mode .task.today, .dark-mode.one-color-mode .task.past { background: linear-gradient(135deg, rgba(51, 51, 51, 0.5) 0%, rgba(51, 51, 51, 0.2) 100%) !important; }

/* Future Task Style */
.future-task-style .task { background-color: #00796b10; border: 2px solid #00796b8c; }
.future-task-style.dark-mode .task { background-color: #004d4025; border: 2px solid #e0f7fa7e; }
.future-task-style .task.past { background: #ffffff; border: 2px dashed black; }
.future-task-style.dark-mode .task.past { background: #333333; border: 2px dashed white; }

/* ==========================================================================
   4. Layout & Columns
   ========================================================================== */

.column {
    flex: 1;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    min-height: 95vh;
    position: relative;
}

.column h2 {
    text-align: left;
    margin: 10px 0;
    display: inline-block;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f4f4f4;
    color: black;
    cursor: default;
}

.row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ==========================================================================
   5. Tasks
   ========================================================================== */

.task {
    margin: 10px 0;
    padding: 10px;
    border-radius: 5px;
    cursor: grab;
}

.task .description {
    font-size: 1.2em;
    font-weight: normal;
}

.task .task-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 0.8em;
    color: #555;
}

.task .task-assignee {
    font-weight: bold;
    text-align: right;
    margin-left: 10px;
}

.task .task-separator {
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.25);
    margin: 4px 0;
}

.task.grey {
    background: linear-gradient(135deg, rgba(233, 233, 233, 0.4) 0%, rgba(233, 233, 233, 0.1) 100%);
}

/* Task priority colors based on urgency */
.task.red-1 { background: linear-gradient(135deg, rgba(220, 100, 90, 0.4) 0%, rgba(220, 100, 90, 0.1) 100%); }
.task.red-2 { background: linear-gradient(135deg, rgba(210, 130, 70, 0.4) 0%, rgba(210, 130, 70, 0.1) 100%); }
.task.red-3 { background: linear-gradient(135deg, rgba(210, 160, 90, 0.4) 0%, rgba(210, 160, 90, 0.1) 100%); }
.task.red-4 { background: linear-gradient(135deg, rgba(220, 180, 110, 0.4) 0%, rgba(220, 180, 110, 0.1) 100%); }
.task.red-5 { background: linear-gradient(135deg, rgba(230, 200, 130, 0.4) 0%, rgba(230, 200, 130, 0.1) 100%); }
.task.red-6 { background: linear-gradient(135deg, rgba(220, 220, 210, 0.4) 0%, rgba(220, 220, 210, 0.1) 100%); }
.task.red-7 { background: linear-gradient(135deg, rgba(200, 200, 195, 0.4) 0%, rgba(200, 200, 195, 0.1) 100%); }

.task.green {
    background: linear-gradient(135deg, rgba(144, 202, 153, 0.4) 0%, rgba(144, 202, 153, 0.1) 100%);
}

/* Task date-based styles */
.task.today {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.2) 100%);
    border: 2px solid black;
}

.task.past {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.2) 100%);
    border: 2px dashed black;
}

.task.prioritary {
    background: #006eff34;
    box-shadow: 0 0 10px #80a2ff;
}

/* Dragging state */
.task.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

/* ==========================================================================
   6. Popups & Modals
   ========================================================================== */

.popup, .settings-popup, .filter-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 30px;
    width: 30%;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    display: none;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}

.popup.show, .settings-popup.show, .filter-popup.show {
    display: block;
    opacity: 1;
}

.popup.hiding, .settings-popup.hiding, .filter-popup.hiding {
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}

/* Form elements inside popups */
.popup input, .popup button, .popup textarea, .filter-popup select, .popup datalist {
    display: block;
    width: calc(100% - 20px);
    margin: 10px 0;
    padding: 10px;
    padding-left: 7px;
    border-radius: 5px;
}

.popup input, .popup textarea { background: #fff; border: 1px solid #ccc; color: #555; }
.popup input:focus, .popup textarea:focus { background: #fff; border: 1px solid #000; color: #000; }
.popup input[list] { background: #fff; }
.popup datalist { background: #fff; color: #000; }
.popup hr { border: none; border-top: 1px solid #ddd; margin: 10px 0; }
.popup textarea { height: 30vh; resize: vertical; font-size: 16px; }

/* Validation error message */
#validation-error {
    font-weight: 500;
}

/* Overlay for popups */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 999;
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}

.overlay.show {
    opacity: 1;
}

.overlay.hiding {
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}

/* Close button for popups */
.close-popup {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.5em;
    color: #007BFF;
    cursor: pointer;
}

.close-popup:hover {
    color: #0056b3;
}

/* ==========================================================================
   7. Buttons & Icons
   ========================================================================== */

.button-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    margin: 10px 0;
    padding: 0;
}

.popup .button-container,
.settings-popup .button-container {
    width: 100%;
    justify-content: space-between;
    gap: 10px;
    align-items: stretch;
}

.button-container button {
    flex: 1;
    width: auto;
    border-radius: 5px;
    padding: 10px 5px;
    font-size: 1em;
    cursor: pointer;
    margin: 0;
}

.popup button, .settings-popup button, .filter-popup button {
    background: #007BFF;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

.popup button:hover, .settings-popup button:hover, .filter-popup button:hover {
    background: #0056b3;
}

.settings-icon, .filter-icon, .reorder-icon {
    position: absolute;
    top: 5px;
    font-size: 1.5em;
    color: #007BFF;
    cursor: pointer;
}

.settings-icon { right: 0px; }
.filter-icon { right: 30px; }
.reorder-icon { right: 60px; }
.settings-icon:hover, .filter-icon:hover, .reorder-icon:hover { color: #0056b3; }
.settings-popup input[type="file"] { display: none; }

/* Settings popup styling */
.settings-popup {
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
}

.settings-popup h2 {
    margin: 0 0 8px 0;
    font-size: 1.5em;
    color: inherit;
}

.settings-popup h3 {
    margin: 8px 0 6px 0;
    font-size: 1.1em;
    color: inherit;
}

.settings-popup hr {
    margin: 8px 0;
}

.settings-popup p {
    margin: 2px 0;
    font-size: 0.9em;
}

.settings-popup footer {
    font-size: 0.85em;
    color: #666;
    margin: 2px 0;
}

.dark-mode .settings-popup footer {
    color: #999;
}

/* Options container for settings items */
.options-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    gap: 12px;
}

.options-container label:not(.switch) {
    flex-shrink: 0;
    font-weight: 500;
    min-width: 100px;
}

.options-container .switch {
    flex-shrink: 0;
    align-self: center;
    display: inline-block;
}

.options-container select {
    width: 30%;
    padding: 4px 6px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background: white;
    color: #333;
    font-size: 0.85em;
    cursor: pointer;
    height: 28px;
}

.dark-mode .options-container select {
    background: #555;
    color: #ccc;
    border-color: #777;
}

.options-container select:focus {
    outline: none;
    border-color: #007BFF;
}

.dark-mode .options-container select:focus {
    border-color: #64B5F6;
}

.delete-icon {
    font-size: 1.8em;
    color: #FF0000;
    cursor: pointer;
    margin-left: 0;
    margin-right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.delete-icon:hover {
    color: #CC0000;
}

.copy-icon {
    font-size: 1.8em;
    color: #007BFF;
    cursor: pointer;
    margin-left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.copy-icon:hover {
    color: #0056b3;
}

.column#done-column .copy-icon {
    margin-left: 0;
}

.icon-container {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.icon-container .material-icons {
    font-size: 1.5em;
    color: #007BFF;
    cursor: pointer;
}

.icon-container .material-icons:hover {
    color: #0056b3;
}

.add-task-icon {
    font-size: 1.8em;
    color: #4CAF50;
    cursor: pointer;
    margin-left: 0;
    margin-right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.add-task-icon:hover {
    color: #388E3C;
    cursor: pointer;
}

/* Switch for toggles */
.switch { position: relative; display: inline-block; width: 37px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: #007BFF; }
input:checked + .slider:before { transform: translateX(14px); }

/* Font style buttons */
.font-style-buttons { display: flex; gap: 6px; justify-content: center; padding: 0; margin: -6px 0; }
.font-style-btn { width: 32px; height: 32px; min-width: 32px; min-height: 32px; border: 2px solid #007BFF; background: white; color: #333; cursor: pointer; border-radius: 4px; font-size: 0.95em; font-weight: bold; display: flex; align-items: center; justify-content: center; padding: 0; font-family: 'Arial', sans-serif; line-height: 1; letter-spacing: 0; outline: none; user-select: none; box-sizing: border-box; }
.font-style-btn:active { transform: none; }
.font-style-btn:hover { background: #f0f8ff; }
.font-style-btn.selected { background: #f0f8ff; color: #007BFF; font-weight: bold; }

/* ==========================================================================
   8. Context Menu
   ========================================================================== */

.task-context-menu {
    position: fixed;
    background: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    display: none;
    z-index: 1001;
    min-width: 180px;
    padding: 5px 0;
}

.task-context-menu.show {
    display: block;
}

.context-menu-button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 15px;
    border: none;
    background: white;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    transition: background-color 0.2s;
}

.context-menu-button:hover {
    background-color: #f0f0f0;
}

.context-menu-button .material-icons {
    font-size: 18px;
}

/* ==========================================================================
   9. Floating Action Button (FAB) & Menu
   ========================================================================== */

.floating-button {
    position: fixed;
    bottom: 21px;
    right: 20px;
    width: 56px;
    height: 56px;
    background-color: rgba(0, 123, 255, 0.7);
    color: white;
    border: none;
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    z-index: 1001;
    transition: background-color 0.3s;
}

.floating-button:hover {
    background-color: rgba(0, 86, 179, 0.7);
}

.floating-popup {
    position: fixed;
    bottom: 83px;
    right: 20px;
    background-color: #fff;
    border: 1px solid #a0a0a0;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    display: none;
    z-index: 1002;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    transform: translateY(20px);
}

.floating-popup.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.floating-popup ul { list-style: none; padding: 10px; margin: 0; }
.floating-popup li { padding: 10px; cursor: pointer; font-size: 1.2em; display: flex; align-items: center; }
.floating-popup li:hover { background-color: #f4f4f4; }
.floating-popup li .material-icons { margin-right: 10px; }

/* ==========================================================================
   10. Workload Matrix
   ========================================================================== */

.workload-matrix-open { overflow: hidden; }
.workload-matrix-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: white; z-index: 10001; overflow: auto; display: none; box-sizing: border-box; }
.workload-matrix-popup.show { display: block; }
.dark-mode .workload-matrix-popup { background: #222; color: #fff; }
.workload-matrix-popup h2 { margin-top: 0; margin-left: 0; margin-right: 20px; text-align: left; margin-bottom: 20px; font-size: 1.2em; }
.workload-matrix-popup .close-button { position: fixed; top: 5px; right: 10px; background: none; border: none; font-size: 24px; cursor: pointer; color: inherit; padding: 8px 12px; line-height: 1; transition: opacity 0.2s ease; z-index: 10002; }
.workload-matrix-popup .close-button:hover { opacity: 0.7; }
.workload-controls { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 20px; margin-left: 20px; margin-right: 20px; padding: 0 20px; }
.workload-controls label { font-weight: bold; }
.workload-controls input { width: 60px; padding: 5px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; }
.dark-mode .workload-controls input { background: #333; color: #fff; border-color: #555; }
.workload-matrix-container { overflow-x: auto; display: flex; flex-direction: column; gap: 30px; padding-bottom: 20px; margin: 0 20px; padding: 0 20px; }
.matrix-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.matrix-week-section { width: 100%; margin-bottom: 20px; }
.matrix-week-header { text-align: center; font-size: 16px; margin: 15px 0 10px 0; color: inherit; font-weight: bold; }
.matrix-table, .matrix-table-vertical { border-collapse: collapse; width: 100%; max-width: 100%; margin: 0 auto; }
.matrix-table th, .matrix-table td, .matrix-table-vertical th, .matrix-table-vertical td { border: 1px solid #ddd; padding: 8px 4px; text-align: center; font-size: 13px; }
.dark-mode .matrix-table th, .dark-mode .matrix-table td, .dark-mode .matrix-table-vertical th, .dark-mode .matrix-table-vertical td { border-color: #555; }
.dark-mode .matrix-table th, .dark-mode .matrix-table-vertical th { background: #333; }
.matrix-table th, .matrix-table-vertical th {
    background: #f0f0f0;
    font-weight: bold;
    padding: 8px 4px;
    cursor: pointer;
}
.matrix-table td, .matrix-table-vertical td { background: #fff; }
.dark-mode .matrix-table td, .dark-mode .matrix-table-vertical td { background: #2a2a2a; }
.matrix-table td:first-child, .matrix-table-vertical td:first-child { text-align: center; font-weight: bold; width: 65px; min-width: 65px; max-width: 65px; flex-shrink: 0; }
.matrix-person-header td { background: #f0f0f0; font-weight: bold; padding: 8px 4px; border: 1px solid #ddd; word-wrap: break-word; overflow-wrap: break-word; }
.dark-mode .matrix-person-header td { background: #333; border-color: #555; }
.matrix-day-label { font-weight: bold; text-align: center; width: 65px; min-width: 65px; max-width: 65px; flex-shrink: 0; cursor: pointer;}
.matrix-day-label.current-day {background-color: rgba(0, 123, 255, 0.7);}
.dark-mode .matrix-day-label.current-day {background-color: rgba(255, 127, 0, 0.7);}
.matrix-day-row:hover { opacity: 1; }
.matrix-day-row.matrix-day-today { background-color: rgba(255, 255, 100, 0.1); }
.dark-mode .matrix-day-row.matrix-day-today { background-color: rgba(200, 200, 100, 0.2); }
.matrix-day-row.matrix-day-past { background-color: rgba(180, 180, 180, 0.1); opacity: 0.8; }
.dark-mode .matrix-day-row.matrix-day-past { background-color: rgba(120, 120, 120, 0.2); }
.tasks-details-popup { background: white; border: 2px solid #007bff; border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); max-width: 500px; max-height: 500px; overflow-y: auto; font-size: 0.95em; width: 350px !important; min-width: 350px !important; max-width: 350px !important; box-sizing: border-box; padding: 0; word-wrap: break-word; }
.dark-mode .tasks-details-popup { background: #333; border-color: #0056b3; color: #fff; }
.matrix-cell { 
    position: relative;
    cursor: pointer; 
}
.matrix-cell.has-tasks { font-weight: bold; }
.matrix-cell.intensity-1 { background: linear-gradient(135deg, rgba(220, 220, 220, 0.3) 0%, rgba(200, 200, 200, 0.2) 100%) !important; }
.dark-mode .matrix-cell.intensity-1 { background: linear-gradient(135deg, rgba(100, 100, 100, 0.3) 0%, rgba(80, 80, 80, 0.2) 100%) !important; }
.matrix-cell.intensity-2 { background: linear-gradient(135deg, rgba(230, 230, 190, 0.4) 0%, rgba(220, 220, 170, 0.2) 100%) !important; }
.dark-mode .matrix-cell.intensity-2 { background: linear-gradient(135deg, rgba(150, 130, 70, 0.3) 0%, rgba(130, 110, 60, 0.2) 100%) !important; }
.matrix-cell.intensity-3 { background: linear-gradient(135deg, rgba(255, 220, 100, 0.5) 0%, rgba(255, 180, 80, 0.3) 100%) !important; }
.dark-mode .matrix-cell.intensity-3 { background: linear-gradient(135deg, rgba(200, 140, 60, 0.5) 0%, rgba(180, 110, 40, 0.3) 100%) !important; }
.matrix-cell.intensity-4 { background: linear-gradient(135deg, rgba(255, 180, 60, 0.6) 0%, rgba(255, 140, 40, 0.4) 100%) !important; }
.dark-mode .matrix-cell.intensity-4 { background: linear-gradient(135deg, rgba(200, 100, 30, 0.6) 0%, rgba(180, 70, 20, 0.4) 100%) !important; }
.matrix-cell.intensity-5+ { background: linear-gradient(135deg, rgba(255, 80, 80, 0.8) 0%, rgba(200, 40, 40, 0.6) 100%) !important; color: #fff; }
.dark-mode .matrix-cell.intensity-5+ { background: linear-gradient(135deg, rgba(200, 40, 40, 0.8) 0%, rgba(150, 20, 20, 0.6) 100%) !important; color: #fff; }

/* ==========================================================================
   11. Filters
   ========================================================================== */

.filter-tiles-container { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 15px; max-height: 500px; overflow-y: auto; padding: 10px; }
.filter-tile { padding: 10px 16px; border: 1px solid #007BFF; border-radius: 8px; cursor: pointer; background-color: transparent; transition: all 0.2s ease; min-width: 100px; text-align: center; font-size: 25px; font-weight: 500; line-height: 1.7; }
.filter-tile:hover { background-color: rgba(0, 123, 255, 0.1); }
.filter-tile.selected { background-color: #007BFF; color: white; }
.dark-mode .filter-tile { border-color: #64B5F6; color: #e0e0e0; }
.dark-mode .filter-tile.selected { background-color: #64B5F6; color: #000; }
.date-tile { padding: 10px 20px; text-align: center; font-weight: bold; background: transparent; color: inherit; margin-bottom: 10px; border-radius: 5px; position: relative; display: flex; justify-content: center; align-items: center; border-left: 4px solid #007BFF; border-right: 4px solid #007BFF; cursor: pointer; }
.date-tile #tile-day-of-week { font-size: 1.05em; font-weight: bold; display: inline; letter-spacing: 0.5px; }
.date-tile #tile-current-date { font-size: 0.95em; margin-left: 5px; font-weight: bold; display: inline; letter-spacing: 0.3px; }

/* ==========================================================================
   12. Responsive Design
   ========================================================================== */

@media (max-width: 900px) {
    body { flex-direction: column; align-items: center; }
    .column { width: 90%; min-height: 40px; margin-bottom: 10px; }
    .icon-container { position: relative; top: 0; right: 0; margin-bottom: 40px; display: flex; justify-content: center; gap: 20px; }
    .column .icon-container { position: static; justify-content: flex-end; margin-bottom: 10px; }
    .popup, .settings-popup, .filter-popup { width: 85%; max-width: 85%; padding: 20px; }
    .column#done-column .icon-container { display: none; }
}

@media (max-width: 768px) {
    .matrix-grid { grid-template-columns: 1fr; }
    .matrix-table th, .matrix-table td, .matrix-table-vertical th, .matrix-table-vertical td { padding: 6px 3px; font-size: 12px; }
    .matrix-table td:first-child, .matrix-table-vertical td:first-child, .matrix-day-label, .matrix-person-header td:first-child { width: 55px; min-width: 55px; max-width: 55px; }
}

@media (max-width: 480px) {
    .matrix-table th, .matrix-table td, .matrix-table-vertical th, .matrix-table-vertical td { padding: 5px 2px; font-size: 11px; }
    .matrix-table td:first-child, .matrix-table-vertical td:first-child, .matrix-day-label, .matrix-person-header td:first-child { width: 50px; min-width: 50px; max-width: 50px; }
}

/* ==========================================================================
   13. Animations
   ========================================================================== */


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

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
}

/* Hide the default password reveal icon in Edge */
input[type="password"]::-ms-reveal {
    display: none;
}