/*
 * V244 UI normalization layer.
 *
 * Goal: visual consistency across the 5 CSS "generations" documented in
 * docs/UI_UX_AUDIT_V244.md (section 2/7), without rewriting templates and
 * without touching layout (display/position/flex-direction/grid-template).
 * Only color, radius, shadow, border, typography and other purely cosmetic
 * properties are set here.
 *
 * This file must load LAST (after design-tokens-v244.css) so it reliably
 * wins the cascade. Several earlier files (enterprise-saas-v221.css,
 * task-checkbox-v205.css, style.css's .status-badge rules) already use
 * !important to fight earlier layers; this file uses !important only where
 * needed to beat those specific declarations, not by default.
 *
 * Legacy page-prefixed classes (saas-*, cc220-*, dv216-*, td217-*, v106-*,
 * users-*) are intentionally kept as selectors here rather than renamed in
 * markup — aliasing them to the same tokens is the low-risk way to unify
 * their look in Phase B. Do not delete the legacy rule blocks that already
 * style these classes elsewhere; this file only adds overrides.
 *
 * NOTE for templates/users.html specifically: keep the exact markup of
 * `<a class="saas-edit-btn" ...>✎ Sửa</a>` unmatched by
 * v243_security_history.py's `_patch_users` regex when restyling — see
 * docs/UI_UX_AUDIT_V244.md section 0.1 for why (a dormant runtime patch
 * would otherwise silently start injecting a list-level reset button that
 * the V244 brief explicitly says should not be there).
 */

/* ==========================================================================
   1. Buttons
   ========================================================================== */

.btn,
.saas-primary-btn,
.saas-search-btn,
.saas-clear-btn,
.saas-edit-btn,
.saas-delete-btn,
.cc220-primary-btn,
.dv216-primary-btn,
.users-primary-btn,
.primary-action,
.task-edit-btn,
.task-delete-btn,
.task-icon-btn,
.task-tool-btn {
  font-family: inherit;
  font-weight: var(--v244-weight-label) !important;
  font-size: var(--v244-text-body);
  border-radius: var(--v244-radius-button) !important;
  transition: background-color var(--v244-transition-fast),
    border-color var(--v244-transition-fast), color var(--v244-transition-fast),
    box-shadow var(--v244-transition-fast);
  box-shadow: none !important;
}

.btn {
  border: 1px solid transparent;
  padding: 9px 16px;
}

/* Primary: single action per screen (Save / Create / Submit). */
.btn.primary,
.saas-primary-btn,
.cc220-primary-btn,
.dv216-primary-btn,
.users-primary-btn,
.primary-action,
.btn:not(.secondary):not(.danger):not(.ghost):not(.success):not(.small):not(.mini) {
  background: var(--v244-primary) !important;
  border-color: var(--v244-primary) !important;
  color: #fff !important;
}
.btn.primary:hover,
.saas-primary-btn:hover,
.cc220-primary-btn:hover,
.dv216-primary-btn:hover,
.users-primary-btn:hover,
.primary-action:hover,
.btn:not(.secondary):not(.danger):not(.ghost):not(.success):not(.small):not(.mini):hover {
  background: var(--v244-primary-strong) !important;
  border-color: var(--v244-primary-strong) !important;
}

/* Secondary: Cancel / Back / Edit / Filter. */
.btn.secondary,
.saas-search-btn,
.saas-clear-btn,
.saas-edit-btn,
.task-edit-btn,
.task-tool-btn {
  background: var(--v244-surface) !important;
  border: 1px solid var(--v244-border-strong) !important;
  color: var(--v244-ink) !important;
}
.btn.secondary:hover,
.saas-search-btn:hover,
.saas-clear-btn:hover,
.saas-edit-btn:hover,
.task-edit-btn:hover,
.task-tool-btn:hover {
  background: var(--v244-neutral-soft) !important;
  border-color: var(--v244-ink-faint) !important;
}

/* Ghost / tertiary: View / Clear filter / low-emphasis utility. */
.btn.ghost,
.saas-clear-btn {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--v244-ink-muted) !important;
}
.btn.ghost:hover,
.saas-clear-btn:hover {
  background: var(--v244-neutral-soft) !important;
  color: var(--v244-ink) !important;
}

/* Danger: Delete / destructive only. */
.btn.danger,
.saas-delete-btn,
.task-delete-btn {
  background: var(--v244-danger) !important;
  border: 1px solid var(--v244-danger) !important;
  color: #fff !important;
}
.btn.danger:hover,
.saas-delete-btn:hover,
.task-delete-btn:hover {
  background: var(--v244-danger-strong) !important;
  border-color: var(--v244-danger-strong) !important;
}

/* Success (used for explicit export/confirm actions distinct from primary). */
.btn.success {
  background: var(--v244-success) !important;
  border: 1px solid var(--v244-success) !important;
  color: #fff !important;
}
.btn.success:hover {
  background: var(--v244-success-strong) !important;
}

.btn.small,
.saas-edit-btn,
.saas-delete-btn,
.task-icon-btn {
  padding: 6px 12px;
  font-size: var(--v244-text-label);
}

.btn:disabled,
.btn.disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none !important;
}

.btn:focus-visible,
a.saas-edit-btn:focus-visible,
a.saas-delete-btn:focus-visible {
  outline: none;
  box-shadow: var(--v244-focus-ring) !important;
}

/* ==========================================================================
   2. Badges / status pills / role pills
   Semantic mapping uses the real enum values from app.py (TASK_STATUSES,
   CONTRACT_STATUSES, USER_STATUS_LABELS) — see docs/UI_UX_AUDIT_V244.md.
   ========================================================================== */

.badge,
.status-badge {
  font-weight: var(--v244-weight-label) !important;
  font-size: var(--v244-text-label) !important;
  border-radius: var(--v244-radius-pill) !important;
  padding: 4px 10px !important;
  line-height: 1.3;
  border: 1px solid transparent;
}

/* Task status — neutral (not started) */
.badge.not_started,
.status-not_started {
  background: var(--v244-neutral-soft) !important;
  color: var(--v244-neutral) !important;
  border-color: var(--v244-neutral-soft-border) !important;
}
/* Task status — in flow (in progress / experiment finished / dossier sent / dossier review) */
.badge.in_progress,
.status-in_progress,
.badge.experiment_finished,
.status-experiment_finished,
.badge.dossier_sent,
.status-dossier_sent {
  background: var(--v244-primary-soft) !important;
  color: var(--v244-primary-strong) !important;
  border-color: var(--v244-primary-soft-border) !important;
}
.badge.dossier_review,
.status-dossier_review {
  background: var(--v244-violet-soft) !important;
  color: var(--v244-violet) !important;
  border-color: var(--v244-violet-soft-border) !important;
}
/* Task status — needs attention */
.badge.dossier_need_update,
.status-dossier_need_update {
  background: var(--v244-warning-soft) !important;
  color: var(--v244-warning-strong) !important;
  border-color: var(--v244-warning-soft-border) !important;
}
/* Task status — done */
.badge.completed,
.status-completed {
  background: var(--v244-success-soft) !important;
  color: var(--v244-success-strong) !important;
  border-color: var(--v244-success-soft-border) !important;
}
/* Overdue overrides whichever status badge it's paired with. */
.status-overdue {
  background: var(--v244-danger-soft) !important;
  color: var(--v244-danger-strong) !important;
  border-color: var(--v244-danger-soft-border) !important;
}

/* Contract status */
.badge.active {
  background: var(--v244-success-soft) !important;
  color: var(--v244-success-strong) !important;
  border-color: var(--v244-success-soft-border) !important;
}
.badge.closed {
  background: var(--v244-neutral-soft) !important;
  color: var(--v244-neutral) !important;
  border-color: var(--v244-neutral-soft-border) !important;
}
.badge.cancelled {
  background: var(--v244-warning-soft) !important;
  color: var(--v244-warning-strong) !important;
  border-color: var(--v244-warning-soft-border) !important;
}

/* Generic semantic aliases used in a handful of places. */
.badge.success {
  background: var(--v244-success-soft) !important;
  color: var(--v244-success-strong) !important;
  border-color: var(--v244-success-soft-border) !important;
}
.badge.warning {
  background: var(--v244-warning-soft) !important;
  color: var(--v244-warning-strong) !important;
  border-color: var(--v244-warning-soft-border) !important;
}
.badge.danger {
  background: var(--v244-danger-soft) !important;
  color: var(--v244-danger-strong) !important;
  border-color: var(--v244-danger-soft-border) !important;
}
.badge.info {
  background: var(--v244-primary-soft) !important;
  color: var(--v244-primary-strong) !important;
  border-color: var(--v244-primary-soft-border) !important;
}

/* User management pills (role / account status / MFA). */
.saas-role-pill,
.saas-status-pill,
.saas-mfa-pill {
  font-weight: var(--v244-weight-label) !important;
  font-size: var(--v244-text-label) !important;
  border-radius: var(--v244-radius-pill) !important;
  padding: 4px 10px !important;
  border: 1px solid transparent;
}
.saas-role-pill {
  background: var(--v244-neutral-soft) !important;
  color: var(--v244-ink) !important;
  border-color: var(--v244-neutral-soft-border) !important;
}
.saas-status-pill.active {
  background: var(--v244-success-soft) !important;
  color: var(--v244-success-strong) !important;
  border-color: var(--v244-success-soft-border) !important;
}
.saas-status-pill.pending {
  background: var(--v244-warning-soft) !important;
  color: var(--v244-warning-strong) !important;
  border-color: var(--v244-warning-soft-border) !important;
}
.saas-status-pill.inactive {
  background: var(--v244-neutral-soft) !important;
  color: var(--v244-neutral) !important;
  border-color: var(--v244-neutral-soft-border) !important;
}
.saas-status-pill.locked {
  background: var(--v244-danger-soft) !important;
  color: var(--v244-danger-strong) !important;
  border-color: var(--v244-danger-soft-border) !important;
}
.saas-mfa-pill.on {
  background: var(--v244-success-soft) !important;
  color: var(--v244-success-strong) !important;
  border-color: var(--v244-success-soft-border) !important;
}
.saas-mfa-pill.off {
  background: var(--v244-neutral-soft) !important;
  color: var(--v244-neutral) !important;
  border-color: var(--v244-neutral-soft-border) !important;
}

/* ==========================================================================
   3. Form controls
   ========================================================================== */

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.combo-input {
  border-radius: var(--v244-radius-field) !important;
  border-color: var(--v244-border-strong);
  font-size: var(--v244-text-body);
  color: var(--v244-ink);
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus,
.combo-input:focus {
  outline: none;
  border-color: var(--v244-primary) !important;
  box-shadow: var(--v244-focus-ring) !important;
}

label {
  font-size: var(--v244-text-label);
  font-weight: var(--v244-weight-label);
  color: var(--v244-ink-muted);
}

.hint,
small,
.muted.small {
  font-size: var(--v244-text-helper);
  font-weight: var(--v244-weight-helper);
}

/* ==========================================================================
   4. Cards / panels
   ========================================================================== */

.card,
.cc220-panel,
.td217-panel,
.dv216-panel,
.saas-table-card,
.saas-create-box,
.user-edit-modern-card {
  border-radius: var(--v244-radius-card) !important;
  box-shadow: var(--v244-shadow-card) !important;
  border: 1px solid var(--v244-border);
}

/* ==========================================================================
   5. Page headers
   ========================================================================== */

.topbar h1,
.saas-page-header h1,
.cc220-header-text h1,
.dv216-header-text h1,
.users-hero h1 {
  font-size: var(--v244-text-page-title) !important;
  font-weight: var(--v244-weight-heading) !important;
  color: var(--v244-ink);
}

h3.td217-panel-title,
.saas-table-head h2,
.cc220-panel-title,
.users-section-title h3,
.dv216-panel-title {
  font-size: var(--v244-text-section-title) !important;
  font-weight: var(--v244-weight-heading) !important;
}

/* ==========================================================================
   6. Tables
   ========================================================================== */

table {
  font-size: var(--v244-text-table);
}
table th {
  font-size: var(--v244-text-label);
  font-weight: var(--v244-weight-label);
  color: var(--v244-ink-muted);
  text-transform: none;
}

/* ==========================================================================
   7. Pagination
   ========================================================================== */

.page-buttons .btn,
.pagination .btn {
  border-radius: var(--v244-radius-button) !important;
}
.page-buttons .btn.active {
  background: var(--v244-primary) !important;
  border-color: var(--v244-primary) !important;
  color: #fff !important;
}

/* ==========================================================================
   8. Alerts / flash messages
   ========================================================================== */

.flash {
  border-radius: var(--v244-radius-field);
  font-size: var(--v244-text-body);
  border: 1px solid transparent;
}
.flash.success {
  background: var(--v244-success-soft);
  color: var(--v244-success-strong);
  border-color: var(--v244-success-soft-border);
}
.flash.danger {
  background: var(--v244-danger-soft);
  color: var(--v244-danger-strong);
  border-color: var(--v244-danger-soft-border);
}
.flash.warning {
  background: var(--v244-warning-soft);
  color: var(--v244-warning-strong);
  border-color: var(--v244-warning-soft-border);
}
.flash.info {
  background: var(--v244-primary-soft);
  color: var(--v244-primary-strong);
  border-color: var(--v244-primary-soft-border);
}