/* theme.css - NEN7510 Control Center - SecIntel dark style */

:root {
  --cc-bg:        #0f1117;
  --cc-surface:   #161b27;
  --cc-surface-2: #1e2535;
  --cc-surface-3: #252d3d;
  --cc-border:    #2a3347;
  --cc-border-2:  #334060;
  --cc-text:      #e2e8f0;
  --cc-muted:     #8899b4;
  --cc-accent:    #3b82f6;
  --cc-accent-2:  #6366f1;
  --cc-success:   #22c55e;
  --cc-warning:   #f59e0b;
  --cc-danger:    #ef4444;
  --cc-input-bg:  #1a2133;
  --cc-ring:      #3b82f6;
}

html, body { background: var(--cc-bg); color: var(--cc-text); font-family: 'Inter', system-ui, -apple-system, sans-serif; margin: 0; }
*, ::before, ::after { border-color: var(--cc-border); box-sizing: border-box; }
a { text-underline-offset: 2px; color: var(--cc-accent); }
a:hover { color: #60a5fa; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--cc-surface); }
::-webkit-scrollbar-thumb { background: var(--cc-border-2); border-radius: 3px; }

input, select, textarea {
  background: var(--cc-input-bg); color: var(--cc-text);
  border: 1px solid var(--cc-border-2); border-radius: 6px;
  padding: 7px 12px; font-size: 0.875rem;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--cc-accent);
  box-shadow: 0 0 0 2px rgba(59,130,246,.25);
}
input::placeholder, textarea::placeholder { color: var(--cc-muted); }
select option { background: var(--cc-input-bg); color: var(--cc-text); }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--cc-accent); cursor: pointer; }

table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
thead th {
  background: var(--cc-surface-2); color: var(--cc-muted);
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--cc-border);
}
tbody tr { border-bottom: 1px solid var(--cc-border); transition: background .1s; }
tbody tr:hover { background: var(--cc-surface-2); }
tbody td { padding: 10px 14px; color: var(--cc-text); vertical-align: middle; }

.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 6px; font-size: 0.8125rem; font-weight: 500; cursor: pointer; border: none; transition: all .15s; text-decoration: none; }
.btn-primary { background: var(--cc-accent); color: #fff; }
.btn-primary:hover { background: #2563eb; color: #fff; }
.btn-secondary { background: var(--cc-surface-3); color: var(--cc-text); border: 1px solid var(--cc-border-2); }
.btn-secondary:hover { background: var(--cc-border); color: var(--cc-text); }
.btn-danger { background: rgba(239,68,68,.15); color: var(--cc-danger); border: 1px solid rgba(239,68,68,.3); }
.btn-danger:hover { background: rgba(239,68,68,.25); }
.btn-success { background: rgba(34,197,94,.15); color: var(--cc-success); border: 1px solid rgba(34,197,94,.3); }
.btn-sm { padding: 4px 10px; font-size: 0.75rem; }

.card { background: var(--cc-surface); border: 1px solid var(--cc-border); border-radius: 10px; padding: 20px; }
.card-header { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--cc-muted); margin-bottom: 12px; }

.stat-card { background: var(--cc-surface); border: 1px solid var(--cc-border); border-radius: 10px; padding: 18px 20px; position: relative; overflow: hidden; }
.stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--cc-accent), var(--cc-accent-2)); }
.stat-value { font-size: 2rem; font-weight: 700; color: var(--cc-text); line-height: 1; }
.stat-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--cc-muted); margin-bottom: 6px; }
.stat-sub { font-size: 0.75rem; color: var(--cc-muted); margin-top: 4px; }

.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 99px; font-size: 0.7rem; font-weight: 600; }
.badge-blue { background: rgba(59,130,246,.15); color: #60a5fa; }
.badge-green { background: rgba(34,197,94,.15); color: #4ade80; }
.badge-red { background: rgba(239,68,68,.15); color: #f87171; }
.badge-yellow { background: rgba(245,158,11,.15); color: #fbbf24; }
.badge-gray { background: var(--cc-surface-3); color: var(--cc-muted); }

.page-header { margin-bottom: 24px; }
.page-kicker { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--cc-accent); margin-bottom: 4px; }
.page-title { font-size: 1.5rem; font-weight: 700; color: var(--cc-text); }
.page-sub { font-size: 0.875rem; color: var(--cc-muted); margin-top: 4px; }

.alert { padding: 10px 14px; border-radius: 6px; font-size: 0.8125rem; }
.alert-error { background: rgba(239,68,68,.1); color: #f87171; border: 1px solid rgba(239,68,68,.3); }
.alert-success { background: rgba(34,197,94,.1); color: #4ade80; border: 1px solid rgba(34,197,94,.3); }
.alert-info { background: rgba(59,130,246,.1); color: #60a5fa; border: 1px solid rgba(59,130,246,.3); }

.progress { background: var(--cc-surface-3); border-radius: 99px; height: 6px; overflow: hidden; }
.progress-bar { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--cc-accent), var(--cc-accent-2)); transition: width .4s; }