/* ================================================================
   CleanFix Dashboard — dashboard.css
   ================================================================ */

/* ── Dashboard Layout ── */
.dashboard {
  display:flex; min-height:100vh; background:var(--bg-primary);
}

/* ── Sidebar ── */
.sidebar {
  width:var(--sidebar-width); height:100vh;
  background:var(--bg-card); border-right:1px solid var(--border-color);
  display:flex; flex-direction:column;
  position:fixed; left:0; top:0; z-index:100;
  transition:width var(--duration-slow) var(--ease-out),
            transform var(--duration-slow) var(--ease-out);
  overflow:hidden;
}
.sidebar-collapsed { width:var(--sidebar-collapsed); }
.sidebar-collapsed .sidebar-text { opacity:0; width:0; }
.sidebar-collapsed .sidebar-brand-text { opacity:0; }
.sidebar-collapsed .sidebar-section-title { opacity:0; }
.sidebar-collapsed .sidebar-footer { opacity:0; }

.sidebar-brand {
  height:var(--header-height); padding:0 var(--space-4);
  display:flex; align-items:center; gap:var(--space-3);
  border-bottom:1px solid var(--border-color); flex-shrink:0;
}
.sidebar-brand-icon {
  width:36px; height:36px; border-radius:var(--radius-md);
  background:linear-gradient(135deg,var(--teal-500),var(--teal-700));
  display:flex; align-items:center; justify-content:center;
  font-weight:700; color:white; font-size:var(--text-lg);
  flex-shrink:0; box-shadow:0 4px 12px rgba(20,184,166,0.3);
}
.sidebar-brand-text {
  font-size:var(--text-lg); font-weight:700; color:var(--text-primary);
  transition:opacity var(--duration-normal);
  white-space:nowrap;
}

.sidebar-nav {
  flex:1; overflow-y:auto; overflow-x:hidden;
  padding:var(--space-3) var(--space-3);
}
.sidebar-section { margin-bottom:var(--space-4); }
.sidebar-section-title {
  padding:0 var(--space-3); margin-bottom:var(--space-2);
  font-size:var(--text-xs); font-weight:600;
  text-transform:uppercase; letter-spacing:0.08em;
  color:var(--text-muted); white-space:nowrap;
  transition:opacity var(--duration-normal);
}

.sidebar-link {
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-md); margin-bottom:2px;
  color:var(--text-secondary); font-size:var(--text-sm); font-weight:500;
  transition:all var(--duration-fast); cursor:pointer; white-space:nowrap;
  position:relative;
}
.sidebar-link:hover {
  background:var(--bg-secondary); color:var(--text-primary);
}
.sidebar-link.active {
  background:var(--teal-500); color:white;
  box-shadow:0 4px 12px rgba(20,184,166,0.3);
}
.sidebar-link .icon { flex-shrink:0; width:20px; display:flex; justify-content:center; }
.sidebar-link .badge { margin-left:auto; flex-shrink:0; font-size:10px; padding:1px 6px; }
.sidebar-link.active .badge { background:rgba(255,255,255,0.25); color:white; }

.sidebar-footer {
  padding:var(--space-3); border-top:1px solid var(--border-color);
  flex-shrink:0; transition:opacity var(--duration-normal);
}

/* Mobile sidebar overlay */
.sidebar-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:99;
  opacity:0; visibility:hidden; transition:all var(--duration-normal);
}
.sidebar-overlay.active { opacity:1; visibility:visible; }

/* ── Main Content ── */
.main {
  flex:1; margin-left:var(--sidebar-width);
  transition:margin-left var(--duration-slow) var(--ease-out);
  min-height:100vh; display:flex; flex-direction:column;
}
.main-expanded { margin-left:var(--sidebar-collapsed); }

/* ── Header ── */
.header {
  height:var(--header-height); background:var(--bg-card);
  border-bottom:1px solid var(--border-color);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--space-6); gap:var(--space-4);
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(12px); background:rgba(var(--bg-card),0.85);
}
[data-theme="dark"] .header { background:rgba(17,24,39,0.85); }

.header-left, .header-right { display:flex; align-items:center; gap:var(--space-3); }
.header-title {
  font-size:var(--text-lg); font-weight:700; color:var(--text-primary);
}
.header-breadcrumb { font-size:var(--text-sm); color:var(--text-muted); }

.header-search {
  position:relative; width:280px;
}
.header-search input {
  width:100%; padding:8px 12px 8px 36px;
  background:var(--bg-secondary); border:1px solid var(--border-color);
  border-radius:var(--radius-md); font-size:var(--text-sm);
  color:var(--text-primary); outline:none; transition:all var(--duration-fast);
}
.header-search input:focus {
  border-color:var(--teal-500); box-shadow:0 0 0 3px var(--shadow-glow);
}
.header-search svg {
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  color:var(--text-muted);
}

.header-btn {
  width:36px; height:36px; border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); background:var(--bg-secondary);
  border:1px solid var(--border-color); cursor:pointer;
  transition:all var(--duration-fast); position:relative;
}
.header-btn:hover {
  color:var(--text-primary); border-color:var(--slate-300);
}
[data-theme="dark"] .header-btn:hover { border-color:var(--slate-600); }
.header-btn .badge-dot {
  position:absolute; top:6px; right:6px;
  width:8px; height:8px; border-radius:50%; background:var(--error-500);
  box-shadow:0 0 0 2px var(--bg-card);
}

.header-avatar {
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg,var(--teal-500),var(--teal-700));
  display:flex; align-items:center; justify-content:center;
  font-weight:600; color:white; font-size:var(--text-sm); cursor:pointer;
}

/* ── Page Content ── */
.page { padding:var(--space-6); flex:1; }
.page-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--space-4); margin-bottom:var(--space-6); flex-wrap:wrap;
}
.page-title { font-size:var(--text-2xl); font-weight:700; letter-spacing:-0.02em; }
.page-subtitle { font-size:var(--text-sm); color:var(--text-muted); margin-top:2px; }
.page-actions { display:flex; gap:var(--space-3); flex-shrink:0; }

/* ── Widget Grid ── */
.widget-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--space-5); margin-bottom:var(--space-6);
}
.widget-grid-4 { grid-template-columns:repeat(4,1fr); }
.widget-grid-3 { grid-template-columns:repeat(3,1fr); }
.widget-grid-2 { grid-template-columns:repeat(2,1fr); }

@media (max-width:1280px) {
  .widget-grid-4 { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:1024px) {
  .widget-grid-4, .widget-grid-3 { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  .widget-grid-4, .widget-grid-3, .widget-grid-2 { grid-template-columns:1fr; }
}

/* ── Chart Widget ── */
.chart-widget { min-height:320px; }
.chart-header { margin-bottom:var(--space-4); }
.chart-title { font-size:var(--text-base); font-weight:600; }
.chart-subtitle { font-size:var(--text-xs); color:var(--text-muted); }
.chart-container { height:240px; position:relative; }

/* ── Activity Feed ── */
.activity-list { display:flex; flex-direction:column; gap:var(--space-3); }
.activity-item {
  display:flex; gap:var(--space-3); padding:var(--space-3);
  border-radius:var(--radius-md); transition:background var(--duration-fast);
}
.activity-item:hover { background:var(--bg-secondary); }
.activity-avatar {
  width:36px; height:36px; border-radius:50%;
  background:var(--bg-tertiary); display:flex; align-items:center; justify-content:center;
  font-size:var(--text-sm); flex-shrink:0;
}
.activity-content { flex:1; min-width:0; }
.activity-text { font-size:var(--text-sm); color:var(--text-primary); line-height:1.4; }
.activity-text strong { font-weight:600; }
.activity-meta { font-size:var(--text-xs); color:var(--text-muted); margin-top:2px; }

/* ── Responsive ── */
@media (max-width:1024px) {
  .sidebar { transform:translateX(-100%); width:var(--sidebar-width); }
  .sidebar.mobile-open { transform:translateX(0); }
  .sidebar-collapsed.sidebar { transform:translateX(-100%); }
  .main { margin-left:0; }
  .main-expanded { margin-left:0; }
  .header-search { display:none; }
}

@media (max-width:768px) {
  .page { padding:var(--space-4); }
  .page-header { flex-direction:column; }
  .page-actions { width:100%; }
  .page-actions .btn { flex:1; }
  .header { padding:0 var(--space-4); }
  .header-title { font-size:var(--text-base); }
}

@media (max-width:480px) {
  .header-right .header-btn:not(.mobile-visible) { display:none; }
  .widget-grid { grid-template-columns:1fr; }
}

/* ── Scroll animations ── */
.reveal {
  opacity:0; transform:translateY(24px);
  transition:opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}
.reveal.visible { opacity:1; transform:translateY(0); }

/* ── Live pulse on active users ── */
.live-pulse {
  display:inline-flex; align-items:center; gap:var(--space-2);
}
.live-pulse-dot {
  width:8px; height:8px; border-radius:50%; background:var(--success-500);
  position:relative;
}
.live-pulse-dot::after {
  content:''; position:absolute; inset:-4px; border-radius:50%;
  background:var(--success-500); opacity:0;
  animation:pulseGlow 2s ease-in-out infinite;
}

/* ── Notifications Panel ── */
.notifications-panel {
  position:fixed; top:var(--header-height); right:0;
  width:380px; max-height:calc(100vh - var(--header-height));
  background:var(--bg-card); border-left:1px solid var(--border-color);
  box-shadow:var(--shadow-xl); z-index:80;
  transform:translateX(100%); transition:transform var(--duration-slow) var(--ease-out);
  display:flex; flex-direction:column;
}
.notifications-panel.open { transform:translateX(0); }
.notifications-header {
  padding:var(--space-4) var(--space-5);
  border-bottom:1px solid var(--border-color);
  display:flex; align-items:center; justify-content:space-between;
}
.notifications-list {
  flex:1; overflow-y:auto; padding:var(--space-2);
}
.notifications-item {
  padding:var(--space-3) var(--space-4); border-radius:var(--radius-md);
  display:flex; gap:var(--space-3); transition:background var(--duration-fast); cursor:pointer;
}
.notifications-item:hover { background:var(--bg-secondary); }
.notifications-item.unread { background:var(--teal-50); border-left:3px solid var(--teal-500); }
[data-theme="dark"] .notifications-item.unread { background:rgba(20,184,166,0.08); }

/* ── Quick Actions Bar ── */
.quick-actions {
  display:flex; gap:var(--space-3); flex-wrap:wrap;
  padding:var(--space-4); background:var(--bg-card);
  border:1px solid var(--border-color); border-radius:var(--radius-lg);
  margin-bottom:var(--space-6);
}
.quick-action {
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  background:var(--bg-secondary); border-radius:var(--radius-md);
  font-size:var(--text-sm); font-weight:500; color:var(--text-primary);
  transition:all var(--duration-fast); cursor:pointer; border:1px solid transparent;
}
.quick-action:hover {
  background:var(--teal-500); color:white;
  transform:translateY(-2px); box-shadow:var(--shadow-glow-sm);
}
.quick-action .icon { font-size:var(--text-lg); }

/* ── Revenue Counter Animation ── */
.revenue-counter {
  font-variant-numeric:tabular-nums;
  transition:all var(--duration-slow);
}