/* Theme */
:root{
  --bg: #f5f7fb;
  --card-bg: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --brand: #2563eb; /* blue-600 */
  --brand-2: #7c3aed; /* violet-600 */
  --accent: #10b981; /* emerald-500 */
  --warning: #f59e0b; /* amber-500 */
  --danger: #ef4444; /* red-500 */
  --ring: rgba(37,99,235,.35);
  --shadow-1: 0 10px 30px rgba(2,8,20,.06), 0 2px 6px rgba(2,8,20,.05);
  --shadow-2: 0 18px 40px rgba(2,8,20,.10), 0 8px 16px rgba(2,8,20,.06);
}

body{
  color: var(--text);
  background:
    radial-gradient(1200px 500px at -200px -200px, rgba(124,58,237,.08), transparent 60%),
    radial-gradient(1200px 500px at 100% -250px, rgba(37,99,235,.08), transparent 60%),
    var(--bg);
}

.navbar-brand{ font-weight: 700; letter-spacing: 0.2px; }
.navbar .nav-link{ transition: color .15s ease; }
.navbar .nav-link:hover{ color: #fff !important; }
.navbar .nav-link.active{ color:#fff !important; position:relative; }
.navbar .nav-link.active::after{ content:""; position:absolute; left:10px; right:10px; bottom:-8px; height:3px; border-radius:4px; background: linear-gradient(90deg, #60a5fa, #7c3aed); }

.brand-badge{ display:inline-grid; place-content:center; width:28px; height:28px; border-radius:8px; background: linear-gradient(135deg, #60a5fa, #7c3aed); color:#fff; font-weight:700; font-size:.85rem; box-shadow: 0 6px 16px rgba(124,58,237,.25); }

/* Navbar polish */
.app-navbar{ position: sticky; top:0; z-index: 1030; box-shadow: 0 10px 30px rgba(2,8,20,.12); }

/* Hero */
.hero{ position:relative; overflow:hidden; border-radius:16px; background: linear-gradient(135deg, #1f2937, #111827); box-shadow: var(--shadow-1); }
.hero-inner{ padding: 18px 16px; }
.hero-glow{ position:absolute; inset:auto -20% 0 -20%; height:30px; background: radial-gradient(50% 50% at 50% 0%, rgba(124,58,237,.45), transparent 60%); filter: blur(18px); }

.card{
  background: var(--card-bg);
  border: 1px solid rgba(15,23,42,0.06);
  border-radius: 16px;
  box-shadow: var(--shadow-1);
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease;
}

.card:hover{ transform: translateY(-1px); box-shadow: var(--shadow-2); }

.card::before{ content:""; position:absolute; left:10px; right:10px; top:0; height:3px; border-radius: 0 0 8px 8px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); opacity:.7; }

.badge-status{ font-weight: 600; letter-spacing: .2px; }
.badge-status-open{ background: rgba(37,99,235,.12); color: #1d4ed8; }
.badge-status-resolved_fixed{ background: rgba(16,185,129,.14); color: #059669; }
.badge-status-resolved_no_issue{ background: rgba(107,114,128,.18); color: #374151; }

/* KPI cards */
.kpi{ display:flex; align-items:center; gap:.75rem; }
.kpi .icon{ width:38px; height:38px; border-radius:10px; display:grid; place-content:center; color:white; }
.kpi .value{ font-size:1.6rem; font-weight:700; }
.kpi .label{ color: var(--muted); font-size:.9rem; }

.icon-blue{ background: linear-gradient(135deg, #60a5fa, #2563eb); }
.icon-green{ background: linear-gradient(135deg, #34d399, #059669); }
.icon-violet{ background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.icon-amber{ background: linear-gradient(135deg, #fbbf24, #f59e0b); }

/* Timeline */
.timeline{ border-left: 3px solid rgba(37,99,235,.2); padding-left: .75rem; }
.timeline .item{ position:relative; margin-bottom:.75rem; }
.timeline .item::before{ content:''; position:absolute; left:-9px; top:.35rem; width:10px; height:10px; border-radius:50%; background:#fff; border:3px solid #60a5fa; }

/* Guest nav visibility */
body.guest .nav-auth-only { display: none !important; }

/* Small-screen optimized report form */
.report-form .form-control, .report-form .form-select { font-size: 1.05rem; }
.report-form .btn { font-size: 1.05rem; }

/* Map container sizes */
.map-container { height: 60vh; min-height: 320px; }

/* Admin desktop helpers */
@media (min-width: 992px) {
  .admin-grid { display: grid; grid-template-columns: 320px 1fr; gap: 1.2rem; }
}

/* Modern buttons */
.btn-primary{
  background: linear-gradient(180deg, #3b82f6, #2563eb);
  border: 0;
  box-shadow: 0 6px 16px rgba(37,99,235,.25);
}
.btn-primary:hover{ filter: brightness(1.02); box-shadow: 0 8px 20px rgba(37,99,235,.3); }
.btn-outline-primary{
  border: 1px solid rgba(37,99,235,.4);
  color: #1d4ed8;
}
.btn-outline-primary:hover{ background: rgba(37,99,235,.08); border-color: rgba(37,99,235,.5); }

/* Inputs */
.form-control, .form-select{
  border-radius: 12px;
  border-color: rgba(2,8,23,.15);
}
.form-control:focus, .form-select:focus{
  border-color: #60a5fa;
  box-shadow: 0 0 0 4px var(--ring);
}

/* Tables */
.table>thead th{ color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: .8rem; letter-spacing: .04em; border-bottom-color: rgba(2,8,23,.08); }
.table tbody tr:hover{ background: rgba(124,58,237,.06); }

/* Section titles */
.section-title{ display:flex; align-items:center; gap:.6rem; margin-bottom: .75rem; }
.section-title .dot{ width:10px; height:10px; border-radius:50%; background: linear-gradient(135deg, #60a5fa, #7c3aed); box-shadow: 0 0 0 4px rgba(124,58,237,.15); }

/* Admin menu */
.admin-menu{ display:flex; flex-direction: column; gap:.35rem; padding:.5rem; }
.admin-menu .menu-item{ display:flex; align-items:center; gap:.6rem; padding:.6rem .75rem; border-radius: 10px; color: inherit; text-decoration:none; transition: background .15s ease, transform .15s ease; }
.admin-menu .menu-item:hover{ background: rgba(37,99,235,.08); transform: translateX(2px); }
.admin-menu .menu-item .mi-icon{ width:26px; height:26px; border-radius:8px; display:grid; place-content:center; color:#fff; background: linear-gradient(135deg, #60a5fa, #2563eb); font-size:.85rem; }
.admin-menu .menu-item .mi-label{ font-weight: 600; }

/* Notifications list */
.notif-list{ list-style:none; margin:0; padding:0; }
.notif-list li{ display:flex; gap:.6rem; align-items:flex-start; }
.notif-list .n-dot{ width:8px; height:8px; border-radius:50%; background: #60a5fa; margin-top:.48rem; box-shadow: 0 0 0 4px rgba(96,165,250,.2); }

/* Utility */
.text-muted { color: var(--muted) !important; }