/* ============================================================================
   DTV unified theme — ports the admin dashboard's design language everywhere
   ----------------------------------------------------------------------------
   The admin dash (public/static/dash/dash.css) is the source of truth:

     ink        #0F1B26     page       #F7FAFA     panel      #FFFFFF
     muted      #5B6B77     rules      #DCE3E7     radius     16px
     ok         #1E8A5B     warn       #B7791F     bad        #C0392B
     type       Inter, .72 / .8125 / .9375 / 1.3125rem

   Historically the tenant portal, mentor portal and SME portal each declared
   their own palette in a <style> block: navy #0a2540, cyan #0891b2, orange
   #f97316, Space Grotesk, 135deg gradients on every button and 16px coloured
   shadows under every card. That is the "old design" — a different product
   wearing the same name.

   Two layers are needed, because the old surfaces are built two different ways:

     1. This file. Loaded LAST on every shell, it re-points the legacy variable
        names (--primary, --surface, --text, --border …) at the dash palette and
        flattens the components that were defined by class. Anything written
        against the old variables converts without touching a call site.

     2. The inline renderers. Check-ins, documents and the proof-upload dialog
        were string-concatenated with literal hex (#f59e0b, #10b981, #0f172a),
        so no stylesheet can reach them. Those were rewritten to emit the
        .dtv-* classes defined at the bottom of this file.

   Rules here are deliberately specific (body .card rather than .card) so they
   win over the inline shell blocks regardless of source order.
   ========================================================================= */

:root {
  /* ── Ink ─────────────────────────────────────────────────────────────── */
  --primary: #0F1B26; --primary-light: #1B2C3A; --primary-dark: #0A121A;
  /* ── Semantic. Dash values, with light washes derived from them. ─────── */
  --accent: #1E8A5B; --accent-light: #EAF5F0; --accent-dark: #166B47;
  --orange: #B7791F; --orange-light: #FBF3E4; --orange-dark: #8F5E14;
  --success: #1E8A5B; --success-light: #EAF5F0; --success-dark: #166B47;
  --warning: #B7791F; --warning-light: #FBF3E4; --warning-dark: #8F5E14;
  --danger: #C0392B; --danger-light: #FBEDEB; --danger-dark: #96291F;
  --info: #2E6EA8; --info-light: #EAF1F8; --info-dark: #22527D;
  --purple: #5B5BD6; --purple-light: #EEEEFB;
  /* ── Surfaces ────────────────────────────────────────────────────────── */
  --surface: #fff; --surface-2: #F7FAFA; --surface-3: #EAEFF2;
  --border: #DCE3E7; --border-light: #EAEFF2;
  /* ── Text ────────────────────────────────────────────────────────────── */
  --text: #0F1B26; --text-2: #2A3A47; --text-3: #5B6B77; --text-4: #8A9AA5;
  /* ── Geometry. 24px corners became 16px everywhere in the dash. ──────── */
  --radius-sm: 8px; --radius: 10px; --radius-lg: 16px; --radius-xl: 16px;
  /* ── Elevation. The dash is essentially flat: a card is a rule, not a
        shadow. Kept faint so stacked popovers still separate. ─────────── */
  --shadow-sm: 0 1px 2px rgba(15,27,38,.04);
  --shadow: 0 1px 3px rgba(15,27,38,.06);
  --shadow-lg: 0 6px 22px rgba(15,27,38,.10);
  --shadow-xl: 0 10px 30px rgba(15,27,38,.12);
  --dtv-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ── 1. Typography ────────────────────────────────────────────────────────
   One family across every surface. Space Grotesk was loaded per-shell and is
   now unused; Inter is what the admin app and the dash both render in. */
body, button, input, select, textarea, .form-input, .btn-primary, .btn-secondary {
  font-family: var(--dtv-font) !important;
}
body { background: var(--surface-2) !important; color: var(--text) !important; }
body h1, body h2, body h3, body h4 {
  color: var(--text); font-weight: 700; letter-spacing: -.005em;
}

/* ── 2. Top bar — ink, flat, no gradient ─────────────────────────────── */
body .p-nav {
  background: var(--primary) !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
body .p-hero {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-left: 3px solid var(--accent) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
}
body .p-hero * { color: inherit; }

/* ── 3. Cards ────────────────────────────────────────────────────────────
   White panel, one hairline, 16px radius, no shadow — the dash's .sp-card. */
body .card, body .section-card, body .p-stat-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
}
body .p-stat-card::before { display: none !important; }
body .section-header { border-bottom: 1px solid var(--border-light) !important; }
body .card-title, body .section-title {
  font-size: .9375rem !important; font-weight: 700 !important;
  color: var(--text) !important; letter-spacing: -.005em;
}

/* ── 4. Buttons — flat ink, no gradient, no lift ──────────────────────── */
body .btn-primary,
body .btn-success,
body .btn-dtv-sm,
body .btn-dtv-sm-alt,
body .btn-dtv-sm-warn {
  background: var(--primary) !important;
  background-image: none !important;
  border: 1px solid var(--primary) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
  color: #fff !important;
  font-weight: 600 !important;
  transform: none !important;
}
body .btn-primary:hover,
body .btn-success:hover,
body .btn-dtv-sm:hover,
body .btn-dtv-sm-alt:hover,
body .btn-dtv-sm-warn:hover {
  background: var(--primary-light) !important;
  border-color: var(--primary-light) !important;
  box-shadow: none !important;
  transform: none !important;
}
body .btn-primary:active, body .btn-success:active { transform: none !important; }
body .btn-secondary {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
body .btn-secondary:hover { background: var(--surface-2) !important; border-color: var(--text-4) !important; }
body .btn-danger {
  background: var(--surface) !important;
  border: 1px solid var(--danger) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--danger) !important;
}
body .btn-danger:hover { background: var(--danger-light) !important; }
body .btn-edit, body .btn-fill, body .btn-view {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-2) !important;
}
body .btn-edit:hover, body .btn-fill:hover, body .btn-view:hover {
  background: var(--surface-2) !important; border-color: var(--text-4) !important;
}
body .btn-icon { border-radius: var(--radius-sm) !important; }
body .btn-icon-edit { background: var(--surface-3) !important; color: var(--text-2) !important; }
body .btn-icon-del { background: var(--danger-light) !important; color: var(--danger) !important; }

/* ── 5. Pills — outline + a colour dot, not a colour fill ─────────────── */
body .badge {
  gap: .35rem !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  padding: 2px 9px !important;
  font-size: .6875rem !important;
  font-weight: 600 !important;
  background: var(--surface) !important;
  color: var(--text-3) !important;
}
body .badge-green, body .badge-red, body .badge-amber,
body .badge-blue, body .badge-purple, body .badge-gray,
body .badge-pending, body .badge-draft, body .badge-submitted {
  border-color: var(--border) !important;
  color: var(--text-3) !important;
  background: var(--surface) !important;
}
body .badge-green::before, body .badge-submitted::before,
body .badge-red::before, body .badge-amber::before, body .badge-draft::before,
body .badge-blue::before, body .badge-purple::before {
  content: ''; width: .4rem; height: .4rem; border-radius: 50%;
  background: var(--text-4); flex-shrink: 0;
}
body .badge-green::before, body .badge-submitted::before { background: var(--success); }
body .badge-red::before { background: var(--danger); }
body .badge-amber::before, body .badge-draft::before { background: var(--warning); }
body .badge-blue::before { background: var(--info); }
body .badge-purple::before { background: var(--purple); }

/* ── 6. Tabs — underline, like the dash's .sp-tab ─────────────────────── */
body .vtab {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--text-3) !important;
  font-weight: 500 !important;
  font-size: .8125rem !important;
  padding: .5rem .75rem !important;
  margin-bottom: -1px;
}
body .vtab:hover { background: transparent !important; color: var(--text) !important; box-shadow: none !important; }
body .vtab.active {
  color: var(--text) !important;
  border-bottom-color: var(--text) !important;
  font-weight: 600 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body #tab-bar {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  gap: 2px !important;
}

/* ── 7. Inputs ───────────────────────────────────────────────────────── */
body .form-input, body .form-field input, body .form-field select, body .form-field textarea {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text) !important;
  font-size: .8125rem !important;
}
body .form-input:focus { border-color: var(--text-2) !important; box-shadow: 0 0 0 3px rgba(15,27,38,.08) !important; }
body .form-field label { font-size: .72rem !important; color: var(--text-3) !important; font-weight: 600 !important; }

/* ── 8. Progress ─────────────────────────────────────────────────────── */
body .progress-bar-wrap { background: var(--surface-3) !important; height: 6px !important; }
body .progress-bar-fill { border-radius: 99px !important; }

/* ── 9. Sign-in doors — flat wash, not a three-colour gradient ───────── */
body #login-screen {
  background: var(--surface-2) !important;
}
body #login-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
  overflow: hidden;
}
/* The brand band keeps its white field and tri-colour rule — that is the one
   place the brand gradient belongs, and dtv-loader.css already defines it. */

/* ── 10. Modals ──────────────────────────────────────────────────────── */
body #form-modal { background: rgba(15,27,38,.55) !important; }
body #form-modal-inner {
  background: var(--surface) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xl) !important;
}

/* ── 11. Toast ───────────────────────────────────────────────────────── */
body #toast {
  background: var(--primary) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-lg) !important;
  font-weight: 500 !important;
}

/* ── 12. Tables ──────────────────────────────────────────────────────── */
body .dtv-table { width: 100%; border-collapse: collapse; font-size: .72rem; }
body .dtv-table th {
  text-align: left; font-weight: 600; color: var(--text-3);
  padding: .375rem .625rem; border-bottom: 1px solid var(--border); white-space: nowrap;
}
body .dtv-table td { padding: .375rem .625rem; border-bottom: 1px solid var(--border-light); vertical-align: top; }

/* ============================================================================
   13. Check-ins
   ----------------------------------------------------------------------------
   Replaces inline markup that painted four saturated blocks per check-in
   (#f0fdf4 green, #fef2f2 red, #fffbeb amber, #eff6ff blue) with full-width
   colour fields. The dash reads the same four states as a thin left rule on a
   neutral panel, with the label in muted small caps — so a month of check-ins
   reads as a list rather than a colour chart.
   ========================================================================= */
.dtv-ci {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.125rem;
  margin-bottom: .75rem;
}
.dtv-ci-hd {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
  margin-bottom: .75rem;
}
.dtv-ci-date {
  font-size: .8125rem; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.dtv-ci-rag {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .6875rem; font-weight: 600; color: var(--text-3);
  border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px;
}
.dtv-ci-rag::before { content: ''; width: .4rem; height: .4rem; border-radius: 50%; background: var(--text-4); }
.dtv-ci-rag.is-green::before { background: var(--success); }
.dtv-ci-rag.is-amber::before { background: var(--warning); }
.dtv-ci-rag.is-red::before { background: var(--danger); }
.dtv-ci-mood { font-size: .9375rem; line-height: 1; }
.dtv-ci-by {
  margin-left: auto; font-size: .72rem; color: var(--text-4);
  display: inline-flex; align-items: center; gap: .3rem;
}
.dtv-ci-metrics { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: .75rem; }
.dtv-ci-metric {
  font-size: .6875rem; font-weight: 600; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--border-light);
  border-radius: 999px; padding: 1px 8px; font-variant-numeric: tabular-nums;
}
.dtv-ci-grid { display: grid; gap: .5rem; }
.dtv-ci-block {
  border-left: 2px solid var(--border);
  padding: .375rem 0 .375rem .75rem;
  background: transparent;
}
.dtv-ci-block.is-ok { border-left-color: var(--success); }
.dtv-ci-block.is-bad { border-left-color: var(--danger); }
.dtv-ci-block.is-warn { border-left-color: var(--warning); }
.dtv-ci-block.is-info { border-left-color: var(--info); }
.dtv-ci-block-h {
  font-size: .6875rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: .25rem;
}
.dtv-ci-item {
  display: flex; align-items: flex-start; gap: .5rem;
  padding: .1875rem .375rem; border-radius: 6px; cursor: pointer;
}
.dtv-ci-item:hover { background: var(--surface-2); }
.dtv-ci-item.is-done .dtv-ci-txt { text-decoration: line-through; color: var(--text-4); }
.dtv-ci-item input[type=checkbox] {
  accent-color: var(--success); width: 14px; height: 14px;
  margin-top: .15rem; cursor: pointer; flex-shrink: 0; pointer-events: none;
}
.dtv-ci-txt { font-size: .8125rem; color: var(--text-2); line-height: 1.45; flex: 1; }
.dtv-ci-note {
  font-size: .6875rem; color: var(--text-3); background: var(--surface-2);
  border: 1px solid var(--border-light); border-radius: 999px;
  padding: 1px 8px; cursor: pointer; flex-shrink: 0; white-space: nowrap;
}
.dtv-ci-empty {
  text-align: center; color: var(--text-4); font-size: .8125rem;
  padding: 2rem 1rem; border: 1px dashed var(--border);
  border-radius: var(--radius-lg); background: var(--surface);
}
.dtv-ci-empty b { display: block; color: var(--text-2); font-size: .875rem; margin-bottom: .25rem; }
.dtv-ci-foot {
  font-size: .8125rem; color: var(--text-3); line-height: 1.5;
  margin-top: .625rem; padding: .5rem .75rem;
  background: var(--surface-2); border-radius: var(--radius-sm);
}

/* ============================================================================
   14. Documents
   ----------------------------------------------------------------------------
   Was a grid of tinted icon chips per category with per-row pastel borders.
   Now: neutral rows on white, category as a small caps heading with a count,
   and the only colour left is the review-state dot.
   ========================================================================= */
.dtv-doc-cat { margin-bottom: 1.125rem; }
.dtv-doc-cat-h {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem;
}
.dtv-doc-cat-h .dtv-doc-ico {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  display: grid; place-items: center; background: var(--surface-2);
  color: var(--text-3); font-size: 10px; border: 1px solid var(--border-light);
}
.dtv-doc-cat-h .dtv-doc-cat-n {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3);
}
.dtv-doc-cat-h .dtv-doc-count {
  font-size: .6875rem; color: var(--text-4); background: var(--surface-2);
  border-radius: 999px; padding: 0 7px; font-variant-numeric: tabular-nums;
}
.dtv-doc-row {
  display: flex; align-items: flex-start; gap: .625rem;
  padding: .5rem .625rem; border: 1px solid var(--border-light);
  border-radius: var(--radius-sm); margin-bottom: .375rem; background: var(--surface);
}
.dtv-doc-row .dtv-doc-file { color: var(--text-4); font-size: 13px; margin-top: 2px; flex-shrink: 0; }
.dtv-doc-main { flex: 1; min-width: 0; }
.dtv-doc-name {
  font-size: .8125rem; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dtv-doc-desc { font-size: .72rem; color: var(--text-3); font-style: italic; margin-top: 1px; }
.dtv-doc-meta { display: flex; align-items: center; gap: .5rem; margin-top: .25rem; flex-wrap: wrap; }
.dtv-doc-link {
  font-size: .72rem; font-weight: 600; color: var(--text);
  display: inline-flex; align-items: center; gap: .3rem;
  text-decoration: underline; text-underline-offset: 2px;
}
.dtv-doc-size { font-size: .6875rem; color: var(--text-4); font-variant-numeric: tabular-nums; }
.dtv-doc-side { display: flex; align-items: center; gap: .375rem; flex-shrink: 0; }
.dtv-doc-req {
  font-size: .6875rem; color: var(--danger); border: 1px solid var(--danger);
  border-radius: 999px; padding: 0 7px; font-weight: 600;
}
.dtv-doc-state {
  font-size: .6875rem; font-weight: 600; color: var(--text-3);
  display: inline-flex; align-items: center; gap: .35rem;
  border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px;
  text-transform: capitalize; white-space: nowrap;
}
.dtv-doc-state::before {
  content: ''; width: .35rem; height: .35rem; border-radius: 50%; background: var(--text-4);
}
.dtv-doc-state.is-approved::before { background: var(--success); }
.dtv-doc-state.is-pending::before { background: var(--warning); }
.dtv-doc-state.is-rejected::before { background: var(--danger); }
.dtv-doc-state.is-review::before { background: var(--info); }
.dtv-doc-del {
  width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-4); cursor: pointer;
  display: grid; place-items: center; font-size: 10px; flex-shrink: 0;
}
.dtv-doc-del:hover { color: var(--danger); border-color: var(--danger); }
.dtv-doc-empty { color: var(--text-4); font-size: .8125rem; padding: .5rem 0; }

/* ============================================================================
   15. Modal — used by the proof-upload dialog
   ----------------------------------------------------------------------------
   The old dialog was an amber card with a dashed amber dropzone and a
   two-colour gradient button. Same structure, dash surface.
   ========================================================================= */
.dtv-modal-ov {
  position: fixed; inset: 0; z-index: 9100; display: flex;
  align-items: center; justify-content: center; padding: 16px;
  background: rgba(15,27,38,.55);
}
.dtv-modal {
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl); width: 100%; max-width: 460px;
  padding: 1.5rem; position: relative;
}
.dtv-modal-hd { display: flex; align-items: flex-start; gap: .625rem; margin-bottom: .875rem; }
.dtv-modal-ico {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  display: grid; place-items: center; background: var(--surface-2);
  border: 1px solid var(--border-light); color: var(--text-3); font-size: 13px;
}
.dtv-modal-t { font-size: .9375rem; font-weight: 700; color: var(--text); letter-spacing: -.005em; }
.dtv-modal-s { font-size: .72rem; color: var(--text-3); margin-top: 2px; line-height: 1.45; }
.dtv-modal-task {
  font-size: .72rem; color: var(--text-2); background: var(--surface-2);
  border: 1px solid var(--border-light); border-radius: var(--radius-sm);
  padding: .5rem .625rem; margin-bottom: .75rem;
  display: flex; align-items: center; gap: .4rem;
}
.dtv-modal-hint {
  font-size: .72rem; color: var(--text-3); background: var(--surface-2);
  border-left: 2px solid var(--warning); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: .5rem .625rem; margin-bottom: .75rem; line-height: 1.45;
}
.dtv-modal-lab {
  display: block; font-size: .6875rem; font-weight: 600; color: var(--text-3);
  margin-bottom: .3125rem;
}
.dtv-modal-lab .dtv-req { color: var(--danger); }
.dtv-modal-lab .dtv-hint { font-weight: 400; color: var(--text-4); }
.dtv-drop {
  width: 100%; box-sizing: border-box; font-size: .72rem; color: var(--text-3);
  background: var(--surface); border: 1px dashed var(--border);
  border-radius: var(--radius-sm); padding: .5rem;
}
.dtv-drop:focus { outline: none; border-color: var(--text-2); }
.dtv-modal-msg { display: none; font-size: .72rem; margin-bottom: .5rem; }
.dtv-modal-foot { display: flex; gap: .5rem; margin-top: .25rem; }
.dtv-modal-foot .dtv-btn {
  flex: 1; padding: .5rem .875rem; font-size: .8125rem; font-weight: 600;
  border-radius: var(--radius-sm); cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; gap: .4rem; font-family: inherit;
}
.dtv-btn-ghost { background: var(--surface); border: 1px solid var(--border); color: var(--text-2); }
.dtv-btn-ghost:hover { background: var(--surface-2); }
.dtv-btn-primary { background: var(--primary); border: 1px solid var(--primary); color: #fff; }
.dtv-btn-primary:hover { background: var(--primary-light); }
.dtv-btn-primary:disabled { opacity: .55; cursor: not-allowed; }

/* ============================================================================
   16. Portal to-do list
   ----------------------------------------------------------------------------
   Was a white card per row with pastel status fills (#10b981 / #f59e0b /
   #6366f1) and coloured action buttons. Now the same neutral row the dash
   uses: title, muted meta, a dotted status pill, and flat actions.
   ========================================================================= */
.dtv-todo {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .625rem .75rem;
  margin-bottom: .5rem;
  background: var(--surface);
}
.dtv-todo-hd {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap;
}
.dtv-todo-main { flex: 1; min-width: 10rem; }
.dtv-todo-t {
  font-size: .8125rem; font-weight: 600; color: var(--text); line-height: 1.4;
}
.dtv-todo-t.is-done { text-decoration: line-through; color: var(--text-4); }
.dtv-todo-n { font-size: .72rem; color: var(--text-3); margin-top: .1875rem; line-height: 1.45; }
.dtv-todo-side {
  display: flex; flex-direction: column; gap: .25rem;
  align-items: flex-end; flex-shrink: 0;
}
.dtv-todo .dtv-ci-rag.is-neutral::before { background: var(--text-4); }
.dtv-todo-acts {
  display: flex; flex-wrap: wrap; gap: .375rem;
  margin-top: .5rem; padding-top: .5rem;
  border-top: 1px solid var(--border-light);
}
.dtv-todo-acts .dtv-btn {
  padding: .25rem .625rem; font-size: .72rem; font-weight: 500;
  border-radius: 6px; cursor: pointer; display: inline-flex;
  align-items: center; gap: .3rem; font-family: inherit;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-2);
}
.dtv-todo-acts .dtv-btn:hover { background: var(--surface-2); border-color: var(--text-4); }
.dtv-todo-acts .dtv-btn-primary {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
.dtv-todo-acts .dtv-btn-primary:hover { background: var(--primary-light); border-color: var(--primary-light); }
.dtv-todo-acts .dtv-btn.dtv-is-danger { color: var(--danger); }
.dtv-todo-acts .dtv-btn.dtv-is-danger:hover {
  background: var(--danger-light); border-color: var(--danger);
}