/* Global UI unification for the platform */
:root {
  --brand: #2563eb;
  --brand-600: #1d4ed8;
  --bg: #f7f9fc;
  --card: #ffffff;
  --muted: #475569;
  --border: #e5e7eb;
  --text: #111827;
}

html, body { background: var(--bg); }
body { color: var(--text); }

/* Buttons */
.btn { border-radius: 8px; padding: 6px 12px; font-size: 14px; }
.dark .btn { background: #374151; color: var(--text); border-color: var(--border); }
.dark .btn:hover { filter: brightness(1.1); }
.btn-primary, .btn-success { background: var(--brand); border-color: var(--brand); }
.btn-primary:hover, .btn-success:hover { background: var(--brand-600); border-color: var(--brand-600); }
.btn-outline-primary { color: var(--brand); border-color: var(--brand); }
.btn-outline-primary:hover { color: #fff; background: var(--brand); border-color: var(--brand); }
/* Filled variants */
.btn-secondary { background: var(--card); border: 1px solid var(--border); color: var(--text); }
.btn-secondary:hover { filter: brightness(0.98); }
.btn-danger { background: #fee2e2; border: 1px solid #fca5a5; color: #b91c1c; }
.btn-danger:hover { background: #fecaca; }
.dark .btn-danger { background: #3b1f1f; border-color: #7f1d1d; color: #fecaca; }
.dark .btn-danger:hover { background: #4c2323; }
/* Outline variants defaults (light) */
.btn-outline-secondary { color: #334155; border-color: #94a3b8; }
.btn-outline-warning { color: #b45309; border-color: #f59e0b; }
.btn-outline-danger { color: #b91c1c; border-color: #ef4444; }

/* Tables */
.table { background: var(--card); border-radius: 10px; overflow: hidden; }
.table thead th { background: #f6f7fb; color: #111827; border-bottom: 1px solid var(--border); }
.table-hover tbody tr:hover { background: #f9fafb; }

/* Badges */
.badge-role { background: #eef2ff; color: #3f51b5; border: 1px solid #d7ddff; }

/* Cards */
.card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 16px rgba(0,0,0,.06); }

/* Forms */
input.form-control, select.form-select { border-radius: 8px; }
/* Generic inputs used across tools */
.input-file { padding: 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--text); font-size: 14px; }
.dark .input-file { background: #0b1222; }
textarea.input-area { width: 100%; border-radius: 8px; border: 1px solid var(--border); padding: 8px; font-size: 14px; background: var(--card); color: var(--text); }
.dark textarea.input-area { background: #0b1222; }

/* Utilities */
.muted { color: var(--muted); }
.status-dot { font-size: 18px; }
/* Status badges for results */
.status-badge { display: inline-block; padding: 2px 8px; border-radius: 9999px; font-weight: 600; font-size: 12px; border: 1px solid transparent; }
.status-success { background: #dcfce7; color: #166534; border-color: #86efac; }
.status-fail { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.dark .status-success { background: #052e1a; color: #86efac; border-color: #14532d; }
.dark .status-fail { background: #3b1f1f; color: #fecaca; border-color: #7f1d1d; }
/* Ensure generic text is readable in dark mode */
.dark h1, .dark h2, .dark h3, .dark p, .dark label, .dark td, .dark th, .dark .title { color: var(--text) !important; }
.dark a { color: #93c5fd; }
.dark ::placeholder { color: #94a3b8; }

/* Common containers used across admin pages */
.dark .role-wrap, .dark .users-wrap, .dark .log-wrap, .dark .page-wrap, .dark .admin-card { background: var(--card); color: var(--text); border-color: var(--border); }
.dark .cell { background: #0b1222; border-color: var(--border); }
.dark .icon-btn { background: #0b1222; color: var(--text); border-color: var(--border); }
.dark .icon-btn:hover { background: #0f172a; }

/* Dark mode */
.dark {
  --bg: #0f172a;          /* slate-900 */
  --card: #111827;        /* gray-900 */
  --muted: #cbd5e1;       /* slate-300 */
  --border: #334155;      /* slate-700 */
  --text: #e5e7eb;        /* gray-200 */
}

.dark html, .dark body { background: var(--bg); }
.dark body { color: var(--text); }
.dark .table { background: var(--card); }
.dark .table thead th { background: #1f2937; color: #e5e7eb; border-bottom-color: var(--border); }
.dark .table-hover tbody tr:hover { background: #0b1222; }
.dark .card { background: var(--card); border-color: var(--border); box-shadow: 0 8px 16px rgba(0,0,0,.4); }
.dark .btn-outline-primary { color: #93c5fd; border-color: #60a5fa; }
.dark .btn-outline-primary:hover { color: #0b1222; background: #60a5fa; border-color: #60a5fa; }
.dark .btn-outline-secondary { color: #cbd5e1; border-color: #64748b; }
.dark .btn-outline-secondary:hover { color: #0b1222; background: #cbd5e1; border-color: #cbd5e1; }
.dark .btn-outline-warning { color: #fde68a; border-color: #fbbf24; }
.dark .btn-outline-warning:hover { color: #0b1222; background: #fbbf24; border-color: #fbbf24; }
.dark .btn-outline-danger { color: #fecaca; border-color: #f87171; }
.dark .btn-outline-danger:hover { color: #0b1222; background: #f87171; border-color: #f87171; }
.dark .nav-buttons button { background: rgba(55,65,81,0.85); }
.dark .nav-user { color: var(--text); }
.dark .site-ver { color: #94a3b8; }
.dark input.form-control, .dark select.form-select { background: #0b1222; color: var(--text); border-color: var(--border); }
.dark .modal-content { background: #0b1222; color: var(--text); }

/* Generic tables for results */
.result-table { border-collapse: collapse; width: 100%; background: var(--card); color: var(--text); border: 1px solid var(--border); }
.result-table th, .result-table td { padding: 8px; border-bottom: 1px solid var(--border); }
.result-table thead th { background: #f6f7fb; color: #111827; }
.dark .result-table thead th { background: #1f2937; color: var(--text); }
.result-table tbody tr:hover { background: #f9fafb; }
.dark .result-table tbody tr:hover { background: #0b1222; }

/* Progress bars */
.progress-track { width: 100%; background: #e5e7eb; border-radius: 6px; overflow: hidden; }
.dark .progress-track { background: #334155; }
.progress-bar { height: 20px; width: 0%; background: var(--brand); border-radius: 6px; transition: width 0.3s; }

/* Home page cards */
.card .name { color: #0d6efd; }
.dark .card .name { color: #93c5fd; }
.icon { color: #16a34a; }
.dark .icon { color: #34d399; }

/* Badges in dark */
.dark .badge-role { background: #1e293b; color: #cbd5e1; border-color: #334155; }
/* Code snippets */
code { background: #eef2ff; color: #1f2937; padding: 0 4px; border-radius: 4px; }
.dark code { background: #0b1222; color: #e5e7eb; border: 1px solid var(--border); }