/* Final Studio color aliases and state contrast. Layout, chart series and QR artwork are unchanged. */
html.foxy-design[data-foxy-design=studio] {
  color-scheme:light;
  --fx-danger:#b42332;
  --fx-danger-tint:#fff0f2;
  --fx-success:#18784f;
  --fx-scrollbar:#9499a2;
  /* The native canvas charts read these properties from the root element. */
  --bg-primary:var(--fx-surface) !important;
  --bg-secondary:var(--fx-bg) !important;
  --bg-tertiary:var(--fx-subtle) !important;
  --text-primary:var(--fx-text) !important;
  --text-secondary:var(--fx-muted) !important;
  --text-tertiary:var(--fx-muted) !important;
  --text-muted:var(--fx-muted) !important;
  --accent-primary:var(--fx-accent) !important;
  --accent-secondary:var(--fx-accent-soft) !important;
  --accent-hover:var(--fx-accent-hover) !important;
  --border-primary:var(--fx-line) !important;
  --border-secondary:var(--fx-line) !important;
  --border-color:var(--fx-line) !important;
  --invalid-bg:var(--fx-danger-tint);
  --invalid-border:var(--fx-danger);
  --color-danger:var(--fx-danger);
}
html.foxy-design[data-foxy-design=studio][data-theme=dark] {
  color-scheme:dark;
  --fx-danger:#ff9fa7;
  --fx-danger-tint:#412a30;
  --fx-success:#74d6aa;
  --fx-scrollbar:#707782;
}

/* Keep auxiliary labels readable without changing the fixed dark navigation. */
html[data-foxy-design=studio] .foxy-ui .fx-footer,
html[data-foxy-design=studio] .foxy-ui .fx-session-symbol,
html[data-foxy-design=studio] .foxy-ui .fx-compact-icon {
  color:var(--fx-muted);
}
html[data-foxy-design=studio] .foxy-ui :is(input,textarea)::placeholder {
  color:var(--fx-muted) !important;
  opacity:1;
}
html[data-foxy-design=studio] .foxy-ui :is(#root,.Modal) :is(input,textarea)::placeholder {
  opacity:1;
}
html[data-foxy-design=studio] .foxy-ui * {
  scrollbar-color:var(--fx-scrollbar) transparent;
}
html[data-foxy-design=studio] .foxy-ui ::-webkit-scrollbar-thumb {
  background:var(--fx-scrollbar) !important;
}

/* A disabled field remains legible; subdued fill and the cursor convey its state. */
html[data-foxy-design=studio] .foxy-ui :is(#root,.Modal,.fx-shell,.fx-session-dialog,.fx-telethon) :is(button,input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select):disabled {
  color:var(--fx-muted) !important;
  background-color:var(--fx-subtle) !important;
  border-color:var(--fx-line) !important;
  opacity:1;
  box-shadow:none;
  cursor:not-allowed;
}
html[data-foxy-design=studio] .foxy-ui :is(#root,.Modal,.fx-shell,.fx-session-dialog,.fx-telethon) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea):disabled {
  -webkit-text-fill-color:var(--fx-muted);
}
html[data-foxy-design=studio] .foxy-ui .fx-button.fx-primary:disabled .fx-icon {
  color:var(--fx-muted) !important;
}
html[data-foxy-design=studio] .foxy-ui .fx-select-option[aria-disabled=true] {
  color:var(--fx-muted);
  opacity:.8;
}

/* Error and delete affordances use distinct, readable colors in both modes. */
html[data-foxy-design=studio] .foxy-ui :is(.invalid-p,.svg-image-upload__error),
html[data-foxy-design=studio] .fx-appearance-error {
  color:var(--fx-danger);
}
html[data-foxy-design=studio] .foxy-ui :is(#root,.Modal) :is(input,textarea,select).invalid,
html[data-foxy-design=studio] .foxy-ui .fx-select-trigger[aria-invalid=true] {
  border-color:var(--fx-danger) !important;
}
html[data-foxy-design=studio] .foxy-ui :is(#root,.Modal) .red-btn {
  color:var(--fx-danger) !important;
}
html[data-foxy-design=studio] .foxy-ui :is(#root,.Modal) .red-btn :is(svg,path) {
  color:var(--fx-danger) !important;
  fill:currentColor !important;
}
html[data-foxy-design=studio] .foxy-ui :is(#root,.Modal) .red-btn:hover:not(:disabled) {
  background:var(--fx-danger-tint) !important;
  border-color:var(--fx-danger);
}
html[data-foxy-design=studio] .foxy-ui .security-divider {
  background:var(--fx-line);
}
html[data-foxy-design=studio] .foxy-ui .security-2fa-active__badge {
  color:var(--fx-success);
}

/* The datepicker library supplies black text and pale menus for these subviews. */
html[data-foxy-design=studio] .foxy-ui .react-datepicker :is(.react-datepicker-time__header,.react-datepicker-year-header,.react-datepicker__time-name) {
  color:var(--fx-text);
}
html[data-foxy-design=studio] .foxy-ui .react-datepicker :is(.react-datepicker__month-dropdown,.react-datepicker__month-year-dropdown,.react-datepicker__year-dropdown) {
  color:var(--fx-text);
  background:var(--fx-surface);
  border-color:var(--fx-line);
}
html[data-foxy-design=studio] .foxy-ui .react-datepicker :is(.react-datepicker__month-option,.react-datepicker__month-year-option,.react-datepicker__year-option):hover {
  background:var(--fx-hover);
}
html[data-foxy-design=studio] .foxy-ui :is(#root,.Modal) .react-datepicker .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--selected) {
  background:var(--fx-tint);
  color:var(--fx-accent-ink);
}
html[data-foxy-design=studio] .foxy-ui :is(#root,.Modal) .react-datepicker .react-datepicker__time-list .react-datepicker__time-list-item--disabled {
  color:var(--fx-muted) !important;
  background:transparent !important;
  opacity:.7;
  cursor:not-allowed;
}


/* City chips under the offline world map.
   Before: .fx-map-city-list had no padding, so names sat flush against the card edge. */
.foxy-ui .fx-map-city-list{padding:0 24px 20px}
.foxy-ui .fx-map-city-list>span{display:inline-flex;align-items:center;background:var(--fx-subtle);border:1px solid var(--fx-line);border-radius:999px;padding:4px 11px;font-size:12px;color:var(--fx-text)}
@media(max-width:780px){.foxy-ui .fx-map-city-list{padding:0 18px 16px}}

/* Align the Участник select and the period buttons (equal height, bottom aligned). */
.foxy-ui .fxa-controls{align-items:flex-end}
.foxy-ui .fxa-person-filter select,.foxy-ui .fxa-person-filter .fx-select-trigger,
.foxy-ui .fxa-period{box-sizing:border-box;height:46px;min-height:46px}
.foxy-ui .fxa-person-filter select,.foxy-ui .fxa-person-filter .fx-select-trigger{padding:0 12px}


/* The native React screen belongs to «Графики и карты», never under the Сводка tab. */
body[data-page=overview] .fx-shell .fx-content > .fx-native-slot{display:none!important}

/* Pagination of the long materials list. */
.foxy-ui .fxo-own-pager{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 16px;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--fx-line);color:var(--fx-muted);font-size:13px}
.foxy-ui .fxo-page-nav{display:flex;align-items:center;gap:10px}
.foxy-ui .fxo-own-pager button{height:36px;min-height:36px;padding:0 14px;border:1px solid var(--fx-line);border-radius:10px;background:var(--fx-surface);color:var(--fx-text);font:inherit;font-size:13px;cursor:pointer}
.foxy-ui .fxo-own-pager button:hover:not(:disabled){border-color:var(--fx-accent);color:var(--fx-accent-ink)}
.foxy-ui .fxo-own-pager button:disabled{opacity:.45;cursor:not-allowed}
.foxy-ui .fxo-page-status{min-width:132px;text-align:center}
.foxy-ui .fxo-page-size{display:flex;align-items:center;gap:8px}
.foxy-ui .fxo-page-size select{height:36px;min-height:36px;padding:0 10px;border:1px solid var(--fx-line);border-radius:10px;background:var(--fx-surface);color:var(--fx-text);font:inherit;font-size:13px;cursor:pointer}


/* The native heatmap legend still shipped the old blue accent (#12a6d2). */
.foxy-ui .click-heatmap__legend-grad{background:linear-gradient(90deg,rgba(255,130,40,.06),#ff8a2b)!important}
.foxy-ui #root .click-heatmap__cell{--fx-heat-fallback:#ff8a2b}


/* Journal chip + live Telethon feedback (no mock wording left in the studio layer). */
.foxy-ui .fxo-journal-status[title]{cursor:help}
.foxy-ui .fx-telethon-status.fx-telethon-online{color:#3ecf8e}
.foxy-ui .fx-telethon-status.fx-telethon-online i{background:#3ecf8e}
.foxy-ui .fx-telethon-hint{font-size:12px;color:var(--fx-muted);margin-left:8px;align-self:center}
.foxy-ui .fx-telethon-hint.fx-telethon-failed{color:#e5533d}
.foxy-ui .fx-telethon-dialog-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
.foxy-ui .fxo-history-facts dd{color:var(--fx-muted)}
.foxy-ui .fx-telethon-status.fx-telethon-pending{color:#e8a33d}
.foxy-ui .fx-telethon-status.fx-telethon-pending i{background:#e8a33d}


/* Proxy workspace: real sessions, commands, camera. */
.foxy-ui .fx-session-table [data-role=session-rows] .fx-session-row:first-child{border-top:1px solid var(--fx-line)}
.foxy-ui .fx-show-count{color:var(--fx-muted)}
.foxy-ui .fx-badge[data-state=online]{color:#3ecf8e}
.foxy-ui .fx-badge[data-state=online] i{background:#3ecf8e}
.foxy-ui .fx-badge[data-state=offline]{color:var(--fx-muted)}
.foxy-ui .fx-badge[data-state=offline] i{background:var(--fx-muted)}
.foxy-ui .fx-data-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-height:340px;overflow:auto}
.foxy-ui .fx-data-item{display:grid;gap:4px;padding:12px 14px;border:1px solid var(--fx-line);border-radius:10px;background:var(--fx-surface)}
.foxy-ui .fx-data-item strong{font-size:12px}
.foxy-ui .fx-data-item time,.foxy-ui .fx-data-item span{color:var(--fx-muted);font-size:11px}
.foxy-ui .fx-data-item em{font-style:normal;color:var(--fx-muted);font-size:11px;margin-right:10px}
.foxy-ui .fx-data-item a{color:var(--fx-accent-ink);font-size:12px;text-decoration:none}
.foxy-ui .fx-recipient-items{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foxy-ui .fx-recipient-items li{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--fx-line);border-radius:10px}
.foxy-ui .fx-recipient-items strong{display:block;font-size:12px}
.foxy-ui .fx-recipient-items small{color:var(--fx-muted);font-size:11px}
.foxy-ui .fx-camera-screen.fx-camera-live{background:#132018;color:#3ecf8e}


/* Live camera view (MediaSource) inside the session dialog. */
.foxy-ui .fx-camera-screen{position:relative}
.foxy-ui .fx-camera-screen video{width:100%;height:100%;object-fit:contain;display:none;background:#0d1116;border-radius:9px}
.foxy-ui .fx-camera-screen.fx-camera-live video{display:block}
.foxy-ui .fx-camera-screen.fx-camera-live [data-role=camera-placeholder]{display:none}
.foxy-ui .fx-camera-failed{color:#e5533d!important}
.foxy-ui .fx-camera-screen.fx-camera-live{background:#0d1116;color:#3ecf8e}


/* Камера: список устройств, переключение между камерами и удаление записей. */
.foxy-ui .fx-camera-devices{margin-top:18px}
.foxy-ui .fx-camera-devices-head,.foxy-ui .fx-camera-recordings-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 10px}
.foxy-ui .fx-camera-devices-head h3,.foxy-ui .fx-camera-recordings-head h3{margin:0}
.foxy-ui .fx-camera-recordings-head .fx-button{height:30px;padding:0 12px;font-size:11px}
.foxy-ui .fx-camera-device{display:grid;gap:6px}
.foxy-ui .fx-camera-recording{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center}
.foxy-ui .fx-camera-device .fx-button-row,.foxy-ui .fx-camera-recording .fx-button-row{justify-content:flex-start;margin-top:0}
.foxy-ui .fx-camera-device .fx-button,.foxy-ui .fx-camera-recording .fx-button{height:30px;padding:0 12px;font-size:11px}
.foxy-ui .fx-camera-device[data-active=true]{border-color:var(--fx-accent);background:var(--fx-tint)}
.foxy-ui .fx-camera-device[data-active=true] strong{color:var(--fx-accent-ink)}
.foxy-ui .fx-camera-device .fx-button:disabled{opacity:.65;cursor:default;transform:none;box-shadow:none}
.foxy-ui .fx-camera-device[data-active=true] .fx-button:disabled{opacity:1;background:transparent;border-color:var(--fx-accent);color:var(--fx-accent-ink)}
.foxy-ui .fx-button.fx-danger{color:var(--fx-danger,#b42332);border-color:var(--fx-danger,#b42332)}
.foxy-ui .fx-button.fx-danger-confirm{background:var(--fx-danger,#b42332);border-color:var(--fx-danger,#b42332);color:#fff}