/* /var/www/smvgrc-dev/static/styles/base.css */
/* Tokens, reset, utilities, form controls, buttons */

/* =========================================================
### 00 tokens + reset ###
========================================================= */
:root{
  --bg: #f6f7fb;
  --panel: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --line: rgba(15, 23, 42, 0.08);
  --shadow: 0 8px 30px rgba(15, 23, 42, 0.08);
  --r: 16px;

  --nav-w: 260px;
  --right-w: 320px;
  --gap: 16px;
  --pad: 18px;
  --max: 100%;
  --font: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";

  /* BAS-196: semantiske statusfarver — bruges i stedet for hardkodede hex */
  --success:        #16a34a;
  --success-bg:     #dcfce7;
  --success-dark:   #166534;
  --warning:        #d97706;
  --warning-bg:     #fef3c7;
  --warning-dark:   #92400e;
  --danger:         #dc2626;
  --danger-bg:      #fee2e2;
  --danger-dark:    #991b1b;
  --info:           #2563eb;
  --info-bg:        #dbeafe;
  --info-dark:      #1e40af;
  --bg-subtle:      #f8fafc;
  --line-solid:     #f1f5f9;

  /* RAG-palette (single source of truth — spejler modules/risk_levels.py RAG_COLORS) */
  --rag-critical:   #dc2626;
  --rag-high:       #ef4444;
  --rag-medium:     #eab308;
  --rag-low:        #22c55e;
  --rag-warning:    #f59e0b;
  --rag-ok:         #16a34a;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
}

/* =========================================================
### 01 utilities ###
========================================================= */
.muted{ color: var(--muted); }
.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* =========================================================
### 09 form controls + buttons ###
   (checkbox/radio må ikke arve "input width:100%")
========================================================= */
label{ display:block; font-size: 13px; color: var(--muted); }

/* standard inputs (tekstfelter etc.) */
input:not([type="checkbox"]):not([type="radio"]){
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  margin-top: 6px;
  font: inherit;
}

/* nulstil checkbox/radio */
input[type="checkbox"],
input[type="radio"]{
  width: auto;
  padding: 0;
  margin: 0;
  border-radius: 0;
  background: transparent;
}

button, .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  text-decoration:none;
  color: var(--text);
  cursor:pointer;
}
.btn-ghost{ background: transparent; }
.btn-ghost:hover{ background: #fff; }

.btn-sm{
  padding: 6px 14px;
  font-size: 12px;
}

.btn-small{
  padding:6px 10px;
  font-size:0.95em;
}

.btn-primary{ background: var(--text); color: #fff; border-color: transparent; }
.btn-primary:hover{ box-shadow: 0 10px 26px rgba(15, 23, 42, 0.18); }

.btn-lg{ padding: 10px 24px; font-size: 14px; font-weight: 700; }

.btn-delete{ color: #dc2626; border-color: #fecaca; background: #fef2f2; margin-left: auto; }
.btn-delete:hover{ background: #fee2e2; border-color: #dc2626; }

.btn-row{ display: flex; gap: 8px; align-items: center; margin-top: 8px; }

/* grid helpers */
.grid-2{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.grid-3{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.grid-3 h3{ margin: 0 0 8px 0; font-size: 14px; letter-spacing: .02em; }

/* row links */
.row-link{
  display:block;
  padding: 10px 8px;
  border-radius: 12px;
  text-decoration:none;
  color: var(--text);
}
.row-link:hover{
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.10);
  background: #fff;
}
.row-title{ font-weight: 700; }