/* ============================================================================
   "Session Messages" (Admin.view.main.MessageLogWindow).

   Every message the tool showed since the tab was opened, see
   Admin.util.MessageLog. The dialog is rendered as one block of HTML by
   Admin.view.main.MessageLogWindowController - this file styles it completely,
   the Ext window underneath only contributes its positioning and its modal mask.

   One flex column: header and filters keep their height, the list takes the rest
   and is the only thing that scrolls.

   Design tokens identical to neworload-redesign.css / aiimportwizard-redesign.css.
   ============================================================================ */

body.xadmintool .x-window.mlg-window {
    --mlg-white: #FFFFFF;
    --mlg-slate-50: #F8F9FA;
    --mlg-slate-100: #F2F4F6;
    --mlg-slate-200: #E7EAED;
    --mlg-slate-300: #D2D7DC;
    --mlg-slate-400: #B4BCC4;
    --mlg-slate-500: #97A2AD;
    --mlg-slate-600: #7E8B99;
    --mlg-slate-700: #55606C;
    --mlg-slate-800: #3C454F;
    --mlg-slate-900: #2A3138;

    --mlg-teal-50: #F1FBFA;
    --mlg-teal-100: #E4F6F5;
    --mlg-teal-200: #C0EAE7;
    --mlg-teal-600: #4A8686;
    --mlg-teal-700: #3F7373;

    /* the three kinds, in the colours the toasts themselves use */
    --mlg-error: #C0392B;
    --mlg-error-bg: #FDF2F0;
    --mlg-error-border: #E9BDB7;

    --mlg-hint: #3F7373;
    --mlg-hint-bg: #F1FBFA;
    --mlg-hint-border: #C0EAE7;

    --mlg-info: #8A6410;
    --mlg-info-bg: #FFF6E5;
    --mlg-info-border: #F0C98A;

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

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

body.xadmintool .x-window.mlg-window > .x-window-body,
body.xadmintool .x-window.mlg-window .x-autocontainer-outerCt,
body.xadmintool .x-window.mlg-window .x-autocontainer-innerCt {
    background: transparent;
    border: none;
    height: 100%;
}

body.xadmintool .mlg-window .mlgRootEl {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

body.xadmintool .mlg-window .mlgIcon {
    width: 16px;
    height: 16px;
    flex: none;
}

body.xadmintool .mlg-window .mlgSpacer {
    flex: 1;
}

/* --- header --------------------------------------------------------------- */
body.xadmintool .mlg-window .mlgHeader {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--mlg-slate-200);
    background: linear-gradient(180deg, var(--mlg-teal-50), var(--mlg-white));
}

body.xadmintool .mlg-window .mlgMark {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--mlg-teal-600);
    color: var(--mlg-white);
}
body.xadmintool .mlg-window .mlgMark .mlgIcon {
    width: 19px;
    height: 19px;
}

body.xadmintool .mlg-window .mlgHeadText {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

body.xadmintool .mlg-window .mlgTitle {
    font-family: var(--mlg-font-head);
    font-size: 17px;
    font-weight: 600;
    color: var(--mlg-slate-900);
}

body.xadmintool .mlg-window .mlgSub {
    font-size: 12px;
    color: var(--mlg-slate-600);
}

body.xadmintool .mlg-window .mlgClose {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    font-size: 21px;
    line-height: 1;
    color: var(--mlg-slate-500);
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease;
}
body.xadmintool .mlg-window .mlgClose:hover {
    background: var(--mlg-slate-100);
    color: var(--mlg-slate-800);
}

/* --- the three filters ---------------------------------------------------- */
body.xadmintool .mlg-window .mlgFilters {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-bottom: 1px solid var(--mlg-slate-200);
    background: var(--mlg-slate-50);
}

body.xadmintool .mlg-window .mlgFilter {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    box-sizing: border-box;
    padding: 0 12px;
    border: 1px solid var(--mlg-slate-200);
    border-radius: 15px;
    background: var(--mlg-white);
    font-size: 12.5px;
    font-weight: 700;
    /* switched off: the kind is not listed, so the pill is quiet */
    color: var(--mlg-slate-500);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
body.xadmintool .mlg-window .mlgFilter:hover {
    background: var(--mlg-slate-100);
}

body.xadmintool .mlg-window .mlgFilterIcon {
    width: 14px;
    height: 14px;
    opacity: .45;
}

body.xadmintool .mlg-window .mlgFilterCount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: 9px;
    background: var(--mlg-slate-100);
    font-size: 11px;
    font-weight: 700;
    color: var(--mlg-slate-600);
}

/* switched on: the pill takes the colour of its kind */
body.xadmintool .mlg-window .mlgFilterOn .mlgFilterIcon {
    opacity: 1;
}

body.xadmintool .mlg-window .mlgFilterOn.mlgFilter-error {
    border-color: var(--mlg-error-border);
    background: var(--mlg-error-bg);
    color: var(--mlg-error);
}
body.xadmintool .mlg-window .mlgFilterOn.mlgFilter-error .mlgFilterCount {
    background: var(--mlg-error);
    color: #FFFFFF;
}

body.xadmintool .mlg-window .mlgFilterOn.mlgFilter-hint {
    border-color: var(--mlg-hint-border);
    background: var(--mlg-hint-bg);
    color: var(--mlg-hint);
}
body.xadmintool .mlg-window .mlgFilterOn.mlgFilter-hint .mlgFilterCount {
    background: var(--mlg-hint);
    color: #FFFFFF;
}

body.xadmintool .mlg-window .mlgFilterOn.mlgFilter-info {
    border-color: var(--mlg-info-border);
    background: var(--mlg-info-bg);
    color: var(--mlg-info);
}
body.xadmintool .mlg-window .mlgFilterOn.mlgFilter-info .mlgFilterCount {
    background: var(--mlg-info);
    color: #FFFFFF;
}

body.xadmintool .mlg-window .mlgTool {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    box-sizing: border-box;
    padding: 0 12px;
    border: 1px solid var(--mlg-slate-200);
    border-radius: 9px;
    background: var(--mlg-white);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--mlg-slate-700);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 140ms ease;
}
body.xadmintool .mlg-window .mlgTool:hover {
    background: var(--mlg-slate-100);
}
body.xadmintool .mlg-window .mlgToolIcon {
    width: 14px;
    height: 14px;
}

/* --- the list ------------------------------------------------------------- */
body.xadmintool .mlg-window .mlgList {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 14px 14px;
}

body.xadmintool .mlg-window .mlgList::-webkit-scrollbar {
    width: 8px;
}
body.xadmintool .mlg-window .mlgList::-webkit-scrollbar-thumb {
    background: var(--mlg-slate-300);
    border-radius: 4px;
}
body.xadmintool .mlg-window .mlgList::-webkit-scrollbar-track {
    background: transparent;
}

body.xadmintool .mlg-window .mlgRow {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 12px 9px 10px;
    margin-top: 6px;
    border: 1px solid var(--mlg-slate-200);
    border-radius: 10px;
    background: var(--mlg-white);
}

/* the colour of the kind sits on a bar at the left edge, so a long list stays
   readable instead of turning into three blocks of background colour */
body.xadmintool .mlg-window .mlgRowMark {
    flex: none;
    width: 3px;
    align-self: stretch;
    border-radius: 2px;
    background: var(--mlg-slate-300);
}

body.xadmintool .mlg-window .mlgRowTime {
    flex: none;
    padding-top: 1px;
    font-family: var(--mlg-font-mono);
    font-size: 11.5px;
    color: var(--mlg-slate-500);
}

body.xadmintool .mlg-window .mlgRowBody {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

body.xadmintool .mlg-window .mlgRowSource {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--mlg-slate-500);
}

body.xadmintool .mlg-window .mlgRowText {
    font-size: 13px;
    line-height: 1.5;
    color: var(--mlg-slate-800);
    /* a stack trace arrives as one long line and has to wrap somewhere */
    overflow-wrap: anywhere;
}

body.xadmintool .mlg-window .mlgRow-error {
    border-color: var(--mlg-error-border);
    background: var(--mlg-error-bg);
}
body.xadmintool .mlg-window .mlgRow-error .mlgRowMark {
    background: var(--mlg-error);
}

body.xadmintool .mlg-window .mlgRow-hint {
    border-color: var(--mlg-hint-border);
    background: var(--mlg-hint-bg);
}
body.xadmintool .mlg-window .mlgRow-hint .mlgRowMark {
    background: var(--mlg-hint);
}

body.xadmintool .mlg-window .mlgRow-info {
    border-color: var(--mlg-info-border);
    background: var(--mlg-info-bg);
}
body.xadmintool .mlg-window .mlgRow-info .mlgRowMark {
    background: var(--mlg-info);
}

/* --- nothing to list ------------------------------------------------------ */
body.xadmintool .mlg-window .mlgEmpty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 60px 30px;
    text-align: center;
}

body.xadmintool .mlg-window .mlgEmptyIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 4px;
    border-radius: 14px;
    background: var(--mlg-slate-100);
    color: var(--mlg-slate-500);
}
body.xadmintool .mlg-window .mlgEmptyIcon .mlgIcon {
    width: 21px;
    height: 21px;
}

body.xadmintool .mlg-window .mlgEmptyTitle {
    font-family: var(--mlg-font-head);
    font-size: 14px;
    font-weight: 600;
    color: var(--mlg-slate-800);
}

body.xadmintool .mlg-window .mlgEmptyBody {
    max-width: 420px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--mlg-slate-600);
}

/* ----------------------------------------------------------------------------
   The three counters in the header of the tool, left of the "home" icon
   (Admin.view.main.MainController#updateMessageCounters).

   They sit in the toolbar and not in the dialog, so they carry their colours
   themselves instead of reading the tokens above.
   ---------------------------------------------------------------------------- */
body.xadmintool .xatMsgCounters {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: 10px;
}

body.xadmintool .xatMsgCounters .xatMsgCount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: 11px;
    font-family: 'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    color: #FFFFFF;
    cursor: pointer;
    transition: transform 120ms ease, opacity 120ms ease;
}
body.xadmintool .xatMsgCounters .xatMsgCount:hover {
    transform: scale(1.12);
}

body.xadmintool .xatMsgCounters .xatMsgCount-error { background: #C0392B; }
body.xadmintool .xatMsgCounters .xatMsgCount-hint  { background: #3F7373; }
body.xadmintool .xatMsgCounters .xatMsgCount-info  { background: #8A6410; }

/* nothing of that kind yet - the badge keeps its place so the icons next to it
   do not move around, but it stays quiet until there is something to report */
body.xadmintool .xatMsgCounters .xatMsgCountEmpty {
    opacity: .32;
}
body.xadmintool .xatMsgCounters .xatMsgCountEmpty:hover {
    opacity: .6;
}

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

    --mlg-teal-50: #22322F;
    --mlg-teal-100: #2A403C;
    --mlg-teal-200: #37544F;

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

    --mlg-hint: #7FD6CC;
    --mlg-hint-bg: #14302D;
    --mlg-hint-border: #265C55;

    --mlg-info: #F0C97A;
    --mlg-info-bg: #332A14;
    --mlg-info-border: #5C4D26;

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

body.oe-theme-dark .mlg-window .mlgHeader {
    background: linear-gradient(180deg, #273230, #22282E);
}

/* the counters keep dark text on the light badge of their kind */
body.oe-theme-dark .mlg-window .mlgFilterOn .mlgFilterCount {
    color: #1B2126 !important;
}

/* the badges in the header: the same three colours, lightened so they carry dark
   text against the dark toolbar */
body.oe-theme-dark.xadmintool .xatMsgCounters .xatMsgCount,
body.oe-theme-dark .xatMsgCounters .xatMsgCount {
    color: #1B2126;
}
body.oe-theme-dark.xadmintool .xatMsgCounters .xatMsgCount-error,
body.oe-theme-dark .xatMsgCounters .xatMsgCount-error { background: #E0705F; }
body.oe-theme-dark.xadmintool .xatMsgCounters .xatMsgCount-hint,
body.oe-theme-dark .xatMsgCounters .xatMsgCount-hint  { background: #7FD6CC; }
body.oe-theme-dark.xadmintool .xatMsgCounters .xatMsgCount-info,
body.oe-theme-dark .xatMsgCounters .xatMsgCount-info  { background: #F0C97A; }