html { font-size: 14px; } @media (min-width: 768px) { html { font-size: 16px; } } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; } html { position: relative; min-height: 100%; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } div.validation-summary-errors ul { list-style: none; margin: 0; padding: 0; } /* Optional: Add a subtle background to the error area if it has content */ div.validation-summary-errors:not(:empty) { background: #fff5f5; border: 1px solid #ff0000; padding: 10px; border-radius: 4px; } /* Custom Tile Theme Logic */ .tile-wide { transition: all 0.3s ease; border: 1px solid rgba(0,0,0,0.1); } /* Default / Light Mode Colors */ .tile-orders { background-color: #0078d7 !important; color: white !important; } .tile-pending { background-color: #ff9800 !important; color: white !important; } .tile-tables { background-color: #603cba !important; color: white !important; } .tile-menus { background-color: #00a65a !important; color: white !important; } .tile-config { background-color: #ce352c !important; color: white !important; } .tile-users { background-color: #ffc107 !important; color: white !important; } .tile-exit { background-color: #ff0000 !important; color: white !important; } /* Dark Mode Overrides (When the theme switcher is active) */ /* Note: Adjust '.dark-mode' to match the class your switcher adds to the */ .dark-side .tile-orders { background-color: #1a3a5a !important; border-color: #0078d7; } .dark-side .tile-pending { background-color: #7a4a00 !important; border-color: #ff9800; } .dark-side .tile-tables { background-color: #3a2470 !important; border-color: #603cba; } .dark-side .tile-menus { background-color: #005a31 !important; border-color: #00a65a; } .dark-side .tile-config { background-color: #7a1f1a !important; border-color: #ce352c; } .dark-side .tile-users { background-color: #8a6a00 !important; border-color: #ffc107; } /* Compact Tile Styling */ .tile-wide.compact-tile { height: 40px !important; min-height: 40px !important; margin-bottom: 10px !important; } /* Sidebar Container */ .kiosk-sidebar { background-color: #f5f5f5; /* LightGray */ width: 280px; height: 100vh; display: flex; flex-direction: column; padding: 10px; } /* Base Tile Styling */ .compact-tile { display: flex !important; align-items: center !important; justify-content: flex-start !important; height: 60px !important; padding: 0 15px !important; margin-bottom: 8px !important; text-decoration: none !important; position: relative !important; border-radius: 4px; transition: transform 0.1s ease; } .compact-tile:active { transform: scale(0.98); } /* Icon Column - Fixed width to align labels */ .compact-tile .icon { position: relative !important; display: flex !important; align-items: center; justify-content: center; width: 45px !important; font-size: 1.6rem !important; margin: 0 12px 0 0 !important; left: auto !important; top: auto !important; transform: none !important; color: rgba(0,0,0,0.7) !important; } /* Label Styling */ .compact-tile .label { position: relative !important; display: block !important; font-size: 0.95rem !important; text-align: left !important; left: auto !important; bottom: auto !important; margin: 0 !important; padding: 0 !important; color: white !important; letter-spacing: 0.5px; } /* Theme Awareness for Dark Mode */ .dark-side .compact-tile .icon { color: rgba(255,255,255,0.8) !important; } .status-badge { width: 130px; /* Increased width */ padding: 12px 0; /* More vertical padding */ border-radius: 6px; /* Slightly more rounded for a modern look */ font-size: 0.9rem; /* Bigger font size */ font-weight: 800; /* Extra bold */ text-transform: uppercase; display: inline-block; box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Adds depth */ letter-spacing: 1px; /* Better readability */ } .flex-center { display: flex; flex-direction: column; align-items: center; justify-content: center; } /* Fixes vertical centering for the whole row */ .modern-orders td { vertical-align: middle !important; } #ordersDashboardContainer { transition: all 0.3s ease-in-out; } /* Make the status badges look even sharper */ .status-badge { box-shadow: 1px 1px 3px rgba(0,0,0,0.2); font-weight: 600; letter-spacing: 0.5px; } /* If the body has the light-theme (default) */ .p-2.container-theme-aware { background-color: white; color: black; } /* If the theme switcher adds a 'dark-side' or similar class to body/container */ .dark-side .p-2.container-theme-aware { background-color: #2b2d30; /* Darker shade for dark mode */ color: white; } /* Horizontal Centering Fix (for your previous request) */ #mainMenuTable td { text-align: center !important; vertical-align: middle !important; } /* Ensure the Name column stays readable on the left */ #mainMenuTable td:nth-child(2) { text-align: left !important; } /* The highlight for the selected row */ .table tr.selected-row { background-color: #e1f5fe !important; /* Light Blue tint */ outline: 2px solid #00838f !important; /* Thick Cyan border */ box-shadow: inset 0 0 10px rgba(0,0,0,0.1); } /* Support for Dark Mode (if using theme-switcher) */ .dark-side .table tr.selected-row { background-color: #1a3a4a !important; outline: 2px solid #00e5ff !important; } /* Make the transition smooth */ .table tr { transition: all 0.2s ease; cursor: pointer; } .category-btn { border: 1px solid #ff4d4d; background: white; transition: all 0.3s ease; } .category-btn.active-category { border: 3px solid #ff4d4d !important; background-color: #fff5f5 !important; font-weight: bold; transition: border 0.2s ease-in-out; } /* Custom Occupied Styling */ /* Occupied State - Red */ .card-occupied { border: 2px solid #dc3545 !important; background-color: #fff5f5; } .header-occupied { background-color: #dc3545 !important; color: white !important; } /* Available State - Standard */ .card-available { border: 1px solid #dee2e6; } .header-available { background-color: #f8f9fa; color: #212529; } body { /* Use the absolute path if ~/ doesn't resolve */ background: url('../images/CHOISKIOSK2.jpg') no-repeat center center fixed; background-size: cover; /* This creates a soft 'frosted' look over the background */ box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.2); /* Smooth transition for loading */ transition: background 0.5s ease-in-out; } /* Enhancing the login box to stand out against the image */ .login-box { backdrop-filter: blur(8px); /* Blur effect for the area behind the box */ -webkit-backdrop-filter: blur(8px); background: rgba(255, 255, 255, 0.85); /* Semi-transparent white */ border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 12px; padding: 2rem; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); }