/* =========================================================
   BASE / RESET
========================================================= */
* { box-sizing: border-box; }

body {
    font-family: Arial, sans-serif;
    background: #f7f8fb;
    margin: 20px;
    color: #1b1f23;
}

h1 { margin-bottom: 20px; }
h2 { margin-bottom: 15px; }

.small { font-size:12px; color:#546579; }
.muted { color:#546579; }

/* alleen gewone links onderstrepen */
a:not(.btn) {
    text-decoration: underline;
}

.highlight {
    border: 2px solid #f59e0b;
}

/* =========================================================
   HEADER
========================================================= */
.header {
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
    color:#fff;
    padding:14px 20px;
    border-radius:10px;
    margin-bottom:10px;
}

.header-inner {
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.header-right .user {
    background:rgba(255,255,255,.2);
    padding:6px 10px;
    border-radius:6px;
}

/* =========================================================
   NAV
========================================================= */
.nav { margin-bottom:25px; }

.nav a {
    display:inline-block;
    margin-right:10px;
    padding:6px 12px;
    background:#fff;
    border-radius:6px;
    border:1px solid #d0d5dd;
    color:#1d4ed8;
    text-decoration:none;
}

/* =========================================================
   CARDS
========================================================= */
.card {
    background:#fff;
    padding:16px 22px 18px 22px;
    border-radius:14px;
    margin-bottom:22px;
    box-shadow:0 6px 18px rgba(0,0,0,.05);
    border:1px solid #e2e8f3;
}

.admin-page .form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* ===== ADMIN LAYOUT FIX ===== */
.admin-page .form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    width: 100%;
}

/* Zorg dat velden netjes vullen */
.admin-page .form-grid-2 input,
.admin-page .form-grid-2 select {
    width: 100%;
    box-sizing: border-box;
}

/* =========================================================
   BUTTONS
========================================================= */
button:not(.btn) {
    background:#e5e7eb;
    color:#111;
}

.btn {
    margin-top:10px;
    border:none;
    padding:8px 14px;
    border-radius:6px;
    cursor:pointer;
    color:#fff;
    font-size:14px;
}

/* primaire actie */
.btn-primary {
    background:#1e3a8a;
}

.btn-primary:hover {
    background:#1e40af;
}

/* secundair */
.btn-muted {
    background:#6b7280;
}

.btn-muted:hover {
    background:#4b5563;
}

/* anchor buttons fix */
a.btn,
a.btn:link,
a.btn:visited,
a.btn:hover,
a.btn:active {
    text-decoration:none !important;
    color:#fff !important;
    display:inline-block;
}

button:disabled {
    background:#94a3b8;
    cursor:not-allowed;
    opacity:0.7;
}

a.btn-warning,
a.btn-warning:link,
a.btn-warning:visited,
a.btn-warning:hover,
a.btn-warning:active {
    color:#711 !important;
}

.btn-warning {
    background:#fff;
    border:1px solid #f59e0b;
    padding:3px 12px;      /* zelfde hoogte als andere knoppen */
}

.btn-warning:hover {
    background:#fff7ed;    /* heel licht oranje */
    border-color:#d97706;
    color:#000;
}

/* =========================================================
   STATUS COLORS (SINGLE SOURCE OF TRUTH)
========================================================= */
:root {

    --status-all-bg: #ffffff;
    --status-all-color: #374151;

    --status-active-bg: #eef2f6;
    --status-active-color: #1f2937;

    --status-pending-bg: #d1d5db;
    --status-pending-color: #111827;

    --status-open-bg: #ffedd5;
    --status-open-color: #9a3412;

    --status-analyse-bg: #dbeafe;
    --status-analyse-color: #1e40af;

    --status-onderzoek-bg: #bfdbfe;
    --status-onderzoek-color: #1e3a8a;

    --status-concept-bg: #fef3c7;
    --status-concept-color: #92400e;

    --status-gesloten-bg: #dcfce7;
    --status-gesloten-color: #166534;
}

/* =========================================================
   BADGES (SYNC MET KPI)
========================================================= */
.badge {
    display:inline-block;
    padding:5px 10px;
    border-radius:10px;
    font-size:12px;
    font-weight:500;
    line-height:1.2;
}

/* status badges */
.badge.pending   { background:var(--status-pending-bg);   color:var(--status-pending-color); }
.badge.open      { background:var(--status-open-bg);      color:var(--status-open-color); }
.badge.analyse   { background:var(--status-analyse-bg);   color:var(--status-analyse-color); }
.badge.onderzoek { background:var(--status-onderzoek-bg); color:var(--status-onderzoek-color); }
.badge.concept   { background:var(--status-concept-bg);   color:var(--status-concept-color); }
.badge.gesloten  { background:var(--status-gesloten-bg);  color:var(--status-gesloten-color); }

/* NIET gebruiken in dashboard, maar future-safe */
.badge.active    { background:var(--status-active-bg);    color:var(--status-active-color); }
.badge.all       { background:var(--status-all-bg);       color:var(--status-all-color); }

/* kleine nuance */
.badge.gesloten {
    opacity:0.9;
}

/* =========================================================
   FORM BASICS
========================================================= */
label {
    display:block;
    font-weight:600;
    margin-bottom:6px;
}

input, textarea, select {
    border-radius:10px;
    border:1px solid #bfd0e3;
    padding:10px;
}

/* =========================================================
   UTIL
========================================================= */
.truncate {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* =========================================================
   DETAIL / ABL CARD
========================================================= */
.abl-form {
    display:flex;
    flex-direction:column;
    gap:14px;
}

.abl-select {
    max-width:280px;
    width:100%;
}

.abl-actions {
    display:flex;
    align-items:center;
    gap:10px;
}

/* =========================================================
   DETAIL GRID
========================================================= */
.detail-grid-2 {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-bottom:18px;
}

@media (max-width: 900px) {
    .detail-grid-2 {
        grid-template-columns:1fr;
    }
}

/* =========================================================
   ABL ENTITY
========================================================= */
.abl-entities {
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:12px;
}

.abl-row {
    display:grid;
    grid-template-columns:18px auto;
    align-items:center;
    gap:10px;
}

.abl-row input[type="checkbox"] {
    margin:0;
    width:16px;
    height:16px;
}

/* =========================================================
   RISK GRID
========================================================= */
.risk-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-bottom:12px;
}

.risk-result {
    margin-top:10px;
}

@media (max-width: 760px) {
    .risk-grid {
        grid-template-columns:1fr;
    }
}

/* =========================================================
   LOG REPORT CHANGES
========================================================= */

.log-old {
    color:#dc2626;
    text-decoration: line-through;
}

.log-new {
    color:#2563eb;
    font-weight:600;
}

/* =========================================================
   RISK MODAL (v5 – fixed selection box)
========================================================= */

.risk-cell {
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid rgba(0,0,0,0.05);
    box-sizing: border-box;
    transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
    position: relative;
}

@media (hover: hover) {
    .risk-cell:hover {
        transform: scale(1.06);
        filter: brightness(1.08);
        z-index: 2;
    }
}

.risk-cell:active {
    transform: scale(0.98);
}

.risk-cell.selected {
    box-shadow:
        0 0 0 3px #111,
        0 0 0 2px #fff inset,
        0 0 8px rgba(0,0,0,0.45);
    transform: scale(1.08);
    z-index: 3;
}

.risk-cell.selected:hover {
    transform: scale(1.08);
    filter: brightness(1.08);
}

.risk-cell:focus {
    outline: none;
    box-shadow:
        0 0 0 3px #2563eb,
        0 0 6px rgba(37,99,235,0.4);
}

/* =========================================================
   CHART
========================================================= */


#trendChart {
    width: 100%;
    height: 260px;
}

/* =========================================================
   TOP 10 TABLE
========================================================= */

.top-table {
    width: 100%;
    table-layout: fixed;
}

/* HEADER */
.top-table th {
    position: relative;
    white-space: nowrap;
    padding-right: 18px; /* 🔑 vaste ruimte voor pijl */
}

/* sort indicator = ALTIJD zelfde ruimte */
.top-table th .sort-indicator {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;           /* 🔑 vaste breedte */
    text-align: center;
    font-size: 10px;
    opacity: 0.6;
}

/* leeg = geen pijl maar WEL ruimte */
.top-table th .sort-indicator:empty::after {
    content: '▲';         /* dummy */
    visibility: hidden;   /* 🔑 behoudt ruimte zonder zichtbaar */
}

/* actieve kolom */
.top-table th.active {
    color: #1d4ed8;
    font-weight: 700;
}

/* body kolommen stabiel */
.top-table td:first-child {
    width: 50%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-table td:nth-child(2) {
    width: 10%;
}

.top-table td:nth-child(n+3) {
    width: 6%;
    text-align: right;
}

.top-table th,
.top-table td {
    font-variant-numeric: tabular-nums;
}

/* =========================================================
   BACKUP TABLE
========================================================= */

.backup-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.backup-table th {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 2px solid #e2e8f3;
    font-weight: 600;
}

.backup-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #edf2f7;
    vertical-align: middle;
}

.backup-table tr:hover {
    background: #f8fafc;
}

.backup-table td:last-child,
.backup-table th:last-child {
    width: 120px;
}

.backup-table .size {
    white-space: nowrap;
}

.backup-table .filename {
    font-family: monospace;
    font-size: 13px;
}