/* ============================================================================
   Error dialog (xplain.ux.widget.ErrorMessage, cls "xerrormessage xdDialog").

   The component lives in the shared xplain-ux package; the ObjectExplorer
   styles it in objectexplorer/resources/message-dialogs.css. The admin tool
   does not load that file, so this one gives the dialog the admin look
   (same design tokens as messagelog-redesign.css / neworload-redesign.css).

   Markup (see ErrorMessage.js / ErrorMessageController.js):
     .emMsgPanel   > .emIcon (round badge) + .emMessage (text)
                     + button.emToggle ("Show details", plain html button)
     .emDetails    > .emMeta (version + button.emCopy) and pre.emStack
     footer: Okay resp. Reload (xdBtnPrimary)
   ============================================================================ */

body.xadmintool .x-window.xerrormessage {
    --em-white: #FFFFFF;
    --em-slate-50: #F8F9FA;
    --em-slate-100: #F2F4F6;
    --em-slate-200: #E7EAED;
    --em-slate-500: #97A2AD;
    --em-slate-600: #7E8B99;
    --em-slate-700: #55606C;
    --em-slate-900: #2A3138;

    --em-teal-50: #F1FBFA;
    --em-teal-600: #4A8686;
    --em-teal-700: #3F7373;

    --em-error: #C0392B;
    --em-error-bg: #FDF2F0;
    --em-error-border: #E9BDB7;

    --em-font-head: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --em-font-body: 'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --em-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    background: var(--em-white) !important;
    border: none !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 60px rgba(42, 49, 56, .35) !important;
    overflow: hidden;
    padding: 0 !important;
    font-family: var(--em-font-body);
}

/* ---------------------------------------------------------------- header */
body.xadmintool .xerrormessage .x-window-header {
    background: var(--em-white) !important;
    border: 0 !important;
    padding: 18px 22px 6px 22px !important;
}

body.xadmintool .xerrormessage .x-window-header .x-title-text {
    font-family: var(--em-font-head) !important;
    font-size: 16px;
    font-weight: 600;
    color: var(--em-slate-900);
    padding: 0 !important;
}

body.xadmintool .xerrormessage .x-window-header .x-tool {
    border-radius: 8px;
    padding: 3px;
    transition: background-color 150ms ease;
}

body.xadmintool .xerrormessage .x-window-header .x-tool:hover {
    background: var(--em-slate-100) !important;
}

body.xadmintool .xerrormessage .x-window-header .x-tool .x-tool-tool-el,
body.xadmintool .xerrormessage .x-window-header .x-tool .x-tool-tool-el:before {
    color: var(--em-slate-500) !important;
}

body.xadmintool .xerrormessage .x-window-header .x-tool:hover .x-tool-tool-el,
body.xadmintool .xerrormessage .x-window-header .x-tool:hover .x-tool-tool-el:before {
    color: var(--em-slate-900) !important;
}

body.xadmintool .xerrormessage .x-window-body {
    background: var(--em-white) !important;
    border: 0 !important;
}

/* ------------------------------------------------- icon badge + message */
body.xadmintool .xerrormessage .emMsgPanel,
body.xadmintool .xerrormessage .emMsgPanel .x-panel-body,
body.xadmintool .xerrormessage .x-panel-body {
    background: transparent !important;
    border: 0 !important;
}

body.xadmintool .xerrormessage .emIcon {
    background: var(--em-error-bg);
    border: 1px solid var(--em-error-border);
    border-radius: 50%;
    box-sizing: border-box;
    text-align: center;
}

/* the icon package sets the colour on :before with !important */
body.xadmintool .xerrormessage .emIcon .emIconGlyph {
    display: block;
    font-size: 20px;
    line-height: 42px;
}

body.xadmintool .xerrormessage .emIcon .emIconGlyph:before {
    color: var(--em-error) !important;
}

body.xadmintool .xerrormessage .emIcon .emIconGlyph.fa-exclamation-circle:before {
    color: var(--em-teal-700) !important;
}

/* long attribute / file names have no spaces - hence "anywhere" */
body.xadmintool .xerrormessage .emMessage {
    padding-top: 2px;
    font-family: var(--em-font-body);
    font-size: 14px;
    line-height: 1.55;
    color: var(--em-slate-900);
    overflow-wrap: anywhere;
}

/* ------------------------------------- "Show details" toggle + Copy link */
/* plain html buttons (see ErrorMessageController) - without these rules
   the browser draws its default grey buttons */
body.xadmintool .xerrormessage button.emToggle,
body.xadmintool .xerrormessage button.emCopy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    border-radius: 6px;
    padding: 4px 6px;
    margin-left: -6px;
    font-family: var(--em-font-body);
    font-weight: 700;
    color: var(--em-teal-700);
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

body.xadmintool .xerrormessage button.emToggle { font-size: 13px; }
body.xadmintool .xerrormessage button.emCopy   { font-size: 12px; margin-left: 0; margin-right: -6px; }

body.xadmintool .xerrormessage button.emToggle:hover,
body.xadmintool .xerrormessage button.emCopy:hover {
    background: var(--em-teal-50);
}

body.xadmintool .xerrormessage button.emToggle:focus-visible,
body.xadmintool .xerrormessage button.emCopy:focus-visible {
    outline: 2px solid var(--em-teal-600);
    outline-offset: 1px;
}

body.xadmintool .xerrormessage .emToggleIcon:before,
body.xadmintool .xerrormessage .emCopyIcon:before {
    color: inherit !important;
}

body.xadmintool .xerrormessage .emToggleIcon {
    font-size: 10px;
    width: 12px;
    text-align: center;
    transition: transform 180ms ease;
}

body.xadmintool .xerrormessage .emCopyIcon {
    font-size: 12px;
}

body.xadmintool .xerrormessage button.emToggle[aria-expanded="true"] .emToggleIcon {
    transform: rotate(90deg);
}

/* ------------------------------------------------ version + stack trace */
/* "Version ..." on the left, "Copy" on the right */
body.xadmintool .xerrormessage .emMeta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--em-font-body);
    font-size: 12px;
    color: var(--em-slate-600);
}

body.xadmintool .xerrormessage .emMeta strong {
    font-weight: 700;
    color: var(--em-slate-700);
}

/* the stack trace: framed code block, no wrapping, scrolls on its own */
body.xadmintool .xerrormessage pre.emStack {
    margin: 0;
    background: var(--em-slate-50);
    border: 1px solid var(--em-slate-200);
    border-radius: 10px;
    padding: 10px 12px;
    /* the theme sets the font of every component with !important */
    font-family: var(--em-font-mono) !important;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--em-slate-700);
    white-space: pre;
    box-sizing: border-box;
}

/* ---------------------------------------------------------------- footer */
body.xadmintool .xerrormessage .x-toolbar-footer {
    background: var(--em-white) !important;
    border: 0 !important;
    border-top: 1px solid var(--em-slate-200) !important;
    padding: 14px 22px !important;
}

body.xadmintool .xerrormessage .x-toolbar-footer a.xdBtn {
    background-image: none !important;
    border-radius: 999px !important;
    padding: 8px 22px !important;
    margin-left: 10px;
    box-shadow: none !important;
    transition: background-color 150ms ease, border-color 150ms ease;
}

body.xadmintool .xerrormessage .x-toolbar-footer a.xdBtn .x-btn-inner {
    font-family: var(--em-font-body);
    font-size: 13px;
    font-weight: 700;
}

body.xadmintool .xerrormessage .x-toolbar-footer a.xdBtnPrimary {
    background: var(--em-teal-600) !important;
    border: 1px solid var(--em-teal-600) !important;
}

body.xadmintool .xerrormessage .x-toolbar-footer a.xdBtnPrimary.x-btn-over {
    background: var(--em-teal-700) !important;
    border-color: var(--em-teal-700) !important;
}

body.xadmintool .xerrormessage .x-toolbar-footer a.xdBtnPrimary .x-btn-inner,
body.xadmintool .xerrormessage .x-toolbar-footer a.xdBtnPrimary .x-btn-icon-el,
body.xadmintool .xerrormessage .x-toolbar-footer a.xdBtnPrimary .x-btn-icon-el:before {
    color: #FFFFFF !important;
}

body.xadmintool .xerrormessage .x-toolbar-footer a.xdBtnGhost {
    background: var(--em-white) !important;
    border: 1px solid var(--em-slate-200) !important;
}

body.xadmintool .xerrormessage .x-toolbar-footer a.xdBtnGhost.x-btn-over {
    background: var(--em-teal-50) !important;
    border-color: var(--em-teal-600) !important;
}

body.xadmintool .xerrormessage .x-toolbar-footer a.xdBtnGhost .x-btn-inner,
body.xadmintool .xerrormessage .x-toolbar-footer a.xdBtnGhost .x-btn-icon-el,
body.xadmintool .xerrormessage .x-toolbar-footer a.xdBtnGhost .x-btn-icon-el:before {
    color: var(--em-teal-700) !important;
}

/* ============================================================================
   Dark theme (body.oe-theme-dark, see resources/dark-theme.css)
   ============================================================================ */
body.oe-theme-dark.xadmintool .x-window.xerrormessage {
    --em-white: #22282E;
    --em-slate-50: #262D34;
    --em-slate-100: #2E353C;
    --em-slate-200: #39424A;
    --em-slate-500: #8593A0;
    --em-slate-600: #9AA7B3;
    --em-slate-700: #BAC4CD;
    --em-slate-900: #EDF1F4;

    --em-teal-50: #22322F;
    --em-teal-600: #4A8686;
    --em-teal-700: #7FD6CC;

    --em-error: #E0705F;
    --em-error-bg: #3A2624;
    --em-error-border: #5C3733;

    box-shadow: 0 24px 60px rgba(0, 0, 0, .55) !important;
}

/* dark-theme.css paints every window header in its own, darker tone */
body.oe-theme-dark.xadmintool .x-window.xerrormessage .x-window-header,
body.oe-theme-dark.xadmintool .x-window.xerrormessage .x-window-body,
body.oe-theme-dark.xadmintool .x-window.xerrormessage .x-toolbar-footer {
    background: var(--em-white) !important;
}

/* white text on the teal button, also where the light teal-700 is the hover */
body.oe-theme-dark.xadmintool .xerrormessage .x-toolbar-footer a.xdBtnPrimary.x-btn-over {
    background: #3F7373 !important;
    border-color: #3F7373 !important;
}