table {
  display: block;
  overflow-x: auto;
}

th {
  background: #DCDCDC;
  text-align: center;
  height: 50px;
  line-height: 40px !important;
  font-weight: bold;
  font-size: 1.1em;
}

th[colspan='2'] {
  border: none;
  border-radius: 2px;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
  background: #f4f7fb;
  color: #1f2d3d;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f0f0f0;
}

.legal {
  font-size: 18px;
}

#delete {
  border: none;
  border-radius: 5px;
  margin: 5px;
  height: 50px;
  background: #777b82;
  color: white;
  padding: 10px 20px;
  font-weight: bold;
  background: #e60000;
}

.outline_table tr:nth-child(even) {
  background: #DCDCDC;
}

.outline_table td {
  padding: 10px;
}

.float_info {
  float: left;
  margin-right: 10%;
}

/* `/demonstrator/select` select modules list*/
#modulesavailable li {
  list-style-type: none;
  width: 50%;
}

#modulesavailable li:nth-child(odd) {
  background: #DCDCDC;
}

#modulesavailable li input[type='checkbox'] {
  margin: 2% 5%;
}

/* `/demonstrator/demo_apply` step wizard*/
.stepwizard-step p {
  margin-top: 0px;
  color: #666;
}

.stepwizard-row {
  display: table-row;
}

.stepwizard {
  display: table;
  width: 100%;
  position: relative;
}

.stepwizard-step button[disabled] {
  /*opacity: 1 !important;
    filter: alpha(opacity=100) !important;*/
}

.stepwizard .btn.disabled,
.stepwizard .btn[disabled],
.stepwizard fieldset[disabled] .btn {
  opacity: 1 !important;
  color: #bbb;
}

.stepwizard-row:before {
  top: 14px;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 100%;
  height: 1px;
  background-color: #ccc;
  z-index: 0;
}

.stepwizard-step {
  display: table-cell;
  text-align: center;
  position: relative;
}

.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
}

.choice_header {
  margin-bottom: 0;
}

.fyp-page {
  padding-bottom: 30px;
}

.fyp-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  padding: 24px 28px;
  border-radius: 16px;
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(79, 70, 229, 0.15);
}

.fyp-hero h2 {
  margin-top: 0;
  margin-bottom: 6px;
}

.fyp-hero p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.9);
}

.fyp-cta {
  background: #ffffff;
  color: #4f46e5;
  border: none;
  padding: 10px 18px;
  font-weight: 600;
}

.fyp-cta:hover,
.fyp-cta:focus {
  background: #eef5ff;
  color: #4f46e5;
}

.fyp-panel {
  border: none;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.08);
}

/* Student dashboard's "your assigned project" hero card - between the
   .fyp-hero header and the filter panel (projects.html). Styled to
   stand out from a regular .fyp-card (accent left border + tinted
   background, on top of the same shadow/radius language as .fyp-panel)
   since it's a single highlighted card, not one of many in the grid -
   and, being an <a>, needs its own hover/focus treatment restated
   (a bare <a> would otherwise render its content unstyled black/
   underlined text). */
.fyp-my-project-hero {
  display: block;
  margin-bottom: 20px;
  padding: 4px 0 4px 20px;
  border: none;
  border-left: 5px solid #4f46e5;
  border-radius: 16px;
  background: #f5f6ff;
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.08);
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fyp-my-project-hero:hover,
.fyp-my-project-hero:focus {
  color: inherit;
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(79, 70, 229, 0.16);
}

.fyp-my-project-eyebrow {
  margin-bottom: 4px;
  color: #4f46e5;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fyp-my-project-title {
  margin-top: 0;
  margin-bottom: 6px;
  color: #1a1a2e;
}

.fyp-my-project-supervisor {
  color: #55607a;
}

.fyp-my-project-meta {
  margin-top: 10px;
}

.fyp-my-project-meta + .fyp-my-project-meta {
  margin-top: 6px;
}

.fyp-my-project-references {
  margin-top: 10px;
}

.fyp-my-project-footer {
  margin-top: 10px;
  margin-bottom: 0;
  font-weight: 600;
}

/* project_form.html only - the page container is full-width (container-fluid)
   but a long-form input page reads better at a fixed measure than stretched
   edge-to-edge on a wide monitor. Other .fyp-panel uses (filter bar, tables,
   the project-view page) intentionally stay full-width. */
.fyp-form-panel {
  max-width: 1100px;
  margin: 0 auto;
}

/* Row above the edit-form panel holding the "Back to projects" link -
   shares the form panel's max-width/centering so it lines up with the
   card below it. */
.fyp-back-link-row {
  margin-bottom: 10px;
}

.fyp-back-link {
  color: #35506b;
  font-weight: 600;
  text-decoration: none;
}

.fyp-back-link:hover,
.fyp-back-link:focus {
  color: #1f3548;
  text-decoration: underline;
}

/* The locked supervisor field on the new-project form: styled to read as
   fixed information, not an inactive control someone might expect to
   click into. */
.fyp-locked-field {
  background-color: #f2f6fb;
  color: #35506b;
  cursor: default;
}

.fyp-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Description field's Preview button + panes (2026-09-04). */
.fyp-description-hint {
  margin: 6px 0 0;
  color: #8a94a6;
  font-size: 12px;
}

/* Editor/preview split (2026-09-04): card snippet + full-view previews
   stacked in the left column, the Description textarea + its controls
   in the right column - see project_form.html's .fyp-description-editor-row. */
.fyp-description-editor-row {
  margin-top: 8px;
}

.fyp-description-preview-column {
  margin-bottom: 16px;
}

.fyp-description-preview-pane {
  margin-bottom: 16px;
}

.fyp-description-preview-pane:last-child {
  margin-bottom: 0;
}

.fyp-description-preview-label {
  margin: 0 0 4px;
  color: #8a94a6;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Capped and independently scrollable (2026-09-06) - an embedded image
   can be arbitrarily tall, and Bootstrap 3's floated .col-md-6 columns
   don't share height with each other, so an uncapped preview could grow
   the whole right column well past the editor column's height, leaving
   dead space under the shorter left column until the row finally
   clears. Bounding each pane's own height (not matching column heights
   some other way) fixes the actual cause instead of just relocating it. */
.fyp-description-preview {
  border: 1px solid #e3e8f0;
  border-radius: 8px;
  background: #f8f9fc;
  padding: 10px 12px;
  min-height: 40px;
  max-height: 220px;
  overflow-y: auto;
}

.fyp-image-picker {
  margin-top: 10px;
}

.fyp-image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.fyp-image-thumb {
  position: relative;
  width: 72px;
  height: 72px;
}

.fyp-image-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid #e3e8f0;
}

.fyp-image-thumb-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  line-height: 16px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #e3e8f0;
  background: #ffffff;
  color: #55607a;
  font-size: 12px;
  cursor: pointer;
}

.fyp-image-upload-label {
  display: inline-block;
  font-size: 13px;
  color: #4f46e5;
  cursor: pointer;
}

.fyp-image-picker-error {
  margin: 8px 0 0;
  color: #b3261e;
  font-size: 12px;
}

/* Full-view rendering wrapper - used both by the Preview pane above and
   by the real detail page / hero card (project_view.html, projects.html)
   - default block spacing for Markdown's block elements, none of which
   had ever needed styling before description supported Markdown. */
.fyp-description-rendered :first-child {
  margin-top: 0;
}

.fyp-description-rendered :last-child {
  margin-bottom: 0;
}

.fyp-description-rendered h1,
.fyp-description-rendered h2,
.fyp-description-rendered h3,
.fyp-description-rendered h4,
.fyp-description-rendered h5,
.fyp-description-rendered h6 {
  margin: 12px 0 6px;
}

.fyp-description-rendered ul,
.fyp-description-rendered ol {
  margin: 0 0 10px;
  padding-left: 22px;
}

.fyp-description-rendered p {
  margin: 0 0 10px;
}

.fyp-description-rendered blockquote {
  margin: 0 0 10px;
  padding-left: 12px;
  border-left: 3px solid #d8e2ed;
  color: #55607a;
}

.fyp-description-rendered code {
  background: #eef1f6;
  border-radius: 4px;
  padding: 1px 4px;
}

.fyp-description-rendered pre code {
  display: block;
  padding: 8px 10px;
  overflow-x: auto;
}

.fyp-description-rendered img {
  max-width: 100%;
  height: auto;
}

.fyp-filter-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.fyp-filter-actions-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.fyp-my-interests-toggle.active {
  background: #fff8e1;
  border-color: #f0c419;
  color: #8a6d00;
}

/* Explicit disclaimer that "My interests" is browser-local only (see
   fyp-shared.js's watchStorageKey) - a student switching devices or
   browsers, or clearing site data, needs to know it won't follow them,
   not discover that by losing their list silently. */
.fyp-watch-note {
  font-style: italic;
}

#project-search {
  border-radius: 10px;
}

.fyp-project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  align-items: start;
}

.fyp-project-card-wrapper {
  display: flex;
  position: relative;
  transition: transform 0.2s ease;
}

/* The hover lift is triggered here (not on .fyp-card itself) so it moves
   .fyp-card-edit along with the card - a transform carries its whole
   subtree, including absolutely-positioned descendants, but .fyp-card
   and .fyp-card-edit are siblings, so transforming .fyp-card alone would
   leave the button behind. Hovering the wrapper also covers hovering
   .fyp-card-edit itself (it sits on top of the card, so a :hover scoped
   to .fyp-card alone would miss that spot entirely). */
.fyp-project-card-wrapper:hover {
  transform: translateY(-3px);
}

/* Sits on top of the card (a sibling of its <a>, not nested inside it -
   see projects.html's renderProjects()), in the one corner the card's
   own content never reaches. Styled as a small floating pill rather than
   a plain Bootstrap button, so it reads as part of the card's own design
   language instead of a bolted-on control. */
.fyp-card-edit {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 2;
  padding: 3px 12px;
  background: #ffffff;
  border: 1px solid #d8e2ed;
  border-radius: 20px;
  color: #4f46e5;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.15);
}

.fyp-card-edit:hover,
.fyp-card-edit:focus {
  background: #4f46e5;
  border-color: #4f46e5;
  color: #ffffff;
  text-decoration: none;
}

/* Star toggle base (shared by the card's floating corner button and the
   list view's inline one - see .fyp-card-star and .fyp-table-star below
   for how each is positioned). Student view only. */
.fyp-star-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: #ffffff;
  border: 1px solid #d8e2ed;
  border-radius: 50%;
  color: #b8c2d1;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.fyp-star-toggle:hover,
.fyp-star-toggle:focus {
  border-color: #f0c419;
  color: #f0c419;
}

.fyp-star-toggle.fyp-star-active {
  border-color: #f0c419;
  color: #f0c419;
}

/* Same corner and same "sibling of the card's own <a>, absolutely
   positioned" approach as .fyp-card-edit - never actually shares a card
   with it, though: the star only renders in student view
   (getStarButton), Edit only in lecturer view (canEditProject), so
   there's no real collision to design around. Top-right is avoided
   because getAllocationBadge's Available/Taken badge already lives
   there, in-flow, for every viewer including students. */
.fyp-card-star {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.15);
}

.fyp-table-star {
  margin-right: 2px;
}

/* Table view's Edit action (last column, per row) - same pill styling
   and hover-fill as .fyp-card-edit, just inline rather than overlaid,
   so both views' Edit buttons read as the same control. */
.fyp-table-edit {
  padding: 3px 12px;
  background: #ffffff;
  border: 1px solid #d8e2ed;
  border-radius: 20px;
  color: #4f46e5;
  font-weight: 600;
}

.fyp-table-edit:hover,
.fyp-table-edit:focus {
  background: #4f46e5;
  border-color: #4f46e5;
  color: #ffffff;
  text-decoration: none;
}

/* Table view's View action (2026-09-01) - every row gets one
   (the Title column's own link already does this, but a small target
   on plain text is easy to miss; this is a bigger, more obvious one),
   Edit stays conditional next to it. Same pill shape as .fyp-table-edit
   but in the module's neutral slate tone (already used elsewhere, e.g.
   .fyp-overview-table's header text) rather than the indigo accent, so
   View doesn't visually compete with Edit as the "more important"
   action when both are present. */
.fyp-table-actions {
  display: flex;
  gap: 6px;
}

.fyp-table-view {
  padding: 3px 12px;
  background: #ffffff;
  border: 1px solid #d8e2ed;
  border-radius: 20px;
  color: #35506b;
  font-weight: 600;
}

.fyp-table-view:hover,
.fyp-table-view:focus {
  background: #35506b;
  border-color: #35506b;
  color: #ffffff;
  text-decoration: none;
}

.fyp-card {
  width: 100%;
  height: 100%;
  min-height: 250px;
  /* Bootstrap's own .panel (also on this element - see the "panel
     panel-default fyp-card" class list in projects.html) sets its own
     margin-bottom: 20px. Grid spacing is already handled by
     .fyp-project-grid's gap, so that margin is pure unwanted extra
     space below the visible card - and it throws off .fyp-card-edit's
     bottom-anchored positioning above, since it's absolutely positioned
     against this wrapper's full box, margin included. */
  margin-bottom: 0;
  border: 1px solid #e6ebf2;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.06);
  transition: box-shadow 0.2s ease, opacity 0.2s ease;
  cursor: pointer;
}

.fyp-project-card-wrapper:hover .fyp-card {
  box-shadow: 0 12px 24px rgba(79, 70, 229, 0.12);
}

.fyp-card .panel-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fyp-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.fyp-card-title {
  margin-top: 0;
  margin-bottom: 6px;
  color: #1a1a2e;
}

.fyp-card-meta {
  margin: 0;
  font-size: 12px;
}

/* Clamps to 3 lines instead of a hard character-count cutoff, so it
   wraps naturally regardless of how long individual words/lines are. */
.fyp-card-description {
  margin: 0;
  color: #55607a;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-clamp: 3;
}

.fyp-badge-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.fyp-card-footer {
  margin-top: auto;
  padding-top: 6px;
}

/* A taken project is still shown (once Availability broadens past its
   "Available" default) but reads as lower-priority to scan past - the
   badge already states it plainly, this just de-emphasizes the rest. */
.fyp-project-card-wrapper.fyp-taken .fyp-card,
.fyp-project-row.fyp-taken {
  opacity: 0.65;
}

.fyp-project-card-wrapper.fyp-taken:hover .fyp-card {
  opacity: 0.85;
}

/* List view: a real table (columns), not a compressed card - see
   projects.html's renderProjects() for why. */
.fyp-project-list-wrapper {
  overflow-x: auto;
}

/* The site-wide `table { display: block; }` rule at the top of this file
   (a legacy rule from elsewhere in the portal) breaks a table's normal
   layout algorithm - without a real table box, `width: 100%` no longer
   reliably fills the container, which is why this table wasn't full
   width. `display: table` opts back into normal table layout; the
   horizontal-scroll safety net for narrow viewports still comes from
   .fyp-project-list-wrapper's overflow-x, same as before. */
.fyp-project-table {
  display: table;
  width: 100%;
  /* Column widths come from the <colgroup> in projects.html rather than
     content, so the Description column truncates predictably instead of
     stretching to fit its longest row. */
  table-layout: fixed;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.06);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

/* Rendered Markdown (2026-09-04) is block content (headings, lists,
   paragraphs) - `white-space: nowrap` + `text-overflow: ellipsis` only
   truncates a single run of inline text and can't clip that to one
   line, so this uses the same line-clamp technique
   .fyp-card-description already does, just clamped to 1 line. */
.fyp-table-description {
  color: #55607a;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  line-clamp: 1;
}

/* Images in a lecturer's description (2026-09-04) read as broken inside
   these clamped previews - different aspect ratios, an arbitrary
   mid-image crop point - so they're hidden here specifically. Full
   images still render wherever the unclamped .fyp-description-rendered
   wrapper is used (project detail page, hero card, and the add/edit
   form's "Full view" preview pane). The "Card snippet" preview pane
   reuses the literal .fyp-card-description class, so this rule applies
   there too, keeping the preview honest about what the real card shows. */
.fyp-card-description img,
.fyp-table-description img {
  display: none;
}

/* The site-wide `th` rule (same file, top) gives every header cell a
   grey background, centered bold text, and a forced 40px line-height -
   built for some other, older table on the portal, not this card-styled
   design. Overridden here in full (including !important, the only way
   to beat that rule's own !important on line-height) so this table
   reads as part of the same design as the card view and the rest of
   this page, not a leftover default. */
.fyp-project-table thead th {
  background: #f7f9fc;
  text-align: left;
  height: auto;
  line-height: normal !important;
  font-size: 13px;
  font-weight: 600;
  color: #35506b;
  padding: 12px 16px;
  border-bottom: 1px solid #e6ebf2;
}

.fyp-project-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid #eef1f6;
}

.fyp-project-table tbody tr:last-child td {
  border-bottom: none;
}

.fyp-project-table tbody tr:hover {
  background: #f7fbff;
}

.fyp-project-table td,
.fyp-project-table th {
  vertical-align: middle;
}

.fyp-list-title-link {
  font-weight: 600;
  color: #1a1a2e;
}

.fyp-list-title-link:hover,
.fyp-list-title-link:focus {
  color: #4f46e5;
  text-decoration: none;
}

.fyp-view-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.fyp-view-controls .fyp-cta {
  margin-left: 14px;
  padding-left: 24px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.fyp-view-controls .fyp-cta:first-child {
  border-left: none;
  padding-left: 18px;
  margin-left: 0;
}

.fyp-view-controls .btn-primary.fyp-overview-link {
  background: #4f46e5;
  border-color: #4f46e5;
}

.fyp-view-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  margin-left: 4px;
  background: #eef2f7;
  border-radius: 10px;
}

.fyp-view-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #5c6b7d;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.fyp-view-toggle-btn:hover {
  background: rgba(79, 70, 229, 0.08);
}

.fyp-view-toggle-btn.active {
  background: #ffffff;
  color: #4f46e5;
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.15);
}

.fyp-view-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.fyp-searchable-select-wrapper {
  position: relative;
}

.fyp-searchable-control {
  display: flex;
  align-items: center;
}

.fyp-searchable-hidden-select {
  display: none;
}

.fyp-searchable-input {
  border-radius: 10px 0 0 10px;
}

.fyp-searchable-options {
  position: absolute;
  z-index: 20;
  width: 100%;
  top: 100%;
  left: 0;
  margin-top: 4px;
  border: 1px solid #d8e2ed;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 10px 20px rgba(79, 70, 229, 0.1);
  max-height: 200px;
  overflow-y: auto;
}

.fyp-searchable-option {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  background: #ffffff;
  text-align: left;
  color: #1a1a2e;
}

.fyp-searchable-option:hover,
.fyp-searchable-option:focus {
  background: #f2f6fb;
}

.fyp-searchable-option.is-empty {
  color: #7a8798;
}

.fyp-searchable-dropdown-btn,
.fyp-add-option-btn {
  width: 28px;
  min-width: 28px;
  padding: 0;
  height: 34px;
  border-radius: 0;
  border-left: 0;
  line-height: 1;
  font-size: 12px;
}

.fyp-searchable-dropdown-btn {
  /* Rounds its own right edge so the group's outer corner is never
     square when the add-option button (below) is hidden - which it
     always is on this page (allow_add_filters_on_homepage is off
     here). When the add button IS shown elsewhere, its own left: 0
     border sits flush over this corner via the input-group's overlap,
     so this has no visible effect there. */
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.fyp-add-option-btn {
  border-left: 0;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}

.fyp-card-link {
  color: #2c6fb3;
  font-weight: 600;
}

.fyp-student-banner {
  margin-bottom: 12px;
  padding: 12px 14px;
  background: #eef7ff;
  border-left: 4px solid #2c6fb3;
  border-radius: 8px;
  color: #153a5f;
}

.fyp-modal-content {
  border: none;
  border-radius: 16px;
  overflow: hidden;
}

.fyp-modal-header {
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
  color: #ffffff;
}

.fyp-modal-header .close {
  color: #ffffff;
  opacity: 0.9;
}

.fyp-form .form-control {
  border-radius: 10px;
  border-color: #d8e2ed;
}

.fyp-form label {
  color: #35506b;
  font-weight: 600;
}

.fyp-panel .form-control:focus,
.fyp-form .form-control:focus,
.fyp-modal-content .form-control:focus,
.fyp-searchable-input:focus {
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
  outline: none;
}

.fyp-file-drop {
  border: 1px dashed #8fb3d8;
  border-radius: 12px;
  padding: 16px;
  background: #f7fbff;
  margin-bottom: 10px;
}

.fyp-file-drop-title {
  font-weight: 600;
  color: #153a5f;
  margin-bottom: 6px;
}

.fyp-file-list {
  border-top: 1px solid #e6ebf2;
  padding-top: 10px;
  color: #6b7785;
}

.fyp-detail-card {
  padding: 6px 2px;
}

.fyp-detail-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.fyp-detail-description {
  color: #4f5f72;
  line-height: 1.6;
  margin-bottom: 16px;
}

.fyp-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.fyp-detail-section {
  padding-top: 8px;
  border-top: 1px solid #e6ebf2;
  margin-top: 10px;
}

.top-pad {
  padding-top: 20px;
}


/* Admin overview page (ticket #989) */
.fyp-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.fyp-stat-card {
  background: #ffffff;
  border: 1px solid #e6ebf2;
  border-radius: 14px;
  padding: 20px 24px;
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.06);
}

.fyp-stat-value {
  font-size: 2.2em;
  font-weight: 700;
  color: #1a1a2e;
}

.fyp-stat-label {
  color: #6b7785;
  font-size: 0.95em;
  margin-top: 4px;
}

/* Same two site-wide overrides as .fyp-project-table, and for the same
   reason: the global `table { display: block; }` rule (top of this
   file) breaks the table layout algorithm so `width: 100%` no longer
   reliably fills the container, and the global `th` rule gives every
   header cell a grey, centered, oversized look built for some other,
   older table on the portal. See .fyp-project-table's own comment for
   the full explanation. This table lives inside a .fyp-panel that
   already supplies the white card background/shadow, so it doesn't
   need its own - just the layout and header fixes. */
.fyp-overview-table {
  display: table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.fyp-overview-table thead th {
  background: #f7f9fc;
  text-align: left;
  height: auto;
  line-height: normal !important;
  font-size: 13px;
  font-weight: 600;
  color: #35506b;
  padding: 12px 16px;
  border-bottom: 1px solid #e6ebf2;
}

/* Sortable column headers (attachSortableHeaders() in fyp-shared.js) -
   Supervisor table (overview.html) and the student list
   (allocation_overview.html). */
.fyp-sortable-th {
  cursor: pointer;
  user-select: none;
}

.fyp-sortable-th:hover {
  color: #4f46e5;
}

.fyp-sort-indicator {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.8em;
  color: #4f46e5;
}

.fyp-overview-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid #eef1f6;
  vertical-align: middle;
}

.fyp-overview-table tbody tr:last-child td {
  border-bottom: none;
}

.fyp-overview-table tbody tr:hover {
  background: #f7fbff;
}

.fyp-overview-total-row td {
  font-weight: 700;
  background: #eef5ff;
  color: #153a5f;
  border-top: 2px solid #d8e2ed;
}

.fyp-overview-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 900px) {
  .fyp-overview-columns {
    grid-template-columns: 1fr;
  }
}

/* Each .fyp-overview-columns panel's own title + filter, so the filter
   sits directly against the stats/table it drives instead of being
   pulled out into a shared bar above both panels. */
.fyp-overview-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.fyp-overview-panel-header h3 {
  margin: 0;
}

.fyp-overview-panel-filter {
  width: 220px;
  max-width: 100%;
}

/* Allocation-ratio bar: one combined bar under each panel's stat-card
   row (the whole panel's ratio), and a smaller one per table row (that
   row's own ratio) - same fill color (the existing indigo accent) and
   track in both places, just sized differently, so the two readings
   visually belong to the same system. */
.fyp-ratio-bar-track {
  background: #eef1f6;
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}

.fyp-ratio-bar-fill {
  background: #4f46e5;
  height: 100%;
  border-radius: 999px;
}

.fyp-panel-ratio {
  margin-top: 16px;
}

.fyp-panel-ratio-label {
  margin-top: 6px;
  font-size: 0.85em;
  color: #6b7785;
}

.fyp-table-ratio {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fyp-table-ratio .fyp-ratio-bar-track {
  flex: 1;
  min-width: 48px;
  height: 6px;
}

.fyp-table-ratio-label {
  flex-shrink: 0;
  font-size: 0.85em;
  color: #35506b;
  white-space: nowrap;
}

/* Allocation status pill - allocation_overview.html's per-student
   equivalent of the ratio bars above. A single student is allocated or
   not (no proportion to bar-chart), so this is a badge, not a bar, but
   uses the same indigo accent so the two overview pages read as one
   system. */
.fyp-status-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78em;
  font-weight: 600;
  white-space: nowrap;
}

.fyp-status-pill--allocated {
  background: #4f46e5;
  color: #ffffff;
}

.fyp-status-pill--unallocated {
  background: #ffffff;
  color: #6b7785;
  border: 1px solid #d8e2ed;
}

.fyp-student-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fyp-student-list li {
  padding: 8px 4px;
  border-bottom: 1px solid #e6ebf2;
}

.fyp-student-list li:last-child {
  border-bottom: none;
}

/* --- Card Wrapper --- */
.login-card-wrapper {
  max-width: 520px;
  margin: 0px auto 40px;
  padding: 60px 20px 100px;
}

/* --- Card --- */
.login-card {
  background: #fff;
  border: 1px solid #dee2ed;
  border-radius: 8px;
  padding: 32px 36px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}

.login-card-title {
  font-size: 1.45em;
  font-weight: 700;
  margin: 0 0 4px;
  color: #1a1a2e;
}

.login-card-subtitle {
  color: #666;
  font-size: 0.93em;
  margin: 0 0 20px;
}

/* --- Tabs --- */
.login-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
  background: #f4f4f8;
  border-radius: 6px;
  padding: 4px;
}

.login-tab {
  flex: 1;
  padding: 9px 12px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: #555;
  font-size: 0.92em;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}

.login-tab.active {
  background: #4f46e5;
  color: #fff;
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.3);
}

.login-tab:not(.active):hover {
  background: #e8e8f0;
  color: #333;
}

/* --- Panels --- */
.login-panel-hidden {
  display: none;
}

/* --- Info Box --- */
.login-info-box {
  background: #eff1ff;
  border-left: 3px solid #4f46e5;
  border-radius: 4px;
  padding: 10px 14px;
  font-size: 0.88em;
  color: #4f46e5;
  margin-bottom: 20px;
}

/* --- Form Fields --- */
.login-field-group {
  margin-bottom: 16px;
}

.login-label {
  display: block;
  font-size: 0.88em;
  font-weight: 600;
  color: #333;
  margin-bottom: 6px;
}

.login-input,
.login-field-group .form-control {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #cdd0d8;
  border-radius: 5px;
  font-size: 0.95em;
  color: #222;
  background: #fafafa;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.login-input:focus,
.login-field-group .form-control:focus {
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
  outline: none;
  background: #fff;
}

/* --- Forgot Link --- */
.login-forgot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -6px 0 18px;
  font-size: 0.85em;
  flex-wrap: wrap;
}

.login-forgot a {
  color: #4f46e5;
  text-decoration: none;
}

.login-forgot a:hover {
  text-decoration: underline;
}

.login-forgot-divider {
  color: #aaa;
}

.login-forgot-saml {
  color: #4f46e5 !important;
}

/* --- Primary Button --- */
.login-btn-primary {
  display: block;
  width: 100%;
  padding: 12px;
  background: #4f46e5;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 1em;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s, box-shadow 0.18s;
  box-sizing: border-box;
}

.login-btn-primary:hover {
  background: #4f46e5;
  box-shadow: 0 3px 10px rgba(79, 70, 229, 0.3);
  color: #fff;
  text-decoration: none;
}

.login-btn-saml {
  background: #4f46e5;
}

.login-btn-saml:hover {
  background: #4338ca;
  box-shadow: 0 3px 10px rgba(79, 70, 229, 0.3);
}

/* --- SAML Box --- */
.login-saml-box {
  text-align: center;
  padding: 24px 16px;
  border: 1px dashed #cdd0d8;
  border-radius: 6px;
  margin-bottom: 20px;
  background: #fafafa;
}

.login-saml-icon {
  font-size: 2em;
  color: #4f46e5;
  margin-bottom: 8px;
}

.login-saml-text {
  color: #444;
  font-size: 0.93em;
  margin: 0 0 4px;
}

.login-saml-powered {
  color: #999;
  font-size: 0.8em;
  margin: 0;
}

/* --- Alerts --- */
.login-alert {
  border-radius: 5px;
  padding: 10px 14px;
  font-size: 0.88em;
  margin-bottom: 16px;
}

.login-alert-error {
  background: #fff0f0;
  border: 1px solid #ffc5c5;
  color: #c00;
}

/* --- FYP co-supervisor multi-select chips --- */
.fyp-multiselect-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.fyp-multiselect-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #eef0ff;
  border: 1px solid #c7ccf7;
  border-radius: 12px;
  padding: 2px 6px 2px 10px;
  font-size: 0.85em;
}

/* Suitability chips backed by a real catalog module (data-catalog="true")
   render as the default indigo .fyp-multiselect-chip above - these are
   the ones that filter the Assigned student list. Anything else on that
   field (free-text entries, "Suitable for all") gets this muted variant
   instead, so it's visually obvious which chips actually gate students. */
.fyp-multiselect-chip-other {
  background: #f1f1f4;
  border-color: #d4d4d9;
  color: #5a5a66;
}

.fyp-multiselect-chip-remove {
  border: none;
  background: none;
  color: #4f46e5;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

.fyp-required-marker {
  color: #c0392b;
}

.fyp-multiselect-chip-remove:hover {
  color: #1a1a2e;
}

/* Read-only counterpart of .fyp-multiselect-chip above (same
   light-indigo pill, no remove button) - projects.html's card meta
   line and table Lecturer/Module/Language columns, so a list of
   several lecturers/areas/languages/modules reads as separate items
   instead of one comma-joined run of text. */
.fyp-tag-pill {
  display: inline-block;
  background: #eef0ff;
  border: 1px solid #c7ccf7;
  border-radius: 12px;
  padding: 1px 8px;
  margin: 1px 4px 1px 0;
  font-size: 0.85em;
  color: #35506b;
  white-space: nowrap;
}

.fyp-multiselect-option.is-selected {
  background: #eef0ff;
  font-weight: 600;
}

.fyp-searchable-add-new {
  color: #4f46e5;
  font-weight: 600;
}

.fyp-searchable-add-new:hover {
  background: #eef0ff;
}

.fyp-searchable-add-new:disabled {
  color: #999;
  cursor: default;
}

/* fyp-card is an <a> tag (Task 6), not a <div> - needs an explicit
   block display and reset link styling to keep the panel look. */
a.fyp-card {
  display: block;
  text-decoration: none;
  color: inherit;
}