/* --- base --- */
body {
    font-family: Arial, sans-serif;
    background-color: #1e1e2f;
    color: #f0f0f0;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

.container {
    width: 96%;
    max-width: 1400px;
    margin: 1.5rem auto;
}

/* top bar */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.interval-box {
    background-color: #3a3a4d;
    padding: 0.5rem 0.8rem;
    border-radius: 8px;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.interval-box label { color: #ffcc66; font-size: 0.9rem; margin-right: 8px; }
.interval-box input { width: 80px; padding: 6px; border-radius: 6px; border: none; }

/* main split */
.main-row {
    display: flex;
    gap: 1.5rem;
}

/* left column: stacked friendly / enemy */
.left-col {
    width: 48%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* right column: groups grid */
.right-col {
    width: 52%;
}

.groups-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* group card */
.group {
    background: #232331;
    border-radius: 10px;
    padding: 0.6rem;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: 1px solid rgba(255,255,255,0.03);
}

.group-title {
    font-weight: bold;
    color: #ffcc66;
    margin-bottom: 4px;
}

/* zones layout inside group */
.group-zones {
    display: flex;
    gap: 0.5rem;
    height: 100%;
}

/* drop zones */
.drop-zone {
    flex: 1;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
    border-radius: 8px;
    border: 2px dashed rgba(255,255,255,0.03);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
    overflow-y: auto;
    min-width: 0;
}

/* subtle label */
.zone-label {
    font-size: 0.9rem;
    color: #99a7bf;
    margin-bottom: 4px;
}

/* highlight when a valid draggable is over */
.drop-zone.dragover-valid {
    background: rgba(51,153,255,0.06);
    border-color: rgba(102,204,255,0.4);
}

/* invalid dragover */
.drop-zone.dragover-invalid {
    background: rgba(255,77,77,0.06);
    border-color: rgba(255,77,77,0.4);
}

/* friendly/enemy specific coloring for zone headers */
.friendly-zone .zone-label { color: #8fd38f; }
.enemy-zone .zone-label { color: #ff9b9b; }

/* Faction card containers on left */
.faction-card.small {
    background-color: #2c2c3e;
    padding: 1rem;
    border-radius: 10px;
    box-shadow: 0 0 18px rgba(0,0,0,0.45);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.faction-card.small h2 { color: #66ccff; margin: 0; }

/* Controls row - wraps both populate and status controls */
.faction-card .controls-row {
    display: flex;
    gap: 0.3rem;
    align-items: center;
    margin-bottom: 6px;
    flex-wrap: nowrap;
}

.faction-card .controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.faction-card .controls input { padding: 0.5rem; border-radius:6px; border: none; }

/* Status controls section */
.faction-card .status-controls {
    display: flex;
    gap: 0.3rem;
    align-items: center;
    background-color: #3a3a4d;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
}
.faction-card .status-controls label {
    color: #ffcc66;
    font-size: 0.75rem;
    white-space: nowrap;
}
.faction-card .status-controls input {
    width: 38px;
    padding: 2px 3px;
    border-radius: 4px;
    border: none;
    text-align: center;
    font-size: 0.85rem;
    appearance: textfield;
    -moz-appearance: textfield;
}

/* Hide spinner buttons in Chrome, Safari, Edge */
.faction-card .status-controls input::-webkit-outer-spin-button,
.faction-card .status-controls input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

/* Status button */
.status-btn {
    padding: 0.5rem 1rem;
    min-width: 60px;
    background-color: #4CAF50;
    color: white;
    transition: background-color 0.3s;
}
.status-btn:hover {
    opacity: 0.9;
}
.status-btn[data-running="true"] {
    background-color: #ff6b6b;
}

/* member list in left column */
.member-list {
    max-height: 380px;
    overflow-y: auto;
    background: #1a1a26;
    padding: 0.6rem;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.02);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* member card (used both in lists and zones) */
.member-card {
    background-color: #3a3a4d;
    color: #f0f0f0;
    padding: 0.7rem;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.8rem;
    box-shadow: 0 0 10px rgba(0,0,0,0.45);
    cursor: grab;
}

/* name and stat blocks */
.member-card .name { min-width: 110px; color: #66ccff; font-weight: bold; }
.member-card .stats { color: #f0f0f0; font-size: 0.9rem; line-height: 1.2; }

/* Friendly name color */
.member-card.friendly .name {
    color: #4cff4c; /* Green */
}

/* Enemy name color */
.member-card.enemy .name {
    color: #ff4c4c; /* Red */
}


/* small status span; color is applied by classes */
.status-text { font-weight: 700; padding-left: 6px; }

/* status color classes */
.status-ok { color: #28a745; text-shadow: 0 0 2px rgba(40,167,69,0.25); }
.status-traveling { color: #3399ff; text-shadow: 0 0 2px rgba(51,153,255,0.25); }
.status-hospitalized { color: #ff4d4d; text-shadow: 0 0 2px rgba(255,77,77,0.25); }

/* buttons */
button {
    padding: 0.5rem 0.7rem;
    border-radius: 6px;
    border: none;
    background-color: #66ccff;
    color: #1e1e2f;
    font-weight: bold;
    cursor: pointer;
}
button:hover { background-color: #3399ff; }

/* Bot control button */
.bot-btn {
    background-color: #4CAF50;
    color: white;
    padding: 0.6rem 1rem;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 8px;
    transition: background-color 0.3s;
}

.bot-btn:hover {
    opacity: 0.9;
}

.bot-btn[data-running="true"] {
    background-color: #ff4444;
}

/* Reset button */
.reset-btn {
    background-color: #ff8800;
    color: white;
}

.reset-btn:hover {
    background-color: #ff6600;
}

/* Top controls layout */
.top-controls {
    display: flex;
    gap: 1rem;
    align-items: center;
}

/* scrollbar niceties for drop zones and lists */
.member-list::-webkit-scrollbar, .drop-zone::-webkit-scrollbar { width: 8px; height: 8px; }
.member-list::-webkit-scrollbar-thumb, .drop-zone::-webkit-scrollbar-thumb { background: #66ccff; border-radius: 4px; }

/* =============================
   Config Page Styles
   ============================= */

/* Navigation link */
.nav-link {
    color: #66ccff;
    text-decoration: none;
    font-weight: bold;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    transition: background-color 0.3s;
}

.nav-link:hover {
    background-color: rgba(102, 204, 255, 0.1);
}

/* Config page layout */
.config-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 800px;
    margin: 0 auto;
}

.config-section {
    width: 100%;
}

.config-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.config-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.config-group label {
    color: #66ccff;
    font-weight: bold;
    font-size: 1rem;
}

.config-description {
    color: #99a7bf;
    font-size: 0.85rem;
    margin: 0;
    font-style: italic;
}

.config-input {
    padding: 0.6rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: #1a1a26;
    color: #f0f0f0;
    font-size: 0.95rem;
}

.config-input:focus {
    outline: none;
    border-color: #66ccff;
}

.config-save-btn {
    align-self: flex-start;
    padding: 0.5rem 1.5rem;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}

.config-save-btn:hover {
    background-color: #45a049;
}

/* Users & Activity Log Page */
.users-log-layout {
    display: flex;
    gap: 1.5rem;
    height: calc(100vh - 150px);
}

.users-panel {
    width: 300px;
    flex-shrink: 0;
}

.log-panel {
    flex: 1;
    min-width: 0;
}

.log-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.users-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 600px;
    overflow-y: auto;
}

.user-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem;
    background-color: #2a2a3d;
    border-radius: 6px;
}

.user-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #4CAF50;
    box-shadow: 0 0 6px #4CAF50;
}

.user-name {
    color: #f0f0f0;
    font-size: 0.95rem;
}

.no-users, .no-logs {
    color: #99a7bf;
    font-style: italic;
    text-align: center;
    padding: 2rem;
}

.log-container {
    background-color: #1a1a26;
    border-radius: 8px;
    padding: 1rem;
    height: calc(100vh - 220px);
    overflow-y: auto;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
}

.log-entry {
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.log-entry:last-child {
    border-bottom: none;
}

.log-time {
    color: #66ccff;
    font-weight: bold;
    min-width: 70px;
}

.log-user {
    color: #ffcc66;
    font-weight: bold;
    min-width: 100px;
}

.log-action {
    color: #4CAF50;
}

.log-details {
    color: #99a7bf;
}

.info-text {
    color: #99a7bf;
    font-size: 0.85rem;
    font-style: italic;
}