/* ============================================================================
   Dialog "Define Key-Value Pairs" (Admin.view.main.keyValuePairs).

   Implements the design handoff "Key-Value-Paare definieren" (the handoff is
   German, the dialog itself is English like the rest of the tool). Most of the
   chrome (window radius + shadow, header, footer, dialog buttons, grid row
   colours) already comes from the current product theme, i.e. the
   "body.xadmintool" rules of admin-all_1.css - this file only adds what is
   specific to this dialog: the intro text, the form card, the name field, the
   checkbox, the two combo boxes incl. their grouped popup and the list of
   pairs.
   ============================================================================ */

body.xadmintool {
    /* ---- design tokens of the handoff ---- */
    --kvp-text-1: #171a26;
    --kvp-text-2: #5b6172;
    --kvp-text-3: #9298ab;
    --kvp-surface: #ffffff;
    --kvp-soft: #f8f9fc;
    --kvp-select: #eef0fe;
    --kvp-border: #e7e9f2;
    --kvp-border-strong: #d8dbe8;
    --kvp-primary: #417dbf;
    --kvp-primary-hover: #396ea9;
    --kvp-danger-bg: #fde8ee;
    --kvp-danger: #e0355e;

    --kvp-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ----------------------------------------------------------------------------
   Description
   ---------------------------------------------------------------------------- */
body.xadmintool .kvp-window .kvpIntro {
    font-family: var(--kvp-font);
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--kvp-text-2);
}
body.xadmintool .kvp-window .kvpIntro .kvpObject {
    font-weight: 600;
    color: var(--kvp-text-1);
}

/* ----------------------------------------------------------------------------
   Form card "New pair" / "Edit pair"
   ---------------------------------------------------------------------------- */
body.xadmintool .kvp-window .kvpCard {
    background: var(--kvp-surface);
    border: 1px solid var(--kvp-border);
    border-radius: 12px;
    transition: background-color 130ms ease, border-color 130ms ease;
}
body.xadmintool .kvp-window .kvpCard.kvpCardEditing {
    background: var(--kvp-soft);
    border-color: var(--kvp-border-strong);
}

body.xadmintool .kvp-window .kvpCardTitle {
    font-family: var(--kvp-font);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--kvp-text-1);
}
/* "Cancel editing" - a text button, not a real Ext button */
body.xadmintool .kvp-window .kvpLinkButton {
    font-family: var(--kvp-font);
    font-size: 12px;
    font-weight: 500;
    color: var(--kvp-primary);
    cursor: pointer;
}
body.xadmintool .kvp-window .kvpLinkButton:hover {
    color: var(--kvp-primary-hover);
    text-decoration: underline;
}

/* the arrow between the two fields sits on the height of the fields, i.e.
   below the labels - hence the alignment to the bottom of the row */
body.xadmintool .kvp-window .kvpArrow {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    color: var(--kvp-text-3);
    font-size: 15px;
}
body.xadmintool .kvp-window .kvpArrow .x-fa {
    line-height: 32px;
}

/* ----------------------------------------------------------------------------
   The two combo boxes
   ---------------------------------------------------------------------------- */
body.xadmintool .kvp-window .kvpCombo .x-form-item-label-inner {
    font-family: var(--kvp-font);
    font-size: 12.5px;
    font-weight: 400;
    color: var(--kvp-text-2);
    padding: 0 0 5px 0;
}
body.xadmintool .kvp-window .kvpCombo .x-form-trigger-wrap {
    height: 32px;
    background: var(--kvp-surface);
    border: 1px solid var(--kvp-border);
    border-radius: 8px;
    /* the theme clips the trigger wrap - that would cut off the focus ring */
    overflow: visible;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
body.xadmintool .kvp-window .kvpCombo .x-form-trigger-wrap:focus-within {
    border-color: var(--kvp-primary);
    box-shadow: 0 0 0 3px var(--kvp-select);
}
body.xadmintool .kvp-window .kvpCombo .x-form-text {
    height: 30px;
    padding: 0 0 0 10px;
    background: transparent;
    border: 0;
    font-family: var(--kvp-font);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--kvp-text-1);
    cursor: pointer;
}
body.xadmintool .kvp-window .kvpCombo .x-form-empty-field {
    font-weight: 400;
    color: var(--kvp-text-3);
}
/* chevron instead of the caret of the theme (lucide:chevron-down) */
body.xadmintool .kvp-window .kvpCombo .x-form-trigger-default {
    width: 26px;
    border: 0;
    background: transparent;
    color: var(--kvp-text-3);
    font: 13px/30px 'lucide';
}
body.xadmintool .kvp-window .kvpCombo .x-form-trigger-default:before {
    content: '\e06d';
}

/* the name field reuses the geometry of the combo boxes, only the cursor and
   the right padding differ - it has no trigger */
body.xadmintool .kvp-window .kvpTextField .x-form-text {
    padding: 0 10px;
    cursor: text;
}

/* ----------------------------------------------------------------------------
   Checkbox "includeUpperLevels" - it sits in a box of its own, of the same
   height as the field next to it
   ---------------------------------------------------------------------------- */
/* the box is drawn on the inner wrap, not on the item body: the body is the
   table cell of the field layout and has to stay one. The inner wrap is also
   the positioned parent of the (invisible) input, which covers it completely -
   so the whole box reacts to a click */
body.xadmintool .kvp-window .kvpCheck .x-form-cb-wrap-inner {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 32px;
    padding: 0 12px;
    background: var(--kvp-surface);
    border: 1px solid var(--kvp-border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
body.xadmintool .kvp-window .kvpCheck .x-form-cb-wrap-inner:focus-within {
    border-color: var(--kvp-primary);
    box-shadow: 0 0 0 3px var(--kvp-select);
}
/* the box itself: the theme draws it with a glyph of the "ExtJS" font, here it
   is a drawn box with the check of the lucide font, as in the other dialogs */
body.xadmintool .kvp-window .kvpCheck .x-form-checkbox {
    position: static;
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0;
    background: var(--kvp-surface);
    border: 1px solid var(--kvp-border-strong);
    border-radius: 5px;
    box-sizing: border-box;
    /* the theme draws the box with a glyph of the "ExtJS" font */
    font: 0/0 a;
}
body.xadmintool .kvp-window .kvpCheck .x-form-checkbox:before {
    content: '';
}
body.xadmintool .kvp-window .kvpCheck.x-form-cb-checked .x-form-checkbox {
    background: var(--kvp-primary);
    border-color: var(--kvp-primary);
}
body.xadmintool .kvp-window .kvpCheck.x-form-cb-checked .x-form-checkbox:before {
    content: '\e06c'; /* lucide:check */
    display: block;
    font: 11px/14px 'lucide';
    color: #fff;
    text-align: center;
}
body.xadmintool .kvp-window .kvpCheck .x-form-cb-label {
    flex: 1;
    margin: 0;
    padding: 0 0 0 9px;
    font-family: var(--kvp-font);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 16px;
    color: var(--kvp-text-1);
    cursor: pointer;
}

/* the popup is rendered outside of the window, so it cannot be addressed via
   .kvp-window - it carries its own class instead (see listConfig) */
body.xadmintool .x-boundlist.kvpBoundList {
    margin-top: 5px;
    padding: 5px;
    background: var(--kvp-surface);
    border: 1px solid var(--kvp-border) !important;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(23, 26, 38, .06), 0 14px 32px -8px rgba(23, 26, 38, .20);
}
body.xadmintool .x-boundlist.kvpBoundList .x-boundlist-item {
    position: relative;
    padding: 7px 26px 7px 9px;
    border: 0 !important;
    border-radius: 7px;
    font-family: var(--kvp-font);
    font-size: 12.5px;
    color: var(--kvp-text-1);
    transition: background-color 120ms ease;
}
body.xadmintool .x-boundlist.kvpBoundList .x-boundlist-item-over {
    background: var(--kvp-soft);
}
body.xadmintool .x-boundlist.kvpBoundList .x-boundlist-selected {
    background: var(--kvp-select);
    font-weight: 600;
}
body.xadmintool .x-boundlist.kvpBoundList .x-boundlist-selected:after {
    content: '\e06c'; /* lucide:check */
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    font: 13px/1 'lucide';
    color: var(--kvp-primary);
}
/* group header of the attribute popup: one group per dimension */
body.xadmintool .x-boundlist.kvpBoundList .kvpGroupHeader {
    padding: 7px 9px 3px;
    list-style: none;
    font-family: var(--kvp-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--kvp-text-3);
}

/* ----------------------------------------------------------------------------
   Status line + "Add" / "Save"
   ---------------------------------------------------------------------------- */
body.xadmintool .kvp-window .kvpNote {
    font-family: var(--kvp-font);
    font-size: 12px;
    line-height: 1.45;
    color: var(--kvp-text-3);
}
body.xadmintool .kvp-window .kvpNote.kvpNoteError {
    color: var(--kvp-danger);
}

/* the geometry comes from "defaultDialogBtn" of the theme, only the colours of
   the primary button are swapped here */
body.xadmintool a.x-btn.kvpBtnPrimary,
body.xadmintool .x-toolbar-footer a.x-btn.kvpBtnPrimary {
    background: var(--kvp-primary) !important;
    border-color: var(--kvp-primary) !important;
}
body.xadmintool a.x-btn.kvpBtnPrimary .x-btn-inner,
body.xadmintool a.x-btn.kvpBtnPrimary .x-btn-icon-el,
body.xadmintool a.x-btn.kvpBtnPrimary span.x-fa,
body.xadmintool .x-toolbar-footer a.x-btn.kvpBtnPrimary .x-btn-inner {
    color: #fff !important;
}
body.xadmintool a.x-btn.kvpBtnPrimary.x-btn-over,
body.xadmintool .x-toolbar-footer a.x-btn.kvpBtnPrimary.x-btn-over {
    background: var(--kvp-primary-hover) !important;
    border-color: var(--kvp-primary-hover) !important;
}
body.xadmintool a.x-btn.kvpBtnPrimary.x-item-disabled,
body.xadmintool .x-toolbar-footer a.x-btn.kvpBtnPrimary.x-item-disabled {
    opacity: .4;
}

/* ----------------------------------------------------------------------------
   List of the defined pairs
   ---------------------------------------------------------------------------- */
body.xadmintool .kvp-window .kvpGrid .x-grid-header-ct {
    border-bottom: 1px solid var(--kvp-border) !important;
}
body.xadmintool .kvp-window .kvpGrid .x-column-header {
    background: transparent;
    border: 0 !important;
    padding: 0 2px 7px;
}
body.xadmintool .kvp-window .kvpGrid .x-column-header-inner {
    padding: 0;
}
body.xadmintool .kvp-window .kvpGrid .x-column-header-text {
    font-family: var(--kvp-font);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--kvp-text-3);
}

/* "UPPER LEVELS" is the only header which needs two lines */
body.xadmintool .kvp-window .kvpGrid .kvpColHeadWrap .x-column-header-text {
    white-space: normal;
    line-height: 1.25;
}

body.xadmintool .kvp-window .kvpGrid .x-grid-cell-inner {
    padding: 9px 8px 9px 0;
    font-family: var(--kvp-font);
    font-size: 12.5px;
    text-overflow: ellipsis;
}
body.xadmintool .kvp-window .kvpGrid .kvpCellKey .x-grid-cell-inner {
    font-weight: 500;
    color: var(--kvp-text-1);
}
body.xadmintool .kvp-window .kvpGrid .kvpCellName .x-grid-cell-inner {
    font-weight: 600;
    color: var(--kvp-text-1);
}
body.xadmintool .kvp-window .kvpGrid .kvpCellValue .x-grid-cell-inner {
    color: var(--kvp-text-2);
}
body.xadmintool .kvp-window .kvpGrid .kvpCellUpper .x-grid-cell-inner {
    color: var(--kvp-text-3);
}
/* the row which is currently loaded into the form card */
body.xadmintool .kvp-window .kvpGrid .kvpRowEditing .x-grid-cell {
    background-color: var(--kvp-select) !important;
}

body.xadmintool .kvp-window .kvpGrid .kvpCellAction .x-grid-cell-inner {
    padding: 5px 0;
}
body.xadmintool .kvp-window .kvpGrid .x-action-col-icon {
    display: inline-block;
    width: 26px;
    height: 26px;
    margin: 0 0 0 4px;
    border-radius: 7px;
    background: transparent;
    color: var(--kvp-text-2);
    font-size: 13px;
    line-height: 26px;
    text-align: center;
    opacity: 1;
    transition: background-color 120ms ease, color 120ms ease;
}
body.xadmintool .kvp-window .kvpGrid .kvpActionEdit:hover {
    background: var(--kvp-select);
    color: var(--kvp-primary);
}
body.xadmintool .kvp-window .kvpGrid .kvpActionRemove:hover {
    background: var(--kvp-danger-bg);
    color: var(--kvp-danger);
}

body.xadmintool .kvp-window .kvpGrid .x-grid-empty {
    padding: 0;
    background: transparent;
}
body.xadmintool .kvp-window .kvpEmpty {
    padding: 22px 10px;
    text-align: center;
    font-family: var(--kvp-font);
    font-size: 12.5px;
    color: var(--kvp-text-3);
}

/* ----------------------------------------------------------------------------
   Footer - the counter on the left, the buttons come from the theme
   ---------------------------------------------------------------------------- */
body.xadmintool .kvp-window .kvpCount {
    font-family: var(--kvp-font);
    font-size: 12px;
    color: var(--kvp-text-3);
}

/* ----------------------------------------------------------------------------
   Dark theme (body.oe-theme-dark, see resources/dark-theme.css)
   ---------------------------------------------------------------------------- */
body.oe-theme-dark.xadmintool,
body.oe-theme-dark {
    --kvp-text-1: #f2f3f5;
    --kvp-text-2: #d7dae0;
    --kvp-text-3: #93a4bd;
    --kvp-surface: #15181e;
    --kvp-soft: #1c2029;
    --kvp-select: #1b2630;
    --kvp-border: #262a33;
    --kvp-border-strong: #2f3542;
    --kvp-primary: #5b8cff;
    --kvp-primary-hover: #7ba2ff;
    --kvp-danger-bg: #3a1b25;
    --kvp-danger: #ff7a9c;
}
body.oe-theme-dark .x-boundlist.kvpBoundList {
    box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
}