/*
 * NCCAOM shared button & icon-well styles.
 *
 * These classes replace the many copy-pasted button/icon-well blocks found
 * across the app (e.g. .create-account-btn--next, .score-verification-request-button,
 * .duplicate-certificate-request-button, .chcs-coq-list-button, .action-card-number,
 * .app-top-header__product-menu-icon, .app-top-header__user-menu-icon — all of
 * which were near-identical CSS repeated per page).
 *
 * Requires design-tokens.css to be loaded first.
 */

/* ---------- Pill buttons (primary CTA, e.g. "Next", "Request X") ---------- */

.nccaom-btn-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 20px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1 !important;
    text-transform: none !important;
    box-shadow: none;
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.nccaom-btn-pill--primary {
    background: var(--nccaom-primary) !important;
    color: #ffffff !important;
}

.nccaom-btn-pill--primary:not([disabled]):hover {
    background: var(--nccaom-primary-hover) !important;
}

/* Common label alignment inside a pill button (icon + text spread across the
   full pill width, e.g. banner "Review" / "Take Action" buttons). */
.nccaom-btn-pill .mud-button-label {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Banner action button (e.g. "Review", "Take Action" on a system message
   banner). Local classes still control min-width per banner variant. */
.nccaom-btn-pill--banner-action {
    background: linear-gradient(90deg, var(--nccaom-primary-hover) 0%, var(--nccaom-primary) 100%) !important;
    color: #ffffff !important;
    font-size: 16px !important;
    min-height: 55px !important;
    min-width: 165px !important;
    padding: 7px 12px 7px 20px !important;
    box-shadow: 0 6px 16px rgba(2, 52, 87, 0.28) !important;
    overflow: hidden;
    white-space: nowrap;
}

.nccaom-btn-pill--banner-action .mud-button-label {
    justify-content: space-between;
    gap: 16px;
}

.nccaom-btn-pill--banner-action:not([disabled]):hover {
    background: linear-gradient(90deg, var(--nccaom-primary-hover) 0%, var(--nccaom-primary) 100%) !important;
}

/* Circular icon well inside a pill button (e.g. the arrow on a "Next" button).
   Translucent white works on any --primary background without needing a
   separate color per page. */
.nccaom-btn-pill__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    flex: 0 0 auto;
}

/* ---------- Category icon wells (dashboard action cards, dropdown menu items) ---------- */

.nccaom-icon-well {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
}

.nccaom-icon-well--lg {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 24px;
}

/* Medium icon well (e.g. transcript icons, sidebar identity icons) */
.nccaom-icon-well--md {
    width: 40px;
    height: 40px;
    border-radius: 12px;
}

/* Solid (non-tinted) primary icon well — used where the well itself carries
   the full-strength brand color rather than a soft tint (e.g. State/School
   dashboard action-card numbers). */
.nccaom-icon-well--solid-primary {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--nccaom-primary);
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    box-shadow: 0px 2px 8px rgba(74, 79, 140, 0.28);
}

.nccaom-icon-well--solid-primary svg,
.nccaom-icon-well--solid-primary .mud-icon-root {
    color: #ffffff;
}

/* Rounded-square action-card icon well (Applicant/Product dashboards).
   Responsive sizing matches the original per-breakpoint rules; the caller
   still supplies --action-accent/--action-soft/--action-tone/--action-border
   custom properties per row to color the well. */
.nccaom-icon-well--action-card {
    width: 54px;
    height: 54px;
    border: 1px solid var(--action-accent-border, var(--nccaom-primary-border));
    border-radius: 12px;
    background: var(--action-accent-soft, var(--nccaom-primary-soft));
    color: var(--action-accent, var(--nccaom-primary));
    box-shadow: none;
    transition: transform 200ms ease, background-color 200ms ease;
}

.nccaom-icon-well--action-card svg {
    color: var(--action-accent, var(--nccaom-primary));
}

@media (max-width: 1024px) {
    .nccaom-icon-well--action-card {
        width: 48px;
        height: 48px;
        border-radius: 10px;
    }
}

@media (max-width: 768px) {
    .nccaom-icon-well--action-card {
        width: 46px;
        height: 46px;
        border: 2px solid var(--action-border, var(--nccaom-primary-border));
        border-radius: 14px;
        background: var(--action-soft, var(--nccaom-primary-soft));
        color: var(--action-tone, var(--nccaom-primary));
        transition: transform 160ms ease, box-shadow 160ms ease;
    }

    .nccaom-icon-well--action-card .mud-icon-root {
        font-size: 22px !important;
    }

    .nccaom-icon-well--action-card svg {
        color: var(--action-tone, var(--nccaom-primary));
    }
}

@media (max-width: 640px) {
    .nccaom-icon-well--action-card {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }
}

@media (max-width: 420px) {
    .nccaom-icon-well--action-card {
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }
}

/* Banner icon (exclamation/info icon on the left of a system message
   banner). */
.nccaom-icon-well--banner {
    color: var(--nccaom-banner-icon);
    background-color: var(--nccaom-surface);
    border-radius: 10px;
    padding: 8px;
    width: 45px;
    height: 45px;
    box-shadow: 0 0 3px 0 var(--nccaom-banner-icon-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
}

.nccaom-icon-well--blue {
    background: rgba(74, 79, 140, 0.12);
    color: var(--nccaom-primary);
}

.nccaom-icon-well--mint {
    background: rgba(15, 143, 115, 0.12);
    color: var(--nccaom-mint);
}

.nccaom-icon-well--purple {
    background: rgba(110, 85, 181, 0.12);
    color: var(--nccaom-purple);
}

.nccaom-icon-well--teal {
    background: rgba(14, 124, 134, 0.12);
    color: var(--nccaom-teal);
}

.nccaom-icon-well--coral {
    background: rgba(217, 80, 58, 0.12);
    color: var(--nccaom-coral);
}

/* MudIcon/inline-SVG color inherits the icon well's own color so the same
   well markup works regardless of icon component. */
.nccaom-icon-well .mud-icon-root,
.nccaom-icon-well svg {
    color: inherit;
}

/* ---------- System message / banner ---------- */

.nccaom-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 14px;
    box-shadow: var(--nccaom-shadow-sm);
    border: 1px solid var(--nccaom-warning-soft);
    background-color: var(--nccaom-warning-soft);
}

.nccaom-banner--warning {
    background-color: var(--nccaom-warning-soft);
    border-color: var(--nccaom-warning-border);
}

.nccaom-banner--info {
    background-color: var(--nccaom-info-soft);
    border-color: var(--nccaom-info-border);
}

.nccaom-banner--success {
    background-color: var(--nccaom-success-soft);
    border-color: var(--nccaom-success-border);
}

.nccaom-banner--error {
    background-color: var(--nccaom-error-soft);
    border-color: var(--nccaom-error-border);
}

.nccaom-banner--actionable {
    border-left-width: 5px;
    box-shadow: var(--nccaom-shadow-actionable);
}

.nccaom-banner--actionable.nccaom-banner--warning {
    border-left-color: var(--nccaom-purple);
    background-color: var(--nccaom-purple-action-soft);
}