/* www/styles.css
 * Custom CSS overrides for the Assessment Data Tool.
 *
 * Edit this file to restyle the application without touching R code.
 * Bootstrap 5 utilities and variables are available via bslib.
 *
 * Sections:
 *   1.  Layout & header
 *   2.  Sidebar navigation
 *   3.  Cards
 *   4.  Question matrix table
 *   5.  Form controls
 *   6.  Badges & status indicators
 *   7.  Responsive adjustments
 */


/* ── 1. Layout & header ─────────────────────────────────────────────────── */

.app-header {
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Tighten the overall page padding on the outer navset container */
.bslib-gap-spacing {
  gap: 0 !important;
}


/* ── 2. Sidebar navigation ──────────────────────────────────────────────── */

/* Vertical pill nav items */
.nav-pills .nav-link {
  color: #2C3E50;
  border-radius: 0.375rem;
  padding: 0.55rem 0.9rem;
  margin-bottom: 0.2rem;
  font-size: 0.875rem;
  transition: background-color 0.12s ease, color 0.12s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-pills .nav-link:hover {
  background-color: #e8f0f7;
  color: #1a252f;
}

.nav-pills .nav-link.active {
  background-color: #2C3E50;
  color: #ffffff;
}

/* Keep the nav-stacked column from collapsing on narrow windows */
.nav-stacked {
  min-width: 0;
}


/* ── 3. Cards ───────────────────────────────────────────────────────────── */

.card {
  border-radius: 0.5rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
}

.card-header {
  font-weight: 600;
  font-size: 0.925rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}

/* Tighten inner card-body padding slightly */
.card-body {
  padding: 1rem;
}


/* ── 4. Question matrix table ───────────────────────────────────────────── */

.question-table-wrapper {
  overflow-x: auto;
}

.question-matrix-table {
  font-size: 0.85rem;
  min-width: 400px;
}

.question-matrix-table thead th {
  background-color: #2C3E50;
  color: #ffffff;
  vertical-align: middle;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  padding: 0.4rem 0.5rem;
}

.question-matrix-table .skill-col-header {
  min-width: 88px;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.3;
}

.question-matrix-table td {
  vertical-align: middle;
  padding: 0.25rem 0.4rem;
}

/* Checkbox cells — handle BOTH rendering paths.
 *
 * Shiny with bs3compat (confirmed active via page source) renders:
 *   .checkbox > label > input[type=checkbox]
 *
 * The input lives INSIDE the label, so label { display:none } kills the
 * checkbox too — that was the bug. Fix: show the label, centre it with
 * flex, and suppress only the empty text span that follows the input.
 *
 * The .form-check rules below are kept as a forward-compatibility guard
 * for any future Bootstrap-5-native checkbox Shiny may render.
 */

/* ── bs3compat path: .checkbox > label > input ── */
.question-matrix-table .checkbox {
  margin:      0;
  text-align:  center;
}

.question-matrix-table .checkbox label {
  display:         inline-flex;
  justify-content: center;
  align-items:     center;
  padding:         0;
  margin:          0;
  min-height:      unset;
  cursor:          pointer;
}

/* Hide the empty label-text span that Shiny emits when label = NULL */
.question-matrix-table .checkbox label span {
  display: none;
}

/* ── BS5-native path: .form-check > .form-check-input ── */
.question-matrix-table .form-check {
  display:         flex;
  justify-content: center;
  align-items:     center;
  padding-left:    0;
  margin-bottom:   0;
  min-height:      unset;
}

.question-matrix-table .form-check-input {
  float:       none;
  margin-left: 0;
  cursor:      pointer;
  flex-shrink: 0;
}

/* ── Shared: compact inputs and wrapper ── */
.question-matrix-table input[type="number"],
.question-matrix-table input[type="text"] {
  padding:   0.2rem 0.35rem;
  font-size: 0.85rem;
  height:    auto;
}

.question-matrix-table .form-group {
  margin-bottom: 0;
}

/* Hover highlight for table rows */
.question-matrix-table tbody tr:hover {
  background-color: #f0f5fa;
}


/* ── 5. Form controls ───────────────────────────────────────────────────── */

/* Tighten checkbox group spacing */
.shiny-input-checkboxgroup .form-check {
  margin-bottom: 0.25rem;
}

/* File input button style alignment */
.btn-file {
  vertical-align: middle;
}


/* ── 6. Badges & status indicators ─────────────────────────────────────── */

.total-marks-badge .badge {
  font-size: 1rem;
  padding: 0.3em 0.65em;
  font-weight: 600;
}


/* ── 7. Responsive adjustments ──────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Stack nav above content on small screens */
  .nav-stacked {
    flex-direction: row !important;
    flex-wrap: wrap;
  }

  .nav-pills .nav-link {
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
  }

  .question-matrix-table {
    font-size: 0.78rem;
  }
}


/* ── Import Log (Page 3) ─────────────────────────────────────────────────── */

.import-log-body {
  max-height: 520px;
  overflow-y: auto;
}

.log-student-row {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  transition: background-color 0.1s ease;
}

.log-student-row:last-child {
  border-bottom: none;
}

.log-row-ok      { border-left: 3px solid #27AE60; }
.log-row-warning { border-left: 3px solid #F39C12; }
.log-row-error   { border-left: 3px solid #E74C3C; background-color: #fdf5f5; }
.log-row-fixed   { border-left: 3px solid #2980B9; background-color: #f0f6fd; }
.log-row-skipped { border-left: 3px solid #95A5A6; background-color: #f8f9fa; opacity: 0.7; }

.log-row-header {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  font-size:   0.875rem;
}

.log-student-name {
  font-weight: 500;
  flex-shrink: 0;
}

.log-msgs {
  margin-top: 0.2rem;
}

.log-msg-line {
  font-size:   0.8rem;
  line-height: 1.6;
}

.log-action-btns {
  padding-left: 1.5rem;
}

.import-log-footer {
  background-color: #f8f9fa;
}

/* ── EDI Brand Colours ──────────────────────────────────────────────────────
   These :root overrides redefine Bootstrap's CSS custom properties so that
   every *-primary utility class (bg-primary, text-primary, border-primary,
   btn-primary) inherits the EDI purple automatically — no R changes needed.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  --bs-primary:          #3C3489;
  --bs-primary-rgb:      60, 52, 137;
  /* Darker shade used for hover states */
  --bs-primary-text-emphasis: #2a2464;
  --bs-primary-bg-subtle:     #EEEDFE;
  --bs-primary-border-subtle: #CECBF6;
}

/* ── EDI Brand Colours ──────────────────────────────────────────────────────
   Primary:  #3C3489  (deep purple)
   Accent:   #1D9E75  (teal)
   Lavender: #AFA9EC / #CECBF6 (light fills)
   ────────────────────────────────────────────────────────────────────────── */

/* Navbar / top bar */
.navbar, .bslib-page-navbar > nav {
  background-color: #3C3489 !important;
  border-bottom: 3px solid #1D9E75;
}
.navbar *, .bslib-page-navbar > nav * {
  color: #fff !important;
}

/* Sidebar pill nav active item */
.nav-pills .nav-link.active {
  background-color: #3C3489 !important;
  color: #fff !important;
}
.nav-pills .nav-link:hover:not(.active) {
  background-color: #CECBF6 !important;
  color: #3C3489 !important;
}

/* Bootstrap primary buttons → EDI purple */
.btn-primary {
  background-color: #3C3489 !important;
  border-color:     #3C3489 !important;
}
.btn-primary:hover {
  background-color: #534AB7 !important;
  border-color:     #534AB7 !important;
}