a.toggleFilters.btn {
    background-color: #c62828;   /* strong red */
    color: #fff !important;
    border: 1px solid #b71c1c;
    font-weight: 600;
}

a.toggleFilters.btn .icon-filter {
    color: #fff;
}

a.toggleFilters.btn:hover,
a.toggleFilters.btn:focus {
    background-color: #b71c1c;
    border-color: #8e0000;
    color: #fff !important;
}


/****************************
 * BASE STATUS COLOURS
 ****************************/

/* Application saved but NOT complete (any format, pending) → light red */
.application_complete0.approved0 {
    background: #ffcecb !important;  /* light red */
}

/* Application complete and awaiting approval (any format, pending) → light blue */
.application_complete1.approved0 {
    background: #e3fdff !important;  /* light blue */
}

/* Application needs to be amended / under review → light purple */
.approved3 {
    background: #F3E5FF !important;  /* light purple */
}

/* Application not approved → greyblue */
.approved2 {
    background: #7E8C99 !important;  /* greyblue */
}

/* Application approved → light green */
.approved1 {
    background: #eeffee !important;  /* light green */
}


/****************************
 * 2026 QA MANUAL – ONLINE / BLENDED / PILOT ONLY
 * qam_submit is ONLY meaningful for these formats
 ****************************/

/* 2026 QA manual INCOMPLETE (Online/Blended/Pilot), 
   but user has marked the application COMPLETE + Pending
   → light ORANGE overrides light BLUE
*/
.qam_submit0.application_complete1.delivery_formatOnline,
.qam_submit0.application_complete1.delivery_formatBlended,
.qam_submit0.application_complete1.delivery_formatPilot {
    background: #fff4e3 !important;  /* light orange */
}

/* Optional: if you want to strongly mark QA COMPLETE too, you *could*
   add explicit qam_submit1 rules – but not required for colours. */


/****************************
 * FACE-TO-FACE
 * qam_submit is IGNORED (0 or 1)
 * → Uses ONLY the base status colours above
 ****************************/
/* No extra rules needed: Face-to-Face rows just follow the base logic */


/****************************
 * OPTIONAL: hide raw QA dropdown element in the form
 ****************************/
#application___qam_submit {
    display: none;
}

.stipulations1.stipulations1.stipulations1.stipulations1.stipulations1 {
    background: yellow !important;
}




.uk-container {
max-width: 90%;}

  .legend { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
  .legend-item { display: inline-flex; align-items: center; gap: 8px; }
  .legend-swatch { width: 16px; height: 16px; border: 1px solid #888; display: inline-block; }

/* Legend Colour Overrides */
.legend-swatch.qam_submit0 {
    background: #fff4e3 !important;  /* light orange */
}

.legend-swatch.application_complete0 {
    background: #ffcecb !important;  /* light red */
}

.legend-swatch.application_complete1.approved0 {
    background: #e3fdff !important;  /* light blue */
}

.legend-swatch.approved3 {
    background: #F3E5FF !important;  /* light purple */
}

.legend-swatch.approved2 {
    background: #7E8C99 !important;  /* greyblue */
    color: white; /* Helps text contrast if needed */
}

.legend-swatch.approved1 {
    background: #eeffee !important;  /* light green */
}
.legend-swatch.stipulation1 {
    background: yellow !important;  /* light green */
}

.nav-item.tab-editable .nav-link,
.nav-item.tab-editable > button {
    background-color: #ffc107 !important;
    color: #000 !important;
}

.label-editable {
        background-color: #fff3cd !important;
    padding: 3px 6px;
    border-radius: 3px;
    max-height: 30px;
}

a[title="Book Course"] {
    padding: 6px 12px;
    background: #2B8A3E;
    color: #fff;
    border-radius: 4px;
    white-space: nowrap;
}
a[title="Book Course"]:hover {
    background: #1f6a2e;
    white-space: nowrap;
}

td.aaa_summer_courses___booking_url {
    white-space: nowrap;
}

td.aaa_summer_courses___course_date {
    white-space: nowrap;
}
/* Mobile-friendly Fabrik Bootstrap tabs */
@media (max-width: 768px) {
    .nav-tabs .nav-link.active { 
		background-color: #f8f9fa!important; 
		border-left: 4px solid #0d6efd!important; 
		font-weight: 600!important; }
      .nav-tabs .nav-link.active::after {
    content: ' (Scroll down)';
    font-size: 0.85rem;
    color: #6c757d;
  }
    

  /* Stack tabs vertically */
  .nav.nav-tabs {
    flex-direction: column;
    border-bottom: 0;
  }

  /* Each tab takes full width */
  .nav.nav-tabs .nav-item {
    width: 100%;
  }

  /* Buttons stretch full width */
  .nav.nav-tabs .nav-link {
    width: 100%;
    text-align: left;
    border-radius: 0;
    margin-bottom: 4px;
  }

  /* Optional: stronger tap target */
  .nav.nav-tabs .nav-link {
    padding: 0.75rem 1rem;
    font-size: 1rem;
  }
    
   .btn-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .btn-toolbar .btn-group {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .btn-toolbar .btn {
    width: 100%;
  }

  /* EXCEPTION: keep Previous + Next on one row */
  .btn-toolbar .btn-group[aria-label="Previous-Next Buttons"] {
    flex-direction: row;
    gap: 0.5rem;
  }

  .btn-toolbar .btn-group[aria-label="Previous-Next Buttons"] .btn {
    width: 50%;
  }
    /*Mobile List view as panels */
  /* Hide table header + filters on mobile */
  .fabrikDataContainer table.table thead {
    display: none;
  }

  /* Each row becomes a card/panel */
  .fabrikDataContainer table.table tbody tr.fabrik_row {
    display: block;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    background: #fff;
  }

  /* Each cell becomes a labelled line (LEFT ALIGNED) */
  .fabrikDataContainer table.table tbody tr.fabrik_row td {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
    padding: 0.4rem 0;
    border: 0;
    white-space: normal;
    text-align: left;
  }

  /* Label (from data-label) */
  .fabrikDataContainer table.table tbody tr.fabrik_row td::before {
    content: attr(data-label);
    font-weight: 600;
    opacity: 0.75;
    flex: 0 0 40%;
    text-align: left;
  }

  /* Ensure values are left-aligned */
  .fabrikDataContainer table.table tbody tr.fabrik_row td > * {
    text-align: left;
  }

  /* Hide checkbox column */
  .fabrikDataContainer table.table td.fabrik_select {
    display: none !important;
  }

  /* Actions button full width inside card */
  .fabrikDataContainer table.table td.fabrik_actions .btn-group,
  .fabrikDataContainer table.table td.fabrik_actions a.btn {
    width: 100%;
  }



}

/* Fabrik: stop textarea/input overlap in Bootstrap layouts */
.fabrikForm textarea.fabrikinput,
.fabrikForm textarea.inputbox,
.fabrikForm .fabrikElement textarea,
/*.fabrikForm input.fabrikinput,*/
.fabrikForm select.fabrikinput {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  display: block;
}

/* If any parent is flex, allow the field to shrink instead of overflowing */
.fabrikForm .fabrikElement,
.fabrikForm .fabrikElementContainer,
.fabrikForm .control-group,
.fabrikForm .row,
.fabrikForm [class*="col-"] {
  min-width: 0;
}

/*INSPECTORATE ASSIGN APPLICATION LIST */
.application___review_status .fabrikTip[data-bs-content*="approved" i]:not([data-bs-content*="not approved" i]) {
    min-width: 110px;
    display: inline-block;
    background-color: #C6EFCE;
    color: #006100;
    padding: 2px 16px 4px 16px;
    border-radius: 2px;
    text-align: center;
}



.application___review_status .fabrikTip[data-bs-content*="Course is pending the first review"] {
    min-width: 110px;
    display: inline-block;
    background-color: #FFEB9C;
    color: #AD5700;
    padding: 2px 16px 4px 16px;
    border-radius: 2px;
    text-align: center;
}

.application___review_status .fabrikTip[data-bs-content*="not approved by the 1st and 2nd inspectors"],
.application___review_status .fabrikTip[data-bs-content*="Under Review"] {
    min-width: 110px;
    display: inline-block;
    background-color: #E6D9F2; /* lilac */
    color: #4B2E6F;
    padding: 2px 16px 4px 16px;
    border-radius: 2px;
    text-align: center;
}

.application___review_status .fabrikTip[data-bs-content*="not approved by the appeals inspector"],
.application___review_status .fabrikTip[data-bs-content*="Not Approved"] {
    min-width: 110px;
    display: inline-block;
    background-color: #F8D7DA; /* light red */
    color: #842029;
    padding: 2px 16px 4px 16px;
    border-radius: 2px;
    text-align: center;
}