/* --------------------------------------------------------------------------------------------------------
/* ----------------- GENERAL STYLES -----------------
/* -------------------------------------------------------------------------------------------------------- */
body {
  background-color: #f8f9fa;
  margin          : 0;
  padding         : 0;
}

main {
  padding: 20px;
}

button:active, input:active, optgroup:active, select:active, textarea:active,
button:focus, input:focus, optgroup:focus, select:focus, textarea:focus
.form-group:focus-within, .input-container:focus-within
a:focus, a:active,
label:focus, label:active,
[role="button"]:focus, [role="button"]:active
{
  box-shadow: none;
  outline   : none;
}

/* --------------------------------------------------------------------------------------------------------
/* ----------------- LOADER STYLES -----------------
/* -------------------------------------------------------------------------------------------------------- */
.loader-container {
  align-items    : center;
  background     : white;
  display        : flex;
  height         : calc(100vh - 106px);
  justify-content: center;
  left           : 0;
  position       : fixed;
  top            : 106px;
  width          : 100%;
  z-index        : 10000;
}

.loader-container.grid-view-loader {
  height: calc(100vh - 234px);
  top   : 234px;
}

.loader-content {
  align-items   : center;
  display       : flex;
  flex-direction: column;
  gap           : 15px;
  text-align    : center;
}

.loader-content p {
  color    : #495057;
  font-size: 1rem;
  margin   : 0;
}

/* --------------------------------------------------------------------------------------------------------
/* ----------------- VIEW CONTAINER STYLES -----------------
/* -------------------------------------------------------------------------------------------------------- */
.view-content {
  background-color: #fff;
  border          : 1px solid #dee2e6;
  border-radius   : 0.25rem;
  min-height      : 600px;
  padding         : 20px;
}

.view-container {
  height: 100%;
  width : 100%;
}

/* --------------------------------------------------------------------------------------------------------
/* ----------------- GRID & PIVOT STYLES -----------------
/* -------------------------------------------------------------------------------------------------------- */
/* Syncfusion customizations */
.e-grid, .e-pivotview {
  box-shadow: none !important;
}

.e-grid .e-focused {
  box-shadow: none;
}

.e-grid .e-headercell, .e-pivotview .e-headercell {
  background-color: #f8f9fa;
  font-weight     : 600;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .view-content {
    min-height: 400px;
    padding   : 10px;
  }

  #centerControls {
    margin: 10px 0;
  }

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