faction_war_dispatch_bot/static/styles.css

/* --- 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; }
.faction-card .controls { display:flex; gap: 0.5rem; align-items:center; margin-bottom: 6px; }
.faction-card .controls input { padding: 0.5rem; border-radius:6px; border: none; }

/* 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; }

/* 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; }