// Variables (spacing/typography) come from _variables.scss via manifest order.
// COLOR uses BS5 CSS custom properties so dark mode flips automatically.

:root {
    --fusion-asset-accent:           #3b82f6;
    --fusion-asset-accent-bg:        rgba(59, 130, 246, 0.10);
    --fusion-asset-state-draft:      #6b7280;
    --fusion-asset-state-draft-bg:   rgba(107, 114, 128, 0.12);
    --fusion-asset-state-running:    #10b981;
    --fusion-asset-state-running-bg: rgba(16, 185, 129, 0.12);
    --fusion-asset-state-paused:     #f59e0b;
    --fusion-asset-state-paused-bg:  rgba(245, 158, 11, 0.12);
    --fusion-asset-state-disposed:   #ef4444;
    --fusion-asset-state-disposed-bg:rgba(239, 68, 68, 0.12);
    --fusion-asset-severity-high:    #ef4444;
    --fusion-asset-severity-high-bg: rgba(239, 68, 68, 0.12);
    --fusion-asset-severity-medium:  #f59e0b;
    --fusion-asset-severity-medium-bg:rgba(245, 158, 11, 0.12);
    --fusion-asset-severity-low:     #10b981;
    --fusion-asset-severity-low-bg:  rgba(16, 185, 129, 0.12);
}

.o_fusion_assets {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    min-height: 100vh;

    &_header {
        background: var(--bs-body-bg);
        color: var(--bs-emphasis-color);
        border-bottom: 1px solid var(--bs-border-color);
        padding: $asset-space-4 $asset-space-6;
        display: flex;
        justify-content: space-between;
        align-items: center;

        h1 { font-size: $asset-font-size-xl; margin: 0; color: inherit; }

        .o_fusion_assets_summary {
            display: flex;
            gap: $asset-space-6;
            font-size: $asset-font-size-sm;
            color: var(--bs-secondary-color);

            .summary-value {
                font-weight: 600;
                color: var(--bs-emphasis-color);
                margin-left: $asset-space-1;
            }
        }
    }

    &_card {
        background: var(--bs-body-bg);
        color: var(--bs-body-color);
        border: 1px solid var(--bs-border-color);
        border-radius: $asset-border-radius-md;
        padding: $asset-space-4;
        margin-bottom: $asset-space-3;
        cursor: pointer;
        transition: all 200ms ease-in-out;

        &:hover {
            border-color: var(--fusion-asset-accent);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        &.selected {
            border-color: var(--fusion-asset-accent);
            background: var(--fusion-asset-accent-bg);
        }

        &_header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: $asset-space-2;
        }

        .asset-name {
            font-weight: 600;
            font-size: $asset-font-size-base;
            color: var(--bs-emphasis-color);
        }

        .asset-state-badge {
            padding: $asset-space-1 $asset-space-2;
            border-radius: $asset-border-radius;
            font-size: $asset-font-size-xs;
            font-weight: 500;
            text-transform: uppercase;

            &[data-state="draft"]    { background: var(--fusion-asset-state-draft-bg);    color: var(--fusion-asset-state-draft); }
            &[data-state="running"]  { background: var(--fusion-asset-state-running-bg);  color: var(--fusion-asset-state-running); }
            &[data-state="paused"]   { background: var(--fusion-asset-state-paused-bg);   color: var(--fusion-asset-state-paused); }
            &[data-state="disposed"] { background: var(--fusion-asset-state-disposed-bg); color: var(--fusion-asset-state-disposed); }
        }

        .asset-numbers {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: $asset-space-2;
            font-size: $asset-font-size-sm;
            color: var(--bs-secondary-color);

            .label { font-weight: 500; margin-right: $asset-space-2; }
            .value { color: var(--bs-emphasis-color); font-weight: 500; }
        }
    }

    &_table {
        background: var(--bs-body-bg);
        color: var(--bs-body-color);
        border-radius: $asset-border-radius-md;
        overflow: hidden;
        font-size: $asset-font-size-sm;

        table { width: 100%; border-collapse: collapse; color: inherit; }

        th {
            background: var(--bs-tertiary-bg);
            padding: $asset-space-3;
            text-align: left;
            font-weight: 600;
            color: var(--bs-secondary-color);
            border-bottom: 1px solid var(--bs-border-color);
        }

        td {
            padding: $asset-space-2 $asset-space-3;
            border-bottom: 1px solid var(--bs-border-color);
            color: var(--bs-body-color);
        }

        tr.posted  { background: var(--bs-secondary-bg); }
        tr.due-now { background: var(--fusion-asset-severity-medium-bg); }
        .text-end  { text-align: right; }
    }

    .btn_asset {
        padding: $asset-space-2 $asset-space-4;
        border-radius: $asset-border-radius;
        background: var(--bs-body-bg);
        border: 1px solid var(--bs-border-color);
        color: var(--bs-body-color);
        font-size: $asset-font-size-sm;
        cursor: pointer;

        &:hover { background: var(--bs-tertiary-bg); }

        &.primary {
            background: var(--fusion-asset-accent);
            border-color: var(--fusion-asset-accent);
            color: #ffffff;
            &:hover { filter: brightness(0.92); }
        }

        &.danger {
            background: var(--fusion-asset-severity-high);
            border-color: var(--fusion-asset-severity-high);
            color: #ffffff;
        }
    }
}

.o_fusion_anomaly_strip {
    margin: $asset-space-3 0;
    padding: $asset-space-3;
    border-radius: $asset-border-radius;
    border: 1px solid;
    font-size: $asset-font-size-sm;
    color: var(--bs-body-color);

    &[data-severity="high"]   { background: var(--fusion-asset-severity-high-bg);   border-color: var(--fusion-asset-severity-high); }
    &[data-severity="medium"] { background: var(--fusion-asset-severity-medium-bg); border-color: var(--fusion-asset-severity-medium); }
    &[data-severity="low"]    { background: var(--fusion-asset-severity-low-bg);    border-color: var(--fusion-asset-severity-low); }
}