/* ========== RESET & BASE ========== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --bg-primary: #0a0a0f;
  --bg-secondary: #12121a;
  --bg-card: #1a1a25;
  --bg-elevated: #22222f;
  --gold-primary: #D4AF37;
  --gold-light: #F5D060;
  --gold-dark: #B8960C;
  --gold-glow: rgba(212,175,55,0.3);
  --text-primary: #f0ece2;
  --text-secondary: #9a9aaa;
  --text-muted: #5a5a6a;
  --danger: #ff4757;
  --danger-glow: rgba(255,71,87,0.3);
  --success: #2ed573;
  --warning: #ffa502;
  --border: rgba(255,255,255,0.06);
  --radius: 12px;
  --radius-lg: 20px;
  --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
  --font: 'Inter', -apple-system, sans-serif;
  --font-display: 'Playfair Display', serif;
}

html, body { height:100%; }
body {
  font-family: var(--font);
  background: var(--bg-primary);
  color: var(--text-primary);
  overflow: hidden;
}

/* ========== AMBIENT BG ========== */
.ambient-bg { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.ambient-orb {
  position:absolute; border-radius:50%; filter:blur(120px); opacity:0.15;
  animation: orbFloat 20s ease-in-out infinite;
}
.orb-1 { width:600px; height:600px; background:var(--gold-primary); top:-200px; left:-100px; }
.orb-2 { width:400px; height:400px; background:#7c3aed; bottom:-100px; right:-50px; animation-delay:-7s; }
.orb-3 { width:300px; height:300px; background:var(--danger); top:50%; left:50%; animation-delay:-14s; opacity:0.08; }
@keyframes orbFloat {
  0%,100% { transform:translate(0,0) scale(1); }
  33% { transform:translate(30px,-50px) scale(1.1); }
  66% { transform:translate(-20px,40px) scale(0.9); }
}

/* ========== TOP NAV ========== */
.top-nav {
  position:relative; z-index:100; display:flex; align-items:center;
  justify-content:space-between; padding:0 24px; height:64px;
  background:rgba(10,10,15,0.8); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.nav-left { display:flex; align-items:center; gap:12px; }
.logo-mark { display:flex; align-items:center; }
.logo-text { display:flex; flex-direction:column; }
.logo-brand {
  font-family:var(--font-display); font-size:18px; font-weight:800;
  background:linear-gradient(135deg,var(--gold-light),var(--gold-primary));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  letter-spacing:2px;
}
.logo-sub { font-size:10px; color:var(--text-muted); letter-spacing:1px; text-transform:uppercase; }

.nav-center { display:flex; gap:4px; }
.nav-tab {
  background:none; border:none; color:var(--text-secondary); font-family:var(--font);
  font-size:13px; font-weight:500; padding:8px 16px; border-radius:8px;
  cursor:pointer; transition:var(--transition); display:flex; align-items:center; gap:6px;
  position:relative;
}
.nav-tab:hover { color:var(--text-primary); background:rgba(255,255,255,0.05); }
.nav-tab.active { color:var(--gold-primary); background:rgba(212,175,55,0.1); }
.tab-icon { font-size:14px; }
.alert-badge {
  position:absolute; top:2px; right:2px; background:var(--danger); color:#fff;
  font-size:10px; font-weight:700; min-width:16px; height:16px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; padding:0 4px;
}
.alert-badge:empty, .alert-badge:has(+ .alert-badge) { display:none; }

.nav-right { display:flex; align-items:center; gap:16px; }
.connection-status { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-secondary); }
.status-dot { width:8px; height:8px; border-radius:50%; }
.status-dot.online { background:var(--success); box-shadow:0 0 8px rgba(46,213,115,0.5); animation:pulse 2s infinite; }
.status-dot.offline { background:var(--danger); }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.5; } }

.btn-panic {
  background:linear-gradient(135deg,#ff4757,#ff6b81); color:#fff; border:none;
  padding:8px 16px; border-radius:8px; font-family:var(--font); font-size:12px;
  font-weight:700; cursor:pointer; letter-spacing:1px;
  animation:panicPulse 3s ease-in-out infinite;
  transition:var(--transition);
}
.btn-panic:hover { transform:scale(1.05); box-shadow:0 0 20px var(--danger-glow); }
@keyframes panicPulse {
  0%,100% { box-shadow:0 0 0 0 var(--danger-glow); }
  50% { box-shadow:0 0 0 8px transparent; }
}

/* ========== MAIN CONTENT ========== */
.main-content { position:relative; z-index:10; height:calc(100vh - 64px); overflow:hidden; }
.tab-content { display:none; height:100%; }
.tab-content.active { display:block; }

/* ========== LIVE LAYOUT ========== */
.live-layout { display:flex; height:100%; }
.map-container { flex:1; position:relative; }
.map-element { width:100%; height:100%; }

/* Leaflet dark tiles */
.leaflet-tile-pane { filter:saturate(0.3) brightness(0.7) contrast(1.2); }
.leaflet-control-zoom a {
  background:var(--bg-card)!important; color:var(--text-primary)!important;
  border-color:var(--border)!important;
}

.map-overlay-top {
  position:absolute; top:16px; left:16px; right:16px; z-index:1000;
  display:flex; justify-content:space-between; align-items:center; pointer-events:none;
}
.map-overlay-top > * { pointer-events:auto; }
.search-box { position:relative; }
.search-input {
  background:rgba(10,10,15,0.85); backdrop-filter:blur(12px); border:1px solid var(--border);
  color:var(--text-primary); padding:10px 16px; border-radius:10px; font-size:13px;
  width:260px; font-family:var(--font); outline:none; transition:var(--transition);
}
.search-input:focus { border-color:var(--gold-primary); box-shadow:0 0 0 3px var(--gold-glow); }
.map-actions { display:flex; gap:6px; }
.map-btn {
  width:40px; height:40px; border-radius:10px; border:1px solid var(--border);
  background:rgba(10,10,15,0.85); backdrop-filter:blur(12px); color:var(--text-primary);
  font-size:16px; cursor:pointer; transition:var(--transition); display:flex;
  align-items:center; justify-content:center;
}
.map-btn:hover { border-color:var(--gold-primary); background:rgba(212,175,55,0.1); }

.map-overlay-bottom {
  position:absolute; bottom:16px; left:16px; right:16px; z-index:1000;
  pointer-events:none;
}
.tracking-summary {
  display:flex; gap:12px; pointer-events:auto;
  background:rgba(10,10,15,0.85); backdrop-filter:blur(16px); border-radius:14px;
  padding:12px 20px; border:1px solid var(--border); width:fit-content;
}
.summary-item { display:flex; flex-direction:column; align-items:center; min-width:70px; }
.summary-value { font-size:22px; font-weight:700; color:var(--text-primary); }
.summary-label { font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; }
.online-item .summary-value { color:var(--success); }
.alert-item .summary-value { color:var(--danger); }

/* ========== SIDE PANEL ========== */
.side-panel {
  width:340px; background:rgba(18,18,26,0.95); backdrop-filter:blur(12px);
  border-left:1px solid var(--border); display:flex; flex-direction:column;
  overflow:hidden;
}
.panel-header {
  padding:16px 20px; display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid var(--border);
}
.panel-header h3 { font-size:14px; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:1px; }
.btn-icon {
  background:none; border:none; color:var(--text-secondary); font-size:18px;
  cursor:pointer; transition:var(--transition); padding:4px;
}
.btn-icon:hover { color:var(--gold-primary); transform:rotate(180deg); }

.device-list { flex:1; overflow-y:auto; padding:8px; }
.device-list::-webkit-scrollbar { width:4px; }
.device-list::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

.device-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  padding:14px; margin-bottom:8px; cursor:pointer; transition:var(--transition);
  position:relative; overflow:hidden;
}
.device-card::before {
  content:''; position:absolute; top:0; left:0; width:3px; height:100%;
  background:var(--success); border-radius:0 2px 2px 0;
}
.device-card.alert::before { background:var(--danger); }
.device-card.offline::before { background:var(--text-muted); }
.device-card:hover { border-color:var(--gold-primary); transform:translateX(4px); }
.device-card.alert { border-color:rgba(255,71,87,0.3); animation:alertGlow 1.5s ease-in-out infinite; }
@keyframes alertGlow {
  0%,100% { box-shadow:0 0 0 0 var(--danger-glow); }
  50% { box-shadow:0 0 15px var(--danger-glow); }
}

.device-card-header { display:flex; justify-content:space-between; align-items:start; margin-bottom:8px; }
.device-icon { font-size:20px; margin-right:8px; }
.device-name { font-size:13px; font-weight:600; color:var(--text-primary); }
.device-type { font-size:11px; color:var(--text-muted); }
.device-status-badge {
  font-size:10px; padding:2px 8px; border-radius:6px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.5px;
}
.badge-safe { background:rgba(46,213,115,0.15); color:var(--success); }
.badge-alert { background:rgba(255,71,87,0.15); color:var(--danger); animation:blink 0.8s infinite; }
.badge-offline { background:rgba(90,90,106,0.15); color:var(--text-muted); }
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:0.4; } }

.device-card-body { display:flex; flex-direction:column; gap:4px; }
.device-info-row { display:flex; justify-content:space-between; font-size:11px; }
.info-label { color:var(--text-muted); }
.info-value { color:var(--text-secondary); font-weight:500; }

.device-card-footer { display:flex; gap:6px; margin-top:10px; }
.device-action-btn {
  flex:1; padding:6px; border-radius:6px; border:1px solid var(--border);
  background:transparent; color:var(--text-secondary); font-size:11px;
  cursor:pointer; transition:var(--transition); font-family:var(--font);
}
.device-action-btn:hover { border-color:var(--gold-primary); color:var(--gold-primary); }

/* ========== DEVICES PAGE ========== */
.devices-page, .alerts-page, .history-page { padding:24px; height:100%; overflow-y:auto; }
.page-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.page-header h2 { font-size:20px; font-weight:700; }

.btn-primary {
  background:linear-gradient(135deg,var(--gold-primary),var(--gold-dark));
  color:#0a0a0f; border:none; padding:10px 20px; border-radius:10px;
  font-family:var(--font); font-size:13px; font-weight:600; cursor:pointer;
  transition:var(--transition); display:flex; align-items:center; gap:6px;
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 24px var(--gold-glow); }
.btn-secondary {
  background:var(--bg-elevated); color:var(--text-secondary); border:1px solid var(--border);
  padding:10px 20px; border-radius:10px; font-family:var(--font); font-size:13px;
  font-weight:500; cursor:pointer; transition:var(--transition);
}
.btn-secondary:hover { border-color:var(--text-muted); }
.btn-danger {
  background:linear-gradient(135deg,var(--danger),#e84118); color:#fff; border:none;
  padding:10px 20px; border-radius:10px; font-family:var(--font); font-size:13px;
  font-weight:600; cursor:pointer; transition:var(--transition);
}
.btn-danger:hover { box-shadow:0 8px 24px var(--danger-glow); }
.btn-warning {
  background:linear-gradient(135deg,var(--warning),#e67e22); color:#fff; border:none;
  padding:10px 20px; border-radius:10px; font-family:var(--font); font-size:13px;
  font-weight:600; cursor:pointer; transition:var(--transition);
}

.devices-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
.device-grid-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:24px; transition:var(--transition); position:relative;
}
.device-grid-card:hover { border-color:var(--gold-primary); transform:translateY(-4px); box-shadow:0 12px 32px rgba(0,0,0,0.3); }
.device-grid-header { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.device-grid-icon { font-size:32px; }
.device-grid-info h4 { font-size:15px; font-weight:600; }
.device-grid-info p { font-size:12px; color:var(--text-muted); }
.device-grid-stats { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.stat-box { background:var(--bg-elevated); padding:10px; border-radius:8px; }
.stat-box .stat-label { font-size:10px; color:var(--text-muted); text-transform:uppercase; }
.stat-box .stat-value { font-size:14px; font-weight:600; margin-top:2px; }

/* ========== ALERTS ========== */
.filter-group { display:flex; gap:6px; }
.filter-btn {
  background:var(--bg-card); border:1px solid var(--border); color:var(--text-secondary);
  padding:6px 14px; border-radius:8px; font-size:12px; cursor:pointer;
  font-family:var(--font); transition:var(--transition);
}
.filter-btn.active { background:rgba(212,175,55,0.1); border-color:var(--gold-primary); color:var(--gold-primary); }

.alerts-timeline { display:flex; flex-direction:column; gap:12px; }
.alert-timeline-item {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px 20px; display:flex; align-items:center; gap:16px;
  transition:var(--transition);
}
.alert-timeline-item:hover { border-color:var(--gold-primary); }
.alert-timeline-item.severity-high { border-left:3px solid var(--danger); }
.alert-timeline-item.severity-medium { border-left:3px solid var(--warning); }
.alert-timeline-item.severity-low { border-left:3px solid var(--text-muted); }
.alert-time { font-size:11px; color:var(--text-muted); min-width:80px; }
.alert-content { flex:1; }
.alert-content h4 { font-size:13px; font-weight:600; margin-bottom:2px; }
.alert-content p { font-size:12px; color:var(--text-secondary); }

/* ========== HISTORY ========== */
.history-controls { display:flex; gap:8px; align-items:center; }
.select-input, .date-input {
  background:var(--bg-card); border:1px solid var(--border); color:var(--text-primary);
  padding:8px 12px; border-radius:8px; font-family:var(--font); font-size:13px;
  outline:none;
}
.select-input:focus, .date-input:focus { border-color:var(--gold-primary); }
.history-map-container { height:calc(100% - 80px); border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); }

/* ========== MODALS ========== */
.modal-overlay {
  position:fixed; inset:0; z-index:9999; display:none; align-items:center;
  justify-content:center; background:rgba(0,0,0,0.7); backdrop-filter:blur(8px);
}
.modal-overlay.active { display:flex; }
.modal-content {
  background:var(--bg-secondary); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:32px; max-width:480px; width:90%; position:relative;
  animation:modalIn 0.3s ease;
}
@keyframes modalIn { from { opacity:0; transform:scale(0.95) translateY(10px); } }

.theft-alert-modal { text-align:center; border-color:rgba(255,71,87,0.3); }
.modal-pulse {
  position:absolute; inset:-2px; border-radius:var(--radius-lg);
  border:2px solid var(--danger); animation:modalPulse 1.5s infinite;
}
@keyframes modalPulse { 0%,100% { opacity:1; } 50% { opacity:0.3; } }
.alert-icon-large { font-size:64px; margin-bottom:16px; animation:shake 0.5s ease-in-out infinite; }
@keyframes shake {
  0%,100% { transform:translateX(0); }
  25% { transform:translateX(-5px); }
  75% { transform:translateX(5px); }
}
.alert-title { font-size:24px; font-weight:800; color:var(--danger); margin-bottom:8px; }
.alert-device-name { font-size:16px; font-weight:600; color:var(--gold-primary); margin-bottom:4px; }
.alert-detail { font-size:13px; color:var(--text-secondary); margin-bottom:16px; }
.alert-location {
  background:var(--bg-card); padding:12px; border-radius:8px; font-size:12px;
  color:var(--text-secondary); margin-bottom:20px;
}
.alert-actions { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }

/* Form */
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:12px; color:var(--text-secondary); margin-bottom:6px; font-weight:500; }
.form-input {
  width:100%; background:var(--bg-card); border:1px solid var(--border); color:var(--text-primary);
  padding:10px 14px; border-radius:8px; font-family:var(--font); font-size:13px; outline:none;
  transition:var(--transition);
}
.form-input:focus { border-color:var(--gold-primary); box-shadow:0 0 0 3px var(--gold-glow); }
.form-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:24px; }

/* ========== TOAST ========== */
.toast-container { position:fixed; top:80px; right:20px; z-index:10000; display:flex; flex-direction:column; gap:8px; }
.toast {
  background:var(--bg-card); border:1px solid var(--border); border-radius:10px;
  padding:12px 20px; min-width:280px; display:flex; align-items:center; gap:10px;
  animation:slideInRight 0.3s ease, fadeOut 0.3s ease 4.7s forwards;
  box-shadow:0 8px 24px rgba(0,0,0,0.3);
}
.toast.danger { border-left:3px solid var(--danger); }
.toast.warning { border-left:3px solid var(--warning); }
.toast.success { border-left:3px solid var(--success); }
.toast-icon { font-size:20px; }
.toast-body h4 { font-size:13px; font-weight:600; }
.toast-body p { font-size:11px; color:var(--text-secondary); }
@keyframes slideInRight { from { transform:translateX(100%); opacity:0; } }
@keyframes fadeOut { to { opacity:0; transform:translateX(50px); } }

/* ========== CUSTOM MARKER ========== */
.custom-marker {
  width:32px; height:32px; position:relative;
}
.marker-dot {
  width:14px; height:14px; border-radius:50%; position:absolute;
  top:50%; left:50%; transform:translate(-50%,-50%);
  border:2px solid #fff; z-index:2;
}
.marker-dot.safe { background:var(--success); }
.marker-dot.alert { background:var(--danger); animation:blink 0.6s infinite; }
.marker-dot.offline { background:var(--text-muted); }
.marker-ring {
  width:32px; height:32px; border-radius:50%; position:absolute;
  top:50%; left:50%; transform:translate(-50%,-50%);
  border:2px solid; opacity:0.4; animation:markerPulse 2s infinite;
}
.marker-ring.safe { border-color:var(--success); }
.marker-ring.alert { border-color:var(--danger); animation:markerPulse 0.8s infinite; }
@keyframes markerPulse {
  0% { transform:translate(-50%,-50%) scale(1); opacity:0.4; }
  100% { transform:translate(-50%,-50%) scale(2.5); opacity:0; }
}

/* Mobile */
@media(max-width:768px) {
  .nav-center { display:none; }
  .side-panel { display:none; }
  .map-overlay-top { flex-direction:column; gap:8px; }
  .search-input { width:100%; }
}