/* ============================================================
   Moksha HUB — Canonical button classes (v1)
   Catalog: docs/buttons.md (source of truth for colors + texts).

   Naming: .btn-canon is the outline base; modifiers stack on top.
     <button class="btn-canon btn-canon-wo">+ New Order</button>
     <button class="btn-canon btn-canon-qb btn-canon-lg">+ New Quote</button>
     <button class="btn-canon btn-canon-send">Send by Mail</button>

   Sizes:
     • Default — toolbar / inline (4px 12px, .78rem).
     • .btn-canon-lg — hero / dashboard CTA (8px 18px, .9rem).

   Disabled state: .btn-canon[disabled] { opacity:.5; cursor:not-allowed; }
   ============================================================ */

.btn-canon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: .78rem;
  font-weight: 600;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.4;
  transition: background .12s, color .12s, border-color .12s;
}
.btn-canon:hover,
.btn-canon:focus {
  background: var(--bg);
  color: var(--text);
  border-color: var(--text);
}
.btn-canon[disabled],
.btn-canon.disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Size modifier — hero buttons (dashboard CTAs etc). */
.btn-canon-lg {
  padding: 8px 18px;
  font-size: .9rem;
  gap: 8px;
}

/* ───── Primary by module ───────────────────────────────── */

.btn-canon-wo {
  color: var(--accent);
  border-color: var(--accent);
}
.btn-canon-wo:hover,
.btn-canon-wo:focus {
  background: var(--accent-muted);
  color: var(--accent);
  border-color: var(--accent);
}

.btn-canon-qb {
  color: #60a5fa;
  border-color: #60a5fa;
}
.btn-canon-qb:hover,
.btn-canon-qb:focus {
  background: rgba(96, 165, 250, .12);
  color: #60a5fa;
  border-color: #60a5fa;
}

.btn-canon-catalog-admin {
  /* Catalog (Displays + Materials admin) — uses the Admin section's
     Moksha orange via the calibrated --accent token so light/dark
     mode both stay balanced (matches "New Material" exactly). */
  color: var(--accent);
  border-color: var(--accent);
}
.btn-canon-catalog-admin:hover,
.btn-canon-catalog-admin:focus {
  background: var(--accent-muted);
  color: var(--accent);
  border-color: var(--accent);
}

.btn-canon-analyzer {
  color: #16a34a;
  border-color: #16a34a;
}
.btn-canon-analyzer:hover,
.btn-canon-analyzer:focus {
  background: rgba(22, 163, 74, .14);
  color: #16a34a;
  border-color: #16a34a;
}

.btn-canon-signgen {
  color: #7960a9;
  border-color: #7960a9;
}

/* Invoice — magenta-purple (#a0509f). Pachu 2026-05-18: Intuit's
   blue (#236cff) read too close to the Builder celeste (#60a5fa)
   when both dropdowns sat side-by-side in the Shipping & Invoicing
   toolbar. Magenta is the distinct identity for invoices /
   QuickBooks-bound surfaces from now on. */
.btn-canon-invoice {
  color: #a0509f;
  border-color: #a0509f;
}
.btn-canon-invoice:hover,
.btn-canon-invoice:focus {
  background: rgba(160, 80, 159, .12);
  color: #a0509f;
  border-color: #a0509f;
}
html[data-theme="dark"] .btn-canon-invoice {
  color: #bd87bc;
  border-color: #bd87bc;
}
html[data-theme="dark"] .btn-canon-invoice:hover,
html[data-theme="dark"] .btn-canon-invoice:focus {
  background: rgba(189, 135, 188, .18);
  color: #bd87bc;
  border-color: #bd87bc;
}
.btn-canon-signgen:hover,
.btn-canon-signgen:focus {
  background: rgba(121, 96, 169, .14);
  color: #7960a9;
  border-color: #7960a9;
}
html[data-theme="dark"] .btn-canon-signgen {
  color: #9f8dbf;
  border-color: #9f8dbf;
}
html[data-theme="dark"] .btn-canon-signgen:hover,
html[data-theme="dark"] .btn-canon-signgen:focus {
  background: rgba(159, 141, 191, .18);
  color: #9f8dbf;
  border-color: #9f8dbf;
}

/* ───── Action-typed (cross-module) ─────────────────────── */

/* Import Excel — same green as Analyzer (alias). */
.btn-canon-import {
  color: #16a34a;
  border-color: #16a34a;
}
.btn-canon-import:hover,
.btn-canon-import:focus {
  background: rgba(22, 163, 74, .14);
  color: #16a34a;
  border-color: #16a34a;
}

/* Export Excel — lime. Distinct from Analyzer green so Import vs
   Export read as a complementary pair. */
.btn-canon-export-excel {
  color: #65a30d;
  border-color: #84cc16;
}
.btn-canon-export-excel:hover,
.btn-canon-export-excel:focus {
  background: rgba(132, 204, 22, .14);
  color: #65a30d;
  border-color: #84cc16;
}
/* Dark-mode lime — drops one step from #a3e635 (lime-400) down to
   #84cc16 (lime-500) so the text sits at the same brightness as
   the teal Materials / Add-from-Catalog buttons (#14b8a6). The
   previous lime-400 / lime-300-hover combo was too neon. */
html[data-theme="dark"] .btn-canon-export-excel {
  color: #84cc16;
  border-color: #84cc16;
}
html[data-theme="dark"] .btn-canon-export-excel:hover,
html[data-theme="dark"] .btn-canon-export-excel:focus {
  background: rgba(132, 204, 22, .14);
  color: #84cc16;
  border-color: #84cc16;
}

/* Export PDF — Moksha orange. Customer-facing artifact. */
.btn-canon-export-pdf {
  color: #ff7b00;
  border-color: #ff7b00;
}
.btn-canon-export-pdf:hover,
.btn-canon-export-pdf:focus {
  background: rgba(255, 123, 0, .12);
  color: #ff7b00;
  border-color: #ff7b00;
}

/* Send Mail / Info / Download All — info blue. */
.btn-canon-send {
  color: #0d6efd;
  border-color: #0d6efd;
}
.btn-canon-send:hover,
.btn-canon-send:focus {
  background: rgba(13, 110, 253, .12);
  color: #0d6efd;
  border-color: #0d6efd;
}
html[data-theme="dark"] .btn-canon-send {
  color: #60a5fa;
  border-color: #3b82f6;
}
html[data-theme="dark"] .btn-canon-send:hover,
html[data-theme="dark"] .btn-canon-send:focus {
  background: rgba(59, 130, 246, .18);
  color: #93c5fd;
}

/* Pick from Catalog — teal. Pulls from a reusable library.
   Dark drops one Tailwind shade (#0d9488 → #14b8a6) per the
   brightness rule, not the neon #2dd4bf. */
.btn-canon-pick-catalog {
  color: #0d9488;
  border-color: #0d9488;
}
.btn-canon-pick-catalog:hover,
.btn-canon-pick-catalog:focus {
  background: rgba(13, 148, 136, .12);
  color: #0d9488;
  border-color: #0d9488;
}
html[data-theme="dark"] .btn-canon-pick-catalog {
  color: #14b8a6;
  border-color: #14b8a6;
}
html[data-theme="dark"] .btn-canon-pick-catalog:hover,
html[data-theme="dark"] .btn-canon-pick-catalog:focus {
  background: rgba(20, 184, 166, .14);
  color: #14b8a6;
  border-color: #14b8a6;
}

/* Materials / Mount bulk action — neutral (Pachu 2026-05-17).
   Material is a bulk attribute update, not a "pick from a
   library" action — separating it from the teal Pick family.
   Same shape as .btn-canon default but kept as its own alias
   so the markup intent stays readable. */
.btn-canon-materials {
  color: var(--muted);
  border-color: var(--border);
}
.btn-canon-materials:hover,
.btn-canon-materials:focus {
  background: var(--bg);
  color: var(--text);
  border-color: var(--text);
}

/* Approve — same green as Analyzer/Import; rarely co-exists with
   either so the overlap is harmless. */
.btn-canon-approve {
  color: #16a34a;
  border-color: #16a34a;
}
.btn-canon-approve:hover,
.btn-canon-approve:focus {
  background: rgba(22, 163, 74, .14);
  color: #16a34a;
  border-color: #16a34a;
}

/* Download / Bulk Pick / Fetch — same teal as Add-from-Catalog
   (.btn-canon-pick-catalog). All three actions share the "pick
   files from a library/folder" semantic, so they wear the same
   colour. Dark drops one Tailwind shade (#0d9488 → #14b8a6) per
   the brightness rule — same level as Materials teal, not the
   neon #2dd4bf. */
.btn-canon-fetch {
  color: #0d9488;
  border-color: #0d9488;
}
.btn-canon-fetch:hover,
.btn-canon-fetch:focus {
  background: rgba(13, 148, 136, .12);
  color: #0d9488;
  border-color: #0d9488;
}
html[data-theme="dark"] .btn-canon-fetch {
  color: #14b8a6;
  border-color: #14b8a6;
}
html[data-theme="dark"] .btn-canon-fetch:hover,
html[data-theme="dark"] .btn-canon-fetch:focus {
  background: rgba(20, 184, 166, .14);
  color: #14b8a6;
  border-color: #14b8a6;
}

/* Variation / Inline add — strong neutral gray. Used for "Add Inline"
   buttons that insert .1, .2 rows next to an existing item. Border
   + text are visible at rest (stronger than .btn-canon's muted),
   hover paints a soft gray wash. Dark drops one step lighter
   (gray-600 → gray-400) per the brightness rule. */
.btn-canon-variation {
  color: #4b5563;          /* gray-600 */
  border-color: #4b5563;
}
.btn-canon-variation:hover,
.btn-canon-variation:focus {
  background: rgba(75, 85, 99, .10);
  color: #4b5563;
  border-color: #4b5563;
}
html[data-theme="dark"] .btn-canon-variation {
  color: #9ca3af;          /* gray-400 */
  border-color: #9ca3af;
}
html[data-theme="dark"] .btn-canon-variation:hover,
html[data-theme="dark"] .btn-canon-variation:focus {
  background: rgba(156, 163, 175, .14);
  color: #9ca3af;
  border-color: #9ca3af;
}

/* Destructive — Delete, Reject. Cancel in destructive modals stays
   .btn-canon (neutral) so the red doesn't compete with itself. */
.btn-canon-danger {
  color: #dc3545;
  border-color: rgba(220, 53, 69, .4);
}
.btn-canon-danger:hover,
.btn-canon-danger:focus {
  background: rgba(220, 53, 69, .12);
  color: #dc3545;
  border-color: #dc3545;
}
html[data-theme="dark"] .btn-canon-danger {
  color: #f87171;
  border-color: #ef4444;
}
html[data-theme="dark"] .btn-canon-danger:hover,
html[data-theme="dark"] .btn-canon-danger:focus {
  background: rgba(239, 68, 68, .18);
  color: #fca5a5;
  border-color: #f87171;
}