/* ==========================================================================
   Roboflight – admin panel (#admin)
   Logic: js/ui/admin/ (the matches tab uses css/matches.css). Colors only from css/colors.css.
   ========================================================================== */

#topbar-center-admin .rf-status-banner > i
{
  color: var(--color-primary);
}

#topbar-center-admin .rf-status-banner.is-warn > i
{
  color: var(--color-warn);
}

/* --------------------------------------------------------------------------
   1. FRAME & TABS
   -------------------------------------------------------------------------- */
.rf-adm-layout
{
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-app);
}

.rf-adm-tabs
{
  flex-shrink: 0;
  display: flex;
  gap: 2px;
  padding: 0 12px;
  background: var(--bg-topbar);
  border-bottom: 1px solid var(--border-color);
  overflow-x: auto;
  scrollbar-width: none;
}

.rf-adm-tabs::-webkit-scrollbar
{
  display: none;
}

.rf-adm-tab
{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px 9px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.rf-adm-tab:hover
{
  color: var(--text-main);
  text-decoration: none;
}

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

.rf-adm-panes
{
  flex: 1;
  min-height: 0;
  position: relative;
}

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

.rf-adm-scroll
{
  overflow-y: auto;
  background: var(--bg-main-panel);
  container-type: inline-size;
  container-name: admpane;
}

.rf-adm-inner
{
  max-width: 1440px;
  margin: 0 auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rf-adm-banner a
{
  color: inherit;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   2. CARDS & KEY FIGURES
   -------------------------------------------------------------------------- */
.rf-adm-stats
{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.rf-adm-stat
{
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.rf-adm-stat.is-accent
{
  border-color: var(--color-secondary-border);
}

.rf-adm-stat-label
{
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.rf-adm-stat-label > i
{
  color: var(--color-secondary-text);
}

.rf-adm-stat-value
{
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-main);
}

.rf-adm-stat-sub
{
  font-size: 11.5px;
}

.rf-adm-grid-2
{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr));
  gap: 14px;
  align-items: start;
}

.rf-adm-card
{
  background: var(--bg-side-panel);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.rf-adm-card h3
{
  font-size: 13px;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.rf-adm-h-sub
{
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 12px;
}

.rf-adm-card p
{
  margin: 0;
  font-size: 12.5px;
}

.rf-adm-card .rf-field-hint
{
  font-size: 11px;
}

.rf-adm-settings-form
{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rf-adm-settings-form input[type="number"]
{
  max-width: 160px;
}

.rf-adm-inline-form
{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}

.rf-adm-inline-form .rf-select
{
  width: auto;
}

.rf-adm-inline-form .rf-input
{
  width: 90px;
}

.rf-adm-preview
{
  border-top: 1px dashed var(--border-color);
  padding-top: 10px;
}

.rf-adm-sizes td,
.rf-adm-sizes th
{
  white-space: nowrap;
}

.rf-adm-bar-col
{
  width: 30%;
  min-width: 60px;
}

.rf-adm-bar
{
  height: 6px;
  border-radius: 3px;
  background: var(--bg-app);
  overflow: hidden;
}

.rf-adm-bar > span
{
  display: block;
  height: 100%;
  background: var(--color-secondary);
  border-radius: 3px;
}

/* --------------------------------------------------------------------------
   3. USERS & AUDIT
   -------------------------------------------------------------------------- */
.rf-adm-toolbar
{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.rf-adm-toolbar .rf-search-wrap
{
  width: 320px;
  max-width: 100%;
}

.rf-adm-toolbar .rf-select
{
  width: auto;
}

.rf-adm-users td,
.rf-adm-audit td
{
  vertical-align: middle;
}

.rf-adm-user-mail
{
  font-size: 11.5px;
  overflow-wrap: anywhere;
}

.rf-adm-user-actions
{
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.rf-adm-own-hint
{
  font-size: 11px;
  align-self: center;
}

.rf-adm-cell-label
{
  display: none;
}

.rf-adm-details
{
  font-size: 11px !important;
  color: var(--text-muted);
}

@container admpane (max-width: 760px)
{
  .rf-adm-inner
  {
    padding: 12px 16px;
  }

  /* Users as cards */
  .rf-adm-users .rf-table,
  .rf-adm-users tbody,
  .rf-adm-audit .rf-table,
  .rf-adm-audit tbody
  {
    display: block;
  }

  .rf-adm-users thead,
  .rf-adm-audit thead
  {
    display: none;
  }

  .rf-adm-users tr
  {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, auto)) 1fr;
    grid-template-areas:
      "user user user user role"
      "bots matches keys logs logs"
      "created created created created created"
      "actions actions actions actions actions";
    gap: 6px 14px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
  }

  .rf-adm-users tr > td
  {
    display: block;
    padding: 0;
    border: none;
    text-align: left;
    min-width: 0;
  }

  .rf-adm-users [data-col="user"] { grid-area: user; }
  .rf-adm-users [data-col="role"] { grid-area: role; justify-self: end; }
  .rf-adm-users [data-col="bots"] { grid-area: bots; }
  .rf-adm-users [data-col="matches"] { grid-area: matches; }
  .rf-adm-users [data-col="keys"] { grid-area: keys; }
  .rf-adm-users [data-col="logs"] { grid-area: logs; }
  .rf-adm-users [data-col="created"] { grid-area: created; font-size: 11.5px; color: var(--text-muted); }
  .rf-adm-users [data-col="actions"] { grid-area: actions; }

  .rf-adm-users [data-col="logs"] > div
  {
    display: inline;
    margin-left: 4px;
  }

  .rf-adm-cell-label
  {
    display: inline;
    color: var(--text-muted);
    font-size: 11px;
  }

  .rf-adm-user-actions
  {
    justify-content: flex-start;
  }

  /* Audit as cards */
  .rf-adm-audit tr
  {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "time user action"
      "details details details";
    gap: 4px 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
  }

  .rf-adm-audit tr > td
  {
    display: block;
    padding: 0;
    border: none;
    min-width: 0;
  }

  .rf-adm-audit [data-col="time"] { grid-area: time; font-size: 11.5px; }
  .rf-adm-audit [data-col="user"] { grid-area: user; font-size: 11.5px; }
  .rf-adm-audit [data-col="action"] { grid-area: action; }
  .rf-adm-audit [data-col="details"] { grid-area: details; }
}