@import "variables.css";

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:6px; cursor:pointer; border:none; font-weight:600 }
.btn-primary { background:var(--primary); color:#fff }
.btn-ghost { background:transparent; color:var(--text); border:1px solid rgba(0,0,0,0.06) }
.btn-danger { background:var(--danger); color:#fff }

/* Tables */
.table { width:100%; border-collapse:collapse; background:var(--card); border-radius:6px; overflow:hidden}
.table th, .table td { padding:12px 14px; text-align:left; border-bottom:1px solid rgba(15,23,36,0.04) }
.table thead { background:linear-gradient(90deg, rgba(11,95,255,0.06), rgba(0,184,148,0.02)) }

/* Forms */
.input { padding:10px 12px; border-radius:6px; border:1px solid rgba(15,23,36,0.06); background: #fff }
.form-row { display:flex; gap:12px }
.label-inline { font-size:13px; color:var(--muted) }

/* Cards for KPIs */
.kpi { display:flex; justify-content:space-between; align-items:center; padding:16px; border-radius:8px; background:linear-gradient(180deg,#fff,#fbfdff); box-shadow:var(--shadow-1)}
.kpi .value { font-size:20px; font-weight:700 }
.kpi .meta { color:var(--muted); font-size:12px }

/* Frosty cards for dashboard */
.frost-card {
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.6));
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 6px 18px rgba(16,24,40,0.06);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  padding: 18px;
}

/* Dashboard grid */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 18px;
}

.dashboard-grid .kpi { background: transparent; box-shadow: none; padding: 14px }
.dashboard-grid .kpi .value { font-size:22px }

/* Make grid responsive */
@media (max-width: 1100px){ .dashboard-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .dashboard-grid { grid-template-columns: 1fr; } }

/* Dark theme adjustments */
:root.dark-mode .frost-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.04);
}

/* Badges */
.badge { padding:6px 8px; border-radius:999px; font-weight:700; font-size:12px }
.badge.green { background: rgba(0,184,148,0.12); color: var(--accent) }
.badge.red { background: rgba(255,71,87,0.08); color: var(--danger) }

/* Responsive */
@media (max-width: 900px){
  .app{ grid-template-columns: 1fr; grid-template-areas: "header" "main" "sidebar" }
  .sidebar{ order: 3 }
}