body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #f4f7f6; 
margin: 0; padding: 20px; }
.container { max-width: 1200px; margin: auto; }
h1, h2 { color: #333; text-align: center; }

nav { background: #2c3e50; padding: 15px; border-radius: 8px; margin-bottom: 20px; 
text-align: center; }
nav a { color: white; text-decoration: none; margin: 0 15px; font-weight: bold; }

.cabinet-grid { 
    display: grid; 
    gap: 5px; 
    margin: 20px auto; 
    overflow-x: auto; 
    padding: 10px;
    justify-content: center;
}
.drawer { 
    width: 60px; height: 60px; 
    background: #fff; border: 1px solid #ccc; 
    display: flex; align-items: center; justify-content: center; 
    cursor: pointer; text-decoration: none; color: #333; 
    font-size: 12px; font-weight: bold; transition: 0.3s; 
}
.drawer:hover { background: #e0e0e0; }

/* Status Colors */
.drawer.has-items { background: #d4edda; border-color: #28a745; } /* Green */
.drawer.locked { background: #ffcccc; color: #cc0000; border-color: #ff0000; } /* Red */
.drawer.blocked { background: #7f8c8d; color: #fff; border-color: #34495e; cursor: 
not-allowed; } /* Grey */

.card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px 
rgba(0,0,0,0.1); }
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th, td { border: 1px solid #ddd; padding: 10px; text-align: left; }
th { background: #f8f9fa; }
.btn { padding: 8px 15px; border: none; border-radius: 4px; cursor: pointer; 
text-decoration: none; display: inline-block; }
.btn-primary { background: #3498db; color: white; }
.btn-danger { background: #e74c3c; color: white; }
.btn-success { background: #2ecc71; color: white; }
.btn-warning { background: #f39c12; color: white; }

.search-box { margin-bottom: 20px; text-align: center; }
.search-box input { padding: 10px; width: 300px; border-radius: 4px; border: 1px solid #ccc; 
}

@media (max-width: 600px) {
    .drawer { width: 40px; height: 40px; font-size: 10px; }
}