/* ============================================================================
   Account Manager view.

   Deliberately does NOT reuse the dashboard's glass theme. This half of the site is a remote view of a
   desktop application, and the whole point is that it looks like the application - same palette, same
   proportions, same controls - so someone who knows the app recognises it immediately and does not have
   to learn a second interface for the same thing.

   The colours below are the app's own, taken from Themes/DarkTheme.xaml (VS Code dark, one step darker).
   Keep them in step with that file: if the app's palette changes, this should change with it.
   ============================================================================ */

.mgr {
  --m-window: #161616;
  --m-panel: #1C1C1C;
  --m-panel-alt: #222222;
  --m-card: #282828;
  --m-border: #333333;
  --m-text: #EDEEF3;
  --m-text-2: #9CA2B0;
  --m-text-3: #6B7080;
  --m-accent: #007ACC;
  --m-accent-hover: #1177BB;
  --m-danger: #FF5C6C;
  --m-success: #3DDC84;
  --m-warning: #FFC857;

  font: 13px/1.45 'Segoe UI', system-ui, sans-serif;
  color: var(--m-text);
}

/* ---------- window ---------- */
.mgr-window {
  background: var(--m-window);
  border: 1px solid var(--m-border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}

.mgr-titlebar {
  height: 36px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px; background: var(--m-panel); border-bottom: 1px solid var(--m-border);
  font-size: 11px; font-weight: 600; color: var(--m-text-3);
}
.mgr-titlebar .mgr-dots { display: flex; gap: 6px; }
.mgr-titlebar .mgr-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--m-border); }

/* ---------- tabs (the app's four, of which two have meaning here) ---------- */
.mgr-tabs {
  display: flex; gap: 2px; padding: 8px 10px 0; background: var(--m-panel);
  border-bottom: 1px solid var(--m-border);
}
.mgr-tab {
  padding: 7px 15px; border: 1px solid transparent; border-bottom: none;
  border-radius: 7px 7px 0 0; background: none; color: var(--m-text-2);
  font: 500 12.5px 'Segoe UI', sans-serif; cursor: pointer;
}
.mgr-tab:hover { color: var(--m-text); background: rgba(255,255,255,.04); }
.mgr-tab.active { background: var(--m-window); border-color: var(--m-border); color: var(--m-text); }

/* ---------- toolbar ---------- */
.mgr-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; background: var(--m-panel); border-bottom: 1px solid var(--m-border);
}
.mgr-toolbar h2 { font-size: 17px; font-weight: 700; margin: 0; }
.mgr-toolbar .mgr-sub { font-size: 12px; color: var(--m-text-2); margin-top: 2px; }
.mgr-toolbar-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- buttons ---------- */
.mgr-btn {
  padding: 7px 13px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--m-border); background: var(--m-panel-alt); color: var(--m-text);
  font: 500 12.5px 'Segoe UI', sans-serif;
}
.mgr-btn:hover { border-color: #4A4A4A; background: #2A2A2A; }
.mgr-btn:disabled { opacity: .45; cursor: default; }
.mgr-btn.primary { background: var(--m-accent); border-color: var(--m-accent); color: #fff; font-weight: 600; }
.mgr-btn.primary:hover { background: var(--m-accent-hover); border-color: var(--m-accent-hover); }
.mgr-btn.danger { color: var(--m-danger); border-color: rgba(255,92,108,.35); }
.mgr-btn.danger:hover { border-color: var(--m-danger); background: rgba(255,92,108,.1); }
.mgr-btn.tiny { padding: 3px 9px; font-size: 11.5px; border-radius: 5px; }

/* ---------- filter row ---------- */
.mgr-filters {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; background: var(--m-window);
}
.mgr-label { font-size: 10px; font-weight: 600; color: var(--m-text-3); letter-spacing: .6px; }

.mgr input[type="text"], .mgr input[type="number"], .mgr select {
  height: 30px; padding: 0 10px; border-radius: 6px;
  background: var(--m-panel-alt); border: 1px solid var(--m-border); color: var(--m-text);
  font: 12.5px 'Segoe UI', sans-serif; outline: none;
}
.mgr input:focus, .mgr select:focus { border-color: var(--m-accent); }

/* ---------- table ---------- */
.mgr-tablewrap { padding: 0 16px 16px; overflow-x: auto; }
.mgr-table { width: 100%; border-collapse: collapse; background: var(--m-panel); border: 1px solid var(--m-border); border-radius: 8px; }
.mgr-table th {
  text-align: left; padding: 9px 12px; font-size: 10.5px; font-weight: 600;
  color: var(--m-text-3); letter-spacing: .5px; border-bottom: 1px solid var(--m-border);
  background: var(--m-panel-alt); white-space: nowrap;
}
.mgr-table td { padding: 8px 12px; border-bottom: 1px solid var(--m-border); vertical-align: middle; }
.mgr-table tr:last-child td { border-bottom: none; }
.mgr-table tbody tr:hover td { background: rgba(255,255,255,.025); }

.mgr-star { background: none; border: none; cursor: pointer; font-size: 14px; padding: 2px 4px; color: var(--m-text-3); }
.mgr-star.on { color: var(--m-warning); }

.mgr-check { width: 15px; height: 15px; accent-color: var(--m-accent); cursor: pointer; }

.mgr-avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--m-panel-alt);
  border: 1px solid var(--m-border); object-fit: cover; display: block;
}

.mgr-name { font-weight: 600; font-size: 12.5px; }
.mgr-user { font-size: 11px; color: var(--m-text-2); }
.mgr-chip {
  display: inline-block; margin-top: 3px; padding: 1px 6px; border-radius: 4px;
  background: var(--m-panel-alt); border: 1px solid var(--m-border);
  font-size: 10px; color: var(--m-text-2);
}

.mgr-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; background: #3A3D44; vertical-align: 1px; }
.mgr-dot.in-game { background: var(--m-success); box-shadow: 0 0 7px rgba(61,220,132,.7); }
.mgr-dot.starting { background: var(--m-warning); }
.mgr-dot.offline { background: #3A3D44; }

.mgr-ok { color: var(--m-success); }
.mgr-bad { color: var(--m-danger); }
.mgr-warn { color: var(--m-warning); }
.mgr-dim { color: var(--m-text-2); }

.mgr-actions { display: flex; gap: 5px; justify-content: flex-end; }

/* ---------- box model ----------
   index.html carries a bare `input { ... }` rule written for the login card. It is a type selector and it
   is loaded after this file, so every property this file does not set also lands on the controls in here:
   most damagingly a 14px top / 12px bottom margin, which put the launch bar's inputs 14px lower than the
   selects beside them and left LAUNCH CLIENT sitting on its own line. Nothing in this view wants any of
   that - the dashboard's own inputs each override it, the ones here never did. */
.mgr input, .mgr select { margin: 0; }
/* Checkboxes and sliders are inputs too, so the same rule was giving them box padding, a border and a
   dark background. They are left with only the properties their own classes set (size, accent colour). */
.mgr input[type="checkbox"], .mgr input[type="range"] {
  padding: 0; border: none; border-radius: 0; background: none;
}

/* ---------- launch bar ---------- */
.mgr-launchbar {
  border-top: 1px solid var(--m-border); background: var(--m-panel); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 12px;
}
/* A grid rather than a wrapping flex row: every field then sits in the same row track and lines up by
   construction, however wide the labels or the saved-places list happen to be. As a flex row it silently
   wrapped, which is what actually put LAUNCH CLIENT on a second line at narrower widths. */
.mgr-row {
  display: grid;
  /* minmax(0, …) rather than a hard minimum: a grid whose tracks cannot shrink does not shrink, it spills
     a cell onto an implicit second row, which is the wrapping this replaced. The tracks give way instead. */
  grid-template-columns: minmax(0, 2.2fr) 108px minmax(0, 1fr) auto;
  gap: 12px 14px;
  align-items: end;
}
.mgr-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mgr-field.mgr-full { grid-column: 1 / -1; }
.mgr-placewrap { display: flex; gap: 6px; min-width: 0; }
.mgr-placewrap input { flex: 1 1 110px; min-width: 0; }
/* The saved-places list must never squeeze the Place ID box out of existence, which is what a plain
   flex row did: the select's widest option decided the split and the input was left a few pixels wide. */
.mgr-placewrap select { flex: 0 1 auto; max-width: 210px; min-width: 0; }
.mgr-launch-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.mgr-progress { color: var(--m-text-2); font-size: 12px; white-space: nowrap; }

/* Below this the four tracks stop being readable side by side, so the row becomes two columns and the
   Place ID takes the full width for itself. */
@media (max-width: 1000px) {
  .mgr-row { grid-template-columns: 1fr 1fr; }
  .mgr-row > .mgr-field:first-child { grid-column: 1 / -1; }
  .mgr-launch-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ---------- settings ---------- */
.mgr-settings { display: flex; gap: 0; min-height: 420px; }
.mgr-subnav {
  width: 168px; flex: 0 0 168px; padding: 14px 10px; border-right: 1px solid var(--m-border); background: var(--m-window);
  display: flex; flex-direction: column; gap: 3px;
}
.mgr-subtab {
  text-align: left; padding: 8px 11px; border-radius: 6px; border: 1px solid transparent;
  background: none; color: var(--m-text-2); font: 500 12.5px 'Segoe UI', sans-serif; cursor: pointer;
}
.mgr-subtab:hover { background: rgba(255,255,255,.045); color: var(--m-text); }
.mgr-subtab.active { background: var(--m-panel-alt); border-color: var(--m-border); color: var(--m-text); }

.mgr-panels { flex: 1; padding: 16px; min-width: 0; }
.mgr-card {
  background: var(--m-panel-alt); border: 1px solid var(--m-border); border-radius: 7px;
  padding: 13px 14px; margin-bottom: 10px;
}
.mgr-card-title { font-weight: 600; font-size: 12.5px; }
.mgr-card-desc { font-size: 11.5px; color: var(--m-text-2); margin-top: 5px; }
.mgr-card-row { display: flex; align-items: center; gap: 9px; }
.mgr-card-row + .mgr-card-desc { margin-left: 26px; }

.mgr-switch { width: 15px; height: 15px; accent-color: var(--m-accent); cursor: pointer; }
.mgr-inline { display: flex; align-items: center; gap: 8px; margin: 9px 0 0 26px; }
.mgr-inline input[type="range"] { flex: 0 0 170px; accent-color: var(--m-accent); }
/* A slider whose checkbox is off: the app disables it there too, so it should read as unavailable
   rather than as a control that silently does nothing. */
.mgr-inline input[type="range"]:disabled { opacity: .4; cursor: default; }
.mgr-inline input[type="number"] { width: 76px; }
.mgr-value { font-size: 12px; color: var(--m-text-2); min-width: 34px; }

/* ---------- status banner ---------- */
.mgr-banner {
  display: flex; align-items: center; gap: 9px; padding: 9px 16px; font-size: 12px;
  border-bottom: 1px solid var(--m-border);
}
.mgr-banner.online { background: rgba(61,220,132,.08); color: var(--m-success); }
.mgr-banner.offline { background: rgba(255,200,87,.08); color: var(--m-warning); }
.mgr-banner .mgr-banner-note { color: var(--m-text-2); }

/* ---------- download ---------- */
.mgr-download {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(0,122,204,.14), rgba(0,122,204,.05));
  border: 1px solid rgba(0,122,204,.35); border-radius: 8px; padding: 14px 16px; margin-bottom: 14px;
}
.mgr-download h3 { margin: 0; font-size: 13.5px; font-weight: 600; }
.mgr-download p { margin: 4px 0 0; font-size: 11.5px; color: var(--m-text-2); }

/* ---------- empty / loading ---------- */
.mgr-empty { text-align: center; padding: 38px 16px; color: var(--m-text-2); font-size: 12.5px; }
.mgr-empty strong { display: block; color: var(--m-text); font-size: 14px; margin-bottom: 6px; }