/**
 * Sophia STARS — infringements.html page styles (roadmap Phase 1 migration)
 *
 * Ported from a ~2230-line inline <style> block. Dropped as dead/superseded
 * rather than ported:
 *  - .toast/.toast-close/.toast-icon/.toast-message — showToast() delegates
 *    to the unified toast-manager.js system (js/toast-manager.js is loaded
 *    on this page); this local implementation was never reachable.
 *  - body::before/::after decorative radial-gradient + SVG noise texture —
 *    purely decorative background layers, same class of bloat dropped from
 *    every other page migrated this pass.
 *  - .dark-mode { ... } class-based theme block — dark-mode-unified.css +
 *    js/dark-mode-toggle.js (both already loaded on this page) drive dark
 *    mode via [data-theme="dark"], not a .dark-mode class; this block was
 *    never toggled by anything.
 *  - A literal duplicate of .datetime-preview/.custom-datetime-inputs/
 *    .datetime-grid (defined twice back-to-back in the original, second
 *    copy silently redundant) — kept one copy.
 *  - Elaborate ::before shimmer-sweep overlays on hover (student-card,
 *    profile-item, datetime-option, clear-all-btn, history-list-item) —
 *    replaced with a single simple lift-on-hover, matching the pattern
 *    already established on outofclass.css/positiveaffirmations.css.
 *
 * Kept: this page's own maroon (#660000) / blue (#0066cc) accent pair,
 * same as it always had — not the shared navy/gold tokens, matching the
 * precedent of preserving each page's existing brand accent during
 * migration (positiveaffirmations.html kept its own maroon too).
 */

:root {
  --card: #ffffff;
  --text: #2c2c2c;
  --text-light: #64748b;
  --text-muted: #94a3b8;
  --border: #e2e8f0;
  --border-light: #f1f5f9;
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.12);
  --border-radius: 12px;
  --border-radius-lg: 16px;
  --border-radius-sm: 6px;
  --border-radius-md: 8px;
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;
  --accent: #660000;
  --primary: #0066cc;
  --accent-blue: #3b82f6;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --font-primary: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --transition: all 0.25s ease;
}

body {
  font-family: var(--font-primary);
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
}

.main-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: var(--spacing-xl) var(--spacing-lg);
  display: grid;
  gap: var(--spacing-xl);
}

@media (min-width: 1200px) {
  .main-container {
    padding: var(--spacing-xl) calc(var(--spacing-xl) * 2);
  }
  .unified-form-section {
    padding: calc(var(--spacing-xl) * 1.5);
  }
  /* .filters-grid / .category-cards-container column overrides for this
     breakpoint live further down, right after their base rules — a media
     query alone doesn't add specificity, so they only win over the base
     rule by coming later in source order (CI guard forbids !important
     outside chrome.css, and this needs none once ordered correctly). */
}

/* ── Sections (filters / selection / submit / history) ── */
.unified-form-section,
.filters-section,
.selection-section,
.submit-section,
.infringement-history-section,
.selected-students-container {
  background: var(--card);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  transition: var(--transition);
}
.unified-form-section:hover,
.filters-section:hover,
.selection-section:hover,
.submit-section:hover,
.infringement-history-section:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* ── Action buttons ── */
.unified-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  font-family: var(--font-primary);
  white-space: nowrap;
}
.unified-action-btn-primary {
  background: #dc2626;
  color: white;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
}
.unified-action-btn-primary:hover {
  background: #b91c1c;
}
.unified-action-btn-secondary {
  background: white;
  color: #374151;
  border: 1px solid #d1d5db;
}
.unified-action-btn-secondary:hover {
  border-color: #3b82f6;
  color: #3b82f6;
}
.unified-action-btn-ghost {
  background: transparent;
  color: #64748b;
  border: none;
  padding: 8px;
  font-size: 18px;
}
.unified-action-btn-ghost:hover {
  background: rgba(59, 130, 246, 0.08);
  color: #3b82f6;
}

/* ── Student search dropdown ── */
.student-search-container {
  position: relative;
}
.student-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown, 1100);
  max-height: 300px;
  overflow-y: auto;
  display: none;
}
.student-option {
  padding: var(--spacing-md);
  cursor: pointer;
  border-bottom: 1px solid var(--border-light);
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}
.student-option:hover {
  background: #f0f7ff;
}
.student-option:last-child {
  border-bottom: none;
}
.student-option .student-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9em;
  flex-shrink: 0;
}
.student-option .student-info {
  flex: 1;
}
.student-option .student-name {
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.student-option .student-details {
  font-size: 0.85em;
  color: var(--text-light);
}

/* ── Category cards ── */
.category-card {
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}
.category-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.category-card.selected {
  border-color: white;
  box-shadow: var(--shadow-lg);
}
#backToCategoryBtn:hover {
  background: var(--primary);
  color: white;
}

/* ── Form labels / headers ── */
.form-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 10px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.85;
}
.form-group:focus-within .form-label {
  color: var(--primary);
  opacity: 1;
}
h2,
h3 {
  position: relative;
  padding-bottom: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}
h2::after,
h3::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: var(--primary);
  border-radius: 2px;
}

.student-badge,
.badge {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-xl);
}
@media (min-width: 1200px) {
  .filters-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .category-cards-container {
    grid-template-columns: repeat(2, 1fr);
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }
}
.form-group {
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ── Loading / feedback ── */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-critical, 1500);
}
.feedback-message {
  padding: var(--spacing-lg);
  border-radius: var(--border-radius);
  margin: var(--spacing-md) 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  box-shadow: var(--shadow-md);
}
.feedback-message.success {
  background: #d4edda;
  border-left: 4px solid var(--success);
  color: #155724;
}
.feedback-message.error {
  background: #f8d7da;
  border-left: 4px solid var(--error);
  color: #721c24;
}

/* ── Selected students ── */
.section-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-md);
  border-bottom: 2px solid var(--border-light);
}
.section-icon {
  font-size: 1.4em;
}
.section-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 4px 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.section-title::before {
  content: "";
  width: 4px;
  height: 24px;
  background: var(--accent);
  border-radius: 4px;
}

.selected-students {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
  min-height: 60px;
}
@media (min-width: 768px) {
  .selected-students {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}
@media (min-width: 1400px) {
  .selected-students {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
}

.student-card,
.student-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--card);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow);
  border: 2px solid var(--border-light);
  position: relative;
  transition: var(--transition);
}
.student-card:hover,
.student-chip:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary);
}
.student-photo {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--accent);
  margin-bottom: var(--spacing-md);
}
.student-name {
  font-weight: 600;
  text-align: center;
  color: var(--text);
  font-size: 0.95rem;
  margin-bottom: var(--spacing-xs);
}
.student-details {
  font-size: 0.8rem;
  color: var(--text-light);
  text-align: center;
}
.remove-student {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  box-shadow: var(--shadow);
  transition: var(--transition);
}
.remove-student:hover {
  background: #c82333;
  transform: scale(1.1);
}

/* Enhanced student card variant (search-result style card with meta badges) */
.student-card.enhanced-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 44px 12px 12px;
  border-radius: 14px;
  border-color: #f7cbd1;
  background: linear-gradient(135deg, #ffffff 0%, #fff7f7 100%);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}
.student-card.enhanced-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
}
.student-card.enhanced-card .student-photo {
  width: 48px;
  height: 48px;
  margin-bottom: 0;
}
.student-card.enhanced-card .student-info-section {
  flex: 1;
  min-width: 0;
}
.student-card.enhanced-card .student-name {
  font-size: 0.95rem;
  margin-bottom: 4px;
  text-align: left;
}
.student-card.enhanced-card .student-meta-info {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.student-card.enhanced-card .meta-badge {
  font-size: 0.75rem;
  padding: 2px 8px;
  background: var(--border-light);
  border-radius: 4px;
  color: var(--text-muted);
  white-space: nowrap;
}
.student-card.enhanced-card .student-stats-mini {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.student-card.enhanced-card .remove-student {
  width: 30px;
  height: 30px;
  font-size: 18px;
  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.35);
}

.clear-all-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 2px dashed var(--border-light);
}
.clear-all-btn {
  background: var(--warning);
  color: white;
  border: none;
  border-radius: var(--border-radius);
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
}
.clear-all-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  background: #ff8c00;
}

/* ── Form inputs ── */
.form-input,
.form-select {
  padding: 14px 18px;
  border: 2px solid var(--border);
  border-radius: 12px;
  font-size: 0.95rem;
  background: white;
  color: var(--text);
  transition: var(--transition);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}
.form-input:hover,
.form-select:hover {
  border-color: #94a3b8;
}
.form-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  appearance: none;
}
.form-select option {
  padding: var(--spacing-sm);
  background: white;
  color: var(--text);
}
.form-input::placeholder {
  color: var(--text-muted);
  font-style: italic;
}

/* ── Datetime selection ── */
.datetime-section {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-xl);
  border-top: 2px dashed var(--border-light);
}
.datetime-options {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}
.datetime-option {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-lg);
  border: 2px solid var(--border);
  border-radius: var(--border-radius-lg);
  cursor: pointer;
  transition: var(--transition);
  background: var(--card);
}
.datetime-option:hover {
  border-color: var(--primary);
  background: #f0f7ff;
}
.datetime-option input[type="radio"] {
  margin: 0 var(--spacing-md) 0 0;
  transform: scale(1.2);
  accent-color: var(--primary);
}
.radio-label {
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 1rem;
}
.datetime-preview {
  font-size: 0.85rem;
  color: var(--text-light);
  margin-top: var(--spacing-xs);
  margin-left: calc(var(--spacing-md) + 20px);
  font-style: italic;
}
.custom-datetime-inputs {
  margin-top: var(--spacing-md);
  margin-left: calc(var(--spacing-md) + 20px);
}
.datetime-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}
.datetime-option input[type="radio"]:checked + .radio-label {
  color: var(--accent);
  font-weight: 600;
}
.datetime-option:has(input[type="radio"]:checked) {
  border-color: var(--accent);
  background: rgba(102, 0, 0, 0.05);
}
.validation-message {
  padding: var(--spacing-sm) var(--spacing-md);
  margin-top: var(--spacing-sm);
  border-radius: var(--border-radius);
  font-size: 0.875rem;
  font-weight: 500;
}
.validation-message.error {
  background: rgba(220, 53, 69, 0.1);
  color: var(--error);
  border: 1px solid rgba(220, 53, 69, 0.3);
}
@media (max-width: 600px) {
  .datetime-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Submit button ── */
.submit-btn {
  padding: 18px 48px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 16px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 8px 24px rgba(102, 0, 0, 0.35);
  min-width: 280px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: "Poppins", "Inter", sans-serif;
}
.submit-btn-icon,
.submit-btn-arrow {
  transition: transform 0.2s ease;
}
.submit-btn:hover:not(:disabled) .submit-btn-icon {
  transform: scale(1.15);
}
.submit-btn:hover:not(:disabled) .submit-btn-arrow {
  transform: translateX(4px);
}
.submit-btn:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(102, 0, 0, 0.4);
}
.submit-btn:disabled {
  background: #cbd5e1;
  color: #64748b;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  opacity: 0.6;
}
.submit-btn-ready {
  background: var(--success);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
}
.submit-btn-ready:hover:not(:disabled) {
  box-shadow: 0 12px 32px rgba(16, 185, 129, 0.5);
}
.unified-form-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-xl) var(--spacing-lg);
  text-align: center;
  margin-top: var(--spacing-2xl);
}
.form-help-text {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-style: italic;
  margin: 0;
  max-width: 500px;
  line-height: 1.5;
}
.loading-spinner {
  border: 4px solid var(--border-light);
  border-top: 4px solid var(--primary);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 0 auto 1rem;
}

/* ── History list ── */
.history-list-item {
  background: var(--border-light);
  padding: var(--spacing-md);
  border-radius: var(--border-radius-lg);
  margin-bottom: var(--spacing-md);
  border-left: 4px solid var(--info);
  box-shadow: var(--shadow);
  transition: var(--transition);
}
.history-list-item:hover {
  transform: translateX(4px);
  border-left-color: var(--primary);
}
#infringementHistoryList {
  max-height: 300px;
  overflow-y: auto;
  padding-right: var(--spacing-sm);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.history-list-item p {
  margin: var(--spacing-xs) 0;
  line-height: 1.5;
}
.history-list-item .timestamp {
  color: var(--text-light);
  font-size: 0.85em;
  font-weight: 500;
}
.history-list-item .infringement-type {
  color: var(--text);
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
}
.history-list-item strong {
  color: var(--accent);
}
.history-list-item .infringement-type-history {
  font-style: italic;
  color: var(--text-light);
}

/* ── Student profile (shown after selecting one student to view history) ── */
.student-profile {
  background: var(--card);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  border: 1px solid var(--border);
  display: none;
}
.student-profile.visible {
  display: block;
}
.profile-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-xl);
  padding: var(--spacing-2xl);
  background: linear-gradient(135deg, var(--accent) 0%, #004080 100%);
  color: white;
}
.profile-photo {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5em;
  flex-shrink: 0;
}
.profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-photo .fallback-icon {
  font-size: 2.5em;
  display: none;
}
.profile-details {
  flex: 1;
}
.profile-details h3 {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: 1.8em;
  font-weight: 700;
}
.profile-details p {
  margin: 0;
  opacity: 0.9;
  font-size: 1.1em;
}
.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--spacing-lg);
  padding: var(--spacing-2xl);
  background: #f8fafc;
}
.profile-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background: var(--card);
  border-radius: var(--border-radius-lg);
  transition: var(--transition);
  border: 2px solid var(--border-light);
  box-shadow: var(--shadow);
}
.profile-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary);
}
.profile-item .icon {
  font-size: 1.5em;
  width: 32px;
  text-align: center;
}
.profile-item .label {
  font-weight: 700;
  color: var(--text-light);
  font-size: 0.9em;
  min-width: 100px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.profile-item .value {
  font-weight: 600;
  color: var(--text);
  font-size: 1em;
  flex: 1;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .main-container {
    padding: 1rem 0.75rem 1.5rem;
  }
  .filters-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
  .selected-students {
    grid-template-columns: 1fr;
  }
  .submit-btn {
    min-width: 180px;
    font-size: 1rem;
  }
  .category-card {
    padding: var(--spacing-xl);
  }
  .profile-header {
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-xl);
  }
  .profile-photo {
    width: 80px;
    height: 80px;
  }
  .profile-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
  }
  .profile-item {
    padding: var(--spacing-md);
  }
  .student-card.enhanced-card {
    gap: 10px;
    padding: 12px 44px 12px 10px;
  }
  .student-card.enhanced-card .remove-student {
    width: 34px;
    height: 34px;
    top: 10px;
    right: 10px;
  }
}
@media (max-width: 480px) {
  .main-container {
    padding: var(--spacing-sm);
  }
  .profile-item {
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-sm);
  }
  .profile-item .label {
    min-width: auto;
    font-size: 0.8em;
  }
}

/* ── Accessibility ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--accent-blue);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

/* ── Print ── */
@media print {
  body {
    background: white !important;
    color: black !important;
  }
  .unified-action-btn,
  .action-buttons,
  .no-print {
    display: none !important;
  }
  .unified-form-section,
  .infringement-history-section {
    background: white !important;
    border: 2px solid #333 !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }
  h1,
  h2,
  h3,
  h4 {
    color: #000 !important;
    page-break-after: avoid;
  }
}