/* ANTA: single source of color tokens for every screen. */
:root{
  --brand:#0B3A75;
  --royal:#1E5EFF;
  --royal-soft:#E8EEFF;
  --sun:#FFB020;
  --bg:#EDF2FA;
  --line:#E1E8F2;
  --ink:#0F1F38;
  --muted:#5B6B82;
  --red:#E5484D;
  --red-soft:#FFEBEC;
  --red-ink:#B42318;
  --orange:#F5821F;
  --orange-soft:#FFF1E3;
  --orange-ink:#B54708;
  --violet:#7C5CFF;
  --violet-soft:#F0ECFF;
  --violet-ink:#5B3FD6;
  --green:#12A150;
  --green-soft:#E3F8EC;
  --green-ink:#0B7A3C;
  --surface:#FFFFFF;
  --input-border:#D5DEEB;
  --input-hover:#B6C4DA;
  --placeholder:#9AA8BC;
  --avatar-teal:#0E9F8E;
  --avatar-pink:#E2557A;
  --avatar-gold:#F08C00;
  --surface-alpha-20:rgb(255 255 255 / 0.125);
  --ink-alpha-40:rgb(15 31 56 / 0.251);
  --ink-alpha-88:rgb(15 31 56 / 0.533);
  --brand-alpha-05:rgb(11 58 117 / 0.02);
  --ink-alpha-22:rgb(15 31 56 / 0.133);
  --surface-alpha-22:rgb(255 255 255 / 0.133);
  --surface-alpha-28:rgb(255 255 255 / 0.157);
  --brand-alpha-08:rgb(11 58 117 / 0.031);
  --shadow-8:rgba(190,18,60,.10);
  --shadow-9:rgba(255,255,255,.9);
  --shadow-10:rgba(220,38,38,.23);
  --shadow-11:rgba(220,38,38,.18);
  --brand-alpha-10:rgb(11 58 117 / 0.063);
  --surface-alpha-14:rgb(255 255 255 / 0.078);
  --surface-alpha-30:rgb(255 255 255 / 0.188);
  --surface-alpha-24:rgb(255 255 255 / 0.141);
  --ink-alpha-66:rgb(15 31 56 / 0.4);
  --ink-alpha-08:rgb(15 31 56 / 0.031);
  --surface-alpha-18:rgb(255 255 255 / 0.094);
  --surface-alpha-44:rgb(255 255 255 / 0.267);
  --brand-alpha-22:rgb(11 58 117 / 0.133);
  --bg-alpha-55:rgb(237 242 250 / 0.333);
  --royal-soft-alpha-66:rgb(232 238 255 / 0.4);
  --red-alpha-44:rgb(229 72 77 / 0.267);
  --f:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif;
  --shadow:0 1px 2px rgb(11 58 117 / .06),0 8px 24px rgb(11 58 117 / .08);
  --focus-ring:0 0 0 3px rgb(30 94 255 / .16);
  --error-ring:0 0 0 3px rgb(229 72 77 / .14);
  --anta-primary:var(--royal);--anta-secondary:var(--royal);--anta-primary-hover:var(--brand);
  --anta-canvas:var(--bg);--anta-surface:var(--surface);--anta-text:var(--ink);--anta-text-muted:var(--muted);--anta-border:var(--line);
  --anta-success:var(--green);--anta-warning:var(--orange);--anta-danger:var(--red);
  font-family:var(--f);color:var(--ink);background:var(--bg);
}
body,.td-overview-page{background:var(--bg);font-family:var(--f)}
.sidebar,.td-overview-page .sidebar,.wk-today{background:var(--brand)}
h1,h2,h3{color:var(--brand)}
a{color:var(--royal)}
.panel,.ov-card,.ov-kpi,.ov-week,.wk-list,.pf-person,.cd-card,.wp-task-card{border:0;border-radius:15px;box-shadow:var(--shadow)}
.primary,.ov-button.primary,.wk-main,.wk-save{background:var(--royal);border-color:var(--royal);color:var(--surface)}
.wk-sequence{background:var(--sun);color:var(--ink)}
.wk-main.red,.wk-save[data-save-mode=replace]{background:var(--red);border-color:var(--red)}
.wk-main.violet,.wk-save[data-save-mode=start]{background:var(--violet);border-color:var(--violet)}
.wk-save[data-save-mode=done],[data-cd-approve],.ov-button.ok{background:var(--green);border-color:var(--green);color:var(--surface)}
.wk-row.red,.wp-task-row.red,.ov-row:has(.ov-dot.red),.ov-row:has(.ov-dot.fix){border-left:4px solid var(--red)}
.wk-row[data-work-state=fix],.ov-row:has(.ov-dot.fix){background:linear-gradient(90deg,var(--red-soft),var(--surface))}
.wk-row.amber,.wp-task-row.amber,.ov-row:has(.ov-dot:not(.red):not(.fix):not(.new)){border-left:4px solid var(--orange)}
.wk-row.violet,.wp-task-row.violet,.ov-row:has(.ov-dot.new){border-left:4px solid var(--violet)}
.ov-dot.new{border-color:var(--violet);background:var(--violet)}
.wk-state.red,.wp-tag.red{color:var(--red);background:var(--red-soft)}
.wk-state.amber,.wp-tag.amber{color:var(--orange);background:var(--orange-soft)}
.wk-state.violet,.wp-tag.violet{color:var(--violet);background:var(--violet-soft)}
.wk-state,.wp-tag.green{color:var(--green);background:var(--green-soft)}
.wp-tag.blue,.ov-tag.wait{color:var(--royal);background:var(--royal-soft)}
.cd-status-bar .cho_kiem{background:var(--royal)}
.cd-review-row:has([data-cd-revise]) .badge{color:var(--royal);background:var(--royal-soft)}
.wk-due.amber,.wt-bar.soon{color:var(--orange-ink);background:var(--orange-soft)}
.customer-avatar{display:inline-grid;place-items:center;flex-shrink:0;width:36px;height:36px;border-radius:10px;background:var(--avatar-color);color:var(--surface);font-size:12px;font-weight:800;vertical-align:middle;margin-right:8px}
.avatar-0{--avatar-color:var(--royal)}.avatar-1{--avatar-color:var(--avatar-teal)}.avatar-2{--avatar-color:var(--avatar-pink)}.avatar-3{--avatar-color:var(--avatar-gold)}.avatar-4{--avatar-color:var(--violet)}.avatar-5{--avatar-color:var(--brand)}

.ov-button[data-td-action=replace]{background:var(--red);border-color:var(--red);color:var(--surface)}
.contract-list-table tr:has(.work-icon.red)>td:first-child{border-left:4px solid var(--red)}
.contract-list-table tr:has(.work-icon.amber)>td:first-child{border-left:4px solid var(--orange)}

.wk-block.next{background:var(--royal-soft);border-color:var(--royal-soft)}
.wk-block.done{background:var(--green-soft);border-color:var(--green)}
.wk-block.fix{background:var(--red-soft);border-color:var(--red)}
.cd-motion.running{color:var(--royal)}
.ov-dot.red,.ov-dot.fix,.ov-kpi.red>b,.td-red{color:var(--red)}
.ov-kpi.red{border-left:4px solid var(--red)}.ov-kpi.amber{border-left:4px solid var(--orange)}
.ov-kpi.amber>b,.td-amber,.doing-issue{color:var(--orange)}
.ov-tag.fix{background:var(--red-soft);color:var(--red)}.ov-tag.ok{background:var(--green-soft);color:var(--green)}