/* CourseOS · Today Screen
   Home screen showing date strip, summary tiles, and action cards.
   Mobile-first layout. */

/* Header area with app name and date */
.today-header {
  padding: var(--space-md) var(--space-md) 0;
}

.today-title {
  font-size: var(--font-2xl);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}

.today-subtitle {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin-top: 2px;
}

/* Yellow date strip showing most urgent class */
.date-strip {
  background: var(--color-yellow);
  color: #7A4800;
  padding: 10px var(--space-md);
  font-size: var(--font-sm);
  font-weight: 600;
  margin-top: var(--space-sm);
  border-radius: var(--radius-sm);
  margin-left: var(--space-md);
  margin-right: var(--space-md);
}

/* Three summary tiles row */
.summary-tiles {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md);
  overflow: hidden;
}

.summary-tile {
  flex: 1;
  min-width: 0;
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-md);
  color: #fff;
  min-height: 72px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s ease, opacity 0.1s ease;
}

.summary-tile:active {
  transform: scale(0.96);
  opacity: 0.85;
}

.summary-tile-number {
  font-size: var(--font-2xl);
  font-weight: 700;
  line-height: 1;
}

.summary-tile-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.9;
  margin-top: var(--space-xs);
}

.tile-late { background: #7B0000; }
.tile-red { background: var(--color-red); }
.tile-orange { background: var(--color-orange); }
.tile-blue { background: var(--color-blue); }

/* Action card */
.action-card {
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--border-color);
  overflow: hidden;
  margin: 0 var(--space-md) var(--space-sm);
  display: flex;
  cursor: pointer;
  max-width: 100%;
}

.action-card:active {
  opacity: 0.8;
}

/* Colored left border on action card */
.action-card-border {
  width: 4px;
  flex-shrink: 0;
}

.action-card-border.late { background: #7B0000; }
.action-card-border.urgent { background: var(--color-red); }
.action-card-border.soon { background: var(--color-orange); }
.action-card-border.normal { background: var(--color-blue); }

/* Card content area */
.action-card-content {
  padding: var(--space-lg) var(--space-md);
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* Course tag inside card */
.action-card .course-tag {
  color: #fff;
}

/* Card title */
.action-card-title {
  font-size: var(--font-base);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
  line-height: 1.3;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Card meta text */
.action-card-meta {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Context pills row */
.context-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.context-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  background: var(--gray-100);
  color: var(--gray-600);
}

.context-pill.time-pill {
  background: #FEF0F0;
  color: #C0392B;
}

.context-pill.audio-pill {
  background: #E8F8F5;
  color: #1A8A6A;
}

/* Section divider inside today screen */
.today-section {
  padding: 0 var(--space-md);
}

/* Theme toggle button */
.theme-toggle {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: var(--border-width) solid var(--border-color);
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  z-index: 10;
}

.theme-toggle:active {
  transform: scale(0.9);
}

/* ── Admin Alert Banners ───────────────────────────────────────────── */

.admin-alerts {
  padding: var(--space-sm) var(--space-md) 0;
}

.admin-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  background: #FEF0F0;
  border: 2px solid #E8BFBF;
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-bottom: var(--space-xs);
}

.admin-alert-content {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 1;
  min-width: 0;
}

.admin-alert-icon {
  font-size: 18px;
  flex-shrink: 0;
  color: #C0392B;
}

.admin-alert-text {
  flex: 1;
  min-width: 0;
}

.admin-alert-subject {
  font-size: 11px;
  font-weight: 700;
  color: #7B0000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-alert-from {
  font-size: 9px;
  color: #C0392B;
  margin-top: 1px;
}

.admin-alert-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.admin-alert-btn {
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  background: #C0392B;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  text-decoration: none;
  white-space: nowrap;
}

.admin-alert-dismiss {
  background: none;
  border: none;
  color: #C0392B;
  font-size: 14px;
  cursor: pointer;
  padding: 4px;
  -webkit-tap-highlight-color: transparent;
  opacity: 0.5;
}

.admin-alert-dismiss:active {
  opacity: 1;
}