/*
 * Helpdesk backend colour system.
 * One palette is shared across dashboard, tickets, Kanban, support and settings.
 */

:root {
    --hd-primary-50: #eff6ff;
    --hd-primary-100: #dbeafe;
    --hd-primary-200: #bfdbfe;
    --hd-primary-300: #93c5fd;
    --hd-primary-400: #60a5fa;
    --hd-primary-500: #3b82f6;
    --hd-primary-600: #2563eb;
    --hd-primary-700: #1d4ed8;
    --hd-primary-800: #1e40af;
    --hd-primary-900: #1e3a8a;

    --hd-surface: #ffffff;
    --hd-surface-muted: #f8fafc;
    --hd-border: #e2e8f0;
    --hd-text: #0f172a;
    --hd-text-muted: #64748b;
}

.dark {
    --hd-surface: #18181b;
    --hd-surface-muted: #27272a;
    --hd-border: #3f3f46;
    --hd-text: #f4f4f5;
    --hd-text-muted: #a1a1aa;
}

.hd-helpdesk-surface {
    color: var(--hd-text);
}

.hd-helpdesk-surface a:not([data-flux-button]) {
    color: var(--hd-primary-600);
}

.dark .hd-helpdesk-surface a:not([data-flux-button]) {
    color: var(--hd-primary-400);
}

/* Shared cards/panels */
.hd-card,
.hd-panel {
    border: 1px solid var(--hd-border);
    background: var(--hd-surface);
    border-radius: 0.875rem;
}

.hd-card-header,
.hd-panel-header {
    border-bottom: 1px solid var(--hd-border);
    background: var(--hd-surface-muted);
}

/* Shared Helpdesk buttons where plain HTML buttons are used. */
.hd-button-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.5rem;
    background: var(--hd-primary-600);
    color: #fff;
    font-weight: 600;
    padding: 0.55rem 0.9rem;
    transition: background-color .15s ease, box-shadow .15s ease;
}

.hd-button-primary:hover {
    background: var(--hd-primary-700);
}

.hd-button-primary:focus-visible {
    outline: 2px solid var(--hd-primary-400);
    outline-offset: 2px;
}

/* Fields */
.hd-select,
.hd-input,
.hd-textarea {
    width: 100%;
    border: 1px solid var(--hd-border);
    background: var(--hd-surface);
    color: var(--hd-text);
    border-radius: 0.5rem;
}

.hd-select:focus,
.hd-input:focus,
.hd-textarea:focus {
    border-color: var(--hd-primary-500);
    outline: 2px solid color-mix(in srgb, var(--hd-primary-500) 25%, transparent);
    outline-offset: 1px;
}

/* Status/accent helpers */
.hd-accent {
    color: var(--hd-primary-600);
}

.dark .hd-accent {
    color: var(--hd-primary-400);
}

.hd-accent-bg {
    background: var(--hd-primary-600);
    color: #fff;
}

.hd-accent-soft {
    background: var(--hd-primary-50);
    color: var(--hd-primary-800);
    border-color: var(--hd-primary-200);
}

.dark .hd-accent-soft {
    background: color-mix(in srgb, var(--hd-primary-900) 55%, transparent);
    color: var(--hd-primary-200);
    border-color: var(--hd-primary-800);
}

/*
 * Flux sidebar active state.
 * Flux currently exposes current state using aria-current on the rendered link.
 */
.hd-sidebar a[aria-current="page"] {
    background: var(--hd-primary-600) !important;
    color: #fff !important;
}

.hd-sidebar a[aria-current="page"] svg {
    color: #fff !important;
}

.hd-sidebar a:not([aria-current="page"]):hover {
    background: var(--hd-primary-50);
    color: var(--hd-primary-800);
}

.dark .hd-sidebar a:not([aria-current="page"]):hover {
    background: color-mix(in srgb, var(--hd-primary-900) 30%, transparent);
    color: var(--hd-primary-200);
}