/* ==========================================================================
   AppButton family - canonical eSmart button language
   Lives next to its components in esmartx.ui/Components/Shared/Buttons/,
   served at /_content/esmartx.ui/css/app-buttons.css.

   Kept as a plain (non-scoped) stylesheet on purpose so selectors can beat
   AntDesign defaults via .ant-btn and !important. If these rules were placed
   in a .razor.css file, Blazor CSS isolation would scope them to the wrapper
   component and they would no longer match AntDesign's rendered <button>.

   Variants: .app-btn-primary | .app-btn-secondary | .app-btn-icon
   Modifier: .app-btn-danger (additive)
   Sizes:    .app-btn-sm (26px) | .app-btn-md (32px) | .app-btn-lg (40px)

   Typography mapping:
   - .app-btn-sm follows the compact copy scale
   - .app-btn-md follows the default copy scale
   - .app-btn-lg follows the guided copy scale
   ========================================================================== */

/* ---- Base ---- */
:root {
    --app-btn-primary: oklch(0.61 0.178 43);
    --app-btn-primary-hover: oklch(0.66 0.18 43);
    --app-btn-primary-active: oklch(0.54 0.17 43);
    --app-btn-primary-border: oklch(0.57 0.17 43);
    --app-btn-danger: oklch(0.62 0.22 25);
    --app-btn-danger-hover: oklch(0.68 0.21 25);
    --app-btn-danger-active: oklch(0.55 0.2 25);
    --app-btn-text: oklch(0.32 0.026 255);
    --app-btn-muted: oklch(0.49 0.025 255);
    --app-btn-border: oklch(0.86 0.018 255);
    --app-btn-bg: oklch(0.995 0.002 85);
    --app-btn-bg-hover: oklch(0.985 0.006 85);
    --app-btn-disabled-bg: oklch(0.965 0.006 255);
    --app-btn-disabled-text: oklch(0.74 0.019 255);
}

.app-btn.ant-btn,
.ant-modal-confirm .ant-modal-confirm-btns .ant-btn-primary,
.esmart-feedback-modal .ant-modal-confirm-btns .ant-btn-primary {
    border-radius: 6px !important;
    font-family: var(--font-family, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    transform: none !important;
    transition: color 0.2s cubic-bezier(0.215, 0.61, 0.355, 1),
                border-color 0.2s cubic-bezier(0.215, 0.61, 0.355, 1),
                background 0.2s cubic-bezier(0.215, 0.61, 0.355, 1),
                box-shadow 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) !important;
}

.app-btn.ant-btn:hover,
.app-btn.ant-btn:focus-visible,
.ant-modal-confirm .ant-modal-confirm-btns .ant-btn-primary:hover,
.ant-modal-confirm .ant-modal-confirm-btns .ant-btn-primary:focus-visible,
.esmart-feedback-modal .ant-modal-confirm-btns .ant-btn-primary:hover,
.esmart-feedback-modal .ant-modal-confirm-btns .ant-btn-primary:focus-visible {
    transform: none !important;
}

/* ---- Sizes ---- */
.app-btn.app-btn-sm.ant-btn {
    height: 26px !important;
    font-size: 0.75rem !important;
    letter-spacing: 0 !important;
    padding: 0 10px !important;
}

.app-btn.app-btn-md.ant-btn,
.ant-modal-confirm .ant-modal-confirm-btns .ant-btn-primary,
.esmart-feedback-modal .ant-modal-confirm-btns .ant-btn-primary {
    height: 32px !important;
    font-size: 0.8125rem !important;
    letter-spacing: 0 !important;
    padding: 0 14px !important;
}

.app-btn.app-btn-lg.ant-btn {
    height: 40px !important;
    font-size: 0.875rem !important;
    letter-spacing: 0 !important;
    padding: 0 16px !important;
}

/* ---- Icon-only variant: square, icon centered via CSS grid ----
   Grid's place-content: center sidesteps all inline-layout quirks
   (anticon vertical-align, svg baseline, phantom whitespace spans). */
.app-btn.app-btn-icon.ant-btn {
    padding: 0 !important;
    display: grid !important;
    place-content: center !important;
}

.app-btn.app-btn-icon.app-btn-sm.ant-btn { width: 26px !important; height: 26px !important; }
.app-btn.app-btn-icon.app-btn-md.ant-btn { width: 32px !important; height: 32px !important; }
.app-btn.app-btn-icon.app-btn-lg.ant-btn { width: 40px !important; height: 40px !important; }

/* ---- Secondary + Icon: Ant Design default button language ---- */
.app-btn.app-btn-secondary.ant-btn,
.app-btn.app-btn-icon.ant-btn {
    color: var(--app-btn-text) !important;
    background: var(--app-btn-bg) !important;
    background-image: none !important;
    border: 1px solid var(--app-btn-border) !important;
    box-shadow: none !important;
}

.app-btn.app-btn-secondary.ant-btn > .anticon,
.app-btn.app-btn-icon.ant-btn > .anticon {
    color: var(--app-btn-muted) !important;
}

.app-btn.app-btn-secondary.ant-btn:hover,
.app-btn.app-btn-secondary.ant-btn:focus-visible,
.app-btn.app-btn-icon.ant-btn:hover,
.app-btn.app-btn-icon.ant-btn:focus-visible {
    color: var(--app-btn-primary) !important;
    border-color: var(--app-btn-primary-hover) !important;
    background: var(--app-btn-bg-hover) !important;
    background-image: none !important;
    box-shadow: none !important;
}

.app-btn.app-btn-secondary.ant-btn:hover > .anticon,
.app-btn.app-btn-secondary.ant-btn:focus-visible > .anticon,
.app-btn.app-btn-icon.ant-btn:hover > .anticon,
.app-btn.app-btn-icon.ant-btn:focus-visible > .anticon {
    color: var(--app-btn-primary) !important;
}

.app-btn.app-btn-secondary.ant-btn:active:not(:disabled),
.app-btn.app-btn-icon.ant-btn:active:not(:disabled) {
    color: var(--app-btn-primary-active) !important;
    border-color: var(--app-btn-primary-active) !important;
    background: var(--app-btn-bg-hover) !important;
}

/* ---- Primary: Ant Design-style filled button, using the eSmart orange accent ---- */
.app-btn.app-btn-primary.ant-btn,
.app-btn.app-btn-primary.ant-btn-primary,
.ant-modal-confirm .ant-modal-confirm-btns .ant-btn-primary,
.esmart-feedback-modal .ant-modal-confirm-btns .ant-btn-primary {
    color: oklch(0.985 0.004 85) !important;
    background: var(--app-btn-primary) !important;
    background-image: none !important;
    border: 1px solid var(--app-btn-primary-border) !important;
    box-shadow: 0 2px 0 oklch(0.28 0.08 43 / 0.04) !important;
}

.app-btn.app-btn-primary.ant-btn > .anticon,
.ant-modal-confirm .ant-modal-confirm-btns .ant-btn-primary > .anticon,
.esmart-feedback-modal .ant-modal-confirm-btns .ant-btn-primary > .anticon {
    color: oklch(0.985 0.004 85) !important;
}

.app-btn.app-btn-primary.ant-btn:hover,
.app-btn.app-btn-primary.ant-btn:focus-visible,
.app-btn.app-btn-primary.ant-btn-primary:hover,
.app-btn.app-btn-primary.ant-btn-primary:focus-visible,
.ant-modal-confirm .ant-modal-confirm-btns .ant-btn-primary:hover,
.ant-modal-confirm .ant-modal-confirm-btns .ant-btn-primary:focus-visible,
.esmart-feedback-modal .ant-modal-confirm-btns .ant-btn-primary:hover,
.esmart-feedback-modal .ant-modal-confirm-btns .ant-btn-primary:focus-visible {
    color: oklch(0.985 0.004 85) !important;
    background: var(--app-btn-primary-hover) !important;
    background-image: none !important;
    border-color: var(--app-btn-primary-hover) !important;
    box-shadow: 0 2px 0 oklch(0.28 0.08 43 / 0.06) !important;
}

.app-btn.app-btn-primary.ant-btn:active:not(:disabled),
.app-btn.app-btn-primary.ant-btn-primary:active:not(:disabled) {
    background: var(--app-btn-primary-active) !important;
    border-color: var(--app-btn-primary-active) !important;
    box-shadow: none !important;
}

/* ---- Focus ring (non-primary) ---- */
.app-btn.app-btn-secondary.ant-btn:focus-visible,
.app-btn.app-btn-icon.ant-btn:focus-visible {
    outline: none !important;
    box-shadow:
        0 0 0 2px oklch(0.66 0.18 43 / 0.18) !important;
}

/* ---- Disabled ---- */
.app-btn.ant-btn[disabled],
.app-btn.ant-btn[disabled]:hover {
    color: var(--app-btn-disabled-text) !important;
    border-color: var(--app-btn-border) !important;
    background: var(--app-btn-disabled-bg) !important;
    box-shadow: none !important;
}

.app-btn.ant-btn[disabled] > .anticon,
.app-btn.ant-btn[disabled]:hover > .anticon {
    color: var(--app-btn-disabled-text) !important;
}

/* ==========================================================================
   Danger variant - destructive actions (delete, remove, cancel subscription)
   Combines with .app-btn-primary (filled red) or .app-btn-secondary (outline red).
   ========================================================================== */

/* Outline danger: white bg, red text/border - safer default for most destructive actions */
.app-btn.app-btn-danger.app-btn-secondary.ant-btn,
.app-btn.app-btn-danger.app-btn-icon.ant-btn {
    color: var(--app-btn-danger) !important;
    background: var(--app-btn-bg) !important;
    background-image: none !important;
    border-color: var(--app-btn-danger) !important;
    box-shadow: none !important;
}

.app-btn.app-btn-danger.app-btn-secondary.ant-btn > .anticon,
.app-btn.app-btn-danger.app-btn-icon.ant-btn > .anticon {
    color: var(--app-btn-danger) !important;
}

.app-btn.app-btn-danger.app-btn-secondary.ant-btn:hover,
.app-btn.app-btn-danger.app-btn-secondary.ant-btn:focus,
.app-btn.app-btn-danger.app-btn-secondary.ant-btn:focus-visible,
.app-btn.app-btn-danger.app-btn-icon.ant-btn:hover,
.app-btn.app-btn-danger.app-btn-icon.ant-btn:focus,
.app-btn.app-btn-danger.app-btn-icon.ant-btn:focus-visible {
    color: var(--app-btn-danger-hover) !important;
    background: var(--app-btn-bg-hover) !important;
    background-image: none !important;
    border-color: var(--app-btn-danger-hover) !important;
    box-shadow: none !important;
}

.app-btn.app-btn-danger.app-btn-secondary.ant-btn:hover > .anticon,
.app-btn.app-btn-danger.app-btn-secondary.ant-btn:focus-visible > .anticon,
.app-btn.app-btn-danger.app-btn-icon.ant-btn:hover > .anticon,
.app-btn.app-btn-danger.app-btn-icon.ant-btn:focus-visible > .anticon {
    color: var(--app-btn-danger-hover) !important;
}

.app-btn.app-btn-danger.app-btn-secondary.ant-btn:active:not(:disabled),
.app-btn.app-btn-danger.app-btn-icon.ant-btn:active:not(:disabled) {
    color: var(--app-btn-danger-active) !important;
    border-color: var(--app-btn-danger-active) !important;
    background: var(--app-btn-bg-hover) !important;
}

/* Filled danger: solid red bg, white text */
.app-btn.app-btn-danger.app-btn-primary.ant-btn,
.app-btn.app-btn-danger.app-btn-primary.ant-btn-primary {
    color: oklch(0.985 0.004 85) !important;
    background: var(--app-btn-danger) !important;
    background-image: none !important;
    border-color: var(--app-btn-danger) !important;
    box-shadow: 0 2px 0 oklch(0.35 0.12 25 / 0.05) !important;
}

.app-btn.app-btn-danger.app-btn-primary.ant-btn > .anticon {
    color: oklch(0.985 0.004 85) !important;
}

.app-btn.app-btn-danger.app-btn-primary.ant-btn:hover,
.app-btn.app-btn-danger.app-btn-primary.ant-btn:focus,
.app-btn.app-btn-danger.app-btn-primary.ant-btn:focus-visible,
.app-btn.app-btn-danger.app-btn-primary.ant-btn-primary:hover,
.app-btn.app-btn-danger.app-btn-primary.ant-btn-primary:focus-visible {
    color: oklch(0.985 0.004 85) !important;
    background: var(--app-btn-danger-hover) !important;
    background-image: none !important;
    border-color: var(--app-btn-danger-hover) !important;
    box-shadow: 0 2px 0 oklch(0.35 0.12 25 / 0.07) !important;
}

/* Danger focus ring */
.app-btn.app-btn-danger.app-btn-secondary.ant-btn:focus-visible,
.app-btn.app-btn-danger.app-btn-icon.ant-btn:focus-visible {
    box-shadow:
        0 0 0 2px oklch(0.68 0.21 25 / 0.2) !important;
}

.app-btn.app-btn-danger.app-btn-primary.ant-btn:focus-visible {
    box-shadow:
        0 2px 0 oklch(0.35 0.12 25 / 0.05),
        0 0 0 3px oklch(0.68 0.21 25 / 0.2) !important;
}

.app-btn.app-btn-danger.app-btn-primary.ant-btn:active:not(:disabled),
.app-btn.app-btn-danger.app-btn-primary.ant-btn-primary:active:not(:disabled) {
    background: var(--app-btn-danger-active) !important;
    border-color: var(--app-btn-danger-active) !important;
    box-shadow: none !important;
}

/* Danger disabled: keep neutral styling - don't imply destructive action when unusable */
.app-btn.app-btn-danger.ant-btn[disabled],
.app-btn.app-btn-danger.ant-btn[disabled]:hover {
    color: var(--app-btn-disabled-text) !important;
    background: var(--app-btn-disabled-bg) !important;
    border-color: var(--app-btn-border) !important;
    box-shadow: none !important;
}

.app-btn.app-btn-danger.ant-btn[disabled] > .anticon {
    color: var(--app-btn-disabled-text) !important;
}

/* ==========================================================================
   SplitButton - primary action + dropdown of alternates
   Two visually joined buttons: left (main) carries radius on the left,
   right (chevron) carries radius on the right. Shared inner border seam.
   ========================================================================== */

.app-split-btn {
    display: inline-flex;
    align-items: stretch;
    vertical-align: middle;
}

/* Main button: flatten right side, pull chevron over to share border */
.app-split-btn .app-btn.app-split-btn-main.ant-btn {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    margin-right: -1px !important;
    position: relative;
    z-index: 1;
}

/* Chevron button: flatten left side, narrow square footprint */
.app-split-btn .app-btn.app-split-btn-chevron.ant-btn {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    position: relative;
    z-index: 1;
}

.app-split-btn .app-btn.app-split-btn-chevron.app-btn-sm.ant-btn {
    width: 26px !important;
    min-width: 26px !important;
}

.app-split-btn .app-btn.app-split-btn-chevron.app-btn-md.ant-btn {
    width: 32px !important;
    min-width: 32px !important;
}

.app-split-btn .app-btn.app-split-btn-chevron.app-btn-lg.ant-btn {
    width: 40px !important;
    min-width: 40px !important;
}

/* Lift whichever half is hovered/focused so its border paints over the seam */
.app-split-btn .app-btn.ant-btn:hover,
.app-split-btn .app-btn.ant-btn:focus-visible {
    z-index: 2;
}

/* For primary variant, thin seam needs a subtle inner divider so the two halves read as one control */
.app-split-btn .app-btn.app-btn-primary.app-split-btn-chevron.ant-btn {
    border-left-color: rgba(255, 255, 255, 0.28) !important;
}

/* ==========================================================================
   AppToggle - label + switch pair, same visual vocabulary as AppButton.
   ON state uses the refined Primary orange so a checked toggle reads as
   consistent with a Primary button next to it.

   Sizes: .app-toggle-sm (16px) | .app-toggle-md (18px) | .app-toggle-lg (22px)
   ========================================================================== */

.app-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    vertical-align: middle;
}

.app-toggle.app-toggle-label-end {
    flex-direction: row-reverse;
}

.app-toggle-label {
    color: #6b7280;
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0.005em;
    line-height: 1.25;
    white-space: nowrap;
    user-select: none;
}

/* ---- Off state: quiet cool-neutral track ---- */
.app-toggle .ant-switch {
    background: #e5e7eb !important;
    background-color: #e5e7eb !important;
    background-image: none !important;
    border: none !important;
    border-radius: 999px !important;
    box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.06) !important;
    transition: background-color 0.18s ease, box-shadow 0.18s ease !important;
}

.app-toggle .ant-switch:hover:not(.ant-switch-disabled) {
    background: #d1d5db !important;
    background-color: #d1d5db !important;
}

.app-toggle .ant-switch:focus-visible {
    outline: none !important;
    box-shadow:
        inset 0 1px 1px rgba(15, 23, 42, 0.06),
        0 0 0 2px rgba(219, 95, 28, 0.16) !important;
}

/* ---- On state: refined warm orange (matches AppButton Primary rest) ---- */
.app-toggle .ant-switch.ant-switch-checked {
    background: #d9571e !important;
    background-color: #d9571e !important;
    background-image: none !important;
    box-shadow: inset 0 1px 1px rgba(124, 45, 18, 0.12) !important;
}

.app-toggle .ant-switch.ant-switch-checked:hover:not(.ant-switch-disabled) {
    background: #b8451a !important;
    background-color: #b8451a !important;
}

/* ---- Handle (knob) ---- */
.app-toggle .ant-switch .ant-switch-handle::before {
    border-radius: 999px !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.15) !important;
}

/* ---- Sizes ---- */
.app-toggle.app-toggle-sm .ant-switch {
    min-width: 28px !important;
    height: 16px !important;
    line-height: 16px !important;
}
.app-toggle.app-toggle-sm .ant-switch .ant-switch-handle {
    top: 2px !important;
    inset-inline-start: 2px !important;
    width: 12px !important;
    height: 12px !important;
}
.app-toggle.app-toggle-sm .ant-switch.ant-switch-checked .ant-switch-handle {
    inset-inline-start: calc(100% - 14px) !important;
}

.app-toggle.app-toggle-md .ant-switch {
    min-width: 32px !important;
    height: 18px !important;
    line-height: 18px !important;
}
.app-toggle.app-toggle-md .ant-switch .ant-switch-handle {
    top: 2px !important;
    inset-inline-start: 2px !important;
    width: 14px !important;
    height: 14px !important;
}
.app-toggle.app-toggle-md .ant-switch.ant-switch-checked .ant-switch-handle {
    inset-inline-start: calc(100% - 16px) !important;
}

.app-toggle.app-toggle-lg .ant-switch {
    min-width: 40px !important;
    height: 22px !important;
    line-height: 22px !important;
}
.app-toggle.app-toggle-lg .ant-switch .ant-switch-handle {
    top: 3px !important;
    inset-inline-start: 3px !important;
    width: 16px !important;
    height: 16px !important;
}
.app-toggle.app-toggle-lg .ant-switch.ant-switch-checked .ant-switch-handle {
    inset-inline-start: calc(100% - 19px) !important;
}

/* ---- Disabled ---- */
.app-toggle.app-toggle-disabled {
    cursor: not-allowed;
}

.app-toggle.app-toggle-disabled .app-toggle-label {
    color: #9ca3af !important;
}

.app-toggle.app-toggle-disabled .ant-switch,
.app-toggle .ant-switch.ant-switch-disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
}

/* Fix: Tooltip wrapper + inner span block click on icon-only AppButton */
.antblazor-overlay-trigger-wrapper {
    display: inline-block;
    pointer-events: auto;
}