/* Eve WebTools — harmonisation layer for LedgerParser.
   Load it LAST on LedgerParser/index.html, after styles.css.
   It restyles the selectors LedgerParser already uses (see the brand book, "Harmonisation plan").
   When /lib/ewt-core.css exists, these rules move there and into styles.css. */

: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 */
/* -- action buttons: do something (Parse, Clear, Copy, Import, Share, Log in, + Add, Log out) */
.btn, .ssoLogin, .ssoMenuLink, .tbBtn.tbShare {
    display: inline-block; font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: 0.8571em; letter-spacing: 1px; text-transform: uppercase;
    line-height: 1.2; padding: 0.6em 1.6em calc(0.6em + 2px); white-space: nowrap; text-decoration: none;
    background: none; border: 1px solid #313131; color: var(--btnTextColourNormal); box-shadow: none; transition: color .15s linear;
}
.btn-small, .ssoLogin, .ssoMenuLink { font-size: 0.7143em; padding: 0.55em 1.1em calc(0.55em + 2px); }
.tbBtn.tbShare { font-size: 0.7692em; padding: 0.55em 1.1em calc(0.55em + 2px); }      /* 0.7143em of the page inside the 0.9286em toolbar */
.btn:hover, .ssoLogin:hover, .ssoMenuLink:hover, .tbBtn.tbShare:hover {
    background: none; border-color: #313131; color: var(--btnTextColourHover); text-decoration: none;
}
.btn:active, .ssoLogin:active, .ssoMenuLink:active, .tbBtn.tbShare:active { color: var(--btnTextColourSelected); box-shadow: var(--btnMark); }
.ssoLogin::before { color: inherit; }
/* the official EVE SSO button (an image), top bar and ledger panel: no frame of our own, brightens on hover */
.ssoBtn { display: flex; align-items: center; text-decoration: none; }
.ssoBtn img { height: 30px; width: auto; display: block; opacity: 0.88; transition: opacity .15s linear; }
.ssoBtn:hover img { opacity: 1; }
.ssoBtn.ssoBtn-panel img { height: 45px; }
@media (max-width: 1100px) { #ssoChip .ssoBtn img { height: 26px; } }
@media (max-width: 640px) { #ssoChip .ssoBtn img { height: 22px; } }
/* primary: one per view, bright at rest, no mark */
.btn-primary { background: none; color: var(--btnTextColourSelected); box-shadow: none; }
.btn-primary:hover { color: #ffffff; }
.btn-primary:active { box-shadow: none; }
/* while the paste box is open, Parse is the primary; Import steps back */
#esiPanel:has(~ #pastePanel:not([hidden])) #btnEsiImport { color: var(--btnTextColourNormal); }
#esiPanel:has(~ #pastePanel:not([hidden])) #btnEsiImport:hover { color: var(--btnTextColourHover); }
/* danger: quiet at rest */
.ssoMenuLink-muted:hover { color: var(--bad); }
.ssoMenuLink-muted:active { color: var(--bad); box-shadow: inset 0 -2px 0 var(--badFrame); }
.btn:disabled, .btn:disabled:hover { opacity: .45; background: none; border-color: #313131; color: var(--btnTextColourNormal); box-shadow: none; cursor: not-allowed; }

/* -- menu buttons: change a setting, filter or overlay of the current view
      (toolbar buttons, option groups written as .tab, character switches, presets) */
.tab, .tbBtn:not(.tbShare), .esiChip, .chip, .chip-small, .ssoChars {
    background: none; border: 1px solid #313131; color: var(--btnTextColourNormal); box-shadow: none; transition: color .15s linear;
}
.tabRow { font-size: 0.8571em; }
.tab { padding: 6px 13px 8px; }
.tbBtn:not(.tbShare) { padding: 6px 12px 8px; min-height: 34px; }
.esiChip { padding: 3px 10px 5px 6px; font-size: 0.8571em; }
.chip { padding: 5px 14px 7px; font-size: 0.8571em; }
.chip-small { padding: 4px 10px 6px; font-size: 0.7857em; }
.ssoChars { padding: 3px 8px 5px; }
.tab:hover, .tbBtn:not(.tbShare):hover, .esiChip:hover, .chip:hover, .ssoChars:hover { border-color: #313131; color: var(--btnTextColourHover); }
.tab-active, .tab-active:hover, .tbBtn.tb-open, .tbBtn.tb-open:hover,
.esiChip:has(input:checked), .esiChip:has(input:checked):hover, #ssoChip.isOpen .ssoChars {
    background: none; border-color: #313131; color: var(--btnTextColourSelected); box-shadow: var(--btnMark);
}
.tbBtn.tb-off { color: var(--btnTextColourNormal); }
.tbBtn.tb-off:hover { color: var(--btnTextColourHover); }
.tab:disabled { opacity: .45; cursor: not-allowed; }
.tab:disabled:not(.tab-active):hover { color: var(--btnTextColourNormal); }
/* a character switch is a button: its state is the mark, the native box stays for the keyboard only */
.esiChip { position: relative; color: var(--btnTextColourNormal); }
.esiChip input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.esiChip:has(input:not(:checked)) { color: var(--btnTextColourNormal); }
.esiChip:has(input:not(:checked)):hover { color: var(--btnTextColourHover); }
.esiChip:has(input:disabled), .esiChip:has(input:disabled):hover { opacity: .45; color: var(--btnTextColourNormal); cursor: not-allowed; }
.esiChip:has(input:focus-visible) { outline: 1px solid #d2d2d2; outline-offset: 2px; }

/* -- tabs: swap what the result panel shows. Frameless, on a hairline */
#viewTabs { gap: 0; border-bottom: 1px solid #313131; }
#viewTabs .tab { border: 0; margin-bottom: -1px; padding: 7px 14px 9px; }

/* -- quiet text actions */
.sampleRow a.sampleLink, .compLink { transition: color .15s linear; }
.toggle { transition: color .15s linear; }
.toggle: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); }
.menuIcon-soon:hover svg { stroke: var(--btnTextColourNormal); }
.ssoIconBtn { color: var(--btnTextColourNormal); border-color: #313131; transition: color .15s linear; }
.ssoIconBtn:hover:not(:disabled) { color: var(--btnTextColourHover); border-color: #313131; }
.ssoIconBtn:active:not(:disabled) { color: var(--btnTextColourSelected); }
.ssoIconBtn-danger:hover:not(:disabled), .ssoIconBtn-danger:active:not(:disabled) { color: var(--bad); border-color: #313131; }
.ssoIconBtn:disabled { opacity: .45; }

/* ============================================================ 3. rows and marks */
/* a left mark means "current row" only: none on strips, menus, cards */
.strip, .ssoMenu, .tile-best, .tile-payout { box-shadow: none; }
.ssoMenu { box-shadow: 0 12px 30px rgba(0,0,0,0.55); background-color: #0d0d0df7; top: calc(100% + 16px); }   /* clear of the top bar and its page mark */
.pop { background-color: #0d0d0df7; }
#yieldPanel { border-left: 0; }
table.cat tr:hover td { background-color: #d2d2d20a; }
table.cat tr.detail:hover td { background-color: #00000040; }
table.cat tfoot tr:hover td { background-color: transparent; }

/* ============================================================ 4. fields */
.tbField input, .numField input, .pctField input, .shareResult input, .esiRow select, .tbField select {
    background-color: #00000060; border: 1px solid #313131; color: #d2d2d2; height: auto; min-height: 34px;
    text-transform: none; letter-spacing: 0; transition: none;
}
.tbField input:focus, .numField input:focus, .pctField input:focus, .shareResult input:focus, .esiRow select:focus, .tbField select:focus { border-color: #d2d2d2; outline: none; }
#catalogSearch { border-color: #313131; background-color: #00000060; }
#catalogSearch:focus-within { border-color: #d2d2d2; }
#pasteBox::placeholder, #catalogInput::placeholder, .numField input::placeholder { color: #6b6b6b; }
/* a label on the left of its field (one field per line) */
.tbField { border: 0; height: auto; padding: 0 4px 0 8px; gap: 8px; letter-spacing: 1px; text-transform: uppercase; color: #6b6b6b; }
.toolbar .tbField { font-size: 0.8462em; }                      /* 0.7857em of the page inside the 0.9286em toolbar */
.toolbar .tbField input { font-size: 1.1818em; }
.esiRow .tbField { font-size: 0.7857em; padding: 0; }
.esiRow .tbField select { font-size: 1.1818em; padding: 0 8px; }
.settingL { font-size: 0.7857em; letter-spacing: 1px; text-transform: uppercase; color: #6b6b6b; white-space: nowrap; }
.pop .yGrid .settingL { width: 150px; }
.numField, .pctField { font-size: 0.8571em; }
/* dark checkbox: no system blue */
.toggle 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;
}
.toggle input[type="checkbox"]:checked { background-color: #d2d2d2; box-shadow: inset 0 0 0 3px #101010; }
.toggle input[type="checkbox"]:focus-visible { outline: 1px solid #d2d2d2; outline-offset: 2px; }

/* ============================================================ 5. titles */
/* panel title: strips, pop-overs, the characters menu */
.stripTitle, .popHead .popTitle, .ssoMenuHead .popTitle {
    font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: 0.8571em; letter-spacing: 2px; text-transform: uppercase; color: #d2d2d2;
}
/* section label: groups and captions under figures */
.popTitle, .hlLabel, .tileL, .statRow .statL, .subTitle {
    font-family: 'Shentox Regular', 'Segoe UI', sans-serif; font-size: 0.7857em; letter-spacing: 1.5px; text-transform: uppercase; color: #6b6b6b;
}
.popHead .popTitle, .ssoMenuHead .popTitle { font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: 0.8571em; letter-spacing: 2px; color: #d2d2d2; }
.subTitle { color: var(--warn); }
.statRow .stat .statL { max-width: 320px; }
table.cat th { font-size: 0.7692em; letter-spacing: 1.5px; transition: color .15s linear; }     /* 0.7143em of the page inside the 0.9286em table */
.hlSub { font-size: 0.8571em; }

/* ============================================================ 6. chips and tags */
.kindTag, .formatTag, table.cat td .bestTag, table.cat td.isk .bestTag {
    font-family: 'Shentox SemiBold', 'Segoe UI', sans-serif; letter-spacing: 1px; text-transform: uppercase; padding: 1px 6px; color: #151515;
}
table.cat .kindTag, table.cat td .bestTag, table.cat td.isk .bestTag { font-size: 0.7692em; }   /* 0.7143em of the page inside the 0.9286em table */
.statV .formatTag { display: inline-block; font-size: 0.5556em; vertical-align: middle; }        /* 0.7143em of the page inside the 1.2857em figure */
.formatTag, .kind-other, table.cat td .bestTag-you { background-color: #d2d2d2a0; }

/* ============================================================ 7. status colours and messages */
/* neutral information: the shared-appraisal banner */
.banner { background-color: #00000040; border-color: #313131; box-shadow: none; color: #999999; }
.banner #shareBannerText { margin-right: auto; }
.esiNote.isError, .ssoMenuMeta.isError, .delta-down { color: var(--bad); }
.stripWarn, .statRow .stat-warn .statV, table.cat td.isk.dim, table.cat td.isk .warn { color: var(--warn); }

/* ============================================================ 8. quiet text */
.tlChart text[fill="#6a6a6a"] { fill: #6b6b6b; }

/* ============================================================ 9. keyboard focus */
a:focus-visible, button:focus-visible, [role="tab"]:focus-visible, [tabindex]:focus-visible { outline: 1px solid #d2d2d2; outline-offset: 2px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; }      /* fields show focus on their frame */
.toggle input[type="checkbox"]:focus-visible { outline: 1px solid #d2d2d2; }

/* ============================================================ 10. native controls stay dark */
select { color-scheme: dark; }

/* ============================================================ 11. motion */
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ============================================================ 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 { width: 6px !important; height: 6px !important; }
textarea::-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; } }