/* Custom styles for Hero English CRM */

/* Logo styling */
.app-brand-logo img {
    object-fit: contain;
    display: block;
}

.navbar-brand img {
    object-fit: contain;
}

/* Menu brand logo styling */
.app-brand.demo {
    padding: 1.25rem 2rem;
    min-height: 5rem;
    display: flex;
    align-items: center;
}

.app-brand-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

.app-brand-logo.demo {
    display: flex;
    align-items: center;
    width: 100%;
}

.app-brand-logo.demo img {
    margin: 0 auto;
}

/* Dashboard cards */
.card-header {
    padding-bottom: 0.65rem;
}

/* Pagination - Make buttons square instead of round */
.pagination .page-link {
    border-radius: 0.375rem !important; /* Square corners instead of 50% */
}

.pagination-lg .page-link {
    border-radius: 0.375rem !important;
}

.pagination-sm .page-link {
    border-radius: 0.25rem !important;
}

/* Menu fixes - Disable animation for submenu items to prevent jerky behavior */
.menu-sub .menu-item {
    transition: none !important;
}

.menu-sub .menu-item .menu-link {
    transition: none !important;
}

.menu-sub .menu-item.active .menu-link {
    transition: none !important;
}

/* Disable animation for menu toggle to prevent jerky behavior */
.menu-toggle {
    transition: none !important;
}

.menu-toggle::after {
    transition: none !important;
}

/* Ensure smooth menu item highlighting without animation */
.menu-item.active .menu-link {
    transition: none !important;
}

/* Dark mode pagination overrides */
[data-bs-theme="dark"] .pagination .page-link {
    border-radius: 0.375rem !important;
}

[data-bs-theme="dark"] .pagination-lg .page-link {
    border-radius: 0.375rem !important;
}

[data-bs-theme="dark"] .pagination-sm .page-link {
    border-radius: 0.25rem !important;
}

/* Custom avatar colors */
.bg-label-primary {
    background-color: #e7e7ff !important;
    color: #696cff !important;
}

.bg-label-success {
    background-color: #e8fadf !important;
    color: #71dd37 !important;
}

.bg-label-info {
    background-color: #d7f5fc !important;
    color: #03c3ec !important;
}

.bg-label-warning {
    background-color: #fff5e0 !important;
    color: #ffab00 !important;
}

.bg-label-danger {
    background-color: #ffe0db !important;
    color: #ff3e1d !important;
}

/* Student Status Colors - Fixed Colors */
.bg-label-new {
    background-color: #f3e8ff !important;
    color: #9333ea !important;
}

.bg-label-potential {
    background-color: #dbeafe !important;
    color: #2563eb !important;
}

.bg-label-trial {
    background-color: #dcfce7 !important;
    color: #16a34a !important;
}

.bg-label-waiting {
    background-color: #fef3c7 !important;
    color: #d97706 !important;
}

.bg-label-studying {
    background-color: #dcfce7 !important;
    color: #16a34a !important;
}

.bg-label-paused {
    background-color: #fee2e2 !important;
    color: #dc2626 !important;
}

.bg-label-completed {
    background-color: #dcfce7 !important;
    color: #16a34a !important;
}

.bg-label-dropped {
    background-color: #fee2e2 !important;
    color: #dc2626 !important;
}

.bg-label-caring {
    background-color: #dbeafe !important;
    color: #2563eb !important;
}

/* Vietnamese language specific font styles */
body {
    font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

/* Login page styling */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #f4f5fb;
}

.login-container {
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
}

.login-box {
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 2px 6px rgba(105, 108, 255, 0.18);
    padding: 2rem;
}

.login-logo {
    text-align: center;
    margin-bottom: 2rem;
}

.login-logo img {
    height: 60px;
    margin-bottom: 1rem;
}

/* Custom card shadows */
.card {
    box-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);
}

/* Dark Mode Styles (force priority) */
body.dark-mode {
    background-color: #282c34 !important;
    color: #e4e6eb !important;
}

/* Dark mode - Cards */
body.dark-mode .card {
    background-color: #1e2228 !important;
    border-color: #3a3f48 !important;
}

body.dark-mode .card-header {
    background-color: #1e2228 !important;
    border-bottom-color: #3a3f48 !important;
}

/* Dark mode - Tables */
body.dark-mode .table {
    color: #e4e6eb !important;
}

body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #282c34 !important;
}

body.dark-mode .table-hover tbody tr:hover {
    background-color: #2c3038 !important;
}

/* Dark mode - Forms */
body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: #1e2228 !important;
    border-color: #3a3f48 !important;
    color: #e4e6eb !important;
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
    background-color: #1e2228 !important;
    border-color: #4a4f58 !important;
    color: #e4e6eb !important;
}

/* Dark mode - Buttons */
body.dark-mode .btn-primary {
    background-color: #3a3f48 !important;
    border-color: #4a4f58 !important;
}

body.dark-mode .btn-primary:hover {
    background-color: #4a4f58 !important;
    border-color: #5a5f68 !important;
}

body.dark-mode .btn-outline-primary {
    color: #e4e6eb !important;
    border-color: #4a4f58 !important;
}

body.dark-mode .btn-outline-primary:hover {
    background-color: #4a4f58 !important;
    border-color: #5a5f68 !important;
}

/* Dark mode - Badges */
body.dark-mode .bg-label-primary {
    background-color: #2c3038 !important;
    color: #e4e6eb !important;
}

body.dark-mode .bg-label-success {
    background-color: #1e3a2f !important;
    color: #71dd37 !important;
}

body.dark-mode .bg-label-info {
    background-color: #1e2a3a !important;
    color: #03c3ec !important;
}

body.dark-mode .bg-label-warning {
    background-color: #3a2f1e !important;
    color: #ffab00 !important;
}

body.dark-mode .bg-label-danger {
    background-color: #3a1e1e !important;
    color: #ff3e1d !important;
}

/* Dark mode - Student Status Colors */
body.dark-mode .bg-label-new {
    background-color: #2a1e3a !important;
    color: #c084fc !important;
}

body.dark-mode .bg-label-potential {
    background-color: #1e2a3a !important;
    color: #60a5fa !important;
}

body.dark-mode .bg-label-trial {
    background-color: #1e3a2f !important;
    color: #4ade80 !important;
}

body.dark-mode .bg-label-waiting {
    background-color: #3a2f1e !important;
    color: #fbbf24 !important;
}

body.dark-mode .bg-label-studying {
    background-color: #1e3a2f !important;
    color: #4ade80 !important;
}

body.dark-mode .bg-label-paused {
    background-color: #3a1e1e !important;
    color: #f87171 !important;
}

body.dark-mode .bg-label-completed {
    background-color: #1e3a2f !important;
    color: #4ade80 !important;
}

body.dark-mode .bg-label-dropped {
    background-color: #3a1e1e !important;
    color: #f87171 !important;
}

body.dark-mode .bg-label-caring {
    background-color: #1e2a3a !important;
    color: #60a5fa !important;
}

/* Dark mode - Navbar */
body.dark-mode .navbar {
    background-color: #1e2228 !important;
    border-color: #3a3f48 !important;
}

body.dark-mode .navbar .nav-link {
    color: #e4e6eb !important;
}

/* Dark mode - Menu */
body.dark-mode .layout-menu {
    background-color: #1e2228 !important;
    border-color: #3a3f48 !important;
}

body.dark-mode .menu-item {
    color: #e4e6eb !important;
}

body.dark-mode .menu-item:hover {
    background-color: #2c3038 !important;
}

body.dark-mode .menu-item.active {
    background-color: #3a3f48 !important;
}

/* Dark mode - Footer */
body.dark-mode .footer {
    background-color: #1e2228 !important;
    border-color: #3a3f48 !important;
    color: #e4e6eb !important;
}

/* Dark mode - Modal */
body.dark-mode .modal-content {
    background-color: #1e2228 !important;
    border-color: #3a3f48 !important;
}

body.dark-mode .modal-header {
    border-bottom-color: #3a3f48 !important;
}

body.dark-mode .modal-footer {
    border-top-color: #3a3f48 !important;
}

/* Dark mode - Dropdown */
body.dark-mode .dropdown-menu {
    background-color: #1e2228 !important;
    border-color: #3a3f48 !important;
}

body.dark-mode .dropdown-item {
    color: #e4e6eb !important;
}

body.dark-mode .dropdown-item:hover {
    background-color: #2c3038 !important;
}

/* Dark mode - Pagination */
body.dark-mode .page-link {
    background-color: #1e2228 !important;
    border-color: #3a3f48 !important;
    color: #e4e6eb !important;
}

body.dark-mode .page-item.active .page-link {
    background-color: #3a3f48 !important;
    border-color: #4a4f58 !important;
}

/* Dark mode - Custom scrollbar */
body.dark-mode ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body.dark-mode ::-webkit-scrollbar-track {
    background: #1e2228 !important;
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: #3a3f48 !important;
    border-radius: 4px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #4a4f58 !important;
}

/* Điều chỉnh khoảng cách giữa menu và nội dung chính về 4rem */
.layout-page {
    padding-left: 16.25rem !important;
    transition: padding-left 0.3s;
}
@media (max-width: 1199.98px) {
    .layout-page {
        padding-left: 0 !important;
    }
}

/* Chỉ hiện nút đóng menu khi màn hình <= 1818px */
.close-menu-btn-responsive {
    display: none !important;
    margin-left: 1rem !important;
}
@media (max-width: 1818px) {
    .close-menu-btn-responsive {
        display: block !important;
    }
}

/* Ẩn menu khi có class menu-hidden */
#layout-menu.menu-hidden {
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
    position: absolute;
    z-index: 1050;
}
.layout-menu + .layout-page {
    transition: padding-left 0.3s cubic-bezier(0.4,0,0.2,1);
}
#layout-menu.menu-hidden ~ .layout-page {
    padding-left: 0 !important;
}

@media (max-width: 991.98px) {
    #layout-menu.menu-hidden {
        left: 0;
    }
    .layout-menu + .layout-page,
    #layout-menu.menu-hidden ~ .layout-page {
        padding-left: 0 !important;
    }
}

.container-xxl.flex-grow-1.container-p-y > *,
.container-xxl.flex-grow-1.container-p-y .card,
.container-xxl.flex-grow-1.container-p-y .card-body {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
    /* Đã loại bỏ padding-left và padding-right để không override padding 1rem !important của card/card-body */
}

.container-xxl.flex-grow-1.container-p-y > .container-xxl.flex-grow-1.container-p-y > * {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    overflow-x: auto;
}

/* Đảm bảo vùng nội dung luôn cách menu trái đúng bằng chiều rộng menu (16.25rem ~ 260px) */
.layout-page {
    padding-left: 16.25rem !important;
    transition: padding-left 0.3s;
}
@media (max-width: 1199.98px) {
    .layout-page {
        padding-left: 0 !important;
    }
}

/* Card nội dung chỉ mở rộng về bên phải, không bị menu che */
.container-xxl.flex-grow-1.container-p-y {
    max-width: 98vw !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
}

.container-xxl.flex-grow-1.container-p-y > * {
    width: 100% !important;
    max-width: 100% !important;
}

/* Card Tìm kiếm (card.mb-4 đầu tiên) luôn full width như card nội dung bên dưới */
.container-xxl.flex-grow-1.container-p-y > .card.mb-4:first-of-type {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block !important;
    float: none !important;
    clear: both !important;
    flex: 0 0 100% !important;
}

/* Đảm bảo navbar/card Tìm kiếm full width vùng nội dung, thẳng hàng với card bên dưới */
nav.layout-navbar.navbar-detached.container-xxl {
    max-width: 95.5% !important;
    width: 95.5% !important;
    margin-left: 2.3rem !important;
    margin-right: 0 !important;
}
@media (max-width: 1199.98px) {
    nav.layout-navbar.navbar-detached.container-xxl {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}
@media (max-width: 575.98px) {
    nav.layout-navbar.navbar-detached.container-xxl {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}

/* Đảm bảo mọi thành phần con trực tiếp của card đều có padding trái/phải 1rem */
.card > *,
.card-body,
.card-header,
.card-footer {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

/* Nếu có card lồng card, loại bỏ padding lồng nhau */
.card .card {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Override các utility class p-0, px-0 khi nằm trong card-body, card-header, card-footer */
.card-body .p-0,
.card-header .p-0,
.card-footer .p-0,
.card-body .px-0,
.card-header .px-0,
.card-footer .px-0 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

/* Đảm bảo ul, ol, table, ... trong card-body không bị mất padding */
.card-body ul,
.card-body ol,
.card-body table,
.card-body dl {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.layout-navbar .navbar-nav-right {
    flex-basis: 10%;
}

/* Currency Display Styling */
.currency-display {
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 0.25rem;
    font-weight: 500;
    padding: 0.25rem 0;
    border-radius: 0.25rem;
    background-color: #f8f9fa;
    padding-left: 0.5rem;
    border-left: 3px solid #0d6efd;
}

/* Dark mode support for currency display */
body.dark-mode .currency-display {
    background-color: #2b2b2b;
    color: #adb5bd;
    border-left-color: #0d6efd;
}

/* Currency input container styling */
.currency-input-container {
    position: relative;
}

.currency-input-container .currency-display {
    position: absolute;
    top: -1.5rem;
    left: 0;
    z-index: 10;
    background-color: #fff;
    border: 1px solid #dee2e6;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

body.dark-mode .currency-input-container .currency-display {
    background-color: #2b2b2b;
    border-color: #495057;
    color: #adb5bd;
}