.media-select {
     cursor: pointer;
     transition: all 0.25s ease-in-out;
 }

 .media-select:hover {
     transform: scale(1.03);
     box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
 }

 .media-select.border-primary {
     border: 2px solid #0d6efd !important;
     box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
     position: relative;
 }

 .media-select.border-primary::after {
     content: "✔";
     position: absolute;
     top: 6px;
     right: 8px;
     background: #0d6efd;
     color: #fff;
     font-size: 12px;
     font-weight: bold;
     border-radius: 50%;
     width: 20px;
     height: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 0 5px rgba(13, 110, 253, 0.4);
 }

 .border-dashed {
     border-style: dashed !important;
     transition: 0.3s all ease-in-out;
 }

 #global-upload-form.dragover {
     background-color: #f0f8ff;
     border-color: #0d6efd !important;
     transform: scale(1.02);
 }

 #upload-preview img {
     width: 80px;
     height: 80px;
     object-fit: cover;
     border-radius: 8px;
 }

 .card:hover {

     transition: all 0.2s ease-in-out;
     box-shadow: 0 10px 18px rgba(0, 0, 0, 0.08);
 }

 .card {
     transition: all 0.2s ease-in-out;
 }

 .menu-item {
     list-style: none;
 }

 /* Card */
 .module-card {
     border-radius: 14px;
     transition: all .2s ease;
 }

 .module-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 18px 35px rgba(0, 0, 0, .08);
 }

 /* Thumbnail */
 .module-thumb-wrapper {
     position: relative;
     height: 140px;
     overflow: hidden;
     border-radius: 14px 14px 0 0;
     background: #f1f5f9;
 }

 .module-thumb-img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 /* Status dot */
 .status-dot {
     position: absolute;
     top: 10px;
     right: 10px;
     width: 9px;
     height: 9px;
     border-radius: 50%;
 }

 .status-active {
     background: #22c55e;
     box-shadow: 0 0 0 4px rgba(34, 197, 94, .25);
 }

 .status-inactive {
     background: #94a3b8;
 }

 /* Description clamp */
 .module-desc {
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 /* Soft buttons */
 .btn-success-soft {
     background: rgba(0, 0, 0, 0.12);
     color: #15803d;
     border: 1px solid rgb(0, 199, 73);
 }

 .btn-warning-soft {
     background: rgba(255, 255, 255, 0.15);
     color: #6b0005;
     border: 1px solid rgb(0, 255, 34);
 }

 /* Dot */
 .dot-separator {
     width: 4px;
     height: 4px;
     background: #006aff;
     border-radius: 50%;
     display: inline-block;
 }

 /* Fix toastr colors for Bootstrap 5 */
 #toast-container>.toast-success {
     background-color: #28a745 !important;
 }

 #toast-container>.toast-error {
     background-color: #dc3545 !important;
 }

 #toast-container>.toast-warning {
     background-color: #ffc107 !important;
     color: #000 !important;
 }

 #toast-container>.toast-info {
     background-color: #0dcaf0 !important;
 }