/* Custom styles for 5-column layout and cards */
:root{
  --gap: 0.5rem;
}
body{
  padding:1.5rem;
  background:#f8f9fa;
}
.toolbar{
  display:flex;
  gap:0.5rem;
  margin-bottom:1rem;
}
.columns-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--gap);
  align-items:start;
  margin-bottom:1.25rem;
}

/* Make container for overlay positioning */
.columns-grid{
  position: relative;
}
.card-subject{
  margin-bottom:0.35rem;
}
/* Make card bodies more compact */
.card-subject .card-body{
  padding: 0.45rem !important;
}
.card-title{
  font-size: 0.95rem;
  line-height:1.05;
}

.stats-row{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  align-items:center;
}
.stat-card{
  flex:1 1 200px;
}
.progress-wrap{
  margin-top:0.75rem;
}
/* Responsive: stack columns on small screens */
@media (max-width: 992px){
  .columns-grid{
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px){
  .columns-grid{
    grid-template-columns: repeat(1, 1fr);
  }
  .toolbar{flex-wrap:wrap}
}

/* Use full width for large screens */
@media (min-width: 992px) {
  .container-fluid {
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .columns-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* Progress bar styles moved from inline */
.progress {
  height: 18px;
}
#progress-bar {
  width: 0%;
}

/* SVG overlay for arrows */
.overlay-svg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

.arrow-line{
  stroke-width: 2;
  fill: none;
}

.arrow-head{
  /* marker fills are set in the SVG defs so they match stroke color */
  fill: currentColor;
}

/* dashed variant for regularizada requirements */
.arrow-dashed{
  stroke-dasharray: 6,4;
}

/* optional helper classes (JS sets stroke colors inline) */
.arrow-aprobar{
  stroke: #28a745;
}
.arrow-cursar{
  stroke: #000;
}

/* Dim non-involved cards and highlight involved ones */
.card-dim{
  opacity: 0.25;
  filter: grayscale(70%);
  transition: opacity 180ms ease, filter 180ms ease, transform 180ms ease;
}

.card-highlight{
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  transform: translateY(-2px);
  transition: box-shadow 180ms ease, transform 180ms ease;
}

/* Very light status backgrounds for subject cards */
.card-status-aprobada{
  background-color: rgba(40,167,69,0.06); /* very light green */
}
.card-status-desaprobada{
  background-color: rgba(220,53,69,0.05); /* very light red */
}
.card-status-promocionada{
  background-color: rgba(13,110,253,0.04); /* very light blue */
}
.card-status-regularizada{
  background-color: rgba(255,193,7,0.04); /* very light yellow */
}

/* Disabled look when a subject doesn't meet 'cursar' requirements */
.card-disabled{
  opacity: 0.45;
  filter: grayscale(90%);
  /* keep pointer events so hover/tooltip/interactions still work; click is disabled in JS */
}

/* When hovering a disabled card, show it as normal (white, no grayscale) so correlatives are visible */
.card-disabled:hover{
  opacity: 1;
  filter: none;
  background-color: #ffffff;
}

/* Available to start (meets cursar requirements but not in course) */
.card-available{
  border: 2px dashed rgba(0,0,0,0.08);
}

/* Placeholder card for adding electivas: match light dashed border and sizing of other cards */
.card-electiva-add{
  border: 2px dashed rgba(0,0,0,0.08);
  background: transparent;
  min-height: 56px; /* similar visual height to compact subject cards */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem; /* same inner padding as .card-subject .card-body */
  margin-bottom: 0.35rem;
}

.card-electiva-add > div{ /* the + symbol */
  font-size: 28px;
  color: rgba(0,0,0,0.45);
  line-height: 1;
}

/* Hover style for electiva placeholder: subtle background highlight without dimming others */
.card-electiva-hover{
  background-color: rgba(0,0,0,0.03);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  transform: translateY(-2px);
  transition: box-shadow 160ms ease, transform 160ms ease, background-color 160ms ease;
}

/* Highlight animation for missing requirements: jump + red flash */
@keyframes reqFlash {
  0% { transform: translateY(0); box-shadow: none; }
  25% { transform: translateY(-8px); box-shadow: 0 8px 20px rgba(220,53,69,0.18); }
  60% { transform: translateY(0); box-shadow: 0 6px 14px rgba(220,53,69,0.12); }
  100% { transform: translateY(0); box-shadow: none; }
}

.req-highlight{
  animation: reqFlash 800ms ease;
  border-color: rgba(220,53,69,0.85) !important;
  opacity: 1;
  filter: grayscale(0%);
}

/* Status label styling */
.status-label{
  display: block;
  font-size: 0.75rem;
  margin-top: 0.1rem;
}

/* Recursed numeral styling - small Roman numeral next to subject name */
.recursed-numeral{
  font-size: 0.65rem;
  font-weight: 600;
  color: #6c757d;
  margin-left: 0.35rem;
  vertical-align: super;
  opacity: 0.85;
}

/* Footer styles */
.app-footer{
  font-size: 0.75rem;
  color: #6c757d;
  padding: 0.25rem 0.5rem;
}
.app-footer .github-btn{
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
}
.app-footer a{
  color: inherit;
}

/* Stats modal styles */
.stats-table{
  margin-bottom: 0;
}
.stats-table th,
.stats-table td{
  vertical-align: middle;
  padding: 0.5rem;
}
.stats-table .btn-add-stat,
.stats-table .btn-remove-stat{
  padding: 0.15rem 0.4rem;
  font-size: 0.8rem;
  min-width: 28px;
}
.stats-table .btn-add-stat{
  border-color: #28a745;
  color: #28a745;
}
.stats-table .btn-add-stat:hover{
  background-color: #28a745;
  color: #fff;
}
.stats-table .btn-remove-stat{
  border-color: #dc3545;
  color: #dc3545;
}
.stats-table .btn-remove-stat:hover{
  background-color: #dc3545;
  color: #fff;
}
.stats-table .btn:disabled{
  opacity: 0.4;
  cursor: not-allowed;
}

/* Dynamic stat cards in stats row */
.stats-row .stat-card{
  flex: 1 1 0;
  min-width: 100px;
  max-width: 280px;
}
.stats-row:empty::before{
  content: "No hay estadísticas seleccionadas. Abrí el panel de estadísticas para agregar.";
  color: #6c757d;
  font-size: 0.85rem;
  display: block;
  text-align: center;
  width: 100%;
  padding: 1rem;
}

/* Table view styles */
.table-view{
  display: block;
}

.table-view-group{
  margin-bottom: 1.5rem;
}

.table-view-group-header{
  background-color: #f8f9fa;
  padding: 0.5rem 0.75rem;
  border-bottom: 2px solid #dee2e6;
  font-weight: bold;
  font-size: 1.05rem;
  margin-bottom: 0;
}

.table-view-subjects{
  width: 100%;
  margin-bottom: 0;
}

.table-view-subjects thead{
  background-color: #e9ecef;
}

.table-view-subjects th{
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.5rem;
  border: 1px solid #dee2e6;
}

.table-view-subjects td{
  padding: 0.4rem 0.5rem;
  border: 1px solid #dee2e6;
  vertical-align: middle;
}

.table-view-subjects tbody tr{
  cursor: pointer;
  transition: background-color 150ms ease;
}

.table-view-subjects tbody tr:hover{
  background-color: rgba(0, 0, 0, 0.025);
}

.table-view-subjects tbody tr.table-row-disabled{
  opacity: 0.45;
  filter: grayscale(90%);
}

.table-view-subjects tbody tr.table-row-disabled:hover{
  opacity: 1;
  filter: none;
  background-color: #ffffff;
}

/* Status backgrounds for table rows */
.table-row-aprobada{
  background-color: rgba(40,167,69,0.06);
}

.table-row-desaprobada{
  background-color: rgba(220,53,69,0.05);
}

.table-row-promocionada{
  background-color: rgba(13,110,253,0.04);
}

.table-row-regularizada{
  background-color: rgba(255,193,7,0.04);
}

.table-view-recursed{
  font-size: 0.75rem;
  font-weight: 600;
  color: #6c757d;
  margin-left: 0.25rem;
  vertical-align: super;
}

/* Hide grid view when table view is active */
.view-mode-table .columns-grid{
  display: none;
}

.view-mode-grid .table-view{
  display: none;
}

/* Mobile responsiveness for table view */
@media (max-width: 768px){
  .table-view-group{
    margin-bottom: 1rem;
    overflow-x: auto; /* Make table horizontally scrollable on small screens */
  }
  
  .table-view-group-header{
    font-size: 0.95rem;
    padding: 0.4rem 0.5rem;
  }
  
  .table-view-subjects{
    font-size: 0.85rem;
    min-width: 600px;
  }
  
  .table-view-subjects th,
  .table-view-subjects td{
    padding: 0.3rem 0.4rem;
    font-size: 0.8rem;
  }
}

@media (max-width: 480px){
  .table-view-subjects th,
  .table-view-subjects td{
    padding: 0.25rem 0.3rem;
    font-size: 0.75rem;
  }
  
  .table-view-group-header{
    font-size: 0.9rem;
  }
  
  /* Adjust column widths for better mobile display */
  .table-view-subjects th:nth-child(1),
  .table-view-subjects td:nth-child(1){
    width: 15%;
  }
  
  .table-view-subjects th:nth-child(2),
  .table-view-subjects td:nth-child(2){
    width: 40%;
  }
  
  .table-view-subjects th:nth-child(3),
  .table-view-subjects td:nth-child(3){
    width: 15%;
  }
  
  .table-view-subjects th:nth-child(4),
  .table-view-subjects td:nth-child(4){
    width: 30%;
  }
}