/* Tablet */
@media (max-width: 900px) {
    .kpi-row { grid-template-columns: repeat(3, 1fr) !important; }
    .stats-row { grid-template-columns: repeat(2, 1fr) !important; }
    .quick-actions { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Mobile */
@media (max-width: 767px) {
    .topbar { position: relative; }
    .topbar nav { display: none; flex-direction: column; position: absolute; top: 56px; left: 0; right: 0; background: #0a1628; z-index: 200; padding: 8px 0; }
    .topbar nav.open { display: flex; }
    .topbar .nav-item { padding: 12px 24px; border-radius: 0; }
    .topbar .user-info { display: none; }
    .topbar .hamburger { display: block !important; cursor: pointer; font-size: 22px; padding: 16px; color: #fff; }
    .table-view { display: block; }
    .card-view { display: none; }
    .record-card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); cursor: pointer; }
    .record-card .row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #f0f0f0; }
    .record-card .row:last-child { border-bottom: none; }
    .record-card .label { font-size: 12px; color: #888; font-weight: 600; }
    .record-card .value { font-size: 14px; color: #333; text-align: right; }
    .toolbar { flex-direction: column; align-items: stretch; }
    .toolbar > div { width: 100% !important; flex-wrap: wrap; }
    .search-box, .filter-box { width: 100% !important; margin-bottom: 8px; }
    .btn-add { width: 100%; box-sizing: border-box; }
    .grid-2, .grid-3 { grid-template-columns: 1fr !important; }
    .container { padding: 12px !important; }
    .card { padding: 16px !important; }
}

@media (min-width: 768px) {
    .hamburger { display: none !important; }
    .card-view { display: none !important; }
    .table-view { display: block; }
}

@media (max-width: 576px) {
    .kpi-row { grid-template-columns: 1fr 1fr !important; gap: 10px; }
    .kpi-card { padding: 14px; }
    .kpi-value { font-size: 20px; }
    .stats-row { grid-template-columns: 1fr 1fr !important; }
    .quick-actions { grid-template-columns: 1fr 1fr !important; }
}