/* Ops (experimental, My Planets): the facilities table (ops-deck.js). Command's language: black
   surfaces, #262626 borders, grey labels, green for what is linked and spare. The Planet column
   stays put while the resource columns scroll sideways, so it works on a phone too. */
body.dashboard-app #results.command-ops-results { display: block; }
body.dashboard-app .ops-deck { --ops-cell: 64px; --ops-planet: 220px; padding: 0 0 40px; }
body.dashboard-app .ops-deck-intro { margin: 0 0 20px; color: var(--command-grey, #727578); font-size: var(--font-sm, 14px); line-height: 1.4; }
body.dashboard-app .ops-deck-state { display: flex; align-items: center; gap: 10px; min-height: 120px; padding: 20px; border: 1px solid var(--command-border, #262626); border-radius: 11px; color: var(--command-grey, #727578); }
body.dashboard-app .ops-deck-loader .loader { display: block; width: 14px; height: 14px; border-radius: 50%; }
body.dashboard-app .ops-deck-retry { height: 40px; margin-left: auto; padding: 0 20px; border: 1px solid var(--command-border, #262626); border-radius: 40px; background: none; color: #ededed; cursor: pointer; }
body.dashboard-app .ops-deck-frame { border: 1px solid var(--command-border, #262626); border-radius: 11px; overflow: hidden; background: #000; }
body.dashboard-app .ops-deck-scroll { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
body.dashboard-app .ops-deck-table { border-collapse: separate; border-spacing: 0; min-width: 100%; font-variant-numeric: tabular-nums; }
body.dashboard-app .ops-deck-table :is(th, td) { padding: 0; border-bottom: 1px solid var(--command-border, #262626); text-align: center; white-space: nowrap; }
body.dashboard-app .ops-deck-table :is(th, td).ops-deck-group-start { border-left: 1px solid var(--command-border, #262626); }

/* Planet column: fixed while the rest scrolls sideways. */
body.dashboard-app .ops-deck-table tr > :first-child {
	position: sticky;
	left: 0;
	z-index: 2;
	width: var(--ops-planet);
	min-width: var(--ops-planet);
	max-width: var(--ops-planet);
	padding: 0 10px;
	border-right: 1px solid var(--command-border, #262626);
	background: #000;
	text-align: left;
}

/* Group row (Power Plants / Refineries / Relics) and the resource heads. */
body.dashboard-app .ops-deck-groups th { height: 40px; color: var(--command-grey, #727578); font-size: var(--font-xs, 12px); font-weight: 400; letter-spacing: .05em; text-transform: uppercase; }
body.dashboard-app .ops-deck-heads th { height: 72px; min-width: var(--ops-cell); padding: 0 6px; vertical-align: middle; }
body.dashboard-app .ops-deck-heads .ops-deck-corner { color: var(--command-grey, #727578); font-size: var(--font-xs, 12px); font-weight: 400; letter-spacing: .05em; text-transform: uppercase; }
/* Resources show their colour bar (as on the Resources tab), Relics their small artwork. */
body.dashboard-app .ops-deck-head-image { display: flex; align-items: flex-end; justify-content: center; height: 28px; margin-bottom: 8px; }
body.dashboard-app .ops-deck-head-image img { width: 28px; height: 28px; border: 0; border-radius: 0; object-fit: contain; image-rendering: pixelated; }
body.dashboard-app .ops-deck-head-image img.dashboard-resource-image { width: 40px; height: 4px; border-radius: 2px; object-fit: fill; }
body.dashboard-app .ops-deck-head-name { display: block; color: #ededed; font-size: var(--font-xs, 12px); font-weight: 400; }

/* Owned and Spare totals. */
body.dashboard-app .ops-deck-table :is(.ops-deck-owned, .ops-deck-spare) :is(th, td) { height: 40px; }
body.dashboard-app .ops-deck-table :is(.ops-deck-owned, .ops-deck-spare) th { color: var(--command-grey, #727578); font-size: var(--font-sm, 14px); font-weight: 400; }
body.dashboard-app .ops-deck-owned td { color: #ededed; }
body.dashboard-app .ops-deck-spare td { color: var(--command-grey, #727578); }
body.dashboard-app .ops-deck-spare .has-spare { color: #5acc77; }
body.dashboard-app .ops-deck-spare :is(th, td) { border-bottom-color: #3a3c3e; }

/* Planet rows. */
body.dashboard-app .ops-deck-planet { height: 56px; }
body.dashboard-app .ops-deck-planet { display: table-cell; }
body.dashboard-app .ops-deck-planet img { width: 32px; height: 32px; margin-right: 10px; border-radius: 50%; vertical-align: middle; object-fit: cover; }
body.dashboard-app .ops-deck-planet-text { display: inline-flex; flex-direction: column; max-width: calc(var(--ops-planet) - 62px); vertical-align: middle; line-height: 1.25; }
body.dashboard-app .ops-deck-planet-code { color: var(--command-grey, #727578); font-size: var(--font-xs, 12px); font-weight: 400; }
body.dashboard-app .ops-deck-planet-name { overflow: hidden; color: #ededed; font-size: var(--font-sm, 14px); font-weight: 400; text-overflow: ellipsis; }
body.dashboard-app .ops-deck-row:last-child :is(th, td) { border-bottom: 0; }

body.dashboard-app .ops-deck-cell { min-width: var(--ops-cell); padding: 0 6px; }
body.dashboard-app .ops-deck-cell.is-na { color: #3a3c3e; }
body.dashboard-app .ops-deck-cell > span { color: var(--command-grey, #727578); }
body.dashboard-app .ops-deck-cell.has-count > span { color: #5acc77; }
body.dashboard-app .ops-deck-value {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 50%;
	background: none;
	color: var(--command-grey, #727578);
	font: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
body.dashboard-app .ops-deck-cell.has-count .ops-deck-value { border-color: var(--command-border, #262626); color: #5acc77; }
body.dashboard-app .ops-deck-cell.is-full .ops-deck-value { border-color: #2f7a45; background: rgba(90, 204, 119, .12); }
body.dashboard-app .ops-deck-cell.is-pending .ops-deck-value { color: #2f7a45; }
body.dashboard-app :is(.ops-deck-value, .ops-deck-step-value) .loader { display: block; width: 14px; height: 14px; border-radius: 50%; }
@media (hover: hover) {
	body.dashboard-app .ops-deck-value:hover { border-color: #fff; color: #fff; }
	body.dashboard-app .ops-deck-retry:hover { border-color: #fff; }
	body.dashboard-app .ops-deck-step:not(:disabled):hover { border-color: #fff; color: #fff; }
}

/* The open cell: − value + */
body.dashboard-app .ops-deck-cell.is-open { padding: 0 4px; background: #0b0c0d; }
body.dashboard-app .ops-deck-stepper { display: inline-flex; align-items: center; gap: 4px; }
body.dashboard-app .ops-deck-step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--command-border, #262626);
	border-radius: 50%;
	background: #000;
	color: #ededed;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
body.dashboard-app .ops-deck-step { font-size: 18px; line-height: 1; }
body.dashboard-app .ops-deck-step:disabled { color: #3a3c3e; cursor: default; }
body.dashboard-app .ops-deck-step-value { display: inline-flex; justify-content: center; min-width: 18px; color: #5acc77; }

/* The sub bar button: a table icon; white ring while the table is showing. */
body.dashboard-app #opsViewBtn[aria-pressed="true"] { border-color: #ededed; color: #fff; }

@media (max-width: 800px) {
	body.dashboard-app .ops-deck { --ops-cell: 52px; --ops-planet: 140px; padding-bottom: 20px; }
	body.dashboard-app .ops-deck-planet img { display: none; }
	body.dashboard-app .ops-deck-planet-text { max-width: calc(var(--ops-planet) - 20px); }
	body.dashboard-app .ops-deck-heads th { height: 64px; padding: 0 4px; }
	body.dashboard-app .ops-deck-head-name { font-size: 11px; }
	body.dashboard-app .ops-deck-step { width: 28px; height: 28px; }
}