/* ═══════════════════════════════════════════════════════════════
   KIS forms — restyle Telerik form components to the redesign look.
   Loaded globally (App.razor). Grids/pagers are excluded so their
   existing site.css styling is preserved.
   Field style: soft grey fill, transparent border, orange focus.
   Dropdown/combobox popups: styled like the header nav dropdown.
   ═══════════════════════════════════════════════════════════════ */
:root {
    --kf-or: #FF6200;
    --kf-or-d: #D95400;
    --kf-field-bg: #F4F5F9;
    --kf-t1: #0F0F12;
    --kf-t3: #B4B9C6;
    --kf-radius: 11px;
}

/* ── Fields: text, textarea, dropdown, combobox, pickers ──
   Scoped away from grids, pagers and toolbars to avoid collateral. */
:is(.k-textbox, .k-textarea, .k-dropdownlist, .k-combobox, .k-multicolumncombobox, .k-multiselect,
   .k-datepicker, .k-datetimepicker, .k-timepicker, .k-numerictextbox, .k-maskedtextbox):not(.k-grid *):not(.k-pager *):not(.k-toolbar *) {
    background: var(--kf-field-bg) !important;
    border: 1.5px solid transparent !important;
    border-radius: var(--kf-radius) !important;
    box-shadow: none !important;
    transition: border-color .15s, background .15s;
}

/* Focus: white fill + orange border */
:is(.k-textbox, .k-textarea, .k-dropdownlist, .k-combobox, .k-multicolumncombobox, .k-multiselect,
   .k-datepicker, .k-datetimepicker, .k-timepicker, .k-numerictextbox, .k-maskedtextbox).k-focus:not(.k-grid *):not(.k-pager *):not(.k-toolbar *) {
    background: #fff !important;
    border-color: var(--kf-or) !important;
}

/* Inner input element: transparent so the wrapper fill shows through */
:is(.k-textbox, .k-textarea, .k-dropdownlist, .k-combobox, .k-multicolumncombobox, .k-multiselect,
   .k-datepicker, .k-numerictextbox, .k-maskedtextbox):not(.k-grid *):not(.k-pager *) .k-input-inner {
    background: transparent !important;
    color: var(--kf-t1);
    padding-block: 8px;
}

.k-input-inner::placeholder {
    color: var(--kf-t3);
    opacity: 1;
}

/* MultiSelect selected items → soft orange pills */
.k-multiselect:not(.k-grid *) .k-chip {
    border: none !important;
    border-radius: 8px !important;
    background: rgba(255,98,0,0.10) !important;
    color: #D95400 !important;
}

    .k-multiselect:not(.k-grid *) .k-chip .k-icon,
    .k-multiselect:not(.k-grid *) .k-chip-action-remove {
        color: #D95400 !important;
    }

/* DropDownList & other "picker" fields: the theme paints the old bordered box
   through .k-picker-solid, so override that hook directly to guarantee the
   redesign field look (this is what the afdeling dropdown was still using). */
.k-picker-solid:not(.k-grid *):not(.k-pager *):not(.k-toolbar *) {
    background-color: var(--kf-field-bg) !important;
    border: 1.5px solid transparent !important;
    border-radius: var(--kf-radius) !important;
    box-shadow: none !important;
}

    .k-picker-solid.k-focus:not(.k-grid *):not(.k-pager *):not(.k-toolbar *) {
        background-color: #fff !important;
        border-color: var(--kf-or) !important;
    }

/* The trailing button (dropdown arrow, clear, spinners): transparent, no divider */
:is(.k-dropdownlist, .k-combobox, .k-datepicker, .k-numerictextbox):not(.k-grid *):not(.k-pager *) .k-input-button,
:is(.k-dropdownlist, .k-combobox):not(.k-grid *) .k-select {
    background: transparent !important;
    border: none !important;
    color: var(--kf-t3) !important;
}

/* ── Dropdown / combobox / list popups — styled like the header nav dropdown ── */
.k-animation-container .k-popup,
.k-animation-container .k-list-container,
.k-popup.k-list-container {
    border-radius: 12px !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 12px 44px rgba(0,0,0,0.18) !important;
    background: rgba(255,255,255,0.98) !important;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    padding: 6px !important;
    overflow: hidden;
}

.k-list .k-list-item,
.k-list .k-list-optionlabel,
.k-popup .k-list-item,
.k-popup .k-list-optionlabel {
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-size: 13px;
    color: #4A4F5C;
}

    /* hover / keyboard-focus (the highlight shown when the dropdown opens) */
    .k-list .k-list-item:hover,
    .k-list .k-list-item.k-hover,
    .k-list .k-list-item.k-focus,
    .k-list .k-list-optionlabel:hover,
    .k-list .k-list-optionlabel.k-hover,
    .k-list .k-list-optionlabel.k-focus {
        background: rgba(0,0,0,0.055) !important;
        color: var(--kf-t1) !important;
        box-shadow: none !important;
    }

    .k-list .k-list-item.k-selected,
    .k-list .k-list-optionlabel.k-selected {
        background: rgba(255,98,0,0.10) !important;
        color: var(--kf-or) !important;
    }

/* ── Buttons ── */
.k-button-solid-primary:not(.k-grid *):not(.k-pager *) {
    background: linear-gradient(145deg, var(--kf-or-d), var(--kf-or)) !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 14px rgba(217,84,0,0.26) !important;
    transition: opacity .15s, transform .15s;
}

    .k-button-solid-primary:not(.k-grid *):not(.k-pager *):hover {
        opacity: .92;
    }

    .k-button-solid-primary:not(.k-grid *):not(.k-pager *):active {
        transform: scale(.97);
    }

.k-button-solid-base:not(.k-grid *):not(.k-pager *):not(.k-input-button) {
    border-radius: 12px !important;
}

/* ── Switch → prototype pill toggle (grey off, orange on, clean, no labels) ── */
.k-switch {
    width: 44px !important;
    height: 24px !important;
}

.k-switch .k-switch-track {
    border-radius: 99px !important;
    border-color: transparent !important;
    width: 44px !important;
    height: 24px !important;
}

.k-switch-off .k-switch-track {
    background: #E2E4EC !important;
}

.k-switch-on .k-switch-track {
    background: var(--kf-or) !important;
}

/* Hide the on/off text — the field label already describes the toggle */
.k-switch .k-switch-label-on,
.k-switch .k-switch-label-off {
    display: none !important;
}

.k-switch .k-switch-thumb,
.k-switch .k-switch-thumb-wrap {
    border-radius: 50% !important;
}

.k-switch .k-switch-thumb {
    background: #fff !important;
    width: 18px !important;
    height: 18px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15) !important;
}

/* ── Upload → prototype dashed drop zone ── */
.k-upload {
    border: 2px dashed #E2E4EC !important;
    border-radius: 13px !important;
    background: #FAFAFA !important;
    overflow: hidden;
    transition: border-color .15s, background .15s;
}

    .k-upload:hover {
        border-color: var(--kf-or) !important;
        background: rgba(255,98,0,0.03) !important;
    }

.k-upload .k-dropzone,
.k-upload .k-upload-dropzone {
    background: transparent !important;
    border: none !important;
    padding: 22px 18px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.k-upload .k-dropzone-hint,
.k-upload .k-upload-status {
    color: #70747F !important;
    font-size: 12.5px !important;
}

.k-upload .k-upload-button {
    background: linear-gradient(145deg, var(--kf-or-d), var(--kf-or)) !important;
    border: none !important;
    border-radius: 12px !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(217,84,0,0.26) !important;
}

.k-upload .k-upload-files {
    border-top: 1px solid #F0F1F6 !important;
    background: #fff !important;
}

/* ═══ Windows, dialogs & notifications → redesign card look ═══ */
.k-window,
.k-dialog {
    border-radius: 18px !important;
    border: none !important;
    box-shadow: 0 24px 80px rgba(0,0,0,0.20), 0 0 0 0.5px rgba(0,0,0,0.06) !important;
    overflow: hidden !important;
}

/* Clean white titlebar with a bold dark title */
.k-window-titlebar,
.k-dialog-titlebar {
    background: #fff !important;
    color: var(--kf-t1) !important;
    border-bottom: 1px solid #F0F1F6 !important;
    padding: 15px 20px !important;
}

.k-window-title,
.k-dialog-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: -0.2px !important;
    color: var(--kf-t1) !important;
}

/* Close (X) button in the titlebar */
.k-window-titlebar .k-button,
.k-dialog-titlebar .k-button {
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    color: var(--kf-t3) !important;
    box-shadow: none !important;
}

    .k-window-titlebar .k-button:hover,
    .k-dialog-titlebar .k-button:hover {
        background: rgba(0,0,0,0.06) !important;
        color: var(--kf-t1) !important;
    }

/* Dialog body + footer (simple message dialogs) */
.k-dialog-content {
    padding: 20px !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: var(--kf-t1) !important;
}

.k-dialog-actions,
.k-window .k-actions,
.k-dialog .k-actions {
    padding: 14px 20px !important;
    border-top: 1px solid #F0F1F6 !important;
    gap: 8px !important;
}

/* Notifications */
.k-notification {
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.16) !important;
}