:root {
    --primary-color: #2c3e50;
    --accent-color: #3498db;
    --danger: #e74c3c;
    --warning: #f39c12;
    --success: #2ecc71;
    --bg-color: #f4f7f6;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

body { background-color: var(--bg-color); color: var(--primary-color); }

.container { display: flex; min-height: 100vh; }

/* Sidebar */
.sidebar { width: 250px; background: var(--primary-color); color: white; padding: 20px; }
.logo { font-size: 24px; font-weight: bold; margin-bottom: 30px; display: flex; align-items: center; gap: 10px; color: var(--accent-color); }
.sidebar nav a { display: block; color: #bdc3c7; padding: 15px; text-decoration: none; border-radius: 5px; transition: 0.3s; }
.sidebar nav a:hover, .sidebar nav a.active { background: #34495e; color: white; }

/* Main Content */
.main-content { flex: 1; padding: 30px; }
header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.user-info { display: flex; align-items: center; gap: 10px; }
.user-info img { border-radius: 50%; }

/* Stats Cards */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px; }
.card { padding: 20px; border-radius: 10px; color: white; position: relative; overflow: hidden; }
.card i { font-size: 40px; opacity: 0.3; position: absolute; left: 10px; bottom: 10px; }
.bg-blue { background: var(--accent-color); }
.bg-orange { background: var(--warning); }
.bg-red { background: var(--danger); }

/* Table Section */
.inventory { background: white; padding: 20px; border-radius: 10px; shadow: 0 4px 6px rgba(0,0,0,0.1); }
.table-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
table { width: 100%; border-collapse: collapse; text-align: right; }
th, td { padding: 15px; border-bottom: 1px solid #eee; }
th { background: #f8f9fa; }

.btn-add { background: var(--success); color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; }

/* Modal */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); align-items: center; justify-content: center; }
.modal-content { background: white; padding: 30px; border-radius: 10px; width: 400px; }
input, select { width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ddd; border-radius: 5px; }
.modal-buttons { display: flex; gap: 10px; }
.btn-save { background: var(--accent-color); color: white; border: none; flex: 1; padding: 10px; cursor: pointer; }
.btn-close { background: #95a5a6; color: white; border: none; flex: 1; padding: 10px; cursor: pointer; }