/* Atlas — incursions (builds on ../styles.css for the shared chrome). */

[hidden] { display: none !important; }

#mainWrapper { overflow-y: auto; }

/* ---------------- toolbar ---------------- */

#incBar {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 8px 14px;
    background-color: var(--backgroundColor);
    border-bottom: 1px solid var(--borderColor31);
    flex-shrink: 0;
}
#incTitle {
    font-family: 'Shentox Medium', 'Segoe UI', sans-serif;
    font-size: 1.3571em;
    color: var(--themeColor);
    letter-spacing: 3px;
    white-space: nowrap;
}
#incNote { font-size: 0.8214em; color: var(--textColor2); margin-left: auto; white-space: nowrap; }

#incWrap { padding: 16px 18px 26px; font-size: 1em; }
#incCols { display: grid; grid-template-columns: minmax(0, 2.05fr) minmax(0, 1fr); gap: 14px; align-items: start; }
#incMain, #incSide { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* shared panel block (same as the other Atlas pages) */
.panel { background-color: var(--backgroundColor); border: 1px solid var(--borderColor31); padding: 12px 14px 14px; min-width: 0; }
.panelTitle { margin: 0 0 10px; font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: 0.8571em; letter-spacing: 2px; color: var(--themeColor); font-weight: normal; }
.panelList { display: flex; flex-direction: column; font-size: 1em; }
.panelEmpty { color: var(--textColor2); font-size: 0.8929em; padding: 8px 0; }
.thead, .trow { display: grid; align-items: center; gap: 10px; padding: 5px 0; }
.trow { border-top: 1px solid #d2d2d20a; }
.thead { font-size: 0.7143em; letter-spacing: 1.5px; color: var(--textColor2); padding-bottom: 4px; }
.tag { font-size: 0.7143em; letter-spacing: 1px; padding: 2px 7px; border: 1px solid var(--borderColor31); color: var(--textColor); text-align: center; text-transform: uppercase; white-space: nowrap; }
.tabRow { display: flex; gap: 3px; font-size: 0.8929em; flex-wrap: wrap; }
.dim { color: var(--textColor2); font-size: 0.8571em; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.secBadge { width: 36px; text-align: center; font-size: 0.7857em; color: #151515; flex-shrink: 0; font-family: 'Shentox SemiBold', 'Segoe UI', sans-serif; padding: 1px 0; display: inline-block; }
.mapBtn { display: inline-flex; align-items: center; justify-content: center; width: 1.7em; height: 1.7em; border: 1px solid var(--borderColor31); flex-shrink: 0; }
.mapBtn svg { width: 1.05em; height: 1.05em; stroke: var(--ghost); fill: none; stroke-width: 1.6; }
.mapBtn:hover { border-color: var(--textColor2); }
.mapBtn:hover svg { stroke: var(--ghostActive); }
.ent { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ent a { color: var(--themeColor); text-decoration: none; }
.ent a:hover { text-decoration: underline; }
.elogo { flex-shrink: 0; border-radius: 2px; background-color: #d2d2d208; }

/* security-class and state tags */
.tag-high { border-color: #2a6a5a; color: #48f0c0; }
.tag-low  { border-color: #7d6b3c; color: #e0b040; }
.tag-null { border-color: #8a3a2a; color: #f06000; }
.st-mobilizing  { border-color: #7d6b3c; color: #e0b040; }
.st-established { border-color: #2a6a5a; color: #48f0c0; }
.st-withdrawing { border-color: #8a3a2a; color: #f06000; }
.tag-boss { border-color: #6a2a6a; color: #e070e0; }

/* ---------------- map ---------------- */
.mapHead { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.mapHead .panelTitle { margin: 0; flex: 1 1 auto; }
#incMapWrap { position: relative; height: 420px; border: 1px solid var(--borderColor31); background-color: #151515; overflow: hidden; }
#incMap { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; outline: none; }
#incMap:active { cursor: grabbing; }
#incTip { position: absolute; z-index: 5; pointer-events: none; background-color: #0d0d0df2; border: 1px solid var(--borderColor31); padding: 6px 10px; color: var(--textColor); font-size: 0.8571em; white-space: nowrap; }
#incTip b { font-weight: normal; color: var(--themeColor); }

/* ---------------- incursion cards ---------------- */
#incList { display: flex; flex-direction: column; gap: 14px; }
.inc { display: flex; flex-direction: column; gap: 10px; }
.inc.sel { box-shadow: inset 3px 0 0 #d2d2d2; }
.incHead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.incHead .incName { font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: 1.0714em; color: var(--themeColor); text-decoration: none; }
.incHead .incName:hover { text-decoration: underline; }
.incHead .incRegion { color: var(--textColor2); }
.incHead .right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.incBody { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.4fr); gap: 8px 32px; }
.iRow { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.iRow .iL { color: var(--textColor2); flex: 0 0 auto; white-space: nowrap; }
.iRow .iDots { flex: 1 1 18px; min-width: 18px; height: 3px; margin: 0 2px; background: radial-gradient(circle, #d2d2d259 0.9px, transparent 1.3px) left center / 5px 3px repeat-x; }
.iRow .iV { color: var(--textColor); white-space: nowrap; display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.iRow .iV a { color: var(--themeColor); text-decoration: none; }
.iRow .iV a:hover { text-decoration: underline; }
.infl { display: flex; align-items: center; gap: 8px; min-width: 160px; }
.inflWrap { flex: 1 1 auto; height: 7px; background-color: #d2d2d20d; }
.inflBar { display: block; height: 100%; }
.inflPct { font-size: 0.8571em; color: var(--textColor2); width: 34px; text-align: right; }
.sysChips { display: flex; flex-wrap: wrap; gap: 6px; }
.sysChip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 4px; border: 1px solid var(--borderColor31); color: var(--textColor); text-decoration: none; }
.sysChip:hover { color: var(--themeColor); border-color: var(--textColor2); }
.sysChip.staging { border-color: #d2d2d2; color: var(--themeColor); }
.sysChip .secBadge { width: 30px; font-size: 0.7143em; }
.hubs { color: var(--textColor2); font-size: 0.8571em; }
.hubs a { color: var(--textColor); text-decoration: none; }
.hubs a b { font-weight: normal; color: var(--themeColor); }
.hubs a:hover b { text-decoration: underline; }
.incFoot { display: flex; align-items: center; gap: 14px; color: var(--textColor2); font-size: 0.8571em; flex-wrap: wrap; }

/* ---------------- sidebar ---------------- */
.oRow { display: flex; justify-content: space-between; padding: 5px 0; border-top: 1px solid #d2d2d20a; }
.oRow:first-child { border-top: 0; }
.oRow .oL { color: var(--textColor2); }
.oRow .oV { color: var(--themeColor); font-variant-numeric: tabular-nums; }
#factionCard { display: flex; align-items: center; gap: 12px; }
#factionCard .fName { font-family: 'Shentox Medium', 'Segoe UI', sans-serif; font-size: 1.0714em; color: var(--themeColor); text-decoration: none; }
#factionCard .fName:hover { text-decoration: underline; }
#factionCard .fSub { color: var(--textColor2); font-size: 0.8571em; }
.trow.hi, .thead.hi { grid-template-columns: 26px minmax(110px, 1.2fr) minmax(90px, 1fr) 70px 80px; }
.trow.hi .cn a { color: var(--themeColor); text-decoration: none; }
.trow.hi .cn a:hover { text-decoration: underline; }
.trow.hi .when { color: var(--textColor2); font-size: 0.8571em; white-space: nowrap; cursor: help; }

@media (max-width: 1100px) {
    #incCols { grid-template-columns: 1fr; }
    .incBody { grid-template-columns: 1fr; }
}