/* === Background === */ /* Only center the login page contents — do not apply flex centering globally which breaks the dashboard layout. Add the class `login-page` to the element of the login page (index.html) so the login box is vertically and horizontally centered without affecting other pages. */ .login-page { display: flex; justify-content: center; align-items: center; min-height: 100vh; } body { margin: 0; font-family: "Poppins", sans-serif, Haettenschweiler, "Arial Narrow Bold", sans-serif, sans-serif; /* Enforce a light theme by default for all pages */ background-color: #f7fbff; /* Light background */ color: #1f2937; /* Dark text for readability */ } /* On the login page specifically, make the body background transparent so the background image div can be seen. */ body.login-page { background-color: transparent; } .background { position: fixed; inset: 0; width: 100%; height: 100%; background: url("./assets/login_bg.png") no-repeat center center/cover; /* Change the image path above or use your own image */ filter: brightness(0.6); z-index: -1; } /* === Login Box === */ .login-container { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); border-radius: 20px; padding: 40px 50px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25); width: 320px; color: #000000; text-align: center; animation: fadeIn 0.8s ease-in-out; } .login-container h2 { margin-bottom: 25px; font-weight: 600; letter-spacing: 1px; } /* === Inputs === */ .input-group { margin-bottom: 20px; text-align: center; display: flex; flex-direction: column; align-items: center; } .input-group label { font-size: 20px; align-self: center; margin-bottom: 5px; display: block; margin-bottom: 5px; opacity: 0.85; } .input-group input { width: 80%; padding: 10px 12px; border: none; border-radius: 10px; outline: none; font-size: 15px; background: rgba(255, 255, 255, 0.2); color: #2d1c04; text-align: center; } .input-group input::placeholder { color: rgba(184, 186, 48, 0.6); } /* === Buttons === */ .btn-login { width: 100%; padding: 10px; border: none; border-radius: 10px; background-color: rgba(131, 162, 197, 0.25); color: #cfb053; font-weight: bold; font-size: 16px; cursor: pointer; transition: background 0.3s ease; } .btn-login:hover { background-color: rgba(3, 63, 166, 0.4); color: #fefefe; } /* === Links === */ .links { margin-top: 15px; font-size: 14px; } .links a { color: #0f0f0f; text-decoration: none; transition: opacity 0.3s; } .links a:hover { opacity: 0.8; } /* === Animation === */ @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* === Logo === */ .logo { display: block; margin: 0 auto 20px auto; width: 40%; /* don't stretch horizontally */ height: auto; /* keep natural proportions */ max-width: 120px; /* limit width */ max-height: 120px; /* limit height */ object-fit: contain; /* ensure image scales without distortion */ } /* ================= Dashboard styles (sidebar, topbar, layout) ================= */ /* Dashboard: root variables */ :root { --sidebar-width: 240px; --sidebar-collapsed: 72px; --topbar-height: 64px; } /* Dashboard: sidebar */ .sidebar { width: var(--sidebar-width); background: #0b2a3b; color: #fff; padding: 16px; box-sizing: border-box; position: fixed; top: 0; left: 0; bottom: 0; transition: width 0.2s ease; } /* Sidebar collapse toggle button */ .sidebar .collapse-btn { background: transparent; border: none; color: #dfeffb; cursor: pointer; font-size: 20px; margin-bottom: 8px; } /* Chevron SVG inside collapse button: size, color via currentColor and smooth rotation */ .sidebar .collapse-btn .chevron-icon { width: 20px; height: 20px; display: inline-block; vertical-align: middle; color: #dfeffb; /* uses currentColor from button */ transition: transform 200ms ease; } /* Rotate chevron when sidebar is collapsed so it points the other way */ .sidebar.collapsed .collapse-btn .chevron-icon { transform: rotate(180deg); } .sidebar nav { margin-top: 8px; } .sidebar nav a { display: flex; align-items: center; gap: 12px; color: #dfeffb; text-decoration: none; padding: 10px 8px; border-radius: 6px; margin-bottom: 6px; position: relative; /* needed for tooltip */ } .sidebar nav a:hover { background: rgba(255, 255, 255, 0.04); } .sidebar .icon { width: 20px; display: inline-block; } .sidebar .label { display: inline-block; } .sidebar.collapsed { width: var(--sidebar-collapsed); } .sidebar.collapsed .label { display: none; } .sidebar.collapsed .logo { width: 48px; height: 44px; margin-bottom: 6px; } /* Tooltip that appears when sidebar is collapsed and user hovers an item */ .sidebar.collapsed nav a:hover::after { content: attr(data-label); position: absolute; left: calc(var(--sidebar-collapsed) + 12px); top: 50%; transform: translateY(-50%); background: #ffffff; color: #0b2a3b; padding: 6px 8px; border-radius: 6px; white-space: nowrap; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); z-index: 2000; } /* Dashboard: main content area */ .main { position: relative; /* Ensures proper stacking with the fixed sidebar */ margin-left: var(--sidebar-width); transition: margin-left 0.2s ease; } .sidebar.collapsed + .main { margin-left: var(--sidebar-collapsed); } /* Topbar within the main content area */ .topbar { height: var(--topbar-height); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; background: #fff; box-shadow: 0 2px 8px rgba(11, 42, 59, 0.06); } /* Topbar logo */ .topbar-logo { height: 44px; object-fit: contain; } /* Responsive behaviour for small screens */ @media (max-width: 700px) { .app-layout { flex-direction: column; } .sidebar { width: 100%; display: flex; overflow-x: auto; } .sidebar.collapsed { width: 100%; } } /* ================= Upload page styles ================= */ /* Scoped under .upload-page to avoid affecting other pages */ .upload-page { background: #f4f7fb; min-height: 100vh; } .upload-container { padding: 28px; max-width: 980px; margin: 0 auto; } .upload-card { background: #ffffff; border-radius: 12px; box-shadow: 0 8px 30px rgba(11, 42, 59, 0.06); padding: 20px; } .upload-header h2 { margin: 0 0 6px 0; } .muted { color: #6b7785; font-size: 14px; } .upload-form { display: grid; gap: 12px; } /* Custom file drop area */ .file-drop { display: block; cursor: pointer; border-radius: 10px; } .file-drop input[type="file"] { display: none; } .file-drop .file-drop-inner { border: 2px dashed rgba(11, 42, 59, 0.08); padding: 18px; display: flex; gap: 12px; align-items: center; color: #0b2a3b; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.3) ); border-radius: 8px; } .file-drop.hover .file-drop-inner { box-shadow: inset 0 0 0 3px rgba(99, 123, 255, 0.06); border-color: rgba(99, 123, 255, 0.45); } .file-drop svg { color: #4b6cff; } .extra-fields { display: grid; gap: 8px; } /* Date input styles for upload page */ .date-input-wrap { position: relative; max-width: 560px; display: flex; align-items: center; gap: 12px; } .date-input-wrap .date-label { min-width: 140px; color: #253046; font-weight: 600; text-align: right; font-size: 14px; } .date-input-wrap input[type="text"] { background: #000; color: #fff; border: 1px solid rgba(255, 255, 255, 0.06); padding: 12px 44px 12px 12px; /* space for calendar button */ border-radius: 8px; font-size: 15px; flex: 1 1 auto; } .date-input-wrap input[type="text"].invalid { outline: 2px solid rgba(255, 50, 50, 0.12); } .date-input-wrap .calendar-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: #fff; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .date-input-wrap .calendar-btn svg { color: #fff; opacity: 0.9; } .select-wrap { display: flex; align-items: center; gap: 12px; } .select-wrap .select-label { min-width: 140px; color: #253046; font-weight: 600; text-align: right; } .select-wrap select { min-width: 180px; padding: 8px 10px; border-radius: 8px; border: 1px solid #dfe6f3; background: #fff; color: #233047; } .select-wrap select[multiple] { height: auto; } .file-caption { color: #253046; font-weight: 600; margin-right: 12px; cursor: pointer; } .file-caption:hover { text-decoration: underline; } /* native date input overlay (invisible) used to trigger native date picker */ .native-date { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; opacity: 0; border: none; background: transparent; z-index: 0; /* sit behind the visible button so the button's click can be handled first */ cursor: pointer; } .date-input-wrap .calendar-btn { z-index: 2; } .progress-wrap { display: flex; align-items: center; gap: 8px; } .progress-wrap progress { width: 220px; height: 10px; appearance: none; } .progress-wrap progress::-webkit-progress-bar { background: #eef3ff; border-radius: 6px; } .progress-wrap progress::-webkit-progress-value { background: #4b6cff; border-radius: 6px; } .upload-result { margin-top: 8px; color: #213547; } .my-uploads { margin-top: 18px; } .file-list div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 6px; border-bottom: 1px solid #f1f4f8; } .file-list a { color: #0b2a3b; text-decoration: none; } .file-list .del { background: transparent; border: 1px solid #f4c6c6; color: #b33; padding: 6px 8px; border-radius: 6px; cursor: pointer; } /* Responsive */ @media (max-width: 700px) { .upload-container { padding: 16px; } .progress-wrap progress { width: 140px; } .date-input-wrap { flex-direction: column; align-items: flex-start; } .date-input-wrap .date-label { text-align: left; min-width: auto; margin-bottom: 6px; } } /* ================= Custom Multiselect Dropdown ================= */ .multiselect { position: relative; min-width: 180px; user-select: none; } .multiselect .select-box { position: relative; padding: 8px 10px; border-radius: 8px; border: 1px solid #dfe6f3; background: #fff; color: #233047; cursor: pointer; display: flex; justify-content: space-between; align-items: center; } .multiselect .select-box:focus, .multiselect.open .select-box { outline: 2px solid rgba(75, 108, 255, 0.5); border-color: #4b6cff; } .multiselect .selected-options { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 8px; } .multiselect .arrow { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #555; transition: transform 0.2s ease; } .multiselect.open .arrow { transform: rotate(180deg); } .multiselect .options-container { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #dfe6f3; border-top: none; border-radius: 0 0 8px 8px; max-height: 200px; overflow-y: auto; z-index: 10; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); } .multiselect.open .options-container { display: block; } .multiselect .option-item { padding: 8px 12px; cursor: pointer; display: flex; align-items: center; gap: 8px; } .multiselect .option-item:hover { background-color: #f4f7fb; } .multiselect .option-item.disabled { color: #999; cursor: not-allowed; } .multiselect .option-item input[type="checkbox"] { margin: 0; cursor: pointer; } /* End upload page styles */ /* ================= Admin Role Setter page styles ================= */ .admin-container { max-width: 900px; margin: 4rem auto; padding: 2rem; background: #fff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .uid-input-group { display: flex; gap: 0.5rem; } .uid-input-group input { flex-grow: 1; } #result { margin-top: 1rem; padding: 1rem; border-radius: 4px; display: none; /* Hidden by default */ } #result.success { background-color: #d4edda; color: #155724; display: block; } #result.error { background-color: #f8d7da; color: #721c24; display: block; } /* ================= Image Compressor Preview Area ================= */ /* ================= Image Compressor Preview Area ================= */ .image-preview-container { display: none; /* hidden until images are uploaded */ margin-top: 2rem; padding: 1.5rem; background: #ffffff; border-radius: 12px; box-shadow: 0 4px 12px rgba(11, 42, 59, 0.1); } .image-preview-container.visible { display: block; } /* Responsive 4-column grid */ .image-preview-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; justify-items: center; align-items: center; } @media (max-width: 1024px) { .image-preview-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .image-preview-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .image-preview-grid { grid-template-columns: repeat(1, 1fr); } } /* Individual preview tile */ .preview-tile { position: relative; border: 1px solid #dfe6f3; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); aspect-ratio: 1 / 1; transition: transform 0.2s ease, box-shadow 0.2s ease; } .preview-tile:hover { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(11, 42, 59, 0.12); } .preview-tile img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Optional: show filename overlay on hover */ .preview-tile::after { content: attr(data-filename); position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 12px; text-align: center; padding: 4px 0; opacity: 0; transition: opacity 0.3s ease; } .preview-tile:hover::after { opacity: 1; } /* ================= Image Modal (Lightbox) ================= */ .image-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); display: flex; justify-content: center; align-items: center; z-index: 3000; /* High z-index to be on top of everything */ opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .image-modal-overlay.visible { opacity: 1; visibility: visible; } .image-modal-content img { display: block; max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: 8px; } /* ================= Mapfile Styles ================= */ /* =========================== Dashboard + Map Full Styles (Append to your styles.css) =========================== */ /* ---------- Page / Layout ---------- */ html, body { height: 100%; margin: 0; padding: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: #f7f8fb; color: #222; } /* App grid: sidebar + main */ .app-layout { display: grid; grid-template-columns: 280px 1fr; /* sidebar width + main area */ height: 100vh; overflow: hidden; } /* Sidebar */ aside.sidebar { background: #0f1724; /* dark sidebar */ color: #fff; padding: 12px; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; transition: width 0.25s ease, transform 0.25s ease; } /* Collapsed sidebar */ aside.sidebar.collapsed { width: 72px !important; min-width: 72px; overflow: visible; } /* Collapse button */ .collapse-btn { background: transparent; border: none; color: inherit; width: 40px; height: 40px; align-self: flex-end; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 8px; } .chevron-icon { width: 18px; height: 18px; opacity: 0.9; } /* Sidebar nav */ aside.sidebar nav { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } aside.sidebar nav a { display: flex; align-items: center; gap: 10px; padding: 8px; text-decoration: none; color: #e6eef8; border-radius: 8px; transition: background 0.15s ease; } aside.sidebar nav a:hover { background: rgba(255, 255, 255, 0.04); } /* Icon + label behavior when collapsed */ aside.sidebar .icon { width: 28px; text-align: center; font-size: 16px; } aside.sidebar .label { font-size: 14px; } /* When collapsed, hide labels */ aside.sidebar.collapsed .label { display: none; } /* ---------- Main Content ---------- */ /* The main content area for all app pages */ .main { position: relative; display: flex; flex-direction: column; height: 100vh; overflow: hidden; } /* On the map page specifically, hide the main area initially to prevent flicker */ .map-page .main { visibility: hidden; /* This is now the active rule for the map page */ } /* Topbar */ .topbar { height: 56px; background: #ffffff; border-bottom: 1px solid rgba(0, 0, 0, 0.06); display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; box-sizing: border-box; z-index: 50; flex-shrink: 0; } .topbar-left { display: flex; align-items: center; gap: 12px; } .topbar-logo { height: 36px; width: auto; display: block; } /* Logout button */ #logoutBtn { background: #ef4444; color: white; border: none; padding: 8px 12px; border-radius: 8px; cursor: pointer; font-weight: 600; } /* ---------- Map Container ---------- */ /* Map should fill remaining area under topbar */ #map { position: relative; height: calc(100vh - 56px); /* full viewport minus topbar */ width: 100%; box-sizing: border-box; background: #e6eef8; /* fallback while tiles load */ z-index: 1; } /* ---------- Map Filters (Top Center) ---------- */ #map-filters-top-center { position: absolute; top: 70px; /* Position below the topbar */ left: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, 0.8); padding: 8px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); z-index: 1000; /* Ensure it's above the map */ backdrop-filter: blur(4px); display: flex; align-items: center; gap: 8px; justify-content: center; /* Center the filter items within the bar */ } .filter-group { display: flex; flex-direction: column; gap: 4px; } .filter-group label { font-weight: 600; font-size: 11px; color: #333; padding-left: 2px; } .filter-group select { padding: 4px 6px; border-radius: 5px; border: 1px solid #ccc; min-width: 120px; /* Give dropdowns a consistent width */ } #reset-filters-btn { align-self: flex-end; /* Align with the bottom of the inputs */ padding: 4px 12px; border-radius: 5px; border: 1px solid #999; cursor: pointer; } /* Make Leaflet panes higher than map controls where required */ .leaflet-pane, .leaflet-tile, .leaflet-overlay-pane { z-index: 1; } /* ---------- Map Toggle Button Panel (bottom-right) ---------- */ /* ================= Map View Styles (Safe Addition) ================= */ /* Map container fills the remaining viewport under topbar */ #map { position: relative; height: calc(100vh - var(--topbar-height, 64px)); width: 100%; background: #e6eef8; /* fallback background */ z-index: 1; } /* Leaflet map elements */ .leaflet-container { width: 100%; height: 100%; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); } /* ---------- Map Toggle Button Container ---------- */ .leaflet-bottom.leaflet-right .custom-map-controls { bottom: 20px; right: 20px; background: rgba(255, 255, 255, 0.75); /* semi-transparent background */ border-radius: 12px; padding: 8px 10px; display: flex; gap: 10px; align-items: center; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); z-index: 1000; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* Toggle Buttons */ .map-btn { border: none; background: rgba(240, 240, 240, 0.9); color: #1f2937; font-weight: 600; padding: 8px 12px; min-width: 110px; /* Set a fixed minimum width for both buttons */ border-radius: 8px; cursor: pointer; box-shadow: 0 4px 10px rgba(0, 0, 0, 0); /* Transparent shadow to reserve space */ transition: all 0.2s ease; } .map-btn:hover { background: rgba(220, 220, 220, 1); transform: translateY(-2px); } .map-btn.active { background: #0078ff; color: #fff; box-shadow: 0 4px 10px rgba(0, 120, 255, 0.3); } /* Small screens */ @media (max-width: 768px) { .custom-map-controls { bottom: 12px; right: 12px; padding: 6px 8px; gap: 6px; } .map-btn { padding: 6px 9px; font-size: 12px; } } /* ================= Kanban CSS ================= */ /* --- Variables --- */ :root { --bg-color: #f4f5f7; /* Light gray background */ --column-bg: #e2e4e6; /* Slightly darker gray for columns */ --card-bg: #ffffff; --text-color-dark: #172b4d; --text-color-medium: #5e6c84; --border-radius-lg: 8px; /* Card Priority Colors (Colored Borders) */ --priority-high: #eb5a46; /* Red/Orange */ --priority-medium: #ff9f1a; /* Orange/Yellow */ --priority-low: #57d9a3; /* Green */ /* Tag Colors */ --tag-maintenance: #00b8d9; --tag-crop: #ffab00; --tag-security: #9938e5; --tag-analytics: #57d9a3; --tag-admin: #c7c7c7; --tag-harvest: #eb5a46; } /* --- Global Reset and Layout --- */ * { box-sizing: border-box; margin: 0; padding: 0; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--bg-color); color: var(--text-color-dark); padding: 20px; } /* --- Header --- */ .kanban-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 0 20px 0; border-bottom: 1px solid #c7c7c7; margin-bottom: 20px; } .kanban-header h1 { font-size: 1.8rem; font-weight: 600; } .add-task-btn i { margin-right: 8px; } .add-task-btn:hover { background-color: #0067a8; } /* --- Kanban Board Layout (Flexbox) --- */ /* --- Kanban Column Styles --- */ .kanban-column { background-color: var(--column-bg); border-radius: var(--border-radius-lg); padding: 10px; width: 300px; /* Standard column width */ min-width: 280px; flex-shrink: 0; /* Prevents columns from shrinking too much */ /* Allows columns to grow slightly in a row */ flex-grow: 1; } .column-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 5px; margin-bottom: 10px; } .column-header h2 { font-size: 1.1rem; font-weight: 600; } .column-header i { color: var(--text-color-medium); cursor: pointer; } /* --- Kanban Card Styles (The Tiles) --- */ .kanban-card { background-color: var(--card-bg); border-radius: 5px; padding: 15px; box-shadow: 0 1px 0 rgba(9, 30, 66, 0.25); /* Subtle shadow */ cursor: grab; border-left: 5px solid transparent; /* Used for the color indicator */ transition: transform 0.2s, box-shadow 0.2s; } /* --- Delete button on cards (appears on hover) --- */ .delete-btn { position: absolute; top: 8px; right: 8px; color: #ccc; cursor: pointer; opacity: 0; /* Hidden by default */ transition: opacity 0.2s, color 0.2s; } .kanban-card:hover .delete-btn { opacity: 1; /* Show on hover */ } .kanban-card:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); transform: translateY(-2px); } .card-title { font-size: 1rem; font-weight: 500; margin-bottom: 10px; } .card-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 0.8rem; color: var(--text-color-medium); } .card-footer { font-size: 0.75rem; color: var(--text-color-medium); } /* Colored Tags */ .tag { font-size: 0.75rem; padding: 3px 6px; border-radius: 3px; color: white; font-weight: 600; } .tag-maintenance { background-color: var(--tag-maintenance); } .tag-crop { background-color: var(--tag-crop); } .tag-security { background-color: var(--tag-security); } .tag-analytics { background-color: var(--tag-analytics); } .tag-admin { background-color: var(--tag-admin); } .tag-harvest { background-color: var(--tag-harvest); } /* --- Virtual Card Color Coding (Priority) --- */ /* High Priority (Red/Orange Border) */ .card-priority-high { border-left-color: var(--priority-high); } /* Medium Priority (Orange/Yellow Border) */ .card-priority-medium { border-left-color: var(--priority-medium); } /* Low Priority (Green Border) */ .card-priority-low { border-left-color: var(--priority-low); } /* Done Card Styling */ .done-card { opacity: 0.7; text-decoration: line-through; } .done-card .card-footer i { color: var(--priority-low); /* Green checkmark */ } /* --- Responsiveness for Mobile Devices --- */ @media (max-width: 768px) { .kanban-board { /* Stack columns vertically on small screens */ flex-direction: column; } .kanban-column { width: 100%; min-width: unset; } } /* Add this to your kanban-styles.css */ .kanban-column { /* ... existing styles ... */ transition: box-shadow 0.3s ease-in-out; /* Add transition for smooth hover feedback */ } /* Style for the card being dragged */ .kanban-card[draggable="true"]:active { cursor: grabbing; } .deleted-items-container h3 { margin-bottom: 15px; color: var(--text-color-dark); } .deleted-items-content { display: flex; flex-wrap: wrap; gap: 10px; } .deleted-card { background-color: #d6d8db; padding: 8px 12px; border-radius: 5px; display: flex; align-items: center; gap: 15px; box-shadow: 0 1px 0 rgba(9, 30, 66, 0.1); } .deleted-card-title { font-size: 0.9rem; color: var(--text-color-medium); text-decoration: line-through; } .restore-btn { background: none; border: none; color: #0079bf; cursor: pointer; font-weight: 600; font-size: 0.8rem; } .restore-btn:hover { text-decoration: underline; } .archived-column .kanban-card { opacity: 0.6; } /* ================= Modal for Adding Tasks ================= */ .modal-content { background: #ffffff; padding: 25px 30px; border-radius: 12px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); width: 90%; max-width: 450px; animation: slideIn 0.3s ease-out; } /* Styles for due date status */ .card-due.overdue { color: var(--priority-high); /* Red */ font-weight: 600; } .card-due.due-today { color: var(--priority-medium); /* Orange */ font-weight: 600; } /* Ensure date input has a pointer cursor */ #addTaskForm input[type="date"] { cursor: pointer; } @keyframes slideIn { from { transform: translateY(-30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }