body { background-color: #f5f5f5; }
.section-box { background: white; border-radius: 8px; padding: 2rem; margin: 2rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.hidden { display: none; }
.dept-container { margin-top: 1rem; padding-right: 1rem; border-right: 2px solid #eee; }
.institute-block { margin-bottom: 1.5rem; }
label { cursor: pointer; }
select { width: 100%; }   
select.is-danger {
  border-color: #f14668 !important;
  box-shadow: 0 0 0 0.125em rgba(241, 70, 104, 0.25);
}

.has-background-danger-light {
  background-color: #ffe5e5 !important;
}    
.field.is-grouped.is-grouped-multiline {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}
.trl-option {
  border: 2px solid #ddd;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  transition: 0.3s;
  cursor: pointer;
  display: block;
}
.trl-option:hover { border-color: #485fc7; background: #f5f7ff; }
.trl-option input[type="radio"] { margin-left: 10px; transform: scale(1.2); }
.trl-title { font-weight: bold; color: #363636; font-size: 1.05rem; margin-bottom: 0.25rem; }
.trl-description { color: #555; font-size: 0.95rem; margin-bottom: 0.25rem; }
.trl-example { color: #666; font-size: 0.9rem; font-style: italic; }
.trl-option.selected { border-color: #3273dc; background-color: #eef3ff; }
/* Make all radios appear vertically and evenly spaced */
label.radio {
  display: block;
  margin-bottom: 0.6rem;
  line-height: 1.5;
  font-size: 1rem;
}
.branch-question,
.mb-5 {
  margin-bottom: 1.5rem;
}
.has-text-underline {
  text-decoration: underline !important;
}
/* Make textarea consistent with inputs */
.textarea:focus {
  border-color: #485fc7;
  box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25);
}


/* Image preview grid */
.image-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 0.75rem;
  text-align: center;
}
.image-preview-grid img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: transform 0.2s;
}
.image-preview-grid img:hover {
  transform: scale(1.05);
}


/* Print report styles */
#printPreview {
  background: white;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0,0,0,.15);
  max-width: 800px;
  margin: 2rem auto;
  direction: rtl;
}
#printPreview h1 {
  text-align: center;
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
}
#printPreview .entry {
  border-bottom: 1px solid #ddd;
  padding: 0.75rem 0;
}
#printPreview .entry:last-child { border-bottom: none; }
#printPreview .label {
  font-weight: bold;
  color: #333;
}
#printPreview .value {
  color: #111;
  margin-top: 0.25rem;
}
#printPreview .entry .value {
  padding-right: 1rem;
  font-family: 'Cairo', sans-serif;
  font-size: 0.95rem;
  color: #222;
  direction: rtl;
  word-break: break-word;
}

@media print {
  @page {
    size: A4;
    margin: 15mm 15mm 15mm 15mm;
  }
  body * {
    display: none !important;
  }
  #printPreview, #printPreview * {
    display: block !important;
    visibility: visible !important;
  }
  #printPreview {
    position: absolute;
    inset: 0;
    width: 100%;
    margin: 0;
    box-shadow: none;
    background: white;
    padding: 20mm;
  }

    /* ✅ Preserve table structure */
    #printPreview table {
      display: table !important;
      border-collapse: collapse !important;
      width: 100% !important;
    }
    #printPreview thead {
      display: table-header-group !important;
    }
    #printPreview tbody {
      display: table-row-group !important;
    }
    #printPreview tr {
      display: table-row !important;
    }
    #printPreview th, #printPreview td {
      display: table-cell !important;
      vertical-align: middle !important;
      border: 1px solid #ccc !important;
      padding: 6px !important;
    }
}

.branch-question {
  transition: all 0.3s ease;
}

/* Clear red background on reset */
.has-background-danger-light {
  background-color: #ffe5e5 !important;
  border: 1px solid #ff4d4d !important;
  border-radius: 8px;
  transition: background-color 0.3s, border 0.3s;
}

/* Slight shake animation when triggered */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.has-background-danger-light {
  animation: shake 0.25s ease;
}