/* ============================================================================
   Dialog "File Overview" (Admin.view.main.FileOverview).

   The dialog shown before the ObjectExplorer (XOE) is started. Window chrome,
   header, footer and grid rows already come from the product theme
   ("body.xadmintool" rules of admin-all_1.css) - this file only adds what is
   specific to this dialog: the intro text, the status icons (incl. the new
   "stale" marker for files whose .xtableconfig / .xattributeconfig is younger
   than the .xtable / .xattribute built from it) and the two notices below the
   grid.
   ============================================================================ */

body.xadmintool {
    /* ---- design tokens ---- */
    --fo-text-1: #171a26;
    --fo-text-2: #5b6172;
    --fo-surface: #ffffff;
    --fo-border: #e7e9f2;

    --fo-ok: #34c98e;
    --fo-stale: #b98900;

    /* the list of outdated files scrolls once it would grow past this, so it
       never squeezes the grid above it, see Admin.view.main.FileOverview */
    --fo-stale-max: 132px;
    --fo-stale-bg: #fdf5e3;
    --fo-stale-border: #f0dfb4;

    --fo-blocked: #e0355e;
    --fo-blocked-bg: #fde8ee;
    --fo-blocked-border: #f7c8d5;

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

/* ----------------------------------------------------------------------------
   Description above the grid
   ---------------------------------------------------------------------------- */
body.xadmintool .fo-window .foIntro {
    font-family: var(--fo-font);
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--fo-text-2);
}

/* ----------------------------------------------------------------------------
   Status column: the "age" dot and, next to it, the marker of a file that is
   older than its import configuration
   ---------------------------------------------------------------------------- */
body.xadmintool .fo-window .fileStatus + .fileStatus {
    margin-left: 5px;
}
/* the theme carries the same three colours (see xplain-new/sass/etc/Main.scss),
   but only with the specificity of a single class - repeat them here so they
   survive whatever is loaded after the theme */
body.xadmintool .fo-window .fileStatus.fileStatusOk {
    color: var(--fo-ok);
}
body.xadmintool .fo-window .fileStatus.fileStatusWarn {
    color: var(--fo-stale);
}
body.xadmintool .fo-window .fileStatus.fileStatusMissing {
    color: var(--fo-blocked);
}
body.xadmintool .fo-window .fileStatus.fileStatusStale {
    color: var(--fo-stale);
}

/* ----------------------------------------------------------------------------
   The two notices below the grid
   ---------------------------------------------------------------------------- */
body.xadmintool .fo-window .foNotice {
    font-family: var(--fo-font);
    font-size: 12.5px;
    line-height: 1.6;
    border: 1px solid var(--fo-border);
    border-radius: 10px;
    padding: 11px 14px;
}
body.xadmintool .fo-window .foNotice strong {
    color: var(--fo-text-1);
    font-weight: 600;
}
body.xadmintool .fo-window .foNotice b {
    font-weight: 600;
}

body.xadmintool .fo-window .foNoticeStale {
    /* one line per outdated file - keep the dialog usable if there are many */
    max-height: var(--fo-stale-max);
    overflow-y: auto;
    background: var(--fo-stale-bg);
    border-color: var(--fo-stale-border);
    color: var(--fo-text-2);
}
body.xadmintool .fo-window .foNoticeStale strong {
    color: var(--fo-stale);
}

body.xadmintool .fo-window .foNoticeBlocked {
    background: var(--fo-blocked-bg);
    border-color: var(--fo-blocked-border);
    color: var(--fo-blocked);
    font-weight: 600;
}

/* ----------------------------------------------------------------------------
   Dark theme (body.oe-theme-dark, see resources/dark-theme.css)
   ---------------------------------------------------------------------------- */
body.oe-theme-dark.xadmintool,
body.oe-theme-dark {
    --fo-text-1: #f2f3f5;
    --fo-text-2: #d7dae0;
    --fo-surface: #15181e;
    --fo-border: #262a33;

    --fo-ok: #4fd6a0;
    --fo-stale: #e3b341;
    --fo-stale-bg: #2b2415;
    --fo-stale-border: #453a23;

    --fo-blocked: #ff7a9c;
    --fo-blocked-bg: #3a1b25;
    --fo-blocked-border: #4d2431;
}