/* ==========================================================================
   Temple Crowd Intelligence Platform — Global Stylesheet
   Shared across every page in /pages. Loaded once from includes/header.php.
   ========================================================================== */

:root{
  --navy:#0B1B3A;
  --blue:#1565C0;
  --blue-dark:#0D47A1;
  --blue-tint:#E3F2FD;
  --orange:#FF8F00;
  --amber:#F9A825;
  --red:#D32F2F;
  --red-dark:#B71C1C;
  --green:#2E7D32;
  --green-dark:#1B5E20;
  --teal:#00897B;
  --ink:#1E293B;
  --muted:#64748B;
  --faint:#94A3B8;
  --border:#E2E8F0;
  --divider:#F1F5F9;
  --bg:#F8FAFC;
  --card-shadow: 0 1px 2px rgba(15,30,61,.04), 0 8px 24px rgba(15,30,61,.06);
  --card-shadow-sm: 0 1px 2px rgba(15,30,61,.04), 0 6px 16px rgba(15,30,61,.05);
  --dropdown-shadow: 0 16px 40px rgba(15,30,61,.16);
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 76px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; background:var(--bg); }
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--ink);
  overflow:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
input,select{ font-family:inherit; }

::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:#CBD5E1; border-radius:8px; }
::-webkit-scrollbar-track{ background:transparent; }

.material-icon{
  font-family:'Material Symbols Outlined';
  font-weight:normal;
  font-style:normal;
  line-height:1;
  white-space:nowrap;
  -webkit-font-smoothing:antialiased;
}

@keyframes pulseDot{ 0%{box-shadow:0 0 0 0 rgba(211,47,47,.55);} 70%{box-shadow:0 0 0 9px rgba(211,47,47,0);} 100%{box-shadow:0 0 0 0 rgba(211,47,47,0);} }
@keyframes pulseSoft{ 0%{transform:scale(1);opacity:1;} 70%{transform:scale(2.4);opacity:0;} 100%{transform:scale(2.4);opacity:0;} }
@keyframes dashFlow{ to{ stroke-dashoffset:-40; } }

/* ---------- App shell ---------- */
.app-shell{ display:flex; height:100vh; width:100%; overflow:hidden; }

/* ---------- Sidebar ---------- */
.sidebar{
  width:var(--sidebar-w);
  flex-shrink:0;
  background:var(--navy);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transition:width .18s ease;
}
.sidebar.is-collapsed{ width:var(--sidebar-w-collapsed); }
.sidebar-brand{
  display:flex; align-items:center; gap:11px;
  padding:0 16px; height:64px; flex-shrink:0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sidebar-mark{
  width:36px; height:36px; border-radius:10px; flex-shrink:0;
  background:linear-gradient(135deg,var(--orange),var(--amber));
  display:flex; align-items:center; justify-content:center;
}
.sidebar-mark .material-icon{ font-size:22px; color:#fff; }
.sidebar-brand-text{ overflow:hidden; white-space:nowrap; }
.sidebar-brand-title{ font-size:13.5px; font-weight:700; color:#fff; line-height:1.25; }
.sidebar-brand-sub{ font-size:10px; color:rgba(255,255,255,.5); letter-spacing:.02em; }

.sidebar-nav{ flex:1; overflow-y:auto; overflow-x:hidden; padding:10px 0; }
.nav-item{
  display:flex; align-items:center; gap:14px;
  padding:10px 18px; margin:2px 10px; border-radius:10px;
  cursor:pointer; background:transparent; color:rgba(255,255,255,.68);
}
.nav-item:hover{ background:rgba(255,255,255,.10); }
.nav-item .material-icon{ font-size:21px; flex-shrink:0; color:inherit; }
.nav-item-label{ font-size:12.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:inherit; }
.nav-item.is-active{ background:var(--blue); color:#fff; }
.nav-item.is-active .nav-item-label{ font-weight:600; }

.sidebar-collapse-toggle{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:14px; border-top:1px solid rgba(255,255,255,.08);
  cursor:pointer; color:rgba(255,255,255,.55); flex-shrink:0; background:none; border-left:none; border-right:none; border-bottom:none; width:100%;
}
.sidebar-collapse-toggle:hover{ background:rgba(255,255,255,.08); }
.sidebar-collapse-toggle .material-icon{ font-size:20px; }
.sidebar.is-collapsed .sidebar-brand-text,
.sidebar.is-collapsed .nav-item-label,
.sidebar.is-collapsed .sidebar-collapse-toggle span:last-child{ display:none; }

/* ---------- Main column ---------- */
.main-col{ flex:1; display:flex; flex-direction:column; min-width:0; overflow:hidden; }

/* ---------- Topbar ---------- */
.topbar{
  height:64px; flex-shrink:0; background:#fff; border-bottom:1px solid var(--border);
  display:flex; align-items:center; padding:0 22px; gap:14px; position:relative; z-index:40;
}
.topbar-titles{ min-width:0; flex-shrink:1; white-space:nowrap; overflow:hidden; }
.topbar-title{ font-size:16.5px; font-weight:700; color:var(--navy); line-height:1.2; overflow:hidden; text-overflow:ellipsis; }
.topbar-subtitle{ font-size:11.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; }

.search-box{ flex:1 1 120px; min-width:80px; max-width:340px; position:relative; }
.search-box .material-icon{ position:absolute; left:12px; top:50%; transform:translateY(-50%); font-size:19px; color:var(--faint); }
.search-input{
  width:100%; padding:9px 14px 9px 38px; border-radius:10px; border:1px solid var(--border);
  background:var(--bg); font-size:12.5px; outline:none; color:var(--ink);
}

.temple-select{
  padding:9px 10px; border-radius:10px; border:1px solid var(--border); font-size:11.5px;
  background:var(--bg); color:var(--ink); width:180px; flex-shrink:1; min-width:0;
}

.icon-btn{
  width:38px; height:38px; border-radius:10px; background:var(--divider);
  display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; border:none;
}
.icon-btn .material-icon{ font-size:20px; color:#475569; }
.icon-btn-dot{ position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:50%; background:var(--red); border:2px solid var(--divider); }

.profile-trigger{ display:flex; align-items:center; gap:9px; cursor:pointer; padding:4px 6px; border-radius:10px; background:none; border:none; }
.profile-avatar{ width:32px; height:32px; border-radius:50%; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0; }
.profile-name{ font-size:12px; font-weight:600; color:var(--ink); text-align:left; }
.profile-role{ font-size:10px; color:var(--faint); text-align:left; }

.dropdown-anchor{ position:relative; flex-shrink:0; }
.dropdown-panel{
  position:absolute; top:48px; right:0; background:#fff; border:1px solid var(--border);
  border-radius:14px; box-shadow:var(--dropdown-shadow); overflow:hidden; z-index:60; display:none;
}
.dropdown-panel.is-open{ display:block; }
.dropdown-panel-wide{ width:330px; }
.dropdown-panel-narrow{ width:230px; }
.dropdown-header{ padding:13px 16px; border-bottom:1px solid var(--divider); font-size:13px; font-weight:700; }
.dropdown-eyebrow{ padding:11px 16px 6px; font-size:10.5px; font-weight:700; color:var(--faint); text-transform:uppercase; letter-spacing:.04em; }
.dropdown-item{ display:flex; align-items:center; gap:10px; padding:9px 16px; cursor:pointer; }
.dropdown-item:hover{ background:var(--bg); }
.dropdown-footer{ padding:11px 16px; text-align:center; font-size:12px; font-weight:600; color:var(--blue); cursor:pointer; }
.dropdown-footer:hover{ background:var(--bg); }
.alert-row{ display:flex; gap:10px; padding:11px 16px; border-bottom:1px solid var(--bg); }
.alert-dot{ width:8px; height:8px; border-radius:50%; margin-top:5px; flex-shrink:0; }
.alert-row-title{ font-size:12px; font-weight:600; color:var(--ink); }
.alert-row-sub{ font-size:10.5px; color:var(--faint); }

.suggestion-panel{ position:absolute; top:44px; left:0; right:0; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:0 12px 32px rgba(15,30,61,.14); overflow:hidden; z-index:50; display:none; }
.suggestion-panel.is-open{ display:block; }
.suggestion-item{ display:flex; align-items:center; gap:10px; padding:10px 14px; cursor:pointer; border-bottom:1px solid var(--divider); }
.suggestion-item:hover{ background:var(--bg); }
.suggestion-item .material-icon{ font-size:17px; color:var(--blue); }
.suggestion-label{ font-size:12.5px; font-weight:600; color:var(--ink); }
.suggestion-sub{ font-size:10.5px; color:var(--faint); }

/* ---------- Content area ---------- */
.content{ flex:1; overflow-y:auto; padding:22px 24px 40px; }
.page-toolbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:10px; flex-wrap:wrap; }
.page-toolbar-title{ font-size:15px; font-weight:700; color:var(--navy); }
.page-toolbar-sub{ font-size:12px; color:var(--faint); margin-top:2px; }
.toolbar-actions{ display:flex; gap:8px; }

/* ---------- Grid utilities ---------- */
.grid{ display:grid; gap:16px; }
.grid-tight{ gap:14px; }
.mb-14{ margin-bottom:14px; }
.mb-16{ margin-bottom:16px; }
.cols-2{ grid-template-columns:1fr 1fr; }
.cols-2-13{ grid-template-columns:1.3fr 1fr; }
.cols-2-14{ grid-template-columns:1.4fr 1fr; }
.cols-2-15{ grid-template-columns:1.5fr 1fr; }
.cols-2-12{ grid-template-columns:1.2fr 1fr; }
.cols-2-r12{ grid-template-columns:1fr 1.2fr; }
.cols-2-r14{ grid-template-columns:1fr 1.4fr; }
.cols-2-r15{ grid-template-columns:1fr 1.5fr; }
.cols-3{ grid-template-columns:repeat(3,1fr); }
.cols-4{ grid-template-columns:repeat(4,1fr); }
.cols-5{ grid-template-columns:repeat(5,1fr); }
.cols-6{ grid-template-columns:repeat(6,1fr); }
.flex{ display:flex; }
.flex-col{ display:flex; flex-direction:column; }
.items-center{ align-items:center; }
.justify-between{ justify-content:space-between; }
.gap-6{ gap:6px; } .gap-8{ gap:8px; } .gap-10{ gap:10px; } .gap-14{ gap:14px; }

/* ---------- Cards ---------- */
.card{ background:#fff; border-radius:18px; box-shadow:var(--card-shadow); padding:20px; }
.card-tight{ padding:18px; }
.card-flush{ padding:0; overflow:hidden; }
.card-title{ font-size:14px; font-weight:700; color:var(--navy); margin-bottom:10px; }
.card-title-lg{ font-size:15px; font-weight:700; color:var(--navy); }
.card-eyebrow{ font-size:11px; color:var(--faint); margin-bottom:12px; }

.kpi-card{ background:#fff; border-radius:16px; padding:16px 18px; box-shadow:var(--card-shadow-sm); display:flex; flex-direction:column; gap:10px; }
.kpi-icon{ width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; }
.kpi-icon .material-icon{ font-size:19px; }
.kpi-value{ font-size:23px; font-weight:800; color:var(--navy); line-height:1; }
.kpi-label{ font-size:11.5px; color:var(--muted); font-weight:500; }
.kpi-card-compact{ padding:16px; }
.kpi-card-compact .kpi-value{ font-size:21px; margin-top:6px; }
.kpi-sub{ font-size:10.5px; margin-top:3px; }

/* ---------- Tables ---------- */
.data-table{ width:100%; border-collapse:collapse; }
.data-table thead tr{ background:var(--bg); }
.data-table th{ text-align:left; padding:11px 18px; font-size:10.5px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.data-table th.num{ text-align:right; }
.data-table td{ padding:11px 18px; font-size:12.5px; color:var(--ink); }
.data-table td.num{ text-align:right; }
.data-table tr{ border-bottom:1px solid var(--divider); }
.data-table tbody tr:hover{ background:var(--bg); }
.row-clickable{ cursor:pointer; }
.cell-sub{ font-size:11px; color:var(--faint); }

/* ---------- Badges ---------- */
.badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:700; white-space:nowrap; }
.badge-dot{ width:7px; height:7px; border-radius:50%; }
.badge-sm{ padding:3px 9px; font-size:10.5px; }

/* ---------- Tabs ---------- */
.tabs{ display:inline-flex; gap:4px; margin-bottom:16px; background:#EEF2F6; padding:5px; border-radius:11px; width:fit-content; }
.tab{ padding:8px 18px; border-radius:8px; font-size:12.5px; font-weight:600; cursor:pointer; color:var(--muted); background:transparent; border:none; }
.tab.is-active{ background:#fff; color:var(--blue); box-shadow:0 2px 6px rgba(15,30,61,.08); }
.tab-pane{ display:none; }
.tab-pane.is-active{ display:block; }

.pill-toggle{ padding:7px 14px; border-radius:8px; font-size:11.5px; font-weight:600; cursor:pointer; color:var(--muted); background:transparent; border:1px solid transparent; }
.pill-toggle.is-active{ background:var(--blue); color:#fff; }
.pill-toggle-outline{ border:1px solid var(--border); }
.pill-toggle-outline.is-active{ background:var(--blue); color:#fff; border-color:var(--blue); }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 16px; border-radius:9px; font-size:12.5px; font-weight:700; cursor:pointer; border:1px solid transparent; }
.btn .material-icon{ font-size:17px; }
.btn-primary{ background:var(--blue); color:#fff; }
.btn-primary:hover{ background:var(--blue-dark); }
.btn-outline{ background:#fff; border-color:var(--border); color:#334155; }
.btn-outline:hover{ background:var(--bg); }
.btn-sm{ padding:6px 14px; font-size:11.5px; }
.btn-block{ display:flex; width:100%; }
.btn-success{ background:var(--green); color:#fff; }
.btn-success:hover{ background:var(--green-dark); }

/* ---------- Forms ---------- */
.field-select, .field-input, .field-date{
  padding:8px 12px; border-radius:9px; border:1px solid var(--border); font-size:12.5px;
  font-family:inherit; background:var(--bg); color:var(--ink);
}
.field-row{ display:flex; align-items:center; gap:10px; }
.range-input{ width:100%; }
.switch{ width:38px; height:20px; border-radius:999px; position:relative; background:var(--border); cursor:pointer; flex-shrink:0; }
.switch.is-on{ background:var(--green); }
.switch-knob{ position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:left .15s ease; }
.switch.is-on .switch-knob{ left:20px; }

/* ---------- Progress ---------- */
.progress{ height:7px; background:var(--divider); border-radius:6px; overflow:hidden; }
.progress-thick{ height:9px; }
.progress-bar{ height:100%; border-radius:6px; }

/* ---------- Map / zone visuals ---------- */
.map-frame{ position:relative; border-radius:14px; overflow:hidden; border:1px solid #E7EEF5; background:linear-gradient(135deg,#EAF3FB 0%,#E3F6F1 100%); }
.zone-canvas{ position:relative; border-radius:12px; background:var(--bg); border:1px solid #EEF2F6; overflow:hidden; }
.zone-canvas-dark{ background:var(--navy); }
.zone-block{ position:absolute; border-radius:10px; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:4px; overflow:hidden; text-align:center; }
.zone-block-name{ font-size:10.5px; font-weight:700; line-height:1.2; }
.zone-block-sub{ font-size:9px; margin-top:2px; }
.map-pin{ position:absolute; transform:translate(-50%,-100%); cursor:pointer; display:flex; flex-direction:column; align-items:center; }
.map-pin-label{ background:#fff; border-radius:8px; padding:4px 8px; font-size:10px; font-weight:600; color:var(--ink); white-space:nowrap; box-shadow:0 2px 8px rgba(15,30,61,.12); margin-bottom:3px; border:1px solid #EEF2F6; }
.map-pin-dot-wrap{ position:relative; width:16px; height:16px; }
.map-pin-pulse{ position:absolute; inset:0; border-radius:50%; opacity:.5; animation:pulseSoft 2.2s ease-out infinite; }
.map-pin-dot{ position:absolute; inset:3px; border-radius:50%; border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.25); }
.map-legend{ display:flex; gap:14px; align-items:center; }
.map-legend-item{ display:flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); }
.map-legend-dot{ width:9px; height:9px; border-radius:50%; }

/* ---------- Chat ---------- */
.chat-bubble{ max-width:75%; padding:10px 14px; border-radius:14px; font-size:12.5px; line-height:1.4; }

/* ---------- Camera thumbs ---------- */
.cam-thumb{ position:relative; aspect-ratio:4/3; border-radius:10px; background:linear-gradient(135deg,#1E293B,var(--navy)); overflow:hidden; }
.cam-thumb .material-icon{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:26px; color:rgba(255,255,255,.25); }
.cam-live{ position:absolute; top:6px; left:6px; display:flex; align-items:center; gap:4px; }
.cam-live-dot{ width:6px; height:6px; border-radius:50%; background:#EF4444; animation:pulseDot 1.8s infinite; }
.cam-live-label{ font-size:8.5px; color:#fff; font-weight:700; }
.cam-zone-label{ position:absolute; bottom:6px; left:6px; right:6px; font-size:9px; color:#fff; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- Placeholder ---------- */
.placeholder-block{ display:flex; flex-direction:column; align-items:center; justify-content:center; height:60vh; background:#fff; border-radius:18px; border:1px dashed #CBD5E1; }
.placeholder-block .material-icon{ font-size:44px; color:#CBD5E1; }
.placeholder-title{ font-size:15px; font-weight:700; color:#334155; margin-top:12px; }
.placeholder-sub{ font-size:12.5px; color:var(--faint); margin-top:4px; }

.upload-drop{ height:150px; border:2px dashed #CBD5E1; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--faint); }
.upload-drop .material-icon{ font-size:30px; }