/* Eve WebTools — harmonisation layer for Atlas.
   Load it LAST on every Atlas 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; } }