/* MXFend Monitoring app shell (app.mxfend.com). Structural layout only —
   colors, buttons, alerts, pills, and card surfaces reuse mxfend.css's
   existing tokens/classes (--mx-*, .btn, .alert, .pill, .glass) so the
   app shell stays visually consistent with mxfend.com. Class names are
   prefixed mxa- to avoid any collision with mxfend.css's own selectors. */

.mxa-wrap {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 64px 1fr;
  min-height: 100vh;
  background: var(--mx-bg-subtle);
}

.mxa-sidebar {
  grid-row: 1 / -1;
  grid-column: 1;
  background: var(--mx-bg);
  border-right: 1px solid var(--mx-border);
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
}

.mxa-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  padding: 0 8px 20px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--mx-border);
}

.mxa-logo-mark {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--mx-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mxa-logo-text {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--mx-ink-strong);
}

.mxa-nav-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--mx-muted-soft);
  margin: 14px 8px 6px;
}

.mxa-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--mx-muted);
  text-decoration: none;
  transition: background .15s, color .15s;
}

.mxa-nav-item:hover { background: var(--mx-surface-2); color: var(--mx-ink); }
.mxa-nav-item.is-active { background: var(--mx-primary-soft); color: var(--mx-primary); }
.mxa-nav-item.is-disabled { color: var(--mx-muted-soft); cursor: default; }
.mxa-nav-item svg { flex-shrink: 0; width: 15px; height: 15px; }

.mxa-sidebar-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--mx-border);
}

.mxa-user-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; }

.mxa-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--mx-primary-soft); color: var(--mx-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}

.mxa-topbar {
  grid-row: 1;
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  border-bottom: 1px solid var(--mx-border);
  background: var(--mx-bg);
}

.mxa-topbar-title { font-size: 15px; font-weight: 700; color: var(--mx-ink-strong); }

.mxa-main { grid-row: 2; grid-column: 2; padding: 28px; overflow-y: auto; }

.mxa-page-hd { margin-bottom: 20px; }
.mxa-page-hd h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--mx-ink-strong); margin-bottom: 6px; }
.mxa-page-hd p { font-size: 14px; color: var(--mx-muted); }

.mxa-section-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--mx-muted-soft); margin-bottom: 10px;
}

.mxa-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.mxa-field-label { font-size: 13px; font-weight: 600; color: var(--mx-ink); }
.mxa-field-hint { font-size: 12px; color: var(--mx-muted); }
.mxa-field-error { font-size: 12px; color: var(--mx-danger); }

.mxa-input {
  width: 100%;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--mx-border-strong);
  background: var(--mx-bg);
  color: var(--mx-ink);
  font-size: 14px;
}

.mxa-input:focus { outline: none; border-color: var(--mx-primary); box-shadow: 0 0 0 3px var(--mx-primary-soft); }
.mxa-input.is-error { border-color: var(--mx-danger); }

.mxa-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin: 18px 0 4px;
}

.mxa-check-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--mx-surface-2); border: 1px solid var(--mx-border);
  font-size: 13px; font-weight: 600; color: var(--mx-muted);
}

.mxa-check-chip::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--mx-muted-soft); flex-shrink: 0;
}

@media (max-width: 860px) {
  .mxa-wrap { grid-template-columns: 1fr; grid-template-rows: 64px auto 1fr; }
  .mxa-sidebar { grid-row: 2; grid-column: 1; flex-direction: row; flex-wrap: wrap; }
  .mxa-topbar { grid-column: 1; }
  .mxa-main { grid-column: 1; grid-row: 3; }
}