/* === Territory Mapper — CSS === */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#0a0e17;--bg2:#111827;--bg3:#1e293b;--bg4:#273548;--text:#f1f5f9;--text2:#94a3b8;--text3:#64748b;--green:#10b981;--green-dark:#065f46;--blue:#3b82f6;--red:#ef4444;--amber:#f59e0b;--gold:#fbbf24;--radius:10px;--radius-lg:14px;--font:'Inter',sans-serif;--font-display:'Plus Jakarta Sans',sans-serif}
html,body{height:100%}
body{font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column}
a{text-decoration:none;color:var(--blue)}
button{cursor:pointer;font-family:var(--font)}
input,select,textarea{font-family:var(--font)}
.container{max-width:1200px;margin:0 auto;padding:0 16px;width:100%}

/* === Header === */
.header{background:var(--bg2);border-bottom:1px solid rgba(255,255,255,.04);padding:12px 0;position:sticky;top:0;z-index:100}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.header-left{display:flex;align-items:center;gap:12px}
.header-logo{font-family:var(--font-display);font-weight:800;font-size:1.1rem;background:linear-gradient(135deg,#3b82f6,#10b981);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.header-logo-sub{font-size:.65rem;color:var(--text3);padding-left:8px;border-left:1px solid rgba(255,255,255,.06);margin-left:8px;display:none}
@media(min-width:640px){.header-logo-sub{display:inline}}
.header-right{display:flex;align-items:center;gap:8px}
.btn-sm{font-size:.75rem;padding:7px 14px;border-radius:var(--radius);border:none;font-weight:600;transition:all .2s}
.btn-outline{background:transparent;border:1px solid rgba(255,255,255,.1);color:var(--text);padding:7px 14px;border-radius:var(--radius);font-size:.75rem;font-weight:600;transition:all .2s}
.btn-outline:hover{border-color:var(--blue);color:var(--blue)}
.btn-primary{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff}
.btn-primary:hover{opacity:.9}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{opacity:.9}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{opacity:.9}
.btn-gold{background:var(--amber);color:#0a0e17}
.btn-gold:hover{opacity:.9}
.badge{font-size:.65rem;padding:3px 10px;border-radius:999px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.badge-servant{background:rgba(59,130,246,.12);color:var(--blue)}
.badge-user{background:rgba(16,185,129,.12);color:var(--green)}

/* === Main Layout === */
.main{flex:1;display:flex;flex-direction:column;position:relative}

/* === Map === */
#map{flex:1;min-height:400px;height:100%;width:100%;z-index:1}

/* === Map Controls Overlay === */
.map-controls{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:10;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;padding:0 16px}
.map-controls .btn{padding:12px 24px;border-radius:var(--radius);border:none;font-weight:700;font-size:.85rem;display:inline-flex;align-items:center;gap:6px;box-shadow:0 4px 20px rgba(0,0,0,.5);transition:all .2s;min-width:100px;justify-content:center}
.map-controls .btn:active{transform:scale(.96)}
.map-controls .btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn-start{background:var(--green);color:#fff}
.btn-start.tracking{background:var(--red);color:#fff;animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.5)}50%{box-shadow:0 0 0 12px rgba(239,68,68,0)}}
.btn-end{background:var(--amber);color:#0a0e17}
.btn-save{background:var(--blue);color:#fff}

/* === Info Panel === */
.info-panel{position:absolute;top:16px;right:16px;z-index:10;background:rgba(15,23,42,.9);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-lg);padding:16px 20px;max-width:220px;width:auto;font-size:.8rem}
.info-panel .stat-row{display:flex;justify-content:space-between;gap:12px;padding:4px 0}
.info-panel .stat-label{color:var(--text3)}
.info-panel .stat-value{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.info-panel .stat-value.green{color:var(--green)}
.info-panel .stat-value.amber{color:var(--amber)}
.info-panel .stat-value.blue{color:var(--blue)}

/* === Pages / Screens === */
.page{display:none;flex-direction:column;flex:1}
.page.active{display:flex}

/* === Auth Page === */
.auth-page{align-items:center;justify-content:center;padding:40px 16px;background:var(--bg)}
.auth-card{background:var(--bg2);border:1px solid rgba(255,255,255,.04);border-radius:var(--radius-lg);padding:40px 32px;max-width:400px;width:100%}
.auth-card h2{font-family:var(--font-display);margin-bottom:4px;font-size:1.5rem}
.auth-card p{color:var(--text2);font-size:.88rem;margin-bottom:24px}
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:.78rem;color:var(--text3);margin-bottom:4px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.form-group input,.form-group select{width:100%;padding:11px 14px;background:var(--bg3);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);color:var(--text);font-size:.9rem;outline:none;transition:border-color .2s}
.form-group input:focus,.form-group select:focus{border-color:var(--blue)}
.form-row{display:flex;gap:10px}
.form-row .form-group{flex:1}
.auth-card .btn{width:100%;padding:12px;border:none;border-radius:var(--radius);font-weight:700;font-size:.9rem}
.auth-card .auth-switch{text-align:center;margin-top:16px;font-size:.82rem;color:var(--text3)}.auth-card .auth-switch a{color:var(--blue);cursor:pointer}
.error-msg{font-size:.78rem;color:var(--red);margin-top:4px;display:none}

/* === Dashboard Page === */
.dashboard{padding:24px 16px}
.dashboard h2{font-family:var(--font-display);margin-bottom:4px}
.dashboard .sub{color:var(--text2);font-size:.9rem;margin-bottom:20px}
.territory-list{display:flex;flex-direction:column;gap:10px}
.territory-item{background:var(--bg2);border:1px solid rgba(255,255,255,.04);border-radius:var(--radius-lg);padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;transition:all .2s}
.territory-item:hover{border-color:rgba(59,130,246,.12)}
.territory-item-left{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.territory-icon{font-size:1.2rem;width:32px;text-align:center}
.territory-info h4{font-size:.92rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.territory-info .meta{font-size:.72rem;color:var(--text3);display:flex;gap:8px;flex-wrap:wrap}
.territory-actions{display:flex;gap:6px;flex-shrink:0}
.territory-actions button{font-size:.7rem;padding:6px 12px;border:none;border-radius:var(--radius);font-weight:600;transition:all .2s}
.empty-state{text-align:center;padding:60px 20px;color:var(--text3)}
.empty-state .empty-icon{font-size:3rem;margin-bottom:12px}
.empty-state p{font-size:.9rem}

/* === Save Modal === */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:200;display:none;align-items:center;justify-content:center;padding:16px}
.modal-overlay.open{display:flex}
.modal{background:var(--bg2);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-lg);padding:32px;max-width:420px;width:100%;max-height:90vh;overflow-y:auto}
.modal h3{font-family:var(--font-display);margin-bottom:4px}
.modal p{color:var(--text2);font-size:.85rem;margin-bottom:20px}
.modal .btn{width:100%;padding:12px;border:none;border-radius:var(--radius);font-weight:700;font-size:.9rem;margin-top:6px}
.parent-select{background:var(--bg3);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:11px 14px;color:var(--text);font-size:.9rem;outline:none;width:100%;margin-bottom:6px}
.parent-select:focus{border-color:var(--blue)}
.radio-group{display:flex;gap:12px;margin-bottom:12px}
.radio-group label{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--text2);cursor:pointer;padding:8px 16px;background:var(--bg3);border-radius:var(--radius);border:1px solid transparent;transition:all .2s}
.radio-group label.selected{border-color:var(--blue);color:var(--text);background:rgba(59,130,246,.08)}
.radio-group input[type=radio]{display:none}

/* === Share Territory Feature === */
.share-section{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.04)}
.share-label{font-size:.78rem;color:var(--text3);margin-bottom:6px;font-weight:600}
.share-link-box{display:flex;gap:6px;margin-bottom:8px}
.share-link-box input{flex:1;padding:8px 12px;background:var(--bg3);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);color:var(--text);font-size:.78rem;outline:none}
.share-link-box input:focus{border-color:var(--blue)}
.share-link-box button{font-size:.7rem;padding:8px 14px;border:none;border-radius:var(--radius);font-weight:600}
.share-preview-note{font-size:.72rem;color:var(--text3);line-height:1.5}

/* === View Mode (shared territory) === */
.view-banner{background:var(--bg2);border-bottom:1px solid rgba(255,255,255,.04);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.view-banner h3{font-size:1rem}
.view-banner p{font-size:.78rem;color:var(--text2)}
.view-banner .btn{font-size:.75rem;padding:8px 18px;border:none;border-radius:var(--radius);font-weight:600}
.follow-btn{background:var(--green);color:#fff}
.follow-btn.following{background:var(--red);color:#fff}
.follow-instructions{position:absolute;bottom:80px;left:50%;transform:translateX(-50%);z-index:10;background:rgba(15,23,42,.92);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-lg);padding:12px 20px;text-align:center;max-width:300px;font-size:.8rem;color:var(--text2);pointer-events:none}
.follow-instructions strong{color:var(--text)}

/* === Leaflet overrides === */
.leaflet-container{background:#0a0e17!important}
.leaflet-control-zoom a{background:var(--bg2)!important;color:var(--text)!important;border-color:rgba(255,255,255,.08)!important}
.leaflet-control-attribution{display:none!important}
.tracking-marker{background:var(--blue);border:3px solid rgba(59,130,246,.3);border-radius:50%;width:16px;height:16px}

/* === Toast === */
.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);z-index:300;background:var(--bg2);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:12px 20px;font-size:.82rem;color:var(--text);box-shadow:0 8px 30px rgba(0,0,0,.5);display:none;animation:toastIn .3s ease}
.toast.show{display:block}
.toast.success{border-color:rgba(16,185,129,.3)}
.toast.error{border-color:rgba(239,68,68,.3)}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(16px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* === Responsive === */
@media(max-width:640px){
.info-panel{top:10px;right:10px;padding:12px 14px;max-width:160px;font-size:.72rem}
.map-controls{gap:6px;bottom:16px}
.map-controls .btn{padding:10px 16px;font-size:.78rem;min-width:80px}
.territory-item{flex-direction:column;align-items:stretch;gap:8px}
.territory-actions{justify-content:flex-end}
.auth-card{padding:28px 20px}
.modal{padding:24px 20px}
.share-link-box{flex-direction:column}
.form-row{flex-direction:column}
}

/* Utility */
.mt-8{margin-top:8px}
.mt-16{margin-top:16px}
.gap-8{gap:8px}
.flex{display:flex}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}
.text-center{text-align:center}
.text-sm{font-size:.82rem;color:var(--text2)}