/* public/assets/css/s51-tax-brackets.css
   Tax Brackets — set-level actions (Retire / Delete / Restore) + full-width confirm page.
   CSS variables only → Day/Night safe. Zero CDN. 8px spacing scale. */

/* ── Set action buttons (card header) ─────────────────────────── */
.tb-set-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tb-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px; border-radius: 999px;
    font-size: .85rem; font-weight: 600; line-height: 1.2;
    text-decoration: none !important; cursor: pointer;
    border: 1px solid transparent;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.tb-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.tb-btn:hover { transform: translateY(-2px); }
.tb-btn--warn {
    color: var(--warning);
    background: color-mix(in srgb, var(--warning) 12%, transparent);
    border-color: color-mix(in srgb, var(--warning) 35%, transparent);
}
.tb-btn--warn:hover { box-shadow: 0 6px 16px color-mix(in srgb, var(--warning) 28%, transparent); }
.tb-btn--danger {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    border-color: color-mix(in srgb, var(--danger) 35%, transparent);
}
.tb-btn--danger:hover { box-shadow: 0 6px 16px color-mix(in srgb, var(--danger) 28%, transparent); }
.tb-btn--primary {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    border-color: color-mix(in srgb, var(--primary) 35%, transparent);
}
.tb-btn--primary:hover { box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 28%, transparent); }
.tb-btn--success {
    color: var(--success);
    background: color-mix(in srgb, var(--success) 12%, transparent);
    border-color: color-mix(in srgb, var(--success) 35%, transparent);
}
.tb-btn--success:hover { box-shadow: 0 6px 16px color-mix(in srgb, var(--success) 28%, transparent); }

/* ── Full-width confirm page ──────────────────────────────────── */
.tb-page { width: 100%; max-width: none; display: flex; flex-direction: column; gap: 24px; }
.tb-page * { box-sizing: border-box; }

.tb-hero {
    --tb-accent: var(--warning);
    display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
    padding: 24px 32px; border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--tb-accent) 30%, var(--border));
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--tb-accent) 14%, var(--bg)),
        color-mix(in srgb, var(--tb-accent) 4%, var(--bg)));
    box-shadow: var(--shadow-ambient), var(--shadow-contact);
}
.tb-page.is-delete .tb-hero { --tb-accent: var(--danger); }
.tb-page.is-clone .tb-hero { --tb-accent: var(--primary); }
.tb-clone-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.tb-clone-fields .form-group { margin: 0; min-width: 0; }
.tb-form-actions .btn-tb-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
@media (max-width: 991px) { .tb-clone-fields { grid-template-columns: minmax(0, 1fr); } }
.tb-hero__icon {
    width: 64px; height: 64px; border-radius: 18px; flex-shrink: 0;
    display: grid; place-items: center;
    color: #fff; background: var(--tb-accent);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--tb-accent) 40%, transparent);
}
.tb-hero__icon svg { width: 32px; height: 32px; }
.tb-hero__body { flex: 1; min-width: 240px; }
.tb-hero__body h1 { margin: 0 0 8px; font-size: 1.5rem; }
.tb-hero__body p { margin: 0; color: var(--text-muted); max-width: 900px; }
.tb-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.tb-chip {
    padding: 8px 16px; border-radius: 999px; font-size: .85rem; font-weight: 700;
    color: var(--tb-accent);
    background: color-mix(in srgb, var(--tb-accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--tb-accent) 30%, transparent);
}

.tb-alert {
    display: flex; gap: 16px; align-items: flex-start;
    padding: 16px 24px; border-radius: 12px;
    border: 1px solid; width: 100%;
}
.tb-alert svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.tb-alert--danger  { color: var(--danger);  background: color-mix(in srgb, var(--danger) 10%, transparent);  border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.tb-alert--warning { color: var(--warning); background: color-mix(in srgb, var(--warning) 10%, transparent); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }

.tb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; width: 100%; }
.tb-grid--single { grid-template-columns: minmax(0, 1fr); }
.tb-card {
    padding: 24px; border-radius: 16px; min-width: 0;
    background: var(--bg); border: 1px solid var(--border);
    box-shadow: var(--shadow-ambient), var(--shadow-contact);
}
.tb-card h3 { margin: 0 0 16px; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.tb-card .table-wrap { overflow-x: auto; }

.tb-form-card { width: 100%; }
.tb-form-card textarea { width: 100%; min-height: 120px; resize: vertical; }
.tb-form-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-top: 16px;
}
.tb-counter { font-size: .8rem; color: var(--text-muted); }
.tb-form-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tb-form-actions .btn { min-width: 160px; justify-content: center; }
.tb-form-actions .btn-tb-danger {
    background: var(--danger); color: #fff; border-color: var(--danger);
}
.tb-form-actions .btn-tb-warn {
    background: var(--warning); color: #fff; border-color: var(--warning);
}

@media (max-width: 991px) { .tb-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 575px) {
    .tb-hero { padding: 16px; gap: 16px; }
    .tb-card { padding: 16px; }
    .tb-form-actions, .tb-form-actions .btn { width: 100%; }
}