Saaas007/room-utilization-system

1/* Minimal enhancements beyond Tailwind */2 3/* Custom switch for the "Only Available Now" toggle */4input[type="checkbox"].appearance-none {5    position: relative;6    outline: none;7    transition: background 0.2s ease;8}9input[type="checkbox"].appearance-none::after {10    content: '';11    position: absolute;12    top: 2px;13    left: 2px;14    width: 18px;15    height: 18px;16    border-radius: 9999px;17    background: white;18    box-shadow: 0 1px 2px rgba(0,0,0,0.2);19    transition: transform 0.2s ease;20}21input[type="checkbox"].appearance-none:checked::after {22    transform: translateX(20px);23}24 25/* Day chip styles */26.day-chip {27    padding: 4px 8px;28    border-radius: 9999px;29    border: 1px solid #e5e5e5;30    font-size: 12px;31    user-select: none;32    cursor: pointer;33}34.day-chip.active {35    background: #2563eb;36    border-color: #2563eb;37    color: white;38}39 40/* Toast styles */41.toast {42    background: white;43    border: 1px solid #e5e5e5;44    border-left-width: 4px;45    border-left-color: #2563eb;46    padding: 10px 12px;47    border-radius: 8px;48    box-shadow: 0 6px 20px rgba(0,0,0,0.08);49    margin-top: 8px;50}51.toast.success { border-left-color: #16a34a; }52.toast.error { border-left-color: #dc2626; }53.toast.warning { border-left-color: #f59e0b; }54/* Smooth scroll for list areas */55html { scroll-behavior: smooth; }56/* Schedule Graph Chart Styles */57.schedule-chart-container {58    display: flex;59    border: 1px solid #e5e5e5;60    border-radius: 8px;61    overflow: hidden;62    min-height: 500px;63}64 65.chart-y-axis {66    width: 120px;67    background: #f8f9fa;68    border-right: 1px solid #e5e5e5;69    flex-shrink: 0;70}71 72.chart-y-label {73    height: 60px;74    border-bottom: 1px solid #e5e5e5;75    background: #f8f9fa;76}77 78.chart-day {79    height: 60px;80    display: flex;81    align-items: center;82    justify-content: center;83    font-weight: 600;84    font-size: 14px;85    color: #374151;86    border-bottom: 1px solid #e5e5e5;87    background: white;88}89 90.chart-main {91    flex: 1;92    display: flex;93    flex-direction: column;94}95 96.chart-x-axis {97    display: grid;98    grid-template-columns: repeat(15, 1fr);99    height: 60px;100    background: #f8f9fa;101    border-bottom: 1px solid #e5e5e5;102}103 104.chart-time-label {105    display: flex;106    align-items: center;107    justify-content: center;108    font-size: 11px;109    color: #6b7280;110    font-weight: 500;111    border-right: 1px solid #e5e5e5;112}113 114.chart-time-label:last-child {115    border-right: none;116}117 118.chart-grid {119    flex: 1;120    position: relative;121    background: white;122}123 124.chart-row {125    height: 60px;126    border-bottom: 1px solid #f3f4f6;127    position: relative;128    display: flex;129    align-items: center;130}131 132.chart-row:last-child {133    border-bottom: none;134}135 136/* Schedule bars (Gantt-style) */137.schedule-bar {138    position: absolute;139    height: 40px;140    border-radius: 6px;141    cursor: pointer;142    transition: all 0.2s ease;143    display: flex;144    align-items: center;145    overflow: hidden;146    box-shadow: 0 2px 4px rgba(0,0,0,0.1);147}148 149.schedule-bar:hover {150    transform: translateY(-2px);151    box-shadow: 0 4px 12px rgba(0,0,0,0.15);152    z-index: 10;153}154 155.schedule-bar.current {156    animation: pulse-border 2s infinite;157    border: 2px solid #2563eb;158}159 160@keyframes pulse-border {161    0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7); }162    70% { box-shadow: 0 0 0 8px rgba(37, 99, 235, 0); }163    100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }164}165 166.schedule-bar-content {167    padding: 4px 8px;168    color: white;169    font-weight: 500;170    font-size: 11px;171    line-height: 1.2;172    width: 100%;173    overflow: hidden;174    text-overflow: ellipsis;175    white-space: nowrap;176}177 178.schedule-bar-title {179    font-weight: 600;180    font-size: 12px;181}182 183.schedule-bar-time {184    opacity: 0.9;185    font-size: 10px;186}187 188.schedule-bar-instructor {189    opacity: 0.8;190    font-size: 10px;191}192 193.schedule-bar-room {194    opacity: 0.75;195    font-size: 9px;196}197 198/* Responsive adjustments */199@media (max-width: 768px) {200    .chart-y-axis {201        width: 80px;202    }203    204    .chart-day {205        font-size: 12px;206    }207    208    .schedule-bar-content {209        font-size: 10px;210    }211    212    .schedule-bar-title {213        font-size: 11px;214    }215}216 217/* Legend styles */218.legend {219    display: flex;220    flex-wrap: wrap;221    gap: 8px;222    margin-bottom: 16px;223    padding: 12px;224    background: #f8f9fa;225    border-radius: 8px;226    border: 1px solid #e5e5e5;227}228 229.legend-item {230    display: flex;231    align-items: center;232    gap: 6px;233    font-size: 12px;234    padding: 4px 8px;235    background: white;236    border-radius: 4px;237    border: 1px solid #e5e5e5;238}239 240.legend-color {241    width: 12px;242    height: 12px;243    border-radius: 2px;244}245