/* ============================================================================
   LOGGING PAGE COMPACT & POLISH IMPROVEMENTS — 2026
   Applied to: infringements.html, outofclass.html
   Reduces visual congestion, tightens spacing, smooths interactions
   ============================================================================ */

/* --- Page Header ---------------------------------------------------------- */

/* Override the inline padding: 2rem with a tighter value */
.unified-logging-container .unified-page-header {
  padding: 1.375rem 1.75rem !important;
  margin-bottom: 1.25rem !important;
}

.unified-logging-container .unified-page-title {
  font-size: 1.9rem !important;
  letter-spacing: 0 !important;
}

/* Compact the crest logo in logging pages */
.unified-logging-container .unified-page-logo {
  width: 54px !important;
  height: 54px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}

/* --- Analytics Dashboard -------------------------------------------------- */

/* Tighter top margin */
.unified-logging-container .analytics-dashboard {
  gap: 10px !important;
  margin-top: 0.875rem !important;
  flex-wrap: wrap;
}

/* Compact analytics cards */
.unified-logging-container .analytics-card {
  padding: 0.875rem 1rem !important;
  flex: 1 1 calc(25% - 10px) !important;
  min-width: 0 !important;
}

.unified-logging-container .analytics-card-value {
  font-size: 1.9rem !important;
  line-height: 1.1 !important;
}

.unified-logging-container .analytics-card-label {
  font-size: 0.75rem !important;
}

.unified-logging-container .analytics-card-subtitle {
  font-size: 0.72rem !important;
}

/* Compact analytics list inside card */
.unified-logging-container .analytics-list-item {
  padding: 3px 0 !important;
  font-size: 0.82rem !important;
}

/* --- Form Sections -------------------------------------------------------- */

/* Slightly calmer section lift on hover (was -6px, very aggressive) */
.unified-form-section:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.1),
    0 0 1px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

/* Keep gradient accent on ::before but don't run animation constantly */
.unified-form-section::before {
  animation: none !important;
}

/* Tighter padding on form sections */
.unified-form-section {
  padding: 1.5rem !important;
  border-radius: 16px !important;
  scroll-margin-top: 88px !important;
}

/* Tighter section header inside form sections */
.unified-form-section .section-header {
  padding: 0.875rem 1.25rem !important;
  margin: -1.5rem -1.5rem 1.25rem -1.5rem !important;
  border-radius: 14px 14px 0 0 !important;
  gap: 12px !important;
}

.unified-form-section .section-header > div,
.unified-student-label > span {
  min-width: 0 !important;
  flex-wrap: wrap !important;
}

.unified-form-section .section-header h2 {
  line-height: 1.2 !important;
  overflow-wrap: anywhere !important;
}

.unified-logging-container .search-input:focus-visible,
.unified-logging-container .form-select:focus-visible,
.unified-logging-container .form-input:focus-visible {
  outline: 3px solid rgba(59, 130, 246, 0.22) !important;
  outline-offset: 2px !important;
}

.unified-logging-container details.filters-accordion summary {
  min-height: 44px !important;
  flex-wrap: wrap !important;
}

.unified-logging-container details.filters-accordion[open] summary {
  border-radius: 10px 10px 0 0 !important;
}

.unified-logging-container .filters-grid {
  align-items: end !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/* --- Stop Distracting Infinite Bounce on Icons ---------------------------- */

.section-icon {
  animation: none !important;
}

/* --- Selected Students Grid ---------------------------------------------- */

/* Slightly smaller student cards in the selected list */
.unified-logging-container .selected-students {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 12px !important;
}

.unified-logging-container .student-card.enhanced-card {
  min-width: 0 !important;
  overflow: visible !important;
  align-items: flex-start !important;
  padding: 12px 44px 12px 12px !important;
  text-align: left !important;
}

.unified-logging-container .student-card.enhanced-card .student-photo {
  width: 56px !important;
  height: 56px !important;
}

.unified-logging-container .student-card.enhanced-card .student-info-section,
.unified-logging-container .student-card.enhanced-card .student-name,
.unified-logging-container .student-card.enhanced-card .student-meta-info {
  min-width: 0 !important;
}

.unified-logging-container .student-card.enhanced-card .student-name {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

.unified-logging-container .student-card.enhanced-card .meta-badge {
  max-width: 100% !important;
  white-space: normal !important;
  line-height: 1.25 !important;
}

/* --- Student Profile Card ------------------------------------------------- */

.unified-logging-container .unified-student-card {
  overflow: visible !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
}

.unified-logging-container .unified-student-card .student-card-header {
  gap: 14px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

.unified-logging-container .unified-student-card .student-info {
  min-width: 220px !important;
  flex: 1 1 280px !important;
}

.unified-logging-container .unified-student-card .student-name {
  overflow-wrap: anywhere !important;
}

.unified-logging-container .unified-student-card .student-meta {
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.unified-logging-container .unified-student-card .meta-item {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

.unified-logging-container .unified-student-card .student-stats {
  margin-left: auto !important;
  flex: 0 1 220px !important;
}

/* --- Submit Button -------------------------------------------------------- */

.unified-logging-container .submit-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-width: 240px !important;
  max-width: 100% !important;
  padding: 14px 36px !important;
  font-size: 1rem !important;
  letter-spacing: 0 !important;
}

.unified-logging-container .submit-btn .submit-btn-text {
  white-space: normal !important;
  line-height: 1.25 !important;
}

/* --- DateTime Options ----------------------------------------------------- */

.unified-logging-container .datetime-options {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 12px !important;
}

.unified-logging-container .datetime-options .unified-form-group {
  min-width: 0 !important;
}

.unified-logging-container .datetime-option {
  min-height: 72px !important;
  padding: 10px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  border-radius: 10px !important;
}

.unified-logging-container .datetime-option:has(input[type="radio"]:checked) {
  outline: 2px solid rgba(79, 70, 229, 0.35) !important;
  outline-offset: 2px !important;
  background: rgba(99, 102, 241, 0.08) !important;
}

.unified-logging-container .datetime-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
}

/* --- Action Buttons in Page Header --------------------------------------- */

.unified-logging-container .unified-page-header > div:first-child > div:last-child {
  gap: 8px !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
}

.unified-logging-container .unified-page-header > div:first-child {
  align-items: flex-start !important;
  gap: 14px !important;
}

.unified-logging-container .unified-page-header > div:first-child > div:last-child button {
  min-height: 40px !important;
  white-space: nowrap !important;
}

/* --- Analytics Container Responsive -------------------------------------- */

@media (max-width: 900px) {
  .unified-logging-container .analytics-card {
    flex: 1 1 calc(50% - 10px) !important;
  }
}

@media (max-width: 540px) {
  .unified-logging-container .analytics-card {
    flex: 1 1 100% !important;
  }

  .unified-logging-container .unified-page-header {
    padding: 1rem !important;
  }

  .unified-logging-container .unified-page-title {
    font-size: 1.5rem !important;
  }

  .unified-logging-container .selected-students {
    grid-template-columns: 1fr !important;
  }

  .unified-form-section {
    padding: 1.125rem !important;
  }

  .unified-form-section .section-header {
    margin: -1.125rem -1.125rem 1rem -1.125rem !important;
    padding: 0.875rem 1rem !important;
  }

  .unified-logging-container .unified-student-card .student-info,
  .unified-logging-container .unified-student-card .student-stats {
    flex-basis: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }

  .unified-logging-container .submit-btn {
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px 16px !important;
  }
}