.amm-wrapper { font-family: inherit; width: 100%; display: flex; flex-direction: column; align-items: center; margin: 0 auto; }
.amm-main-title { text-align: center; margin-bottom: 30px; font-weight: bold; width: 100%; }
.amm-server-block { margin-bottom: 25px; width: 100%; display: flex; flex-direction: column; align-items: center; position: relative; }
.amm-server-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding: 0 10px; width: 100%; }
.amm-server-title { font-weight: bold; }

.amm-refresh-btn { background: none; border: none; color: var(--btn-color); cursor: pointer; font-size: 13px; transition: opacity 0.2s; padding: 0; }
.amm-refresh-btn:hover { opacity: 0.7; }
.amm-refresh-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.amm-bar-container { position: relative; display: flex; flex-direction: column; background: var(--bg-box); border-radius: 8px; width: 100%; padding: 15px; }
.amm-bar-inner { position: relative; display: flex; gap: 15px; width: 100%; justify-content: space-between; align-items: center; padding-bottom: 15px; }

/* Auto Loading State */
.amm-server-block.amm-is-loading { opacity: 0.8; pointer-events: none; }

/* Layout classes */
.amm-layout-right { flex-direction: row; justify-content: space-between; align-items: center; } 
.amm-layout-left { flex-direction: row-reverse; justify-content: space-between; align-items: center; } 
.amm-layout-top { flex-direction: column; justify-content: center; align-items: stretch; } 
.amm-layout-bottom { flex-direction: column-reverse; justify-content: center; align-items: stretch; }

/* Graph positioning margins */
.amm-graph-container { width: 100%; position: relative; }
.amm-graph-container.pos-outside_bottom { margin-top: 15px; }
.amm-graph-container.pos-outside_top { margin-bottom: 15px; }
.amm-graph-container.pos-inside_bottom { margin-top: 10px; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 15px; }
.amm-graph-container.pos-inside_top { margin-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 15px; }

/* Status Position */
.amm-status-pos-above { flex-direction: column !important; align-items: stretch !important; }
.amm-status-pos-above .amm-status-badge { order: 1; margin-bottom: 10px; }
.amm-status-pos-above .amm-history-bars { order: 2; }

.amm-status-pos-below { flex-direction: column !important; align-items: stretch !important; }
.amm-status-pos-below .amm-history-bars { order: 1; margin-bottom: 10px; }
.amm-status-pos-below .amm-status-badge { order: 2; }

.amm-ping-line { display: block; width: 100%; text-align: inherit; }

/* History Bars Logic */
.amm-history-bars { display: flex; direction: ltr; flex-grow: 1; flex-wrap: nowrap; overflow: hidden; margin-bottom: 5px; }
.amm-layout-left .amm-history-bars, .amm-layout-right .amm-history-bars { width: auto; flex-basis: 0; }
.amm-layout-top .amm-history-bars, .amm-layout-bottom .amm-history-bars { width: 100%; justify-content: center;}

/* Individual Bar Logic */
.amm-bar { border-radius: 3px; transition: background 0.3s ease; flex: 1 1 0; min-width: 2px; position: relative; cursor: pointer; }
.amm-bar:hover { opacity: 0.7; }
.amm-bar[data-lvl="unknown"] { background-color: var(--c-unknown, rgba(255, 255, 255, 0.05)); }

/* Timeline Labels under Bars */
.amm-bar-time {
    position: absolute;
    top: 100%;
    margin-top: 6px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: var(--btn-color);
    white-space: nowrap;
    direction: ltr;
    pointer-events: none;
    z-index: 10;
}
@media (max-width: 767px) {
    .amm-bar-time.half-mark { display: none !important; }
    .amm-bar-time { font-size: 9px; }
}

/* History Bar Colors */
.amm-bar[data-lvl="l1"] { background-color: var(--c-l1); }
.amm-bar[data-lvl="l2"] { background-color: var(--c-l2); }
.amm-bar[data-lvl="l3"] { background-color: var(--c-l3); }
.amm-bar[data-lvl="l4"] { background-color: var(--c-l4); }
.amm-bar[data-lvl="off"] { background-color: var(--c-off); }

/* Badge Layout */
.amm-status-badge { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.amm-status-texts { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.amm-led-wrapper { display: flex; align-items: center; justify-content: center; }

/* 1. LED Position */
.led-inline-right .amm-status-badge { flex-direction: row; }
.led-inline-left .amm-status-badge { flex-direction: row-reverse; }
.led-absolute-left .amm-status-badge, .led-absolute-right .amm-status-badge { display: contents; }

.led-absolute-left .amm-led-wrapper { margin-right: auto; margin-left: 0; }
.amm-layout-right.led-absolute-left .amm-led-wrapper { order: 99; }
.amm-layout-right.led-absolute-left .amm-history-bars { order: 1; }
.amm-layout-right.led-absolute-left .amm-status-texts { order: 2; }
.amm-layout-left.led-absolute-left .amm-led-wrapper { order: -99; }
.amm-layout-left.led-absolute-left .amm-history-bars { order: 1; }
.amm-layout-left.led-absolute-left .amm-status-texts { order: 2; }
.amm-layout-top.led-absolute-left .amm-led-wrapper, 
.amm-layout-bottom.led-absolute-left .amm-led-wrapper { align-self: flex-end; margin-right: 0; }

.led-absolute-right .amm-led-wrapper { margin-left: auto; margin-right: 0; }
.amm-layout-right.led-absolute-right .amm-led-wrapper { order: -99; }
.amm-layout-right.led-absolute-right .amm-history-bars { order: 1; }
.amm-layout-right.led-absolute-right .amm-status-texts { order: 2; }
.amm-layout-left.led-absolute-right .amm-led-wrapper { order: 99; }
.amm-layout-left.led-absolute-right .amm-history-bars { order: 1; }
.amm-layout-left.led-absolute-right .amm-status-texts { order: 2; }
.amm-layout-top.led-absolute-right .amm-led-wrapper, 
.amm-layout-bottom.led-absolute-right .amm-led-wrapper { align-self: flex-start; margin-left: 0; }

/* Dynamic Texts */
.is-l1 .amm-status-text, .is-l1 .amm-ping-val { color: var(--c-l1); }
.is-l2 .amm-status-text, .is-l2 .amm-ping-val { color: var(--c-l2); }
.is-l3 .amm-status-text, .is-l3 .amm-ping-val { color: var(--c-l3); }
.is-l4 .amm-status-text, .is-l4 .amm-ping-val { color: var(--c-l4); }
.is-off .amm-status-text { color: var(--c-off); }
.is-off .amm-ping-wrap { display: none !important; }

/* Dynamic LED */
.amm-led { display: block; width: 12px; height: 12px; border-radius: 50%; animation-name: ammBlink; animation-iteration-count: infinite; animation-timing-function: ease-in-out; flex-shrink: 0; }
.is-l1 .amm-led { background-color: var(--c-l1); box-shadow: 0 0 8px var(--c-l1); animation-duration: var(--led-l1); }
.is-l2 .amm-led { background-color: var(--c-l2); box-shadow: 0 0 8px var(--c-l2); animation-duration: var(--led-l2); }
.is-l3 .amm-led { background-color: var(--c-l3); box-shadow: 0 0 8px var(--c-l3); animation-duration: var(--led-l3); }
.is-l4 .amm-led { background-color: var(--c-l4); box-shadow: 0 0 8px var(--c-l4); animation-duration: var(--led-l4); }
.is-off .amm-led { background-color: var(--c-off); box-shadow: 0 0 8px var(--c-off); animation-duration: var(--led-off); }

@keyframes ammBlink { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }
.amm-server-desc { text-align: right; margin-top: 8px; padding-right: 10px; color: #666; width: 100%; }

/* Sortable table handle */
.amm-sortable-table tbody tr { cursor: default; }