// =============================================================================
// Fusion Claims Dashboard — Layout & Section Styles
// Consumes tokens from _fc_dashboard_tokens.scss (must load FIRST in bundle).
// =============================================================================

// =============================================================================
// Force full-width sheet on the dashboard. The sheet defaults to ~1100-1300px
// max-width via `flex: 1 1 <fixed>` plus a CSS max-width. We override both
// at every possible nesting level + use !important to beat media-query rules.
// =============================================================================

// 1. The sheet itself
.o_fc_dashboard_sheet,
.o_form_sheet.o_fc_dashboard_sheet,
.o_form_view .o_fc_dashboard_sheet,
.o_form_renderer .o_fc_dashboard_sheet {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    flex: 1 1 100% !important;
    flex-basis: 100% !important;
    margin: 0 !important;
}

// 2. The sheet-bg wrapper around the sheet
.o_form_view:has(.o_fc_dashboard_sheet) .o_form_sheet_bg,
.o_form_renderer:has(.o_fc_dashboard_sheet) .o_form_sheet_bg,
.o_form_sheet_bg:has(> .o_fc_dashboard_sheet) {
    max-width: 100% !important;
    width: 100% !important;
    flex: 1 1 100% !important;
}

// 3. The form view itself
.o_form_view.o_fc_dashboard,
.o_form_view:has(.o_fc_dashboard_sheet) {
    max-width: 100% !important;
    width: 100% !important;
}

// 4. Legacy fallback (older Odoo selector pattern)
.o_fc_dashboard .o_form_sheet {
    max-width: 100% !important;
    width: 100% !important;
    flex: 1 1 100% !important;
}

.o_fc_dashboard {
    // Re-export tokens as CSS custom properties for devtools inspection
    --fc-page-bg:           #{$_fc-page-bg};
    --fc-card-bg:           #{$_fc-card-bg};
    --fc-card-border:       #{$_fc-card-border};
    --fc-text:              #{$_fc-text};
    --fc-text-muted:        #{$_fc-text-muted};
    --fc-banner-from:       #{$_fc-banner-from};
    --fc-banner-to:         #{$_fc-banner-to};
    --fc-banner-border:     #{$_fc-banner-border};
    --fc-banner-text:       #{$_fc-banner-text};
    --fc-deadline-text:     #{$_fc-deadline-text};
    --fc-kpi-bg:            #{$_fc-kpi-bg};
    --fc-kpi-border:        #{$_fc-kpi-border};
    --fc-kpi-num:           #{$_fc-kpi-num};
    --fc-action-bg:         #{$_fc-action-bg};
    --fc-action-border:     #{$_fc-action-border};
    --fc-action-text:       #{$_fc-action-text};
    --fc-tile-bg:           #{$_fc-tile-bg};
    --fc-tile-border:       #{$_fc-tile-border};
    --fc-tile-num:          #{$_fc-tile-num};
    --fc-urgent-bg:         #{$_fc-urgent-bg};
    --fc-urgent-border:     #{$_fc-urgent-border};
    --fc-urgent-num:        #{$_fc-urgent-num};
    --fc-urgent-text:       #{$_fc-urgent-text};
    --fc-activity-bg:       #{$_fc-activity-bg};
    --fc-activity-border:   #{$_fc-activity-border};
    --fc-bottleneck-bg:     #{$_fc-bottleneck-bg};
    --fc-bottleneck-border: #{$_fc-bottleneck-border};

    background: var(--fc-page-bg);
    color: $_fc-text;

    .o_fc_banner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: linear-gradient(90deg, var(--fc-banner-from), var(--fc-banner-to));
        border: 1px solid var(--fc-banner-border);
        border-radius: 8px;
        padding: 10px 14px;
        font-weight: 600;
        color: var(--fc-banner-text);
    }
    .o_fc_banner__deadline { font-weight: 700; }

    .o_fc_kpi {
        background: var(--fc-kpi-bg);
        border: 1px solid var(--fc-kpi-border);
        border-radius: 8px;
        padding: 14px 10px;
        text-align: center;
        transition: transform 0.15s ease;

        &:hover { transform: translateY(-2px); }
    }
    .o_fc_kpi__num {
        display: block;
        font-size: 1.6rem;
        font-weight: 700;
        color: var(--fc-kpi-num);
    }
    .o_fc_kpi__lbl {
        display: block;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--fc-text-muted);
        margin-top: 2px;
    }
    // Secondary KPI variant — smaller, denser. Used for "This Month" and
    // "Pipeline by stage" tile strips.
    .o_fc_kpi--secondary {
        padding: 10px 6px;
        .o_fc_kpi__num { font-size: 1.15rem; }
        .o_fc_kpi__lbl { font-size: 0.68rem; }
    }

    .o_fc_actions {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .o_fc_pill {
        background: var(--fc-action-bg);
        border: 1px solid var(--fc-action-border);
        color: var(--fc-action-text);
        border-radius: 16px;
        padding: 5px 12px;
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.15s ease;

        &:hover { background: var(--fc-action-border); }
    }

    .o_fc_section {
        background: var(--fc-card-bg);
        border: 1px solid var(--fc-card-border);
        border-radius: 8px;
        padding: 10px 12px;
    }

    .o_fc_h6 {
        display: flex;
        align-items: center;
        font-size: 0.9rem;
        font-weight: 700;
        margin-bottom: 8px;
        color: var(--fc-text);
    }
    .o_fc_tag {
        display: inline-block;
        font-size: 0.65rem;
        padding: 2px 7px;
        border-radius: 4px;
        background: var(--fc-banner-border);
        color: var(--fc-banner-text);
        margin-left: 8px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-weight: 600;
    }

    .o_fc_tile {
        background: var(--fc-tile-bg);
        border: 1px solid var(--fc-tile-border);
        border-radius: 6px;
        padding: 8px 6px;
        text-align: center;
        font-size: 0.75rem;
        line-height: 1.3;
        cursor: pointer;
        transition: transform 0.15s ease, box-shadow 0.15s ease;

        &:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
    }
    .o_fc_tile__num {
        display: block;
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--fc-tile-num);
        margin-bottom: 2px;
    }
    .o_fc_tile--urgent {
        background: var(--fc-urgent-bg);
        border-color: var(--fc-urgent-border);
        color: var(--fc-urgent-text);

        .o_fc_tile__num { color: var(--fc-urgent-num); }
    }

    .o_fc_activities {
        background: var(--fc-activity-bg);
        border: 1px solid var(--fc-activity-border);
        border-radius: 8px;
        padding: 10px 12px;
    }
    .o_fc_activity_row {
        display: flex;
        justify-content: space-between;
        padding: 4px 0;
        border-bottom: 1px dashed var(--fc-card-border);
        font-size: 0.85rem;

        &:last-child { border-bottom: none; }
    }
    .o_fc_activity_overdue {
        color: var(--fc-urgent-text);
        font-weight: 600;
    }
    .o_fc_activity_deadline { color: var(--fc-text-muted); }
    .o_fc_empty {
        color: var(--fc-text-muted);
        font-style: italic;
        text-align: center;
        padding: 12px;
        margin: 0;
    }

    .o_fc_bottleneck {
        background: var(--fc-bottleneck-bg);
        border: 1px solid var(--fc-bottleneck-border);
        border-radius: 8px;
        padding: 10px 12px;
    }
    .o_fc_bottleneck_row {
        display: block;
        width: 100%;
        text-align: left;
        padding: 4px 0;
        color: var(--fc-text);
        text-decoration: none;

        &:hover { color: var(--fc-urgent-num); text-decoration: underline; }
    }

    // Recent ADP Exports list rows
    .o_fc_export_row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 0;
        border-bottom: 1px dashed var(--fc-card-border);
        font-size: 0.85rem;

        &:last-child { border-bottom: none; }
    }
    .o_fc_export_label small {
        color: var(--fc-text-muted);
        font-size: 0.72rem;
    }
    .o_fc_export_amount {
        font-weight: 700;
        color: var(--fc-kpi-num);
        font-variant-numeric: tabular-nums;
    }

    // Countdown widget colour levels (driven by OWL state)
    .o_fc_countdown {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 12px;
        font-weight: 700;
        font-size: 0.85rem;
    }
    .o_fc_countdown--info    { color: var(--fc-banner-text); }
    .o_fc_countdown--warning { color: #d97706; }   // amber (intentional fixed hex)
    .o_fc_countdown--danger  { color: var(--fc-urgent-num); }
    .o_fc_countdown--muted   { color: var(--fc-text-muted); font-style: italic; }
}