/* ───────────────────────────────────────────────────────────────────────────
   Centralized button system — single source of truth for every button/action.

   Usage:  <button class="btn btn-primary">…</button>
           <a class="btn btn-xs btn-archive">…</a>

   Compose:  .btn  +  optional size (.btn-xs / .btn-sm / .btn-lg / .btn-h38)
                    +  one variant (below)
                    +  optional .btn-block / .btn-icon

   Variants (semantic colour codes):
     .btn-primary    solid dark      — main action (Save, Create, Add, Confirm…)
     .btn-secondary  grey outline    — neutral (View, Edit, Cancel, Back, Download)
     .btn-outline    heavier outline — neutral alt
     .btn-archive    amber           — archive (caution, reversible)
     .btn-unarchive  green           — restore from archive
     .btn-danger     red             — destructive (remove a line)
     .btn-success    green filled    — positive / comms (WhatsApp, Email)
     .btn-info       blue filled     — informational
     .btn-on-dark    light on dark   — buttons over a dark surface
   Flat design only: no shadows, no rounded corners, no gradients.
   ─────────────────────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.5rem 1rem;
    background: transparent;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:disabled,
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ── Sizes ─────────────────────────────────────────────── */
.btn-xs  { padding: 0.25rem 0.625rem; font-size: 0.75rem;  line-height: 1rem;    gap: 0.25rem; }
.btn-sm  { padding: 0.375rem 0.75rem; }
.btn-lg  { padding: 0.625rem 1.25rem; font-weight: 500; gap: 0.5rem; }
.btn-h38 { height: 38px; padding-top: 0; padding-bottom: 0; }

/* ── Modifiers ─────────────────────────────────────────── */
.btn-block { width: 100%; justify-content: center; }
.btn-icon  { padding: 0.375rem; gap: 0; border-color: transparent; }

/* ── Variants ──────────────────────────────────────────── */
.btn-primary   { background: #111827; border-color: #111827; color: #ffffff; }
.btn-primary:hover { background: #1f2937; border-color: #1f2937; }

.btn-secondary { border-color: #d1d5db; color: #374151; }
.btn-secondary:hover { background: #f9fafb; }

/* secondary with a faint filled background (filter-bar "Search") */
.btn-secondary-fill { border-color: #d1d5db; background: #f9fafb; color: #374151; }
.btn-secondary-fill:hover { background: #f3f4f6; }

.btn-outline { border-width: 2px; border-color: #d1d5db; color: #374151; }
.btn-outline:hover { border-color: #9ca3af; color: #111827; }

.btn-archive { border-color: #fcd34d; color: #b45309; }
.btn-archive:hover { background: #fffbeb; }

.btn-unarchive { border-color: #86efac; color: #15803d; }
.btn-unarchive:hover { background: #f0fdf4; }

.btn-danger { border-color: #fecaca; color: #dc2626; }
.btn-danger:hover { background: #fef2f2; color: #b91c1c; }

.btn-success { border-color: #86efac; background: #f0fdf4; color: #15803d; }
.btn-success:hover { background: #dcfce7; }

.btn-info { border-color: #93c5fd; background: #eff6ff; color: #1d4ed8; }
.btn-info:hover { background: #dbeafe; }

.btn-on-dark { border-color: #4b5563; color: #ffffff; }
.btn-on-dark:hover { background: #1f2937; }

/* dark outline that inverts on hover (public / auth pages) */
.btn-ghost-dark { border-color: #111827; color: #111827; }
.btn-ghost-dark:hover { background: #111827; color: #ffffff; }

/* ── Icon-only colour overrides (no border) ────────────── */
.btn-icon.btn-secondary { color: #6b7280; border-color: transparent; }
.btn-icon.btn-secondary:hover { color: #111827; background: #f3f4f6; }
.btn-icon.btn-archive   { color: #d97706; border-color: transparent; }
.btn-icon.btn-archive:hover   { color: #92400e; background: #fffbeb; }
.btn-icon.btn-unarchive { color: #16a34a; border-color: transparent; }
.btn-icon.btn-unarchive:hover { color: #166534; background: #f0fdf4; }
.btn-icon.btn-danger    { color: #dc2626; border-color: transparent; }
.btn-icon.btn-danger:hover    { color: #b91c1c; background: #fef2f2; }