/* App-specific compatibility + components (loads AFTER assets/styles.css) */

/* Layout helpers (legacy classes) */
.container{max-width:1100px;margin:0 auto;padding:16px}

/* 12-column grid used throughout the app */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.col-12{grid-column:span 12}
.col-8{grid-column:span 8}
.col-6{grid-column:span 6}
.col-4{grid-column:span 4}
/* legacy responsive aliases */
.col-md-6{grid-column:span 6}
.col-md-4{grid-column:span 4}
.col-md-8{grid-column:span 8}
@media (max-width:720px){
  .col-8,.col-6,.col-4,.col-md-8,.col-md-6,.col-md-4{grid-column:span 12}
}

/* Buttons + inputs (legacy .btn / .input used in PHP views) */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--blue);color:#fff;border:0;
  border-radius:12px;padding:10px 12px;font-weight:800;
  cursor:pointer;text-decoration:none;line-height:1;
}
.btn:hover{filter:brightness(1.03);text-decoration:none}
.btn.secondary{background:#fff;color:var(--blue);border:1px solid var(--border)}
.btn.danger{background:var(--danger)}
.btn.small{padding:7px 10px;border-radius:10px;font-size:14px}

.input{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:#fff}

/* Small tag used in some tables */
.tag{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;border:1px solid rgba(228,231,236,.8);background:rgba(71,142,79,.10);color:var(--blue)}
.tag.secondary{background:rgba(102,112,133,.08);color:var(--muted);border-color:rgba(102,112,133,.18)}

/* Notices (legacy card inline colors replaced by semantic flash) */
.flash{padding:10px 12px;border-radius:12px;margin:12px 0;border:1px solid rgba(228,231,236,.8)}
.flash.success{background:rgba(18,183,106,.08)}
.flash.error{background:rgba(180,35,24,.08)}
.flash.info{background:rgba(47,128,237,.08)}

/* Multi-selection fields: clear association between checkbox + label */
.multi-field{border:1px solid var(--border);border-radius:14px;padding:12px;margin:0;background:#fff}
.multi-field legend{padding:0 6px;font-weight:900;color:var(--text)}
.multi-field .hint{margin-top:6px}
.multi-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.multi-item{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 10px;border:1px solid rgba(228,231,236,.9);
  border-radius:12px;background:rgba(246,247,251,.6);
}
.multi-item input[type="checkbox"]{margin-top:2px;flex:0 0 auto;width:18px;height:18px}
.multi-item span{line-height:1.25}

/* Set overview cards (criteria sets) */
.card-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.set-card{
  display:block;border:1px solid var(--border);border-radius:14px;
  padding:12px;background:#fff;box-shadow:var(--shadow);
  color:inherit;text-decoration:none
}
.set-card:hover{filter:brightness(1.01);text-decoration:none}
.set-card.active{outline:3px solid rgba(71,142,79,.25)}
.set-card .meta{font-size:12px;color:var(--muted);margin-top:4px}

/* Make table action buttons not wrap too aggressively */
.table .actions{display:flex;flex-wrap:wrap;gap:8px}

/* Better spacing for inline forms inside table cells */
.inline-form{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap}


/* Compatibility for older badge classes */
.badge.ok{background:rgba(18,183,106,.12);border-color:rgba(18,183,106,.20);color:var(--blue)}
.badge.off{background:rgba(180,35,24,.10);border-color:rgba(180,35,24,.20);color:var(--danger)}

/* Drag & drop sorting (teacher/options.php) */
.drag-handle{
  display:inline-block;
  padding:6px 8px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:8px;
  cursor:grab;
  user-select:none;
  line-height:1;
}
.sortable-row.dragging{
  opacity:.55;
}

/* Teacher quick-entry buttons (class+subject combos) */
.quick-combos{display:flex;flex-wrap:wrap;gap:10px}
.quick-combo{min-width:160px}

/* Criteria category accordion (participation_new.php) */
.criteria-accordion{display:flex;flex-direction:column;gap:10px}
.accordion{
  border:1px solid rgba(228,231,236,.9);
  border-radius:14px;
  background:rgba(246,247,251,.55);
  overflow:hidden;
}
.accordion summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 12px;
  font-weight:900;
}
.accordion summary::-webkit-details-marker{display:none}
.accordion[open] summary{border-bottom:1px solid rgba(228,231,236,.9)}
.accordion .acc-body{padding:12px}
.accordion .acc-meta{display:inline-flex;gap:8px;align-items:center}