/*
 * V244 Phase C1/C2 — Task List (templates/tasks.html) and Task Detail
 * (templates/task_detail.html) polish.
 *
 * Loads after design-tokens-v244.css / ui-normalize-v244.css / users-v244.css
 * so it can rely on --v244-* tokens. Scoped to task-list/task-detail class
 * families only (task-*, td217-*, smart-*, advanced-*, admin-actions-card).
 *
 * No layout properties touched (display/position/flex-direction/grid-
 * template-columns untouched) except the two documented exceptions below,
 * both of which are bugfixes forced by a template edit in this same phase,
 * not redesigns:
 *   - #taskDataGrid .task-col-actions / [data-col="actions"] width: the
 *     action cell now holds two short text buttons ("Sửa"/"Xóa") instead of
 *     two 28x28 icon buttons, so the old 108px column is too narrow.
 *   - .selected-file-item grid-template-columns: this rule assumed a fixed
 *     30px icon column; removing the paperclip emoji from that row (this
 *     phase's emoji cleanup) left an empty 30px column that would clip the
 *     filename, so it collapses to one column.
 *
 * IMPORTANT — #taskDataGrid specificity: static/task-table-polish.css and
 * static/task-layout-v202.css style this table with ID-scoped selectors
 * (`#taskDataGrid .status-badge.status-x`, `#taskDataGrid td[data-col=...]`)
 * plus !important. Class-only selectors (even with !important) LOSE to an
 * ID selector regardless of load order. Every override below that needs to
 * beat one of those rules repeats the same `#taskDataGrid ...` prefix
 * deliberately - do not "simplify" these to bare classes, they will stop
 * taking effect silently (no console error, cascade just resolves the other
 * way).
 *
 * task_detail.html is patched at runtime by
 * v243_security_history.py's _V243TemplateLoader._patch_task_detail(),
 * which inserts a "Lịch sử thay đổi dữ liệu" card reusing the existing
 * `.card.td217-panel` / `.activity-item` classes. Every rule here that
 * targets those classes therefore also styles that runtime-injected card -
 * confirmed by rendering through production_wsgi:app (see completion
 * report). Do not rename td217-panel/activity-item without re-verifying
 * that render.
 */

/* ==========================================================================
   1. Task List — header, quick-action prompt, filter toolbar
   ========================================================================== */

.quick-action-card h3 {
  font-size: var(--v244-text-card-title) !important;
  font-weight: var(--v244-weight-heading) !important;
}
.summary-main h3,
.task-filter-head h3 {
  font-size: var(--v244-text-card-title) !important;
  font-weight: var(--v244-weight-heading) !important;
}

.task-tool-btn {
  border-radius: var(--v244-radius-button);
  border-color: var(--v244-border-strong);
  box-shadow: none;
  font-weight: var(--v244-weight-label);
}
.task-tool-btn:hover {
  transform: none;
  box-shadow: none;
  background: var(--v244-neutral-soft);
}
.task-tool-btn .tool-copy b {
  color: var(--v244-ink);
  font-weight: var(--v244-weight-label);
}
.advanced-tool-btn {
  background: var(--v244-surface);
}

/* Bugfix: style.css's `.task-tool-btn` rule (~line 3205) forces a blue
   background with `!important`, and ui-normalize-v244.css's `.task-tool-btn`
   secondary-button rule (~line 92) overrides that background back to white
   — but style.css's `.task-tool-btn .tool-copy b/small` rule (~line 3224)
   independently forces white text with `!important` and nothing in v244
   beat it, so the button rendered as blank white-on-white. Scope to
   `.task-filter-head .advanced-tool-btn` (two classes) so this reliably
   outweighs style.css's single-class `!important` rules regardless of
   cascade order, and set both background and text explicitly so the two
   legacy layers can't recombine into another invisible state. */
.task-filter-head .advanced-tool-btn {
  background: var(--v244-surface) !important;
  border: 1px solid var(--v244-border-strong) !important;
  color: var(--v244-ink) !important;
  box-shadow: none !important;
}
.task-filter-head .advanced-tool-btn:hover {
  background: var(--v244-neutral-soft) !important;
  border-color: var(--v244-ink-faint) !important;
}
.task-filter-head .advanced-tool-btn .tool-copy b {
  color: var(--v244-ink) !important;
}
.task-filter-head .advanced-tool-btn .tool-copy small {
  color: var(--v244-ink-muted) !important;
}

.task-quick-filter-grid button,
.task-quick-filter-grid .btn {
  font-weight: var(--v244-weight-label) !important;
  border-radius: var(--v244-radius-button) !important;
}

.task-grid-pagebox {
  border-radius: var(--v244-radius-field) !important;
  box-shadow: none !important;
}

.bulk-action-bar {
  border-radius: var(--v244-radius-field);
}

/* ==========================================================================
   2. Task table — status semantics, density, restrained actions
   ========================================================================== */

#taskDataGrid thead th {
  font-weight: var(--v244-weight-label) !important;
}

/* One semantic mapping across all 7 real statuses (app.py TASK_STATUSES),
   overriding task-table-polish.css's 3-state ID-scoped mapping so this
   table matches the same tokens used everywhere else in the app. */
#taskDataGrid .status-badge {
  font-weight: var(--v244-weight-label) !important;
  font-size: var(--v244-text-label) !important;
}
#taskDataGrid .status-badge.status-not_started {
  color: var(--v244-neutral) !important;
  background: var(--v244-neutral-soft) !important;
  border-color: var(--v244-neutral-soft-border) !important;
}
#taskDataGrid .status-badge.status-in_progress,
#taskDataGrid .status-badge.status-experiment_finished,
#taskDataGrid .status-badge.status-dossier_sent {
  color: var(--v244-primary-strong) !important;
  background: var(--v244-primary-soft) !important;
  border-color: var(--v244-primary-soft-border) !important;
}
#taskDataGrid .status-badge.status-dossier_review {
  color: var(--v244-violet) !important;
  background: var(--v244-violet-soft) !important;
  border-color: var(--v244-violet-soft-border) !important;
}
#taskDataGrid .status-badge.status-dossier_need_update {
  color: var(--v244-warning-strong) !important;
  background: var(--v244-warning-soft) !important;
  border-color: var(--v244-warning-soft-border) !important;
}
#taskDataGrid .status-badge.status-completed {
  color: var(--v244-success-strong) !important;
  background: var(--v244-success-soft) !important;
  border-color: var(--v244-success-soft-border) !important;
}
/* Overdue always wins regardless of which status it's paired with.
   task-table-polish.css defines compound `.status-badge.status-X.status-
   overdue` selectors (3 classes) for 4 of the 7 statuses, which beats a
   plain `#taskDataGrid .status-badge.status-overdue` (2 classes) rule on
   specificity alone, load order notwithstanding - repeat the same 3-class
   compound for every real status so this reliably wins for all of them. */
#taskDataGrid .status-badge.status-not_started.status-overdue,
#taskDataGrid .status-badge.status-in_progress.status-overdue,
#taskDataGrid .status-badge.status-experiment_finished.status-overdue,
#taskDataGrid .status-badge.status-dossier_sent.status-overdue,
#taskDataGrid .status-badge.status-dossier_review.status-overdue,
#taskDataGrid .status-badge.status-dossier_need_update.status-overdue,
#taskDataGrid .status-badge.status-completed.status-overdue {
  color: var(--v244-danger-strong) !important;
  background: var(--v244-danger-soft) !important;
  border-color: var(--v244-danger-soft-border) !important;
}

/* Row actions: compact text buttons, edit = neutral, delete = restrained
   (not solid red - it must not dominate every row). Sized to replace the
   old 28x28 icon-only buttons now that the ✎/🗑 glyphs are gone from the
   template. */
#taskDataGrid .task-action-group {
  gap: 6px !important;
}
.task-edit-btn,
.task-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 10px;
  font-size: var(--v244-text-label);
  font-weight: var(--v244-weight-label);
  white-space: nowrap;
}
.task-edit-btn {
  background: var(--v244-neutral-soft) !important;
  color: var(--v244-ink) !important;
  border-color: var(--v244-border) !important;
}
.task-edit-btn:hover {
  background: #eef2f7 !important;
}
.task-delete-btn {
  background: var(--v244-surface) !important;
  color: var(--v244-danger-strong) !important;
  border: 1px solid var(--v244-danger-soft-border) !important;
}
.task-delete-btn:hover {
  background: var(--v244-danger-soft) !important;
}

/* Bugfix (see file header): widen the actions column now that it holds
   text labels, not 28x28 icon buttons. Same selectors/specificity pattern
   task-table-polish.css and task-layout-v202.css already use for this
   column, so this reliably wins by load order. */
#taskDataGrid .task-col-actions,
#taskDataGrid th[data-col="actions"],
#taskDataGrid td[data-col="actions"] {
  width: 132px !important;
  min-width: 132px !important;
  max-width: 132px !important;
}

/* ==========================================================================
   3. Task Detail — remove decorative emoji panel icons
   ========================================================================== */

.task-detail-v217 .td217-panel-title::before {
  display: none;
}

/* ==========================================================================
   4. Task Detail — identity header
   ========================================================================== */

.task-detail-v217 .td217-title-row h1 {
  font-size: var(--v244-text-page-title) !important;
  font-weight: var(--v244-weight-heading) !important;
}

/* ==========================================================================
   5. Task Detail — panels, one card language, tokens radius/shadow
   ========================================================================== */

.task-detail-v217 .td217-panel {
  border-radius: var(--v244-radius-card) !important;
  box-shadow: var(--v244-shadow-card) !important;
}
.task-detail-v217 .td217-panel-title {
  font-size: var(--v244-text-card-title) !important;
  font-weight: var(--v244-weight-heading) !important;
}
.task-detail-v217 .info-grid label {
  font-size: var(--v244-text-label);
  font-weight: var(--v244-weight-label);
  text-transform: none;
}

/* ==========================================================================
   6. Task Detail — status-update action area (visually a form, not a
      passive info card)
   ========================================================================== */

.smart-action-card {
  border: 1px solid var(--v244-primary-soft-border);
  background: var(--v244-primary-soft);
  box-shadow: none !important;
}

/* ==========================================================================
   7. Task Detail — advanced/admin actions: flatten gradients and 900-weight
   ========================================================================== */

.admin-actions-card {
  border-color: var(--v244-border);
  background: var(--v244-surface);
  box-shadow: none !important;
  border-radius: var(--v244-radius-card);
}
.advanced-kicker {
  background: var(--v244-primary-soft);
  border-color: var(--v244-primary-soft-border);
  color: var(--v244-primary-strong);
  font-weight: var(--v244-weight-label);
}
.advanced-badge {
  background: var(--v244-neutral-soft);
  color: var(--v244-ink-muted);
  font-weight: var(--v244-weight-label);
  box-shadow: none;
}
.advanced-header h3 {
  font-size: var(--v244-text-card-title);
  font-weight: var(--v244-weight-heading);
}

.smart-details {
  border-radius: var(--v244-radius-field);
  border-color: var(--v244-border);
  box-shadow: none;
}
.smart-details:hover {
  box-shadow: none;
}
.smart-details summary {
  background: var(--v244-surface);
  font-weight: var(--v244-weight-label);
  border-radius: var(--v244-radius-field);
}
.smart-details[open] summary {
  border-radius: var(--v244-radius-field) var(--v244-radius-field) 0 0;
}
.smart-details form {
  border-radius: 0 0 var(--v244-radius-field) var(--v244-radius-field);
}
.advanced-summary-copy b {
  font-size: var(--v244-text-body);
  font-weight: var(--v244-weight-label);
  color: var(--v244-ink);
}

/* ==========================================================================
   8. Task Detail — activity / comments / history rhythm
   ========================================================================== */

.activity-item {
  border-color: var(--v244-border);
  background: var(--v244-surface);
  border-radius: var(--v244-radius-field);
  font-size: var(--v244-text-body);
}
.attachment-item {
  border-color: var(--v244-border);
  background: var(--v244-surface);
  border-radius: var(--v244-radius-field);
}
.file-chip {
  color: var(--v244-primary-strong);
  font-weight: var(--v244-weight-label);
}
.note-box,
.plan-box.compact span {
  border-color: var(--v244-border);
  background: var(--v244-neutral-soft);
}
.td217-empty {
  border-radius: var(--v244-radius-field);
}

/* Bugfix (see file header): the selected-file preview row assumed a fixed
   30px icon column; the paperclip emoji in that column was removed in this
   phase's cleanup, so collapse to a single column instead of leaving a
   clipped 30px gap in front of the filename. */
.selected-file-item {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* ==========================================================================
   9. Task Detail — status history / data-change-history / email tables
   ========================================================================== */

.history-email-grid table {
  font-size: var(--v244-text-table);
}
.history-email-grid th {
  font-weight: var(--v244-weight-label);
}