/* CNY911 Main Styles */
/* Version: 1.5.0 */

:root{
  --bg:#0f1317;
  --panel:#161b22;
  --panel2:#1c2128;
  --text:#e6edf3;
  --muted:#9aa4af;
  --brand:#6b2f0b;    /* header brown */
  --accent:#f0a072;   /* orange-ish for headings */
  --line:rgba(255,255,255,.12);
  --btn:#0b3b6a;      /* sidebar buttons */
  --btn2:#0a2f54;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:linear-gradient(180deg, rgba(107,47,11,.55) 0, rgba(107,47,11,0) 240px), var(--bg);
  color:var(--text);
}

/* Header */
.topbar{
  background:var(--brand);
  height:92px;
  display:flex;
  align-items:center;
  padding:0 16px;
  position:sticky;
  top:0;
  z-index:50;
  box-shadow:0 4px 18px rgba(0,0,0,.35);
}
.topbar-inner{
  width:min(1200px, 100%);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.left-head{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.hamburger{
  width:42px;height:42px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  background:rgba(0,0,0,.15);
  display:grid;place-items:center;
  cursor:pointer;
}
.hamburger span{
  display:block;
  width:18px;height:2px;
  background:rgba(255,255,255,.8);
  position:relative;
}
.hamburger span::before,.hamburger span::after{
  content:"";
  position:absolute;left:0;
  width:18px;height:2px;
  background:rgba(255,255,255,.8);
}
.hamburger span::before{top:-6px}
.hamburger span::after{top:6px}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.brand-logo{
  width:58px;height:58px;
  border-radius:12px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  display:grid;place-items:center;
  overflow:hidden;
}
.brand-logo img{width:100%;height:100%;object-fit:cover}
.brand-name{
  font-weight:800;
  letter-spacing:.6px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.head-links{
  display:flex;
  gap:18px;
  align-items:center;
  font-size:14px;
}
.head-links a{
  color:rgba(255,255,255,.92);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.head-links a:hover{border-bottom-color:rgba(255,255,255,.55)}

/* Layout */
.wrap{
  width:min(1200px, 100%);
  margin:18px auto 46px;
  padding:0 14px;
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
}

/* Desktop: main + sidebar like your screenshot */
@media (min-width: 980px){
  .wrap{
    grid-template-columns: 1fr 360px;
    gap:18px;
  }
}

/* Panels */
.panel{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.panel-pad{padding:14px}
.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
}
.muted{color:var(--muted)}
.btn{
  background:transparent;
  color:var(--text);
  border:1px solid rgba(240,160,114,.45);
  border-radius:10px;
  padding:10px 14px;
  cursor:pointer;
  font-weight:700;
}
.btn:hover{background:rgba(240,160,114,.08)}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
}

/* Calls table */
.calls-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
.calls-table th, .calls-table td{
  padding:12px;
  vertical-align:middle;
}
.calls-table thead th{
  font-size:13px;
  text-align:left;
  color:rgba(255,255,255,.9);
  background:rgba(0,0,0,.22);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.calls-table thead th:first-child{border-left:1px solid var(--line)}
.calls-table thead th:last-child{border-right:1px solid var(--line)}
.calls-table tbody{
  background: rgba(255,255,255,.02);
}
.calls-table tbody tr{
  border-bottom:2px solid rgba(255,255,255,.12);
}
.calls-table tbody tr + tr td{
  border-top:1px solid rgba(255,255,255,.06);
}

/* Mobile: turn table rows into cards */
@media (max-width: 979px){
  .calls-table thead{display:none}
  .calls-table, .calls-table tbody, .calls-table tr, .calls-table td{
    display:block;
    width:100%;
  }
  .calls-table tr{
    background:rgba(0,0,0,.18);
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    margin:12px 12px 14px;
    overflow:hidden;
  }
  .calls-table td{
    border-top:1px solid rgba(255,255,255,.07);
    padding:12px;
  }
  .calls-table td:first-child{border-top:none}
  .cell-label{
    display:block;
    font-size:12px;
    color:var(--muted);
    margin-bottom:6px;
  }
  .map-cell{padding:0}
  .map-wrap{height:220px}
}

/* Desktop map sizing */
.map-wrap{
  width:100%;
  height:160px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:#0b0f14;
}
.loc-title{font-weight:800}
.loc-sub{margin-top:4px; color:var(--muted); font-size:13px}

/* Sidebar */
.sidebar-title{
  font-size:40px;
  font-weight:900;
  color:var(--accent);
  letter-spacing:.4px;
  margin:0;
}
.side-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:12px;
  padding:14px 12px;
  font-weight:800;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, var(--btn), var(--btn2));
  color:var(--text);
  text-decoration:none;
  box-shadow:0 10px 22px rgba(0,0,0,.25);
}
.side-btn:hover{filter:brightness(1.06)}
.side-stack{display:flex; flex-direction:column; gap:12px; padding:14px}

/* Comments + Ads */
.grid-2{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
@media (min-width: 980px){
  .grid-2{grid-template-columns: 1fr 1fr}
}
.comment{
  padding:12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(0,0,0,.18);
}
.comment .meta{font-size:12px; color:var(--muted)}
.comment .body{margin-top:8px; white-space:pre-wrap}
.ad-box{
  height:140px;
  border:1px dashed rgba(255,255,255,.18);
  border-radius:12px;
  background:rgba(0,0,0,.14);
  display:grid;
  place-items:center;
  color:var(--muted);
  font-weight:800;
  letter-spacing:.3px;
}

/* Utility */
.sr-only{
  position:absolute!important;
  height:1px;width:1px;
  overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  white-space:nowrap;
}
.nowrap{white-space:nowrap}

/* Animations */
@keyframes slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOutRight {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(100px);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* New call row animation - slide in from left with green background */
.call-row-new {
  animation: slideInLeft 0.6s ease-out;
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.15) 0%, transparent 100%) !important;
}

.call-row-new td {
  position: relative;
}

/* Removing call row animation - slide out to right with red background */
.call-row-removing {
  animation: slideOutRight 0.6s ease-in;
  background: linear-gradient(90deg, transparent 0%, rgba(239, 68, 68, 0.15) 100%) !important;
}

/* Auto-refresh indicator */
.refresh-indicator {
  background: rgba(240, 160, 114, 0.08);
  border-color: rgba(240, 160, 114, 0.3);
}

.refresh-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  animation: pulse 2s ease-in-out infinite;
}

.refresh-indicator.loading .refresh-dot {
  animation: spin 1s linear infinite;
  border-radius: 0;
  width: 10px;
  height: 10px;
  border: 2px solid var(--accent);
  border-top-color: transparent;
  background: transparent;
}

/* Alerts Carousel */
#alertsContainer {
  position: relative;
  overflow: hidden;
}

.alerts-carousel {
  position: relative;
  min-height: 80px;
}

.alert {
  padding: 16px 20px;
  border-radius: 12px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  animation: slideInDown 0.4s ease-out;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.alert.active {
  opacity: 1;
  pointer-events: all;
  position: relative;
}

.alert-icon {
  font-size: 24px;
  flex-shrink: 0;
  line-height: 1;
}

.alert-content {
  flex: 1;
  min-width: 0;
}

.alert-title {
  font-weight: 900;
  font-size: 16px;
  margin-bottom: 6px;
}

.alert-message {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 10px;
}

.alert-link {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.alert-close {
  background: none;
  border: none;
  color: inherit;
  font-size: 20px;
  cursor: pointer;
  opacity: 0.7;
  padding: 0;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transition: opacity 0.2s;
}

.alert-close:hover {
  opacity: 1;
}

/* Carousel Navigation */
.alert-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
  padding-bottom: 8px;
}

.alert-nav-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: var(--text);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.2s ease;
}

.alert-nav-btn:hover {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.3);
}

.alert-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.alert-dots {
  display: flex;
  gap: 8px;
}

.alert-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.alert-dot.active {
  background: var(--accent);
  width: 24px;
  border-radius: 4px;
}

.alert-counter {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  min-width: 40px;
  text-align: center;
}

/* Alert Categories & Severities */
/* Site + Info */
.alert-site.alert-info {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(37, 99, 235, 0.08));
  border: 2px solid rgba(59, 130, 246, 0.4);
  color: #dbeafe;
}
.alert-site.alert-info .alert-link {
  background: rgba(59, 130, 246, 0.8);
  color: white;
}
.alert-site.alert-info .alert-link:hover {
  background: rgba(59, 130, 246, 1);
}

/* Site + Alert */
.alert-site.alert-alert {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.2), rgba(202, 138, 4, 0.1));
  border: 2px solid rgba(234, 179, 8, 0.5);
  color: #fef3c7;
}
.alert-site.alert-alert .alert-link {
  background: rgba(234, 179, 8, 0.9);
  color: #292524;
}
.alert-site.alert-alert .alert-link:hover {
  background: rgba(234, 179, 8, 1);
}

/* Informational + Info */
.alert-informational.alert-info {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(147, 51, 234, 0.08));
  border: 2px solid rgba(168, 85, 247, 0.4);
  color: #f3e8ff;
}
.alert-informational.alert-info .alert-link {
  background: rgba(168, 85, 247, 0.8);
  color: white;
}
.alert-informational.alert-info .alert-link:hover {
  background: rgba(168, 85, 247, 1);
}

/* Public Safety + Alert */
.alert-public-safety.alert-alert {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.2), rgba(234, 88, 12, 0.1));
  border: 2px solid rgba(249, 115, 22, 0.5);
  color: #ffedd5;
}
.alert-public-safety.alert-alert .alert-link {
  background: rgba(249, 115, 22, 0.9);
  color: white;
}
.alert-public-safety.alert-alert .alert-link:hover {
  background: rgba(249, 115, 22, 1);
}

/* Public Safety + Urgent */
.alert-public-safety.alert-urgent {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(220, 38, 38, 0.15));
  border: 2px solid rgba(239, 68, 68, 0.6);
  color: #fee2e2;
  font-size: 110%;
}
.alert-public-safety.alert-urgent .alert-title {
  font-size: 18px;
}
.alert-public-safety.alert-urgent .alert-link {
  background: rgba(239, 68, 68, 0.95);
  color: white;
}
.alert-public-safety.alert-urgent .alert-link:hover {
  background: rgba(239, 68, 68, 1);
}

/* Weather + Alert */
.alert-weather.alert-alert {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(219, 39, 119, 0.1));
  border: 2px solid rgba(236, 72, 153, 0.5);
  color: #fce7f3;
}
.alert-weather.alert-alert .alert-link {
  background: rgba(236, 72, 153, 0.9);
  color: white;
}
.alert-weather.alert-alert .alert-link:hover {
  background: rgba(236, 72, 153, 1);
}

/* Weather + Urgent */
.alert-weather.alert-urgent {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.25), rgba(185, 28, 28, 0.15));
  border: 2px solid rgba(220, 38, 38, 0.6);
  color: #fee2e2;
  font-size: 110%;
}
.alert-weather.alert-urgent .alert-title {
  font-size: 18px;
}
.alert-weather.alert-urgent .alert-link {
  background: rgba(220, 38, 38, 0.95);
  color: white;
}
.alert-weather.alert-urgent .alert-link:hover {
  background: rgba(220, 38, 38, 1);
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideOutUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}