/*!*********************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js!./src/app/style.css ***!
\*********************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap);
/*!*************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js!./src/app/style.css (1) ***!
\*************************************************************************/
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
color-scheme: dark;
--primary: #ee384e;
--primary-d: #d42f43;
--secondary: #3c4b6d;
--bg: #283036;
--surface: #1e2529;
--surface2: #161b1e;
--border: rgba(255, 255, 255, 0.07);
--text: #ebebeb;
--muted: #9aa0a6;
--green: #3fb950;
--red: #ee384e;
--shadow: 0 6px 30px 5px rgba(0, 0, 0, 0.3);
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 20px;
--sidebar-w: 230px;
--sidebar-wc: 60px;
}
:root[data-theme="light"] {
color-scheme: light;
--secondary: #4a5878;
--bg: #f3f5f7;
--surface: #ffffff;
--surface2: #eef2f6;
--border: rgba(24, 34, 44, 0.12);
--text: #1f2933;
--muted: #66707b;
--shadow: 0 6px 30px 5px rgba(18, 26, 33, 0.10);
--shadow-sm: 0 2px 8px rgba(18, 26, 33, 0.08);
}
html, body {
height: 100%;
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 14px;
line-height: 1.5;
background: var(--bg);
color: var(--text);
overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; }
::-webkit-scrollbar { width: 0.4rem; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--secondary); border-radius: 100vw; }
/* ── App shell ───────────────────────────────────────────────────────────────── */
.app {
display: flex;
min-height: 100vh;
}
/* ── Sidebar ─────────────────────────────────────────────────────────────────── */
.sidebar {
width: var(--sidebar-w);
min-height: 100vh;
background: var(--surface);
border-right: 1px solid var(--border);
position: fixed;
top: 0;
left: 0;
z-index: 200;
display: flex;
flex-direction: column;
transition: width 0.3s ease;
overflow: hidden;
}
.sidebar.closed {
width: var(--sidebar-wc);
}
.sidebar__logo {
display: flex;
align-items: center;
gap: 12px;
padding: 20px 18px;
border-bottom: 1px solid var(--border);
white-space: nowrap;
}
.sidebar__logo-icon {
font-size: 20px;
flex-shrink: 0;
width: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.sidebar__logo-text {
font-size: 15px;
font-weight: 600;
opacity: 1;
transition: opacity 0.2s ease;
}
.sidebar.closed .sidebar__logo-text {
opacity: 0;
pointer-events: none;
}
.sidebar__menu {
flex: 1;
padding: 12px 8px;
display: flex;
flex-direction: column;
gap: 2px;
}
.sidebar__item {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: var(--radius-sm);
cursor: pointer;
color: var(--muted);
transition: color 0.2s, background 0.2s;
white-space: nowrap;
background: none;
border: none;
font-size: 13px;
width: 100%;
text-align: left;
}
.sidebar__item:hover {
color: var(--text);
background: rgba(255, 255, 255, 0.05);
}
.sidebar__item.active {
color: var(--primary);
background: rgba(238, 56, 78, 0.1);
font-weight: 600;
}
.sidebar__item.active::before {
content: '';
position: absolute;
left: -8px;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 60%;
background: var(--primary);
border-radius: 0 3px 3px 0;
}
.sidebar__item-icon {
font-size: 16px;
flex-shrink: 0;
width: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.sidebar__item-text {
opacity: 1;
transition: opacity 0.2s ease;
}
.sidebar.closed .sidebar__item-text {
opacity: 0;
pointer-events: none;
}
.sidebar__footer {
padding: 8px;
border-top: 1px solid var(--border);
}
.sidebar__item.logout-item:hover {
color: var(--red);
background: rgba(238, 56, 78, 0.08);
}
/* ── Main wrapper ────────────────────────────────────────────────────────────── */
.main-wrapper {
flex: 1;
/* Cap at the available viewport width: the default flex min-width:auto would let
a wide-content child (e.g. the max-content device grid) stretch this past the
viewport, defeating the grid's own overflow-x scrollbar. */
min-width: 0;
margin-left: var(--sidebar-w);
transition: margin-left 0.3s ease;
background: var(--bg);
min-height: 100vh;
display: flex;
flex-direction: column;
}
.main-wrapper.sidebar-closed {
margin-left: var(--sidebar-wc);
}
/* ── Topnav ──────────────────────────────────────────────────────────────────── */
.topnav {
display: flex;
align-items: center;
gap: 14px;
padding: 0 24px;
height: 60px;
background: var(--surface);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
position: sticky;
top: 0;
z-index: 100;
}
.topnav__toggle {
background: none;
border: none;
color: var(--muted);
cursor: pointer;
padding: 6px 8px;
border-radius: var(--radius-sm);
font-size: 18px;
line-height: 1;
transition: color 0.2s, background 0.2s;
flex-shrink: 0;
}
.topnav__toggle:hover {
color: var(--text);
background: rgba(255, 255, 255, 0.06);
}
.topnav__title {
font-size: 15px;
font-weight: 600;
}
.topnav__right {
display: flex;
align-items: center;
gap: 12px;
margin-left: auto;
}
.theme-toggle-btn {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--border);
background: var(--surface2);
color: var(--muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
line-height: 1;
flex-shrink: 0;
transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.1s;
}
.theme-toggle-btn:hover {
color: var(--text);
border-color: var(--primary);
background: rgba(238, 56, 78, 0.08);
transform: translateY(-1px);
}
.topnav__theme-toggle {
flex-shrink: 0;
}
.status-badge {
font-size: 11px;
padding: 2px 10px;
border-radius: var(--radius-lg);
border: 1px solid currentColor;
}
.status-badge.ok { color: var(--green); }
.status-badge.err { color: var(--red); }
.topnav__user {
font-size: 12px;
color: var(--muted);
}
.topnav__role {
font-size: 10px;
font-weight: 500;
padding: 2px 8px;
border-radius: var(--radius-lg);
border: 1px solid var(--secondary);
color: var(--secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* ── Content ─────────────────────────────────────────────────────────────────── */
.content {
flex: 1;
/* Constrain to the wrapper width so an oversized child (the device grid) overflows
its own box and shows its overflow-x scrollbar, instead of stretching .content
past the viewport (which body{overflow-x:hidden} would then silently clip). */
min-width: 0;
padding: 24px;
}
/* ── Farm grid ───────────────────────────────────────────────────────────────── */
.farm-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 340px));
gap: 20px;
align-content: start;
justify-content: start;
}
.farm-card--offline {
opacity: 0.55;
}
/* Clicker landing — plain farm list (no tiles) */
.clicker-farm-list {
display: flex;
flex-direction: column;
gap: 6px;
/* Span the full content-area width like the Users page, rather than the narrow
form width. The rows already stretch to fill this flex column. */
max-width: none;
}
.clicker-farm-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
}
.clicker-farm-row:hover {
border-color: var(--primary);
background: var(--surface2);
}
.clicker-farm-row__name {
font-weight: 600;
color: var(--text);
}
/* Country flag for a farm's location, sat just left of the name. Sized so the
emoji lines up with the status dot / name baseline. */
.clicker-farm-row .farm-row-flag {
font-size: 16px;
line-height: 1;
}
.clicker-farm-row__meta {
margin-left: auto;
font-size: 13px;
color: var(--secondary);
}
.clicker-farm-row__chevron {
color: var(--secondary);
font-size: 20px;
line-height: 1;
}
/* Farm "last health check" time: same clock indicator as device cards, sat
between the meta text and the chevron in the row's right-aligned cluster. */
.clicker-farm-row .farm-row-seen {
margin-left: 4px;
}
.farm-card {
position: relative;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
cursor: pointer;
text-align: center;
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.farm-card:hover {
border-color: var(--primary);
box-shadow: inset 0 0 0 1px var(--primary), var(--shadow-sm);
transform: translateY(-2px);
}
.farm-card__body {
width: 100%;
padding: 18px 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.farm-card__name {
font-size: 18px;
font-weight: 600;
color: var(--text);
word-break: break-word;
}
.farm-card__status-row {
display: flex;
align-items: center;
gap: 9px;
justify-content: center;
}
.farm-card__stats {
display: flex;
justify-content: center;
gap: 8px;
width: 100%;
}
.farm-stat {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 7px 11px;
border: 1px solid var(--border);
border-radius: 999px;
color: var(--muted);
font-size: 12px;
line-height: 1;
}
.farm-stat svg {
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 1.4;
}
.farm-stat svg circle:first-child {
fill: currentColor;
stroke: none;
}
.farm-stat strong {
color: var(--text);
font-size: 14px;
}
.farm-stat--online {
color: var(--green);
}
/* Running-clicker count: filled play glyph, accent-tinted border. */
.farm-stat--clicker {
color: var(--primary, #4f8cff);
border-color: color-mix(in srgb, var(--primary, #4f8cff) 45%, var(--border));
}
.farm-stat--clicker svg {
fill: currentColor;
stroke: none;
}
.farm-card__actions {
display: flex;
gap: 6px;
margin-top: 1px;
width: 100%;
justify-content: center;
}
.card-icon-btn {
width: 28px;
height: 28px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: none;
cursor: pointer;
color: var(--muted);
display: flex;
align-items: center;
justify-content: center;
transition: color 0.15s, border-color 0.15s, background 0.15s;
flex-shrink: 0;
}
.card-icon-btn:hover { color: var(--text); border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); }
.card-icon-btn.delete-btn:hover { color: var(--red); border-color: var(--red); background: rgba(238,56,78,0.08); }
.card-icon-btn:disabled { opacity: 0.5; cursor: default; }
/* "Last update" indicator on a device card header: clock glyph + wall-clock time. */
.device-updated {
display: inline-flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
color: var(--muted);
font-size: 11px;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.device-updated svg { display: block; }
.device-updated__time { line-height: 1; }
@media (max-width: 600px) {
.content {
padding: 16px;
}
}
@media (max-width: 420px) {
.content {
padding: 14px 12px;
}
.farm-grid {
grid-template-columns: minmax(0, 1fr);
}
/* Force the clicker forms and device list to a single column on phones so
fields never overflow horizontally. */
.clicker-config-grid,
.clicker-device-form,
.clicker-device-list,
.user-form-page .modal__row {
grid-template-columns: minmax(0, 1fr);
}
}
/* ── Farm devices header ─────────────────────────────────────────────────────── */
.farm-devs-header {
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.card-size-control {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--muted);
user-select: none;
}
.card-size-control input[type="range"] {
width: 100px;
accent-color: var(--primary);
cursor: pointer;
}
.card-size-control span:last-child {
min-width: 3ch;
text-align: right;
}
.back-btn {
background: none;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--muted);
font-size: 13px;
font-family: inherit;
padding: 6px 14px;
cursor: pointer;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.back-btn:hover {
color: var(--text);
border-color: var(--primary);
background: rgba(238, 56, 78, 0.06);
}
/* ── Device grid ─────────────────────────────────────────────────────────────── */
.device-grid {
display: grid;
grid-template-columns: repeat(var(--cards-per-row, 6), max-content);
gap: 24px;
align-items: start;
justify-content: start;
overflow-x: auto;
overflow-y: visible;
padding-bottom: 16px;
width: 100%;
}
.device-grid::-webkit-scrollbar { height: 12px; }
.device-grid::-webkit-scrollbar-track { background: var(--surface2); border-radius: 6px; }
.device-grid::-webkit-scrollbar-thumb { background: var(--secondary); border-radius: 6px; border: 2px solid var(--surface2); }
.device-grid::-webkit-scrollbar-thumb:hover { background: var(--primary); }
.device-grid { scrollbar-width: auto; scrollbar-color: var(--secondary) var(--surface2); }
/* Relative wrapper around the (horizontally scrolling) device grid so the scroll
arrows can float over the cards area, fixed to the region's viewport rather than
scrolling away with the content. */
.device-grid-wrap {
position: relative;
min-width: 0;
}
/* Floating left/right scroll arrows: semi-transparent dark circular buttons,
vertically centered, overlaid on the cards area. Toggled (via [hidden] in JS)
only when there's content to scroll toward in that direction. */
.device-grid-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
width: 40px;
height: 40px;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 50%;
background: rgba(20, 22, 28, 0.72);
color: var(--text, #e8e8e8);
font-size: 24px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
transition: background 0.15s ease, opacity 0.15s ease;
}
.device-grid-arrow:hover { background: rgba(40, 44, 54, 0.92); }
.device-grid-arrow[hidden] { display: none; }
.device-grid-arrow--left { left: 8px; }
.device-grid-arrow--right { right: 8px; }
.empty {
color: var(--muted);
text-align: center;
padding: 60px 20px;
width: 100%;
grid-column: 1 / -1;
}
.farm-header {
grid-column: 1 / -1;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
padding: 4px 2px 8px;
border-bottom: 1px solid var(--border);
margin-bottom: 4px;
}
/* ── Device card ─────────────────────────────────────────────────────────────── */
.device-card {
background: var(--surface);
border: none;
border-radius: var(--radius-md);
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
flex-shrink: 0;
width: calc(500px * var(--card-scale, 1));
height: calc(800px * var(--card-scale, 1));
}
.device-card.online:hover {
box-shadow: var(--shadow-sm);
transform: translateY(-1px);
}
.device-card.offline { opacity: 0.5; }
/* Per-user drag & drop grid ordering (farms/device-order.ts, pointer-event based). Only
the card header (the title zone) is the drag handle; the card being dragged dims while
the drop position updates live. user-select:none so grabbing the name to drag doesn't
start a text selection. */
.device-card__header { cursor: grab; user-select: none; }
.device-card.dragging { opacity: 0.4; }
.device-card.dragging .device-card__header { cursor: grabbing; }
/* Aggregator pending (not-yet-scanned) card: keep the QR crisp and scannable —
full opacity, white quiet zone around the code, padded off the card edges. */
.device-card--pending .device-card__player { padding: 14px; }
.agg-pending-qr {
width: 100%;
height: auto;
display: block;
background: #fff;
padding: 10px;
border-radius: 8px;
cursor: pointer;
}
.device-card__header {
width: 100%;
height: calc(52px * var(--card-scale, 1));
flex: 0 0 calc(52px * var(--card-scale, 1));
padding: 8px 12px 8px 16px;
display: flex;
align-items: center;
gap: 9px;
border-bottom: 1px solid var(--border);
}
.device-card__header .device-name {
font-size: 15px; /* slightly smaller so the subtitle fits under it */
flex: 1; /* standalone (pending/offline cards): fill the row */
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Name column: the device name plus an optional small clicker subtitle stacked under it. */
.device-card__header .device-name-wrap {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 1px;
line-height: 1.15;
}
/* Inside the column the name is a stacked row, not the flex filler. */
.device-card__header .device-name-wrap .device-name {
flex: none;
}
/* "App · task" of the running clicker, shown small + muted under the device name. */
.device-clicker-sub {
font-size: 10.5px;
font-weight: 500;
color: var(--green);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.device-card__player {
width: 100%;
flex: 1 1 0;
min-height: 0;
background: var(--surface2);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
}
.device-player-placeholder {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
color: var(--muted);
}
/* Only the direct lock-icon wrapper should be the big 44px glyph — use the
child combinator so it doesn't leak into nested button labels (Watch /
Force disconnect spans live inside .inuse-btn deeper in the tree). */
.device-player-placeholder > span { font-size: 44px; }
.device-player-placeholder strong { font-size: 13px; font-weight: 500; }
/* Connecting… spinner in the duo screen placeholder (stroked glyph, no emoji). */
.duo-spin { animation: duo-spin 0.9s linear infinite; transform-origin: 50% 50%; }
@keyframes duo-spin { to { transform: rotate(360deg); } }
/* Video-less (aggregator / adb-only) card: one-shot screen grab shown in the wrap,
with a Connect action in the placeholder and a floating Refresh over the image. */
.adb-connect-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border: 1px solid var(--border);
border-radius: 7px;
background: var(--surface);
color: var(--text);
font-size: 12px;
font-weight: 500;
cursor: pointer;
}
.adb-connect-btn:hover:not(:disabled) { border-color: var(--accent, #4b9fff); }
.adb-connect-btn:disabled { opacity: 0.5; cursor: default; }
.adb-connect-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.adb-screenshot { object-fit: contain; }
.adb-refresh-btn {
position: absolute;
top: 6px;
right: 6px;
background: rgba(0, 0, 0, 0.55);
border-radius: 6px;
}
/* "In use by" overlay actions: Watch + Force-disconnect as a matched pair of
compact icon buttons (icon inline with its caption). */
.inuse-actions {
margin-top: 8px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
/* Shared compact icon+caption button for both Watch and Force-disconnect.
Icon and label sit on a single horizontal row. */
.inuse-btn {
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 6px;
padding: 6px 12px;
background: transparent;
color: var(--muted);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 12px;
font-weight: 500;
line-height: 1.1;
font-family: inherit;
text-align: center;
white-space: nowrap;
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.inuse-btn:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.inuse-btn svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
/* Destructive variant (Force disconnect) — same shape, red accent. */
.inuse-btn--danger {
color: var(--red);
border-color: var(--red);
}
.inuse-btn--danger:hover {
background: rgba(238,56,78,0.12);
color: var(--red);
border-color: var(--red);
}
/* Top-bar variant: square icon-only button sitting next to .stream-btn. */
.watch-btn--top {
margin: 0 6px 0 0;
padding: 0;
width: 36px;
height: 36px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
color: var(--muted);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.watch-btn--top:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.watch-btn--top svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.watch-btn--top:disabled {
opacity: 0.5;
cursor: default;
background: transparent;
color: var(--muted);
}
/* Read-only co-view badge, overlaid on the watched stream. */
.stream-watch-badge {
position: absolute;
top: 8px;
left: 8px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 8px;
border-radius: var(--radius-sm);
background: rgba(0,0,0,0.6);
color: #fff;
font-size: 11px;
pointer-events: none;
}
.stream-watch-badge svg {
width: 14px;
height: 14px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
/* Operator-facing "someone is watching me" indicator: tinted to distinguish it
from the watcher's own read-only self-badge (which uses the plain dark style). */
.stream-watch-badge--observed {
background: rgba(217, 119, 6, 0.85);
}
/* Read-only lock indicator while the device's clicker is running (control refused
server-side). Tinted red so it reads as "hands off" vs the watching states. */
.stream-watch-badge--locked {
background: rgba(192, 57, 43, 0.9);
}
.stream-watch-badge--locked svg { fill: none; stroke: currentColor; }
/* The watcher's own "Watching (read-only)" self-badge — same prominent pill as the
lock badge, tinted blue so co-viewing reads distinctly from the red hands-off lock
and the amber "someone is watching me" indicator. */
.stream-watch-badge--watching {
background: rgba(37, 99, 235, 0.9);
}
.device-stream-stage {
width: 100%;
height: 100%;
min-height: 0;
display: flex;
align-items: stretch;
background: #000;
overflow: hidden;
}
/* The stage is focusable (tabIndex=0) so the keyboard forwards to the device;
suppress the focus ring so there's no outline around the device panel. */
.device-stream-stage:focus,
.device-stream-stage:focus-visible {
outline: none;
}
.device-stream-canvas-wrap {
position: relative;
flex: 1;
min-width: 0;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.device-stream-canvas {
display: block;
/* Fill the wrap and letterbox to the decoded frame's aspect ratio, so a
low-resolution stream (small maxSize) is scaled UP to fit instead of shown
tiny at native pixel size. Pointer→device mapping accounts for the contained
video rect — see canvasPoint() in stream-session.ts. */
width: 100%;
height: 100%;
object-fit: contain;
}
/* DuoPlus browser-share embed (duo device screen) — fills the canvas area. */
.duo-screen-frame {
width: 100%;
height: 100%;
border: 0;
display: block;
background: #000;
}
/* View-only (watch co-view or clicker-lock): no control, so the pointer over the
video shows not-allowed instead of the default interactive cursor. */
.device-stream-stage--readonly,
.device-stream-stage--readonly .device-stream-canvas {
cursor: not-allowed;
}
.device-stream-controls {
width: calc(48px * var(--card-scale, 1));
height: auto;
min-height: 0;
flex: 0 0 calc(48px * var(--card-scale, 1));
align-self: stretch;
padding: 8px 5px;
background: var(--surface);
border-left: 1px solid var(--border);
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
overflow: hidden;
}
.device-stream-controls .stream-control-btn {
width: calc(36px * var(--card-scale, 1));
height: calc(36px * var(--card-scale, 1));
}
.device-stream-controls .stream-control-btn svg {
width: calc(22px * var(--card-scale, 1));
height: calc(22px * var(--card-scale, 1));
}
.device-name {
font-weight: 600;
font-size: 13px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.device-model {
font-size: 11px;
color: var(--muted);
}
.device-udid {
font-size: 11px;
color: var(--muted);
font-family: ui-monospace, monospace;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.device-meta {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
color: var(--muted);
font-size: 11px;
}
.state-icon {
width: 24px;
height: 24px;
border: 1px solid currentColor;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
}
.state-icon svg {
width: 13px;
height: 13px;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.state-icon.state-online,
.state-icon.screen-awake {
color: var(--green);
}
.state-icon.state-offline,
.state-icon.screen-asleep,
.state-icon.screen-unknown {
color: var(--muted);
}
.device-telemetry {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 25px;
}
.telemetry-item {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 7px;
border: 1px solid var(--border);
border-radius: 999px;
color: var(--muted);
font-size: 10px;
line-height: 1;
}
.telemetry-item svg {
width: 13px;
height: 13px;
fill: none;
stroke: currentColor;
stroke-width: 1.35;
stroke-linecap: round;
stroke-linejoin: round;
}
.telemetry-item strong {
color: var(--text);
font-size: 10px;
}
.device-card__actions {
display: flex;
gap: 6px;
flex-shrink: 0;
}
.device-info-list {
display: grid;
gap: 8px;
}
.device-info-list > div {
display: grid;
grid-template-columns: 130px minmax(0, 1fr);
gap: 14px;
padding: 9px 0;
border-bottom: 1px solid var(--border);
}
.device-info-list span {
color: var(--muted);
}
.device-info-list strong {
min-width: 0;
overflow-wrap: anywhere;
font-weight: 500;
text-align: right;
}
.device-info-comment {
display: flex;
flex-direction: column;
gap: 6px;
padding: 10px 0 2px;
}
.device-info-comment > span {
color: var(--muted);
}
.device-info-comment__text {
margin: 0;
min-height: 18px;
overflow-wrap: anywhere;
white-space: pre-wrap;
font-weight: 500;
}
.device-badges { display: flex; gap: 5px; flex-wrap: wrap; }
.badge {
font-size: 10px;
font-weight: 500;
padding: 2px 8px;
border-radius: var(--radius-lg);
border: 1px solid currentColor;
}
.badge.state-online { color: var(--green); }
.badge.state-offline { color: var(--red); }
.badge.screen-awake { color: var(--green); }
.badge.screen-asleep,
.badge.screen-unknown { color: var(--muted); }
.status-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.status-dot--green { background: var(--green); box-shadow: 0 0 5px rgba(63,185,80,0.7); }
.status-dot--red { background: var(--red); box-shadow: 0 0 4px rgba(238,56,78,0.5); }
.stream-btn {
margin: 0;
padding: 0;
width: 30px;
height: 30px;
flex-shrink: 0;
background: var(--primary);
color: #fff;
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
font-size: 12px;
font-weight: 500;
font-family: inherit;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s, transform 0.1s;
}
.stream-btn svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.stream-btn:hover:not(:disabled) {
background: var(--primary-d);
transform: translateY(-1px);
}
.stream-btn:disabled {
background: var(--surface2);
color: var(--muted);
cursor: default;
}
.stream-controls__spacer { flex: 1; }
/* Faint separator that sets the clicker control group a bit apart from the meta
buttons above it (the flex gap already spaces siblings; this adds a hairline). */
.stream-controls__divider {
width: 60%;
height: 1px;
flex: 0 0 auto;
background: var(--border);
margin: 2px 0;
}
.stream-control-btn {
width: 40px;
height: 40px;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--text);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: color 0.15s, background 0.15s, transform 0.1s;
}
.stream-control-btn:hover {
color: var(--primary);
background: rgba(255, 255, 255, 0.07);
}
.stream-control-btn:active { transform: scale(0.94); }
/* Copy button: badge + glow when the device pushes a fresh clipboard value. */
.stream-clipboard-copy { position: relative; }
.stream-clipboard-copy.has-update {
color: var(--primary);
}
.stream-clipboard-copy.has-update::after {
content: "";
position: absolute;
top: 5px;
right: 5px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--primary);
box-shadow: 0 0 0 2px var(--surface);
animation: clip-pulse 1.4s ease-in-out infinite;
}
.stream-clipboard-copy.just-copied {
color: #34d399;
}
/* Transient action feedback for side-panel buttons (e.g. screenshot to clipboard). */
.stream-control-btn.flash-ok { color: #34d399; }
.stream-control-btn.flash-err { color: var(--red); }
/* Clicker Start/Stop toggle (device stream + duo cards): green while idle (Start ▷),
red while running (Stop ▢). When running the icon pulses so an active clicker is
obvious at a glance. Same class on every farm type's card. */
.duo-clicker,
.stream-clicker-toggle { color: var(--green); }
.duo-clicker:hover,
.stream-clicker-toggle:hover { color: var(--green); background: rgba(63, 185, 80, 0.14); }
.duo-clicker.is-running,
.stream-clicker-toggle.is-running { color: var(--red); }
.duo-clicker.is-running:hover,
.stream-clicker-toggle.is-running:hover { color: var(--red); background: rgba(238, 56, 78, 0.14); }
.duo-clicker.is-running svg,
.stream-clicker-toggle.is-running svg { animation: clicker-icon-pulse 1.2s ease-in-out infinite; }
@keyframes clicker-icon-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.82); }
}
/* Clicker launch panel (Clicker menu): Start is already green-filled, Stop red-filled.
Ring-pulse the Stop button while the clicker runs to echo the same "running" signal. */
.clicker-device--running .clicker-stop-btn:not(:disabled) {
animation: clicker-btn-pulse 1.3s ease-out infinite;
}
@keyframes clicker-btn-pulse {
0% { box-shadow: 0 0 0 0 rgba(238, 56, 78, 0.5); }
70% { box-shadow: 0 0 0 6px rgba(238, 56, 78, 0); }
100% { box-shadow: 0 0 0 0 rgba(238, 56, 78, 0); }
}
@keyframes clip-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.45; transform: scale(0.7); }
}
.stream-control-btn svg {
width: 25px;
height: 25px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.device-command-list {
display: grid;
gap: 8px;
}
.device-command-popover {
position: fixed;
z-index: 600;
width: min(300px, calc(100vw - 16px));
padding: 14px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow);
}
.device-command-popover__header {
display: grid;
gap: 2px;
margin-bottom: 12px;
}
.device-command-popover__header strong {
font-size: 13px;
}
.device-command-popover__header span {
color: var(--muted);
font-size: 11px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.device-command-btn {
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface2);
color: var(--text);
font: inherit;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
text-align: left;
}
.device-command-btn:hover:not(:disabled) {
border-color: var(--primary);
background: rgba(238, 56, 78, 0.08);
}
.device-command-btn:disabled {
opacity: 0.6;
cursor: default;
}
.device-command-btn svg {
width: 19px;
height: 19px;
flex: 0 0 19px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.device-command-btn--icon {
justify-content: center;
padding-inline: 12px;
}
.device-command-btn--danger {
color: var(--red);
border-color: rgba(238, 56, 78, 0.45);
}
.device-pin-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
}
.device-pin-row input {
min-width: 0;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface2);
color: var(--text);
font: inherit;
outline: none;
}
.device-pin-row input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(238, 56, 78, 0.12);
}
.device-brightness-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto auto;
align-items: center;
gap: 8px;
}
.device-brightness-row__icon {
display: inline-flex;
color: var(--muted);
}
.device-brightness-row__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.device-brightness-row input[type="range"] { min-width: 0; }
.device-brightness-row__val {
min-width: 38px;
text-align: right;
font-size: 12px;
color: var(--muted);
font-variant-numeric: tabular-nums;
}
.device-brightness-row .device-command-btn--icon { padding-inline: 10px; }
/* ── Apps list modal ─────────────────────────────────────────────────────────── */
.apps-list {
max-height: 400px;
overflow-y: auto;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
margin-bottom: 16px;
}
.app-list-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 14px;
border-bottom: 1px solid var(--border);
transition: background 0.1s;
}
.app-list-item:last-child { border-bottom: none; }
.app-list-item:hover { background: rgba(255, 255, 255, 0.03); }
.app-pkg-name {
flex: 1;
min-width: 0;
font-size: 12px;
font-family: ui-monospace, 'Cascadia Code', monospace;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.app-apk-btn {
flex-shrink: 0;
text-decoration: none;
color: var(--muted);
transition: color 0.15s, border-color 0.15s;
}
.app-apk-btn:hover {
color: var(--primary);
border-color: var(--primary);
}
/* ── ADB Shell modal ─────────────────────────────────────────────────────────── */
.shell-output {
font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
font-size: 12px;
line-height: 1.55;
background: var(--surface2);
color: #c8d3da;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 12px 14px;
height: 340px;
overflow-y: auto;
white-space: pre-wrap;
word-break: break-all;
margin-bottom: 10px;
}
.shell-input-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.shell-prompt {
font-family: ui-monospace, monospace;
font-size: 14px;
color: var(--green);
flex-shrink: 0;
font-weight: 600;
}
.shell-input {
flex: 1;
min-width: 0;
padding: 9px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface2);
color: var(--text);
font-family: ui-monospace, monospace;
font-size: 13px;
outline: none;
}
.shell-input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(238, 56, 78, 0.12);
}
.shell-input:disabled { opacity: 0.5; cursor: default; }
/* ── Users page ──────────────────────────────────────────────────────────────── */
.users-toolbar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 16px;
}
/* Multi-select team filter — a self-contained control: a muted "TEAMS" label
followed by a row of selectable pills. Shared by the Users, Farms and Clicker
lists (rendered by buildTeamFilter); styled once here so all three match. */
.team-filter {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
padding: 5px 12px 5px 14px;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface);
/* Standalone usage (Clicker page has no "+ Add" toolbar) — breathing room
above the list. In the Users/Farms toolbar this is reset (gap handles it). */
margin-bottom: 16px;
}
.team-filter__label {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.09em;
color: var(--muted);
padding-right: 10px;
border-right: 1px solid var(--border);
}
/* The pills themselves, grouped so they read as one unit and wrap together. */
.team-filter__chips {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
.team-filter__chip {
padding: 3px 12px;
border-radius: var(--radius-lg);
border: 1px solid var(--border);
background: var(--surface2);
font-size: 12px;
line-height: 1.5;
font-family: inherit;
cursor: pointer;
color: var(--muted);
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.team-filter__chip:hover {
color: var(--text);
border-color: var(--muted);
}
.team-filter__chip.is-active {
color: #fff;
background: var(--primary);
border-color: var(--primary);
}
.team-filter__chip.is-active:hover {
background: var(--primary-d);
border-color: var(--primary-d);
}
.users-toolbar .team-filter {
margin-bottom: 0;
}
/* Unified farm-list filter bar — search + online/type/version (+ team) controls,
shared by the Farms, Clicker and Remote ADB lists (built by buildFarmFilter).
Reuses the .team-filter__label / .team-filter__chip look so the groups match the
existing team pills. Collapses when empty (e.g. a list with no farms). */
.farm-filter {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px 18px;
padding: 8px 14px;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface);
margin-bottom: 16px;
}
.farm-filter:empty { display: none; }
.farm-filter__group {
display: inline-flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.farm-filter__search {
padding: 6px 12px;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text);
font-size: 13px;
font-family: inherit;
outline: none;
min-width: 180px;
transition: border-color 0.15s, box-shadow 0.15s;
}
.farm-filter__search:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(238,56,78,0.12);
}
.add-user-btn {
padding: 8px 18px;
background: var(--primary);
color: #fff;
border: none;
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 500;
font-family: inherit;
cursor: pointer;
transition: background 0.15s;
}
.add-user-btn:hover { background: var(--primary-d); }
.users-table {
width: 100%;
border-collapse: collapse;
background: var(--surface);
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.users-table th,
.users-table td {
padding: 12px 16px;
text-align: left;
font-size: 13px;
border-bottom: 1px solid var(--border);
}
.users-table th {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--muted);
background: var(--surface2);
}
.users-table tr:last-child td { border-bottom: none; }
.users-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.u-date { color: var(--muted); font-size: 12px; }
.u-farms { color: var(--muted); font-size: 12px; max-width: 260px; }
.u-actions { display: flex; gap: 6px; }
/* Two-column variant (e.g. the "Teams" table): let the name column take the
remaining width so the actions cell lines up at the right edge like the
wider users table. */
.users-table--2col td.u-login { width: 100%; }
.users-table--2col td.u-actions { justify-content: flex-end; }
.tbl-btn {
padding: 4px 12px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: none;
font-size: 12px;
font-family: inherit;
cursor: pointer;
color: var(--muted);
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.tbl-btn.edit-btn:hover { color: var(--text); border-color: var(--text); background: rgba(255,255,255,0.05); }
.tbl-btn.delete-btn:hover { color: var(--red); border-color: var(--red); background: rgba(238,56,78,0.08); }
.role-badge {
font-size: 10px;
font-weight: 500;
padding: 2px 8px;
border-radius: var(--radius-lg);
border: 1px solid currentColor;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.role-badge.role-admin { color: var(--primary); }
.role-badge.role-senior_operator { color: var(--secondary); }
.role-badge.role-operator { color: var(--secondary); }
/* Team/group pill on farm rows (Farms + Clicker lists), styled like .role-badge. */
.team-badge {
font-size: 10px;
font-weight: 500;
padding: 2px 8px;
border-radius: var(--radius-lg);
border: 1px solid currentColor;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--secondary);
white-space: nowrap;
}
.team-badge--empty {
color: var(--muted);
border-color: transparent;
}
/* Subtle "VMOS" tag on a farm row; regular farms get no badge. */
.farm-type-badge {
font-size: 10px;
font-weight: 600;
padding: 2px 8px;
border-radius: var(--radius-lg);
border: 1px solid currentColor;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--primary);
white-space: nowrap;
}
/* Baked image-version tag on a farm row. Muted by default; turns to an accent
"update available" style when a newer image is published on Docker Hub. */
.farm-version-badge {
font-size: 10px;
font-weight: 600;
padding: 2px 8px;
border-radius: var(--radius-lg);
border: 1px solid currentColor;
letter-spacing: 0.04em;
color: var(--muted);
white-space: nowrap;
}
.farm-version-badge--update {
color: var(--green);
}
.active-badge {
font-size: 11px;
padding: 2px 8px;
border-radius: var(--radius-lg);
border: 1px solid currentColor;
}
.active-badge.active { color: var(--green); }
.active-badge.inactive { color: var(--muted); }
/* ── Modal ───────────────────────────────────────────────────────────────────── */
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 400;
}
.modal-backdrop.hidden { display: none; }
.modal {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 28px;
width: min(420px, 90vw);
box-shadow: var(--shadow);
}
.modal--wide {
width: min(880px, 96vw);
max-height: 90vh;
overflow-y: auto;
}
.modal__title {
font-size: 16px;
font-weight: 600;
margin-bottom: 20px;
}
.modal__text {
font-size: 14px;
color: var(--muted);
margin-bottom: 20px;
line-height: 1.6;
}
.modal__form { display: flex; flex-direction: column; gap: 14px; }
.modal__field { display: flex; flex-direction: column; gap: 6px; }
.modal__field label {
font-size: 12px;
color: var(--muted);
font-weight: 500;
}
.modal__hint { font-size: 11px; color: var(--muted); font-weight: 400; }
.modal__field input,
.modal__field select {
padding: 9px 12px;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text);
font-size: 13px;
font-family: inherit;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
}
.modal__field select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-right: 34px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
}
.modal__field input:focus,
.modal__field select:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(238,56,78,0.12);
}
.modal__field select option { background: var(--surface2); }
.modal__textarea {
padding: 9px 12px;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text);
font-size: 13px;
font-family: inherit;
outline: none;
resize: vertical;
min-height: 80px;
transition: border-color 0.15s, box-shadow 0.15s;
}
.modal__textarea:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(238,56,78,0.12);
}
.farm-assignment.hidden { display: none; }
.farm-assignment__list {
display: grid;
gap: 6px;
max-height: 170px;
overflow-y: auto;
padding: 8px;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.farm-assignment__item {
display: flex;
align-items: center;
gap: 9px;
padding: 6px 7px;
border-radius: 6px;
color: var(--text);
cursor: pointer;
}
.farm-assignment__item:hover {
background: rgba(255, 255, 255, 0.05);
}
.farm-assignment__item input {
width: 16px;
height: 16px;
accent-color: var(--primary);
}
.farm-assignment__empty {
padding: 6px;
color: var(--muted);
font-size: 12px;
}
.modal__row {
display: flex;
gap: 14px;
}
.modal__row .modal__field { flex: 1; }
.modal__field--toggle {
justify-content: space-between;
flex-direction: column;
}
.modal__error {
font-size: 12px;
color: var(--red);
padding: 8px 12px;
background: rgba(238,56,78,0.1);
border: 1px solid rgba(238,56,78,0.25);
border-radius: var(--radius-sm);
}
.modal__actions {
display: flex;
gap: 10px;
justify-content: flex-end;
margin-top: 4px;
}
.modal__cancel {
padding: 9px 18px;
background: none;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--muted);
font-size: 13px;
font-family: inherit;
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
}
.modal__cancel:hover { color: var(--text); border-color: var(--muted); }
.modal__submit {
padding: 9px 20px;
background: var(--primary);
color: #fff;
border: none;
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 500;
font-family: inherit;
cursor: pointer;
transition: background 0.15s;
}
.modal__submit:hover:not(:disabled) { background: var(--primary-d); }
.modal__submit:disabled { opacity: 0.6; cursor: default; }
.modal__submit--danger { background: #c0392b; }
.modal__submit--danger:hover:not(:disabled) { background: #a93226; }
/* ── Toggle switch ───────────────────────────────────────────────────────────── */
.toggle {
display: inline-flex;
align-items: center;
cursor: pointer;
user-select: none;
margin-top: 4px;
}
.toggle input { display: none; }
.toggle__track {
position: relative;
width: 40px;
height: 22px;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 100vw;
transition: background 0.2s, border-color 0.2s;
}
.toggle__track::after {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 14px;
height: 14px;
background: var(--muted);
border-radius: 50%;
transition: transform 0.2s, background 0.2s;
}
.toggle input:checked + .toggle__track {
background: rgba(63,185,80,0.2);
border-color: var(--green);
}
.toggle input:checked + .toggle__track::after {
transform: translateX(18px);
background: var(--green);
}
/* ── Login ───────────────────────────────────────────────────────────────────── */
.login-wrap {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: var(--bg);
}
.login-card {
position: relative;
width: 380px;
padding: 0 2rem 2.5rem;
background: var(--surface);
border-radius: var(--radius-md);
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
align-items: center;
}
.login-theme-toggle {
position: absolute;
top: 14px;
right: 14px;
z-index: 1;
}
.login-brand-wrap {
margin-top: -28px;
margin-bottom: 20px;
}
.login-brand-icon {
width: 56px;
height: 56px;
background: var(--primary);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
box-shadow: 0 4px 16px rgba(238, 56, 78, 0.45);
}
.login-title {
font-size: 22px;
font-weight: 600;
margin-bottom: 4px;
}
.login-subtitle {
font-size: 12px;
color: var(--muted);
margin-bottom: 28px;
}
.login-form {
width: 100%;
display: flex;
flex-direction: column;
gap: 18px;
}
.login-field { display: flex; flex-direction: column; gap: 6px; }
.login-field label {
font-size: 12px;
color: var(--muted);
font-weight: 500;
}
.login-field input {
padding: 10px 14px;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text);
font-size: 14px;
font-family: inherit;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
}
.login-field input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(238, 56, 78, 0.15);
}
.login-error {
font-size: 12px;
color: var(--red);
padding: 8px 12px;
background: rgba(238, 56, 78, 0.1);
border: 1px solid rgba(238, 56, 78, 0.25);
border-radius: var(--radius-sm);
}
.login-btn {
width: 100%;
padding: 11px;
background: var(--primary);
color: #fff;
border: none;
border-radius: var(--radius-sm);
font-size: 14px;
font-weight: 500;
font-family: inherit;
cursor: pointer;
margin-top: 4px;
transition: background 0.15s, transform 0.1s;
}
.login-btn:hover:not(:disabled) {
background: var(--primary-d);
transform: translateY(-1px);
}
.login-btn:disabled {
opacity: 0.6;
cursor: default;
}
.totp-qr {
width: 180px;
height: 180px;
border-radius: var(--radius-sm);
background: #fff;
padding: 8px;
align-self: center;
margin-bottom: 8px;
}
/* ── Farm key cell ─────────────────────────────────────────────────────────── */
.farm-key-cell {
display: flex;
align-items: center;
gap: 6px;
max-width: 260px;
}
.farm-key-text {
font-family: monospace;
font-size: 11px;
color: var(--muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
}
/* ── Launch config block ───────────────────────────────────────────────────── */
.launch-block {
position: relative;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 12px 80px 12px 14px;
margin-top: 6px;
}
.launch-pre {
margin: 0;
font-family: monospace;
font-size: 12px;
color: var(--text);
white-space: pre-wrap;
word-break: break-all;
}
.launch-block .copy-key-btn {
position: absolute;
top: 8px;
right: 8px;
white-space: nowrap;
}
/* ── User avatar / dropdown ──────────────────────────────────────────────────── */
.user-avatar-wrap {
position: relative;
}
.user-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--primary);
color: #fff;
font-size: 14px;
font-weight: 600;
font-family: inherit;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: box-shadow 0.15s, transform 0.1s;
flex-shrink: 0;
}
.user-avatar:hover {
box-shadow: 0 0 0 3px rgba(238, 56, 78, 0.3);
transform: scale(1.06);
}
.user-menu {
position: absolute;
top: calc(100% + 10px);
right: 0;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow);
min-width: 190px;
z-index: 500;
overflow: hidden;
}
.user-menu.hidden { display: none; }
.user-menu__header {
padding: 14px 16px 12px;
}
.user-menu__name {
font-size: 13px;
font-weight: 600;
color: var(--text);
}
.user-menu__role {
font-size: 10px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-top: 3px;
}
.user-menu__divider {
height: 1px;
background: var(--border);
}
.user-menu__item {
display: block;
width: 100%;
padding: 11px 16px;
text-align: left;
background: none;
border: none;
color: var(--text);
font-size: 13px;
font-family: inherit;
cursor: pointer;
transition: background 0.15s;
}
.user-menu__item:hover { background: rgba(255, 255, 255, 0.05); }
.user-menu__item--danger:hover {
background: rgba(238, 56, 78, 0.08);
color: var(--red);
}
/* ── Farm settings button ────────────────────────────────────────────────────── */
.farm-settings-btn {
margin-left: auto;
display: flex;
align-items: center;
gap: 6px;
color: var(--muted);
border-color: var(--border);
}
.farm-settings-btn:hover {
color: var(--text);
border-color: var(--text);
background: rgba(255, 255, 255, 0.05);
}
/* ── Access matrix ───────────────────────────────────────────────────────────── */
.access-matrix-wrap {
overflow-x: auto;
max-height: 55vh;
overflow-y: auto;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
margin-bottom: 16px;
}
.access-matrix {
border-collapse: collapse;
font-size: 12px;
white-space: nowrap;
width: 100%;
}
.access-matrix thead {
position: sticky;
top: 0;
background: var(--surface);
z-index: 1;
}
.access-matrix th,
.access-matrix td {
padding: 8px 10px;
border-bottom: 1px solid var(--border);
text-align: center;
}
.access-matrix th:first-child,
.access-matrix td:first-child {
text-align: left;
position: sticky;
left: 0;
background: var(--surface);
border-right: 1px solid var(--border);
min-width: 120px;
}
.access-matrix thead th:first-child {
z-index: 2;
}
.access-matrix tbody tr:last-child td {
border-bottom: none;
}
.access-matrix tbody tr:hover td {
background: rgba(255, 255, 255, 0.03);
}
.access-matrix tbody tr:hover td:first-child {
background: var(--surface);
}
.access-matrix__user {
font-weight: 500;
color: var(--text);
}
/* ── Farm settings page (full-page, tabbed) ─────────────────────────── */
.settings-title {
font-size: 16px;
font-weight: 600;
margin: 0;
color: var(--text);
}
.settings-tabs {
display: flex;
gap: 4px;
border-bottom: 1px solid var(--border);
margin-bottom: 18px;
}
.settings-tab {
background: none;
border: none;
border-bottom: 2px solid transparent;
color: var(--muted);
font-family: inherit;
font-size: 13px;
padding: 9px 14px;
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
display: inline-flex;
align-items: center;
gap: 7px;
}
.settings-tab svg {
width: 15px;
height: 15px;
flex: 0 0 15px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.settings-tab:hover {
color: var(--text);
}
.settings-tab.active {
color: var(--text);
border-bottom-color: var(--primary);
}
.settings-panel {
max-width: 760px;
}
/* Launch / Setup sub-tab switcher (Standard farm vs VMOS device). Styled like the
main settings tab strip but a touch tighter, and works inside a modal too. */
.launch-subtabs {
display: flex;
gap: 4px;
border-bottom: 1px solid var(--border);
margin-bottom: 14px;
}
.launch-subtab {
background: none;
border: none;
border-bottom: 2px solid transparent;
color: var(--muted);
font-family: inherit;
font-size: 13px;
padding: 8px 12px;
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
}
.launch-subtab:hover {
color: var(--text);
}
.launch-subtab.active {
color: var(--text);
border-bottom-color: var(--primary);
}
/* Table-driven panels (e.g. the Users page) span the full content width like the
farm grid, rather than the narrow form width used by the settings forms. */
.settings-panel--wide {
max-width: none;
}
/* ── Farm Health dashboard ─────────────────────────────────────────────── */
.health-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 10px;
margin: 14px 0 20px;
}
.health-stat {
display: flex;
flex-direction: column;
gap: 4px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface2);
}
.health-stat__label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--muted);
}
.health-stat__value {
font-size: 15px;
font-weight: 600;
color: var(--text);
}
.health-chart {
margin-bottom: 18px;
}
.health-chart__title {
font-size: 12px;
color: var(--muted);
margin-bottom: 6px;
}
.health-chart__unit {
opacity: 0.6;
}
.health-canvas {
width: 100%;
height: 120px;
display: block;
}
.settings-hint {
font-size: 12px;
color: var(--muted);
margin: 0 0 14px;
}
.settings-actions {
margin-top: 14px;
}
.access-loading {
padding: 20px 0;
text-align: center;
color: var(--muted);
}
.settings-section {
padding: 16px 0;
border-bottom: 1px solid var(--border);
}
.settings-section:last-of-type {
border-bottom: none;
}
.settings-section__title {
font-size: 13px;
margin: 0 0 10px;
color: var(--text);
}
.farm-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
/* Full-page add/edit user form (replaces the old modal). Fluid width: uses the
available content width up to a readable cap instead of a fixed max-width, so it
doesn't pin to a narrow column on the left of wide screens. */
.user-form-page {
width: min(100%, 640px);
padding: 18px 2px 32px;
}
.user-form-page .modal__form { gap: 14px; }
/* Inputs/selects already stretch to their column; let them use the full width. */
.user-form-page .modal__field { min-width: 0; }
/* Role / Active row: fluid two-up that collapses to one column when the row gets
too narrow, so the controls never overflow horizontally. */
.user-form-page .modal__row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
gap: 14px;
align-items: end;
}
.settings-toggle {
display: flex;
gap: 9px;
align-items: center;
cursor: pointer;
font-size: 13px;
color: var(--text);
margin: 0 0 8px;
}
.settings-toggle input {
width: 16px;
height: 16px;
accent-color: var(--primary);
cursor: pointer;
flex: none;
}
.settings-rename {
display: flex;
gap: 8px;
align-items: center;
}
.settings-input {
flex: 1;
max-width: 280px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text);
font-family: inherit;
font-size: 13px;
padding: 8px 12px;
}
.settings-input:focus {
outline: none;
border-color: var(--primary);
}
.settings-name,
.settings-duo-key {
width: 100%;
max-width: 600px;
}
.settings-server-form,
.settings-telegram-form {
display: flex;
flex-direction: column;
gap: 16px;
max-width: 420px;
}
.settings-server-form .settings-input,
.settings-telegram-form .settings-input {
max-width: none;
}
/* Compact, horizontally laid-out per-farm clicker config form. Fluid width:
uses the available content width up to a readable cap, then collapses its
auto-fit columns to a single column as the viewport narrows. */
.clicker-config-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
gap: 14px 24px;
width: min(100%, 880px);
align-items: start;
}
.clicker-config-grid .modal__field { min-width: 0; gap: 3px; }
/* Reserve a line-and-a-bit for every label so a wrapped one doesn't push its input
out of alignment with the neighbouring column, while keeping the label close to
its input. */
.clicker-config-grid .modal__field label { min-height: 1.4em; }
.clicker-config-grid .settings-input {
max-width: none;
width: 100%;
}
.clicker-config-grid__full {
grid-column: 1 / -1;
justify-self: start;
margin-top: 4px;
}
/* Per-farm clicker device list. Fluid grid: a single column on narrow
screens, flowing into multiple columns as the viewport widens so wide
screens use the available space instead of one cramped left column. */
.clicker-device-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
gap: 10px;
align-items: start;
width: min(100%, 1320px);
}
.clicker-device-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
}
.clicker-device-row__name { font-weight: 600; color: var(--text); }
.clicker-device-row__meta {
margin-left: auto;
font-size: 13px;
color: var(--secondary);
}
/* Expandable per-device launch panel */
.clicker-device {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
overflow: hidden;
}
.clicker-device .clicker-device-row {
background: transparent;
border: 0;
border-radius: 0;
}
.clicker-device-row--toggle { cursor: pointer; }
.clicker-device-row--toggle:hover { background: var(--surface-hover, rgba(255, 255, 255, 0.03)); }
.clicker-device-row__chevron {
font-size: 18px;
color: var(--secondary);
transition: transform 0.15s ease;
}
.clicker-device--open .clicker-device-row__chevron { transform: rotate(90deg); }
/* Name + the running clicker's "App · task" subtitle, stacked in the compact row
(mirrors the device card header's name-wrap). The subtitle (.device-clicker-sub)
only renders while a clicker runs, so an idle row stays a single line. */
.clicker-device-row__name-wrap {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.clicker-device__panel {
padding: 14px;
border-top: 1px solid var(--border);
}
/* Remote-ADB device page: full-width rows, one per line. Each row is a 3-column
grid — status dot | name/udid column (flexes, min 0 so it can ellipsis) | ADB
controls (natural width so the `adb connect …` command is never clipped). The
name column and the controls cluster live in separate grid tracks, so the name
and the endpoint command can never overlap. */
/* Remote ADB page wrapper. Caps the content to a readable width so the farm list
and device rows don't stretch edge-to-edge on wide monitors. Left-aligned like
the rest of the app; the same cap applies to both the farm list and the device
list so the two pages line up. Keeps the content area's horizontal padding. */
.adb-page {
width: min(100%, 1200px);
}
/* Farm-list variant: spans the full content width (like the Farms landing page),
so the farm rows reach the right edge. The device page keeps the capped
.adb-page above. */
.adb-page--full {
width: 100%;
max-width: none;
}
.adb-device-list {
display: flex;
flex-direction: column;
gap: 6px;
/* Fills the capped .adb-page wrapper; rows line up with the farm rows. */
max-width: none;
}
.adb-device-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 16px;
/* Match the farm row exactly. A farm row (.clicker-farm-row) has no explicit
height, so its height is 12px+12px padding + its content line box (the name
span at 14px font × 1.5 line-height = 21px) = 45px. Mirror that padding and
pin the same 45px via min-height so the row lines up regardless of the
right-side controls. The button rules below keep those controls within the
21px content line so they never push past 45px. */
padding: 12px 16px;
min-height: 45px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
}
/* Constrain the Copy (.tbl-btn) and Disable (.modal__submit) buttons so they are
no taller than the farm row's 21px content line box; otherwise their own
padding (esp. .modal__submit's 9px) would inflate the device row above 45px.
Scoped to .adb-device-row so buttons everywhere else keep their normal size. */
.adb-device-row .tbl-btn,
.adb-device-row .modal__submit {
height: 21px;
padding-top: 0;
padding-bottom: 0;
display: inline-flex;
align-items: center;
line-height: 1;
}
.adb-device-name {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
min-width: 0;
}
/* Name (bold) then the udid subtitle inline right after it; truncate rather than
wrap into the controls column. The udid takes only the space it needs so the
name stays visible. */
.adb-device-name .clicker-device-row__name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
flex: 0 1 auto;
line-height: 1.2;
}
.adb-device-name .settings-hint {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
flex: 0 1 auto;
/* Drop the paragraph margin inherited from the global .settings-hint and match
the name's line-height so the udid sits centered on the same line, not high. */
margin: 0;
line-height: 1.2;
}
.adb-device-name .settings-hint code {
line-height: 1.2;
}
.adb-device-controls {
display: flex;
align-items: center;
gap: 12px;
justify-content: flex-end;
}
.adb-endpoint {
display: inline-flex;
align-items: center;
gap: 8px;
}
/* The `adb connect host:port` command: monospace, allowed to take the width it
needs (its column is sized to content), so it is never clipped. */
.adb-endpoint code {
white-space: nowrap;
}
.clicker-device-form {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
gap: 12px 20px;
align-items: start;
}
.clicker-device-form .modal__field { min-width: 0; }
.clicker-device-form .settings-input { max-width: none; width: 100%; }
.clicker-device-form__actions {
grid-column: 1 / -1;
display: flex;
gap: 10px;
margin-top: 4px;
}
.clicker-device-form .req { color: var(--danger, #e5484d); }
.clicker-device-form .dc-error { grid-column: 1 / -1; }
.clicker-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border: none;
border-radius: 8px;
cursor: pointer;
color: #fff;
background: var(--success, #3ad29f);
}
.clicker-icon-btn:hover:not(:disabled) { filter: brightness(1.08); }
.clicker-icon-btn--danger { background: #c0392b; }
.clicker-icon-btn--neutral { background: #5a6573; }
.clicker-icon-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.clicker-icon-btn svg { display: block; }
/* Clicker log viewer */
.clicker-log-toolbar {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 8px;
}
.clicker-log-toolbar .clicker-log-filter { flex: 1; min-width: 0; }
.clicker-log-follow {
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
font-size: 0.85em;
}
.clicker-log-count {
font-size: 0.8em;
opacity: 0.7;
white-space: nowrap;
}
.clicker-log-output {
max-height: 60vh;
min-height: 240px;
overflow: auto;
white-space: pre-wrap;
word-break: break-word;
}
/* Clicker log viewer at 90% of the screen: a flex column whose output fills the
space between the toolbar and the actions. */
.modal--clicker-log {
width: 90vw;
height: 90vh;
max-height: 90vh;
display: flex;
flex-direction: column;
}
.modal--clicker-log .clicker-log-output {
flex: 1 1 auto;
max-height: none;
}
.modal--clicker-log .modal__actions { margin-top: 12px; }
/* Operations registry popup: reuses the clicker-log 90vw/90vh chrome, but the middle
region is a scrollable table (not a ) that flex-fills between toolbar and actions. */
.clicker-ops-toolbar {
display: flex;
align-items: flex-end;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 8px;
}
.clicker-ops-toolbar .ops-filter {
display: inline-flex;
flex-direction: column;
gap: 2px;
font-size: 0.78em;
opacity: 0.85;
white-space: nowrap;
}
.clicker-ops-toolbar .ops-filter .settings-input { margin: 0; }
.clicker-ops-spacer { flex: 1 1 auto; }
.clicker-ops-page { font-size: 0.8em; opacity: 0.75; white-space: nowrap; }
.modal--clicker-ops .clicker-ops-table-wrap {
flex: 1 1 auto;
overflow: auto;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.clicker-ops-table td { white-space: nowrap; }
/* Data cells read left-aligned (unlike the centered access-matrix default). */
.clicker-ops-table th,
.clicker-ops-table td { text-align: left; }
.ops-pill {
display: inline-block;
padding: 1px 8px;
border-radius: 999px;
font-size: 0.75em;
border: 1px solid transparent;
}
.ops-pill--ok { color: var(--green, #2ecc71); border-color: rgba(46,204,113,0.4); background: rgba(46,204,113,0.10); }
.ops-pill--fail { color: var(--red); border-color: rgba(238,56,78,0.4); background: rgba(238,56,78,0.10); }
.ops-pill--warn { color: #f5a623; border-color: rgba(245,166,35,0.4); background: rgba(245,166,35,0.10); }
.ops-pill--muted { color: #9aa4b2; border-color: rgba(154,164,178,0.35); background: rgba(154,164,178,0.08); }
.ops-pill--na { opacity: 0.5; }
/* Farm terminal tab: a read-only dark OUTPUT box (scrollback) with a SEPARATE
standalone command input row below it. The output box only displays past
commands and their results; typing happens in the distinct input row, not
inside the terminal. This tab breaks out of the narrow .settings-panel form
width and fills the full content area. The override is scoped to the panel
that contains .farm-term, so it does not affect the other (form-style)
settings tabs. */
.settings-panel:has(.farm-term) {
max-width: none;
/* No own padding/margin so the terminal surface runs edge-to-edge of the
content box (which already supplies the page's 24px gutter). */
padding: 0;
margin: 0;
width: 100%;
display: flex;
flex-direction: column;
}
.farm-term {
position: relative;
/* The output box itself does not scroll; its scrollback child does. */
display: flex;
flex-direction: column;
width: 100%;
/* Fill the remaining vertical space of the tab so the console is tall. */
min-height: 64vh;
max-height: 72vh;
font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
font-size: 0.85em;
line-height: 1.45;
overflow: hidden;
padding: 12px 14px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface2, #161b1e);
color: var(--text, #ebebeb);
}
/* The scrollback is the scroll container. Wide tabular output (docker ps, ls -l)
keeps its columns aligned and scrolls horizontally instead of wrapping
mid-row — like a real terminal. A small right safe-area keeps the first lines
clear of the floating Clear icon in the top-right corner. */
.farm-term__scrollback {
flex: 1 1 auto;
min-height: 0;
overflow: auto;
white-space: pre;
padding-right: 30px;
}
/* Standalone command input row, visually distinct from the dark output box: a
light/standard bordered input with a leading $ sign and a Run button. */
.farm-term-cmd {
display: flex;
align-items: stretch;
gap: 8px;
width: 100%;
margin-top: 10px;
}
.farm-term-cmd__sign {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
font-weight: 700;
color: var(--primary);
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface, #fff);
}
.farm-term-cmd__sign--busy {
opacity: 0.5;
}
.farm-term-cmd__input {
flex: 1 1 auto;
min-width: 0;
font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
font-size: 0.9em;
padding: 8px 10px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface, #fff);
color: var(--text);
}
.farm-term-cmd__input:focus {
outline: none;
border-color: var(--primary);
}
.farm-term-cmd__input:disabled {
opacity: 0.6;
}
.farm-term-cmd__run {
flex: 0 0 auto;
}
/* Small ghost icon button floating in the top-right corner of the surface.
It floats over the scrollback (z-index) without spanning the width or
pushing the content down. The surface is position:relative (set above). */
.farm-term__clear {
position: absolute;
top: 8px;
right: 8px;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 27px;
height: 27px;
padding: 0;
color: var(--text, #ebebeb);
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--border);
border-radius: 5px;
opacity: 0.45;
cursor: pointer;
transition: opacity 0.12s, background 0.12s;
}
.farm-term__clear svg {
width: 15px;
height: 15px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.farm-term__clear:hover {
opacity: 1;
background: rgba(255, 255, 255, 0.12);
}
.farm-term__block {
display: block;
}
.farm-term__block + .farm-term__block {
margin-top: 2px;
}
.farm-term__block--cmd {
color: var(--accent, #6ea8fe);
font-weight: 600;
margin-top: 8px;
}
.farm-term__block--cmd:first-child {
margin-top: 0;
}
.farm-term__block--stderr {
color: #f0a36b;
}
.farm-term__block--error {
color: #ee384e;
}
.farm-term__block--pending {
opacity: 0.6;
font-style: italic;
}
.farm-term__block--meta {
opacity: 0.6;
font-size: 0.92em;
}
.farm-term__block--meta-bad {
color: #ee384e;
font-size: 0.92em;
}
.farm-term__label {
opacity: 0.8;
}
.access-matrix__cell input[type="checkbox"] {
width: 15px;
height: 15px;
cursor: pointer;
accent-color: var(--primary);
}
/* ── Clicker code / runner code (settings → Code & Clicker Runner tabs) ────── */
/* The Versions/Farms/Runner tables carry action buttons and are much wider than
the narrow settings form column, so these panels break out of .settings-panel's
760px cap and let their tables span the full content width. The upload form and
the "how it works" block stay readable at the normal form width. Scoped via
:has(.cc-list)/:has(.rc-list) so it only affects the Code and Clicker Runner
tabs, not the other settings tabs. */
.settings-panel:has(.cc-list),
.settings-panel:has(.rc-list) { max-width: none; }
.settings-panel:has(.cc-list) .settings-code-form,
.settings-panel:has(.cc-list) .cc-howto,
.settings-panel:has(.rc-list) .settings-code-form,
.settings-panel:has(.rc-list) .cc-howto { max-width: 760px; }
.cc-list .access-matrix,
.cc-farms .access-matrix,
.rc-list .access-matrix,
.rc-status .access-matrix { white-space: nowrap; width: 100%; }
/* Keep the actions cell a normal table-cell (NOT display:flex) so its bottom border
spans the full column width and the row separators stay aligned, even when the
cell is empty (e.g. a baked farm with no Reset button). */
.cc-actions { white-space: nowrap; text-align: left; }
.cc-actions .modal__submit { padding: 6px 12px; font-size: 12px; }
.cc-actions .modal__submit + .modal__submit { margin-left: 6px; }
.cc-badge {
display: inline-block;
padding: 1px 7px;
border-radius: 10px;
font-size: 11px;
font-weight: 600;
vertical-align: middle;
}
.cc-badge--current { color: var(--primary); border: 1px solid var(--primary); }
.cc-badge--ok { color: var(--green); border: 1px solid var(--green); }
.cc-badge--drift { color: #d29922; border: 1px solid #d29922; }
/* ── Clicker code: "how it works" instruction block ──────────────────────── */
/* Collapsible "How it works" — native /. Collapsed by default
(no [open] attribute); the marker rotates when expanded. */
.cc-howto__summary {
cursor: pointer;
user-select: none;
list-style: none;
display: flex;
align-items: center;
gap: 6px;
margin: 0;
}
.cc-howto__summary::-webkit-details-marker { display: none; }
.cc-howto__summary::before {
content: "▸";
font-size: 11px;
color: var(--text-muted, #888);
transition: transform 0.12s ease;
}
.cc-howto[open] > .cc-howto__summary { margin-bottom: 10px; }
.cc-howto[open] > .cc-howto__summary::before { transform: rotate(90deg); }
.cc-howto__steps {
margin: 4px 0 14px;
padding-left: 20px;
line-height: 1.6;
}
.cc-howto__steps li { margin-bottom: 4px; }
.cc-howto__legend {
margin: 6px 0 12px;
padding-left: 18px;
line-height: 1.7;
list-style: none;
}
.cc-howto__legend li { margin-bottom: 4px; }
.cc-howto__legend .status-dot { margin-right: 4px; }
.cc-howto code {
padding: 1px 5px;
border-radius: 4px;
background: var(--surface-2, rgba(127, 127, 127, 0.15));
font-size: 12px;
}
/* ── Clicker info modal (from the device-card running indicator) ──────────── */
.clicker-info-status {
display: inline-block;
margin-bottom: 12px;
padding: 2px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
color: var(--secondary);
border: 1px solid var(--border);
}
.clicker-info-status.is-running { color: var(--green); border-color: var(--green); }
.clicker-info-row {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 7px 0;
border-bottom: 1px solid var(--border);
}
.clicker-info-row:last-child { border-bottom: 0; }
.clicker-info-row__label { color: var(--secondary); }
.clicker-info-row__value { font-weight: 600; color: var(--text); text-align: right; word-break: break-all; }
.clicker-info-logs { display: inline-flex; align-items: center; gap: 6px; background: var(--surface2, #2a2f37); }
.clicker-info-logs:hover:not(:disabled) { background: var(--surface-hover, #343b45); }
/* ── Guest share links (device-share-modal) ────────────────────────────────── */
.share-create {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 12px;
margin: 14px 0 4px;
}
.share-create .modal__field { flex: 1 1 160px; margin: 0; }
.share-create__ttl { flex: 0 0 auto; }
.share-ttl-picker { display: flex; gap: 8px; }
.share-ttl-picker input { width: 90px; }
.share-ttl-picker select { width: auto; }
.share-create__check {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--muted);
font-size: 13px;
white-space: nowrap;
padding-bottom: 8px;
}
.share-list {
max-height: 320px;
overflow-y: auto;
margin-top: 14px;
border-top: 1px solid var(--border);
}
.share-row {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px 2px;
border-bottom: 1px solid var(--border);
}
.share-row:last-child { border-bottom: 0; }
.share-row__main { flex: 1 1 auto; min-width: 0; }
.share-row__title {
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
color: var(--text);
}
.share-row__status { font-weight: 400; font-size: 12px; color: var(--muted); }
.share-row__tag {
font-size: 11px;
font-weight: 600;
padding: 1px 7px;
border-radius: 999px;
border: 1px solid var(--border);
color: var(--green);
}
.share-row__meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.share-row__url {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11px;
color: var(--muted);
margin-top: 4px;
word-break: break-all;
}
.share-row__actions { display: flex; gap: 6px; flex: 0 0 auto; }
/* ── Guest share page (/s/) ─────────────────────────────────────────── */
/* Standalone page: no sidebar, no panel chrome — sized to the viewport so a phone
shows the device screen full-height with the controls pinned below it. */
.guest-page {
position: fixed;
inset: 0;
display: flex;
flex-direction: column;
background: var(--bg);
color: var(--text);
}
.guest-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 14px;
border-bottom: 1px solid var(--border);
background: var(--surface);
}
.guest-header__name { font-weight: 600; }
.guest-header__ttl { font-size: 12px; color: var(--muted); }
.guest-stage {
position: relative;
flex: 1 1 auto;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--surface2);
}
.guest-canvas {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.guest-status {
position: absolute;
padding: 8px 16px;
border-radius: var(--radius-sm);
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 13px;
text-align: center;
}
.guest-nav {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-top: 1px solid var(--border);
background: var(--surface);
/* Keep the buttons clear of the iOS home indicator. */
padding-bottom: max(10px, env(safe-area-inset-bottom));
}
.guest-nav__spacer { flex: 1 1 auto; }
.guest-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-width: 44px;
height: 44px;
padding: 0 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: transparent;
color: var(--text);
cursor: pointer;
}
.guest-btn svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.guest-btn:active { background: rgba(255, 255, 255, 0.06); }
.guest-btn--camera { font-size: 13px; font-weight: 600; }
.guest-btn--camera.is-active { color: var(--green); border-color: var(--green); }
.guest-page--message { align-items: center; justify-content: center; }
.guest-message { text-align: center; padding: 24px; }
.guest-message h1 { font-size: 20px; margin-bottom: 8px; }
.guest-message p { color: var(--muted); }
/*# sourceMappingURL=panel-bundle.css.map*/