/* QualityJob4U: the older screens, dressed in the new design.
   Pages that were written with Bootstrap and the old purple theme sit inside <div class="qj-legacy qj-legacy-form">
   in the new layout. Nothing here changes what a page does; it only maps the old building blocks to the new
   colours, shapes and sizes, so every screen looks like one website. */

.qj-legacy { padding: 8px 0 56px; font-size: 15px; color: var(--qj-ink); }
.qj-legacy a:not(.btn):not(.dropdown-item):not(.page-link):not(.nav-link) { color: var(--qj-brand-dark); }
.qj-legacy h1, .qj-legacy h2, .qj-legacy h3, .qj-legacy h4, .qj-legacy h5, .qj-legacy h6 { color: var(--qj-ink); font-weight: 700; }
.qj-legacy h4 { font-size: 19px; }
.qj-legacy h5 { font-size: 17px; }
.qj-legacy .text-muted { color: var(--qj-muted) !important; }
.qj-legacy .text-danger { color: var(--qj-brand-dark) !important; }
.qj-legacy .text-success { color: var(--qj-success) !important; }
.qj-legacy .text-primary { color: var(--qj-ink) !important; }
.qj-legacy hr { border-color: var(--qj-line); opacity: 1; }
.qj-legacy-title h1 { margin: 0; }

/* Cards and boxes */
.qj-legacy .card, .qj-legacy .card-box {
  background: #fff; border: 1px solid var(--qj-line); border-radius: var(--qj-radius-lg);
  box-shadow: var(--qj-shadow); margin-bottom: 20px;
}
.qj-legacy .card-box { padding: 20px; }
.qj-legacy .card-header { background: var(--qj-bg); border-bottom: 1px solid var(--qj-line); font-weight: 700; border-radius: var(--qj-radius-lg) var(--qj-radius-lg) 0 0; }

/* Buttons: one set of colours. The old purple becomes the brand red. */
.qj-legacy .btn { border-radius: var(--qj-radius); font-weight: 600; font-size: 14px; padding: 8px 16px; min-height: 40px; line-height: 1.3; border-width: 1.5px; }
.qj-legacy .btn-sm { min-height: 34px; padding: 5px 12px; font-size: 13px; }
.qj-legacy .btn-xs { min-height: 30px; padding: 3px 10px; font-size: 12.5px; }
.qj-legacy .btn-primary, .qj-legacy .btn-purple { background: var(--qj-brand); border-color: var(--qj-brand); color: #fff !important; }
.qj-legacy .btn-primary:hover, .qj-legacy .btn-purple:hover { background: var(--qj-brand-dark); border-color: var(--qj-brand-dark); }
.qj-legacy .btn-secondary, .qj-legacy .btn-dark { background: var(--qj-ink); border-color: var(--qj-ink); color: #fff !important; }
.qj-legacy .btn-secondary:hover, .qj-legacy .btn-dark:hover { background: #313a50; border-color: #313a50; }
.qj-legacy .btn-success { background: var(--qj-success); border-color: var(--qj-success); color: #fff !important; }
.qj-legacy .btn-success:hover { background: #0f5535; border-color: #0f5535; }
.qj-legacy .btn-danger { background: var(--qj-brand-dark); border-color: var(--qj-brand-dark); color: #fff !important; }
.qj-legacy .btn-danger:hover { background: #7e0b10; border-color: #7e0b10; }
.qj-legacy .btn-info { background: #1c5fd6; border-color: #1c5fd6; color: #fff !important; }
.qj-legacy .btn-warning { background: #b86e00; border-color: #b86e00; color: #fff !important; }
.qj-legacy .btn-light { background: #fff; border-color: var(--qj-line); color: var(--qj-ink) !important; }
.qj-legacy .btn-outline-secondary, .qj-legacy .btn-outline-primary, .qj-legacy .btn-outline-dark { background: #fff; border-color: #aab1bf; color: var(--qj-ink) !important; }
.qj-legacy .btn-outline-secondary:hover, .qj-legacy .btn-outline-primary:hover, .qj-legacy .btn-outline-dark:hover { border-color: var(--qj-ink); background: var(--qj-bg); }
.qj-legacy .btn-close { opacity: .7; }

/* Forms */
.qj-legacy .form-control, .qj-legacy .form-select, .qj-legacy .input-group-text {
  min-height: 42px; font-size: 15px; color: var(--qj-ink); border: 1.5px solid #c4c9d3; border-radius: var(--qj-radius); background-color: #fff;
}
.qj-legacy .form-control-sm { min-height: 34px; font-size: 13.5px; }
.qj-legacy .form-control:focus, .qj-legacy .form-select:focus { border-color: #1c5fd6; box-shadow: 0 0 0 3px rgba(28,95,214,.18); }
.qj-legacy .input-group > .form-control { border-radius: var(--qj-radius) 0 0 var(--qj-radius); }
.qj-legacy .input-group > .btn { border-radius: 0 var(--qj-radius) var(--qj-radius) 0; }
.qj-legacy .input-group-text { background: var(--qj-bg); }
.qj-legacy .form-control-file { font-size: 14px; }
.qj-legacy .form-check-input:checked { background-color: var(--qj-brand); border-color: var(--qj-brand); }
.qj-legacy textarea.form-control { min-height: 96px; }
.qj-legacy .select2-container { width: 100% !important; }
.qj-legacy .select2-container--default .select2-selection--single,
.qj-legacy .select2-container--default .select2-selection--multiple { min-height: 42px; border: 1.5px solid #c4c9d3; border-radius: var(--qj-radius); }
.qj-legacy .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 39px; color: var(--qj-ink); }
.qj-legacy .select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; }
.qj-legacy .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--qj-brand); }

/* Tables */
.qj-legacy .table-responsive { border: 1px solid var(--qj-line); border-radius: var(--qj-radius-lg); background: #fff; }
.qj-legacy .table { margin-bottom: 0; color: var(--qj-ink); font-size: 14px; --bs-table-bg: transparent; }
.qj-legacy .table > :not(caption) > * > * { padding: 11px 12px; border-color: var(--qj-line); vertical-align: middle; }
.qj-legacy .table thead th { background: var(--qj-bg); color: var(--qj-ink-2); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.qj-legacy .table-bordered { border: 1px solid var(--qj-line); }
.qj-legacy .table-hover tbody tr:hover, .qj-legacy .table tbody tr:hover { background: #fafbfc; }
.qj-legacy .table-sm > :not(caption) > * > * { padding: 8px 10px; }
.qj-legacy .table img { border-radius: 6px; max-height: 48px; width: auto; }

/* Pop-ups (modals) */
.qj-legacy .modal-content, .modal-content { border: 0; border-radius: var(--qj-radius-lg); box-shadow: 0 12px 48px rgba(28,34,48,.25); }
.qj-legacy .modal-header, .modal-header { border-bottom: 1px solid var(--qj-line); padding: 16px 20px; }
.qj-legacy .modal-title, .modal-title { font-size: 18px; font-weight: 700; color: var(--qj-ink); }
.qj-legacy .modal-body, .modal-body { padding: 20px; }
.qj-legacy .modal-footer, .modal-footer { border-top: 1px solid var(--qj-line); padding: 14px 20px; }

/* Small things */
.qj-legacy .badge { border-radius: 999px; padding: .4em .75em; font-weight: 600; font-size: 12px; }
.qj-legacy .bg-success, .qj-legacy .badge-success { background: var(--qj-success) !important; }
.qj-legacy .bg-danger, .qj-legacy .badge-danger { background: var(--qj-brand-dark) !important; }
.qj-legacy .bg-primary, .qj-legacy .badge-primary { background: var(--qj-ink) !important; }
.qj-legacy .bg-info, .qj-legacy .badge-info { background: #1c5fd6 !important; }
.qj-legacy .bg-warning, .qj-legacy .badge-warning { background: #b86e00 !important; color: #fff !important; }
.qj-legacy .alert { border-radius: var(--qj-radius); border-width: 1px; }
.qj-legacy .alert-success { background: var(--qj-success-soft); border-color: #bfe3d0; color: var(--qj-success); }
.qj-legacy .alert-danger { background: var(--qj-brand-soft); border-color: #f3c2c4; color: var(--qj-brand-dark); }
.qj-legacy .alert-info { background: #eaf1fd; border-color: #c9dbf7; color: #14439b; }
.qj-legacy .alert-warning { background: var(--qj-warn-soft); border-color: #f1d9a8; color: var(--qj-warn); }
.qj-legacy .dropdown-menu { border: 1px solid var(--qj-line); border-radius: var(--qj-radius); box-shadow: var(--qj-shadow); padding: 6px; }
.qj-legacy .dropdown-item { border-radius: 6px; font-size: 14px; }
.qj-legacy .dropdown-item:hover, .qj-legacy .dropdown-item:focus { background: var(--qj-brand-soft); color: var(--qj-brand-dark); }
.qj-legacy .nav-tabs { border-bottom: 1px solid var(--qj-line); }
.qj-legacy .nav-tabs .nav-link { color: var(--qj-muted); font-weight: 600; border: 0; border-bottom: 3px solid transparent; }
.qj-legacy .nav-tabs .nav-link.active { color: var(--qj-brand-dark); border-bottom-color: var(--qj-brand); background: transparent; }
.qj-legacy .pagination { gap: 4px; flex-wrap: wrap; }
.qj-legacy .page-link { border-radius: 8px !important; color: var(--qj-ink); border-color: var(--qj-line); }
.qj-legacy .page-item.active .page-link { background: var(--qj-brand); border-color: var(--qj-brand); color: #fff; }
.qj-legacy .breadcrumb { background: transparent; padding: 0; }
.qj-legacy img.avatar-sm, .qj-legacy img.rounded-circle { object-fit: cover; }
.qj-legacy .spinner-border { color: var(--qj-brand); }

/* Wide tables and long forms must not push the page sideways on a phone */
.qj-legacy { overflow-x: auto; }
@media (max-width: 640px) { .qj-legacy { padding: 4px 0 40px; } .qj-legacy .btn { white-space: normal; } }

/* The sign-in cards (administrators, coordinators, employers) */
.qj-legacy .account-pages { margin: 0; }
.qj-legacy .account-pages .card { margin-top: 12px; }
.qj-legacy .account-pages .btn-primary { width: 100%; }

/* The "working" overlay the old pages show while a form is sent */
#loader > div { background: rgba(28, 34, 48, .55) !important; }

/* The staff menu: keep each label on one line, and the page title starting with a capital */
.qj-staff .qj-nav a, .qj-staff .qj-nav button { white-space: nowrap; }
.qj-legacy-title h1::first-letter { text-transform: uppercase; }
.qj-legacy-title h1 { text-transform: none; }

/* The sign-in pages already show the logo in the header, so the card does not repeat it */
.qj-legacy .account-pages .text-center.mb-3 { display: none; }