/* monitoring.css — CSS модуля modules\monitoring */

.monitoring__container { display: flex; justify-content: space-between; align-items: center; }
.monitoring__circles { margin-bottom: -10px; }
.monitoring__circle { display: block; float: left; width: 85px; line-height: 1.2; }
.monitoring__circle canvas { vertical-align: top; }
.monitoring__circle strong { position: relative; top: 5px; left: -41px; width: 100%; line-height: 40px; font-size: 13px; color: #5AB9EA; font-weight: 700; }
.monitoring__circle strong i { font-style: normal; font-size: 0.6em; font-weight: 400; }
.monitoring__circle span { display: block; color: #aaa; margin-top: 12px; }
.monitoring__content { background: #efefef; color: #000; margin-bottom: 10px; border-radius: 3px 3px 0px 0px; }
.monitoring__content:hover { cursor: pointer; }
.monitoring__content-header { display: flex; justify-content: space-between; padding: 10px 10px 0px 10px; }
.monitoring__content-body { padding: 3px 10px 10px 10px; }
.monitoring__content-desc, .monitoring__content-disable { color: #7b7b7b; }
.monitoring__content-name { font-weight: 600; }
.monitoring__content-status {}
.monitoring__content-bar { height: 3px; width: 100%; background: #eaeaea; }
.monitoring__content-bar-value { background: #ff8c40; height: 3px; max-width: 100%; }
.monitoring__content-stats { background: #efefef; color: #000; padding: 10px; border-radius: 3px; }
.monitoring__content-full, .monitoring__content-record { display: flex; justify-content: space-between; }
.monitoring__content-key { font-weight: 600; }
.monitoring__content-value { color: #7b7b7b; }

.monitoring__server-name { font-size: 14px; color: #17a2b8; display: block; text-transform: uppercase; }
.monitoring__server-name a { display: block; color: #17a2b8; font-weight: 700; }
.monitoring__server-name a:hover { text-decoration: none; color: #6CDAEE; }
.monitoring__server-players { display: flex; font-size: 12px; color: #A4B3BA; }
.monitoring__players-section { margin-top: 10px; }
.monitoring__spoiler-header { background: rgba(255,255,255,0.1); border-radius: 6px; padding: 8px 12px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease; border: 1px solid rgba(255,255,255,0.2); }
.monitoring__spoiler-title { color: #ffffff; font-weight: bold; font-size: 13px; }
.monitoring__spoiler-count { color: #a0a0a0; font-size: 11px; }
.monitoring__spoiler-arrow { color: #ffffff; font-size: 12px; transition: transform 0.3s ease; }
.monitoring__players-list-container { animation: slideDown 0.3s ease; overflow: hidden; }
.monitoring__players-list { padding: 8px; background: rgba(0,0,0,0.2); border-radius: 0 0 6px 6px; max-height: 200px; overflow-y: auto; }
.monitoring__player-item { display: flex; align-items: center; padding: 4px 6px; margin: 1px 0; background: rgba(255,255,255,0.05); border-radius: 4px; transition: background 0.2s ease; }
.monitoring__player-avatar { width: 16px; height: 16px; margin-right: 6px; image-rendering: pixelated; border-radius: 2px; }
.monitoring__player-name { color: #ffffff; font-size: 12px; font-family: 'Courier New', monospace; }

.monitoring__spoiler-header:hover { background: rgba(255,255,255,0.15) !important; border-color: rgba(255,255,255,0.3) !important; }
.monitoring__player-item:hover { background: rgba(255,255,255,0.1) !important; }
.monitoring__players-list::-webkit-scrollbar { width: 4px; }
.monitoring__players-list::-webkit-scrollbar-track { background: rgba(255,255,255,0.1); border-radius: 2px; }
.monitoring__players-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 2px; }
.monitoring__players-list::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.5); }
@keyframes slideDown { from { max-height: 0; opacity: 0; } to { max-height: 200px; opacity: 1; } }