.search-box {
position: relative !important;
}

    .search-box .search-icon {
        position: absolute !important;
        right: auto !important;
        left: 1rem !important;
        padding-left: 0px !important;
        color: #03425680 !important;
    }

/*Table header color*/
.table-active {
background-color: #F8F9FC !important;
}

.colomn-before-last--size {
    box-sizing: content-box;
    width: 15%;
}

.colomn-last--size {
    box-sizing: content-box;
    width: 20%;
}

.modal-content {
border: none !important;
box-shadow: none !important; /* optional: remove shadow */
}


.form__header--add {
background-color: #015958 !important;
color: white !important;
}

.modal-header {
color: white !important;
border-bottom: 0.25px solid #015958 !important;
}

.index-btn-add {
    background-color: #29B768 !important;
    color: #FFFFFF !important;
    display: inline-flex;
    align-items: center; /* vertically center icon and text */
    justify-content: center; /* horizontally center content */
}

.form-border--radius {
    border: solid 0.5px #C1C1C1;
    border-radius: 8px;
}

.form__btn--add {
    background-color: #015958 !important;
    color: white !important;
}

.form__btn--save {
    background-color: #015958 !important;
    color: white !important;
}

.form__btn--next {
    background-color: #015958 !important;
    color: white !important;
}

.form__btn--prev {
    background-color: #6C6C6C !important;
    color: white !important;
}

.form__btn--size {
    box-sizing: border-box;
    min-width: 140px;
    min-height: 36px;
    padding: 4px 16px;
    border: 1px solid;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

.form__label--odd--color {
color: #034256;
}

.form__label--even--color {
color: #015958
}

.form-border {
border: solid 0.5px #015958 !important;
}

.form-icon-color {
color: #00A78B;
}

.form__label--padding {
    padding-bottom: 2px;
}

.form-read {
    background: #EEEEEE !important;
}

/* SVG color sync */
.btn-outline-print svg path {
    stroke: #007EA7;
    transition: stroke 0.2s ease;
}

/* Hover / Focus */
.btn-outline-print:hover,
.btn-outline-print:focus {
    color: #fff !important;
    background-color: #007EA7 !important;
    border-color: #007EA7 !important;
}

    .btn-outline-print:hover svg path,
    .btn-outline-print:focus svg path {
        stroke: #fff;
    }

.btn-outline-print[aria-disabled="true"] {
    pointer-events: none;
    opacity: 0.5;
}

.btn-outline-student {
    color: #00A78B !important; /* text color */
    border-color: #00A78B !important; /* border color */
    background-color: transparent !important; /* keep background transparent */
}

    .btn-outline-student:hover,
    .btn-outline-student:focus {
        color: #fff !important; /* text color on hover */
        background-color: #00A78B !important; /* fill background on hover */
        border-color: #00A78B !important; /* border stays the same */
    }

.btn-outline-disabled:disabled {
    color: #9D9D9D;
    border-color: #9D9D9D;
    background-color: transparent !important;
}

/*.btn-height {
    box-sizing: content-box;
    height: 23px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}*/

@media (max-width: 390px) {
    .hide-below-390 {
        display: none !important;
    }
}

.select-color {
    background-color: #FAFAFC !important;
}

.badge-green {
    background-color: #00A78B !important;
}

.badge-yellow {
    background-color: #F8E38D !important;
}

/*.btn-height {
    box-sizing: content-box;
    height: 23px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}
*/
/* ==========================================
   ECMS UI Enhancements
   ========================================== */

/* Smooth scroll & selection */
html { scroll-behavior: smooth; }
::selection { background: rgba(1, 89, 88, 0.2); color: #015958; }

/* Enhanced focus states */
:focus-visible { outline: 2px solid #015958; outline-offset: 2px; }

/* ==========================================
   Card Enhancements
   ========================================== */
.card {
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  border-radius: 0.75rem;
}
.card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.card-elevated:hover {
  transform: translateY(-2px);
}

/* ==========================================
   Button Enhancements
   ========================================== */
.btn {
  transition: all 0.15s ease, transform 0.15s ease;
}
.btn:hover:not(:disabled) {
  transform: translateY(-1px);
}
.btn:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

/* Primary/Add buttons gradient */
.index-btn-add {
  background: linear-gradient(135deg, #29B768 0%, #2ecc71 100%);
  box-shadow: 0 2px 4px rgba(41, 183, 104, 0.3);
}
.index-btn-add:hover:not(:disabled) {
  background: linear-gradient(135deg, #2ecc71 0%, #3dd879 100%);
  box-shadow: 0 4px 12px rgba(41, 183, 104, 0.4);
}

.form__btn--add, .form__btn--save, .form__btn--next {
  background: linear-gradient(135deg, #015958 0%, #016b6a 100%);
  box-shadow: 0 2px 4px rgba(1, 89, 88, 0.3);
}
.form__btn--add:hover, .form__btn--save:hover, .form__btn--next:hover {
  background: linear-gradient(135deg, #016b6a 0%, #017d7c 100%);
  box-shadow: 0 4px 12px rgba(1, 89, 88, 0.4);
}

/* Outline buttons fill on hover */
[class*="btn-outline"]:not(:disabled) {
  position: relative;
  overflow: hidden;
}
[class*="btn-outline"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.25s ease;
  z-index: -1;
  opacity: 0.1;
}
[class*="btn-outline"]:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

/* ==========================================
   Table Enhancements
   ========================================== */
.table > tbody > tr {
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.table > tbody > tr:hover {
  background-color: rgba(1, 89, 88, 0.03) !important;
}
.table > tbody > tr:hover td:first-child {
  box-shadow: inset 3px 0 0 #015958;
}
.table > thead th {
  background: linear-gradient(180deg, #F8F9FC 0%, #F3F4F8 100%);
  font-weight: 600;
}

/* ==========================================
   Form Enhancements
   ========================================== */
.form-control, .form-select {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:hover:not(:disabled):not(:focus),
.form-select:hover:not(:disabled):not(:focus) {
  border-color: rgba(1, 89, 88, 0.4);
}
.form-control:focus, .form-select:focus {
  border-color: #015958;
  box-shadow: 0 0 0 3px rgba(1, 89, 88, 0.15);
}

/* Search box focus expand */
.search-box .form-control {
  transition: all 0.25s ease;
}
.search-box:focus-within .search-icon {
  color: #015958 !important;
}

/* Input group coordination */
.input-group:focus-within .input-group-text {
  border-color: #015958;
  color: #015958;
}

/* ==========================================
   Modal Enhancements
   ========================================== */
.modal-backdrop.show {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal-content {
  border: none;
  border-radius: 1rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.modal.fade .modal-dialog {
  transform: scale(0.95) translateY(-20px);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal.show .modal-dialog {
  transform: scale(1) translateY(0);
}

/* Modal header gradient */
.form__header--add {
  background: linear-gradient(135deg, #015958 0%, #00A78B 100%) !important;
}

/* ==========================================
   Sidebar Enhancements
   ========================================== */
.navbar-menu .nav-link {
  transition: all 0.15s ease, transform 0.15s ease;
  border-radius: 0.5rem;
  margin: 4px 12px;
  position: relative;
}
.navbar-menu .nav-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: linear-gradient(180deg, #015958, #00A78B);
  border-radius: 0 2px 2px 0;
  transition: height 0.15s ease;
}
.navbar-menu .nav-link:hover {
  transform: translateX(4px);
}
.navbar-menu .nav-link:hover::before {
  height: 60%;
}
.navbar-menu .nav-link:hover i,
.navbar-menu .nav-link:hover svg {
  color: #00A78B;
  transform: scale(1.1);
}
.navbar-menu .nav-link i,
.navbar-menu .nav-link svg {
  transition: all 0.15s ease;
}

/* ==========================================
   Pagination Enhancements
   ========================================== */
.pagination .page-link {
  transition: all 0.15s ease, transform 0.15s ease;
}
.pagination .page-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(1, 89, 88, 0.15);
}
.pagination .page-item.active .page-link {
  background: linear-gradient(135deg, #015958 0%, #016b6a 100%);
  box-shadow: 0 4px 12px rgba(1, 89, 88, 0.3);
}

/* ==========================================
   Dropdown Enhancements
   ========================================== */
.dropdown-menu {
  border: none;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  border-radius: 0.75rem;
  padding: 0.5rem;
  animation: dropdownFadeIn 0.2s ease;
}
.dropdown-item {
  border-radius: 0.5rem;
  transition: all 0.15s ease;
}
.dropdown-item:hover {
  background: rgba(1, 89, 88, 0.08);
  color: #015958;
}

/* ==========================================
   Badge & Alert Enhancements
   ========================================== */
.badge {
  font-weight: 500;
  padding: 0.35em 0.65em;
  border-radius: 0.375rem;
}
.alert {
  border: none;
  border-radius: 0.75rem;
}

/* ==========================================
   Animations
   ========================================== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Animation utilities */
.animate-fade-in-up {
  animation: fadeInUp 0.3s ease both;
}

/* Staggered children */
.stagger-children > * {
  opacity: 0;
  animation: fadeInUp 0.3s ease forwards;
}
.stagger-children > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.15s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.25s; }

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 0.25rem;
}
.skeleton-text { height: 1em; margin-bottom: 0.5em; }
.skeleton-button { height: 38px; width: 100px; border-radius: 0.5rem; }

/* Loading spinner */
.spinner-teal {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(1, 89, 88, 0.2);
  border-top-color: #015958;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ==========================================
   Role Selector Enhancements
   ========================================== */

/* Role Accordion Styling */
.role-accordion {
  border-radius: 0.75rem;
  overflow: hidden;
}

.role-group-item {
  background: #f8f9fc;
  border-radius: 0.5rem !important;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.role-group-item:hover {
  box-shadow: 0 2px 8px rgba(1, 89, 88, 0.1);
}

.role-group-header {
  background: linear-gradient(135deg, #f8f9fc 0%, #fff 100%) !important;
  border: 1px solid rgba(1, 89, 88, 0.1);
  border-radius: 0.5rem !important;
  padding: 0.75rem 1rem;
  font-weight: 500;
  color: #015958;
  transition: all 0.2s ease;
}

.role-group-header:not(.collapsed) {
  background: linear-gradient(135deg, #015958 0%, #00A78B 100%) !important;
  color: white !important;
  border-color: transparent;
}

.role-group-header:not(.collapsed) .role-group-title,
.role-group-header:not(.collapsed) .role-count-badge {
  color: white !important;
}

.role-group-header:not(.collapsed) .select-all-btn {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  color: white;
}

.role-group-header:not(.collapsed) .select-all-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.role-group-header::after {
  color: #015958;
  transition: transform 0.2s ease;
}

.role-group-header:not(.collapsed)::after {
  color: white;
}

.role-group-title {
  font-size: 0.95rem;
}

.role-count-badge {
  font-size: 0.8rem;
  padding: 0.25rem 0.6rem;
  background: rgba(1, 89, 88, 0.1);
  border-radius: 1rem;
  color: #015958;
  transition: all 0.2s ease;
}

.role-group-body {
  background: white;
  padding: 1rem;
  border: 1px solid rgba(1, 89, 88, 0.1);
  border-top: none;
  border-radius: 0 0 0.5rem 0.5rem;
}

/* Role Switch Styling */
.role-switch {
  padding: 0.5rem 0.75rem;
  padding-right: 2.5rem;
  background: #f8f9fc;
  border-radius: 0.5rem;
  transition: all 0.15s ease;
  margin-bottom: 0;
}

.role-switch:hover {
  background: rgba(1, 89, 88, 0.08);
}

.role-switch .form-check-input {
  width: 2.5rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  cursor: pointer;
  background-color: #cbd5e0;
  border: none;
  transition: all 0.2s ease;
}

.role-switch .form-check-input:checked {
  background-color: #00A78B;
}

.role-switch .form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(0, 167, 139, 0.25);
  border: none;
}

.role-label {
  font-size: 0.875rem;
  color: #4a5568;
  cursor: pointer;
  transition: color 0.15s ease;
  user-select: none;
}

.role-switch:hover .role-label {
  color: #015958;
}

.role-switch .form-check-input:checked + .role-label {
  color: #015958;
  font-weight: 500;
}

/* Select All Button */
.select-all-btn {
  font-size: 0.75rem;
  padding: 0.2rem 0.6rem;
  border-radius: 0.375rem;
  transition: all 0.15s ease;
}

.select-all-btn:hover {
  transform: scale(1.02);
}

/* Role Search Input */
#roleSearchInput {
  border-radius: 0.5rem;
}

#roleSearchInput:focus {
  box-shadow: 0 0 0 3px rgba(1, 89, 88, 0.15);
}

/* Role Item Animation */
.role-item {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.role-item[style*="display: none"] {
  opacity: 0;
  transform: scale(0.95);
}