:root {
    --xai-bg: #0a0a0a;
    --xai-fg: #f5f5f5;
    --xai-muted: #9a9a9a;
    --xai-border: #2a2a2a;
    --xai-accent: #ffffff;
}

body.xai-body {
    background: var(--xai-bg);
    color: var(--xai-fg);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    min-height: 100vh;
    /* Bootstrap 5 placeholder dùng --bs-secondary-color; mặc định tối, không đọc được trên input đen */
    --bs-body-color: #f5f5f5;
    --bs-body-bg: #0a0a0a;
    --bs-secondary-color: #757575;
    --bs-tertiary-color: #9a9a9a;
}

.brand {
    color: var(--xai-accent);
    font-weight: 600;
    letter-spacing: 0.12em;
    font-size: 0.95rem;
}

.tracking {
    letter-spacing: 0.08em;
}

.nav-link-inline {
    color: var(--xai-muted);
    text-decoration: none;
}

.nav-link-inline:hover {
    color: var(--xai-fg);
}

.card-xai {
    background: #111;
    border: 1px solid var(--xai-border);
    border-radius: 0;
    color: var(--xai-fg);
}

.card-xai h1,
.card-xai h2,
.card-xai h3,
.card-xai h4,
.card-xai h5,
.card-xai h6,
.card-xai label,
.card-xai p,
.card-xai .form-label {
    color: var(--xai-fg);
}

.card-xai .form-text {
    color: var(--xai-muted);
}

.card-xai .card-header {
    background: transparent;
    border-bottom: 1px solid var(--xai-border);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.75rem;
    color: var(--xai-muted);
}

.form-control,
.form-select,
textarea.form-control {
    background: #0a0a0a;
    border: 1px solid var(--xai-border);
    color: var(--xai-fg);
    border-radius: 0;
}

.form-control:focus,
.form-select:focus {
    background: #0a0a0a;
    color: var(--xai-fg);
    border-color: #555;
    box-shadow: none;
}

/* Placeholder: tối hơn .form-text (#9a9a9a), sáng hơn nền input */
body.xai-body .form-control::placeholder,
body.xai-body textarea.form-control::placeholder,
body.xai-body .form-select::placeholder {
    color: #757575 !important;
    opacity: 1 !important;
}

body.xai-body .form-control::-webkit-input-placeholder,
body.xai-body textarea.form-control::-webkit-input-placeholder {
    color: #757575 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #757575;
}

body.xai-body .form-control::-moz-placeholder,
body.xai-body textarea.form-control::-moz-placeholder {
    color: #757575 !important;
    opacity: 1 !important;
}

.btn-xai {
    background: var(--xai-fg);
    color: #000;
    border: none;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.8rem;
    padding: 0.55rem 1.2rem;
}

.btn-xai:hover {
    background: #ddd;
    color: #000;
}

.btn-outline-xai {
    background: transparent;
    color: var(--xai-fg);
    border: 1px solid var(--xai-border);
    border-radius: 0;
}

.table-xai {
    --bs-table-bg: #111;
    --bs-table-color: var(--xai-fg);
    --bs-table-border-color: var(--xai-border);
    --bs-table-striped-bg: #161616;
    --bs-table-striped-color: var(--xai-fg);
    --bs-table-hover-bg: #1a1a1a;
    --bs-table-hover-color: var(--xai-fg);
    color: var(--xai-fg);
    margin-bottom: 0;
}

.table-xai thead th {
    background: #1a1a1a;
    color: var(--xai-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.72rem;
    font-weight: 600;
    border-bottom: 1px solid var(--xai-border);
}

.table-xai td,
.table-xai th {
    border-color: var(--xai-border);
    vertical-align: middle;
}

.table-xai tbody tr {
    background: #111;
}

.alert-xai {
    background: #1a1a1a;
    border: 1px solid var(--xai-border);
    color: var(--xai-fg);
    border-radius: 0;
    font-size: 0.875rem;
}

.alert-xai-success {
    border-color: #2d4a3a;
    color: #9fd4b0;
}

.alert-xai-danger {
    border-color: #4a2d2d;
    color: #e8a0a0;
}

.badge-role {
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.35em 0.65em;
    border-radius: 0;
}

.badge-role-admin {
    background: var(--xai-fg);
    color: #000;
}

.badge-role-member {
    background: #2a2a2a;
    color: var(--xai-muted);
    border: 1px solid var(--xai-border);
}

.text-muted-xai {
    color: var(--xai-muted) !important;
}

.progress {
    background: #1a1a1a;
    border-radius: 0;
    height: 6px;
}

.progress-bar {
    background: var(--xai-fg);
}

.status-done { color: #7dcea0; }
.status-failed { color: #e74c3c; }
.status-pending { color: var(--xai-muted); }
.status-running { color: #f1c40f; }

/* File picker: nền sáng, chữ đen (tương phản với card tối) */
.file-drop-xai {
    position: relative;
}

.file-drop-xai-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.file-drop-xai-surface {
    display: block;
    padding: 1rem 1.1rem;
    background: #f5f5f5;
    border: 1px solid #d4d4d4;
    color: #0a0a0a;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    margin: 0;
}

.file-drop-xai-cta {
    display: inline-block;
    background: #0a0a0a;
    color: #f5f5f5;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.45rem 0.85rem;
    margin-bottom: 0.55rem;
}

.file-drop-xai-hint {
    display: block;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #3a3a3a;
}

.file-drop-xai:hover .file-drop-xai-surface,
.file-drop-xai:focus-within .file-drop-xai-surface {
    border-color: #0a0a0a;
    background: #fff;
}

.file-drop-xai.is-dragover .file-drop-xai-surface {
    border-color: #0a0a0a;
    background: #fff;
    outline: 2px solid #0a0a0a;
    outline-offset: 2px;
}

.file-drop-xai.has-files .file-drop-xai-hint {
    color: #0a0a0a;
    font-weight: 500;
}