/*
 * WAR COMMAND DASHBOARD - GOLDEN MASTER
 * Copyright (c) 2026 DoBandB - Denise W.
 * Version: 107.23 (STABLE V11)
 */

:root { --bg: #0b0c10; --card: #1f2833; --text: #c5c6c7; --cyan: #66fcf1; --blue: #45a29e; --red: #ff4d4d; --green: #6bcB77; --gold: #ffd700; --border: #2d303e; }
body { background: var(--bg); color: var(--text); font-family: 'Segoe UI', sans-serif; margin: 0; padding-bottom: 60px; font-size: 16px; overflow-y: auto; }
.wrap { max-width: 1450px; margin: 0 auto; padding: 10px; }
.navbar { background: #15161c; border-bottom: 2px solid var(--blue); padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; position: sticky; top:0; z-index: 500; box-shadow: 0 5px 15px rgba(0,0,0,0.5); flex-wrap: wrap; gap: 10px; }
.logo { font-weight: bold; letter-spacing: 1px; text-transform: uppercase; display: flex; flex-direction: column; line-height: 1.2; cursor:pointer; }
.logo-main { color: var(--cyan); font-size: 1.2rem; }
.logo-sub { color: #fff; font-size: 0.8rem; letter-spacing: 3px; }
.menu { display: flex; gap: 5px; flex-wrap: wrap; }
.m-btn { background: transparent; border: 1px solid #444; color: #888; padding: 6px 12px; border-radius: 20px; cursor: pointer; transition: 0.2s; font-size: 0.85rem; }
.m-btn.active { background: var(--blue); color: #000; border-color: var(--cyan); font-weight: bold; }
.m-btn:hover { border-color: #fff; color: #fff; }
.btn-bagger { background: linear-gradient(45deg, #ff4d4d, #cc0000); color: white; border: 1px solid #ff9999; font-weight: bold; box-shadow: 0 0 10px #ff0000; animation: pulse 2s infinite; }
.btn-bagger:active { transform: scale(0.95); background: #fff; color: red; }
.btn-msg { background: #222; border: 1px solid #444; color: #fff; font-size: 1.2rem; padding: 3px 10px; }
.btn-msg:hover { background: #333; border-color: var(--cyan); }
.btn-r4-msg { border-color: var(--gold); color: var(--gold); }
.btn-del { background: #331010; color: var(--red); border: 1px solid var(--red); padding: 5px 10px; font-size: 0.8rem; cursor: pointer; border-radius: 4px; }
.btn-go { background: var(--blue); color: #000; border: none; padding: 10px 20px; border-radius: 6px; font-weight: bold; cursor: pointer; }
.btn-go:hover { background: var(--cyan); }
.btn-backup { background: #d63384; color: #fff; margin-left: 10px; }
.btn-restore { background: #e0a800; color: #000; margin-left: 5px; }
.card-box { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 15px; margin-bottom: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.4); display: block; width: 100%; box-sizing: border-box; overflow: visible !important; }
.head { border-bottom: 1px solid #333; padding-bottom: 10px; margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.title { margin: 0; color: #fff; font-weight: 300; letter-spacing: 1px; font-size: 1rem; }
.timer-grid-layout { display: flex; flex-direction: column; gap: 15px; }
.timer-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; align-items: end; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 15px; align-items: end; }
input, select, textarea { background: #0f1015; border: 1px solid #444; color: #fff; padding: 10px; border-radius: 6px; width: 100%; box-sizing: border-box; font-family: inherit; font-size: 16px; }
.map-frame { width: 100%; aspect-ratio: 1/1; margin: 0 auto; position: relative; background: #050505; border: 2px solid #444; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 5% 5%; box-shadow: 0 0 50px rgba(0,0,0,0.5); overflow: hidden; }
.map-tile { position: absolute; border: 1px solid rgba(255,255,255,0.3); display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 0.55em; line-height: 1.1; color: #fff; text-align: center; box-sizing: border-box; overflow: hidden; text-shadow: 0 1px 2px #000; transition: all 0.2s ease; cursor: pointer; transform: translate(-50%, 50%); z-index: 10; }
.map-tile:hover { z-index: 100; border-color: #fff; box-shadow: 0 0 10px #fff; transform: translate(-50%, 50%) scale(1.2); }
.c-base { background: rgba(80, 80, 80, 0.6); }
.c-city { background: rgba(69, 162, 158, 0.6); border-color: #66fcf1; }
.c-capitol { background: rgba(255, 215, 0, 0.4); border-color: gold; }
.map-tile.active-timer { border-width: 2px; border-style: solid; animation: pulse-border 2s infinite; }
.map-tile.active-timer::after { content: "⚔️"; font-size: 1.5em; position: absolute; }
.tt { position: fixed; background: rgba(20, 20, 30, 0.95); border: 1px solid #66fcf1; padding: 10px; border-radius: 6px; pointer-events: none; display: none; z-index: 6000; font-size: 14px; box-shadow: 0 5px 15px #000; white-space: nowrap; max-width: 300px; white-space: normal; }
table { width: 100%; border-collapse: collapse; min-width: 600px; } 
th { text-align: left; color: var(--blue); padding: 10px; border-bottom: 1px solid #444; font-size: 0.75rem; } 
td { padding: 10px 8px; border-bottom: 1px solid #2a2a35; vertical-align: middle; font-size: 0.9rem; }
.chart-con { height: 500px; background: #15161d; padding: 10px; border-radius: 10px; }
.pie-con { height: 550px; position: relative; margin-top: 20px; }
.u-item { background:#15161c; padding:10px; border-radius:6px; border:1px solid #333; display:flex; justify-content:space-between; align-items:center; width: 100%; box-sizing: border-box; margin-bottom:5px; }
.role-sel { background:#222; border:1px solid #555; padding:2px; font-size:0.8rem; border-radius:4px; margin-left:10px; width:50px; } 
.tag-ok { background: rgba(107, 203, 119, 0.1); color: var(--green); padding: 3px 8px; border-radius: 4px; font-weight: bold; }
.tag-bad { background: rgba(255, 77, 77, 0.1); color: var(--red); padding: 3px 8px; border-radius: 4px; font-weight: bold; }
.act-conquer { color: #ff6b6b; font-weight: bold; } .act-abandon { color: #888; font-style: italic; } .act-protect { color: #4d96ff; font-weight: bold; } .act-defend { color: #ff9f43; font-weight: bold; text-transform: uppercase; } .act-extend_protect { color: #66fcf1; font-weight: bold; }
.trend-up { color: var(--green); font-weight: bold; } .trend-down { color: var(--red); font-weight: bold; } .trend-flat { color: #888; }
/* V10 FIX: View Show Grid */
.view { display: none; } .view.show { display: block; animation: fade 0.3s; }
.hide-mob { display: block; }
.toggle-group { display: flex; gap: 15px; margin-bottom: 5px; }
.toggle-opt { display: flex; align-items: center; gap: 5px; cursor: pointer; font-size: 0.9rem; } .toggle-opt input { width: auto; margin: 0; }
.st-n { background: transparent; border: none; border-bottom: 1px solid #444; color: var(--gold); width: 100%; font-weight: bold; text-align: center; } 
.st-p { background: #000; border: 1px solid #444; color: #fff; width: 80px; text-align: right; padding: 5px; font-family: monospace; }
.is-dirty { border-color: var(--gold) !important; background: #2a2a20 !important; }
.autocomplete-wrapper { position: relative; width: 100%; }
.autocomplete-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 2500; background: #222; border: 1px solid #444; max-height: 200px; overflow-y: auto; display: none; box-shadow: 0 10px 20px #000; }
.autocomplete-item { padding: 8px; cursor: pointer; border-bottom: 1px solid #333; color: #ccc; background:#222; }
.autocomplete-item:hover { background: var(--blue); color: #000; }
.edit-icon { cursor: pointer; margin-left: 5px; opacity: 0.5; font-size: 0.8rem; }
.edit-icon:hover { opacity: 1; transform: scale(1.2); }
.modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.9); z-index:2000; justify-content:center; align-items:center; } 
.m-box { background: var(--card); padding: 30px; border-radius: 10px; border: 1px solid var(--cyan); width: 90%; max-width: 300px; text-align: center; }
.ai-status-msg { font-size: 0.9rem; color: var(--gold); margin-top: 5px; font-weight: bold; }
.ai-hint { font-size: 0.85rem; color: #888; margin-top: 10px; line-height: 1.4; border-top: 1px solid #333; padding-top: 10px; background: rgba(0,0,0,0.2); padding: 10px; border-radius: 4px; }
.debug-inline { background: #111; border: 1px solid #444; padding: 10px; border-radius: 6px; margin-top: 20px; display: none; }
.debug-log { background: #000; color: #0f0; font-family: monospace; height: 400px; max-height: 60vh; overflow-y: scroll; padding: 10px; font-size: 13px; border: 1px solid #333; white-space: pre-wrap; margin-top: 5px; }
.filter-bar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:10px; background:#15161c; padding:10px; border-radius:6px; }
.filter-inp { width:auto; flex:1; min-width:150px; }
.imp-section { background:#15161c; padding:20px; border-radius:10px; margin-bottom:20px; border-left:4px solid #333; }
.imp-section h4 { margin-top:0; color:var(--cyan); border-bottom:1px solid #333; padding-bottom:10px; }
.ai-box { border:1px dashed var(--cyan); padding:20px; border-radius:10px; margin-bottom:20px; background: rgba(102, 252, 241, 0.05); }

@media (max-width: 768px) { .hide-mob { display: none; } .navbar { flex-direction: column; align-items: stretch; } .menu { justify-content: center; width: 100%; } .m-btn { flex: 1; text-align: center; } .form-grid { grid-template-columns: 1fr 1fr; } .timer-row { grid-template-columns: 1fr; } }
@keyframes fade { from {opacity:0} to {opacity:1} } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 1; } } @keyframes pulse-border { 0% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(255, 77, 77, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0); } }

/* V10 ADDITIONS: User Management & Help */
.user-list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; max-height: 400px; overflow-y: auto; padding-right: 5px; }
.user-card { background: #15161c; border: 1px solid #333; border-radius: 6px; padding: 10px; display: flex; justify-content: space-between; align-items: center; }
.user-card:hover { border-color: var(--blue); background: #1a1b22; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: #333; box-shadow: 0 0 5px rgba(0,0,0,0.5); margin-right:5px; }
.status-online { background: var(--green); box-shadow: 0 0 8px var(--green); animation: pulse 2s infinite; }
.status-offline { background: var(--red); opacity: 0.5; }

.help-icon { display:inline-block; margin-left:8px; cursor:pointer; opacity:0.8; vertical-align:middle; width:16px; height:16px; transition:all 0.2s; }
.help-icon:hover { opacity:1; transform:scale(1.2); }
.help-tooltip { position:fixed; z-index:5000; background:rgba(20,20,30,0.98); border:1px solid var(--cyan); padding:15px; border-radius:8px; width:320px; max-width:90vw; box-shadow:0 10px 40px #000; display:none; font-size:0.9rem; line-height:1.5; color:#fff; pointer-events:auto; }
.help-title { color:var(--gold); font-weight:bold; margin-bottom:8px; border-bottom:1px solid #444; padding-bottom:5px; font-size:1rem; }
.help-content { margin-bottom:10px; }
.help-edit-area { width:100%; min-height:100px; background:#111; color:#fff; border:1px solid #444; padding:5px; margin-bottom:5px; resize:vertical; font-family:inherit; font-size:0.9rem; }
/* V11 Additions */
.chk-filter { width:18px; height:18px; cursor:pointer; accent-color: var(--cyan); }