// Fusion Helpdesk Reporter — systray button + dialog styling.
// Dark-mode aware via Odoo's $o-webclient-color-scheme branch.

$o-webclient-color-scheme: bright !default;

$_fhd-text-hex: #21252b;
$_fhd-muted-hex: #6c757d;
$_fhd-bg-hex: #ffffff;
$_fhd-border-hex: #d8dadd;
$_fhd-hover-hex: #f3f4f6;
$_fhd-accent-hex: #2c89e9;

@if $o-webclient-color-scheme == dark {
    $_fhd-text-hex: #e6e9ef !global;
    $_fhd-muted-hex: #9aa3ad !global;
    $_fhd-bg-hex: #22262d !global;
    $_fhd-border-hex: #3a3f47 !global;
    $_fhd-hover-hex: #2c313a !global;
    $_fhd-accent-hex: #4ea3ff !global;
}

$fhd-text:   var(--fhd-text, $_fhd-text-hex);
$fhd-muted:  var(--fhd-muted, $_fhd-muted-hex);
$fhd-bg:     var(--fhd-bg, $_fhd-bg-hex);
$fhd-border: var(--fhd-border, $_fhd-border-hex);
$fhd-hover:  var(--fhd-hover, $_fhd-hover-hex);
$fhd-accent: var(--fhd-accent, $_fhd-accent-hex);

// Systray icon
.o_fhd_systray {
    .o_fhd_systray_btn {
        background: transparent;
        border: none;
        padding: 0 0.5rem;
        line-height: 1;
        cursor: pointer;
        display: inline-flex;
        align-items: center;

        &:hover .o_fhd_systray_img {
            transform: scale(1.08);
            filter: drop-shadow(0 0 2px rgba(78, 163, 255, 0.45));
        }
    }

    .o_fhd_systray_img {
        height: 22px;
        width: 22px;
        object-fit: contain;
        transition: transform 120ms ease, filter 120ms ease;
    }

    // Hide the dropdown caret Bootstrap injects.
    .dropdown-toggle::after { display: none; }
}

// Dialog
.o_fhd_dialog {
    color: $fhd-text;

    .o_fhd_kind_row {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .o_fhd_kind_chip {
        flex: 1;
        padding: 0.6rem 0.75rem;
        background-color: $fhd-bg;
        border: 1px solid $fhd-border;
        border-radius: 6px;
        color: $fhd-text;
        cursor: pointer;
        font-weight: 500;

        &:hover { background-color: $fhd-hover; }

        &.o_fhd_kind_active {
            border-color: $fhd-accent;
            color: $fhd-accent;
            background-color: rgba(44, 137, 233, 0.10);
        }
    }

    .o_fhd_field {
        margin-bottom: 0.85rem;

        > label {
            display: block;
            font-weight: 500;
            margin-bottom: 0.25rem;
            color: $fhd-text;
        }
    }

    .o_fhd_hint {
        font-weight: 400;
        font-size: 0.8rem;
        color: $fhd-muted;
        margin-left: 0.4rem;
    }

    .o_fhd_mono {
        font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
        font-size: 0.85rem;
    }

    .o_fhd_actions_row {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .o_fhd_btn {
        display: inline-flex;
        align-items: center;
        padding: 0.4rem 0.8rem;
        border-radius: 4px;
        cursor: pointer;
        font-size: 0.9rem;
        border: 1px solid $fhd-border;
        background-color: $fhd-bg;
        color: $fhd-text;

        &:hover:not(:disabled) { background-color: $fhd-hover; }

        &:disabled { opacity: 0.6; cursor: default; }
    }

    .o_fhd_attach_list {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-top: 0.5rem;
    }

    .o_fhd_attach_item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.35rem 0.6rem;
        background-color: $fhd-hover;
        border: 1px solid $fhd-border;
        border-radius: 4px;
        font-size: 0.85rem;
    }

    .o_fhd_attach_name {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .o_fhd_attach_size {
        color: $fhd-muted;
        font-variant-numeric: tabular-nums;
    }

    .o_fhd_attach_remove {
        background: transparent;
        border: none;
        color: $fhd-muted;
        cursor: pointer;
        font-size: 1.1rem;
        line-height: 1;
        padding: 0 0.25rem;

        &:hover { color: #d32f2f; }
    }
}