/* Eve WebTools — harmonisation layer for Fitlab (a copy of Atlas's, www/Atlas/harmonised.css).
   Load it LAST on every Fitlab page, after styles.css and the page stylesheet.
   It restyles the selectors Atlas already uses (see the brand book, "Harmonisation plan").
   When /lib/ewt-core.css exists, these rules move there and into the page stylesheets. */

:root {
    --textColor2: #6b6b6b;                 /* quiet text: was #474747 */
    --btnTextColourNormal: #6b6b6b;
    --btnTextColourHover: #9e9e9e;
    --btnTextColourSelected: #d2d2d2;
    --btnMark: inset 0 -2px 0 #d2d2d2;
    --ok: #48f0c0;  --warn: #ffb648;  --bad: #ff9a9a;  --badFrame: #ff5c5c;
}

/* ============================================================ 1. buttons */
/* -- menu buttons: change a setting, filter or overlay of the current view */
.barBtn, .tabRow[id$="Group"] .tab, #mapLegend .lgPeriod .lgP, #mapSide .fchip, .fbTab {
    background: none !important; border: 1px solid #313131 !important; color: var(--btnTextColourNormal);
    transition: color .15s linear;
}
.barBtn { padding-bottom: 7px; }
.tabRow[id$="Group"] .tab, .fbTab { padding: 6px 13px 8px; }
#mapLegend .lgPeriod .lgP { padding: 3px 9px 5px; }
#mapSide .fchip { padding: 3px 8px 5px; }
.barBtn:hover, .tabRow[id$="Group"] .tab:hover, #mapLegend .lgPeriod .lgP:hover, #mapSide .fchip:hover, .fbTab:hover { color: var(--btnTextColourHover); }
.barBtn-active, .tabRow[id$="Group"] .tab-active, #mapLegend .lgPeriod .lgP-active, #mapSide .fchip.on, .fbTab-active,
.barBtn-active:hover, .tabRow[id$="Group"] .tab-active:hover, #mapSide .fchip.on:hover, .fbTab-active:hover {
    background: none !important; color: var(--btnTextColourSelected); box-shadow: var(--btnMark);
}

/* -- tabs: swap what a panel shows. Frameless, on the panel hairline */
.tabRow[id$="Tabs"], #mapLegend .lgTabs { gap: 0; border-bottom: 1px solid #313131; }
.tabRow[id$="Tabs"] .tab, #mapLegend .lgTabs .lgP {
    background: none !important; border: 0 !important; margin-bottom: -1px; color: var(--btnTextColourNormal);
    padding: 7px 14px 9px; transition: color .15s linear;
}
#mapLegend .lgTabs .lgP { padding: 5px 6px 7px; }
#mapLegend .lgTabs { margin-bottom: 8px; }
.tabRow[id$="Tabs"] .tab:hover, #mapLegend .lgTabs .lgP:hover { color: var(--btnTextColourHover); }
.tabRow[id$="Tabs"] .tab-active, #mapLegend .lgTabs .lgP-active, .tabRow[id$="Tabs"] .tab-active:hover {
    color: var(--btnTextColourSelected); box-shadow: var(--btnMark);
}

/* -- action buttons: do something */
.barBtn:not(:has(svg)):not(#statPeriod .barBtn), .fbBtn, #fbTopBtn, #heroNext a.more, #sysSheet .soLink, #nf .links a {
    font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: 0.7143em; letter-spacing: 1px; text-transform: uppercase;
    padding: 0.55em 1.1em calc(0.55em + 2px); line-height: 1.2;
    background: none !important; border: 1px solid #313131 !important; color: var(--btnTextColourNormal) !important;
    box-shadow: none; transition: color .15s linear;
}
.fbBtn, #fbTopBtn { font-size: 0.8571em; padding: 0.6em 1.6em calc(0.6em + 2px); }
#fbTopBtn { padding: 0.6em 1.1em calc(0.6em + 2px); background-color: #0d0d0df2 !important; }
.barBtn:not(:has(svg)):not(#statPeriod .barBtn):hover, .fbBtn:hover, #fbTopBtn:hover, #heroNext a.more:hover, #sysSheet .soLink:hover, #nf .links a:hover {
    color: var(--btnTextColourHover) !important; box-shadow: none;
}
#fbTopBtn.on, .barBtn:not(:has(svg)):active, .fbBtn:active { color: var(--btnTextColourSelected) !important; box-shadow: var(--btnMark); }
/* primary: one per view, bright at rest */
.fbBtn-active, #fbSend { color: var(--btnTextColourSelected) !important; box-shadow: none !important; }
.fbBtn-active:hover, #fbSend:hover { color: #ffffff !important; }
.fbFoot { border-top: 1px solid #313131; padding-top: 12px; }
.fbFoot .fbNote { margin-right: auto; }
.fbFoot { justify-content: flex-end; gap: 6px; }

/* -- quiet text actions */
.swapBtn { color: var(--btnTextColourNormal); }
.swapBtn:hover { color: var(--btnTextColourHover); }

/* ============================================================ 2. icon buttons */
.menuIcon svg { stroke: var(--btnTextColourNormal); transition: stroke .15s linear; }
.menuIcon:hover svg { stroke: var(--btnTextColourHover); }
.menuIcon-active svg, .menuIcon-active:hover svg { stroke: var(--btnTextColourSelected); }
.menuIcon-active { box-shadow: var(--btnMark); }
.mapBtn, .mapBtn:hover { border-color: #313131; }
.mapBtn svg { stroke: var(--btnTextColourNormal); }
.mapBtn:hover svg { stroke: var(--btnTextColourHover); }
.fbX, #mapSide .sdClose, #sysSheet .soClose, .viaRows .rm, .chip .x { color: var(--btnTextColourNormal); transition: color .15s linear; }
.fbX:hover, #mapSide .sdClose:hover, #sysSheet .soClose:hover, .viaRows .rm:hover, .chip .x:hover { color: var(--btnTextColourHover); border-color: #313131; }

/* ============================================================ 3. rows */
a.row:hover, .trow.hop:hover, .trow.rng:hover, .trow.cnt:hover, .trow.kl:hover, .trow.row:hover, .selectable:hover { background-color: #d2d2d20a; }
.sr-item:hover, .sr-item.sel, .rp-item:hover, .rp-item.sel, .acItem:hover, .acItem.sel { background-color: #d2d2d214; }
.trow.hop.cur, .selectable.sel { background-color: #d2d2d20a; }
.inc.sel { background-color: #d2d2d20a; }
.rp-item.rp-current, #mapLegend .lgRow.on { background-color: #d2d2d214; }

/* ============================================================ 4. fields */
.sysInput input, #rangeLy, #uniFilter, #entFilter, #mapSide .sdTools input, .fbRow input, .fbRow textarea {
    background-color: #00000060; border: 1px solid #313131; color: #d2d2d2; min-height: 34px; padding-top: 0; padding-bottom: 0;
}
.fbRow textarea { padding-top: 7px; padding-bottom: 7px; }
.sysInput input::placeholder, #uniFilter::placeholder, #entFilter::placeholder, #mapSide .sdTools input::placeholder,
.fbRow input::placeholder, .fbRow textarea::placeholder, #topSearchInput::placeholder, #searchInput::placeholder, #regionFilter::placeholder { color: #6b6b6b; }
.sysInput input:focus, #rangeLy:focus, #uniFilter:focus, #entFilter:focus, #mapSide .sdTools input:focus, .fbRow input:focus, .fbRow textarea:focus { border-color: #d2d2d2; }
.sysInput input.bad { border-color: #ff5c5c; }
.fld .fl, .fbRow .fl { font-size: 0.7857em; letter-spacing: 1px; text-transform: uppercase; color: #6b6b6b; }
/* dark checkbox: no system blue */
.opt input[type="checkbox"] {
    appearance: none; -webkit-appearance: none; width: 14px; height: 14px; margin: 0; flex-shrink: 0;
    border: 1px solid #313131; background-color: #00000060; cursor: pointer;
}
.opt input[type="checkbox"]:checked { background-color: #d2d2d2; box-shadow: inset 0 0 0 3px #101010; }
.opt input[type="checkbox"]:focus-visible { outline: 1px solid #d2d2d2; outline-offset: 2px; }

/* ============================================================ 5. titles */
.iHead, #mapSide .sdHead .sdTitle, .fbTitle {
    font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: 0.8571em; letter-spacing: 2px; text-transform: uppercase; color: #d2d2d2;
}
.statL, .mvHead, .hub .hubL { font-size: 0.7857em; letter-spacing: 1.5px; text-transform: uppercase; color: #6b6b6b; }
#mapSide .thead { letter-spacing: 1.5px; }

/* ============================================================ 6. chips and tags */
#heroChips .chip { font-size: 0.8571em; padding: 4px 10px; }
.chips .chip { font-size: 0.8571em; padding: 3px 9px; }
.gate, .sysChip { border-color: transparent; background-color: #00000042; font-size: 0.8571em; padding: 4px 10px 4px 5px; }
.gate:hover, .sysChip:hover { border-color: transparent; color: #d2d2d2; }
.sysChip.staging { border-color: transparent; color: #d2d2d2; }
.sysChip.staging::after { content: 'staging'; font-size: 0.8333em; letter-spacing: 1px; text-transform: uppercase; padding: 0 5px; border: 1px solid #313131; color: #999999; }
.gate .gRegion { font-style: normal; }
.tag, #infoHead .tag { padding-top: 1px; padding-bottom: 1px; }
.tag-low, .tag-occ, .tag-solo, .st-contested, .st-mobilizing { border-color: #ffb64866; color: #ffb648; }
.tag-null, .st-vulnerable, .tag.hot { border-color: #ff5c5c80; color: #ff9a9a; }
.tag-high, .st-established { border-color: #48f0c066; color: #48f0c0; }
.rmPill, #heroNext .it i { font-size: 0.7143em; }
.rmPill.done, #heroNext .it i.now { border-color: #48f0c066; }
.rmPill.next { border-color: #313131; color: #d2d2d2; }
.svc, #mapSide .svc { padding: 1px 6px; letter-spacing: 1px; text-transform: uppercase; }
.kflag { font-size: 0.7143em; letter-spacing: 1px; text-transform: uppercase; padding: 1px 6px; border-color: #ff5c5c80; color: #ff9a9a; }
.warTag-sov { background-color: #d2d2d2a0; }

/* ============================================================ 7. status colours */
.resWarn { border-color: #ffb64866; background: #ffb6480d; color: #ffd9a1; }
.incursion { border-color: #ff5c5c80; background-color: #ff5c5c0d; color: #ff9a9a; }
.rmNews { border-color: #48f0c066; background-color: #48f0c00d; }
.fbNote.err, .delta.down, .down, .hot, .hop .fat.hot, .hotPct.hot, .timer.hot, .adm.hot { color: #ff9a9a; }
.warm, .hop .fat.warm, .warWarm, .hotPct.warm, .timer.warm, .adm.warm { color: #ffb648; }
#mapLegend .lgN.hot, #mapSide .trow .num.hot { color: #ff7a5c; }
#mapLegend .lgN.warm { color: #ffb648; }

/* ============================================================ 8. motion */
.tab, .chip, .gate, .sysChip, a.row, .trow, .sr-item { transition: color .15s linear, background-color .15s linear; }

/* ============================================================ 9. keyboard focus */
a:focus-visible, button:focus-visible, [role="tab"]:focus-visible, [tabindex]:focus-visible, label.fbBtn:focus-within { outline: 1px solid #d2d2d2; outline-offset: 2px; }
a.row:focus-visible, .trow:focus-visible, .sr-item:focus-visible, .rp-item:focus-visible, .acItem:focus-visible, .lgRow:focus-visible, .stRow:focus-visible { outline-offset: -1px; }
input:focus-visible, textarea:focus-visible { outline: none; }      /* fields show focus on their frame */

/* ============================================================ 10. native controls stay dark */
select, #mapSide .sdSel { color-scheme: dark; background-color: #00000060; border: 1px solid #313131; color: #d2d2d2; }
select:focus, #mapSide .sdSel:focus { border-color: #d2d2d2; }

/* ============================================================ 11. narrow screens */
@media (max-width: 1100px) { #fbTopBtn { padding: 0.6em 0.7em calc(0.6em + 2px); } }

/* ============================================================ 12. fixes */
/* pressed text action buttons: same specificity as the rest rule, declared after it */
.barBtn:not(:has(svg)):not(#statPeriod .barBtn):active { color: var(--btnTextColourSelected) !important; box-shadow: var(--btnMark); }
/* Entities: the period row is an option group (menu buttons), it has no id */
.mvBar .tabRow .tab { background: none !important; border: 1px solid #313131 !important; color: var(--btnTextColourNormal); padding: 6px 13px 8px; transition: color .15s linear; }
.mvBar .tabRow .tab:hover { color: var(--btnTextColourHover); }
.mvBar .tabRow .tab-active, .mvBar .tabRow .tab-active:hover { background: none !important; color: var(--btnTextColourSelected); box-shadow: var(--btnMark); }
/* home war report: the heat tones were outranked by .row .val */
.row .val.warHot { color: #ff9a9a; }
.row .val.warWarm { color: #ffb648; }


/* ============================================================ scrollbars: one dark bar, 10px, thumb #313131 -> #6b6b6b -> #9e9e9e */
*::-webkit-scrollbar { width: 10px !important; height: 10px !important; }
*::-webkit-scrollbar-track, *::-webkit-scrollbar-corner { background: transparent !important; }
*::-webkit-scrollbar-button { display: none !important; }
*::-webkit-scrollbar-thumb { background-color: #313131 !important; border: 2px solid transparent !important; background-clip: padding-box !important; border-radius: 0 !important; min-height: 28px; }
*::-webkit-scrollbar-thumb:hover { background-color: #6b6b6b !important; }
*::-webkit-scrollbar-thumb:active { background-color: #9e9e9e !important; }
textarea::-webkit-scrollbar, #topSearchResults::-webkit-scrollbar, #searchResults::-webkit-scrollbar, .acList::-webkit-scrollbar, #regionList::-webkit-scrollbar { width: 6px !important; height: 6px !important; }
textarea::-webkit-scrollbar-thumb, #topSearchResults::-webkit-scrollbar-thumb, #searchResults::-webkit-scrollbar-thumb, .acList::-webkit-scrollbar-thumb, #regionList::-webkit-scrollbar-thumb { border-width: 1px !important; }
/* Chromium ignores the rules above on any element that sets scrollbar-color, so clear it there; Firefox has no ::-webkit-scrollbar and takes the standard properties */
@supports selector(::-webkit-scrollbar) { * { scrollbar-color: auto !important; } }
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: #313131 transparent !important; } }