/* ================================================= */ /* 1. GLOBAL & UTILITY STYLES */ /* ================================================= */ /* --- Font Import --- */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap'); /* --- Body Base & Page-Specific Styling --- */ /* We use classes on the tag to apply different base styles per page */ body { font-family: 'Inter', sans-serif; margin: 0; -webkit-font-smoothing: antialiased; /* Makes text look sharper */ } /* For the login page, we want to center the content vertically and horizontally */ .body-login { background-color: #f0f2f5; display: flex; justify-content: center; align-items: center; height: 100vh; } /* For the dashboard, we want a normal document flow */ .body-dashboard { background-color: #f0f2f5; color: #333; display: block; height: auto; } /* --- Generic Headings (use sparingly) --- */ h2 { font-size: 1.75rem; font-weight: 700; color: #333; text-align: center; margin-bottom: 1.5rem; } /* --- Utility Button Styles --- */ /* A base class for all buttons */ .btn { display: inline-block; padding: 12px 24px; border: none; border-radius: 6px; font-size: 1rem; font-weight: 500; text-align: center; cursor: pointer; text-decoration: none; transition: all 0.2s ease-in-out; } /* Modifier for primary action buttons (blue) */ .btn-primary { background-color: #007bff; color: white; } .btn-primary:hover { background-color: #0056b3; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2); } /* Modifier for destructive/logout buttons (red) */ .btn-logout { background-color: #dc3545; margin-left: 9px; color: white; padding: 8px 16px; /* Slightly smaller */ } .btn-logout:hover { background-color: #c82333; } /* ================================================= */ /* 2. LOGIN PAGE STYLES */ /* ================================================= */ .login-container { background: #fff; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); width: 350px; } .login-container h2 { text-align: center; margin-bottom: 1.5rem; } .login-container .btn { width: 100%; /* Make login button full-width */ } .form-group { margin-bottom: 1rem; } .form-group label { display: block; margin-bottom: 0.5rem; color: #555; } .form-group input { width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; } .form-group-inline { display: flex; align-items: center; margin-bottom: 1.5rem; } .form-group-inline label { margin-bottom: 0; margin-left: 0.5rem; font-size: 0.9em; color: #666; cursor: pointer; } .form-group-inline input { width: auto; } .error-message { color: #d93025; text-align: center; margin-top: 1rem; min-height: 1.2em; } /* ================================================= */ /* 3. DASHBOARD STYLES */ /* ================================================= */ /* --- Header --- */ .main-header { background-color: #2c2f33; color: #ffffff; padding: 0 2rem; box-shadow: 0 2px 4px rgba(0,0,0,0.1); position: sticky; top: 0; z-index: 1000; } .header-content { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; height: 60px; } .header-title { font-size: 1.3rem; font-weight: 700; width: 240px; } .user-info { display: flex; align-items: center; color: #b9bbbe; } .user-name-display { font-weight: 500; color: #ffffff; margin: 0 0.5rem 0 0.25rem; } /* --- Main Content & Layout --- */ .main-container { max-width: 1200px; margin: 2rem auto; padding: 0 2rem; } .controls-container { margin-bottom: 2rem; text-align: center; } .tasks-layout { display: flex; flex-direction: column; gap: 3rem; } .task-list h2 { font-size: 1.75rem; font-weight: 700; text-align: center; margin-bottom: 1.5rem; } /* --- Task Components --- */ .tasks-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } .empty-state { color: #6c757d; grid-column: 1 / -1; text-align: center; padding: 2rem 0; } .task-card { background: #fff; border-radius: 8px; padding: 1.5rem; box-shadow: 0 4px 6px rgba(0,0,0,0.05); border-left: 5px solid; /* For priority color coding */ cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; } .task-card:hover { transform: translateY(-4px); box-shadow: 0 8px 12px rgba(0,0,0,0.08); } .task-card h3 { margin-top: 0; } .task-card p { color: #6c757d; font-size: 0.9em; } .task-footer { margin-top: 1rem; border-top: 1px solid #eee; padding-top: 0.5rem; font-size: 0.8em; font-weight: 500; } /* Priority Border Colors on Task Cards */ .task-card.priority-normal { border-color: #007bff; } .task-card.priority-high { border-color: #ffc107; } .task-card.priority-urgent { border-color: #dc3545; } /* ================================================= */ /* 4. MODAL STYLES */ /* ================================================= */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 2000; /* Sit on top of everything */ left: 0; top: 0; width: 100%; height: 100%; overflow: auto; /* Enable scroll if needed */ background-color: rgba(0,0,0,0.5); /* Black w/ opacity */ } .modal-content { background-color: #fefefe; margin: 5% auto; /* 5% from the top and centered */ border-radius: 8px; width: 80%; max-width: 600px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); animation: slide-down 0.3s ease-out; } @keyframes slide-down { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .modal-header { padding: 1rem 1.5rem; border-bottom: 1px solid #dee2e6; display: flex; justify-content: space-between; align-items: center; } .modal-header h2 { margin: 0; font-size: 1.25rem; } .close-button { color: #aaa; font-size: 28px; font-weight: bold; } .close-button:hover, .close-button:focus { color: black; text-decoration: none; cursor: pointer; } .modal-body { padding: 1.5rem; } .modal-body textarea { width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; font-family: 'Inter', sans-serif; resize: vertical; } .modal-body select { width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; background-color: white; } hr { border: none; border-top: 1px solid #eee; margin: 1.5rem 0; } .modal-footer { padding: 1rem 1.5rem; border-top: 1px solid #dee2e6; display: flex; justify-content: flex-end; /* Align buttons to the right */ gap: 10px; /* Space between buttons */ background-color: #f8f9fa; } .modal-footer .btn { width: auto; /* Override full-width button styles if they exist */ } /* For the workflow list in the modal */ #detailWorkflowList div { padding: 5px 0; border-bottom: 1px solid #f0f0f0; } #detailWorkflowList div:last-child { border-bottom: none; } /* Secondary button style for "Add Step" */ .btn-secondary { background-color: #6c757d; color: white; } .btn-secondary:hover { background-color: #5a6268; } #addWorkflowStep { margin-top: 0.5rem; } .workflow-step { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem; border: 1px solid #e9ecef; border-radius: 6px; background-color: #f8f9fa; margin-bottom: 1rem; } .workflow-step-top-row { display: flex; align-items: center; gap: 10px; } .workflow-step select { flex-grow: 1; /* Makes the select box take up available space */ } .btn-remove-step { background-color: #f8f9fa; border: 1px solid #dee2e6; color: #dc3545; /* Red color for the '×' */ font-weight: bold; font-size: 1.2rem; /* Make the '×' a bit bigger */ line-height: 1; /* Helps with vertical centering */ /* Make it a circle */ border-radius: 50%; width: 32px; height: 32px; /* Remove default button padding and add cursor */ padding: 0; cursor: pointer; transition: background-color 0.2s, color 0.2s; } .workflow-step label { font-weight: 500; color: #555; white-space: nowrap; } .btn-remove-step:hover { background-color: #dc3545; /* Red background on hover */ color: white; /* White '×' on hover */ } .workflow-user-select { flex-grow: 1; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; background-color: white; } .workflow-location-select { padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; background-color: white; } .workflow-step-instruction { width: 100%; padding: 0.5rem; border: 1px solid #ced4da; border-radius: 4px; font-family: 'Inter', sans-serif; font-size: 0.9em; resize: vertical; box-sizing: border-box; } /* ================================================= */ /* 5. TASK DETAIL MODAL STYLES */ /* ================================================= */ .task-details-grid { display: grid; grid-template-columns: auto 1fr; /* Label takes its own width, value takes the rest */ gap: 10px 20px; /* 10px vertical gap, 20px horizontal */ align-items: center; } .detail-label { font-weight: 700; /* Bold label text */ color: #333; } .modal-body h4 { font-size: 1.1rem; color: #333; margin-top: 1.5rem; margin-bottom: 0.5rem; } .modal-body hr { border: none; border-top: 1px solid #e9ecef; /* A light, clean line */ margin: 1.5rem 0; } /* --- Workflow List Styling --- */ .step-instruction-display { font-size: 0.9em; color: #495057; background-color: #f8f9fa; border-left: 3px solid #ced4da; padding: 0.5rem 0.75rem; margin-top: 0.5rem; white-space: pre-wrap; /* Respects line breaks */ } .workflow-step-item { flex-direction: column; align-items: stretch; } .step-info-container { width: 100%; } .step-info-main { display: flex; justify-content: space-between; align-items: center; } .workflow-step-item:last-child { border-bottom: none; } .step-info { color: #555; } .step-status { font-weight: 500; padding: 4px 10px; border-radius: 15px; font-size: 0.8em; color: #fff; } /* Status Badge Colors */ .status-active { background-color: #007bff; } .status-complete { background-color: #28a745; } .status-pending { background-color: #6c757d; } .priority-badge { font-weight: 500; padding: 4px 10px; border-radius: 15px; font-size: 0.9em; color: white; } /* Re-using priority colors from task cards */ .priority-badge.priority-normal { background-color: #007bff; } .priority-badge.priority-high { background-color: #ffc107; color: #333; } .priority-badge.priority-urgent { background-color: #dc3545; } /* ================================================= */ /* 6. COMMENT STYLES (in Modal) */ /* ================================================= */ .comment-list { max-height: 300px; overflow-y: auto; margin-bottom: 1rem; border: 1px solid #e9ecef; border-radius: 4px; padding: 0.5rem; } .comment-item { padding: 0.75rem; border-bottom: 1px solid #f1f3f5; } .comment-item:last-child { border-bottom: none; } .comment-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem; } .comment-author { font-weight: 700; color: #333; } .comment-timestamp { font-size: 0.8em; color: #868e96; } .comment-body { color: #495057; white-space: pre-wrap; /* Preserves line breaks in comments */ word-wrap: break-word; } .comment-form { display: flex; flex-direction: column; gap: 0.5rem; } .comment-form textarea { width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; font-family: 'Inter', sans-serif; resize: vertical; min-height: 80px; } .comment-form button { align-self: flex-end; /* Pushes button to the right */ width: auto; } /* ================================================= */ /* 7. TASK CARD ACTIONS */ /* ================================================= */ .card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; } .card-actions-wrapper { display: flex; align-items: center; gap: 10px; } .category-tag { font-size: 0.75em; font-weight: 600; padding: 3px 8px; border-radius: 12px; color: #fff; text-transform: uppercase; } .category-particulier { background-color: #6f42c1; } /* Purple */ .category-entreprise { background-color: #17a2b8; } /* Teal / Cyan */ .category-marche { background-color: #6c757d; } /* Grey */ .card-header h3 { margin-top: 0; margin-bottom: 0.5rem; } .card-actions { display: flex; gap: 5px; } .icon-btn { background: none; border: none; cursor: pointer; padding: 5px; border-radius: 50%; font-size: 1.1rem; line-height: 1; transition: background-color 0.2s; } .icon-btn:hover { background-color: #e9ecef; } .task-card.completed { opacity: 0.7; background-color: #f8f9fa; /* A slightly off-white background */ } .task-card.completed:hover { opacity: 1; /* Bring it to full opacity on hover */ } /* ================================================= */ /* 8. ATTACHMENTS STYLES */ /* ================================================= */ .attachments-list { margin-bottom: 1rem; } .attachment-item { display: flex; align-items: center; background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; padding: 0.5rem 1rem; margin-bottom: 0.5rem; } .attachment-item a { color: #007bff; text-decoration: none; font-weight: 500; margin-left: 0.5rem; } .attachment-item a:hover { text-decoration: underline; } .attachment-form { display: flex; gap: 10px; align-items: center; } .attachment-form input[type="file"] { flex-grow: 1; } .attachment-form button { width: auto; flex-shrink: 0; } .attachment-item { display: flex; align-items: center; background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; padding: 0.5rem 1rem; margin-bottom: 0.5rem; } .attachment-link { flex-grow: 1; /* This is the key change: it pushes the delete button to the end */ color: #007bff; text-decoration: none; font-weight: 500; margin-left: 0.5rem; } .attachment-link:hover { text-decoration: underline; } .attachment-delete-btn { /* We can reuse our icon-btn style from the task cards */ /* No new styles needed if .icon-btn is already defined! */ /* But if you want to make it smaller: */ font-size: 0.9rem; padding: 4px; } /* ================================================= */ /* 9. NOTIFICATION WIDGET */ /* ================================================= */ .notification-widget { position: relative; /* This is the anchor for the dropdown */ margin-left: 1rem; } #notificationBell { font-size: 1.5rem; /* Makes the bell icon bigger */ position: relative; color: white; } .notification-badge { position: absolute; top: -5px; right: -5px; background-color: #dc3545; /* Red */ color: white; border-radius: 50%; width: 20px; height: 20px; font-size: 12px; font-weight: bold; display: flex; justify-content: center; align-items: center; border: 2px solid #2c2f33; /* Matches header background */ } .notification-panel { position: absolute; top: 120%; /* Position below the bell */ right: 0; width: 350px; background-color: #fff; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); z-index: 1001; color: #333; overflow: hidden; /* Keeps child elements inside rounded corners */ } .notification-panel-header { font-weight: bold; padding: 1rem; background-color: #f8f9fa; border-bottom: 1px solid #dee2e6; } #notificationList { max-height: 400px; overflow-y: auto; } .notification-item { padding: 1rem; border-bottom: 1px solid #f1f3f5; cursor: pointer; transition: background-color 0.2s; } .notification-item:last-child { border-bottom: none; } .notification-item:hover { background-color: #f8f9fa; } .notification-item.unread { background-color: #e9f7ff; /* A light blue for unread items */ } .notification-item .message { font-size: 0.9em; } .notification-item .timestamp { font-size: 0.75em; color: #868e96; margin-top: 0.5rem; } /* ================================================= */ /* 10. FILTER CONTROLS */ /* ================================================= */ .filter-controls { display: flex; gap: 1rem; margin-bottom: 2rem; padding: 1rem; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .filter-controls input[type="search"], .filter-controls select { width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem; } /* ================================================= */ /* 11. REMINDER PILLBOX STYLES */ /* ================================================= */ .pills-container { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 0.5rem; min-height: 38px; /* Give it some height even when empty */ } .reminder-pill { display: flex; align-items: center; background-color: #e9ecef; color: #495057; border-radius: 20px; padding: 2px 6px; font-size: 0.84rem; font-weight: 500; } .remove-pill { background: none; border: none; color: #6c757d; font-size: 0.9rem; font-weight: bold; line-height: 1; margin-left: 0.4rem; cursor: pointer; padding: 0; } .remove-pill:hover { color: #343a40; } .reminder-select { width: 100%; padding: 0.65rem; border: 1px solid #ddd; border-radius: 4px; font-size: 0.84rem; background-color: white; } /* ================================================= */ /* 12. DASHBOARD LAYOUT & CALENDAR */ /* ================================================= */ .dashboard-layout { display: flex; gap: 1rem; } .main-content { flex-grow: 1; width: 45%; } .sidebar-content { width: 25%; flex-shrink: 0; /* Prevents the sidebar from shrinking */ position: sticky; /* Makes the calendar stay in view as you scroll */ top: 80px; /* Position it below the main header */ align-self: flex-start; /* Aligns to the top of the flex container */ } #calendar { background-color: #fff; padding: 0.6rem; border-radius: 5px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); } /* --- FullCalendar Style Overrides --- */ :root { --fc-border-color: #dee2e6; --fc-event-bg-color: #007bff; --fc-event-border-color: #007bff; --fc-event-text-color: #fff; --fc-today-bg-color: rgba(0, 123, 255, 0.1); } .fc-event { cursor: pointer; } .fc-event-title { font-size: 1.1em !important; /* Adjust this value as needed */ font-weight: 500 !important; } .fc-event-time { font-size: 0.9em !important; } .fc-daygrid-event { padding: 2px 4px !important; } .fc .fc-daygrid-day-number { font-size: 1em; padding: 2px; } .fc .fc-col-header-cell-cushion { font-size: 0.8em; padding: 4px 2px; } #calendar { font-size: 0.8em; } /* ================================================= */ /* 13. RESPONSIVE DESIGN (MOBILE) */ /* ================================================= */ /* This media query applies styles ONLY when the screen width is 992px or less (tablets and phones) */ @media (max-width: 992px) { /* --- 1. Switch the main layout to a single column --- */ .dashboard-layout { flex-direction: column; /* Stack items vertically instead of side-by-side */ } .main-content, .sidebar-content { width: 100%; /* Make both columns take up the full width */ } .sidebar-content { position: static; /* Disable the sticky positioning on mobile */ margin-top: 2rem; } /* --- 2. Adjust header padding for smaller screens --- */ .main-header { padding: 0 1rem; } .main-container { padding: 1rem; } /* --- 3. Make filter controls stack vertically --- */ .filter-controls { flex-direction: column; } /* --- 4. Improve modal appearance on small screens --- */ .modal-content { width: 90%; /* Make modals take up more of the screen width */ margin: 5% auto; /* Reduce top margin */ } /* --- 5. Optimize the calendar for mobile --- */ #calendar { font-size: 12px; /* Use a smaller base font size for the calendar on mobile */ } .fc .fc-toolbar.fc-header-toolbar { flex-direction: column; /* Stack the calendar's header controls */ gap: 10px; margin-bottom: 1.5rem !important; } } /* ================================================= */ /* 14. SIDEBAR NAVIGATION MENU */ /* ================================================= */ .sidebar-menu { position: fixed; top: 0; left: -250px; /* Start hidden off-screen */ width: 250px; height: 100%; background-color: #2c2f33; color: #fff; padding-top: 1rem; /* Add some space at the top */ box-sizing: border-box; /* Ensures padding is included in the width */ transition: left 0.3s ease-in-out; z-index: 3000; /* Highest z-index to appear over everything */ } .sidebar-menu.open { left: 0; /* Slide in */ } .sidebar-brand { font-size: 1.5rem; font-weight: bold; color: #fff; text-decoration: none; display: block; margin-bottom: 2rem; padding: 0 1rem; text-align: center; } .sidebar-nav { padding: 0 1rem; } .sidebar-nav .nav-item { display: block; color: #adb5bd; text-decoration: none; padding: 1rem; border-radius: 6px; margin-bottom: 0.5rem; transition: background-color 0.2s, color 0.2s; } .sidebar-nav .nav-item:hover, .sidebar-nav .nav-item.active { background-color: #495057; color: #fff; } /* --- This is the corrected style for the main content area --- */ .main-content-area { /* No margin-left needed here */ transition: margin-left 0.3s ease-in-out; background-color: #f0f2f5; /* Match your body background */ min-height: 100vh; } .main-content-area.sidebar-open { margin-left: 250px; /* Push content over ONLY when sidebar is open */ } /* --- Styles for the Header within the new layout --- */ .main-header { position: sticky; /* Sticky still works! */ top: 0; z-index: 1000; /* other header styles are fine */ } .header-left { display: flex; align-items: center; gap: 1rem; } #menuToggle { font-size: 1.5rem; color: white; background: none; border: none; padding: 0 10px; cursor: pointer; } /* Styles for the sidebar dropdown menu */ .nav-item-dropdown .submenu { display: none; /* Hidden by default */ padding-left: 2rem; background-color: #212529; } .nav-item-dropdown.open .submenu { display: block; /* Show on 'open' */ } .nav-item-dropdown.open #clientsDropdownToggle { background-color: #495057; color: #fff; } #clientsDropdownToggle { display: flex; justify-content: space-between; align-items: center; } .submenu-item { display: block; color: #adb5bd; text-decoration: none; padding: 0.75rem 1rem; transition: background-color 0.2s; } .submenu-item:hover { background-color: #343a40; } /* ================================================= */ /* 16. CLIENTS VIEW TABLE */ /* ================================================= */ .table-container { background-color: #fff; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); overflow-x: auto; /* Allows horizontal scrolling on small screens */ } #clientTasksTable { width: 100%; border-collapse: collapse; min-width: 900px; /* Prevents the table from squishing too much */ } #clientTasksTable th, #clientTasksTable td { padding: 1rem 1.25rem; text-align: left; border-bottom: 1px solid #dee2e6; vertical-align: middle; } #clientTasksTable th { background-color: #f8f9fa; font-weight: 600; font-size: 0.9em; text-transform: uppercase; letter-spacing: 0.5px; color: #495057; } #clientTasksTable tbody tr { transition: background-color 0.2s; cursor: pointer; } #clientTasksTable tbody tr:hover { background-color: #f1f3f5; } /* Styles for checklist inside the table */ .table-checklist { list-style: none; padding: 0; margin: 0; } .table-checklist-item { padding: 5px 0; } .table-checklist-item label { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; } .table-checklist-item input[type="checkbox"] { width: 18px; height: 18px; } .table-checklist-item.completed span { text-decoration: line-through; color: #868e96; } /* Improve progress bar display in the table */ #clientTasksTable .progress-bar-container { display: inline-block; width: calc(100% - 40px); vertical-align: middle; } #clientTasksTable .progress-bar-container + span { display: inline-block; width: 35px; text-align: right; font-weight: 500; } #clientTasksTable th[data-sort-column] { cursor: pointer; position: relative; padding-right: 2rem; /* Make space for the arrow */ } #clientTasksTable th[data-sort-column]:hover { background-color: #e9ecef; } .sort-indicator { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: #adb5bd; /* Default arrow color */ } /* Styles for when a column is actively sorted */ #clientTasksTable th.sorted .sort-indicator { color: #343a40; /* Active arrow color */ } /* The actual arrow characters */ #clientTasksTable th.sorted.asc .sort-indicator::after { content: ' ▲'; } #clientTasksTable th.sorted.desc .sort-indicator::after { content: ' ▼'; } .progress-info { display: flex; flex-direction: column; gap: 0.05rem; font-size: 0.9em; } .progress-percentage { font-weight: bold; color: #fd7e14; /* Orange */ } .progress-percentage.completed { color: #28a745; /* Green */ } #checklistBuilderContainer { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; } .checklist-builder-item { display: flex; align-items: center; gap: 10px; } .checklist-builder-item input[type="text"] { flex-grow: 1; padding: 0.5rem; border: 1px solid #ced4da; border-radius: 4px; } .placeholder { color: #adb5bd; font-style: italic; } .editable-text, .editable-textarea, .editable-date { cursor: pointer; padding: 5px; border-radius: 4px; transition: background-color 0.2s; min-height: 24px; /* Ensure it has a clickable area even when empty */ } .editable-text:hover, .editable-textarea:hover, .editable-date:hover { background-color: #e9ecef; } .inline-edit-input { width: 100%; box-sizing: border-box; font-family: 'Inter', sans-serif; font-size: 1em; padding: 4px; border: 1px solid #007bff; border-radius: 4px; } .date-fields { margin-top: 1rem; font-size: 0.9em; } .icon-btn { background: none; border: none; cursor: pointer; padding: 5px; border-radius: 50%; /* NEW / IMPROVED STYLES */ display: inline-flex; /* Helps center the icon */ align-items: center; justify-content: center; width: 50%; /* Give it a fixed size */ height: 50%; color: #6c757d; /* Set a base color for the icon */ font-size: 1.2rem; /* Controls the size of the icon itself */ line-height: 1; transition: background-color 0.2s, color 0.2s; } .icon-btn:hover { background-color: #e9ecef; color: #11ca36; /* Change icon color on hover */ } /* We can also make the details button stand out a little more */ .details-btn { background: none; border: none; cursor: pointer; padding: 5px; border-radius: 50%; font-size: 3.5rem; line-height: 1; transition: background-color 0.2s, color 0.2s; } .details-btn i { color: #aaa7a8; /* Make the 'i' icon blue by default */ } .details-btn:hover i { color: #575759; /* Darker blue on hover */ } .placeholder { color: #adb5bd; font-style: italic; } .editable-text, .editable-textarea, .editable-date { cursor: pointer; padding: 5px; border-radius: 4px; transition: background-color 0.2s; min-height: 24px; display: block; /* Make the whole area clickable */ } .editable-text:hover, .editable-textarea:hover, .editable-date:hover { background-color: #e9ecef; } .inline-edit-input { width: 100%; box-sizing: border-box; font-family: 'Inter', sans-serif; font-size: 1em; padding: 4px; border: 1px solid #007bff; border-radius: 4px; } .date-fields { margin-top: 1rem; font-size: 0.9em; display: flex; flex-direction: column; gap: 0.5rem; } .history-log { list-style: none; padding: 0; margin: 0; font-size: 0.85em; color: #6c757d; } .history-log li { padding: 4px 0; border-bottom: 1px solid #f1f3f5; } .history-log li:last-child { border-bottom: none; } .history-log strong { color: #343a40; } .history-log small { display: block; color: #adb5bd; } .history-btn { /* Reuse the .icon-btn style */ background: none; border: none; cursor: pointer; padding: 5px; border-radius: 50%; font-size: 3.5rem; color: #6c757d; transition: background-color 0.2s, color 0.2s; margin-top: 15px; } .history-btn:hover { background-color: #e9ecef; color: #343a40; } .error-page { text-align: center; padding: 4rem 2rem; } .task-list h2 { display: flex; /* Use flexbox for easy alignment */ justify-content: center; align-items: center; gap: 0.75rem; /* Space between the icon and the text */ } .task-list h2 i { font-size: 0.9em; /* Make the icon slightly smaller than the text */ position: relative; top: -1px; /* Small vertical alignment tweak */ } /* Optional: Add some color to the icons */ .task-list h2 .fa-play-circle { color: #007bff; /* Blue */ } .task-list h2 .fa-hourglass-half { color: #ffc107; /* Yellow/Orange */ } .task-list h2 .fa-sitemap { color: #6f42c1; /* Purple */ } .task-list h2 .fa-check-circle { color: #28a745; /* Green */ } /* ================================================= */ /* 17. LANGUAGE SWITCHER */ /* ================================================= */ .language-switcher { position: absolute; /* Position it relative to the sidebar */ bottom: 1rem; /* Pin it to the bottom */ left: 50%; /* Center it horizontally */ transform: translateX(-50%); display: flex; background-color: #495057; border-radius: 15px; padding: 3px; } .lang-btn { background: none; border: none; color: #adb5bd; font-weight: bold; font-size: 0.8em; padding: 5px 10px; border-radius: 12px; cursor: pointer; transition: background-color 0.2s, color 0.2s; } .lang-btn.active { background-color: #f8f9fa; color: #343a40; }