/*
 * cati-local/buttons.css -- .u-btn variants the dashboard needed on top of the package (WIZARDTICK-123)
 *
 * Local extension to the CATI visual system. The official package
 * (client/static/css/cati/*.css, delivered by design) covers the wizard and
 * login only; everything here follows the same --uvaq-* tokens but is NOT part
 * of that delivery. Each pattern is documented in
 * _uvaq-assets/sistema-visual-cati/extensiones-locales/. Loaded from base.html
 * right after cati.min.css (see the <link> list there for the order).
 */

/* --- Button extensions (WIZARDTICK-123). The package ships --primary,
   --secondary, --ghost, --icon and --commit (wizard submit only); these are
   the three the dashboard needed on top. --- */

/* Destructive action (Delete / Deactivate): outlined in danger, fills with the
   danger tint on hover. Never solid -- destructive is not the primary action. */
.u-btn--danger {
    background-color: transparent;
    color: var(--uvaq-danger);
    border-color: var(--uvaq-danger-border);
}
.u-btn--danger:hover { background-color: var(--uvaq-danger-bg); color: var(--uvaq-danger); }

/* Compact size for table rows and card footers only (the package button is
   44px, too tall inside a row). Never the page's primary action. */
.u-btn--sm { min-height: 36px; padding: 0 var(--uvaq-space-3); font-size: var(--uvaq-fs-label); }
.u-btn--sm.u-btn--icon { min-width: 36px; }

/* Button on a navy surface (help card, dashboard mobile bar): the look of the
   package's .u-topbar__btn. Gold is fill-only, so hover is gold with navy text. */
.u-btn--on-dark {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.38);
    color: #FFFFFF;
}
.u-btn--on-dark:hover,
.u-btn--on-dark:focus-visible {
    background-color: var(--uvaq-gold-500);
    border-color: var(--uvaq-gold-500);
    color: var(--uvaq-surface-invert);
}

/* A button never breaks its label (Bootstrap wrapped them by default). If it
   doesn't fit next to a title, the flex header wraps and the button drops. */
.dashboard-content .u-btn { white-space: nowrap; }

/* Exception: the .rail stacks its buttons full-width in a ~250px column, so
   a long label ("View Gemini Call Detail" in Spanish) has nowhere to go but
   past the border. Let those wrap. */
.dashboard-content .rail__body .u-btn {
    white-space: normal;
    text-align: left;
}