* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; background: #f5f7fb; color: #1f2937; }
.container { max-width: 1400px; margin: 0 auto; padding: 24px; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
h1, h2 { margin: 0; }
.card { background: #fff; border-radius: 14px; padding: 20px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08); margin-bottom: 20px; }
.narrow { max-width: 760px; }
.btn { display: inline-block; text-decoration: none; border: 0; cursor: pointer; padding: 10px 14px; border-radius: 10px; background: #e5e7eb; color: #111827; font-weight: 700; }
.btn.primary { background: #2563eb; color: #fff; }
.btn.success { background: #16a34a; color: #fff; }
.btn.danger { background: #dc2626; color: #fff; }
.btn.small { padding: 8px 10px; font-size: 12px; }
.actions, .actions-row { display: flex; gap: 8px; flex-wrap: wrap; }
.search-form { display: flex; gap: 12px; flex-wrap: wrap; }
.search-form input, .grid-form input, .grid-form textarea, .upload-form input[type=file] { width: 100%; padding: 12px; border: 1px solid #d1d5db; border-radius: 10px; background: #fff; }
.search-form input { flex: 1; min-width: 320px; }
.table-responsive { overflow: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px; border-bottom: 1px solid #e5e7eb; text-align: left; vertical-align: top; }
th { background: #f8fafc; position: sticky; top: 0; }
.pagination { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.page { padding: 8px 12px; border-radius: 8px; background: #eef2ff; text-decoration: none; color: #1e3a8a; }
.page.active { background: #2563eb; color: #fff; }
.grid-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.field label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; }
.field.full { grid-column: 1 / -1; }
.alert { padding: 12px 14px; border-radius: 10px; margin: 12px 0; }
.success-box { background: #dcfce7; color: #166534; }
.error-box { background: #fee2e2; color: #991b1b; }
.upload-form { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
@media (max-width: 980px) { .grid-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .grid-form { grid-template-columns: 1fr; } .container { padding: 14px; } }

.kpi-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:16px; margin-bottom:20px; }
.kpi-card { background:#fff; border-radius:14px; padding:18px 20px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08); }
.kpi-card strong { display:block; font-size:32px; margin-top:8px; }
.kpi-label { color:#64748b; font-size:14px; }
.dashboard-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:20px; }
.chart-card { min-height: 380px; }
.chart-card.wide { grid-column: 1 / -1; min-height: 420px; }
.card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.card-head h2 { font-size:22px; }
.card-head span { color:#64748b; font-size:14px; }
.chart-card canvas { width:100% !important; height:300px !important; }
.chart-card.wide canvas { height:340px !important; }
@media (max-width: 980px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  .chart-card.wide { grid-column:auto; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .kpi-grid { grid-template-columns: 1fr; }
}

.dashboard-hero { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.dashboard-hero h2 { margin:0 0 8px; font-size:32px; }
.dashboard-hero p { margin:0; color:#64748b; }
.filters-grid { display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:16px; align-items:end; }
.filters-grid label { display:block; margin-bottom:6px; font-size:14px; font-weight:700; }
.filters-grid select { width:100%; padding:12px; border:1px solid #d1d5db; border-radius:10px; background:#fff; }
.filter-actions { display:flex; gap:10px; align-items:end; }
.kpi-grid.modern .kpi-card { color:#fff; border:none; }
.gradient-a { background:linear-gradient(135deg, #1d4ed8, #2563eb); }
.gradient-b { background:linear-gradient(135deg, #059669, #10b981); }
.gradient-c { background:linear-gradient(135deg, #7c3aed, #8b5cf6); }
.gradient-d { background:linear-gradient(135deg, #ea580c, #f97316); }
.dashboard-modern-grid { display:grid; grid-template-columns: 1.25fr 1fr; gap:20px; }
.table-card { min-height:420px; }
.compact-table th, .compact-table td { padding:10px; font-size:14px; }
.sortable-table th.sortable { cursor:pointer; position:relative; padding-right:24px; }
.sortable-table th.sortable::after { content:'⇅'; position:absolute; right:8px; opacity:.45; }
.sortable-table th.sorted-asc::after { content:'↑'; opacity:1; }
.sortable-table th.sorted-desc::after { content:'↓'; opacity:1; }
@media (max-width: 1180px) {
  .filters-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dashboard-modern-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .filters-grid { grid-template-columns: 1fr; }
  .filter-actions { flex-wrap:wrap; }
}