/* assets/css/theme.css */
/* Färgtema (forskning: blå/grön för fokus/ro, gult/orange sparsamt, rött för varning) */
:root{
  --bg: #f7f7f8;
  --text: #111827;
  --muted: #6b7280;
  --card: #ffffff;
  --border: #e5e7eb;

  --primary: #2563eb; /* blå */
  --primary-contrast: #ffffff;

  --success: #16a34a; /* grön */
  --warning: #f59e0b; /* gult/orange */
  --danger:  #dc2626; /* röd */

  --focus: 0 0 0 3px rgba(37,99,235,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.container{max-width:1100px;margin:0 auto;padding:1rem}

.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:16px; box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.btn{
  display:inline-block; border:0; border-radius:10px; padding:10px 14px;
  background:var(--primary); color:var(--primary-contrast); cursor:pointer;
}
.btn:hover{filter:brightness(1.05)}
.btn:focus{outline:var(--focus) solid 0; box-shadow:var(--focus)}
.btn-muted{
  background:#111827; color:#fff;
}
.input{
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px;
  background:#fff;
}
.label{font-weight:600;margin-bottom:6px;display:block}
.text-muted{color:var(--muted)}
.grid{display:grid; gap:24px}
.grid-2{grid-template-columns:1fr}
@media (min-width: 900px){ .grid-2{grid-template-columns:1fr 1fr} }

.badge{display:inline-block;padding:.2rem .5rem;border-radius:999px;font-size:.8rem}
.badge-success{background:rgba(22,163,74,.1); color:#166534}
.badge-warning{background:rgba(245,158,11,.12); color:#92400e}
.badge-danger{background:rgba(220,38,38,.1); color:#991b1b}

.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:.6rem;border-bottom:1px solid var(--border);text-align:left}
.table th{color:#374151;font-weight:600}

.progress{height:10px;background:#e5e7eb;border-radius:999px;overflow:hidden}
.progress > span{display:block;height:100%;background:linear-gradient(90deg,#16a34a,#22c55e)}

.link{color:#1d4ed8;text-decoration:none}
.link:hover{text-decoration:underline}