chrono/src/style.css

/* Chrono Module Styles - All scoped to .chrono-container and using theme colors */

/* Ensure grids display properly within Chrono module only */
.chrono-container .calendar-grid,
.chrono-container .mini-calendar {
  display: grid !important;
}

.chrono-container .calendar-grid {
  grid-template-columns: repeat(7, 1fr) !important;
  grid-template-rows: auto repeat(6, 1fr) !important;
}

.chrono-container .mini-calendar {
  grid-template-columns: repeat(7, 1fr) !important;
}

.chrono-container .week-days,
.chrono-container .week-view,
.chrono-container .day-view {
  display: flex !important;
  flex-direction: row !important;
}

.chrono-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.chrono-container .chrono-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid rgb(var(--v-border-color));
}

.chrono-container .chrono-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.chrono-container .chrono-sidebar {
  width: 280px;
  border-right: 1px solid rgb(var(--v-border-color));
  overflow-y: auto;
}

.chrono-container .chrono-main {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

/* Calendar specific styles - scoped to chrono-container */
.chrono-container .calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background-color: rgb(var(--v-border-color));
  border: 1px solid rgb(var(--v-border-color));
}

.chrono-container .calendar-cell {
  background-color: rgb(var(--v-theme-surface));
  min-height: 100px;
  padding: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.chrono-container .calendar-cell:hover {
  background-color: rgb(var(--v-theme-surface-variant));
}

.chrono-container .calendar-cell.today {
  background-color: rgb(var(--v-theme-primary), 0.08);
}

.chrono-container .calendar-event {
  padding: 2px 6px;
  margin: 2px 0;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Task specific styles - scoped to chrono-container */
.chrono-container .task-item {
  display: flex;
  align-items: flex-start;
  padding: 12px;
  border-bottom: 1px solid rgb(var(--v-border-color));
  cursor: pointer;
  transition: background-color 0.2s;
}

.chrono-container .task-item:hover {
  background-color: rgb(var(--v-theme-surface-variant));
}

.chrono-container .task-item.completed {
  opacity: 0.6;
}

.chrono-container .task-checkbox {
  margin-right: 12px;
}

.chrono-container .task-content {
  flex: 1;
}

.chrono-container .task-title {
  font-weight: 500;
  margin-bottom: 4px;
}

.chrono-container .task-title.completed {
  text-decoration: line-through;
}

.chrono-container .task-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  opacity: 0.7;
}

.chrono-container .priority-badge {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
}

.chrono-container .priority-high {
  background-color: rgb(var(--v-theme-error), 0.1);
  color: rgb(var(--v-theme-error));
}

.chrono-container .priority-medium {
  background-color: rgb(var(--v-theme-warning), 0.1);
  color: rgb(var(--v-theme-warning));
}

.chrono-container .priority-low {
  background-color: rgb(var(--v-theme-success), 0.1);
  color: rgb(var(--v-theme-success));
}

/* Event Viewer Popup - applied globally since popup is rendered at fixed position */
.event-popup {
  position: fixed;
  z-index: 9999;
  pointer-events: auto;
  transform: translate(-50%, -100%);
  margin-top: -10px;
  width: 320px;
  min-height: 150px;
}

.event-popup-card {
  cursor: pointer;
  transition: transform 0.2s;
}

.event-popup-card:hover {
  transform: scale(1.02);
}

.event-popup-details {
  font-size: 13px;
}

.event-popup .text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 250px;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.event-popup .border-t {
  border-top: 1px solid rgba(var(--v-border-color), 0.5);
}