/* Layout */
body { background: #f0f2f5; overflow-x: hidden; }

.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1c2e 0%, #2d3561 100%);
}

.sidebar {
  position: fixed;
  top: 56px;
  left: 0;
  width: 230px;
  height: calc(100vh - 56px);
  overflow-y: auto;
  z-index: 1000;
  transition: transform 0.3s;
}

.sidebar-link {
  color: #adb5bd;
  padding: 12px 20px;
  font-size: 0.95rem;
  border-left: 3px solid transparent;
  transition: all 0.2s;
}
.sidebar-link:hover, .sidebar-link.active {
  color: #fff;
  background: rgba(255,255,255,0.08);
  border-left-color: #0d6efd;
}
.sidebar-link i { width: 24px; margin-right: 8px; }

.main-content {
  margin-left: 230px;
  margin-top: 56px;
  padding: 24px;
  min-height: calc(100vh - 56px);
}

/* Stat Cards */
.stat-card {
  border: none;
  border-left: 4px solid;
  border-radius: 8px;
  transition: transform 0.15s;
}
.stat-card:hover { transform: translateY(-2px); }
.stat-card .stat-value { font-size: 1.8rem; font-weight: 700; }
.stat-card .stat-label { font-size: 0.85rem; color: #6c757d; text-transform: uppercase; letter-spacing: 0.5px; }

/* Tables */
.table-clickable tbody tr { cursor: pointer; }
.table-clickable tbody tr:hover { background: #e9ecef; }
.table th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; color: #6c757d; white-space: nowrap; }

/* Badges */
.badge-incoming { background: #0d6efd; }
.badge-outgoing { background: #198754; }
.badge-missed { background: #dc3545; }
.badge-completed { background: #198754; }
.badge-no_answer { background: #ffc107; color: #000; }
.badge-busy { background: #fd7e14; }
.badge-failed { background: #dc3545; }

/* Charts */
.chart-card { border: none; border-radius: 8px; }
.chart-card .card-header { background: transparent; border-bottom: 1px solid #eee; font-weight: 600; }

/* Phone Lookup */
.lookup-search { max-width: 600px; margin: 0 auto; }
.lookup-result { max-width: 700px; margin: 24px auto; }

/* Loading spinner */
.page-loader { text-align: center; padding: 80px 20px; color: #6c757d; }

/* Responsive */
@media (max-width: 767.98px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.show { transform: translateX(0); }
  .main-content { margin-left: 0; }
}