/* App-wide action-button system (.dp-actions / .dp-action-btn). Lifted verbatim out of
   components/data-grid.css per ADR-046 §D3 / TD-2 — that file is misnamed: these rules are used
   by the whole app, not only by the DataGrid component, so deleting data-grid.css when DataGrid
   is retired (W4/T14) would have broken every action button. Values unchanged. */

/* ================================
   Action Buttons — Unified Design System
   ================================ */

/* Container: flex with equal gap — global, works in any context */
.dp-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

/* Actions column in tables: ensure min-width so buttons don't wrap */
td:has(> .dp-actions) {
    white-space: nowrap;
}

/* Base action button: square 32×32 (per design system spec §4.4), icon-only */
.dp-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    /* min-height is required, not redundant: responsive.css sets a global
       `button, .btn, … { min-height: var(--touch-target-min) }` (44px) which beats `height`
       regardless of specificity, so without this the button renders 32×44 and every row carrying
       actions measures 57px instead of the 44px the design system specifies (32 + 2×6 padding).
       Restated here so the documented 32×32 geometry actually holds; the ≤767.98px block below
       raises both back to 44px for touch. */
    min-height: 32px;
    padding: 0;
    border: 1px solid var(--dp-border-default);
    border-radius: var(--radius-sm, 6px);
    background-color: var(--dp-surface-secondary);
    color: var(--dp-text-secondary);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 150ms ease;
    flex-shrink: 0;
    position: relative; /* Required for badge counter positioning */
}

.dp-action-btn:hover {
    background-color: var(--dp-surface-hover);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.dp-action-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.dp-action-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Semantic variants — icon color only, bg stays neutral */
.dp-action-btn--primary {
    color: var(--dp-interactive-primary);
}
.dp-action-btn--primary:hover {
    color: var(--dp-interactive-primary-hover);
    border-color: var(--dp-interactive-primary);
}

.dp-action-btn--info {
    color: var(--dp-status-info);
}
.dp-action-btn--info:hover {
    color: var(--dp-status-info);
    border-color: var(--dp-status-info);
}

.dp-action-btn--success {
    color: var(--dp-status-success);
}
.dp-action-btn--success:hover {
    color: var(--dp-status-success);
    border-color: var(--dp-status-success);
}

.dp-action-btn--warning {
    color: var(--dp-status-warning);
}
.dp-action-btn--warning:hover {
    color: var(--dp-status-warning);
    border-color: var(--dp-status-warning);
}

/* DELETE: filled red — stands out as destructive */
.dp-action-btn--danger {
    background-color: var(--dp-status-danger);
    border-color: var(--dp-status-danger);
    color: var(--dp-text-on-danger);
}
.dp-action-btn--danger:hover {
    background-color: var(--dp-status-danger-hover);
    border-color: var(--dp-status-danger-hover);
    color: var(--dp-text-on-danger);
}

/* GHOST: transparent bg + transparent border — for dismiss/close in overlays
   (e.g., LoginSessionExpiredBanner dismiss button). Quietest visual weight. */
.dp-action-btn--ghost {
    background-color: transparent;
    border-color: transparent;
    color: var(--dp-text-secondary);
}
.dp-action-btn--ghost:hover {
    background-color: var(--dp-surface-hover);
    border-color: transparent;
    color: var(--dp-text-primary);
}
.dp-action-btn--ghost:active {
    background-color: var(--dp-surface-hover);
    color: var(--dp-text-primary);
    transform: translateY(0);
    box-shadow: none;
}
.dp-action-btn--ghost:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--dp-border-focus);
}
.dp-action-btn--ghost:disabled {
    opacity: 0.5;
    background-color: transparent;
    border-color: transparent;
    color: var(--dp-text-secondary);
    cursor: not-allowed;
}

/* Icon sizing inside action button */
.dp-action-btn i,
.dp-action-btn .fas,
.dp-action-btn .far,
.dp-action-btn .bi {
    font-size: 0.8125rem;
    line-height: 1;
}

/* Mobile: bump to 44×44 to meet WCAG 2.5.5 Target Size (Minimum).
   767.98px, not 768px: at exactly 768px (tablet tier) the buttons stayed 44px and no longer
   fitted the 124px actions column. */
@media (max-width: 767.98px) {
    .dp-action-btn {
        width: 44px;
        height: 44px;
        min-height: 44px; /* re-raise the desktop 32px floor for WCAG 2.5.5 touch targets */
    }
}

/* ================================
   Elevated Variant — dp-action-btn
   ================================ */

/* Card-like action button with subtle shadow instead of border */
.dp-action-btn--elevated {
    background-color: var(--dp-surface-elevated);
    border-color: transparent;
    box-shadow: var(--shadow-l1, 0 1px 2px rgba(0, 0, 0, 0.04));
}

.dp-action-btn--elevated:hover {
    box-shadow: var(--shadow-l1-hover, 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06));
}

/* ================================
   Badge Counter on Action Buttons
   ================================ */

/* Base badge — positioned relative to .dp-action-btn (which has position: relative) */
.dp-action-btn__badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    border-radius: var(--radius-full, 9999px);
    color: #FFFFFF;
    pointer-events: none;
    animation: dp-badge-enter 200ms var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) both;
}

/* Semantic color variants */
.dp-action-btn__badge--danger {
    background-color: var(--dp-status-danger);
}

.dp-action-btn__badge--info {
    background-color: var(--dp-status-info);
}

.dp-action-btn__badge--success {
    background-color: var(--dp-status-success);
}

.dp-action-btn__badge--warning {
    background-color: var(--dp-status-warning);
    color: var(--dp-text-on-warning);
}

/* Dot indicator (no number — just a presence signal) */
.dp-action-btn__badge--dot {
    min-width: 8px;
    width: 8px;
    height: 8px;
    padding: 0;
    top: -3px;
    right: -3px;
}

/* Hidden badge (scale-out for smooth removal) */
.dp-action-btn__badge--hidden {
    transform: scale(0);
    opacity: 0;
}

/* Pulse on count update */
.dp-action-btn__badge--pulse {
    animation: dp-badge-pulse 300ms var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) both;
}

/* Keyframes */
@keyframes dp-badge-enter {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

@keyframes dp-badge-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Responsive badge sizing */
@media (max-width: 767px) {
    .dp-action-btn__badge {
        min-width: 16px;
        height: 16px;
        font-size: 0.625rem;
        line-height: 16px;
        padding: 0 4px;
    }

    .dp-action-btn__badge--dot {
        min-width: 6px;
        width: 6px;
        height: 6px;
    }
}