/* ============================================
   تسکینو - Page-Specific Styles
   ============================================ */

/* ══════════════════════════════════════
   DASHBOARD
   ══════════════════════════════════════ */
.stat-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-5);
}

.dashboard-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.dashboard-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.task-list-compact {
  display: flex;
  flex-direction: column;
}
.task-compact-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2-5) 0;
  border-bottom: 1px solid var(--border-color-light);
}
.task-compact-item:last-child {
  border-bottom: none;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-color-light);
}
.activity-item:last-child {
  border-bottom: none;
}
.activity-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: var(--text-sm);
}
.activity-text {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}
.activity-text strong {
  color: var(--text-primary);
  font-weight: var(--font-semibold);
}
.activity-time {
  font-size: var(--text-2xs);
  color: var(--text-muted);
  flex-shrink: 0;
}

/* ══════════════════════════════════════
   TASKS PAGE
   ══════════════════════════════════════ */
.tasks-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.task-list-container {
  background: var(--bg-card);
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-2xl);
  overflow: hidden;
}
.task-list-header {
  display: grid;
  grid-template-columns: 40px 1fr 120px 100px 100px 80px 100px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-slate-50);
  border-bottom: 1px solid var(--border-color);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-muted);
  gap: var(--space-3);
}
.task-list-row {
  display: grid;
  grid-template-columns: 40px 1fr 120px 100px 100px 80px 100px;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-color-light);
  align-items: center;
  gap: var(--space-3);
  transition: background var(--transition-fast);
  cursor: pointer;
}
.task-list-row:hover {
  background: var(--color-slate-50);
}
.task-list-row:last-child {
  border-bottom: none;
}

/* Quick add */
.quick-add-task {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-slate-50);
  border-radius: var(--radius-xl);
  margin-top: var(--space-3);
}
.quick-add-task input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: var(--text-sm);
  outline: none;
  color: var(--text-primary);
}
.quick-add-task input::placeholder {
  color: var(--text-muted);
}

/* ══════════════════════════════════════
   TIME TRACKING PAGE
   ══════════════════════════════════════ */
.time-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.time-card-big {
  background: var(--bg-card);
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  text-align: center;
}
.time-card-big .timer-display {
  margin-bottom: var(--space-3);
}

.active-timers-section {
  margin-bottom: var(--space-6);
}
.active-timer-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border-color-light);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-2);
}
.active-timer-row .timer-task-name {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.time-chart-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

/* Simple bar chart */
.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  height: 200px;
  padding-bottom: var(--space-8);
  position: relative;
}
.bar-chart::after {
  content: '';
  position: absolute;
  bottom: calc(var(--space-8) - 1px);
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border-color-light);
}
.bar-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.bar {
  width: 100%;
  max-width: 40px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: linear-gradient(180deg, var(--color-primary-400), var(--color-primary-600));
  transition: height var(--transition-slower);
  position: relative;
}
.bar:hover {
  opacity: 0.85;
}
.bar-label {
  position: absolute;
  bottom: calc(-1 * var(--space-6));
  font-size: var(--text-2xs);
  color: var(--text-muted);
  white-space: nowrap;
}
.bar-value {
  position: absolute;
  top: -20px;
  font-size: var(--text-2xs);
  font-weight: var(--font-bold);
  color: var(--text-secondary);
}

/* ══════════════════════════════════════
   IDEAS PAGE
   ══════════════════════════════════════ */
.ideas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.idea-filters {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

/* ══════════════════════════════════════
   ROADMAP PAGE
   ══════════════════════════════════════ */
/* (Most styles in components.css) */

/* ══════════════════════════════════════
   CHANGELOG PAGE
   ══════════════════════════════════════ */
.changelog-timeline {
  max-width: 800px;
}

/* ══════════════════════════════════════
   MEMBERS PAGE
   ══════════════════════════════════════ */
.members-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.invite-form {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.invite-form .form-input {
  flex: 1;
  min-width: 200px;
}

/* ══════════════════════════════════════
   COMPONENT STYLE GUIDE PAGE
   ══════════════════════════════════════ */
.styleguide-section {
  margin-bottom: var(--space-10);
}
.styleguide-section-title {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-primary-200);
  color: var(--color-primary-700);
}
.styleguide-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-4);
}
.styleguide-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

/* Color swatches */
.color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-3);
}
.color-swatch {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border-color-light);
}
.color-swatch-block {
  height: 64px;
}
.color-swatch-info {
  padding: var(--space-2);
  background: var(--bg-card);
}
.color-swatch-name {
  font-size: var(--text-2xs);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}
.color-swatch-hex {
  font-size: var(--text-2xs);
  color: var(--text-muted);
  direction: ltr;
  text-align: left;
}

/* ══════════════════════════════════════
   SIDEBAR MOBILE OVERLAY
   ══════════════════════════════════════ */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  z-index: calc(var(--z-sticky) - 1);
}
@media (max-width: 768px) {
  .sidebar-overlay.active {
    display: block;
  }
}

/* ══════════════════════════════════════
   PAGE TRANSITIONS
   ══════════════════════════════════════ */
.page.active > * {
  animation: slideUp 0.35s ease-out both;
}
.page.active > *:nth-child(2) { animation-delay: 0.05s; }
.page.active > *:nth-child(3) { animation-delay: 0.1s; }
.page.active > *:nth-child(4) { animation-delay: 0.15s; }
.page.active > *:nth-child(5) { animation-delay: 0.2s; }

/* ══════════════════════════════════════
   MISC / HELPERS
   ══════════════════════════════════════ */
.section-divider {
  height: 1px;
  background: var(--border-color-light);
  margin: var(--space-6) 0;
}

.text-muted { color: var(--text-muted) !important; }
.text-primary-color { color: var(--color-primary-600) !important; }
.text-success { color: var(--color-success-600) !important; }
.text-danger { color: var(--color-danger-500) !important; }
.text-warning { color: var(--color-warning-600) !important; }
.text-sm { font-size: var(--text-sm) !important; }
.text-xs { font-size: var(--text-xs) !important; }
.text-2xs { font-size: var(--text-2xs) !important; }
.font-bold { font-weight: var(--font-bold) !important; }
.font-semibold { font-weight: var(--font-semibold) !important; }
.font-medium { font-weight: var(--font-medium) !important; }

.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mr-2 { margin-right: var(--space-2); }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }

.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }

.border { border: 1px solid var(--border-color); }
.border-light { border: 1px solid var(--border-color-light); }

.bg-slate-50 { background: var(--color-slate-50); }
.bg-white { background: var(--bg-card); }

.ltr { direction: ltr; }
.rtl { direction: rtl; }

/* Tooltip */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  right: 50%;
  transform: translateX(50%);
  padding: var(--space-1) var(--space-2-5);
  background: var(--color-slate-800);
  color: white;
  font-size: var(--text-2xs);
  font-weight: var(--font-medium);
  border-radius: var(--radius-md);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-fast);
  pointer-events: none;
}
[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
}