/*
 * cati-local/notices.css -- .u-notice, .u-toast and .u-panel extensions (WIZARDTICK-124)
 *
 * 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).
 */

/* --- Notice, toast and panel extensions (WIZARDTICK-124). The package ships
   .u-notice (--info/--success/--warning/--error), .u-toast (success by
   default, --saving, --error) and .u-panel; these fill the gaps the dashboard
   hit when Bootstrap alerts and cards were migrated. --- */

/* Neutral notice: page help text with no semantic color (e.g. the "How it
   works" intro on Prompts). Same body as the package notice, grey edge. */
.u-notice--neutral {
    background-color: var(--uvaq-surface-inset);
    border-color: var(--uvaq-border);
    border-left-color: var(--uvaq-neutral-400);
}
.u-notice--neutral .u-notice__icon { color: var(--uvaq-text-muted); }
.u-notice p { margin: 0; }
.u-notice .u-notice__title { margin: 0 0 var(--uvaq-space-1); }
.u-notice p + p { margin-top: var(--uvaq-space-2); }

/* Django flash messages: base.html keeps bootstrap.Toast for placement,
   auto-hide and the close button, and paints the toast with .u-toast. The
   Bootstrap .toast box is neutralized so only the package skin shows; the
   two extra modifiers complete the four Django message tags. */
.toast.u-toast {
    --bs-toast-padding-x: 0;
    --bs-toast-padding-y: 0;
    --bs-toast-bg: transparent;
    --bs-toast-border-width: 0;
    --bs-toast-box-shadow: none;
    --bs-toast-max-width: 420px;
    width: auto;
    font-size: var(--uvaq-fs-help);
}
.toast.u-toast.show { display: inline-flex; }
.u-toast__icon { flex: none; font-size: 18px; line-height: 1; color: var(--uvaq-success); }
.u-toast--warning { border-left-color: var(--uvaq-warning-border); }
.u-toast--warning .u-toast__icon { color: var(--uvaq-warning); }
.u-toast--info { border-left-color: var(--uvaq-info-border); }
.u-toast--info .u-toast__icon { color: var(--uvaq-info); }
.u-toast--error .u-toast__icon { color: var(--uvaq-danger); }
.u-toast .btn-close { margin-left: var(--uvaq-space-2); font-size: 12px; }

/* The package gives .u-panel height: 100% so grid cards align. Inside a
   Bootstrap column (a flex item) that percentage resolves against the whole
   column, so two stacked panels made the first one swallow the height of
   both and pushed the second below the fold. Auto by default; equal heights
   only when the panel is the column's only child (analytics, role cards). */
.u-panel { height: auto; }
.row > [class*="col"] > .u-panel:only-child { height: 100%; }

/* Panel body without padding, for tables that sit flush against the panel
   edge (was .card-body.p-0). */
.u-panel__body--flush { padding: 0; }
.u-panel__body--flush > * + * { margin-top: 0; }

/* Panel foot for card actions (role cards, prompt template cards) and the
   staff-preview warning strip. Same recipe as the package's .u-flowcard__foot. */
.u-panel__foot {
    padding: var(--uvaq-space-3) var(--uvaq-space-4);
    background-color: var(--uvaq-surface-inset);
    border-top: 1px solid var(--uvaq-border);
    border-radius: 0 0 var(--uvaq-radius-md) var(--uvaq-radius-md);
}
.u-panel__foot--warning { background-color: var(--uvaq-warning-bg); color: var(--uvaq-warning); }
.u-panel__foot--warning i { margin-right: var(--uvaq-space-1); }

/* Panel head with a real heading level and an action pushed right, same
   anatomy as .panel__head on detail pages. */
.u-panel__head h3 { margin: 0; font-size: var(--uvaq-fs-label); font-weight: var(--uvaq-fw-semi); }
.u-panel__head h3 small { color: var(--uvaq-text-secondary); font-weight: var(--uvaq-fw-regular); font-size: var(--uvaq-fs-help); }
.u-panel__head .spacer { flex: 1; }
.u-panel__head i { color: var(--uvaq-text-muted); }