/* ==========================================================================
   AJUS BUTTON OPTIONS
   Simple, professional, mature button system.

   Usage policy:
   - Use .ajus-btn plus one visual variant.
   - Optional utility classes may adjust size or icon layout.

   Variants:
   - .ajus-btn-primary
   - .ajus-btn-secondary
   - .ajus-btn-success
   - .ajus-btn-danger
   - .ajus-btn-ghost
   - .ajus-btn-link

   Utilities:
   - .ajus-btn-sm
   - .ajus-btn-lg
   - .ajus-btn-icon
   - .ajus-btn-pill

   All colours resolve through theme tokens — never write a colour here.
========================================================================== */

/* --------------------------------------------------------------------------
   FOUNDATION
----------------------------------------------------------------------------*/
.ajus-btn {
    --btn-bg: var(--color-bg-surface);
    --btn-color: var(--color-text-main);
    --btn-border: var(--color-border);
    --btn-hover-bg: var(--color-bg-surface-soft);
    --btn-hover-color: var(--color-text-main);
    --btn-hover-border: var(--color-border-strong);
    --btn-shadow: none;
    --btn-hover-shadow: none;
    --btn-focus-ring: var(--shadow-focus);
    --btn-radius: 0.7rem;
    --btn-padding-y: 0.68rem;
    --btn-padding-x: 1rem;
    --btn-font-size: 0.95rem;
    --btn-font-weight: 600;
    --btn-line-height: 1.2;
    --btn-min-height: 2.7rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: var(--btn-min-height);
    padding: var(--btn-padding-y) var(--btn-padding-x);
    font-family: inherit;
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    line-height: var(--btn-line-height);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;

    color: var(--btn-color);
    background: var(--btn-bg);
    border: 1px solid var(--btn-border);
    border-radius: var(--btn-radius);
    box-shadow: var(--btn-shadow);
    outline: none;

    transition:
        background-color 0.16s ease,
        color 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.16s ease,
        opacity 0.16s ease;
}

.ajus-btn:hover {
    color: var(--btn-hover-color);
    background: var(--btn-hover-bg);
    border-color: var(--btn-hover-border);
    box-shadow: var(--btn-hover-shadow);
    text-decoration: none;
}

.ajus-btn:focus,
.ajus-btn:focus-visible {
    color: var(--btn-hover-color);
    background: var(--btn-hover-bg);
    border-color: var(--btn-hover-border);
    box-shadow: var(--btn-focus-ring);
    text-decoration: none;
}

.ajus-btn:active,
.ajus-btn.active {
    transform: translateY(1px);
}

.ajus-btn[disabled],
.ajus-btn:disabled,
a.ajus-btn.disabled,
fieldset:disabled .ajus-btn {
    opacity: 0.58;
    pointer-events: none;
    color: var(--color-text-disabled) !important;
    background: var(--color-bg-disabled) !important;
    border-color: var(--color-border) !important;
    box-shadow: none !important;
    transform: none !important;
}

.ajus-btn > i,
.ajus-btn > svg,
.ajus-btn > span.icon {
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   VARIANTS
----------------------------------------------------------------------------*/
.ajus-btn-primary {
    --btn-bg: var(--color-primary);
    --btn-color: var(--color-text-on-primary);
    --btn-border: var(--color-primary);
    --btn-hover-bg: var(--color-primary-hover);
    --btn-hover-color: var(--color-text-on-primary);
    --btn-hover-border: var(--color-primary-hover);
    --btn-shadow: 0 1px 2px color-mix(in srgb, var(--color-primary-hover) 8%, transparent);
    --btn-hover-shadow: 0 8px 18px color-mix(in srgb, var(--color-primary-hover) 22%, transparent);
}

.ajus-btn-secondary {
    --btn-bg: var(--color-secondary);
    --btn-color: var(--color-text-on-secondary);
    --btn-border: var(--color-secondary);
    --btn-hover-bg: var(--color-secondary-hover);
    --btn-hover-color: var(--color-text-on-secondary);
    --btn-hover-border: var(--color-secondary-hover);
    --btn-shadow: 0 1px 2px color-mix(in srgb, var(--color-secondary-hover) 8%, transparent);
    --btn-hover-shadow: 0 8px 18px color-mix(in srgb, var(--color-secondary-hover) 22%, transparent);
}

.ajus-btn-success {
    --btn-bg: var(--color-success);
    --btn-color: var(--color-text-on-success);
    --btn-border: var(--color-success);
    --btn-hover-bg: var(--color-success-hover);
    --btn-hover-color: var(--color-text-on-success);
    --btn-hover-border: var(--color-success-hover);
    --btn-shadow: 0 1px 2px color-mix(in srgb, var(--color-success) 8%, transparent);
    --btn-hover-shadow: 0 8px 18px color-mix(in srgb, var(--color-success) 22%, transparent);
}

.ajus-btn-danger {
    --btn-bg: var(--color-accent);
    --btn-color: var(--color-text-on-accent);
    --btn-border: var(--color-accent);
    --btn-hover-bg: var(--color-accent-hover);
    --btn-hover-color: var(--color-text-on-accent);
    --btn-hover-border: var(--color-accent-hover);
    --btn-shadow: 0 1px 2px color-mix(in srgb, var(--color-accent) 8%, transparent);
    --btn-hover-shadow: 0 8px 18px color-mix(in srgb, var(--color-accent-hover) 22%, transparent);
}

.ajus-btn-ghost {
    --btn-bg: transparent;
    --btn-color: var(--color-text-main);
    --btn-border: var(--color-border);
    --btn-hover-bg: var(--color-bg-surface-soft);
    --btn-hover-color: var(--color-primary);
    --btn-hover-border: var(--color-border-primary);
    --btn-hover-shadow: 0 6px 14px color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.ajus-btn-link {
    --btn-bg: transparent;
    --btn-color: var(--color-text-primary);
    --btn-border: transparent;
    --btn-hover-bg: transparent;
    --btn-hover-color: var(--color-primary-hover);
    --btn-hover-border: transparent;
    --btn-shadow: none;
    --btn-hover-shadow: none;
    --btn-min-height: auto;

    padding: 0;
    border-radius: 0;
}

.ajus-btn-link:hover,
.ajus-btn-link:focus,
.ajus-btn-link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.16em;
}

.ajus-btn-link:active,
.ajus-btn-link.active {
    transform: none;
}

/* --------------------------------------------------------------------------
   UTILITIES
----------------------------------------------------------------------------*/
.ajus-btn-post-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.55rem 0.85rem;
    cursor: pointer;
    color: var(--color-text-muted, var(--color-text-main));
    background: transparent;
    border-radius: 0.7rem;
    transition:
        background-color 0.16s ease,
        color 0.16s ease,
        opacity 0.16s ease;
}

.ajus-btn-post-action:hover,
.ajus-btn-post-action span:hover,
.ajus-btn-post-action:focus,
.ajus-btn-post-action:focus-visible {
    color: var(--color-primary);
    background: var(--color-bg-surface-soft);
    text-decoration: none;
}

/* Disabled post action: stay on the surrounding surface (no grey block) and
   fade the whole control instead, so it sits quietly beside the active ones. */
.ajus-btn-post-action[disabled],
.ajus-btn-post-action.disabled,
.ajus-btn-post-action[aria-disabled="true"] {
    pointer-events: none;
    color: var(--color-text-disabled) !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Fade every part of the control (icon, label, split side) as one unit — the
   inner spans/buttons otherwise keep their own colour and stay darker. */
.ajus-btn-post-action[disabled] span,
.ajus-btn-post-action[disabled] button,
.ajus-btn-post-action[disabled] i,
.ajus-btn-post-action[disabled] svg,
.ajus-btn-post-action.disabled span,
.ajus-btn-post-action.disabled button,
.ajus-btn-post-action.disabled i,
.ajus-btn-post-action.disabled svg,
.ajus-btn-post-action[aria-disabled="true"] span,
.ajus-btn-post-action[aria-disabled="true"] button,
.ajus-btn-post-action[aria-disabled="true"] i,
.ajus-btn-post-action[aria-disabled="true"] svg {
    color: var(--color-text-disabled) !important;
}

/* A count inside a disabled action is muted as well. */
.ajus-btn-post-action[disabled] .ajus-count-badge,
.ajus-btn-post-action.disabled .ajus-count-badge,
.ajus-btn-post-action[aria-disabled="true"] .ajus-count-badge {
    background: var(--color-bg-disabled);
    color: var(--color-text-disabled) !important;
}

/* A single side of a split action can be disabled on its own. */
.ajus-btn-post-action button[disabled],
.ajus-btn-post-action button[disabled] span,
.ajus-btn-post-action button[disabled] i,
.ajus-btn-post-action button[disabled] svg {
    color: var(--color-text-disabled) !important;
    cursor: not-allowed;
}

.ajus-btn-post-action[disabled]:hover,
.ajus-btn-post-action.disabled:hover,
.ajus-btn-post-action[aria-disabled="true"]:hover,
.ajus-btn-post-action[disabled]:focus,
.ajus-btn-post-action.disabled:focus,
.ajus-btn-post-action[aria-disabled="true"]:focus,
.ajus-btn-post-action[disabled]:focus-visible,
.ajus-btn-post-action.disabled:focus-visible,
.ajus-btn-post-action[aria-disabled="true"]:focus-visible {
    color: var(--color-text-disabled) !important;
    background: transparent !important;
    text-decoration: none;
}

.ajus-btn-post-action > i,
.ajus-btn-post-action > svg,
.ajus-btn-post-action > span.icon {
    flex-shrink: 0;
}

/* Base post-action button; modules may override spacing/colors as needed. */
.ajus-btn-sm {
    --btn-padding-y: 0.5rem;
    --btn-padding-x: 0.78rem;
    --btn-font-size: 0.84rem;
    --btn-min-height: 2.2rem;
    --btn-radius: var(--radius-sm);
}

.ajus-btn-lg {
    --btn-padding-y: 0.82rem;
    --btn-padding-x: 1.3rem;
    --btn-font-size: 1rem;
    --btn-font-weight: 700;
    --btn-min-height: 3rem;
    --btn-radius: 0.78rem;
}

.ajus-btn-icon {
    width: var(--btn-min-height);
    min-width: var(--btn-min-height);
    padding-left: 0;
    padding-right: 0;
}

.ajus-btn-pill {
    --btn-radius: var(--radius-pill);
}