/* =============================================================================
   SHARED COMPONENTS — lib/styles/components/shared.css
   Covers: IconComponent, BadgeComponent, LoadingSpinner, ErrorMessage
   Aligned with: Total Solutions Brand Guidelines (Light Mode Only, Calm & Neutral)
   ============================================================================= */

/* =============================================================================
   ICON COMPONENT — Standalone icon (no container)
   ============================================================================= */

span[class*="icon--"] {
    transition: color var(--motion-transition-interactive), transform var(--motion-transition-interactive), opacity var(--motion-transition-interactive);
}

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

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

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

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

.icon--primary {
    color: #0F294A;
    /* Trust Navy */
}

.icon--secondary {
    color: #2A4B7C;
    /* Slate Blue */
}

.icon--action {
    color: #0056D2;
    /* Action Blue */
}

.icon--success {
    color: #0E793C;
    /* Compliance Green */
}

.icon--warning {
    color: #B25C00;
    /* Warning Amber */
}

.icon--error {
    color: #D12930;
    /* Critical Crimson */
}

.icon--white {
    color: #FFFFFF;
}

/* =============================================================================
   ICON CONTAINER — Circular background wrapper
   ============================================================================= */

.icon-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background-color var(--motion-transition-interactive), transform var(--motion-transition-interactive), opacity var(--motion-transition-interactive);
}

.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;
}

/* Container color variants */

.icon-container--navy {
    background-color: #0F294A;
    /* Trust Navy */
}

.icon-container--navy .icon--primary,
.icon-container--navy .icon--secondary,
.icon-container--navy .icon--action,
.icon-container--navy .icon--inherit {
    color: #FFFFFF;
}

.icon-container--action {
    background-color: rgba(0, 86, 210, 0.1);
    /* Faint Action Blue */
}

.icon-container--action .icon--primary,
.icon-container--action .icon--secondary,
.icon-container--action .icon--action,
.icon-container--action .icon--inherit {
    color: #0056D2;
}

.icon-container--success {
    background-color: #E6F4EA;
}

.icon-container--success .icon--inherit {
    color: #0E793C;
}

.icon-container--light {
    background-color: #F4F5F7;
}

.icon-container--light .icon--primary,
.icon-container--light .icon--secondary,
.icon-container--light .icon--inherit {
    color: #0F294A;
}

/* Hover transitions */
.icon-container--action-hover-navy:hover,
.card:hover .icon-container--action {
    background-color: #0F294A;
}

.card:hover .icon-container--action .icon--inherit {
    color: #FFFFFF;
}


/* =============================================================================
   BADGE COMPONENT — lib/components/shared/badge_component.dart
   Spec: Pill-shaped elements with soft backgrounds and bold text.
   ============================================================================= */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 9999px;
    /* Pill shape per spec */
    font-family: 'Inter', Roboto, sans-serif;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    transition: background-color var(--motion-transition-interactive), color var(--motion-transition-interactive), opacity var(--motion-transition-interactive), transform var(--motion-transition-interactive);
}

.badge--sm {
    font-size: 12px;
    padding: 2px 8px;
}

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

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

.badge__icon {
    font-size: 0.9em;
    line-height: 1;
    flex-shrink: 0;
}

/* Brand Spec Badge Colors */

/* Compliant / Active / Success */
.badge--success {
    background-color: #E6F4EA;
    color: #0E793C;
}

/* Pending / Draft / Warning */
.badge--warning {
    background-color: #FEF3C7;
    color: #B25C00;
}

/* Overdue / Risk / Error */
.badge--error {
    background-color: #FCE8E8;
    color: #D12930;
}

/* Archived / Closed / Neutral */
.badge--neutral {
    background-color: #EBECF0;
    color: #4A4D55;
}

/* Action / In-Progress (Blue variant) */
.badge--action {
    background-color: rgba(0, 86, 210, 0.1);
    color: #0056D2;
}

/* Gold / Custom */
.badge--gold {
    background-color: rgba(255, 184, 0, 0.2);
    color: #FFB800;
}
.badge--cyan {
    background-color: rgba(0, 180, 228, 0.2);
    color: #00B4E4;
}
.badge--navy {
    background-color: rgba(11, 23, 42, 0.2);
    color: #0B172A;
}


/* =============================================================================
   LOADING SPINNER — lib/components/shared/loading_spinner.dart
   ============================================================================= */

.spinner {
    display: inline-block;
    border-style: solid;
    border-radius: 50%;
    animation: dd-spin 0.75s linear infinite;
    vertical-align: middle;
    flex-shrink: 0;
}

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

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

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

.spinner--primary {
    border-color: rgba(15, 41, 74, 0.15);
    /* Faint Trust Navy */
    border-top-color: #0F294A;
    /* Trust Navy */
}

.spinner--action {
    border-color: rgba(0, 86, 210, 0.15);
    border-top-color: #0056D2;
}

.spinner--white {
    border-color: rgba(255, 255, 255, 0.20);
    border-top-color: #FFFFFF;
}

@keyframes dd-spin {
    from {
        transform: rotate(0deg);
    }

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

@media (prefers-reduced-motion: reduce) {
    .spinner {
        animation: dd-pulse 1.5s ease-in-out infinite;
        border-color: transparent !important;
        border-top-color: currentColor !important;
    }

    @keyframes dd-pulse {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: 0.35;
        }
    }
}

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

/* =============================================================================
   ERROR / FEEDBACK MESSAGE — lib/components/shared/error_message.dart
   ============================================================================= */

.message {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.message__icon {
    flex-shrink: 0;
    line-height: 1.5;
}

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

/* Inline Layout */

.message--inline {
    margin-top: 6px;
    font-family: 'Inter', Roboto, sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    align-items: center;
}

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

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

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

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

.message--inline.message--info {
    color: #0056D2;
}

/* Banner Layout */

.message--banner {
    position: relative;
    padding: 14px 16px;
    border-radius: 8px;
    border-width: 1px;
    border-style: solid;
    font-family: 'Inter', Roboto, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    width: 100%;
    box-sizing: border-box;
    margin-top: 16px;
}

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

/* Banner color variants */
.message--banner.message--error {
    background-color: #FCE8E8;
    border-color: rgba(209, 41, 48, 0.20);
    color: #D12930;
}

.message--banner.message--warning {
    background-color: #FEF3C7;
    border-color: rgba(178, 92, 0, 0.20);
    color: #B25C00;
}

.message--banner.message--success {
    background-color: #E6F4EA;
    border-color: rgba(14, 121, 60, 0.20);
    color: #0E793C;
}

.message--banner.message--info {
    background-color: rgba(0, 86, 210, 0.05);
    border-color: rgba(0, 86, 210, 0.20);
    color: #0056D2;
}

.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(--motion-transition-interactive), background-color var(--motion-transition-interactive);
    flex-shrink: 0;
}

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

.message__dismiss:focus-visible {
    outline: 2px solid #0056D2;
    outline-offset: 2px;
    opacity: 1;
}

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

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

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

.message--info .message__dismiss {
    color: #0056D2;
}

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

/* ==========================================================================
   Tag Chip (tag_chip.dart)
   ========================================================================== */
.tag-chip {
    display: inline-flex;
    align-items: center;
    background-color: var(--color-background-muted, #f8fafc);
    color: var(--color-slate-blue, #2a4b7c);
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 500;
    padding: var(--spacing-1, 0.25rem) var(--spacing-3, 0.75rem);
    border-radius: var(--radius-md, 6px);
    border: 1px solid var(--color-border, #e2e8f0);
    white-space: nowrap;
}

.tag-chip__icon {
    margin-right: var(--spacing-2, 0.5rem);
    font-size: 0.8em;
    opacity: 0.8;
}

/* ==========================================================================
   Divider (divider.dart)
   ========================================================================== */
.divider-horizontal {
    border: none;
    border-top: 1px solid var(--color-border, #e2e8f0);
    margin: var(--spacing-8, 2rem) 0;
    width: 100%;
}

.divider-vertical {
    width: 1px;
    background-color: var(--color-border, #e2e8f0);
    align-self: stretch;
    margin: 0 var(--spacing-4, 1rem);
}

/* ==========================================================================
   Tooltip (tooltip.dart)
   ========================================================================== */
.tooltip-wrapper {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted var(--color-slate-blue, #2a4b7c);
    cursor: help;
    color: var(--color-trust-navy, #0f294a);
    transition: color var(--motion-transition-interactive);
}

/* Focus ring for keyboard accessibility */
.tooltip-wrapper:focus-visible {
    outline: 2px solid var(--color-action-blue, #0056d2);
    outline-offset: 2px;
    border-bottom-color: transparent;
}

.tooltip-content {
    position: absolute;
    bottom: calc(100% + 8px);
    /* Positioned slightly above the text */
    left: 50%;
    transform: translateX(-50%) translateY(4px);

    /* Brand constraints: High contrast, highly legible */
    background-color: var(--color-trust-navy, #0f294a);
    color: var(--color-white, #ffffff);
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 400;
    text-align: center;
    line-height: 1.4;
    white-space: normal;
    width: max-content;
    max-width: 250px;
    padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);
    border-radius: var(--radius-sm, 4px);
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));

    /* Hidden by default with smooth fade-in */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* Prevents the tooltip itself from triggering hover */
    transition: opacity var(--motion-transition-interactive),
        transform var(--motion-transition-interactive),
        visibility var(--motion-transition-interactive);
    z-index: 100;
}

/* The little triangle pointing down at the text */
.tooltip-content::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: var(--color-trust-navy, #0f294a) transparent transparent transparent;
}

/* Reveal tooltip on hover or keyboard focus */
.tooltip-wrapper:hover .tooltip-content,
.tooltip-wrapper:focus-visible .tooltip-content {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}