/* Container main with dark theme */

body.dark.theme-orange {
    background-color: var(--color-orange-dark) !important;
    color: var(--color-orange-400);
}

body.dark.theme-black {
    background-color: var(--color-gray-600) !important;
    color: var(--color-gray-400);
}

body.dark.theme-white {
    background-color: var(--color-gray-400) !important;
    color: var(--color-gray-700);
}

body.dark.theme-purple {
    background-color: var(--color-purple-dark) !important;
    color: var(--color-purple-400);
}

body.dark.theme-blue {
    background-color: var(--color-skyblue-dark) !important;
    color: var(--color-skyblue-400);
}

body.dark.theme-cyan {
    background-color: var(--color-teal-dark) !important;
    color: var(--color-teal-400);
}

body.dark.theme-green {
    background-color: var(--color-green-dark) !important;
    color: var(--color-green-400);
}

/* Container main with Light theme */

body.light {
    padding-top: 10px;
}

body.light.theme-orange {
    background-color: var(--color-orange-100) !important;
    color: var(--color-orange-700);
}

body.light.theme-black {
    background-color: var(--color-gray-100) !important;
    color: var(--color-gray-700);
}

body.light.theme-white {
    background-color: var(--color-gray-100) !important;
    color: var(--color-gray-700);
}

body.light.theme-purple {
    background-color: var(--color-purple-100) !important;
    color: var(--color-purple-700);
}

body.light.theme-blue {
    background-color: var(--color-skyblue-100) !important;
    color: var(--color-skyblue-700);
}

body.light.theme-cyan {
    background-color: var(--color-teal-100) !important;
    color: var(--color-teal-700);
}

body.light.theme-green {
    background-color: var(--color-green-100) !important;
    color: var(--color-green-700);
}

.container-fluid {
    padding: 0;
}

body.light .page-title {
    color: var(--color-gray-700) !important;
}
body.dark .page-title {
    color: var(--color-gray-300) !important;
}

body.dark .sidebar-user-panel{
   background-color: var(--color-gray-800) !important;
   border: 10px solid  var(--color-gray-800);
}
body.light .sidebar-user-panel{
    background-color: var(--color-white) !important;
    border: 10px solid  var(--color-white);    
}
body.dark .about-user {
        background-color: var(--color-gray-800);
        color: var(--color-gray-400);

}
body.light .about-user {
    background-color: var(--color-white);
    color: var(--color-gray-700);
}

.sortable {
    cursor: pointer;
    border: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* .sortable.asc::after {
    content: " ▲" !important;
}

.sortable.desc::after {
    content: " ▼" !important;
} */

.sort-icons {
    display: inline-flex;
    flex-direction: column;
    line-height: 18px;


}

.sortable.desc  .down-icon{
    color: var(--color-gray-100);
}
 .sortable.asc .up-icon{
    color: var(--color-gray-100);
}

.down-icon,
.up-icon{
    font-size: 10px;
    color: var(--color-gray-600);
}


/* Make breadcrumb responsive */
.block-header .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* Keep title readable on small screens */
.block-header .page-title {
    font-size: 1.25rem;
    white-space: nowrap;
}

/* Mobile adjustments */
@media (min-width: 576px) {
    .block-header .breadcrumb-title {
        font-size: 1.8rem;
    }
}

@media (max-width: 576px) {
    .block-header .breadcrumb {
        align-items: flex-start;
        font-size: 1.1rem;
    }

    .block-header .breadcrumb-item {
        padding: 0;
    }

    .block-header .breadcrumb-title {
        font-size: 1.4rem;
    }
    .step-progress{
      display: grid !important;
      grid-template-columns: repeat(5,1fr) !important;
    }
}

/* Tablet adjustments */
@media (max-width: 768px) {
    .block-header .breadcrumb {
        justify-content: flex-start;
    }
}

/* ---------- Mobile Pagination Fix ---------- */
@media (max-width: 576px) {
/* 
    nav[aria-label="Page navigation"] ul.pagination {
        justify-content: center;
        gap: 6px;
    }

    nav[aria-label="Page navigation"] .page-link {
        width: auto !important;
        height: 38px !important;
        font-size: 0.85rem;
        padding: 0 0px;
    } */

    /* Page X of Y smaller */
    /* nav[aria-label="Page navigation"] .page-item:nth-child(2) .page-link {
        font-size: 0.8rem;
    } */
}

/* ---------- Tablet Adjustment ---------- */
@media (max-width: 768px) {

    nav[aria-label="Page navigation"] ul.pagination {
        gap: 8px;
    }

    nav[aria-label="Page navigation"] .page-link {
        height: 40px !important;
        min-width: 90px;
        font-size: 0.9rem;
    }
}

.w-fit {
  width: fit-content;
}