/* ══════════════════════════════════════════════
   BUTTON SYSTEM — Phase 2, Day 6
   Base .btn + variants. Existing .save-btn/.cancel-btn/
   .claim-btn/.small-btn/.unsaved-btn stay live until the
   Day 7-8 migration swaps their markup over.
   ══════════════════════════════════════════════ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    font-family: var(--font);
    font-weight: 700;
    font-size: var(--text-lg);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.btn:active:not(:disabled) {
    transform: scale(0.98);
}

.btn:disabled {
    border-color: #3a3a4a;
    color: #4a4a5a;
    cursor: not-allowed;
    transform: none;
}

.btn:focus-visible {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(226, 176, 74, 0.25);
}

/* ── Loading state (Phase 5, M-7) ──
   Shared async-button treatment for Restore/Start Fresh (app-init.js
   recovery modal) and Export/Import (import-export.js) — replaces each
   handler's ad hoc "disable + swap text" pattern with one CSS state.
   Label text is hidden via color:transparent rather than display:none
   so the button's width/height never shift when the spinner appears. */
.btn.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
    cursor: wait;
}

.btn.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    color: inherit;
    /* currentColor is transparent on .btn itself (see above), so the
       spinner ring re-declares a real color per variant below rather
       than inheriting the hidden label color. */
    animation: btnSpin 0.7s linear infinite;
}

.btn-primary.is-loading::after   { border-color: #1a1a1a; border-top-color: transparent; }
.btn-secondary.is-loading::after,
.btn-danger.is-loading::after,
.btn-dashed.is-loading::after    { border-color: var(--text); border-top-color: transparent; }
.btn-outline.is-loading::after   { border-color: var(--gold); border-top-color: transparent; }

@keyframes btnSpin {
    to { transform: rotate(360deg); }
}

/* ── Primary: filled gold — main CTA (e.g. signup-start) ── */
.btn-primary {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--ink);
}

.btn-primary:hover:not(:disabled) {
    background: var(--gold-glow);
    border-color: var(--gold-glow);
    box-shadow: 0 0 16px rgba(226, 176, 74, 0.35);
}

/* ── Secondary: surface2 fill — current .save-btn look ── */
.btn-secondary {
    background: var(--surface2);
    border-color: var(--border);
    color: var(--text);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--ink);
}

/* ── Outline: gold outline — current .claim-btn look ── */
.btn-outline {
    background: transparent;
    border-color: var(--gold);
    color: var(--gold);
}

.btn-outline:hover:not(:disabled) {
    background: var(--gold);
    color: var(--ink);
    box-shadow: 0 0 16px rgba(226, 176, 74, 0.35);
}

/* ── Dashed: current .add-task-btn / .small-btn look ── */
.btn-dashed {
    background: transparent;
    border-style: dashed;
    border-color: var(--border);
    color: var(--text-muted);
    font-weight: 600;
}

.btn-dashed:hover:not(:disabled) {
    border-color: var(--gold);
    color: var(--gold);
    transform: none; /* dashed variant keeps the no-lift feel it has today */
}

/* ── Danger: current .cancel-btn hover ── */
.btn-danger {
    background: var(--surface2);
    border-color: var(--border);
    color: var(--text);
}

.btn-danger:hover:not(:disabled) {
    border-color: var(--danger);
    color: var(--danger);
    background: var(--surface2);
}

/* ── Compact: smaller size modifier for dense toggle/sort controls
   (e.g. stat period/sort toggles). Thinner border matches these
   buttons' smaller footprint — a 2px border reads chunky at this size.
   Color/background/active-state logic stays component-specific
   (see stat.css) since none of the variants above model a "selected"
   toggle state. */
.btn-compact {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-xs);
    border-width: 1px;
    font-size: var(--text-sm);
}

/* ── Action Buttons ── */
.action-btn {
    background: none;
    border: none;
    font-size: var(--text-lg);
    cursor: pointer;
    padding: var(--space-1) var(--space-1);
    border-radius: 4px;
    color: var(--text-muted);
    transition: var(--transition);
}

.action-btn:hover {
    color: var(--text-bright);
    background: rgba(255, 255, 255, 0.04);
}

.action-btn.delete:hover {
    color: var(--danger);
}

/* ── Emoji Picker Trigger ── */
.emoji-trigger-btn {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-xs);
    border: 1px solid var(--border);
    background: var(--surface2);
    font-size: 1.6rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
    padding: 0;
    font-family: inherit;
}

.emoji-trigger-btn:hover {
    border-color: var(--gold);
    background: rgba(226, 176, 74, 0.08);
    transform: scale(1.08);
}

.emoji-trigger-btn:active {
    transform: scale(0.96);
}

/* The actual text input — visible but compact, sits beside the trigger btn */
.emoji-hidden-input {
    width: 52px !important;
    text-align: center;
    font-size: 1.3rem !important;
    padding: var(--space-1) var(--space-2) !important;
    caret-color: var(--gold);
    opacity: 0.6;
    transition: opacity var(--transition), border-color var(--transition);
}

.emoji-hidden-input:focus {
    opacity: 1;
    border-color: var(--gold) !important;
    outline: none;
}

/* ── Add Task Button ── */
/* Sizing-only now — visual styling (padding, border, color, radius,
   hover) comes from .btn.btn-dashed. Kept as a bare selector/JS hook;
   see Phase 2 Day 7-8 migration. */
.add-task-btn {
    width: 100%;
    margin-top: var(--space-2);
}