/* Global styles */ body { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; background-color: #f9f9f9; color: #333; } a { color: inherit; text-decoration: none; } .wrapper { display: flex; min-height: 100vh; } /* Sidebar */ .sidebar { /* The sidebar occupies the full viewport height and is a vertical flex container. The width and collapsed state are controlled via the `sidebar-collapsed` class on the element (see ui-nav.js). */ background-color: #030A18; color: #fff; display: flex; flex-direction: column; height: 100vh; width: 220px; /* Disable the width transition on the sidebar to prevent flicker when navigating between pages. The collapsed state is still applied immediately via a class on the element. */ transition: none; /* Prevent the list-style bullets from showing on sidebar lists */ /* Apply globally within sidebar to all nested lists */ list-style: none; } /* Reset list styles in the sidebar to remove bullets and padding */ .sidebar ul, .sidebar li { list-style: none; margin: 0; padding: 0; } .sidebar-header { padding: 1rem; font-weight: bold; font-size: 1.4rem; } .logo { color: #fff; text-decoration: none; } .menu ul { list-style: none; margin: 0; padding: 0; } .menu li { border-left: 4px solid transparent; } .menu li.active { background-color: #16264d; } .menu li a { display: block; padding: 0.75rem 1rem; color: #fff; font-size: 0.95rem; transition: background-color 0.2s; } .menu li a:hover { background-color: #1f3971; } .main { flex: 1; display: flex; flex-direction: column; min-width: 0; /* Offset the fixed sidebar width so content is not hidden */ margin-left: 220px; } /* Adjust main margin when sidebar is collapsed */ html.sidebar-collapsed .main { margin-left: 60px; } /* Top bar */ .topbar { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 1rem; background-color: #ffffff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); z-index: 1; } /* Center the page title or logo in the topbar */ .topbar-title { flex: 1; text-align: center; font-weight: bold; font-size: 1.1rem; display: flex; justify-content: center; align-items: center; } .topbar-title img { height: 24px; } /* Style year switcher */ .topbar-right .year-switcher { margin-right: 0.5rem; padding: 0.25rem 0.5rem; } .year-form select { padding: 0.25rem 0.5rem; font-size: 0.9rem; } .logout { color: #666; font-size: 0.9rem; } .content { flex: 1; padding: 1rem; overflow-y: auto; } .page-title { margin-top: 0; margin-bottom: 1rem; font-size: 1.6rem; font-weight: bold; } /* Board layout (Overview) */ .board { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 1rem; } .board-column { background-color: #f5f5f5; border-radius: 6px; flex: 1; min-width: 260px; display: flex; flex-direction: column; } .column-header { padding: 0.6rem; font-weight: bold; text-align: center; border-bottom: 4px solid; border-top-left-radius: 6px; border-top-right-radius: 6px; } .column-cards { padding: 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; } .card { background-color: #ffffff; border-radius: 4px; padding: 0.5rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); font-size: 0.9rem; } .card.empty { background-color: #eaeaea; color: #888; font-style: italic; text-align: center; } .card-title { font-weight: bold; margin-bottom: 0.25rem; } .card-desc { font-size: 0.85rem; color: #555; } /* ===== Car wash / Umývarka styles ===== */ .wash-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; } /* Group label and field vertically */ .wash-controls .control-group { display: flex; flex-direction: column; font-size: 0.85rem; } .wash-controls label { font-size: 0.85rem; display: flex; flex-direction: column; } .wash-controls input, .wash-controls select { padding: 0.25rem 0.5rem; font-size: 0.85rem; } .wash-controls button { padding: 0.4rem 0.8rem; background-color: #2E8BE4; color: white; border: none; border-radius: 4px; cursor: pointer; } .wash-controls button:hover { background-color: #1f5fa6; } .wash-calendar { overflow-x: auto; } /* ===== Inventory (Sklad) styles ===== */ .inventory-header { margin-bottom: 0.5rem; font-size: 0.85rem; } .inventory-header .badge { background-color: #e4eefc; color: #2E8BE4; padding: 0.3rem 0.6rem; border-radius: 4px; font-size: 0.8rem; } .inventory-filter { margin-bottom: 1rem; } .inventory-filter input[type="text"] { padding: 0.3rem 0.6rem; font-size: 0.85rem; border: 1px solid #ccc; border-radius: 4px; min-width: 220px; } .inventory-filter button { padding: 0.4rem 0.8rem; margin-left: 0.5rem; background-color: #2E8BE4; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 0.85rem; } .inventory-filter button:hover { background-color: #1f5fa6; } .inventory-import { margin-bottom: 1rem; font-size: 0.85rem; } .inventory-import input[type="file"] { font-size: 0.85rem; margin-right: 0.5rem; } .inventory-import button { padding: 0.4rem 0.8rem; background-color: #2E8BE4; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 0.85rem; } .inventory-import button:hover { background-color: #1f5fa6; } .inventory-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .inventory-table th, .inventory-table td { padding: 0.5rem; border-bottom: 1px solid #ddd; text-align: left; } .inventory-table th a { color: inherit; text-decoration: none; } .inventory-table th a:hover { text-decoration: underline; } .inventory-table tbody tr:nth-child(even) { background-color: #f9f9f9; } .inventory-table tbody tr:hover { background-color: #eef3fb; } .inventory-table .request-btn { background-color: #2E8BE4; color: #fff; border: none; border-radius: 4px; padding: 0.3rem 0.6rem; cursor: pointer; font-size: 0.8rem; } .inventory-table .request-btn:hover { background-color: #1f5fa6; } .row-count { margin-top: 0.5rem; font-size: 0.8rem; color: #666; } .wash-table { border-collapse: collapse; width: 100%; } .wash-table th, .wash-table td { border: 1px solid #ddd; padding: 0.4rem; text-align: center; vertical-align: top; font-size: 0.8rem; } .wash-table th { background-color: #f0f0f0; position: sticky; top: 0; z-index: 1; } .wash-table td:first-child { background-color: #f5f5f5; font-weight: bold; position: sticky; left: 0; z-index: 1; } .wash-slot { min-height: 3rem; position: relative; } .wash-resv { background-color: #ececec; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 2px; padding: 0.2rem; cursor: pointer; font-size: 0.75rem; line-height: 1.1; } .wash-resv.status-pending { border-style: dashed; border-color: #e7a618; background-color: #fff8e1; } .wash-resv.status-approved { border-color: #2ca53f; background-color: #e6f8e8; } .wash-resv.status-rejected { border-color: #c0392b; background-color: #fdecea; } .wash-resv.badge-asap::after { content: 'ASAP'; display: inline-block; margin-left: 4px; padding: 1px 3px; background-color: #e4572e; color: #fff; font-size: 0.6rem; border-radius: 3px; } /* ===== Notifications styles ===== */ .notif-container h2 { margin-top: 1rem; margin-bottom: 0.5rem; font-size: 1rem; } .notif { padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 0.5rem; background-color: #f5f5f5; cursor: pointer; font-size: 0.85rem; } .notif.unread { background-color: #fff3cd; border-color: #ffeeba; } .notif-table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; } .notif-table th, .notif-table td { border: 1px solid #ddd; padding: 0.4rem; font-size: 0.8rem; } .notif-table th { background-color: #f0f0f0; } .notif-date { float: right; font-size: 0.7rem; color: #666; } .notif-container + button { margin-top: 0.5rem; padding: 0.4rem 0.8rem; background-color: #2E8BE4; color: #fff; border: none; border-radius: 4px; cursor: pointer; } .notif-container + button:hover { background-color: #1f5fa6; } /* === Marketing overview styles === */ .marketing-board { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 1rem; } .marketing-column { background-color: #f5f5f5; border-radius: 6px; flex: 1; min-width: 260px; display: flex; flex-direction: column; } .marketing-column .column-header { padding: 0.6rem; font-weight: bold; text-align: center; border-bottom: 4px solid #2E8BE4; border-top-left-radius: 6px; border-top-right-radius: 6px; } .marketing-column .column-cards { padding: 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; flex-grow: 1; } .marketing-column .card { background-color: #ffffff; border-radius: 4px; padding: 0.5rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); font-size: 0.9rem; } .marketing-column .card.empty { background-color: #eaeaea; color: #888; font-style: italic; text-align: center; } .marketing-column .add-item-btn { padding: 0.5rem; text-align: center; cursor: pointer; color: #2E8BE4; border-top: 1px dashed #ccc; font-size: 0.85rem; } .marketing-column .add-item-btn:hover { background-color: #e9eefb; } .fab { position: fixed; bottom: 1.5rem; right: 1.5rem; width: 48px; height: 48px; border-radius: 50%; background-color: #2E8BE4; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 2rem; cursor: pointer; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); z-index: 50; } .fab:hover { background-color: #1f5fa6; } .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; z-index: 2000; } .modal-content { background: #fff; padding: 1rem 1.5rem; border-radius: 6px; width: 90%; max-width: 400px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .modal-content h2 { margin-top: 0; } .modal-content .form-group { margin-bottom: 0.6rem; display: flex; flex-direction: column; } .modal-content input, .modal-content select, .modal-content textarea { padding: 0.3rem; font-size: 0.9rem; border: 1px solid #ccc; border-radius: 4px; } .modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.8rem; } .modal-actions button { padding: 0.4rem 0.8rem; border: none; border-radius: 4px; cursor: pointer; } .btn-save { background: #2E8BE4; color: #fff; } .btn-save:hover { background: #1f5fa6; } .btn-cancel { background: #ccc; color: #333; } .btn-cancel:hover { background: #bbb; } /* === Navigation and Sidebar updates === */ /* Transition for expanding/collapsing */ .sidebar { /* Disable width transition to avoid flicker when toggling the collapsed/expanded state across page navigations. */ transition: none; } /* Collapsed state applied via html.sidebar-collapsed. When the root element has the sidebar-collapsed class the sidebar shrinks and hides labels, submenus and footer details. See ui-nav.js for how this class is toggled. */ html.sidebar-collapsed .sidebar { width: 60px; } html.sidebar-collapsed .brand-full { display: none; } html.sidebar-collapsed .brand-compact { display: block; } html.sidebar-collapsed .sidebar .menu-item .label, html.sidebar-collapsed .sidebar .nav-group-children, html.sidebar-collapsed .sidebar .sidebar-footer .user-info, html.sidebar-collapsed .sidebar .sidebar-footer .logout-form { display: none; } /* Hide caret icons when sidebar is collapsed */ html.sidebar-collapsed .nav-group .caret { display: none; } .logo { display: flex; align-items: center; } .logo-icon { width: 28px; height: 28px; margin-right: 0.5rem; filter: invert(1); } .logo-text { font-size: 1.3rem; font-weight: bold; } .menu-item { display: flex; align-items: center; padding: 0.65rem 1rem; color: #fff; font-size: 0.9rem; transition: background-color 0.2s; } .menu-icon { width: 20px; height: 20px; margin-right: 0.75rem; flex-shrink: 0; filter: invert(1); } /* Do not invert icons in the topbar quick link. The quick link uses the `.menu-icon` class for its home icon, but on a light background the invert filter turns the icon white. Remove the filter so the icon renders in its original dark colour. */ .quick-link .menu-icon { filter: none; } .menu-item:hover { background-color: rgba(255,255,255,0.05); } /* Active menu styling: highlight with brand colour and bold text; remove blue boxes */ .menu-item.active { background-color: transparent; color: #68cce4; font-weight: 700; } .menu-item.active .menu-icon { /* Tint icons to match the active colour using filter approximations */ filter: invert(57%) sepia(19%) saturate(742%) hue-rotate(170deg) brightness(92%) contrast(84%); } /* Nav group caret styling handled via JS; here we just position it */ .nav-group .caret { margin-left: auto; font-size: 1rem; font-weight: 600; opacity: 0.8; /* Enlarge the caret to make it easier to click. By giving explicit width and height and using flexbox for centering, the clickable area extends beyond the glyph itself. */ width: 1.5rem; height: 1.5rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; /* Enlarge the caret to make it easier to click. By giving explicit width and height and using flexbox for centering, the clickable area extends beyond the glyph itself. */ width: 1.5rem; height: 1.5rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } /* Indent the marketing subpages under their parent. Adds left padding to nested items so they are visually grouped. */ .nav-group-children .menu-item { padding-left: 1.5rem; } /* Sidebar footer and profile */ .sidebar-footer { padding: 0.8rem; border-top: 1px solid rgba(255, 255, 255, 0.1); } .profile-mini { display: flex; align-items: center; margin-bottom: 0.5rem; } .avatar-placeholder { width: 32px; height: 32px; background-color: #4e5a77; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; margin-right: 0.6rem; } .user-info { font-size: 0.8rem; } .user-name { font-weight: bold; } .user-role { color: #bbb; } .logout-form { margin-top: 0.5rem; } .logout-btn { width: 100%; padding: 0.4rem 0; background-color: #1f3971; border: none; border-radius: 4px; color: #fff; font-size: 0.85rem; cursor: pointer; } .logout-btn:hover { background-color: #2E8BE4; } /* Topbar buttons */ .hamburger { background: none; border: none; cursor: pointer; padding: 0.5rem; display: flex; flex-direction: column; justify-content: space-between; height: 1rem; width: 1.2rem; } .hamburger span { display: block; height: 2px; width: 100%; /* Darker bars for the hamburger icon on mobile and desktop. Using a deep navy colour ties into the sidebar palette and improves contrast on light backgrounds. */ /* Use !important to ensure the bars are consistently dark on mobile and override any conflicting rules that may set them to white. */ background-color: #030A18 !important; } /* Remove the left margin on the main content when the viewport is narrow. On mobile screens the sidebar transforms into an overlay accessed via a hamburger icon; maintaining a fixed margin results in unused whitespace on the left side. */ @media (max-width: 768px) { .main { margin-left: 0 !important; } } .logo-small { color: #333; font-weight: bold; text-decoration: none; font-size: 1.1rem; margin-left: 0.5rem; } .quick-link { margin-left: 1rem; display: flex; align-items: center; padding: 0.3rem; border-radius: 4px; transition: background-color 0.2s; } .quick-link:hover { background-color: #eee; } .topbar-right select { padding: 0.25rem 0.5rem; font-size: 0.9rem; } /* ========================= * Export controls (print/save) * These styles define the appearance of the print icon and save * dropdown in the topbar for marketing pages. They are loaded * globally but only appear when the export controls markup is * rendered in layout.ejs. * ========================= */ .export-controls { display: flex; align-items: center; /* Position export controls immediately next to the year selector. Reduce the left margin so the buttons sit on the same row as the year dropdown even on narrower viewports. */ margin-left: 0.5rem; position: relative; } .icon-btn { background: none; border: none; cursor: pointer; padding: 0.25rem; font-size: 1.1rem; /* Default colour for icons. Ensure buttons use our dark brand colour by default; override any inherited filter/invert on ancestor elements. */ color: #030A18; display: inline-flex; align-items: center; justify-content: center; } .icon-btn:hover { opacity: 0.8; } .icon-btn i { pointer-events: none; } .save-dropdown { position: relative; } .save-menu { display: none; position: absolute; right: 0; top: calc(100% + 0.25rem); background: #ffffff; border: 1px solid #ddd; border-radius: 4px; min-width: 80px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); z-index: 999; overflow: hidden; } .save-menu button { width: 100%; padding: 0.25rem 0.5rem; background: none; border: none; text-align: left; font-size: 0.85rem; cursor: pointer; } .save-menu button:hover { background: #f5f5f5; } /* When the menu is toggled open via JS, show it */ .save-menu.show { display: block; } /* Duplicate button styling for marketing modal */ .btn-duplicate { position: absolute; top: 0.5rem; right: 0.5rem; background: none; border: none; font-size: 1.2rem; cursor: pointer; color: #030A18; z-index: 10; } .btn-duplicate:hover { opacity: 0.8; } /* ------------------------------------------------------------------ * Car wash weekly scheduler styles * * These rules style the week navigation, time/days grid and * reservation cards for the Umývárka page. The grid displays times * along the first column and days (Monday–Friday) across the top * row. Reservation cards are colour coded by their program colour * and status. The container is scrollable on smaller screens. */ .wash-week-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; gap: 0.5rem; flex-wrap: wrap; } .wash-week-nav button { background-color: #2E8BE4; color: #ffffff; border: none; border-radius: 4px; padding: 0.4rem 0.6rem; font-size: 0.85rem; cursor: pointer; } .wash-week-nav button:hover { background-color: #1f5fa6; } .wash-week-nav span { font-weight: bold; font-size: 1rem; } .wash-grid-wrapper { overflow-x: auto; } .wash-grid { width: 100%; border-collapse: collapse; min-width: 600px; } .wash-grid th, .wash-grid td { border: 1px solid #e0e0e0; padding: 0.3rem; vertical-align: top; min-width: 120px; position: relative; } .wash-grid th:first-child { background-color: #f5f5f5; width: 60px; } .wash-grid th.day-header { text-align: center; background-color: #f0f0f0; font-weight: bold; } .wash-grid td.time-cell { background-color: #f5f5f5; font-weight: bold; } .wash-grid td.day-cell { height: 60px; } .wash-reservation-card { display: block; padding: 0.2rem; border-radius: 4px; font-size: 0.75rem; color: #ffffff; margin-bottom: 0.2rem; overflow: hidden; } .wash-reservation-card.schvalene { background-color: #6ec267; } .wash-reservation-card.pending { background-color: #f8c471; color: #333333; } .wash-reservation-card.cancelled { background-color: #e74c3c; } /* Improve interaction on the car wash weekly grid. Highlight each day cell on hover to indicate it can be clicked. We avoid using the :has() pseudo‑class for compatibility; even reserved slots will show the hover colour but click behaviour is disabled via JavaScript. */ .wash-grid td.day-cell { cursor: pointer; } .wash-grid td.day-cell:hover { background-color: #eef5ff; } /* Ensure export icons in the topbar are dark regardless of any filters applied to .menu-icon or other elements. The use of !important breaks through the higher specificity of the invert filters defined elsewhere. */ .topbar-right .icon-btn, .topbar-right .icon-btn i { color: #030A18 !important; } /* Printing: hide sidebar, topbar and other chrome when printing. Only the main content (.content) area should be visible in the printed document. Adjust margins to use the full page width. */ @media print { .sidebar, .topbar, .sidebar-footer, .hamburger, .quick-link, .year-switcher, .export-controls { display: none !important; } .main { margin: 0 !important; width: 100% !important; } .content { padding: 0 !important; } } /* ===== Wash settings admin tables ===== */ .wash-settings .admin-table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; font-size: 0.9rem; } .wash-settings .admin-table th, .wash-settings .admin-table td { border: 1px solid #ddd; padding: 0.4rem 0.5rem; } .wash-settings .admin-table th { background: #f7f7f7; font-weight: 600; text-align: left; } .wash-settings .inline-form { margin-bottom: 1rem; } .wash-settings .inline-form input[type="text"], .wash-settings .inline-form input[type="number"], .wash-settings .inline-form input[type="color"] { padding: 0.3rem 0.4rem; margin-right: 0.3rem; border: 1px solid #ccc; border-radius: 4px; font-size: 0.85rem; } .wash-settings .inline-form button { padding: 0.35rem 0.6rem; margin-right: 0.3rem; background: #2E8BE4; color: #fff; border: none; border-radius: 4px; font-size: 0.85rem; cursor: pointer; } .wash-settings .inline-form button:hover { background: #1e6db2; } /* Pre-expand nav groups when classes are applied on html element. This helps eliminate flicker by ensuring the marketing/settings submenus are visible immediately on page load if persisted in localStorage. */ html.nav-marketing-expanded #marketing-section .nav-group-children { display: block; } html.nav-settings-expanded #settings-section .nav-group-children { display: block; } /* Responsive mobile sidebar */ @media (max-width: 768px) { .wrapper { flex-direction: column; } /* On mobile the sidebar acts as a full‑screen overlay. It is initially hidden off‑screen to the left and slides in when the `open` class is applied. We set width to 100% so the menu covers the entire viewport. */ .sidebar { position: fixed; top: 0; left: -100%; height: 100vh; width: 100%; z-index: 1000; overflow-y: auto; transition: left 0.2s ease; } .sidebar.open { left: 0; } .main { width: 100%; } .topbar { position: sticky; top: 0; z-index: 101; } .topbar-left { flex: 1; display: flex; align-items: center; } .topbar-right { display: flex; align-items: center; } /* Mobile close button inside sidebar */ .mobile-close { display: block; position: absolute; top: 0.6rem; right: 0.8rem; padding: 0.2rem; font-size: 1.6rem; line-height: 1; color: #fff; background: none; border: none; cursor: pointer; } } /* Hide mobile close button on larger screens */ @media (min-width: 769px) { .mobile-close { display: none; } } /* ===== Handover room styles ===== */ .handover-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; } .handover-controls .control-group { display: flex; flex-direction: column; font-size: 0.85rem; } /* ===================================================================== UI/UX Fixes and Sidebar Improvements These rules override and extend existing styles to implement the requested bugfixes and visual polish for the sidebar and marketing navigation. They are placed at the end of the stylesheet to ensure precedence over earlier definitions. */ /* Ensure the topbar right area lays out its children horizontally on desktop and mobile. Previously the print/export controls could wrap onto a new line causing them to appear below the year switcher. */ .topbar-right { display: flex; align-items: center; gap: 0.5rem; } /* Add a small left margin before the export controls so they are visually separated from the year selector */ .topbar-right .export-controls { margin-left: 0.5rem; } /* Explicitly set icon colours for print/save buttons on all backgrounds. Without this rule the icons may inherit a white colour from the parent and become invisible on light backgrounds. */ .icon-btn i { color: #030A18; } /* Sidebar as vertical flex container */ .sidebar { /* Pin the sidebar on desktop so it does not scroll with the page content. */ position: fixed; top: 0; left: 0; height: 100vh; width: 220px; display: flex; flex-direction: column; /* Remove the transition on width here as well */ transition: none; z-index: 1000; } /* Scrollable wrapper for nav */ .sidebar-nav { flex: 1 1 auto; overflow-y: auto; /* Add adaptive gap above the footer so that the user info and logout button are pinned to the bottom but still have breathing room. The clamp ensures the gap scales with viewport height. */ margin-bottom: clamp(8px, 4vh, 24px); /* Remove default list bullets in the sidebar navigation */ list-style: none; padding-left: 0; /* Reserve space for the footer so it doesn’t overlap nav items */ padding-bottom: 80px; } /* Remove bullets from list items in the sidebar navigation */ .sidebar-nav li { list-style: none; } /* Brand logo area */ .brand { padding: 1rem; display: flex; align-items: center; justify-content: center; } .brand-full img, .brand-compact img { height: 28px; } .brand-compact { display: none; } /* When showing only the octopus icon (collapsed), invert the color to white */ .brand-compact img { filter: invert(1); } /* Footer pinned to bottom */ .sidebar-footer { position: absolute; bottom: 0; left: 0; right: 0; padding: 12px; text-align: center; border-top: 1px solid rgba(255,255,255,0.1); } .sidebar-footer .profile-mini { display: flex; flex-direction: column; align-items: center; gap: 4px; } .sidebar-footer .avatar-placeholder { width: 32px; height: 32px; background-color: #4e5a77; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; margin: 0 auto; } .sidebar-footer .logout-form { margin-top: 8px; } .sidebar-footer .logout-btn { width: 100%; padding: 0.4rem 0; background-color: #1f3971; border: none; border-radius: 4px; color: #fff; font-size: 0.85rem; cursor: pointer; } .sidebar-footer .logout-btn:hover { background-color: #2E8BE4; } /* Collapsed state using html.sidebar-collapsed */ html.sidebar-collapsed .sidebar { width: 60px; } html.sidebar-collapsed .brand-full { display: none; } html.sidebar-collapsed .brand-compact { display: block; } html.sidebar-collapsed .sidebar .menu-item .label, html.sidebar-collapsed .sidebar .nav-group-children, html.sidebar-collapsed .sidebar .sidebar-footer .user-info, html.sidebar-collapsed .sidebar .sidebar-footer .logout-form { display: none; } /* Navigation group (e.g. Marketing) */ .nav-group > a { cursor: pointer; } .nav-group .caret { margin-left: auto; font-size: 1rem; font-weight: 600; opacity: 0.7; /* Increase the clickable area of the caret. Without explicit dimensions the arrow itself is the only clickable area which makes toggling difficult. Give it a fixed square size and centre the glyph using flexbox. */ width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; cursor: pointer; } .nav-group-children { list-style: none; margin: 0; padding: 0; padding-left: 1.5rem; } /* Indent submenu items within Marketing by additional margin */ .nav-group-children .menu-item { padding-left: 2rem; } .nav-group .nav-group-children { display: none; } .nav-group.expanded .nav-group-children { display: block; } .nav-group-children .menu-icon { width: 16px; height: 16px; } /* Menu items with grid layout for proper alignment */ /* Navigation menu items Layout: use flexbox to align icon and label to the left. Icons have a fixed size and margin for spacing; labels wrap naturally. Active links are highlighted by colour and bold text rather than background boxes. Hover state uses a subtle tint. */ .menu-item { display: flex; align-items: center; padding: 0.65rem 1rem; color: #fff; font-size: 0.9rem; transition: color 0.2s, background-color 0.2s; } .menu-icon { width: 20px; height: 20px; margin-right: 0.75rem; flex-shrink: 0; filter: invert(1); /* Ensure the icon stays centred vertically even when the label spans multiple lines */ align-self: center; } .menu-item:hover { background-color: rgba(255, 255, 255, 0.05); color: #3b7481; } .menu-item:hover .menu-icon { /* Slightly tint icons on hover */ filter: invert(47%) sepia(29%) saturate(469%) hue-rotate(169deg) brightness(80%) contrast(90%); } /* Active menu styling: highlight with brand colour (#68cce4) and bold text; remove coloured boxes from around the item. Icons are tinted to match the active colour using filter approximations. */ .menu-item.active { background-color: transparent; color: #68cce4; font-weight: 700; } .menu-item.active .menu-icon { filter: invert(57%) sepia(19%) saturate(742%) hue-rotate(170deg) brightness(92%) contrast(84%); } .handover-controls label { font-size: 0.85rem; margin-bottom: 2px; } .handover-controls input, .handover-controls select { padding: 0.25rem 0.5rem; font-size: 0.85rem; } .handover-controls button { padding: 0.4rem 0.8rem; background-color: #2E8BE4; color: white; border: none; border-radius: 4px; cursor: pointer; } .handover-controls button:hover { background-color: #1f5fa6; } /* ------------------------------------------------------------------- Mobile sidebar override The generic sidebar rules above set a fixed width (220px) and left position at 0 for the desktop layout. On screens 768px and narrower we need the sidebar to behave as a full‑screen overlay that slides in from the left. Because the global .sidebar rule is declared after the earlier media query, its styles would normally override our mobile definitions. To ensure the mobile style wins, we redeclare the sidebar rules for mobile here and use !important to trump the desktop values. */ @media (max-width: 768px) { .sidebar { width: 100% !important; left: -100% !important; } .sidebar.open { left: 0 !important; } } .week-nav { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; } .week-nav button { padding: 0.25rem 0.5rem; background-color: #eee; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; font-size: 0.85rem; } .week-nav button:hover { background-color: #ddd; } .handover-table { border-collapse: collapse; width: 100%; } .handover-table th, .handover-table td { border: 1px solid #ddd; padding: 0.3rem; font-size: 0.75rem; text-align: center; vertical-align: top; } .handover-table th { background-color: #f0f0f0; position: sticky; top: 0; z-index: 1; } .handover-table td:first-child { background-color: #f5f5f5; font-weight: bold; position: sticky; left: 0; z-index: 1; } .handover-status-pending { border: 1px dashed #e7a618; background-color: #fff8e1; } .handover-status-approved { border: 1px solid #2ca53f; background-color: #e6f8e8; } .handover-status-rejected { border: 1px solid #c0392b; background-color: #fdecea; } /* Timeline (Marketing plan) */ .timeline-container { width: 100%; overflow-x: auto; padding-bottom: 1rem; } .timeline-months { display: flex; border-bottom: 1px solid #ddd; } .month-label { flex: 1; text-align: center; padding: 0.25rem; font-size: 0.8rem; font-weight: bold; background-color: #f0f0f0; border-right: 1px solid #e0e0e0; } .timeline-row { display: flex; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid #eee; } .row-label { width: 150px; flex-shrink: 0; font-weight: bold; padding-right: 0.5rem; font-size: 0.9rem; } .row-bars { position: relative; flex: 1; height: 1.6rem; } .bar { position: absolute; top: 0; height: 100%; border-radius: 4px; color: #fff; font-size: 0.7rem; display: flex; align-items: center; padding-left: 0.2rem; white-space: nowrap; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); } /* Analytics */ .charts { display: flex; flex-wrap: wrap; gap: 2rem; } .chart-box { flex: 1 1 300px; /* Limit the height of each chart box so that charts do not consume the entire viewport. When the content overflows, the canvas will scale to fit. */ height: 300px; } /* Ensure canvases scale to fill their container height */ .chart-box canvas { height: 100% !important; } /* Placeholder */ .placeholder { font-size: 1.1rem; color: #666; } /* Responsive adjustments */ @media (max-width: 768px) { .sidebar { width: 60px; } .sidebar-header { display: none; } .menu li a { font-size: 0.75rem; padding: 0.5rem 0.6rem; } .row-label { width: 100px; } } /* Hide mobile-only controls on large screens */ @media (min-width: 1025px) { .hamburger, .quick-link { display: none !important; } } /* * Settings page styling * * The settings page allows a user to update their name and password and, * if they have administrative privileges, provides links to manage * users and pages. These rules style the form and lists used on * the settings pages. They are appended at the end of the main * stylesheet to ensure they take precedence over generic form styles. */ .settings-page { max-width: 600px; margin: 0 auto; padding: 1rem; } .settings-page h2 { margin-top: 0; font-size: 1.5rem; margin-bottom: 1rem; } .settings-form .form-group { margin-bottom: 0.8rem; display: flex; flex-direction: column; } .settings-form label { font-size: 0.9rem; margin-bottom: 0.2rem; } .settings-form input { padding: 0.4rem; border: 1px solid #ccc; border-radius: 4px; font-size: 0.9rem; } .settings-form .form-actions { margin-top: 1rem; display: flex; justify-content: flex-end; } .settings-form .btn-save { background-color: #2E8BE4; color: #fff; border: none; border-radius: 4px; padding: 0.5rem 1rem; cursor: pointer; } .settings-form .btn-save:hover { background-color: #1f5fa6; } .settings-page h3 { margin-top: 2rem; font-size: 1.2rem; } .settings-list { list-style: none; padding-left: 0; } .settings-list li { margin-bottom: 0.5rem; } .settings-list a { color: #2E8BE4; text-decoration: none; } .settings-list a:hover { text-decoration: underline; } /* User management tables and forms */ .users-table, .pages-table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: 0.9rem; } .users-table th, .users-table td, .pages-table th, .pages-table td { border: 1px solid #ddd; padding: 0.5rem; text-align: left; } .users-table th, .pages-table th { background-color: #f0f0f0; font-weight: bold; } .users-table tr:nth-child(even), .pages-table tr:nth-child(even) { background-color: #fafafa; } .actions-bar { display: flex; justify-content: flex-end; margin-bottom: 0.5rem; } .btn-primary, .btn-secondary, .btn-save { background-color: #2E8BE4; color: #fff; border: none; border-radius: 4px; padding: 0.4rem 0.8rem; cursor: pointer; font-size: 0.9rem; text-decoration: none; display: inline-block; } .btn-secondary { background-color: #6c757d; } .btn-primary:hover { background-color: #1f5fa6; } .btn-secondary:hover { background-color: #5a6268; } /* Forms inside user and pages management */ .user-form .form-group, .pages-form .form-group { margin-bottom: 0.8rem; display: flex; flex-direction: column; } .user-form label, .pages-form label { font-size: 0.9rem; margin-bottom: 0.2rem; } .user-form input, .pages-form input, .user-form select, .pages-form select { padding: 0.4rem; border: 1px solid #ccc; border-radius: 4px; font-size: 0.9rem; } .user-form .form-actions, .pages-form .form-actions { margin-top: 1rem; display: flex; gap: 0.5rem; align-items: center; } .notification-info { font-size: 0.85rem; color: #555; margin-left: 0.5rem; } /* Car wash enhancements: program details and filter inputs */ .wash-program-details { margin-top: 0.5rem; font-size: 0.9rem; } .wash-controls .control-group input[type="text"] { min-width: 0; }