/* Student History Base Styles */
.student-history {
  max-width: 100%;
  margin-bottom: var(--spacing-xl);
}

/* Section Labels for Date Selector */
.section-label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin-bottom: var(--spacing-xs);
  text-transform: none;
}

/* Festival Input Row */
.festival-input-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.festival-input-row select {
  flex: 0 1 auto;
  min-width: 200px;
}

/* Spacing between form sections */
.form-section + .form-section {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: var(--border-thin) solid var(--color-border);
}

/* History Tables */
.student-history .data {
  width: 100%;
  margin-bottom: var(--spacing-lg);
}

.student-history .data th {
  background-color: var(--color-table-header);
  padding: var(--spacing-md) var(--spacing-lg);
  font-weight: var(--font-semibold);
  text-align: left;
}

.student-history .data td {
  padding: var(--spacing-sm) var(--spacing-lg);
  text-align: left;
  vertical-align: middle;
}

/* Amount/Cost Columns */
.student-history .data td:nth-child(3),
.student-history .data td:nth-child(4) {
  text-align: right;
}

/* Date Column */
.student-history .data td:first-child {
  white-space: nowrap;
}

/* Account Credit Table Styling */
.student-history .account-credit-table .col-date {
  width: 10%;
}

.student-history .account-credit-table .col-type {
  width: 12%;
}

.student-history .account-credit-table .col-user {
  width: 12%;
}

.student-history .account-credit-table .col-amount {
  width: 10%;
}

.student-history .account-credit-table .col-balance {
  width: 10%;
}

.student-history .account-credit-table .col-notes {
  width: 36%;
}

/* Align numeric columns to the right */
.student-history .account-credit-table td:nth-child(4),
.student-history .account-credit-table td:nth-child(5),
.student-history .account-credit-table td:nth-child(6),
.student-history .account-credit-table th:nth-child(4),
.student-history .account-credit-table th:nth-child(5),
.student-history .account-credit-table th:nth-child(6) {
  text-align: right;
}

/* Color-coded amounts */
.student-history .account-credit-table .amount-cell {
  font-weight: var(--font-semibold);
}

.student-history .account-credit-table .amount-positive {
  color: var(--color-success);
}

.student-history .account-credit-table .amount-negative {
  color: var(--color-error);
}

/* Links inherit parent color (for color-coded amounts) */
.student-history .account-credit-table .amount-cell a {
  color: inherit;
  text-decoration: none;
}

.student-history .account-credit-table .amount-cell a:hover {
  text-decoration: underline;
}

/* Links within tables */
.student-history .data a {
  color: var(--color-primary);
  text-decoration: none;
  padding: var(--spacing-xs) var(--spacing-md);
  margin: calc(-1 * var(--spacing-xs)) calc(-1 * var(--spacing-md));
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
}

.student-history .data a:hover {
  background-color: var(--color-table-stripe);
  color: var(--color-primary);
}

/* Empty State Messages */
.student-history p {
  color: var(--color-text);
  padding: var(--spacing-base);
  background-color: var(--color-table-stripe);
  border-radius: var(--radius-base);
  margin: var(--spacing-base) 0;
  font-style: italic;
}


/* Quick Dates Section */
#quick-dates {
  position: relative;
  width: 100%;
  margin-top: var(--spacing-base);
}

#quick-label {
  text-align: center;
  border: var(--border-normal) solid var(--color-border);
  border-radius: var(--radius-base);
  background-color: var(--color-table-stripe);
  color: var(--color-text);
  padding: var(--spacing-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
}

#quick-dates:hover #quick-label {
  background-color: var(--color-table-header);
  border-color: var(--color-primary);
}

#quick-dates:hover #quick-buttons {
  max-height: 500px;
  opacity: 1;
  padding: var(--spacing-sm);
  border-width: var(--border-thin);
}

#quick-buttons {
  background-color: var(--color-background);
  border: var(--border-thin) solid var(--color-border);
  border-radius: 0 0 var(--radius-base) var(--radius-base);
  width: 100%;
  box-shadow: var(--shadow-base);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: var(--spacing-sm);
  padding-right: var(--spacing-sm);
  border-width: 0;
  transition: max-height var(--transition-normal) ease,
              opacity var(--transition-normal) ease,
              padding var(--transition-normal) ease;
}

/* Quick Date Buttons */
#quick-buttons button[type="submit"] {
  width: 100%;
  padding: var(--spacing-sm);
  text-align: left;
  background-color: transparent;
  border: none;
  color: var(--color-text);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  position: static;
}

#quick-buttons button[type="submit"]:hover {
  background-color: var(--color-table-header);
  color: var(--color-primary);
}

#quick-buttons button[type="submit"].submitting::after {
  display: none;
}

/* Date Input Row Styling */
#start-date,
#end-date {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-sm);
}

/* Date inputs specific styling */
#id_start,
#id_end {
  width: var(--input-width-sm);
}

/* Label styling */
#start-date label,
#end-date label {
  margin: 0;
  white-space: nowrap;
}

/* Go Button */
#go {
  text-align: right;
}

#go button[type="submit"] {
  background-color: var(--color-primary);
  color: var(--color-background);
  padding: var(--spacing-sm) var(--spacing-base);
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

#go button[type="submit"]:hover {
  background-color: var(--color-secondary);
}

/* Mobile Responsiveness */
@media (max-width: 768px) /* --breakpoint-md */ {
  .history-filters {
    padding: var(--spacing-base);
  }

  #start-date,
  #end-date {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
  }

  #id_start,
  #id_end {
    width: 100%;
  }

  #quick-buttons {
    position: static;
    width: auto;
    margin-top: var(--spacing-xs);
    max-height: none;
    opacity: 1;
    padding: var(--spacing-sm);
    border-width: var(--border-thin);
    overflow: visible;
  }
}

/* Student History specific layout fix */
.student-history {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

/* Ensure the history filters container doesn't overlap */
.student-history .history-filters {
  position: relative;
  z-index: 2;
  margin-bottom: var(--spacing-xl);
  background-color: var(--color-background);
}

/* Adjust content area for student history specifically */
#content.student-history {
  padding-top: calc(var(--spacing-xl) * 2);
  position: relative;
}

/* Ensure summary stays on top without overlapping */
.student-history #summary {
  position: absolute;
  top: 0;
  right: var(--spacing-lg);
  background-color: var(--color-background);
  z-index: 3;
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-base);
}

/* Responsive layout adjustments */
@media (max-width: 768px) /* --breakpoint-md */ {
  #content.student-history {
    padding-top: calc(var(--spacing-xl) * 3);
  }

  .student-history #summary {
    width: calc(100% - var(--spacing-lg) * 2);
    right: var(--spacing-lg);
  }
}