/* Canon boutons Stages staff - DNA .action-menu-btn (hauteur 28 px)
   Spec: docs/superpowers/specs/2026-09-09-stages-buttons-design.md
   Hors scope: formulaire entreprise (entreprise.css). */

:root {
    --stages-btn-radius: 6px;
    --stages-btn-padding-y: 6px;
    --stages-btn-padding-x: 10px;
    --stages-btn-padding-x-label: 12px;
    --stages-btn-padding-x-sm: 8px;
    --stages-btn-font-size: 14px;
    --stages-btn-line-height: 1;
    --stages-btn-min-height: 28px;
    /* Case icône / ⋮ : carré = source de vérité (hauteur mesurée 28 px) */
    --stages-btn-icon-box: 28px;
    --stages-btn-bg: rgba(15, 23, 42, 0.6);
    --stages-btn-bg-hover: rgba(15, 23, 42, 0.8);
    --stages-btn-border: rgba(148, 163, 184, 0.3);
    --stages-btn-border-hover: rgba(148, 163, 184, 0.5);
    --stages-btn-color: #94a3b8;
    --stages-btn-color-hover: #e5e7eb;
    --stages-btn-focus-ring: rgba(59, 130, 246, 0.45);
    --stages-btn-primary-bg: #2563eb;
    --stages-btn-primary-bg-hover: #1d4ed8;
    --stages-btn-primary-border: rgba(59, 130, 246, 0.6);
    --stages-btn-primary-color: #f9fafb;
    --stages-btn-danger-bg: #dc2626;
    --stages-btn-danger-bg-hover: #b91c1c;
    --stages-btn-danger-border: rgba(239, 68, 68, 0.75);
    --stages-btn-danger-color: #f9fafb;
}

.btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: var(--stages-btn-min-height);
    padding: var(--stages-btn-padding-y) var(--stages-btn-padding-x-label);
    border-radius: var(--stages-btn-radius);
    border: 1px solid var(--stages-btn-border);
    font-family: inherit;
    font-size: var(--stages-btn-font-size);
    font-weight: 500;
    line-height: var(--stages-btn-line-height);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    background: var(--stages-btn-bg);
    color: var(--stages-btn-color-hover);
    box-shadow: none;
}

/* display:inline-flex ci-dessus écrase sinon le [hidden] natif (ex. Enregistrer en lecture seule). */
.btn[hidden] {
    display: none !important;
}

.btn i {
    font-size: 1em;
    line-height: 1;
}

.btn:hover {
    background: var(--stages-btn-bg-hover);
    border-color: var(--stages-btn-border-hover);
    color: var(--stages-btn-color-hover);
}

/* Même hauteur que la source de vérité ; padding horizontal réduit */
.btn-sm {
    padding: var(--stages-btn-padding-y) var(--stages-btn-padding-x-sm);
    font-size: var(--stages-btn-font-size);
    min-height: var(--stages-btn-min-height);
}

/* Identique au trigger ⋮ (case 28×28) */
.btn-icon {
    box-sizing: border-box;
    width: var(--stages-btn-icon-box);
    height: var(--stages-btn-icon-box);
    min-width: var(--stages-btn-icon-box);
    min-height: var(--stages-btn-icon-box);
    padding: 0;
    gap: 0;
    font-size: var(--stages-btn-font-size);
    color: var(--stages-btn-color);
}

.btn-icon.btn-secondary {
    color: var(--stages-btn-color);
}

.btn-icon:hover,
.btn-icon.btn-secondary:hover {
    color: var(--stages-btn-color-hover);
}

.btn-icon.btn-primary {
    color: var(--stages-btn-primary-color);
}

.btn-icon.btn-primary:hover {
    color: var(--stages-btn-primary-color);
}

.btn-icon.btn-danger {
    color: var(--stages-btn-danger-color);
}

.btn-icon.btn-danger:hover {
    color: var(--stages-btn-danger-color);
}

.btn-block {
    display: flex;
    width: 100%;
}

.btn-secondary {
    background: var(--stages-btn-bg);
    border-color: var(--stages-btn-border);
    color: var(--stages-btn-color-hover);
}

.btn-secondary:hover {
    background: var(--stages-btn-bg-hover);
    border-color: var(--stages-btn-border-hover);
}

.btn-primary {
    background: var(--stages-btn-primary-bg);
    border-color: var(--stages-btn-primary-border);
    color: var(--stages-btn-primary-color);
    box-shadow: none;
}

.btn-primary:hover {
    background: var(--stages-btn-primary-bg-hover);
    border-color: var(--stages-btn-primary-border);
    color: var(--stages-btn-primary-color);
}

.btn-danger {
    background: var(--stages-btn-danger-bg);
    border-color: var(--stages-btn-danger-border);
    color: var(--stages-btn-danger-color);
    box-shadow: none;
}

.btn-danger:hover {
    background: var(--stages-btn-danger-bg-hover);
    border-color: var(--stages-btn-danger-border);
    color: var(--stages-btn-danger-color);
}

.btn-link {
    background: transparent;
    border: none;
    padding: 0;
    min-height: 0;
    color: #60a5fa;
    box-shadow: none;
}

.btn-link:hover {
    color: #93c5fd;
    text-decoration: underline;
    background: transparent;
    border: none;
}

table th.col-actions,
table td.col-actions,
table th.actions-cell,
table td.actions-cell {
    width: 1%;
    white-space: nowrap;
}

table td .actions-cell,
table td .actions-container {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--stages-btn-focus-ring);
}

.btn:active {
    transform: none;
    box-shadow: none;
}

.btn[disabled],
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}