* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif; background: #f5f6fa; color: #2d3436; }

.sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 220px; background: #2d3436; color: #fff; display: flex; flex-direction: column; z-index: 100; transition: transform 0.2s; }
.sidebar-header { padding: 20px 16px; border-bottom: 1px solid #444; }
.sidebar-header h2 { font-size: 16px; font-weight: 600; }
.nav-list { list-style: none; flex: 1; padding: 8px 0; }
.nav-list li a { display: block; padding: 10px 16px; color: #b2bec3; text-decoration: none; font-size: 14px; transition: background 0.15s; }
.nav-list li a:hover, .nav-list li a.active { background: #636e72; color: #fff; }
.sidebar-footer { padding: 12px 16px; border-top: 1px solid #444; font-size: 13px; }
.user-info { margin-bottom: 4px; color: #dfe6e9; }
.logout-link { color: #74b9ff; text-decoration: none; font-size: 12px; }

.content { margin-left: 220px; min-height: 100vh; }
.topbar { background: #fff; padding: 12px 24px; border-bottom: 1px solid #dfe6e9; display: flex; align-items: center; gap: 12px; }
.topbar h1 { font-size: 18px; font-weight: 600; }
.menu-toggle { display: none; background: none; border: none; font-size: 22px; cursor: pointer; }
.page-body { padding: 20px 24px; }

.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #2d3436; }
.login-card { background: #fff; padding: 40px; border-radius: 8px; width: 340px; }
.login-card h1 { text-align: center; margin-bottom: 24px; font-size: 22px; }
.login-card input { width: 100%; padding: 10px 12px; margin-bottom: 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; }
.login-card button { width: 100%; padding: 10px; background: #0984e3; color: #fff; border: none; border-radius: 4px; font-size: 15px; cursor: pointer; }
.login-card button:hover { background: #0773c5; }
.error { background: #ffe0e0; color: #c0392b; padding: 8px 12px; border-radius: 4px; margin-bottom: 12px; font-size: 13px; }

.filters { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.filters select, .filters input[type=date], .filters button { padding: 6px 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px; }
.filters button { background: #0984e3; color: #fff; border: none; cursor: pointer; }

.grid-container { width: 100%; height: calc(100vh - 160px); }

table.simple { border-collapse: collapse; width: 100%; font-size: 13px; }
table.simple th, table.simple td { border: 1px solid #ddd; padding: 6px 10px; text-align: left; }
table.simple th { background: #f0f0f0; font-weight: 600; }

@media (max-width: 768px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); }
    .content { margin-left: 0; }
    .menu-toggle { display: block; }
}