/**
 * RoutineGen - JSON Routine Import Workspace Styles
 *
 * Architecture:
 * - Dual-panel Layout: Code-first JSON input on the left; live timetable matrix on the right.
 * - Monospace Editor: Accessible font stack with custom scroll styling and dark zinc borders.
 * - Audit Trail: Color-coded real-time log indicators for conflict detection and schedule placement.
 * - Interactive Grid: Sticky teacher and time dimensions with high-visibility conflict states.
 */

/* ==========================================================================
   1. JSON Monospace Editor Canvas
   ========================================================================== */

#json-input {
  min-height: 380px;
  resize: vertical;
  background-color: #09090b !important;
  color: #fafafa !important;
  border: 1px solid #27272a !important;
  border-radius: 6px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 0.8125rem;
  line-height: 1.5;
  padding: 12px;
}

#json-input:focus {
  border-color: #71717a !important;
  box-shadow: 0 0 0 1px #71717a !important;
  outline: none;
}

/* ==========================================================================
   2. Real-Time Parser Audit Log
   ========================================================================== */

.build-log {
  max-height: 320px;
  overflow-y: auto;
  padding: 10px;
  background: #09090b;
  border-radius: 6px;
  border: 1px solid #27272a;
}

.build-log-entry {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  border: 1px solid #27272a;
  background: #000000;
  animation: logFadeIn 0.2s ease;
  word-break: break-word;
  overflow-wrap: anywhere;
}

@keyframes logFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.build-log-entry.ok {
  background: rgba(34, 197, 94, 0.08);
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.2);
}

.build-log-entry.conflict {
  background: rgba(239, 68, 68, 0.08);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.2);
}

.build-log-entry i {
  margin-top: 0.1rem;
  font-size: 0.95rem;
  flex-shrink: 0;
}

/* ==========================================================================
   3. Live Timetable Cell States & Placement Effects
   ========================================================================== */

.cell-conflict {
  background-color: rgba(239, 68, 68, 0.15) !important;
  color: #fca5a5 !important;
  position: relative;
  font-weight: 500;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

.cell-placed {
  animation: cellPop 0.3s ease;
}

@keyframes cellPop {
  from { background-color: rgba(255, 255, 255, 0.1); }
  to   { background-color: transparent; }
}

.semester-mini-title {
  font-size: 0.875rem;
  color: #fafafa !important;
  background-color: #09090b !important;
  border-bottom: 1px solid #27272a;
}

/* ==========================================================================
   4. Teacher Availability Schedule Matrix
   ========================================================================== */

#teacher-grid-wrapper table {
  min-width: 680px;
  width: 100%;
}

#teacher-grid-wrapper th,
#teacher-grid-wrapper td {
  padding: 8px 10px;
  vertical-align: middle;
  border-color: #27272a;
}

#teacher-grid-wrapper th:first-child,
#teacher-grid-wrapper td:first-child {
  width: 130px;
  min-width: 130px;
  font-size: 0.8125rem;
  position: sticky;
  left: 0;
  z-index: 2;
  background-color: #09090b !important;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.5);
}

#teacher-grid-wrapper thead th:first-child {
  z-index: 3;
}

.teacher-grid-slot {
  display: block;
  margin-bottom: 4px;
}

.teacher-grid-slot:last-child {
  margin-bottom: 0;
}

.teacher-grid-slot .badge {
  text-align: left;
  border-radius: 6px;
  white-space: normal;
  word-break: break-word;
  background-color: rgba(239, 68, 68, 0.12) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.25) !important;
  box-shadow: none;
}

/* ==========================================================================
   5. Mobile Breakpoint Adjustments
   ========================================================================== */

@media (max-width: 576px) {
  #json-input {
    min-height: 240px;
    font-size: 0.75rem;
  }
  .build-log {
    max-height: 260px;
  }
}