/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  /* For future development */
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  /* For future development */
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  #dynamicFilters > div {
    flex-basis: 100%; /* Full width for smaller devices */
  }
}
/* END of Medium */

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  /* ---- PAGE CONTENT ---- */

  .page-title{
    margin: 10px; font-size: 1.0rem;
  }

  .total-label{
    margin: 10px;
    line-height: 130%;
  }

  #dynamicFilters {
    /* Dynamic filters for tables */
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 0 10px;
  }

  #dynamicFilters > div {
    /* Dynamic filters for tables */
    margin: 10px;
    flex: 0 0 calc(50% - 20px);
  }

  .compact-card {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .compact-card .card-body {
    padding: 0.5rem !important;
  }

  /* Text utilities (kept; not sidebar-specific) */
  .text-small{
    font-size: 12px;
    font-weight: 400;
    line-height: 15.6px;
    font-family: Open Sans;
    word-wrap: break-word;
  }

  .text-medium{
    font-size: 14px;
    font-weight: 400;
    line-height: 26px;
    font-family: Open Sans;
    word-wrap: break-word;
  }

  .text-large{
    font-size: 16px;
    font-weight: 700;
    line-height: 137%;
    letter-spacing: -0.8px;
    font-family: Open Sans;
    word-wrap: break-word;
  }
}
/* END of Large */

/* Extra large devices (1200px and up) */
@media only screen and (min-width: 1700px) {

  .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
    max-width: 1700px;
  }

  .navbar-main .container{
    padding-left: 1.5vw !important;
    padding-right: 1.5vw !important;
  }

  .navbar .nav-link {
    font-size: 0.925rem;
  }

  /* Text utilities */
  .text-small{
    font-size: 14px;
    font-weight: 400;
    line-height: 15.6px;
    font-family: Open Sans;
    word-wrap: break-word;
  }

  .text-medium{
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
    font-family: Open Sans;
    word-wrap: break-word;
  }

  .text-large{
    font-size: 18px;
    font-weight: 600;
    line-height: 35px;
    font-family: Open Sans;
    word-wrap: break-word;
  }

  .main-content{
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
/* END of Extra large */

/* Ultra wide devices (2600px and up) */
@media only screen and (min-width: 2600px) {
  /* (Removed sidebar-specific overrides) */
}
/* END of Ultra wide */


/* ===== Global styling (kept) ===== */

/* Page background color*/
.bg-background{
  background: #F5F7F8 !important;
}

/* Background for top coloured stripe */
.top-stripe-bg {
  background: linear-gradient(91deg, #1A2E43 0.78%, #565656 98.81%);
  background-size: auto, cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center top;
  position: fixed !important;
}

.welcome-toast{
  border-radius: 16px;
  background: #b5d3e1;
}

.text-blue{ color: #2C5E7D !important; }
.blue-primary{ color: #172B4D !important; }
.orange-tertiary{ color: #FF9E00 !important; }

.bg-primary{ background-color: #2C5E7D !important; }
.check-color{ background-color: rgba(88, 178, 98, 1) !important; }
.minus-color{ background-color: rgba(123, 128, 154, 1) !important; }

.btn-primary{ background-color: rgba(255, 158, 0, 1) !important; }
.btn-secondary{ background-color: rgba(44, 94, 125, 1) !important; }
.btn-success{ background-color: #7BD084 !important; }
.btn-light{ background-color: #f6f9fc !important; }

.typography-dark{ color: #172B4D !important; }
.typography-info{ color: #386641 !important; }
.gray-600{ color: #8898AA !important; }

.text-link{
  color: #386641;
  text-decoration: underline;
}

/* Fonts */
p, a, h1, h2, h3, h4, h5, h6{
  font-family: 'Open Sans', sans-serif !important;
}
