/**
 * GKB Client-Specific Style Overrides
 *
 * This file contains all gkb-specific CSS overrides that use blue color scheme
 * instead of the default primary color.
 *
 * Loading: Automatically loaded by ClientSpecificStyles component when NEXT_PUBLIC_CLIENT_ID=gkb
 */

/* ============================================================================
   CSS Custom Property Overrides
   ============================================================================ */

:root {
    /* Primary Colors */
    --primary: var(--gkb-blau-100) !important;
    --primary-hover: var(--gkb-blau-hover) !important;
    --primary-foreground: 0 0% 98%;
    --primary-light: var(--gkb-blau-20) !important;
    --primary-medium: var(--gkb-blau-60) !important;
    --primary-subtle1: var(--gkb-schwarz-5) !important;
    --primary-subtle2: var(--gkb-schwarz-10) !important;
    --primary-sub: var(--gkb-schwarz-40) !important;
    --primary-sub-2: var(--gkb-schwarz-20) !important;

    /* Secondary Colors */
    --secondary: var(--gkb-schwarz-10);
    --secondary-foreground: var(--gkb-schwarz-100);
    --secondary-light: var(--gkb-schwarz-10);
    --secondary-dark: var(--gkb-schwarz-20);

    /* Accent Colors */
    --accent: var(--gkb-blau-10) !important;
    --accent-foreground: var(--gkb-blau-hover) !important;

    /* Brand Colors */
    --brand-secondary: var(--gkb-blau-100) !important;

    /* Status Colors */
    --error: var(--gkb-rot-100) !important;
    --error-subtle1: var(--gkb-rot-10) !important;
    --error-subtle2: var(--gkb-rot-30) !important;
    --error-subtle3: var(--gkb-rot-50) !important;
    --error-on-subtle: var(--gkb-rot-100) !important;
    --success: var(--gkb-grün-100) !important;
    --success-subtle1: var(--gkb-grün-10) !important;
    --success-subtle2: var(--gkb-grün-30) !important;
    --success-subtle3: var(--gkb-grün-50) !important;
    --success-on-subtle: var(--gkb-grün-100) !important;

    /* Component-Specific Colors */
    --color-error-text: var(--gkb-rot-100) !important;
    --color-loading-indicator: hsl(var(--gkb-schwarz-100)) !important;
    --color-source-item-label: hsl(var(--gkb-schwarz-100)) !important;

    /* Text Colors */
    --font-primary: var(--gkb-schwarz-100) !important;
    --muted-foreground: var(--gkb-schwarz-40) !important;
    --popover-foreground: 211 100% 31% !important;

    /* Action Icons */
    --action-icon-light: var(--gkb-schwarz-100) !important;
    --action-icon-dark: 0 0% 98%;

    /* User Message */
    --user-message-background: var(--gkb-schwarz-5) !important;
    --user-message-text: var(--gkb-schwarz-100) !important;

    /* Answer Text */
    --answer-text-light: var(--gkb-schwarz-100) !important;

    /* History Group */
    --history-group-title: var(--gkb-schwarz-40) !important;
    --history-group-item: var(--gkb-schwarz-100) !important;
    --history-group-active-bg: var(--gkb-weiss) !important;
    --history-group-hover-bg: var(--gkb-schwarz-10) !important;

    /* Search Input */
    --search-input-text: var(--gkb-schwarz-100) !important;
    --search-input-border: var(--gkb-schwarz-20) !important;
    --search-input-icon: var(--gkb-schwarz-40) !important;

    /* Header */
    --header-border: var(--gkb-schwarz-20) !important;

    /* Question Input */
    --question-input-border: var(--gkb-schwarz-20) !important;
    --question-input-placeholder: var(--gkb-schwarz-40) !important;
    --question-input-text: var(--gkb-schwarz-100) !important;

    /* Sidebar Menu Item - Default */
    --sidebar-menu-item-text: var(--gkb-blau-100) !important;
    --sidebar-menu-item-icon: var(--gkb-blau-100) !important;
    --sidebar-menu-item-bg: transparent;

    /* Sidebar Menu Item - Hover */
    --sidebar-menu-item-hover-text: var(--gkb-blau-hover) !important;
    --sidebar-menu-item-hover-icon: var(--gkb-blau-hover) !important;
    --sidebar-menu-item-hover-bg: var(--gkb-schwarz-10) !important;

    /* Sidebar Menu Item - Active */
    --sidebar-menu-item-active-text: var(--gkb-weiss) !important;
    --sidebar-menu-item-active-icon: var(--gkb-weiss) !important;
    --sidebar-menu-item-active-bg: var(--gkb-blau-100) !important;

    /* Chat Suggestion */
    --chat-suggestion-border: var(--gkb-schwarz-20) !important;

    /* Loading Indicator */
    --loading-indicator-color: var(--gkb-schwarz-100) !important;

    /* Source Item Label */
    --source-item-label-color: var(--gkb-schwarz-100) !important;

    /* Input Fields */
    --input-background: 0 0% 98% !important;
    --input-border: 0 0% 90% !important;

    /* Layout */
    --header-height: 71px !important;
    --mega-menu-height: var(--header-height);
    --banner-height: 0px;
    --main-border: var(--gkb-schwarz-20) !important;

    /* Spacing / Radius */
    --radius: 0.5rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --new-chat-button-radius: 4px;

    /* Typography */
    --text-sm: 0.875rem !important; /* 14px */
    --text-sm-line-height: 1.25rem !important; /* 20px */

    /* Dashboard */
    --dashboard-color-1: var(--gkb-blau-100) !important;
    --dashboard-color-2: var(--gkb-blau-70) !important;
}

/* ============================================================================
   Typography Overrides - Font Families
   ============================================================================ */

:root {
    --font-body: Verdana, Arial, Helvetica, sans-serif;
}

html,
body {
    font-family: var(--font-body) !important;
}

/* Headings use TheSerifC5 with semibold weight (600) */
/* Note: --font-theserifc5 is defined by Next.js font class on body element */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.heading,
.text-heading {
    font-family: var(--font-theserifc5), Georgia, serif !important;
    font-weight: 600;
    color: hsl(211 100% 31%);
}

.text-font-primary {
    color: hsl(var(--gkb-schwarz-100)) 1;
}

/* Body text uses Verdana */
p,
.text-body,
.prose,
article,
section {
    font-family: var(--font-body) !important;
}

.prose strong {
    color: hsl(var(--gkb-schwarz-100));
    font-weight: 700;
}

/* Component-specific typography */
.chat-message h1,
.chat-message h2,
.chat-message h3,
.chat-message h4,
.chat-message h5,
.chat-message h6,
.dialog-title,
.modal-title,
[role="dialog"] h2,
[role="alertdialog"] h2,
.card-header,
.section-title,
.page-title {
    font-family: var(--font-theserifc5), Georgia, serif !important;
    font-weight: 500;
}

label {
    font-size: 15px !important;
}

/* ============================================================================
   Component-Specific Overrides
   ============================================================================ */

/* Answer Components */
.answer-error p {
    color: hsl(211 100% 31%) !important;
}

.answer-option-copy,
.answer-option-regenerate {
    color: hsl(var(--gkb-schwarz-40)) !important;
}

.answer-option-copy svg,
.answer-option-regenerate svg {
    color: hsl(var(--gkb-schwarz-100)) !important;
}

.answer-option-copy:hover,
.answer-option-regenerate:hover,
.answer-option-copy:hover svg,
.answer-option-regenerate:hover svg {
    color: hsl(var(--gkb-blau-100)) !important;
}

.answer-option-previous,
.answer-option-next {
    color: hsl(var(--gkb-schwarz-100)) !important;
}

.answer-option-previous:hover,
.answer-option-next:hover {
    color: hsl(var(--gkb-schwarz-50)) !important;
}

.answer-navigation-button,
.answer-navigation-button:disabled {
    background-color: transparent !important;
    color: hsl(var(--gkb-schwarz-100)) !important;
}

.answer-variant-counter {
    color: hsl(var(--gkb-schwarz-40)) !important;
}

.source-item-badge {
    color: hsl(var(--gkb-schwarz-100)) !important;
}

.source-item-badge:hover {
    background-color: var(--gkb-schwarz-10) !important;
    color: var(--gkb-blau-100) !important;
}

.source-item-badge-open {
    background-color: hsl(var(--gkb-schwarz-10)) !important;
    color: hsl(var(--gkb-blau-100)) !important;
}

/* History Components */
.history-menu-item:hover {
    background-color: hsl(var(--gkb-schwarz-5)) !important;
}

.history-menu-item-rename svg {
    color: hsl(var(--gkb-blau-100)) !important;
}

.history-menu-item-delete svg {
    color: hsl(var(--gkb-rot-100)) !important;
}

/* History Delete Alert */
.history-delete-alert-cancel {
    background-color: hsla(250, 20%, 96%, 1);
    border-color: hsla(250, 14%, 83%, 1);
    color: hsla(250, 60%, 52%, 1);
}

.history-delete-alert-cancel-icon {
    display: none !important;
}

.history-delete-alert-delete:hover {
    background-color: hsla(355, 85%, 35%, 1) !important;
}

/* User Chat Message */
.user-chat-message {
    margin-bottom: 24px;
}

.user-chat-message-cancel {
    background-color: hsla(250, 20%, 96%, 1);
    border-color: hsla(0, 0%, 80%, 1);
    color: hsla(356, 49%, 43%, 1) !important;
}

/* Feedback Components */
.rated-answer-content {
    color: hsl(211 100% 31%) !important;
}

.feedback-dialog-cancel {
    background-color: hsla(250, 20%, 96%, 1);
    border-color: hsla(250, 14%, 83%, 1);
    color: hsla(250, 60%, 52%, 1);
}

.feedback-dialog-cancel-icon {
    display: none !important;
}

.feedback-dialog-label {
    font-family: var(--font-body) !important;
    font-size: 15px !important;
}

.feedback-button-positive,
.feedback-button-negative {
    color: hsl(var(--gkb-schwarz-100)) !important;
    background-color: transparent !important;
}

.feedback-button-positive:hover,
.feedback-button-negative:hover {
    color: hsl(var(--gkb-schwarz-50)) !important;
}

/* Search Input */
.search-input-input {
    min-height: 44px;
    border-radius: 8px;
}

/* Header Components */
.header-navigation-button {
    font-family: var(--font-theserifc5), Georgia, serif !important;
    font-weight: 600 !important;
    background-color: transparent !important;
    color: hsl(var(--gkb-schwarz-60)) !important;
}

.header-navigation-button.is-active {
    background-color: transparent !important;
    color: hsl(var(--gkb-blau-100)) !important;
}

.header-navigation-button.is-active:hover,
.header-navigation-button:hover {
    background-color: transparent !important;
    color: hsl(var(--gkb-blau-hover)) !important;
}

/* Button Components */
.outline-button {
    border-color: hsl(var(--gkb-schwarz-20));
    background-color: transparent;
    color: hsl(var(--gkb-blau-100));
}

.outline-button:hover {
    border-color: hsl(var(--gkb-schwarz-30));
    background-color: transparent;
    color: hsl(var(--gkb-blau-hover));
}

.o-button:disabled {
    border-color: hsl(var(--gkb-schwarz-10));
    background-color: hsl(var(--gkb-schwarz-10));
    color: hsl(var(--gkb-schwarz-50));
    opacity: 1;
}

/* Web Search Button  */
.web-search-button {
    transition-duration: 0ms !important;
}

.web-search-button.is-disabled,
.effort-toggle-button.is-disabled {
    opacity: 1 !important;
    border-color: hsl(var(--gkb-schwarz-10)) !important;
    background-color: hsl(var(--gkb-schwarz-10)) !important;
}

.web-search-button.is-disabled > *:first-child,
.web-search-button.is-disabled *,
.effort-toggle-button.is-disabled > *:first-child,
.effort-toggle-button.is-disabled * {
    border-color: hsl(var(--gkb-schwarz-10)) !important;
    background-color: hsl(var(--gkb-schwarz-10)) !important;
    color: hsl(var(--gkb-schwarz-50)) !important;
    opacity: 1 !important;
}

.web-search-button-label,
.effort-toggle-button-label {
    font-size: 12px;
    color: hsl(var(--gkb-schwarz-100)) !important;
}

.web-search-button-icon,
.effort-toggle-button-icon {
    color: hsl(var(--gkb-schwarz-100)) !important;
}

.web-search-button-chevron,
.effort-toggle-button-chevron {
    color: hsl(var(--gkb-schwarz-100)) !important;
}

.web-search-button.is-active .web-search-button-label,
.web-search-button.is-active .web-search-button-icon,
.web-search-button.is-active .web-search-button-chevron,
.effort-toggle-button.is-active .effort-toggle-button-chevron,
.effort-toggle-button.is-active .effort-toggle-button-label,
.effort-toggle-button.is-active .effort-toggle-button-icon {
    color: hsl(var(--gkb-weiss)) !important;
}

.web-search-button.is-active .web-search-background-layer {
    background-color: hsl(var(--gkb-blau-100));
}

.web-search-button.is-disabled .web-search-background-layer,
.effort-toggle-button.is-disabled .effort-toggle-background-layer {
    border-color: hsl(var(--gkb-schwarz-10)) !important;
}

.web-search-button.is-disabled .web-search-button-label,
.effort-toggle-button.is-disabled .effort-toggle-button-label {
    color: hsl(var(--gkb-schwarz-50)) !important;
}

/* Web Search Options */
.web-search-option-button:hover,
.effort-option-button:hover {
    background-color: hsl(var(--gkb-schwarz-5)) !important;
}

.web-search-option-button.is-active:hover,
.effort-option-button.is-active:hover {
    background-color: hsl(var(--gkb-blau-hover)) !important;
}

.web-search-option-button.is-active .web-search-option-label,
.web-search-option-button.is-active .web-search-option-description,
.effort-option-button.is-active .effort-option-label,
.effort-option-button.is-active .effort-option-description {
    color: hsl(var(--gkb-weiss)) !important;
}

.web-search-option-label,
.effort-option-label {
    color: hsl(var(--gkb-schwarz-100)) !important;
    font-weight: 400 !important;
    font-size: 15px !important;
}

.web-search-option-description,
.effort-option-description {
    color: hsl(var(--gkb-schwarz-40)) !important;
    font-size: 12px !important;
}

/* Web Search Card */
.websearch-card.is-selected {
    border-color: hsl(var(--gkb-blau-100)) !important;
    background-color: hsl(var(--gkb-blau-10)) !important;
}

/* Form Inputs */
.o-input,
.o-textarea {
    border-color: hsl(var(--gkb-schwarz-20)) !important;
    background-color: hsl(var(--gkb-weiss)) !important;
    color: hsl(var(--gkb-schwarz-100)) !important;
}

.o-input::placeholder,
.o-textarea::placeholder {
    color: hsl(var(--gkb-schwarz-30)) !important;
}

.o-input:focus,
.o-textarea:focus {
    border-color: hsl(var(--gkb-blau-100)) !important;
}

.o-input:disabled,
.o-textarea:disabled {
    border-color: hsl(var(--gkb-schwarz-20)) !important;
    background-color: transparent !important;
    color: hsl(var(--gkb-schwarz-40)) !important;
    opacity: 1 !important;
}

.o-input:invalid,
.o-textarea:invalid {
    border-color: hsl(var(--gkb-rot-100)) !important;
}

/* Instruction Select Components */
.instruction-select-button:hover {
    background-color: hsl(var(--gkb-schwarz-5)) !important;
}

.instruction-select-button:hover .instruction-select-button-title,
.instruction-select-button:hover .instruction-select-button-icon {
    color: hsl(var(--gkb-blau-100)) !important;
}

.instruction-select-button-icon {
    color: hsl(var(--gkb-blau-100)) !important;
}

.instruction-select-button.is-active .instruction-select-button-title,
.instruction-select-button.is-active .instruction-select-button-icon {
    color: hsl(var(--gkb-weiss)) !important;
}

.instruction-select-button.is-active:hover {
    background-color: hsl(var(--gkb-blau-hover)) !important;
}

.instruction-select-button-view:hover svg {
    color: hsl(var(--gkb-blau-100)) !important;
    fill: hsl(var(--gkb-blau-100)) !important;
}

#instruction-select {
    color: hsl(var(--gkb-schwarz-100)) !important;
}

#instruction-select:disabled {
    color: hsl(var(--gkb-schwarz-50)) !important;
}

/* Toast Overrides */
[data-sonner-toast][data-type="success"] {
    background-color: hsl(var(--gkb-blau-10)) !important;
    border: 1px solid hsl(var(--gkb-blau-70)) !important;
    color: hsl(var(--gkb-blau-90)) !important;
}

[data-sonner-toast][data-type="success"] svg {
    color: hsl(var(--gkb-blau-70)) !important;
}

/* Admin Table */
.admin-table-cell {
    color: hsl(var(--gkb-blau-70)) !important;
}

/* Welcome Message */
.welcome-message-agent-color {
    color: hsl(var(--gkb-gletscher-100)) !important;
}

/* Schulungen Hero */
.schulungen-hero-title {
    color: hsl(var(--gkb-blau-100)) !important;
    background: none !important;
    background-clip: unset !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
}

/* TipTap Editor */
.tiptap-editor {
    background-color: white !important;
}

.ProseMirror-focused {
    outline: none;
    background-color: hsl(var(--gkb-weiss));
    border-color: transparent;
}

.tiptap {
    color: hsl(var(--gkb-schwarz-100)) !important;
}

/* Anonymization Components */
.anonymization-edit-mode {
    border-color: hsl(var(--gkb-schwarz-20)) !important;
    background-color: hsl(var(--gkb-weiss)) !important;
    color: hsl(var(--gkb-schwarz-100)) !important;
}

.anonymization-edit-mode:focus-within {
    border-color: hsl(var(--gkb-blau-100)) !important;
}

.admin-sidebar .sidebar-menu-item-button-wrapper {
    border-radius: 4px !important;
}

.admin-sidebar .sidebar-menu-item-button-wrapper.sidebar-menu-item-button-wrapper-locked,
.admin-sidebar .sidebar-menu-item-button-wrapper.sidebar-menu-item-button-wrapper-locked .sidebar-menu-text,
.admin-sidebar .sidebar-menu-item-button-wrapper.sidebar-menu-item-button-wrapper-locked .menu-item-lock-icon,
.admin-sidebar .sidebar-menu-item-button-wrapper.sidebar-menu-item-button-wrapper-locked .sidebar-menu-item-icon {
    background-color: hsl(var(--gkb-weiss)) !important;
    color: hsl(var(--gkb-schwarz-50)) !important;
}

.admin-sidebar .sidebar-menu-item {
    background-color: hsl(var(--gkb-weiss)) !important;
}
.admin-sidebar .sidebar-menu-item[data-active="true"] {
    background-color: hsl(var(--gkb-blau-100)) !important;
}

.sidebar-menu {
    gap: 8px !important;
}

.sidebar-menu-item:hover {
    background-color: hsl(var(--gkb-schwarz-10)) !important;
}

.sidebar-menu-item:active .menu-item-arrow-right,
.sidebar-menu-item:active .sidebar-menu-item-icon {
    color: hsl(var(--gkb-blau-hover)) !important;
}

.sidebar-menu-item[data-active="true"] .sidebar-menu-item-icon {
    color: hsl(var(--gkb-weiss)) !important;
}

.admin-sidebar-back-to-chat {
    background: transparent !important;
}

.entity-highlight,
.data-entity-highlight {
    background-color: hsl(var(--gkb-blau-10)) !important;
    color: hsl(var(--gkb-blau-100)) !important;
}

.anonymize-notice-box {
    background-color: #003769 !important;
}

.effort-toggle-button {
    font-size: 12px !important;
    opacity: 1 !important;
}

.gkb-chat-notice {
    background-color: hsl(var(--gkb-schwarz-5)) !important;
    border-color: hsl(var(--gkb-schwarz-10)) !important;
    color: hsl(var(--gkb-schwarz-80)) !important;
}

.gkb-chat-notice .gkb-chat-notice-icon {
    color: hsl(var(--gkb-schwarz-80)) !important;
}


#answer h1,
#answer h2,
#answer h3,
#answer h4,
#answer h5,
#answer h6 {
    color: hsl(var(--gkb-schwarz-100)) !important;
}


.prose code {
    background-color: hsl(var(--gkb-schwarz-5)) !important;
    border-radius: 4px !important;
}

.conversation-list-edit-mode {
    background-color:  hsl(var(--gkb-schwarz-5)) !important;
}

/* ============================================================================
   Font Size Normalization (16px → 14px)
   GKB Feedback: Reduce general font sizes and improve ratio between labels.
   Overrides Tailwind's --text-base (1rem/16px) to 0.875rem (14px) in scoped
   contexts so all text-base elements inherit the reduced size.
   ============================================================================ */

/* --- Sidebar (scoped via data-slot) --- */

/* Override --text-base inside sidebar so all text-base elements become 14px.
   This covers: menu items, history session titles, "Neuer Chat" button text. */
[data-slot="sidebar-inner"] {
    --text-base: 0.875rem;
    --text-base--line-height: 1.25rem;
}

/* Search input needs explicit font-size (inputs don't inherit from CSS vars) */
.search-input-input {
    font-size: 14px !important;
}

/* --- Chat Area --- */

/* Chat suggestion buttons */
[data-testid="suggestion-item"] {
    font-size: 14px !important;
}

/* Chat input textarea */
.question-input-field {
    font-size: 14px !important;
}

/* Conversation edit mode textarea */
.conversation-list-edit-mode {
    font-size: 14px !important;
}

/* ============================================================================
   Instruction Library: Replace orange-pink gradient with primary color
   GKB branding uses solid primary color instead of decorative gradients.
   ============================================================================ */

/* Gradient text (hero heading + library button title) → solid primary */
.instruction-library-gradient-text {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    color: hsl(var(--primary)) !important;
}

/* Library button background → primary tint instead of orange-pink gradient */
.instruction-library-gradient-bg {
    background: hsl(var(--primary) / 0.05) !important;
    border-color: hsl(var(--primary) / 0.2) !important;
}
.instruction-library-gradient-bg:hover {
    background: hsl(var(--primary) / 0.1) !important;
}

/* Library icon → primary color instead of orange */
.instruction-library-icon {
    color: hsl(var(--primary)) !important;
}

.chat-sidebar .chat-history-list {
    border-top: 1px solid hsl(var(--sidebar-border));
}