/* ==========================================================================
   Roboflight – base styles (app frame, shared building blocks)
   Only use tokens from css/colors.css.
   Contents: 1 Basics · 2 Topbar · 3 Views & panels · 4 Buttons · 5 Fields
             6 Pills/badges · 7 Tabs · 8 Lists/logs · 9 Tables · 10 Alerts
             11 Dialogs · 12 Toasts · 13 Scrollbars · 14 Helper classes
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BASICS
   -------------------------------------------------------------------------- */
*,
*::before,
*::after
{
  box-sizing: border-box;
}

html,
body
{
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background-color: var(--bg-app);
  color: var(--text-main);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.4;
}

body
{
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4, h5, p
{
  margin: 0;
}

button,
input,
select,
textarea
{
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

code,
pre,
kbd,
.mono
{
  font-family: var(--font-mono);
}

code
{
  font-size: 0.95em;
  color: var(--color-secondary-text);
}

a
{
  color: var(--color-secondary-text);
}

a:hover
{
  color: var(--color-secondary-hover);
}

[hidden]
{
  display: none !important;
}

:focus-visible
{
  outline: 2px solid var(--color-secondary);
  outline-offset: 1px;
}

::selection
{
  background: var(--color-secondary);
  color: var(--text-on-secondary);
}

/* --------------------------------------------------------------------------
   2. TOPBAR
   -------------------------------------------------------------------------- */
.rf-topbar
{
  flex: 0 0 var(--topbar-height);
  height: var(--topbar-height);
  background-color: var(--bg-topbar);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  gap: 12px;
  position: relative;
  z-index: 20;
  user-select: none;
}

.rf-topbar-left,
.rf-topbar-center,
.rf-topbar-right
{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.rf-topbar-center
{
  flex: 1;
  justify-content: center;
}

/* View-dependent areas: only visible when body[data-view] matches */
[data-view-only]
{
  display: none !important;
}

body[data-view="arena"] [data-view-only~="arena"],
body[data-view="setup"] [data-view-only~="setup"],
body[data-view="editor"] [data-view-only~="editor"],
body[data-view="manual"] [data-view-only~="manual"],
body[data-view="matches"] [data-view-only~="matches"],
body[data-view="admin"] [data-view-only~="admin"]
{
  display: flex !important;
}

.rf-topbar-slot
{
  align-items: center;
  gap: 8px;
}

.rf-brand
{
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 12px;
  border-right: 1px solid var(--border-color);
  text-decoration: none;
  color: inherit;
}

.rf-brand-icon
{
  width: 34px;
  height: 34px;
  border-radius: var(--radius-lg);
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.rf-brand-text
{
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.rf-brand-title
{
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--text-main);
}

.rf-brand-title .accent
{
  color: var(--color-primary);
}

.rf-brand-sub
{
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  white-space: nowrap;
}

.rf-main-nav
{
  display: flex;
  gap: 4px;
}

.rf-nav-btn
{
  background: transparent;
  color: var(--text-muted);
  border: 1px solid transparent;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
}

.rf-nav-btn:hover
{
  color: var(--text-main);
  background: var(--bg-surface-subtle);
  border-color: var(--border-color);
}

.rf-nav-btn.active
{
  color: var(--color-primary);
  background: var(--color-primary-light);
  border-color: var(--color-primary);
}

/* Live dot on "Arena" while a match is running */
.rf-nav-live
{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-danger);
  box-shadow: 0 0 6px var(--color-danger);
  display: none;
}

body.rf-match-active .rf-nav-live
{
  display: inline-block;
}

.rf-user-btn
{
  background: var(--bg-surface-subtle);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 6px 11px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  max-width: 200px;
}

.rf-user-btn:hover
{
  border-color: var(--color-primary);
}

.rf-user-btn .rf-username
{
  overflow: hidden;
  text-overflow: ellipsis;
}

.rf-user-btn.is-guest .rf-username
{
  color: var(--text-muted);
}

.rf-status-dot
{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-faint);
  flex-shrink: 0;
}

.rf-status-dot.online
{
  background: var(--color-ok);
  box-shadow: 0 0 6px var(--color-ok);
}

.rf-status-dot.error
{
  background: var(--color-danger);
  box-shadow: 0 0 6px var(--color-danger);
}

/* Status pill in the topbar center (setup validation, editor status) */
.rf-status-banner
{
  background: var(--bg-app);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 6px 14px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rf-status-banner.is-ok { border-color: var(--color-ok); }
.rf-status-banner.is-warn { border-color: var(--color-warn); }
.rf-status-banner.is-error { border-color: var(--color-danger); }
.rf-status-banner.is-ok > i { color: var(--color-ok); }
.rf-status-banner.is-warn > i { color: var(--color-warn); }
.rf-status-banner.is-error > i { color: var(--color-danger); }

/* Narrower windows: hide navigation labels (icons + tooltips remain) */
@media (max-width: 1780px)
{
  body[data-view="arena"] .rf-nav-label,
  body[data-view="arena"] .rf-brand-sub
  {
    display: none;
  }
}

@media (max-width: 1360px)
{
  .rf-nav-label,
  .rf-brand-text
  {
    display: none;
  }
}

/* Small windows: the navigation scrolls horizontally instead of pushing the topbar wider,
   the center status pill and the user name give way */
@media (max-width: 760px)
{
  .rf-topbar
  {
    padding: 0 8px;
    gap: 6px;
  }

  .rf-topbar-left
  {
    flex: 1;
    gap: 6px;
  }

  .rf-brand
  {
    padding-right: 6px;
  }

  .rf-main-nav
  {
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .rf-main-nav::-webkit-scrollbar
  {
    display: none;
  }

  .rf-nav-btn
  {
    padding: 6px 8px;
  }

  .rf-topbar-center
  {
    display: none;
  }

  .rf-user-btn .rf-username,
  .rf-topbar-right .rf-btn-label
  {
    display: none;
  }
}

@media (max-width: 480px)
{
  .rf-brand
  {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   3. VIEWS & PANELS
   -------------------------------------------------------------------------- */
.rf-views
{
  flex: 1;
  min-height: 0;
  position: relative;
}

.rf-view
{
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Inactive views keep their size (visibility instead of display:none) so that e.g. the
   arena's Phaser canvas (scale mode RESIZE) does not shrink to 0 × 0 and a running
   match continues undisturbed. */
.rf-view[hidden]
{
  display: block !important;
  visibility: hidden;
  pointer-events: none;
  z-index: 0;
}

.rf-view:not([hidden])
{
  z-index: 1;
}

/* Three-column base layout of the views */
.rf-workspace
{
  height: 100%;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 350px;
  background: var(--bg-app);
}

.rf-side-panel
{
  background-color: var(--bg-side-panel);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.rf-side-panel.left
{
  border-right: 1px solid var(--border-color);
}

.rf-side-panel.right
{
  border-left: 1px solid var(--border-color);
}

.rf-main-panel
{
  background: var(--bg-main-panel);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.rf-panel-header
{
  flex-shrink: 0;
  min-height: 42px;
  padding: 8px 14px;
  background: var(--bg-topbar);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.rf-panel-header h2
{
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.rf-panel-body
{
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
}

.rf-panel-toolbar
{
  flex-shrink: 0;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rf-card
{
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 12px;
}

.rf-section-title
{
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Empty state / placeholder */
.rf-empty-state
{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  color: var(--text-muted);
  padding: 24px;
}

.rf-empty-state > i
{
  font-size: 30px;
  color: var(--text-faint);
}

.rf-empty-state h3
{
  font-size: 16px;
  color: var(--text-main);
}

.rf-placeholder
{
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-md);
  padding: 18px 12px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
}

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.rf-btn
{
  padding: 7px 13px;
  border-radius: var(--radius-md);
  font-size: 12.5px;
  font-weight: 700;
  border: 1px solid var(--border-color);
  background: var(--bg-surface-subtle);
  color: var(--text-main);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.rf-btn:hover
{
  border-color: var(--color-secondary);
  color: var(--color-secondary-text);
}

.rf-btn.primary
{
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--text-on-primary);
}

.rf-btn.primary:hover
{
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--text-on-primary);
}

.rf-btn.secondary
{
  background: var(--color-secondary-light);
  color: var(--color-secondary-text);
  border-color: var(--color-secondary);
}

.rf-btn.secondary:hover
{
  background: var(--color-secondary);
  color: var(--text-on-secondary);
}

.rf-btn.danger
{
  background: var(--color-danger-light);
  color: var(--color-danger-text);
  border-color: var(--color-danger);
}

.rf-btn.danger:hover
{
  background: var(--color-danger);
  color: var(--text-on-primary);
}

.rf-btn.ghost
{
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}

.rf-btn.ghost:hover
{
  color: var(--text-main);
  background: var(--bg-surface-subtle);
}

.rf-btn.sm
{
  padding: 4px 9px;
  font-size: 11.5px;
}

.rf-btn.full
{
  width: 100%;
}

.rf-btn:disabled,
.rf-btn.is-disabled
{
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.rf-btn.is-busy > i
{
  animation: rf-spin 0.9s linear infinite;
}

.rf-btn-row
{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* Compact control button (playback, camera) */
.rf-ctrl-btn
{
  background: var(--bg-surface-subtle);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.rf-ctrl-btn:hover
{
  border-color: var(--color-secondary);
  color: var(--color-secondary-text);
}

.rf-ctrl-btn.active
{
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.rf-ctrl-btn.danger:hover
{
  border-color: var(--color-danger);
  color: var(--color-danger);
  background: var(--color-danger-light);
}

.rf-ctrl-btn:disabled
{
  opacity: 0.45;
  cursor: not-allowed;
}

/* Icon button without border */
.rf-icon-btn
{
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 5px;
  border-radius: var(--radius-sm);
  font-size: 12px;
}

.rf-icon-btn:hover
{
  color: var(--text-main);
  background: var(--bg-surface-subtle);
}

.rf-icon-btn.danger:hover
{
  color: var(--color-danger);
}

/* Text link button */
.rf-link-btn
{
  background: none;
  border: none;
  padding: 0;
  color: var(--color-secondary-text);
  font-size: 11.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
}

.rf-link-btn:hover
{
  color: var(--color-secondary-hover);
  text-decoration: underline;
}

/* Segment group (e.g. speed, mode) */
.rf-segment
{
  display: flex;
  background: var(--bg-app);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.rf-segment > button
{
  background: transparent;
  color: var(--text-muted);
  border: none;
  border-right: 1px solid var(--border-color);
  padding: 6px 8px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.rf-segment > button:last-child
{
  border-right: none;
}

.rf-segment > button:hover
{
  color: var(--text-main);
  background: var(--bg-surface-subtle);
}

.rf-segment > button.active
{
  background: var(--color-secondary);
  color: var(--text-on-secondary);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   5. FORM FIELDS
   -------------------------------------------------------------------------- */
.rf-input,
.rf-field input,
.rf-field select,
.rf-field textarea,
.rf-select
{
  background: var(--bg-app);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  padding: 7px 10px;
  color: var(--text-main);
  font-size: 12.5px;
  width: 100%;
  min-width: 0;
}

.rf-input:focus,
.rf-field input:focus,
.rf-field select:focus,
.rf-field textarea:focus,
.rf-select:focus
{
  outline: none;
  border-color: var(--color-secondary);
}

.rf-input.is-invalid,
.rf-field input.is-invalid
{
  border-color: var(--color-danger);
  background: var(--color-danger-light);
}

.rf-input[readonly]
{
  color: var(--color-tertiary-text);
}

select.rf-select,
.rf-field select
{
  cursor: pointer;
}

select option
{
  background: var(--bg-side-panel);
  color: var(--text-main);
}

.rf-field
{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.rf-field > span,
.rf-label
{
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 600;
}

.rf-field-hint
{
  font-size: 11px;
  color: var(--text-muted);
}

.rf-field-error
{
  font-size: 11px;
  color: var(--color-danger-text);
}

.rf-form-row
{
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.rf-form-row > .rf-field
{
  flex: 1;
}

.rf-check
{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  cursor: pointer;
}

.rf-check input
{
  accent-color: var(--color-secondary);
}

input[type="range"]
{
  accent-color: var(--color-secondary);
}

/* Search field with icon */
.rf-search-wrap
{
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.rf-search-wrap > i
{
  position: absolute;
  left: 9px;
  color: var(--text-muted);
  font-size: 12px;
  pointer-events: none;
}

.rf-search-wrap input
{
  width: 100%;
  background: var(--bg-app);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  padding: 5px 8px 5px 28px;
  color: var(--text-main);
  font-size: 12px;
}

.rf-search-wrap input:focus
{
  outline: none;
  border-color: var(--color-secondary);
}

/* --------------------------------------------------------------------------
   6. PILLS & BADGES
   -------------------------------------------------------------------------- */
.rf-filter-pills
{
  display: flex;
  gap: 5px;
}

.rf-pill
{
  flex: 1;
  background: var(--bg-surface-subtle);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 3px 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.rf-pill:hover
{
  color: var(--text-main);
}

.rf-pill.active
{
  background: var(--color-secondary-light);
  color: var(--color-secondary-text);
  border-color: var(--color-secondary);
}

.rf-mode-pill
{
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  white-space: nowrap;
}

.rf-badge
{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-surface-subtle);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  white-space: nowrap;
}

.rf-badge.info,
.rf-badge-open
{
  background: var(--color-secondary-light);
  color: var(--color-secondary-text);
  border-color: var(--color-secondary);
}

.rf-badge.ok
{
  background: var(--color-ok-light);
  color: var(--color-ok);
  border-color: var(--color-ok);
}

.rf-badge.warn
{
  background: var(--color-warn-light);
  color: var(--color-tertiary-text);
  border-color: var(--color-warn);
}

.rf-badge.danger
{
  background: var(--color-danger-light);
  color: var(--color-danger-text);
  border-color: var(--color-danger);
}

.rf-badge-open
{
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 5px;
  border: 1px solid var(--color-secondary);
  border-radius: var(--radius-sm);
}

.rf-version-tag
{
  font-size: 10.5px;
  background: var(--bg-surface-subtle);
  color: var(--color-tertiary-text);
  border: 1px solid var(--border-color);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* Ship tag badge in team color: <span class="rf-tag-badge team-emerald">A1</span> */
.rf-tag-badge
{
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--team, var(--color-secondary));
  color: var(--text-on-team);
  white-space: nowrap;
}

.rf-tag-badge.killed
{
  background: var(--color-killed);
  color: var(--text-muted);
}

.rf-tag-badge.lg
{
  font-size: 13px;
  padding: 2px 8px;
}

.rf-count
{
  font-size: 9.5px;
  background: var(--bg-surface-subtle);
  color: var(--text-muted);
  padding: 0 5px;
  border-radius: 8px;
}

/* --------------------------------------------------------------------------
   7. TABS  (<div class="rf-tabs"> … .rf-tab-btn[data-tab="<panel-id>"] … .rf-tab-content#<panel-id>)
   -------------------------------------------------------------------------- */
.rf-tabs
{
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.rf-tab-headers
{
  flex-shrink: 0;
  display: flex;
  background: var(--bg-topbar);
  border-bottom: 1px solid var(--border-color);
}

.rf-tab-btn
{
  flex: 1;
  background: transparent;
  color: var(--text-muted);
  border: none;
  border-bottom: 2px solid transparent;
  padding: 7px 6px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
}

.rf-tab-btn:hover
{
  color: var(--text-main);
}

.rf-tab-btn.active
{
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  background: var(--bg-side-panel);
}

.rf-tab-content
{
  display: none;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}

.rf-tab-content.active
{
  display: flex;
}

/* --------------------------------------------------------------------------
   8. LISTS, LOGS, JSON
   -------------------------------------------------------------------------- */
.rf-log-stream
{
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  user-select: text;
}

.rf-log-line
{
  background: var(--bg-app);
  border-left: 2px solid var(--border-color);
  padding: 4px 6px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  word-break: break-word;
}

.rf-log-line.highlight
{
  border-left-color: var(--color-primary);
  background: var(--color-primary-light);
}

.rf-log-line.error
{
  border-left-color: var(--color-danger);
  background: var(--color-danger-light);
}

.rf-log-meta
{
  color: var(--color-secondary-text);
  margin-right: 4px;
}

.rf-log-footer
{
  flex-shrink: 0;
  padding: 5px 10px;
  background: var(--bg-topbar);
  border-top: 1px solid var(--border-color);
  font-size: 10.5px;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.rf-json-view
{
  flex: 1;
  min-height: 0;
  overflow: auto;
  margin: 0;
  padding: 10px;
  font-size: 11px;
  color: var(--color-tertiary-text);
  background: var(--bg-app);
  user-select: text;
}

/* --------------------------------------------------------------------------
   9. TABLES
   -------------------------------------------------------------------------- */
.rf-table-wrap
{
  overflow: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-side-panel);
}

.rf-table
{
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.rf-table th,
.rf-table td
{
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-color);
  vertical-align: top;
}

.rf-table th
{
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-topbar);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

.rf-table tbody tr:hover
{
  background: var(--bg-hover-row);
}

.rf-table.mono td
{
  font-family: var(--font-mono);
  font-size: 11.5px;
}

.rf-table td.num
{
  text-align: right;
  white-space: nowrap;
}

.rf-table td.wrap
{
  white-space: pre-wrap;
  word-break: break-word;
  user-select: text;
}

/* --------------------------------------------------------------------------
   10. NOTICES (alerts)
   -------------------------------------------------------------------------- */
.rf-alert
{
  border: 1px solid var(--border-color);
  background: var(--bg-surface-subtle);
  color: var(--text-main);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  display: flex;
  gap: 10px;
  font-size: 12px;
  align-items: flex-start;
}

.rf-alert > i
{
  margin-top: 2px;
}

.rf-alert.info
{
  background: var(--color-info-light);
  border-color: var(--color-secondary);
  color: var(--color-secondary-text);
}

.rf-alert.warn
{
  background: var(--color-warn-light);
  border-color: var(--color-warn);
  color: var(--color-tertiary-text);
}

.rf-alert.danger
{
  background: var(--color-danger-light);
  border-color: var(--color-danger);
  color: var(--color-danger-text);
}

.rf-alert.ok
{
  background: var(--color-ok-light);
  border-color: var(--color-ok);
  color: var(--color-ok);
}

.rf-sep
{
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 6px 0;
}

/* --------------------------------------------------------------------------
   11. DIALOGS (contents; frame/title come from css/jquery-ui-theme.css)
   -------------------------------------------------------------------------- */
.rf-dialog-grid
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.rf-dialog-box
{
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rf-dialog-box.highlight
{
  background: var(--bg-main-panel);
  border-color: var(--color-secondary);
}

.rf-dialog-box h4
{
  font-size: 13px;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 7px;
}

.rf-dialog-box p
{
  font-size: 12px;
  color: var(--text-muted);
}

/* Display of a key with copy button */
.rf-key-display
{
  display: flex;
  gap: 6px;
  align-items: stretch;
}

.rf-key-display .rf-input
{
  font-family: var(--font-mono);
  color: var(--color-tertiary-text);
  user-select: all;
}

.rf-auth-form
{
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.rf-auth-form .rf-field
{
  width: 100%;
}

#auth-message,
.rf-auth-new-key
{
  margin-bottom: 14px;
}

/* Definition list (profile) */
.rf-def-list
{
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 5px 12px;
  margin: 0;
  font-size: 12px;
}

.rf-def-list dt
{
  color: var(--text-muted);
}

.rf-def-list dd
{
  margin: 0;
  overflow-wrap: anywhere;
  user-select: text;
}

/* Log viewer */
.rf-log-viewer
{
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  min-height: 0;
}

.rf-log-filter-bar
{
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.rf-log-filter-bar .rf-select
{
  width: auto;
  max-width: 300px;
}

/* Local mode (replay logs from the browser): title instead of the server match select */
.rf-log-local-title
{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 340px;
  padding: 5px 10px;
  border: 1px solid var(--color-tertiary);
  border-radius: var(--radius-md);
  background: var(--color-tertiary-light);
  color: var(--color-tertiary-text);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rf-log-local-title[hidden]
{
  display: none;
}

.rf-grow
{
  flex: 1;
  min-width: 180px;
}

.rf-log-table-wrap
{
  flex: 1;
  min-height: 200px;
}

.rf-log-table-wrap td:nth-child(6)
{
  white-space: pre-wrap;
  word-break: break-word;
  user-select: text;
  width: 100%;
}

.rf-log-table-wrap td:nth-child(-n+4)
{
  white-space: nowrap;
  color: var(--text-muted);
}

.rf-log-viewer-status
{
  font-size: 11.5px;
  color: var(--text-muted);
  min-height: 16px;
}

.rf-log-table-wrap mark
{
  background: var(--color-tertiary-light);
  color: var(--color-tertiary-text);
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   12. TOASTS
   -------------------------------------------------------------------------- */
.rf-toasts
{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(440px, calc(100vw - 32px));
  pointer-events: none;
}

.rf-toast
{
  pointer-events: auto;
  background: var(--bg-topbar);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--color-secondary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-main);
  padding: 10px 12px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12.5px;
  animation: rf-toast-in 0.18s ease-out;
}

.rf-toast > i
{
  margin-top: 2px;
  color: var(--color-secondary-text);
}

.rf-toast .rf-toast-text
{
  flex: 1;
  word-break: break-word;
}

.rf-toast .rf-toast-text small
{
  display: block;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  margin-top: 2px;
}

.rf-toast.is-ok { border-left-color: var(--color-ok); }
.rf-toast.is-ok > i { color: var(--color-ok); }
.rf-toast.is-warn { border-left-color: var(--color-warn); }
.rf-toast.is-warn > i { color: var(--color-warn); }
.rf-toast.is-error { border-left-color: var(--color-danger); }
.rf-toast.is-error > i { color: var(--color-danger); }

.rf-toast.is-leaving
{
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

@keyframes rf-toast-in
{
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes rf-spin
{
  to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   13. SCROLLBARS
   -------------------------------------------------------------------------- */
*
{
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

::-webkit-scrollbar
{
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-track
{
  background: transparent;
}

::-webkit-scrollbar-thumb
{
  background: var(--border-color);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover
{
  background: var(--border-strong);
  background-clip: padding-box;
}

::-webkit-scrollbar-corner
{
  background: transparent;
}

/* --------------------------------------------------------------------------
   14. HELPER CLASSES
   -------------------------------------------------------------------------- */
.primary { color: var(--color-primary); }
.secondary { color: var(--color-secondary-text); }
.tertiary { color: var(--color-tertiary-text); }
.muted { color: var(--text-muted); }
.text-ok { color: var(--color-ok); }
.text-warn { color: var(--color-warn); }
.text-danger { color: var(--color-danger); }
.team-color { color: var(--team, var(--text-main)); }

.sep
{
  color: var(--text-faint);
}

.nowrap
{
  white-space: nowrap;
}

.ellipsis
{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selectable
{
  user-select: text;
}

.rf-spinner
{
  display: inline-block;
  animation: rf-spin 0.9s linear infinite;
}