html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.lcs-block-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}
.lcs-block-content {
    text-align: center;
    font-size: 14px;
}

    .lcs-block-content i {
        font-size: 18px;
    }
.lcs-block-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    border-radius: 6px;
}
.summary-box {
    background: #111827;
    color: white;
    border-radius: 12px;
    padding: 20px;
}

.required::after {
    content: " *";
    color: red;
}
.sticky-footer {
    position: sticky;
    bottom: 0;
    background: #fff;
    z-index: 10;
    border-top: 1px solid #dee2e6;
}
.select2-selection__clear {
    position: absolute;
    right: 10px; /* tránh đè arrow */
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    pointer-events: auto;
}
    .select2-selection__clear span {
        display: none;
    }

    .select2-selection__clear::after {
        content: "\eb55"; /* icon ti-x */
        font-family: "tabler-icons";
        font-size: 16px;
    }

.select2-selection__arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 10px;
}
.app-search.invalid + .invalid-feedback {
    display: block;
}
.detail-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

    .detail-item.large .value {
        font-size: 1.2rem;
        font-weight: 600;
        color: #2c3e50;
    }

    .detail-item .label {
        font-weight: 500;
        color: #7f8c8d;
    }

    .detail-item .value {
        color: #2c3e50;
    }

#tblEnrollments tbody tr.selected > td {
    background-color: #fff8e1 !important;
}
/* Mặc định: ẩn khỏi UI */
#printContainer {
    display: none;
}

/* Khi print: show lại */
@media print {
    body * {
        visibility: hidden;
    }

    #printContainer, #printContainer * {
        visibility: visible;
    }

    #printContainer {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
}
/* skeleton loading */
.skeleton {
    height: 16px;
    background: #eee;
    margin-bottom: 10px;
    border-radius: 4px;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.6;
    }
}

#offcanvasFooter {
    position: sticky;
    bottom: 0;
    z-index: 10;
}

.offcanvas-body {
    overflow: hidden;
}

/* Dashboard cards: uniform height, scrollable content */
.dashboard-card {
    height: 420px;
    display: flex;
    flex-direction: column;
}
.dashboard-card .card-body {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

/* Offcanvas custom width classes */
.offcanvas.oc-sm { --ins-offcanvas-width: 300px; }
.offcanvas.oc-md { --ins-offcanvas-width: 450px; }
.offcanvas.oc-lg { --ins-offcanvas-width: 650px; }
.offcanvas.oc-xl { --ins-offcanvas-width: 900px; }

/* ===== TOAST CONTAINER ===== */
#toast-container > div {
    border-radius: 10px;
    padding: 12px 14px 12px 14px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    font-size: 14px;
    line-height: 1.6;
    opacity: 1 !important;
}

/* ===== COMMON ===== */
#toast-container > div {
    flex-wrap: wrap;
}
/* container */
#toast-container > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* message ở giữa */
#toast-container .toast-message {
    order: 1;
    flex: 1;
}

/* close button nằm cuối */
#toast-container .toast-close-button {
    order: 2;
    position: static !important;
    margin-left: auto;
    font-size: 16px;
    opacity: 0.6;
}

/* progress luôn nằm dưới */
#toast-container .toast-progress {
    order: 3;
    width: 100%;
}
.toast-progress {
    order: 99;
    width: 100%;
}
.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    border-left: 4px solid;
}

    /* ===== ICON (Tabler) ===== */
    .toast:before {
        font-family: "tabler-icons";
        font-size: 18px;
        display: inline-block;
    }

/* ===== SUCCESS ===== */
#toast-container > .toast-success {
    background-color: #DCFCE7 !important;
    color: #166534 !important;
    border-left-color: #16A34A !important;
    background-image: none !important; /* override default bg gradient */
}

    #toast-container > .toast-success:before {
        content: "\ea5e"; /* ti-circle-check */
        color: #16A34A;
    }

/* ===== ERROR ===== */
#toast-container > .toast-error {
    background-color: #FEE2E2 !important;
    color: #991B1B !important;
    border-left-color: #DC2626 !important;
    background-image: none !important;
}

    #toast-container > .toast-error:before {
        content: "\ea6a"; /* ti-circle-x */
        color: #DC2626;
    }

/* ===== WARNING ===== */
#toast-container > .toast-warning {
    background-color: #FFF7ED !important;
    color: #9A3412 !important;
    border-left-color: #F97316 !important;
}

    #toast-container > .toast-warning:before {
        content: "\ea06"; /* ti-alert-triangle */
        color: #F97316;
    }

/* ===== INFO ===== */
#toast-container > .toast-info {
    background-color: #EFF6FF !important;
    color: #1E3A8A !important;
    border-left-color: #2563EB !important;
}

    #toast-container > .toast-info:before {
        content: "\ea0c"; /* ti-info-circle */
        color: #2563EB;
    }

/* ===== CLOSE BUTTON ===== */
#toast-container .toast-close-button {
    font-size: 0; /* hide text */
    position: static !important;
    margin-left: auto;
    opacity: 0.6;
    cursor: pointer;
}
    /* Add icon Tabler */
    #toast-container .toast-close-button::before {
        content: "\eb55"; /* ti-x */
        font-family: "tabler-icons";
        font-size: 18px;
        color: #000;
    }

    /* Hover */
    #toast-container .toast-close-button:hover {
        opacity: 1;
    }

/* ===== PROGRESS BAR ===== */
#toast-container .toast-progress {
    height: 3px;
    opacity: 0.8;
}

/* ===== HOVER PAUSE EFFECT ===== */
#toast-container > div:hover {
    box-shadow: 0 10px 26px rgba(0,0,0,0.12);
    transform: translateY(-1px);
    transition: all 0.2s ease;
}

/* ===== MOBILE OPTIMIZE ===== */
@media (max-width: 576px) {
    #toast-container > div {
        width: 90% !important;
        margin: 0 auto;
        right: 0 !important;
        left: 0 !important;
    }
}

.cursor-pointer {
    cursor: pointer;
}

.hover-perm:hover {
    background: #f5f7fa;
}

.permission-group .card-header {
    background: #fafbfc;
}

div:where(.swal2-container) {
    z-index: 1080;
}

.calendar-skeleton {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background: white;
    pointer-events: none;
    padding: 10px;
}

.skeleton-event {
    height: 40px;
    border-radius: 6px;
    margin-bottom: 8px;
    background: linear-gradient( 90deg, #eee 25%, #ddd 37%, #eee 63% );
    background-size: 400% 100%;
    animation: shimmer 1.2s infinite;
}

@keyframes shimmer {
    0% {
        background-position: 100% 0
    }

    100% {
        background-position: -100% 0
    }
}
.fc-custom-event {
    font-size: 12px;
    line-height: 1.3;
}

    .fc-custom-event .badge {
        display: inline-block;
        padding: 2px 6px;
        font-size: 11px;
        border-radius: 4px;
        color: #fff;
    }