/**
 * Denoma CRM — unified buttons (web CRM source of truth)
 *
 * Loaded from base.html AFTER extra_css so page CSS cannot invent a new look.
 * POS (base_cashbox / mycashbox) and MyCRM do not load this file.
 *
 * New pages — copy these classes, do not write button CSS:
 *   <button type="submit" class="dn-btn dn-btn-primary">Зберегти</button>
 *   <a class="dn-btn dn-btn-secondary" href="…">Скасувати</a>
 *   <button type="button" class="dn-btn dn-btn-danger">Видалити</button>
 *   <button type="button" class="dn-btn dn-btn-sm dn-btn-primary">…</button>
 *
 * Existing Bootstrap / brutal / compact / sidebar footer classes are aliased
 * to the same geometry + brand fill. Chrome on dark bars stays ghost-white
 * (see «Do not restyle» at the bottom).
 */

/* ── Shared geometry ── */
.dn-btn,
.hdr-btn,
.btn.btn-primary,
.btn.btn-secondary,
.btn.btn-success,
.btn.btn-danger,
.btn.btn-warning,
.btn.btn-info,
.btn.btn-outline-primary,
.btn.btn-outline-secondary,
.brutal-btn,
.action-btn-compact,
.dn-sb-btn-primary,
.sb-btn-save,
.dn-sb-btn-ghost,
.sb-btn-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--btn-height, 36px);
    padding: 0.4rem var(--btn-pad-x, 1.1rem);
    border-radius: var(--btn-radius, 4px);
    border-width: 1px;
    border-style: solid;
    font-family: inherit;
    font-size: var(--btn-font, 0.82rem);
    font-weight: var(--btn-weight, 700);
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
    transform: none;
    background-image: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.dn-btn:hover,
.btn.btn-primary:hover,
.btn.btn-secondary:hover,
.btn.btn-success:hover,
.btn.btn-danger:hover,
.btn.btn-warning:hover,
.btn.btn-info:hover,
.btn.btn-outline-primary:hover,
.btn.btn-outline-secondary:hover,
.brutal-btn:hover,
.action-btn-compact:hover,
.dn-sb-btn-primary:hover,
.sb-btn-save:hover,
.dn-sb-btn-ghost:hover,
.sb-btn-cancel:hover {
    transform: none;
    box-shadow: none;
    background-image: none;
    filter: none;
    text-decoration: none;
}

.dn-btn:focus-visible,
.btn.btn-primary:focus-visible,
.btn.btn-secondary:focus-visible,
.btn.btn-success:focus-visible,
.btn.btn-danger:focus-visible,
.btn.btn-info:focus-visible,
.btn.btn-outline-primary:focus-visible,
.brutal-btn:focus-visible,
.action-btn-compact:focus-visible,
.sb-btn-save:focus-visible {
    outline: none;
    box-shadow: var(--btn-focus-ring);
}

.dn-btn:disabled,
.dn-btn.is-disabled,
.btn:disabled,
.brutal-btn:disabled,
.action-btn-compact:disabled,
.sb-btn-save:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* Compact / Bootstrap sm */
.dn-btn-sm,
.btn-sm.btn-primary,
.btn-sm.btn-secondary,
.btn-sm.btn-success,
.btn-sm.btn-danger,
.btn-sm.btn-warning,
.btn-sm.btn-info,
.btn-sm.btn-outline-primary,
.btn-sm.btn-outline-secondary,
.action-btn-compact,
.brutal-btn-mini {
    min-height: var(--btn-height-sm, 32px);
    padding: 0.3rem var(--btn-pad-x-sm, 0.75rem);
    font-size: var(--btn-font-sm, 0.78rem);
}

/* ── Primary (navy shell) — Save / Create / main CTA ── */
.dn-btn-primary,
.btn.btn-primary,
.btn.btn-info,
.brutal-btn.success,
.action-btn-compact.btn-success,
.action-btn-compact.btn-primary,
.action-btn-compact.btn-info,
.dn-sb-btn-primary,
.sb-btn-save,
.settings-sidebar-footer .btn-primary,
.settings-sidebar-footer .btn-success,
.settings-sidebar-wide .settings-sidebar-footer .btn-primary,
.user-edit-sidebar-footer .btn-primary,
.dn-sidebar-foot .btn-primary,
.order-sidebar-foot .btn-primary,
.crm-panel-footer .sb-btn-save,
.modal .modal-footer .btn-primary {
    background: var(--color-shell, #0f172a) !important;
    border-color: var(--color-shell, #0f172a) !important;
    color: var(--color-on-brand, #fff) !important;
    background-image: none !important;
}

.dn-btn-primary:hover,
.btn.btn-primary:hover,
.btn.btn-info:hover,
.brutal-btn.success:hover,
.action-btn-compact.btn-success:hover,
.action-btn-compact.btn-primary:hover,
.action-btn-compact.btn-info:hover,
.dn-sb-btn-primary:hover,
.sb-btn-save:hover,
.settings-sidebar-footer .btn-primary:hover,
.settings-sidebar-footer .btn-success:hover,
.user-edit-sidebar-footer .btn-primary:hover,
.dn-sidebar-foot .btn-primary:hover,
.order-sidebar-foot .btn-primary:hover,
.modal .modal-footer .btn-primary:hover {
    background: var(--color-shell-mid, #1a2332) !important;
    border-color: var(--color-shell-mid, #1a2332) !important;
    color: var(--color-on-brand, #fff) !important;
}

.dn-btn-primary i,
.dn-btn-primary *,
.btn.btn-primary i,
.btn.btn-primary *,
.btn.btn-info i,
.btn.btn-info *,
.brutal-btn.success i,
.action-btn-compact.btn-success i,
.action-btn-compact.btn-success span,
.action-btn-compact.btn-primary i,
.action-btn-compact.btn-info i,
.action-btn-compact.btn-info span,
.sb-btn-save i,
.sb-btn-save * {
    color: var(--color-on-brand, #fff) !important;
}

/* ── Secondary / cancel (white + border) ── */
.dn-btn-secondary,
.btn.btn-secondary,
.btn.btn-outline-primary,
.btn.btn-outline-secondary,
.brutal-btn:not(.success):not(.danger):not(.warning),
.action-btn-compact.btn-secondary,
.action-btn-compact.btn-categories,
.dn-sb-btn-ghost,
.sb-btn-cancel,
.settings-sidebar-footer .btn-secondary,
.user-edit-sidebar-footer .btn-secondary,
.dn-sidebar-foot .btn-secondary,
.order-sidebar-foot .btn-secondary,
.crm-panel-footer .sb-btn-cancel,
.modal .modal-footer .btn-secondary {
    background: var(--bg-card, #fff) !important;
    border-color: var(--border-input, #ced4da) !important;
    color: var(--text-secondary, #495057) !important;
}

.dn-btn-secondary:hover,
.btn.btn-secondary:hover,
.btn.btn-outline-primary:hover,
.btn.btn-outline-secondary:hover,
.brutal-btn:not(.success):not(.danger):not(.warning):hover,
.action-btn-compact.btn-secondary:hover,
.action-btn-compact.btn-categories:hover,
.dn-sb-btn-ghost:hover,
.sb-btn-cancel:hover,
.settings-sidebar-footer .btn-secondary:hover,
.modal .modal-footer .btn-secondary:hover {
    background: var(--bg-subtle, #f1f5f9) !important;
    border-color: var(--border-color, #dee2e6) !important;
    color: var(--text-primary, #212529) !important;
}

.dn-btn-secondary i,
.dn-btn-secondary *,
.btn.btn-secondary i,
.btn.btn-secondary *,
.btn.btn-outline-primary i,
.btn.btn-outline-primary *,
.action-btn-compact.btn-secondary i,
.action-btn-compact.btn-secondary span,
.action-btn-compact.btn-categories i,
.action-btn-compact.btn-categories span,
.sb-btn-cancel i,
.sb-btn-cancel * {
    color: inherit !important;
}

/* ── Success (confirm / провести документ) — same geometry, green fill ── */
.dn-btn-success,
.btn.btn-success:not(.action-btn-compact) {
    background: var(--accent-success-strong, #16a34a) !important;
    border-color: var(--accent-success-strong, #16a34a) !important;
    color: #fff !important;
}

.dn-btn-success:hover,
.btn.btn-success:not(.action-btn-compact):hover {
    background: var(--ds-save-hover, #15803d) !important;
    border-color: var(--ds-save-hover, #15803d) !important;
    color: #fff !important;
}

.dn-btn-success i,
.dn-btn-success *,
.btn.btn-success:not(.action-btn-compact) i,
.btn.btn-success:not(.action-btn-compact) * {
    color: #fff !important;
}

/* ── Danger ── */
.dn-btn-danger,
.btn.btn-danger,
.brutal-btn.danger,
.modal .modal-footer .btn-danger {
    background: var(--accent-danger) !important;
    border-color: var(--accent-danger-dark, #bb2d3b) !important;
    color: #fff !important;
}

.dn-btn-danger:hover,
.btn.btn-danger:hover,
.brutal-btn.danger:hover,
.modal .modal-footer .btn-danger:hover {
    background: var(--accent-danger-dark, #bb2d3b) !important;
    border-color: var(--accent-danger-dark, #bb2d3b) !important;
    color: #fff !important;
}

.dn-btn-danger i,
.dn-btn-danger *,
.btn.btn-danger i,
.btn.btn-danger *,
.brutal-btn.danger i,
.modal .modal-footer .btn-danger * {
    color: #fff !important;
}

/* ── Warning (rare) ── */
.dn-btn-warning,
.btn.btn-warning,
.brutal-btn.warning,
.action-btn-compact.btn-warning {
    background: var(--accent-warning) !important;
    border-color: #d97706 !important;
    color: var(--text-primary, #212529) !important;
}

.dn-btn-warning:hover,
.btn.btn-warning:hover,
.brutal-btn.warning:hover,
.action-btn-compact.btn-warning:hover {
    background: #d97706 !important;
    border-color: #d97706 !important;
    color: #fff !important;
}

/* ═══════════════════════════════════════════
   Do not restyle — ghost on dark chrome
   (page-header / document headers / sidebar headers)
   ═══════════════════════════════════════════ */
.page-header .btn,
.page-header .hdr-btn,
.order-sidebar-head .btn,
.order-sidebar-head .hdr-btn,
.income-header .hdr-btn,
.sale-header .hdr-btn,
.sale-header button.hdr-btn,
.writeoff-header .hdr-btn,
.inventory-header .hdr-btn,
.transfer-header .hdr-btn,
.shipment-header .hdr-btn,
.wd-create-header .hdr-btn,
.dn-sb-btn,
.ds-btn-hdr,
.btn-ph {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    min-height: var(--btn-height-sm, 32px);
    padding: 0.28rem var(--btn-pad-x-sm, 0.75rem);
    border-radius: 8px !important;
    font-size: var(--btn-font-sm, 0.78rem);
    font-weight: 600 !important;
    white-space: nowrap;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    background-image: none !important;
}

.page-header .btn:hover,
.page-header .hdr-btn:hover,
.order-sidebar-head .btn:hover,
.order-sidebar-head .hdr-btn:hover,
.income-header .hdr-btn:hover,
.sale-header .hdr-btn:hover,
.writeoff-header .hdr-btn:hover,
.inventory-header .hdr-btn:hover,
.transfer-header .hdr-btn:hover,
.shipment-header .hdr-btn:hover,
.wd-create-header .hdr-btn:hover,
.dn-sb-btn:hover,
.ds-btn-hdr:hover,
.btn-ph:hover {
    background: rgba(255, 255, 255, 0.34) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
}

.page-header .btn i,
.page-header .hdr-btn i,
.page-header .btn *,
.page-header .hdr-btn *,
.order-sidebar-head .btn i,
.order-sidebar-head .hdr-btn i,
.order-sidebar-head .btn *,
.order-sidebar-head .hdr-btn *,
.dn-sb-btn i,
.dn-sb-btn *,
.ds-btn-hdr i,
.btn-ph i,
.btn-ph * {
    color: #ffffff !important;
}

/* Product sidebars: header + footer actions match page chrome (navy, 8px) */
#productSidebar .psb-head .dn-btn-danger {
    background: var(--accent-danger) !important;
    border: 1px solid var(--accent-danger-dark, #bb2d3b) !important;
    color: #fff !important;
}
#productSidebar .psb-head .dn-btn-danger:hover {
    background: var(--accent-danger-dark, #bb2d3b) !important;
    border-color: var(--accent-danger-dark, #bb2d3b) !important;
    color: #fff !important;
}
#productSidebar .psb-head .dn-btn-danger i,
#productSidebar .psb-head .dn-btn-danger * {
    color: #fff !important;
}
#productSidebar .ds-btn-hdr,
#editProductSidebar .dn-btn,
#editProductSidebar .sb-btn-save,
#editProductSidebar .sb-btn-cancel,
.add-product-sidebar .dn-btn,
.add-product-sidebar .sb-btn-save,
.add-product-sidebar .sb-btn-cancel {
    border-radius: 8px !important;
}
#editProductSidebar .dn-btn-primary,
#editProductSidebar .sb-btn-save,
.add-product-sidebar .dn-btn-primary,
.add-product-sidebar .sb-btn-save {
    background: var(--color-shell, #0f172a) !important;
    border-color: var(--color-shell, #0f172a) !important;
    color: #fff !important;
    background-image: none !important;
}
#editProductSidebar .dn-btn-primary:hover,
#editProductSidebar .sb-btn-save:hover,
.add-product-sidebar .dn-btn-primary:hover,
.add-product-sidebar .sb-btn-save:hover {
    background: var(--color-shell-mid, #1a2332) !important;
    border-color: var(--color-shell-mid, #1a2332) !important;
    color: #fff !important;
}

/* Settings page sidebars — navy chrome + 8px like page header */
.settings-sidebar .dn-btn,
.settings-sidebar-wide .dn-btn,
.user-edit-sidebar .dn-btn,
.settings-sidebar .btn,
.settings-sidebar-wide .btn,
.user-edit-sidebar .btn,
.settings-sidebar-footer .btn,
.user-edit-sidebar-footer .btn {
    border-radius: 8px !important;
}
.settings-sidebar .btn-primary,
.settings-sidebar-wide .btn-primary,
.user-edit-sidebar .btn-primary,
.settings-sidebar-footer .btn-primary,
.user-edit-sidebar-footer .btn-primary,
.settings-sidebar .dn-btn-primary,
.settings-sidebar-wide .dn-btn-primary,
.user-edit-sidebar .dn-btn-primary,
.settings-sidebar .btn-success,
.settings-sidebar-wide .btn-success,
.settings-sidebar .btn.btn-primary,
.settings-sidebar-wide .btn.btn-primary,
.settings-sidebar .btn.btn-success,
.settings-sidebar-wide .btn.btn-success,
.user-edit-sidebar .btn.btn-primary,
.settings-sidebar .dn-sidebar-toolbar .dn-btn-primary,
.settings-sidebar-wide .dn-sidebar-toolbar .dn-btn-primary,
.settings-sidebar .dn-sidebar-toolbar .btn-success,
.settings-sidebar-wide .dn-sidebar-toolbar .btn-success,
.settings-sidebar .dn-sidebar-toolbar .btn-primary,
.settings-sidebar-wide .dn-sidebar-toolbar .btn-primary {
    background: var(--color-shell, #0f172a) !important;
    border-color: var(--color-shell, #0f172a) !important;
    color: #fff !important;
    background-image: none !important;
}
.settings-sidebar .btn-primary:hover,
.settings-sidebar-wide .btn-primary:hover,
.user-edit-sidebar .btn-primary:hover,
.settings-sidebar-footer .btn-primary:hover,
.user-edit-sidebar-footer .btn-primary:hover,
.settings-sidebar .dn-btn-primary:hover,
.settings-sidebar-wide .dn-btn-primary:hover,
.user-edit-sidebar .dn-btn-primary:hover,
.settings-sidebar .btn-success:hover,
.settings-sidebar-wide .btn-success:hover,
.settings-sidebar .btn.btn-primary:hover,
.settings-sidebar-wide .btn.btn-primary:hover,
.settings-sidebar .btn.btn-success:hover,
.settings-sidebar-wide .btn.btn-success:hover,
.settings-sidebar .dn-sidebar-toolbar .dn-btn-primary:hover,
.settings-sidebar-wide .dn-sidebar-toolbar .dn-btn-primary:hover,
.settings-sidebar .dn-sidebar-toolbar .btn-success:hover,
.settings-sidebar-wide .dn-sidebar-toolbar .btn-success:hover,
.settings-sidebar .dn-sidebar-toolbar .btn-primary:hover,
.settings-sidebar-wide .dn-sidebar-toolbar .btn-primary:hover {
    background: var(--color-shell-mid, #1a2332) !important;
    border-color: var(--color-shell-mid, #1a2332) !important;
    color: #fff !important;
}

/* Integrations hub — same navy 8px CTAs as settings cards */
.integ-page .dn-btn,
.integ-page .dn-btn-sm {
    border-radius: 8px !important;
}
.integ-page .dn-btn-primary {
    background: var(--color-shell, #0f172a) !important;
    border-color: var(--color-shell, #0f172a) !important;
    color: #fff !important;
    background-image: none !important;
}
.integ-page .dn-btn-primary:hover {
    background: var(--color-shell-mid, #1a2332) !important;
    border-color: var(--color-shell-mid, #1a2332) !important;
    color: #fff !important;
}
.integ-page .dn-btn-primary i,
.integ-page .dn-btn-primary * {
    color: #fff !important;
}
.integ-page .btn-telegram {
    background: var(--color-shell, #0f172a) !important;
    border: 1px solid var(--color-shell, #0f172a) !important;
    color: #fff !important;
    border-radius: 8px !important;
    background-image: none !important;
}
.integ-page .btn-telegram:hover {
    background: var(--color-shell-mid, #1a2332) !important;
    border-color: var(--color-shell-mid, #1a2332) !important;
    color: #fff !important;
}

/* Home dashboard — navy CTAs, not brand teal */
.dash-page .dn-btn,
.dash-page .dn-btn-sm,
.dn-page .dn-btn,
.dn-page .dn-btn-sm {
    border-radius: 8px !important;
}
.dash-page .dn-btn-primary,
.dn-page .dn-btn-primary {
    background: var(--color-shell, #0f172a) !important;
    border-color: var(--color-shell, #0f172a) !important;
    color: #fff !important;
    background-image: none !important;
}
.dash-page .dn-btn-primary:hover,
.dn-page .dn-btn-primary:hover {
    background: var(--color-shell-mid, #1a2332) !important;
    border-color: var(--color-shell-mid, #1a2332) !important;
    color: #fff !important;
}
.dash-page .dn-btn-primary i,
.dash-page .dn-btn-primary *,
.dn-page .dn-btn-primary i,
.dn-page .dn-btn-primary * {
    color: #fff !important;
}

/* Catalog CTA — loaded after page CSS; navy even when the page is not .dn-page */
.wc-catalog-root .dn-btn,
.wc-catalog-root .dn-btn-sm,
.wc-catalog-root .catalog-create-product-btn {
    border-radius: 8px !important;
}
.wc-catalog-root .dn-btn-primary,
.wc-catalog-root .catalog-create-product-btn {
    background: var(--color-shell, #0f172a) !important;
    border-color: var(--color-shell, #0f172a) !important;
    color: #fff !important;
    background-image: none !important;
}
.wc-catalog-root .dn-btn-primary:hover,
.wc-catalog-root .catalog-create-product-btn:hover {
    background: var(--color-shell-mid, #1a2332) !important;
    border-color: var(--color-shell-mid, #1a2332) !important;
    color: #fff !important;
}
.wc-catalog-root .dn-btn-primary i,
.wc-catalog-root .dn-btn-primary *,
.wc-catalog-root .catalog-create-product-btn i,
.wc-catalog-root .catalog-create-product-btn * {
    color: #fff !important;
}