/* Dashboard Page Styles */

.calendar-module { padding: var(--spacing-lg); }

.calendar-toolbar {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--spacing-lg);
}

.toolbar-left, .toolbar-right { display: flex; gap: var(--spacing-md); align-items: center; }

#monthDisplay { cursor: pointer; }

.calendar-layout {
  display: grid;
  grid-template-columns: 45% 35% 20%;
  gap: var(--spacing-lg);
  height: 600px;
}

.calendar-left, .calendar-center, .calendar-right {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  overflow-y: auto;
}

.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--spacing-sm); margin-bottom: var(--spacing-md); }

.cal-weekday { text-align: center; font-weight: var(--font-weight-semibold); font-size: var(--font-size-body-small); }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--spacing-sm); }

.cal-cell { min-height: 80px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--spacing-sm); cursor: pointer; transition: all var(--transition-normal); }

.cal-cell:hover { background-color: var(--color-gray-ultra-light); }

.cal-cell.cal-selected { border: 2px solid var(--color-primary); }

.cal-cell-date { font-weight: var(--font-weight-semibold); }

.detail-header { margin-bottom: var(--spacing-lg); border-bottom: 1px solid var(--color-border); padding-bottom: var(--spacing-md); }

.detail-tasks { display: flex; flex-direction: column; gap: var(--spacing-md); }

.task-card {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  transition: all var(--transition-normal);
}

.task-card:hover { box-shadow: var(--shadow-hover); }

.task-card-header { display: flex; justify-content: space-between; margin-bottom: var(--spacing-md); }

.task-channel { background-color: var(--color-primary-light); color: var(--color-primary); padding: 4px 8px; border-radius: var(--radius-sm); font-size: var(--font-size-caption); }

.task-time { color: var(--color-text-secondary); font-size: var(--font-size-body-small); }

.task-status { margin-bottom: var(--spacing-md); }

.task-card-actions { display: flex; gap: var(--spacing-sm); }

.quick-action-btn {
  width: 100%;
  padding: var(--spacing-md);
  text-align: left;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-gray-ultra-light);
  cursor: pointer;
  transition: all var(--transition-normal);
  margin-bottom: var(--spacing-sm);
}

.quick-action-btn:hover { border-color: var(--color-primary); background-color: var(--color-primary-light); }

/* Content Module */
.content-shortcuts { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-lg); margin-bottom: var(--spacing-2xl); }

.shortcut-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  cursor: pointer;
  transition: all var(--transition-normal);
}

.shortcut-card:hover { border-color: var(--color-primary); transform: translateY(-4px); }

.shortcut-icon { font-size: 24px; margin-bottom: var(--spacing-md); }

.workspace-context { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-lg); margin-bottom: var(--spacing-lg); }

.context-field { display: flex; flex-direction: column; }

.workspace-result { margin-top: var(--spacing-2xl); }

.result-section {
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}

/* Generator Module */
.generator-module { padding: var(--spacing-lg); }

.generator-header { margin-bottom: var(--spacing-2xl); }

.generator-input-area { margin-bottom: var(--spacing-2xl); }

.generator-prompt { width: 100%; min-height: 120px; padding: var(--spacing-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-family: inherit; font-size: inherit; resize: vertical; }

.generator-tasks { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg); margin-bottom: var(--spacing-2xl); }

.task-entry { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--spacing-lg); cursor: pointer; transition: all var(--transition-normal); display: flex; align-items: center; gap: var(--spacing-md); }

.task-entry:hover { box-shadow: var(--shadow-hover); }

.task-entry-icon { font-size: 24px; }

.task-entry-content { flex: 1; }

.task-entry-arrow { color: var(--color-text-secondary); font-size: 20px; }

#progressArea { margin: var(--spacing-lg) 0; }

#progressBar { background-color: var(--color-primary); height: 100%; width: 0%; transition: width 0.3s ease; }

/* Billing Module */
.billing-module { padding: var(--spacing-lg); }

.billing-plan { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--spacing-lg); margin-bottom: var(--spacing-2xl); }

.plan-info { padding-right: var(--spacing-lg); border-right: 1px solid var(--color-border); }

.plan-features { padding-left: var(--spacing-lg); }

.billing-table { width: 100%; border-collapse: collapse; }

.billing-table th { text-align: left; padding: var(--spacing-md); border-bottom: 2px solid var(--color-border); font-weight: var(--font-weight-semibold); }

.billing-table td { padding: var(--spacing-md); border-bottom: 1px solid var(--color-border); }

.billing-table tbody tr:hover { background-color: var(--color-gray-ultra-light); }

.billing-form { margin-top: var(--spacing-lg); }

@media (max-width: 768px) {
  .calendar-layout { grid-template-columns: 1fr; }
  .generator-tasks { grid-template-columns: 1fr; }
  .content-shortcuts { grid-template-columns: 1fr; }
  .workspace-context { grid-template-columns: 1fr; }
  .billing-plan { grid-template-columns: 1fr; border-right: none; padding-left: 0; }
}