/* =============================================================================
   SHARED COMPONENTS — lib/styles/components/shared.css
   Covers: IconComponent, BadgeComponent, LoadingSpinner, ErrorMessage
   Final consolidated version for current shared component APIs
   ============================================================================ */


/* =============================================================================
   ICON COMPONENT — lib/components/shared/icon_component.dart
   Standalone icon and optional container
   ============================================================================ */

.icon {
    display: inline-block;
    line-height: 1;
    transition:
        color var(--transition-fast),
        opacity var(--transition-fast),
        transform var(--transition-fast);
}

.icon--sm {
    font-size: 24px;
}

.icon--md {
    font-size: 32px;
}

.icon--lg {
    font-size: 48px;
}

.icon--xl {
    font-size: 64px;
}

.icon--blue {
    color: var(--color-justice-blue);
}

.icon--teal {
    color: var(--color-guidance-teal);
}

.icon--red {
    color: var(--color-alert-red);
}

.icon--white {
    color: var(--color-white);
}

.icon--neutral {
    color: var(--color-neutral-navy);
}

.icon--brand {
    color: var(--color-justice-blue);
}

.icon--inherit {
    color: inherit;
}

.icon-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    transition:
        background-color var(--transition-normal),
        box-shadow var(--transition-normal),
        border-color var(--transition-fast);
}

.icon-container--sm {
    width: 40px;
    height: 40px;
}

.icon-container--md {
    width: 48px;
    height: 48px;
}

.icon-container--lg {
    width: 64px;
    height: 64px;
}

.icon-container--xl {
    width: 80px;
    height: 80px;
}

.icon-container--blue {
    background-color: rgba(31, 61, 99, 0.10);
    color: var(--color-justice-blue);
}

.icon-container--teal {
    background-color: rgba(29, 118, 112, 0.10);
    color: var(--color-guidance-teal);
}

.icon-container--light {
    background-color: var(--color-paper-white);
    color: var(--color-neutral-navy);
}

/* Interactive icon tone changes only in interactive parents */
a:hover .icon,
button:hover .icon,
[role="button"]:hover .icon,
a:focus-visible .icon,
button:focus-visible .icon,
[role="button"]:focus-visible .icon {
    opacity: 0.92;
}

a:hover .icon--blue,
button:hover .icon--blue,
[role="button"]:hover .icon--blue,
a:focus-visible .icon--blue,
button:focus-visible .icon--blue,
[role="button"]:focus-visible .icon--blue {
    color: #17314F;
}

a:hover .icon--teal,
button:hover .icon--teal,
[role="button"]:hover .icon--teal,
a:focus-visible .icon--teal,
button:focus-visible .icon--teal,
[role="button"]:focus-visible .icon--teal {
    color: #165E59;
}

a:hover .icon--red,
button:hover .icon--red,
[role="button"]:hover .icon--red,
a:focus-visible .icon--red,
button:focus-visible .icon--red,
[role="button"]:focus-visible .icon--red {
    color: #A83737;
}

a:hover .icon-container,
button:hover .icon-container,
[role="button"]:hover .icon-container,
a:focus-visible .icon-container,
button:focus-visible .icon-container,
[role="button"]:focus-visible .icon-container {
    box-shadow: 0 0 0 1px rgba(16, 32, 48, 0.05);
}

a:hover .icon-container--blue,
button:hover .icon-container--blue,
[role="button"]:hover .icon-container--blue,
a:focus-visible .icon-container--blue,
button:focus-visible .icon-container--blue,
[role="button"]:focus-visible .icon-container--blue {
    background-color: rgba(31, 61, 99, 0.14);
}

a:hover .icon-container--teal,
button:hover .icon-container--teal,
[role="button"]:hover .icon-container--teal,
a:focus-visible .icon-container--teal,
button:focus-visible .icon-container--teal,
[role="button"]:focus-visible .icon-container--teal {
    background-color: rgba(29, 118, 112, 0.14);
}

a:hover .icon-container--light,
button:hover .icon-container--light,
[role="button"]:hover .icon-container--light,
a:focus-visible .icon-container--light,
button:focus-visible .icon-container--light,
[role="button"]:focus-visible .icon-container--light {
    background-color: #ECECE8;
}


/* =============================================================================
   BADGE COMPONENT — lib/components/shared/badge_component.dart
   Motion rule: tone shifts only, no lift or movement
   ============================================================================ */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-weight: var(--fw-semibold);
    line-height: 1.4;
    white-space: nowrap;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
    transition:
        color var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.badge--sm {
    font-size: 12px;
    padding: 4px 10px;
}

.badge--md {
    font-size: 14px;
    padding: 6px 14px;
}

.badge--uppercase {
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.badge__icon {
    font-size: 0.9em;
    line-height: 1;
    flex-shrink: 0;
    transition: color var(--transition-fast), opacity var(--transition-fast);
}

.badge__label {
    display: inline-block;
}

.badge--blue {
    background-color: rgba(31, 61, 99, 0.10);
    color: var(--color-justice-blue);
    border-color: rgba(31, 61, 99, 0.14);
}

.badge--teal {
    background-color: rgba(29, 118, 112, 0.10);
    color: var(--color-guidance-teal);
    border-color: rgba(29, 118, 112, 0.14);
}

.badge--gold {
    background-color: rgba(241, 178, 70, 0.14);
    color: #B57E24;
    border-color: rgba(241, 178, 70, 0.24);
}

.badge--red {
    background-color: rgba(199, 66, 66, 0.10);
    color: var(--color-alert-red);
    border-color: rgba(199, 66, 66, 0.16);
}

.badge--neutral {
    background-color: var(--color-light-grey);
    color: var(--color-neutral-navy);
    border-color: rgba(16, 32, 48, 0.08);
}

.badge:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
}

a.badge:hover,
button.badge:hover,
.badge[role="button"]:hover,
.badge[tabindex]:hover {
    box-shadow: 0 0 0 1px rgba(16, 32, 48, 0.04);
}

a.badge:hover.badge--blue,
button.badge:hover.badge--blue,
.badge[role="button"]:hover.badge--blue,
.badge[tabindex]:hover.badge--blue,
a.badge:focus-visible.badge--blue,
button.badge:focus-visible.badge--blue,
.badge[role="button"]:focus-visible.badge--blue,
.badge[tabindex]:focus-visible.badge--blue {
    background-color: rgba(31, 61, 99, 0.14);
    border-color: rgba(31, 61, 99, 0.22);
    color: #17314F;
}

a.badge:hover.badge--teal,
button.badge:hover.badge--teal,
.badge[role="button"]:hover.badge--teal,
.badge[tabindex]:hover.badge--teal,
a.badge:focus-visible.badge--teal,
button.badge:focus-visible.badge--teal,
.badge[role="button"]:focus-visible.badge--teal,
.badge[tabindex]:focus-visible.badge--teal {
    background-color: rgba(29, 118, 112, 0.14);
    border-color: rgba(29, 118, 112, 0.22);
    color: #165E59;
}

a.badge:hover.badge--gold,
button.badge:hover.badge--gold,
.badge[role="button"]:hover.badge--gold,
.badge[tabindex]:hover.badge--gold,
a.badge:focus-visible.badge--gold,
button.badge:focus-visible.badge--gold,
.badge[role="button"]:focus-visible.badge--gold,
.badge[tabindex]:focus-visible.badge--gold {
    background-color: rgba(241, 178, 70, 0.18);
    border-color: rgba(241, 178, 70, 0.30);
    color: #96681D;
}

a.badge:hover.badge--red,
button.badge:hover.badge--red,
.badge[role="button"]:hover.badge--red,
.badge[tabindex]:hover.badge--red,
a.badge:focus-visible.badge--red,
button.badge:focus-visible.badge--red,
.badge[role="button"]:focus-visible.badge--red,
.badge[tabindex]:focus-visible.badge--red {
    background-color: rgba(199, 66, 66, 0.14);
    border-color: rgba(199, 66, 66, 0.22);
    color: #A83737;
}

a.badge:hover.badge--neutral,
button.badge:hover.badge--neutral,
.badge[role="button"]:hover.badge--neutral,
.badge[tabindex]:hover.badge--neutral,
a.badge:focus-visible.badge--neutral,
button.badge:focus-visible.badge--neutral,
.badge[role="button"]:focus-visible.badge--neutral,
.badge[tabindex]:focus-visible.badge--neutral {
    background-color: #D9DAD4;
    border-color: rgba(16, 32, 48, 0.14);
    color: var(--color-neutral-navy);
}

.section--dark .badge--gold {
    background-color: rgba(255, 184, 0, 0.20);
    color: #FFB800;
    border-color: rgba(255, 184, 0, 0.35);
}

.section--dark .badge--neutral {
    background-color: rgba(226, 232, 240, 0.10);
    color: #E2E8F0;
    border-color: rgba(226, 232, 240, 0.20);
}


/* =============================================================================
   ERROR / FEEDBACK MESSAGE — lib/components/shared/error_message.dart
   Gentle appearance only, no shake/bounce/flash
   ============================================================================ */

.message {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    transition:
        opacity var(--transition-normal),
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast);
}

.message__icon {
    flex-shrink: 0;
    line-height: 1.5;
    transition: color var(--transition-fast), opacity var(--transition-fast);
}

.message__body {
    flex: 1;
    min-width: 0;
}

.message__text {
    display: inline;
}

.message--inline {
    margin-top: 6px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: var(--fw-medium);
    line-height: 1.5;
    align-items: center;
    opacity: 1;
}

.message--inline .message__icon {
    font-size: 11px;
}

.message--banner {
    position: relative;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    border-width: 1px;
    border-style: solid;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: var(--fw-regular);
    line-height: 1.6;
    width: 100%;
    box-sizing: border-box;
    margin-top: 16px;
    opacity: 1;
}

.message--banner .message__icon {
    font-size: 16px;
    margin-top: 2px;
}

.message--inline.message--error {
    color: #EF4444;
}

.message--inline.message--warning {
    color: #C2570A;
}

.message--inline.message--success {
    color: #0A7A5F;
}

.message--inline.message--info {
    color: #007FA3;
}

.message--banner.message--error {
    background-color: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.30);
    color: #C81E1E;
}

.message--banner.message--warning {
    background-color: rgba(249, 115, 22, 0.08);
    border-color: rgba(249, 115, 22, 0.30);
    color: #C2570A;
}

.message--banner.message--success {
    background-color: rgba(16, 185, 145, 0.08);
    border-color: rgba(16, 185, 145, 0.30);
    color: #0A7A5F;
}

.message--banner.message--info {
    background-color: rgba(0, 180, 228, 0.08);
    border-color: rgba(0, 180, 228, 0.30);
    color: #007FA3;
}

.message__dismiss {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    opacity: 0.6;
    transition:
        opacity var(--transition-fast),
        background-color var(--transition-fast),
        color var(--transition-fast);
    flex-shrink: 0;
}

.message__dismiss:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.06);
}

.message__dismiss:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
    opacity: 1;
}

.message--error .message__dismiss {
    color: #C81E1E;
}

.message--warning .message__dismiss {
    color: #C2570A;
}

.message--success .message__dismiss {
    color: #0A7A5F;
}

.message--info .message__dismiss {
    color: #007FA3;
}

.message--banner .message__body {
    padding-right: 28px;
}

/* Optional calm reveal hook for controlled mounting */
.message[data-animate="enter"] {
    animation: jm-message-fade-in var(--motion-duration-base) var(--motion-ease-entrance);
}

@keyframes jm-message-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.section--dark .message--banner.message--error {
    background-color: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.40);
    color: #FCA5A5;
}

.section--dark .message--banner.message--warning {
    background-color: rgba(249, 115, 22, 0.15);
    border-color: rgba(249, 115, 22, 0.40);
    color: #FDBA74;
}

.section--dark .message--banner.message--success {
    background-color: rgba(16, 185, 145, 0.15);
    border-color: rgba(16, 185, 145, 0.40);
    color: #6EE7B7;
}

.section--dark .message--banner.message--info {
    background-color: rgba(0, 180, 228, 0.15);
    border-color: rgba(0, 180, 228, 0.40);
    color: #67E8F9;
}


/* =============================================================================
   LOADING SPINNER — lib/components/shared/loading_spinner.dart
   Smooth, calm, branded loading motion
   ============================================================================ */

.spinner {
    display: inline-block;
    border-radius: 50%;
    animation: jm-spinner-rotate 0.95s linear infinite;
    vertical-align: middle;
    flex-shrink: 0;
}

.spinner--sm {
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
}

.spinner--md {
    width: 24px;
    height: 24px;
    border: 3px solid transparent;
}

.spinner--lg {
    width: 40px;
    height: 40px;
    border: 4px solid transparent;
}

.spinner--blue {
    border-top-color: var(--color-justice-blue);
    border-right-color: rgba(31, 61, 99, 0.18);
    border-bottom-color: rgba(31, 61, 99, 0.18);
    border-left-color: rgba(31, 61, 99, 0.18);
    color: var(--color-justice-blue);
}

.spinner--teal {
    border-top-color: var(--color-guidance-teal);
    border-right-color: rgba(29, 118, 112, 0.18);
    border-bottom-color: rgba(29, 118, 112, 0.18);
    border-left-color: rgba(29, 118, 112, 0.18);
    color: var(--color-guidance-teal);
}

.spinner--white {
    border-top-color: var(--color-white);
    border-right-color: rgba(255, 255, 255, 0.28);
    border-bottom-color: rgba(255, 255, 255, 0.28);
    border-left-color: rgba(255, 255, 255, 0.28);
    color: var(--color-white);
}

@keyframes jm-spinner-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.btn__label--loading {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}


/* =============================================================================
   REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {

    .icon,
    .icon-container,
    .badge,
    .badge__icon,
    .message,
    .message__icon,
    .message__dismiss {
        transition-duration: 0.01ms !important;
        transform: none !important;
        animation: none !important;
    }

    .spinner {
        animation: jm-spinner-fade 1.6s ease-in-out infinite;
    }

    @keyframes jm-spinner-fade {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: 0.38;
        }
    }
}