/* ============================================
   DATE DISPLAY STYLESHEET
   Consolidated date display styles with base class
   All dates use consistent base font size: 0.85rem
   ============================================ */

/* ============================================
   BASE DATE STYLE
   All dates use this single base class with consistent font size
   ============================================ */

.date-display {
  font-size: 0.85rem; /* Consistent base font size for all dates */
  line-height: 1.3;
  display: inline-block;
  white-space: nowrap;
}

/* Date Container - for grouped date displays */
.date-container {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
}

/* Date Label - for secondary date text */
.date-label {
  font-size: 0.75em; /* Relative to base, so ~0.64rem */
  line-height: 1.2;
  white-space: nowrap;
}

/* ============================================
   DATE STATUS MODIFIERS
   Apply to base .date-display class for consistent styling
   ============================================ */

/* Overdue Dates - Red */
.date-display.overdue {
  background-color: #ff6b6b;
  color: #fff;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.25);
}

/* Due Soon / Warning Dates - Yellow/Orange */
.date-display.due-soon {
  background: rgba(255, 204, 0, 0.15);
  color: #ffe598;
  padding: 2px 6px;
  border-radius: 4px;
}

/* OK / Good Dates - Green */
.date-display.ok {
  background: rgba(76, 175, 80, 0.15);
  color: #81c784;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(76, 175, 80, 0.3);
}

/* Date Label Status Modifiers */
.date-label.overdue {
  color: #ff6666;
}

.date-label.due-soon {
  color: #aaa;
}

.date-label.ok {
  color: #aaa;
}

/* ============================================
   LEGACY ALIASES
   Support for old class names (backwards compatibility)
   ============================================ */

/* date-badge is now an alias for date-display */
.date-badge {
  font-size: 0.85rem;
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-weight: 700;
  white-space: nowrap;
  word-wrap: break-word;
  max-width: 100%;
}

.date-badge.overdue {
  background-color: #ff6b6b;
  color: #fff;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.25);
}

.date-badge.due-soon {
  background: rgba(255, 204, 0, 0.15);
  color: #ffe598;
  border: 1px solid rgba(255, 204, 0, 0.3);
}

.date-badge.ok {
  background: rgba(76, 175, 80, 0.15);
  color: #81c784;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 400;
  border: 1px solid rgba(76, 175, 80, 0.3);
}

/* Additional legacy aliases */
.date-display.overdue-date {
  background-color: #ff6b6b;
  color: #fff;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.25);
}

.date-display.warning {
  background: rgba(255, 204, 0, 0.15);
  color: #ffe598;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
  border: 1px solid rgba(255, 204, 0, 0.3);
}

.date-display.good {
  background: rgba(76, 175, 80, 0.15);
  color: #81c784;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(76, 175, 80, 0.3);
}

/* ============================================
   CALENDAR DATE STYLES
   For calendar/inspection schedule displays
   ============================================ */

/* Calendar Month Container */
.month-calendar.current-month .inspection-calendar {
  border: 2px solid var(--pri);
  box-shadow: 0 0 0 2px rgba(77, 163, 255, 0.1);
}

.inspection-calendar {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.calendar-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--card-alt);
  border-bottom: 1px solid var(--line);
}

.calendar-day-header {
  padding: 4px 2px;
  text-align: center;
  font-weight: 600;
  font-size: 0.7em;
  color: var(--muted);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.calendar-day {
  min-height: 40px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  background: var(--card);
}

.calendar-day:nth-child(7n) {
  border-right: none;
}

.calendar-day.empty-day {
  background: transparent;
  border: none;
}

.calendar-day.empty-day:nth-child(7n) {
  border-right: 1px solid var(--line);
}

.calendar-day.today {
  background: rgba(77, 163, 255, 0.1);
  border: 2px solid var(--pri);
}

.calendar-day.past {
  opacity: 0.6;
}

.calendar-day-number {
  font-size: 0.75em; /* Relative to base */
  font-weight: 600;
  margin-bottom: 1px;
  line-height: 1;
}

.calendar-day-count {
  background: var(--pri);
  color: #fff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65em; /* Relative to base */
  font-weight: 700;
  margin-top: auto;
  line-height: 1;
}

.calendar-day-count.overdue {
  background: #ff6b6b;
  color: #fff;
  opacity: 1 !important;
}

.calendar-day-count.due-soon {
  background: #ffc107;
  color: #000;
  opacity: 1 !important;
}

.calendar-day-count.due-later {
  background: #4caf50;
  color: #fff;
  opacity: 1 !important;
}

/* Calendar responsive */
@media (max-width: 1800px) {
  .inspection-schedule-grid {
    grid-template-columns: repeat(5, 1fr) !important;
  }
}

@media (max-width: 1500px) {
  .inspection-schedule-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

@media (max-width: 1200px) {
  .inspection-schedule-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 900px) {
  .inspection-schedule-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .inspection-schedule-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 600px) {
  .inspection-schedule-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================
   NAVIGATION BADGE DATES
   Date indicators on navigation items
   ============================================ */

.nav-badge-date {
  position: absolute;
  top: -5px;
  border-radius: 4px;
  width: 24px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px; /* Small for nav badges */
  font-weight: 700;
  line-height: 1;
  border: 2px solid var(--bg);
  padding: 0 2px;
  box-sizing: border-box;
  right: -5px;
}

.nav-badge-date.overdue {
  background: #ff6b6b;
  color: #fff;
}

.nav-badge-date.due-soon {
  background: #ff7700;
  color: #fff;
}

.nav-badge-date.need-start-date {
  background: #ff9800;
  color: #fff;
}

/* Navigation badge positioning utilities */
.nav-badge-date.right-0 {
  right: -5px;
}

.nav-badge-date.right-1 {
  right: 23px;
}

.nav-badge-date.right-2 {
  right: 51px;
}

.nav-badge-date.right-3 {
  right: 79px;
}

.nav-badge-date.right-4 {
  right: 107px;
}

/* ============================================
   CONTEXT-SPECIFIC DATE STYLES
   ============================================ */

/* Bug comment dates */
.bug-comment-date {
  font-size: 0.9em; /* Slightly larger for readability */
  color: var(--muted);
}

/* Plain date text (table cells, etc.) */
.date-text {
  font-size: 0.85rem; /* Match base */
  color: var(--text);
  white-space: nowrap;
}

/* ============================================
   LIGHT THEME VARIANTS
   ============================================ */

/* Light theme variants for date status modifiers */
[data-theme="light"] .date-display.overdue {
  background-color: #c62828;
  color: #fff;
  border: 1px solid #8e1e1e;
}

[data-theme="light"] .date-label.overdue {
  color: #d32f2f;
}

[data-theme="light"] .date-display.due-soon {
  background: rgba(217, 119, 6, 0.15);
  color: #92400e;
  border-color: rgba(217, 119, 6, 0.3);
}

[data-theme="light"] .date-display.ok {
  background: rgba(76, 175, 80, 0.15);
  color: #2e7d32;
  border-color: rgba(76, 175, 80, 0.3);
}

/* Light theme for legacy date-badge aliases */
[data-theme="light"] .date-badge.overdue {
  background-color: #c62828;
  color: #fff;
  border: 1px solid #8e1e1e;
}

[data-theme="light"] .date-badge.due-soon {
  background: rgba(217, 119, 6, 0.15);
  color: #92400e;
  border-color: rgba(217, 119, 6, 0.3);
}

[data-theme="light"] .date-badge.ok {
  background: rgba(76, 175, 80, 0.15);
  color: #2e7d32;
  border-color: rgba(76, 175, 80, 0.3);
}

/* Legacy support - map old classes to new ones */
.eol-display-container,
.eol-display {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
}

.eol-overdue-date,
.eol-overdue {
  color: #ff0000;
  font-weight: bold;
  background-color: #ffe0e0;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.85rem;
}

.eol-overdue-label {
  font-size: 0.75em;
  color: #ff6666;
}

.eol-label,
.eol-ok-label {
  font-size: 0.75em;
  color: #aaa;
}

.eol-ok {
  background: rgba(0, 200, 0, 0.1);
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.85rem;
  border: 1px solid rgba(0, 200, 0, 0.2);
}