/* ==========================================================
   EFORMS GLOBAL FOOTER / SHARED UI
   ========================================================== */

/* ==========================================================
   GLOBAL DOCUMENT SCROLL
   ========================================================== */

html,
body {
  overflow-x: hidden;
  overflow-y: auto !important;
}

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

/* Remove unwanted global scrollbar behavior from Select2 */
.select2-drop-mask {
  position: fixed !important;
}

/* Keep Select2 dropdown above Bootstrap modals */
.select2-container--open {
  z-index: 999999 !important;
}

/* ==========================================================
   DATATABLES
   ========================================================== */

#example_wrapper {
  margin-bottom: 60px;
}

/* ==========================================================
   PREMIUM SESSION MODAL
   ========================================================== */

.premium-session-popup {
  border-radius: 28px !important;

  padding: 24px !important;

  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.18),
    0 8px 25px rgba(0, 0, 0, 0.08) !important;
}

.swal-actions-gap {
  display: flex !important;
  gap: 12px;

  margin-top: 20px;
}

/* ==========================================================
   BOOTSTRAP MODAL STACKING
   ========================================================== */

.modal {
  z-index: 1050;
}

.modal-backdrop {
  z-index: 1040;
}

/* ==========================================================
   SELECT2 FORM CONTROL
   ========================================================== */

.select2-container.form-control {
  height: 34px;
}

/* Match text display inside Select2 */
.select2-container.form-control .select2-choice,
.select2-container.form-control .select2-chosen {
  height: 49px;
  padding-left: 12px;
  line-height: 46px;
}

/* Select2 arrow */
.select2-container.form-control .select2-arrow {
  top: 0;
  height: 34px;
}

/* Hide default Select2 arrow because the application
   uses its own visual treatment */
.select2-container.form-control .select2-arrow {
  display: none !important;
}

/* ==========================================================
   PREMIUM DARK STATUS PILLS
   ========================================================== */

.status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  min-width: 78px;
  height: 24px;

  padding: 4px 11px;

  border: 1px solid transparent;
  border-radius: 999px;

  font-size: 10px;
  font-weight: 700;
  line-height: 1;

  letter-spacing: 0.25px;
  text-transform: uppercase;

  white-space: nowrap;

  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.status-chip:hover {
  transform: translateY(-1px);

  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.status-icon {
  font-size: 11px;
}

.status-text {
  letter-spacing: 0.3px;
}

/* ==========================================================
   STATUS COLORS
   ========================================================== */

/* Pending */
.status-pending {
  color: #3f2b01;

  background: linear-gradient(135deg, #e9d603, #f6bd14);

  border-color: #d0c008;
}

/* In Progress */
.status-progress {
  color: #e0f2fe;

  background: linear-gradient(135deg, #0369a1, #075985);

  border-color: #0c4a6e;
}

/* Approved */
.status-primary {
  color: #dbeafe;

  background: linear-gradient(135deg, #2563eb, #1d4ed8);

  border-color: #1e40af;
}

/* Completed / Success */
.status-success {
  color: #dcfce7;

  background: linear-gradient(135deg, #16a34a, #15803d);

  border-color: #166534;
}

/* Denied */
.status-danger {
  color: #fee2e2;

  background: linear-gradient(135deg, #dc2626, #991b1b);

  border-color: #7f1d1d;
}

/* Purple */
.status-purple {
  color: #f3e8ff;

  background: linear-gradient(135deg, #9333ea, #6b21a8);

  border-color: #581c87;
}

/* Warning */
.status-warning {
  color: #ffedd5;

  background: linear-gradient(135deg, #ea580c, #c2410c);

  border-color: #9a3412;
}

/* Muted */
.status-muted {
  color: #f8fafc;

  background: linear-gradient(135deg, #64748b, #475569);

  border-color: #334155;
}

/* Info */
.status-info {
  color: #e0f2fe;

  background: linear-gradient(135deg, #0891b2, #0e7490);

  border-color: #155e75;
}

/* In Process */
.status-process {
  color: #fff7ed;

  background: linear-gradient(135deg, #f97316, #c2410c);

  border-color: #9a3412;
}

/* Recommended */
.status-recommended {
  color: #f5d0fe;

  background: linear-gradient(135deg, #a21caf, #701a75);

  border-color: #86198f;
}

/* For Reversal */
.status-reversal {
  color: #ede9fe;

  background: linear-gradient(135deg, #7c3aed, #5b21b6);

  border-color: #4c1d95;
}

/* Awaiting Action */
.status-awaiting {
  color: #fef3c7;

  background: linear-gradient(135deg, #d97706, #92400e);

  border-color: #78350f;
}

/* ==========================================================
   ==========================================================
   GLOBAL APPLICATION FOOTER
   ==========================================================
   ========================================================== */

/*
 * IMPORTANT
 * ----------
 * The footer intentionally DOES NOT use position: fixed.
 *
 * A fixed footer overlays page content and causes:
 *
 *   - inconsistent bottom spacing
 *   - content hidden behind the footer
 *   - <br> hacks
 *   - excessive page-specific padding
 *   - different behavior on short/long pages
 *
 * The footer is therefore part of the normal document flow.
 */

/* ----------------------------------------------------------
   FOOTER CONTAINER
   ---------------------------------------------------------- */

.footer {
  position: relative;

  display: block;

  width: 100%;

  /*
     * This is the actual controlled space between the
     * final page content and the footer.
     */
  margin-top: 48px;

  /*
     * Small bottom breathing room.
     */
  margin-bottom: 0;

  padding: 14px 20px;

  background: #ffffff;

  color: #6c757d;

  text-align: right;

  border-top: 1px solid #e9ecef;

  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.035);

  font-size: 13px;

  line-height: 1.5;

  /*
     * If a page happens to use a flex-column body,
     * prevent the footer from collapsing.
     */
  flex-shrink: 0;

  box-sizing: border-box;

  z-index: 10;
}

/* ----------------------------------------------------------
   FOOTER PARAGRAPH
   ---------------------------------------------------------- */

.footer p {
  margin: 0;

  padding: 0;

  line-height: 1.6;
}

/* ----------------------------------------------------------
   FOOTER VERSION BADGE
   ---------------------------------------------------------- */

.footer-version {
  display: inline-flex;

  align-items: center;
  gap: 4px;

  margin-left: 12px;

  padding: 4px 10px;

  background: #f8f9fa;

  border: 1px solid #dee2e6;

  border-radius: 999px;

  color: #495057;

  font-size: 11px;
  font-weight: 600;

  line-height: 1.3;

  white-space: nowrap;

  cursor: pointer;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.footer-version:hover {
  background: #ffffff;

  border-color: #cbd3da;

  color: #343a40;

  transform: translateY(-1px);

  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07);
}

.footer-version i {
  font-size: 11px;
}

.footer-version strong {
  font-weight: 700;
}

.footer-version small {
  font-size: 10px;

  color: #868e96;
}

/* ----------------------------------------------------------
   FOOTER FOCUS STATE
   ---------------------------------------------------------- */

.footer-version:focus {
  outline: none;

  box-shadow: 0 0 0 3px rgba(23, 63, 95, 0.12);
}

/* ==========================================================
   RESPONSIVE FOOTER
   ========================================================== */

@media (max-width: 768px) {
  .footer {
    margin-top: 36px;

    padding: 14px 15px;

    text-align: center;

    font-size: 12px;
  }

  .footer p {
    line-height: 1.8;
  }

  .footer-version {
    margin-top: 6px;
    margin-left: 0;
  }
}

/* ==========================================================
   SMALL MOBILE DEVICES
   ========================================================== */

@media (max-width: 480px) {
  .footer {
    margin-top: 30px;

    padding: 13px 12px;
  }

  .footer-version {
    display: inline-flex;

    max-width: 100%;

    white-space: normal;

    justify-content: center;
  }
}