/* =========================
   CUSTOM BACKGROUND AND WIDER FORM STYLES (Login and Register with New Background and Increased Width)
========================= */

.wide-login-page,
.wide-register-page {
  min-height: 100vh;
  margin: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.40), rgba(0, 0, 0, 0.40)),
              url('../img/bgStudGold1.jpg') no-repeat center center fixed; /* New Background Image */
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* =========================
   WIDER FORM BOX STYLE (Wider Login and Register Box)
========================= */

/*.wide-login-box,*/
.wide-register-box {
  width: 50%; /* Set the width to a desired value (you can adjust this) */
  margin: 0 auto; /* Center the box */
}

@media (max-width: 576px) {
  .wide-login-box,
  .wide-register-box {
    margin-top: .5rem;
    width: 90%;
  }
}

/* =========================
   WIDE FORM CARD STYLES
========================= */

.wide-login-box .card,
.wide-register-box .card {
  margin-bottom: 0;
}

.wide-login-card-body,
.wide-register-card-body {
  background-color: #fff;
  border-top: 0;
  color: #666;
  padding: 20px;
}

.wide-login-card-body .input-group .form-control,
.wide-register-card-body .input-group .form-control {
  border-right: 0;
}

.wide-login-card-body .input-group .form-control:focus,
.wide-register-card-body .input-group .form-control:focus {
  box-shadow: none;
}

.wide-login-card-body .input-group .form-control:focus ~ .input-group-prepend .input-group-text,
.wide-login-card-body .input-group .form-control:focus ~ .input-group-append .input-group-text,
.wide-register-card-body .input-group .form-control:focus ~ .input-group-prepend .input-group-text,
.wide-register-card-body .input-group .form-control:focus ~ .input-group-append .input-group-text {
  border-color: #80bdff;
}

.wide-login-card-body .input-group .form-control.is-valid:focus,
.wide-register-card-body .input-group .form-control.is-valid:focus {
  box-shadow: none;
}

.wide-login-card-body .input-group .form-control.is-valid ~ .input-group-prepend .input-group-text,
.wide-login-card-body .input-group .form-control.is-valid ~ .input-group-append .input-group-text,
.wide-register-card-body .input-group .form-control.is-valid ~ .input-group-prepend .input-group-text,
.wide-register-card-body .input-group .form-control.is-valid ~ .input-group-append .input-group-text {
  border-color: #28a745;
}

.wide-login-card-body .input-group .form-control.is-invalid:focus,
.wide-register-card-body .input-group .form-control.is-invalid:focus {
  box-shadow: none;
}

.wide-login-card-body .input-group .form-control.is-invalid ~ .input-group-append .input-group-text,
.wide-register-card-body .input-group .form-control.is-invalid ~ .input-group-append .input-group-text {
  border-color: #dc3545;
}

.wide-login-card-body .input-group .input-group-text,
.wide-register-card-body .input-group .input-group-text {
  background-color: transparent;
  border-bottom-right-radius: 0.25rem;
  border-left: 0;
  border-top-right-radius: 0.25rem;
  color: #777;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* =========================
   WIDE FORM MESSAGE STYLE
========================= */

.wide-login-box-msg,
.wide-register-box-msg {
  margin: 0;
  padding: 0 20px 20px;
  text-align: center;
}

/* =========================
   BACKGROUND STYLING
========================= */

body.login-page,
body.register-page {
    min-height: 100vh;
    margin: 0;
    background: linear-gradient(rgba(0,0,0,0.40), rgba(0,0,0,0.40)),
                url('../img/bgLectGold1.jpg') no-repeat center center fixed;
    background-size: cover;
}


/* =========================
   CUSTOM FONT (SAFE)
========================= */

@font-face {
    font-family: 'ElsevierSans';
    src: url('../../generalFiles/font/ElsevierSansWeb-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* =========================
   GLOBAL TYPOGRAPHY
   (NO * SELECTOR!)
========================= */

html, body {
    font-family: 'ElsevierSans', sans-serif;
}

/* Apply font only to text elements */
body,
.main-header,
.main-sidebar,
.content-wrapper,
.card,
.card-title,
.card-body,
.nav-sidebar .nav-link,
.brand-text,
.form-control,
.input-group-text,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
table,
.dataTable,
.modal-title,
.dropdown-menu,
.small-box,
.info-box,
.content-header h1,
h1, h2, h3, h4, h5, h6,
p, span, label, a, li {
    font-family: 'ElsevierSans', sans-serif;
}


/* =========================
   🔥 CRITICAL FIX: ICONS
========================= */

/* Ensure Font Awesome is NOT overridden */
.fa, .fas, .far, .fab {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900;
}

/* Optional: Ionicons safety */
.ion, .ionicons, [class^="ion-"] {
    font-family: "Ionicons" !important;
}


/* =========================
   BUTTON ICON SPACING
========================= */

.btn i {
    margin-right: 6px;
}


/* =========================
   SELECT2 IMPROVEMENTS
========================= */

/* Multiple select container */
.select2-container--default .select2-selection--multiple {
    min-height: auto;
    height: auto;
    overflow-y: visible;
    flex-wrap: wrap;
    padding: 0.375rem 0.75rem;
}

/* Selected items layout */
.select2-selection__rendered {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.25rem;
}

/* Dropdown height */
.select2-container--open .select2-dropdown--below {
    max-height: 800px;
    overflow-y: auto;
}


/* =========================
   OPTIONAL: TABLE POLISH
========================= */

table.dataTable {
    font-size: 14px;
}


/* =========================
   OPTIONAL: CARD POLISH
========================= */

.card {
    border-radius: 6px;
}


/* =========================
   OPTIONAL: LINK STYLE
========================= */

a {
    transition: all 0.2s ease;
}

a:hover {
    text-decoration: none;
}