/* ═══════════════════════════════════════════════════════════════════════════
   ACTION BUTTON SYSTEM  (.btn-action)
   A single reusable base class for all tinted-chip action buttons.
   Variants only set five color tokens; every other property is inherited.

   Usage:   <a class="btn-action btn-export-csv">…</a>
   New variant:  .btn-my-thing { --_ab-text: …; --_ab-bg: …; … }

   Sizing, typography, spacing, transitions, icon handling, accessibility
   states, and layout modifiers live here once and never repeat.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Base ────────────────────────────────────────────────────────────────── */
.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    white-space: normal;
    /* break-word, never anywhere: `anywhere` lets a button's min-content
       width collapse to one character, so a flex/table cell squeezes it and
       splits a short label mid-word ("Rever/se"). break-word keeps the whole
       word as the min-content floor and still breaks a label too long to fit. */
    overflow-wrap: break-word;
    max-width: 100%;
    box-sizing: border-box;
    font-size: var(--fs-sm, 0.875rem);
    font-weight: 600;
    line-height: 1.5;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--_ab-border);
    border-radius: var(--radius-sm, 0.5rem);
    color: var(--_ab-text);
    background: var(--_ab-bg);
    text-decoration: none;
    cursor: pointer;
    vertical-align: middle;
    user-select: none;
    transition: color 0.18s ease,
                background-color 0.18s ease,
                border-color 0.18s ease,
                box-shadow 0.18s ease;
}

/* Icons */
.btn-action i {
    font-size: 1em;
    line-height: 1;
    flex-shrink: 0;
    color: inherit;
    margin: 0 !important;
}

/* Hover — fill solid */
.btn-action:hover {
    color: #fff;
    background: var(--_ab-fill);
    border-color: var(--_ab-fill);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    text-decoration: none;
}

/* Focus-visible */
.btn-action:focus-visible {
    outline: 2px solid var(--_ab-fill);
    outline-offset: 2px;
}

/* Active / pressed */
.btn-action:active {
    color: #fff;
    background: var(--_ab-active);
    border-color: var(--_ab-active);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* Disabled */
.btn-action.disabled, .btn-action:disabled, .btn-action[aria-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
    box-shadow: none;
}

/* Loading state */
.btn-action.is-loading {
    pointer-events: none;
    opacity: 0.68;
}
.btn-action.is-loading i {
    animation: action-btn-spin 0.7s linear infinite;
}
@keyframes action-btn-spin {
    to { transform: rotate(360deg); }
}

/* Full-width block modifier */
.btn-action.btn-action-block {
    display: flex;
    width: 100%;
    justify-content: center;
}

/* ── CSV — green accent on neutral chrome ────────────────────────────────── */
.btn-export-csv {
    --_ab-text:    #2f7d54;
    --_ab-bg:      transparent;
    --_ab-border:  #ced4da;
    --_ab-fill:    #2f7d54;
    --_ab-active:  #26663f;
}

/* ── PDF — red accent on neutral chrome ──────────────────────────────────── */
.btn-export-pdf {
    --_ab-text:    #b04438;
    --_ab-bg:      transparent;
    --_ab-border:  #ced4da;
    --_ab-fill:    #b04438;
    --_ab-active:  #984438;
}

/* ── Excel — green accent on neutral chrome ──────────────────────────────── */
.btn-export-excel {
    --_ab-text:    #2f7d54;
    --_ab-bg:      transparent;
    --_ab-border:  #ced4da;
    --_ab-fill:    #2f7d54;
    --_ab-active:  #26663f;
}

/* ── Apply / Filter — solid action-green (white text, AA 5.21:1) ─────────── */
.btn-action-apply {
    --_ab-text:    #fff;
    --_ab-bg:      #35795a;
    --_ab-border:  #35795a;
    --_ab-fill:    #2f6e50;
    --_ab-active:  #2a6249;
}

/* ── Print — slate ───────────────────────────────────────────────────────── */
.btn-action-print {
    --_ab-text:    #4a5d6e;
    --_ab-bg:      #e8ecf0;
    --_ab-border:  #b8c4ce;
    --_ab-fill:    #5a6e7e;
    --_ab-active:  #4a5e6e;
}

/* ── Neutral — gray accent on neutral chrome ─────────────────────────────── */
.btn-action-neutral {
    --_ab-text:    #556068;
    --_ab-bg:      transparent;
    --_ab-border:  #ced4da;
    --_ab-fill:    #68747e;
    --_ab-active:  #58646e;
}

/* ── Download — blue accent on neutral chrome ────────────────────────────── */
.btn-download {
    --_ab-text:    #2e6298;
    --_ab-bg:      transparent;
    --_ab-border:  #ced4da;
    --_ab-fill:    #2e6298;
    --_ab-active:  #275380;
}

/* ── Restore / Import — amber accent on neutral chrome ───────────────────── */
.btn-action-restore {
    --_ab-text:    #a06618;
    --_ab-bg:      transparent;
    --_ab-border:  #ced4da;
    --_ab-fill:    #a06618;
    --_ab-active:  #855414;
}

/* ── Reset / Destructive — red accent on neutral chrome ──────────────────── */
.btn-action-reset {
    --_ab-text:    #b04438;
    --_ab-bg:      transparent;
    --_ab-border:  #ced4da;
    --_ab-fill:    #b04438;
    --_ab-active:  #984438;
}


/* ── Dark-mode overrides ────────────────────────────────────────────────── */
html[data-theme="dark"] .btn-export-csv {
    --_ab-text:    #6bbf94;
    --_ab-bg:      transparent;
    --_ab-border:  rgba(176, 182, 188, 0.30);
    --_ab-fill:    #3d8a65;
    --_ab-active:  #2f6e50;
}
html[data-theme="dark"] .btn-export-pdf {
    --_ab-text:    #e89880;
    --_ab-bg:      transparent;
    --_ab-border:  rgba(176, 182, 188, 0.30);
    --_ab-fill:    #a84e38;
    --_ab-active:  #904030;
}
html[data-theme="dark"] .btn-export-excel {
    --_ab-text:    #6bbf94;
    --_ab-bg:      transparent;
    --_ab-border:  rgba(176, 182, 188, 0.30);
    --_ab-fill:    #3d8a65;
    --_ab-active:  #2f6e50;
}
html[data-theme="dark"] .btn-action-print {
    --_ab-text:    #a0b0be;
    --_ab-bg:      rgba(160, 176, 190, 0.10);
    --_ab-border:  rgba(160, 176, 190, 0.28);
    --_ab-fill:    #4e6272;
    --_ab-active:  #3e5262;
}
html[data-theme="dark"] .btn-action-neutral {
    --_ab-text:    #96a2ae;
    --_ab-bg:      transparent;
    --_ab-border:  rgba(176, 182, 188, 0.30);
    --_ab-fill:    #505c68;
    --_ab-active:  #424e58;
}
html[data-theme="dark"] .btn-download {
    --_ab-text:    #84b3e5;
    --_ab-bg:      transparent;
    --_ab-border:  rgba(176, 182, 188, 0.30);
    --_ab-fill:    #3d74b0;
    --_ab-active:  #2f5e96;
}
html[data-theme="dark"] .btn-action-restore {
    --_ab-text:    #f0ce68;
    --_ab-bg:      transparent;
    --_ab-border:  rgba(176, 182, 188, 0.30);
    --_ab-fill:    #9c7820;
    --_ab-active:  #866418;
}
html[data-theme="dark"] .btn-action-reset {
    --_ab-text:    #e89880;
    --_ab-bg:      transparent;
    --_ab-border:  rgba(176, 182, 188, 0.30);
    --_ab-fill:    #a84e38;
    --_ab-active:  #904030;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .btn-export-csv {
        --_ab-text:    #6bbf94;
        --_ab-bg:      transparent;
        --_ab-border:  rgba(176, 182, 188, 0.30);
        --_ab-fill:    #3d8a65;
        --_ab-active:  #2f6e50;
    }
    html[data-theme="auto"] .btn-export-pdf {
        --_ab-text:    #e89880;
        --_ab-bg:      transparent;
        --_ab-border:  rgba(176, 182, 188, 0.30);
        --_ab-fill:    #a84e38;
        --_ab-active:  #904030;
    }
    html[data-theme="auto"] .btn-export-excel {
        --_ab-text:    #6bbf94;
        --_ab-bg:      transparent;
        --_ab-border:  rgba(176, 182, 188, 0.30);
        --_ab-fill:    #3d8a65;
        --_ab-active:  #2f6e50;
    }
    html[data-theme="auto"] .btn-action-print {
        --_ab-text:    #a0b0be;
        --_ab-bg:      rgba(160, 176, 190, 0.10);
        --_ab-border:  rgba(160, 176, 190, 0.28);
        --_ab-fill:    #4e6272;
        --_ab-active:  #3e5262;
    }
    html[data-theme="auto"] .btn-action-neutral {
        --_ab-text:    #96a2ae;
        --_ab-bg:      transparent;
        --_ab-border:  rgba(176, 182, 188, 0.30);
        --_ab-fill:    #505c68;
        --_ab-active:  #424e58;
    }
    html[data-theme="auto"] .btn-download {
        --_ab-text:    #84b3e5;
        --_ab-bg:      transparent;
        --_ab-border:  rgba(176, 182, 188, 0.30);
        --_ab-fill:    #3d74b0;
        --_ab-active:  #2f5e96;
    }
    html[data-theme="auto"] .btn-action-restore {
        --_ab-text:    #f0ce68;
        --_ab-bg:      transparent;
        --_ab-border:  rgba(176, 182, 188, 0.30);
        --_ab-fill:    #9c7820;
        --_ab-active:  #866418;
    }
    html[data-theme="auto"] .btn-action-reset {
        --_ab-text:    #e89880;
        --_ab-bg:      transparent;
        --_ab-border:  rgba(176, 182, 188, 0.30);
        --_ab-fill:    #a84e38;
        --_ab-active:  #904030;
    }
}

/* Bootstrap actions share geometry while retaining their semantic colors/states. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    font-size: var(--fs-sm, 0.875rem);
    font-weight: 600;
    line-height: 1.5;
    border-radius: var(--radius-sm, 0.5rem);
    max-width: 100%;
    overflow-wrap: break-word;  /* never `anywhere` - see .btn-action above */
}
.btn > :is(i, .fa, .fas, .far) {
    font-size: 1em;
    line-height: 1;
    flex-shrink: 0;
    margin-inline: 0 !important;
}
:is(.stock-page-actions, .action-toolbar, .action-btn-row, .sales-order-actions, .sales-form-actions),
.card-header .d-flex:has(> .btn), .d-flex:has(> .btn-action) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    max-width: 100%;
}
:is(.stock-page-actions, .action-toolbar, .card-header) form { margin: 0; max-width: 100%; }
.btn-sm, .btn-action.btn-action-sm, td .btn, td .btn-action {
    min-height: 2rem;
    padding: 0.25rem 0.5rem;
    font-size: var(--fs-sm, 0.875rem);
}
/* Header/toolbar actions use the same size, even if legacy markup says small. */
:is(.stock-page-actions, .action-toolbar, .card-header) :is(.btn, .btn-action),
.d-flex:has(> .btn-action):not(td *) :is(.btn, .btn-action) {
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    font-size: var(--fs-sm, 0.875rem);
}
/* Add actions are indivisible controls, even inside narrow table columns.
   Geometry, icon gap and compact/mobile sizing come from the shared .btn rules. */
.btn.btn-add-action {
    flex-wrap: nowrap;
    flex-shrink: 0;
    width: auto;
    min-width: max-content;
    white-space: nowrap;
    overflow-wrap: normal;
}
/* The shared change-reason label is two stacked lines. max-content measures
   them side by side, which made four stock lookup pages 16px wider than the
   viewport, so a stacked label sizes itself instead. */
.btn.btn-add-action:has(> .d-block) {
    min-width: 0;
    white-space: normal;
}
/* An empty state's call to action is a sentence ("Record First Feed
   Consumption"), not a table-cell control, and on a 320px phone it ran out of
   its card. It sits alone and centred, so let it wrap. */
.empty-state .btn.btn-add-action {
    min-width: 0;
    white-space: normal;
}
.btn-add-icon { min-width: 2.5rem; padding-inline: 0.5rem; }
.btn-sm.btn-add-icon, td .btn-add-icon { min-width: 2rem; }
@media (max-width: 575.98px) {
    .btn, .btn-action, .btn-sm, .btn-action.btn-action-sm,
    td .btn, td .btn-action,
    :is(.stock-page-actions, .action-toolbar, .card-header) :is(.btn, .btn-action),
    .d-flex:has(> .btn-action):not(td *) :is(.btn, .btn-action) {
        min-height: 2.75rem;
    }
    .btn-add-icon, .btn-sm.btn-add-icon, td .btn-add-icon { min-width: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
    .btn-action { transition: none; }
    .btn-action.is-loading i { animation: none; }
}