/* FindumAI Details Page Styles */

:root {
    --findumai-orange-primary: #f89406;
    --findumai-success-bg: #e8f5e8;
    --findumai-success-text: #2e7d32;
    --findumai-success-text-dark: #1b5e20;
    --findumai-success-border: #4caf50;
    --findumai-warning-bg: #fff3e0;
    --findumai-warning-text: #ef6c00;
    --findumai-warning-text-dark: #e65100;
    --findumai-warning-border: #ff9800;
    --findumai-error-bg: #ffebee;
    --findumai-error-text: #c62828;
    --findumai-error-text-dark: #b71c1c;
    --findumai-error-border: #f44336;
    --findumai-critical-bg: #fce4ec;
    --findumai-critical-text: #ad1457;
    --findumai-critical-text-dark: #880e4f;
    --findumai-critical-border: #e91e63;
    --findumai-info-bg: #e1f5fe;
    --findumai-info-bg-light: #e3f2fd;
    --findumai-info-bg-lighter: #f8fdff;
    --findumai-info-text: #0277bd;
    --findumai-info-text-dark: #01579b;
    --findumai-info-text-darker: #1565C0;
    --findumai-info-border: #03a9f4;
    --findumai-info-border-medium: #2196F3;
    --findumai-info-border-dark: #1976D2;
    --findumai-purple-bg: #f3e5f5;
    --findumai-purple-text: #7b1fa2;
    --findumai-purple-border: #9c27b0;
    --findumai-neutral-bg: #fafafa;
    --findumai-neutral-bg-alt: #f5f5f5;
    --findumai-neutral-bg-dark: #f0f0f0;
    --findumai-neutral-text: #616161;
    --findumai-neutral-text-medium: #757575;
    --findumai-neutral-text-dark: #424242;
    --findumai-neutral-text-darker: #333;
    --findumai-neutral-text-light: #555;
    --findumai-neutral-text-lighter: #666;
    --findumai-neutral-text-lightest: #999;
    --findumai-neutral-border: #9e9e9e;
    --findumai-neutral-border-light: #bdbdbd;
    --findumai-neutral-border-lighter: #ddd;
    --findumai-neutral-border-lightest: #e0e0e0;
    --findumai-reasoning-bg: #f0f8ff;
}

.go-to-shipment {
    cursor: pointer;
    color: var(--findumai-orange-primary);
    outline: none;
}

/* Status Badges */
.status-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

.status-on-track, .state-on-track {
    background-color: var(--findumai-success-bg);
    color: var(--findumai-success-text);
    border: 1px solid var(--findumai-success-border);
}

.status-warning, .state-warning {
    background-color: var(--findumai-warning-bg);
    color: var(--findumai-warning-text);
    border: 1px solid var(--findumai-warning-border);
}

.status-intervention-required, .state-intervention-required {
    background-color: var(--findumai-error-bg);
    color: var(--findumai-error-text);
    border: 1px solid var(--findumai-error-border);
}

.status-critical, .state-critical {
    background-color: var(--findumai-critical-bg);
    color: var(--findumai-critical-text);
    border: 1px solid var(--findumai-critical-border);
}

.status-completed, .state-completed {
    background-color: var(--findumai-info-bg);
    color: var(--findumai-info-text);
    border: 1px solid var(--findumai-info-border);
}

.status-insufficient-data, .state-insufficient-data {
    background-color: var(--findumai-neutral-bg);
    color: var(--findumai-neutral-text);
    border: 1px solid var(--findumai-neutral-border);
}

.state-unknown {
    background-color: var(--findumai-neutral-bg-alt);
    color: var(--findumai-neutral-text-medium);
    border: 1px solid var(--findumai-neutral-border-light);
}

.status-on-track-card, .state-on-track-card {
    background-color: var(--findumai-success-bg);
    color: var(--findumai-success-text-dark);
}

.status-warning-card, .state-warning-card {
    background-color: var(--findumai-warning-bg);
    color: var(--findumai-warning-text-dark);
}

.status-intervention-required-card, .state-intervention-required-card {
    background-color: var(--findumai-error-bg);
    color: var(--findumai-error-text-dark);
}

.status-critical-card, .state-critical-card {
    background-color: var(--findumai-critical-bg);
    color: var(--findumai-critical-text-dark);
}

.status-completed-card, .state-completed-card {
    background-color: var(--findumai-info-bg);
    color: var(--findumai-info-text-dark);
}

.status-insufficient-data-card, .state-insufficient-data-card {
    background-color: var(--findumai-neutral-bg);
    color: var(--findumai-neutral-text-dark);
}

.state-unknown-card {
    background-color: var(--findumai-neutral-bg-alt);
    color: var(--findumai-neutral-text-dark);
}

/* Risk Level Badges */
.risk-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

.risk-low {
    background-color: var(--findumai-success-bg);
    color: var(--findumai-success-text);
    border: 1px solid var(--findumai-success-border);
}

.risk-moderate {
    background-color: var(--findumai-warning-bg);
    color: var(--findumai-warning-text);
    border: 1px solid var(--findumai-warning-border);
}

.risk-high {
    background-color: var(--findumai-error-bg);
    color: var(--findumai-error-text);
    border: 1px solid var(--findumai-error-border);
}

.risk-critical {
    background-color: var(--findumai-critical-bg);
    color: var(--findumai-critical-text);
    border: 1px solid var(--findumai-critical-border);
}

.risk-unknown {
    background-color: var(--findumai-neutral-bg-alt);
    color: var(--findumai-neutral-text-medium);
    border: 1px solid var(--findumai-neutral-border-light);
}

/* Severity Badges - Muted (no colors except priority) */
.severity-badge {
    display: inline-block;
    padding: 3px 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    background-color: var(--findumai-neutral-bg-alt);
    color: var(--findumai-neutral-text-lighter);
    border: 1px solid var(--findumai-neutral-border-lighter);
}

/* Remove individual severity color classes - all use same muted style */
.severity-low, .severity-moderate, .severity-high, .severity-critical, .severity-unknown {
    background-color: var(--findumai-neutral-bg-alt);
    color: var(--findumai-neutral-text-lighter);
    border: 1px solid var(--findumai-neutral-border-lighter);
}

/* Priority Badges */
.priority-badge {
    display: inline-block;
    padding: 3px 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}

.priority-low {
    background-color: var(--findumai-success-bg);
    color: var(--findumai-success-text);
    border: 1px solid var(--findumai-success-border);
}

.priority-medium {
    background-color: var(--findumai-warning-bg);
    color: var(--findumai-warning-text);
    border: 1px solid var(--findumai-warning-border);
}

.priority-high {
    background-color: var(--findumai-error-bg);
    color: var(--findumai-error-text);
    border: 1px solid var(--findumai-error-border);
}

.priority-critical {
    background-color: var(--findumai-critical-bg);
    color: var(--findumai-critical-text);
    border: 1px solid var(--findumai-critical-border);
}

.priority-unknown {
    background-color: var(--findumai-neutral-bg-alt);
    color: var(--findumai-neutral-text-medium);
    border: 1px solid var(--findumai-neutral-border-light);
}

/* Confidence Badges - Muted (no colors except priority) */
.confidence-badge {
    display: inline-block;
    padding: 3px 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    background-color: var(--findumai-neutral-bg-alt);
    color: var(--findumai-neutral-text-lighter);
    border: 1px solid var(--findumai-neutral-border-lighter);
}

/* Remove individual confidence color classes - all use same muted style */
.confidence-low, .confidence-moderate, .confidence-high, .confidence-unknown {
    background-color: var(--findumai-neutral-bg-alt);
    color: var(--findumai-neutral-text-lighter);
    border: 1px solid var(--findumai-neutral-border-lighter);
}

/* Intervention Badges */
.intervention-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

.intervention-required {
    background-color: var(--findumai-error-bg);
    color: var(--findumai-error-text);
    border: 1px solid var(--findumai-error-border);
}

.intervention-not-required {
    background-color: var(--findumai-success-bg);
    color: var(--findumai-success-text);
    border: 1px solid var(--findumai-success-border);
}

/* Risk Window Badges */
.risk-window {
    display: inline-block;
    padding: 3px 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}

.risk-window.clear {
    background-color: var(--findumai-success-bg);
    color: var(--findumai-success-text);
}

.risk-window.moderate-risk {
    background-color: var(--findumai-warning-bg);
    color: var(--findumai-warning-text);
}

.risk-window.high-risk {
    background-color: var(--findumai-error-bg);
    color: var(--findumai-error-text);
}

/* Impact Badges */
.impact-badge {
    display: inline-block;
    padding: 3px 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}

.impact-no-impact {
    background-color: var(--findumai-success-bg);
    color: var(--findumai-success-text);
}

.impact-minor-impact {
    background-color: var(--findumai-purple-bg);
    color: var(--findumai-purple-text);
}

.impact-moderate-impact {
    background-color: var(--findumai-warning-bg);
    color: var(--findumai-warning-text);
}

.impact-severe-impact {
    background-color: var(--findumai-error-bg);
    color: var(--findumai-error-text);
}

/* Mitigation Badges */
.mitigation-badge {
    display: inline-block;
    padding: 3px 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}

.mitigation-possible {
    background-color: var(--findumai-success-bg);
    color: var(--findumai-success-text);
}

.mitigation-not-possible {
    background-color: var(--findumai-error-bg);
    color: var(--findumai-error-text);
}

/* Timing Badges - Keep colored for timing */
.timing-badge {
    display: inline-block;
    padding: 3px 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}

.timing-immediate {
    background-color: var(--findumai-critical-bg);
    color: var(--findumai-critical-text);
    border: 1px solid var(--findumai-critical-border);
}

.timing-today {
    background-color: var(--findumai-error-bg);
    color: var(--findumai-error-text);
    border: 1px solid var(--findumai-error-border);
}

.timing-tomorrow {
    background-color: var(--findumai-warning-bg);
    color: var(--findumai-warning-text);
    border: 1px solid var(--findumai-warning-border);
}

.timing-planned {
    background-color: var(--findumai-info-bg-light);
    color: var(--findumai-info-text);
    border: 1px solid var(--findumai-info-border);
}

.timing-monitoring {
    background-color: var(--findumai-purple-bg);
    color: var(--findumai-purple-text);
    border: 1px solid var(--findumai-purple-border);
}

.timing-unknown {
    background-color: var(--findumai-neutral-bg-alt);
    color: var(--findumai-neutral-text-medium);
    border: 1px solid var(--findumai-neutral-border-light);
}

/* Source Badges */
.source-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
}

.source-shipment-info {
    background-color: var(--findumai-info-bg);
    color: var(--findumai-info-text);
}

.source-weather-api {
    background-color: var(--findumai-warning-bg);
    color: var(--findumai-warning-text);
}

.source-web-search {
    background-color: var(--findumai-purple-bg);
    color: var(--findumai-purple-text);
}

/* Special styling for last item in lists */
.last-item {
    border-bottom: none !important;
}

/* Error card styling */
.error-card {
    background-color: var(--findumai-error-bg);
    border-left: 4px solid var(--findumai-error-border);
}

.error-card md-icon {
    color: var(--findumai-error-border);
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .status-badge, .risk-badge, .intervention-badge {
        font-size: 10px;
        padding: 3px 6px;
    }

    .severity-badge, .priority-badge, .confidence-badge, .risk-window, .impact-badge, .mitigation-badge {
        font-size: 9px;
        padding: 2px 4px;
    }
}

/* Card header titles */
.md-title {
    color: var(--findumai-neutral-text-dark);
    font-weight: 500;
}

/* Section headers */
h4 {
    font-weight: 500;
    margin-bottom: 8px;
}

/* Chips styling override for categories and risk factors */
md-chips {
    margin-top: 4px;
}

md-chips .md-chip {
    background-color: var(--findumai-neutral-border-lightest);
    color: var(--findumai-neutral-text-dark);
    font-size: 8px;
    height: 20px;
    line-height: 20px;
    margin: 2px 4px 2px 0;
    padding: 0 6px;
    border-radius: 10px;
}

md-chips .md-chips {
    box-shadow: none;
    min-height: 24px;
}

md-chips md-chip {
    margin: 2px 4px 2px 0;
}

/* Ensure proper spacing in cards */
md-card-content > div:last-child {
    margin-bottom: 0;
}

/* Action highlight styling */
.action-highlight {
    background-color: var(--findumai-info-bg-lighter);
    border: 2px solid var(--findumai-info-border-medium);
    border-radius: 6px;
    padding: 12px;
    margin: 8px 0;
}

.action-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 8px;
}

.action-content {
    font-size: 14px;
    line-height: 1.5;
    color: var(--findumai-neutral-text-darker);
    font-weight: 500;
}

/* Loading and error state improvements */
.loading-container {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-text {
    margin-left: 16px;
}

.error-icon {
    color: var(--findumai-error-border);
    margin-right: 8px;
}

.analysis-main-container {
    padding: 16px;
}

.card-spacing {
    margin-bottom: 16px;
}

.field-container {
    padding: 8px;
}

.status-message-text {
    margin-top: 4px;
    font-style: italic;
}

.action-highlight-spacing {
    margin-bottom: 12px;
}

.reasoning-toggle {
    cursor: pointer;
    margin-top: 8px;
    padding: 4px;
    border-radius: 4px;
    background-color: var(--findumai-neutral-bg-alt);
}

.expand-icon {
    font-size: 16px;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

.reasoning-toggle-text {
    margin-left: 4px;
}

.reasoning-container {
    background-color: var(--findumai-reasoning-bg);
    border-left: 3px solid var(--findumai-info-border-medium);
    padding: 8px;
    margin: 4px 0;
}

.reasoning-section-small {
    margin-bottom: 4px;
}

.reasoning-section-medium {
    margin-bottom: 8px;
}

.reasoning-steps-list {
    margin: 4px 0 0 16px;
}

.reasoning-step-item {
    margin-bottom: 4px;
}

.pagination-center {
    display: flex;
    justify-content: center;
}

.findumai-warning-message {
    color: var(--findumai-orange-primary);
    font-size: 16px;
}

.findumai-empty-state-card {
    margin: 16px;
}

.findumai-list-margin {
    margin: 30px 0px 4em 0px;
}

.findumai-empty-container {
    height: 100px;
}

.findumai-filter-label {
    margin: 0 10px 0 10px;
}

.findumai-view-controls {
    text-align: right;
    margin-top: 5px;
}

.findumai-card-column-padding {
    padding: 10px;
}

.findumai-card-row-padding-horizontal {
    padding: 0px 10px;
}

.findumai-card-progress-container {
    padding: 10px;
    height: 55px;
    font-size: 20px;
}

.findumai-card-content-bg {
    background-color: #F2F0F0;
}

.findumai-card-inner-padding {
    padding: 10px;
}

.findumai-card-nodes-column {
    padding: 20px 10px;
}

/* New styles to reduce inline styles */
.recommendation-card {
    border: 1px solid var(--findumai-neutral-border-lightest);
    border-radius: 4px;
    padding: 16px;
    margin: 12px 0;
    background-color: var(--findumai-neutral-bg);
}

.primary-fields {
    margin-bottom: 16px;
}

.priority-section {
    margin-bottom: 12px;
}

.priority-label {
    font-size: 16px;
    font-weight: bold;
    color: var(--findumai-neutral-text-darker);
}

.priority-badge-large {
    margin-left: 8px;
    font-size: 14px;
    padding: 6px 12px;
}

.timing-section {
    margin-bottom: 8px;
}

.timing-label {
    font-size: 16px;
    font-weight: bold;
    color: var(--findumai-neutral-text-darker);
}

.timing-badge-large {
    margin-left: 8px;
    font-size: 14px;
    padding: 6px 12px;
}

.secondary-fields {
    border-top: 1px solid var(--findumai-neutral-border-lightest);
    padding-top: 12px;
    margin-top: 12px;
}

.secondary-field-row {
    margin-bottom: 8px;
}

.secondary-field-item {
    padding: 4px;
}

.secondary-label {
    color: var(--findumai-neutral-text-lighter);
    font-size: 13px;
}

.muted-badge {
    margin-left: 6px;
    font-size: 12px;
    background-color: var(--findumai-neutral-bg-alt);
    color: var(--findumai-neutral-text-lighter);
    padding: 2px 6px;
    border-radius: 8px;
    border: 1px solid var(--findumai-neutral-border-lighter);
}

.categories-section {
    margin-bottom: 8px;
}

.muted-chips .md-chip {
    background-color: var(--findumai-neutral-bg-dark) !important;
    color: var(--findumai-neutral-text-lighter) !important;
    font-size: 11px !important;
}

.action-content-large {
    font-size: 15px;
}

.action-header-large strong {
    color: var(--findumai-info-border-medium);
    font-size: 16px;
}

.secondary-text {
    margin: 4px 0 0 0;
    color: var(--findumai-neutral-text-lighter);
    font-size: 13px;
    line-height: 1.4;
}

.secondary-text-inline {
    color: var(--findumai-neutral-text-lighter);
    font-size: 13px;
    margin-left: 6px;
}

.priority-timing-row {
    margin-bottom: 12px;
}

/* Historical Analysis List Styles */
.historical-analysis-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.historical-analysis-item {
    position: relative;
    padding: 12px 40px 12px 16px;
    border: 1px solid var(--findumai-neutral-border-lightest);
    border-radius: 4px;
    background-color: var(--findumai-neutral-bg);
    cursor: pointer;
    transition: all 0.2s ease;
}

.historical-analysis-item:hover {
    background-color: var(--findumai-neutral-bg-dark);
    border-color: var(--findumai-info-border-medium);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.historical-analysis-item-selected {
    background-color: var(--findumai-info-bg-light);
    border-color: var(--findumai-info-border-medium);
    border-width: 2px;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
}

.historical-analysis-item-selected:hover {
    background-color: var(--findumai-info-bg-light);
    border-color: var(--findumai-info-border-dark);
}

.historical-analysis-item-selected .historical-arrow {
    color: var(--findumai-info-border-medium);
}

.historical-analysis-item-selected .historical-value,
.historical-analysis-item-selected .historical-message {
    color: var(--findumai-info-text-darker);
    font-weight: 600;
}

.historical-field {
    padding: 4px 8px;
}

.historical-label {
    font-size: 11px;
    color: var(--findumai-neutral-text-lighter);
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 4px;
}

.historical-value {
    font-size: 13px;
    color: var(--findumai-neutral-text-darker);
    font-weight: 500;
}

.historical-message {
    font-size: 13px;
    color: var(--findumai-neutral-text-light);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.4;
}

.historical-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--findumai-neutral-text-lightest);
}

.historical-analysis-item:hover .historical-arrow {
    color: var(--findumai-info-border-medium);
}

/* Smaller status badge for historical items */
.status-badge-small {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
}

/* Responsive adjustments for historical list */
@media (max-width: 768px) {
    .historical-analysis-item {
        padding: 8px 32px 8px 12px;
    }

    .historical-field {
        padding: 2px 4px;
    }

    .historical-label {
        font-size: 10px;
    }

    .historical-value,
    .historical-message {
        font-size: 12px;
    }

    .historical-message {
        -webkit-line-clamp: 1;
    }
}

/* Two Column Layout */
.left-column {
    padding-right: 8px;
}

.right-column {
    padding-left: 8px;
}

@media (max-width: 960px) {
    .right-column,
    .left-column {
        padding-left: 0;
        padding-right: 0;
        width: 100%;
        max-width: 100%;
        flex: 1 1 100%;
    }

    .left-column {
        order: 2;
    }

    .right-column {
        order: 1;
    }
}