.department-page {
    font-size: 1rem;
}
    /* Breadcrumb: tông slate / brand, dễ đọc. */
    .department-page .dept-breadcrumb-nav,
    .department-page .crm-breadcrumb-nav {
        padding: 0.35rem 0;
    }

    .department-page .dept-breadcrumb,
    .department-page .crm-breadcrumb {
        background: transparent;
        padding: 0;
        margin: 0;
        align-items: center;
    }

        .department-page .dept-breadcrumb .breadcrumb-item,
        .department-page .crm-breadcrumb .breadcrumb-item {
            font-size: 0.9rem;
        }

            .department-page .dept-breadcrumb .breadcrumb-item a,
            .department-page .crm-breadcrumb .breadcrumb-item a {
                color: #4a6fa5;
                text-decoration: none;
                font-weight: 500;
            }

                .department-page .dept-breadcrumb .breadcrumb-item a:hover,
                .department-page .crm-breadcrumb .breadcrumb-item a:hover {
                    color: #0f4c81;
                    text-decoration: underline;
                }

            .department-page .dept-breadcrumb .breadcrumb-item.active,
            .department-page .crm-breadcrumb .breadcrumb-item.active {
                color: #64748b;
                font-weight: 500;
            }

            .department-page .dept-breadcrumb .breadcrumb-item + .breadcrumb-item::before,
            .department-page .crm-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
                color: #cbd5e1;
                font-weight: 400;
            }

    .department-page .dept-page-title,
    .department-page .crm-page-heading {
        font-size: 1.25rem;
        font-weight: 600;
        color: #0f172a;
        letter-spacing: -0.01em;
    }

    .department-page .resizable-table {
        table-layout: fixed;
    }

    .department-page .dept-table-panel,
    .department-page .crm-table-panel {
        border: 1px solid #e5eaf1;
        border-radius: 0;
        overflow: visible;
        background: #fff;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    }

    .department-page .dept-table-toolbar,
    .department-page .crm-table-toolbar {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        background-color: #f8f9fa;
        border-bottom: 1px solid #e8edf4;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        position: relative;
        /* Không dùng z-index > modal Bootstrap (1055) — sẽ đè lên dialog chỉnh sửa. */
    }

    .department-page .dept-table-panel > .table-responsive,
    .department-page .crm-table-panel > .table-responsive {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        overflow-x: auto;
    }

    .department-page .dept-toolbar-btn,
    .department-page .crm-toolbar-btn {
        width: 2rem;
        height: 2rem;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        background-color: #fff !important;
        border: 1px solid #ced4da !important;
        color: #495057 !important;
        border-radius: 0 !important;
    }

        .department-page .dept-toolbar-btn:hover,
        .department-page .crm-toolbar-btn:hover {
            background-color: #f8f9fa !important;
            border-color: #adb5bd !important;
            color: #212529 !important;
        }

    .department-page .dept-toolbar-meta,
    .department-page .crm-toolbar-meta {
        font-size: 1rem;
        color: #343a40;
        font-weight: 400;
        line-height: 1.4;
    }

    .department-page .resizable-table thead th {
        padding: 0.9rem 0.75rem;
        font-weight: 700;
        font-size: 0.97rem;
        line-height: 1.25;
        letter-spacing: 0.01em;
        color: #1f2937;
        background-color: #f3f6fa;
        border-bottom: 1px solid #d7e0ea;
        border-top: none;
        vertical-align: middle;
    }

    .department-page .dept-table-panel .resizable-table tbody td,
    .department-page .crm-table-panel .resizable-table tbody td {
        padding: 0.45rem 0.75rem;
        font-weight: 400;
        font-size: 1rem;
        color: #495057;
        border-bottom: 1px solid #edf1f5;
        vertical-align: middle;
    }

    .department-page .dept-table-panel .resizable-table tbody tr:last-child td,
    .department-page .crm-table-panel .resizable-table tbody tr:last-child td {
        border-bottom: none;
    }

    .department-page .dept-table-panel .table-striped > tbody > tr:nth-of-type(odd) > *,
    .department-page .crm-table-panel .table-striped > tbody > tr:nth-of-type(odd) > * {
        --bs-table-accent-bg: #f8f9fa;
        color: #495057;
    }

    .department-page .dept-table-panel .table-striped > tbody > tr:nth-of-type(even) > *,
    .department-page .crm-table-panel .table-striped > tbody > tr:nth-of-type(even) > * {
        --bs-table-bg: #fff;
        color: #495057;
    }

    .department-page td[data-col="isActive"] .badge {
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0;
        padding: 0 !important;
    }

    .department-page .dept-badge-active,
    .department-page .crm-badge-active {
        color: #157347 !important;
        font-weight: 600;
        font-size: 0.875rem;
    }

    .department-page .dept-badge-inactive,
    .department-page .crm-badge-inactive {
        color: #dc3545 !important;
        font-weight: 600;
        font-size: 0.875rem;
    }

    .department-page .resizable-table th,
    .department-page .resizable-table td {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        position: relative;
    }

    .department-page .resizable-table .col-resizer {
        position: absolute;
        top: 0;
        right: 0;
        width: 8px;
        height: 100%;
        cursor: col-resize;
        user-select: none;
        background: transparent;
        transition: background-color 0.15s ease;
    }

        .department-page .resizable-table .col-resizer:hover,
        .department-page .resizable-table thead th:hover .col-resizer {
            background: rgba(15, 76, 129, 0.18);
            box-shadow: inset -1px 0 0 rgba(15, 76, 129, 0.5);
        }

    .department-page .column-config-panel {
        max-height: 320px;
        overflow: auto;
    }

    .department-page .stt-col {
        width: 56px !important;
        text-align: center;
    }

    .department-page td.stt-col {
        text-align: center;
        font-variant-numeric: tabular-nums;
    }

    .department-page .dept-table-panel .resizable-table tbody tr,
    .department-page .crm-table-panel .resizable-table tbody tr {
        cursor: pointer;
    }
    /* Nút toolbar trang (Thêm mới, Lọc, Xóa lọc): gọn, tông nhã. */
    .department-page .dept-toolbar-act,
    .department-page .crm-toolbar-act {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        font-size: 0.875rem;
        font-weight: 600;
        line-height: 1.25;
        padding: 0.38rem 0.8rem;
        border-radius: 0 !important;
        text-decoration: none;
        border: 1px solid transparent;
        transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    }

        .department-page .dept-toolbar-act i,
        .department-page .crm-toolbar-act i {
            font-size: 0.95rem;
            opacity: 0.92;
        }

    .department-page .dept-toolbar-act--create,
    .department-page .crm-toolbar-act--create {
        color: #1f5f40;
        background: #ecf8f1;
        border-color: #c5e5d4;
    }

        .department-page .dept-toolbar-act--create:hover,
        .department-page .crm-toolbar-act--create:hover {
            color: #174530;
            background: #dff4e8;
            border-color: #a8d9bf;
        }

    .department-page .dept-toolbar-act--filter,
    .department-page .crm-toolbar-act--filter {
        color: #3d5f80;
        background: #eef4fb;
        border-color: #c9daf0;
    }

        .department-page .dept-toolbar-act--filter:hover,
        .department-page .crm-toolbar-act--filter:hover {
            color: #2d4a66;
            background: #e2ebf7;
            border-color: #b3c9e8;
        }

    .department-page .dept-toolbar-act--reset,
    .department-page .crm-toolbar-act--reset {
        color: #64748b;
        background: #fff;
        border-color: #e2e8f0;
    }

        .department-page .dept-toolbar-act--reset:hover,
        .department-page .crm-toolbar-act--reset:hover {
            color: #475569;
            background: #f8fafc;
            border-color: #cbd5e1;
        }
    /* Nút thao tác bảng: Sửa / Tắt / Bật */
    .department-page .dept-action-group,
    .department-page .crm-action-group {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.45rem;
        flex-wrap: wrap;
    }

    .department-page .dept-action-btn,
    .department-page .crm-action-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        font-size: 0.845rem;
        font-weight: 600;
        line-height: 1;
        width: 2.1rem;
        height: 2.1rem;
        padding: 0;
        border-radius: 0 !important;
        border: 1px solid transparent;
        transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }

        .department-page .dept-action-btn i,
        .department-page .crm-action-btn i {
            font-size: 1rem;
            opacity: 0.95;
        }

    .department-page .dept-action-btn--edit,
    .department-page .crm-action-btn--edit {
        color: #7694b7;
        background: #fcfdff;
        border-color: #e7edf6;
    }

        .department-page .dept-action-btn--edit:hover,
        .department-page .crm-action-btn--edit:hover {
            color: #56789e;
            background: #f6f9ff;
            border-color: #d8e3f1;
        }

    .department-page .dept-action-btn--off,
    .department-page .crm-action-btn--off {
        color: #a16207;
        background: #fffbeb;
        border-color: #fde68a;
    }

        .department-page .dept-action-btn--off:hover,
        .department-page .crm-action-btn--off:hover {
            color: #854d0e;
            background: #fef3c7;
            border-color: #fcd34d;
        }

    .department-page .dept-action-btn--on,
    .department-page .crm-action-btn--on {
        color: #1d6f42;
        background: #f0fdf4;
        border-color: #bbf7d0;
    }

        .department-page .dept-action-btn--on:hover,
        .department-page .crm-action-btn--on:hover {
            color: #14532d;
            background: #dcfce7;
            border-color: #86efac;
        }

    .department-page .dept-action-btn--delete,
    .department-page .crm-action-btn--delete {
        color: #b4535a;
        background: #fff7f7;
        border-color: #f3d9dc;
    }

        .department-page .dept-action-btn--delete:hover,
        .department-page .crm-action-btn--delete:hover {
            color: #943943;
            background: #ffeef0;
            border-color: #e8b9bf;
        }
    /* Modal catalog (sửa / thêm): kéo header, chung style nút & radio. */
    .department-page .modal .modal-header {
        cursor: grab;
        user-select: none;
        touch-action: none;
    }

    .department-page .modal.department-modal--dragging .modal-header {
        cursor: grabbing;
    }

    .department-page .modal.department-modal--dragging {
        user-select: none;
    }

    .department-page .modal .modal-header .btn-close {
        cursor: pointer;
    }

    .department-page .modal .dept-status-radios,
    .department-page .modal .crm-status-radios {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 1.75rem;
        row-gap: 0.5rem;
    }
        /* Shared modal styling for all catalog modules (Department/Team/.../CareChannel) */
        .department-page .modal .dept-status-radios .form-check,
        .department-page .modal .dept-status-radios .form-check-input,
        .department-page .modal .dept-status-radios .form-check-label,
        .department-page .modal .crm-status-radios .form-check,
        .department-page .modal .crm-status-radios .form-check-input,
        .department-page .modal .crm-status-radios .form-check-label {
            cursor: pointer;
        }

    .department-page .modal .dept-edit-modal-footer,
    :is(.department-page .modal, .short-term-care-modal, .crm-assign-modal) .crm-modal-form__footer.modal-footer {
        border-top: 1px solid #e7ebf3;
        background: #f8fafc;
        padding: 0.5rem;
        gap: 0.25rem;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .department-page .modal .dept-edit-modal-btn,
    :is(.department-page .modal, .short-term-care-modal, .crm-assign-modal, .short-term-student-detail-page .short-term-detail-care-entry, .short-term-student-detail-page .short-term-detail-right-card__form) .crm-modal-btn {
        min-width: 7.5rem;
        font-weight: 600;
        font-size: 0.875rem;
        padding: 0.5rem 1.15rem;
        border-radius: 0 !important;
        transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    }

    .department-page .modal .dept-edit-modal-btn--save-more,
    .department-page .modal .crm-modal-btn--save-more,
    :is(.short-term-care-modal, .crm-assign-modal, .short-term-student-detail-page .short-term-detail-care-entry, .short-term-student-detail-page .short-term-detail-right-card__form) .crm-modal-btn--save-more {
        min-width: auto;
        color: #0f4c81;
        background: #fff;
        border: 1px solid #0f4c81;
    }

        .department-page .modal .dept-edit-modal-btn--save-more:hover,
        .department-page .modal .crm-modal-btn--save-more:hover,
        .short-term-care-modal .crm-modal-btn--save-more:hover {
            background: #f0f6fb;
            color: #0c3d68;
            border-color: #0c3d68;
        }

        .department-page .modal .dept-edit-modal-btn--save-more:focus-visible,
        .department-page .modal .crm-modal-btn--save-more:focus-visible,
        .short-term-care-modal .crm-modal-btn--save-more:focus-visible {
            box-shadow: 0 0 0 0.2rem rgba(15, 76, 129, 0.3);
        }

    .department-page .modal .dept-edit-modal-btn--cancel,
    .department-page .modal .crm-modal-btn--cancel,
    :is(.short-term-care-modal, .crm-assign-modal, .short-term-student-detail-page .short-term-detail-care-entry, .short-term-student-detail-page .short-term-detail-right-card__form) .crm-modal-btn--cancel {
        color: #2f5f85;
        background: #edf6ff;
        border: 1px solid #c8ddf1;
    }

        .department-page .modal .dept-edit-modal-btn--cancel:hover,
        .department-page .modal .crm-modal-btn--cancel:hover,
        .short-term-care-modal .crm-modal-btn--cancel:hover {
            background: #e2f0fc;
            border-color: #aecdeb;
            color: #244c6a;
        }

        .department-page .modal .dept-edit-modal-btn--cancel:focus-visible,
        .department-page .modal .crm-modal-btn--cancel:focus-visible,
        .short-term-care-modal .crm-modal-btn--cancel:focus-visible {
            box-shadow: 0 0 0 0.2rem rgba(115, 170, 220, 0.35);
            color: #244c6a;
        }

    .department-page .modal .dept-edit-modal-btn--save,
    .department-page .modal .crm-modal-btn--save,
    :is(.short-term-care-modal, .crm-assign-modal, .short-term-student-detail-page .short-term-detail-care-entry, .short-term-student-detail-page .short-term-detail-right-card__form) .crm-modal-btn--save {
        color: #7a4500;
        background: #fff1dd;
        border: 1px solid #f2cf9e;
    }

        .department-page .modal .dept-edit-modal-btn--save:hover,
        .department-page .modal .crm-modal-btn--save:hover,
        .short-term-care-modal .crm-modal-btn--save:hover {
            background: #ffe8c7;
            border-color: #e8bc80;
            color: #683a00;
        }

        .department-page .modal .dept-edit-modal-btn--save:focus-visible,
        .department-page .modal .crm-modal-btn--save:focus-visible,
        .short-term-care-modal .crm-modal-btn--save:focus-visible {
            box-shadow: 0 0 0 0.2rem rgba(242, 196, 126, 0.4);
            color: #683a00;
        }

    .department-page .modal .dept-create-modal-alert,
    .department-page .modal .crm-modal-alert {
        font-size: 0.875rem;
    }

    /*
 * Thông báo lỗi field (validation) — danh mục dùng chung.
 * Dùng với span.dept-field-error / span.crm-field-error (thường kèm .small.text-danger).
 */
    .department-page .crm-field-error,
    .department-page .dept-field-error {
        color: var(--bs-danger, #dc3545);
        font-style: italic;
        font-weight: 400;
        line-height: 1.35;
    }

    .department-page .modal .dept-field-error,
    .department-page .modal .crm-field-error {
        display: block;
        min-height: 1.1rem;
    }
/* Dialog có nút xác nhận (vd. sau Lưu thông tin) — chữ tiêu đề cùng tông với modal Bootstrap (.modal-title h5 / .crm-page-heading). */
.swal2-popup.swal2-popup-catalog-modal {
    padding: 1rem 1rem 0.85rem;
    width: 22rem !important;
    max-width: min(22rem, calc(100vw - 2rem));
    font-family: inherit;
}

    .swal2-popup.swal2-popup-catalog-modal .swal2-title {
        font-size: 1.25rem;
        font-weight: 600;
        line-height: 1.4;
        color: #0f172a;
        letter-spacing: -0.01em;
        padding: 0.35rem 0.75rem 0.15rem;
        margin: 0;
    }

    .swal2-popup.swal2-popup-catalog-modal .swal2-html-container {
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #334155;
        padding: 0.15rem 0.75rem 0;
    }

    .swal2-popup.swal2-popup-catalog-modal .swal2-actions {
        margin-top: 0.65rem;
    }

    .swal2-popup.swal2-popup-catalog-modal .swal2-icon {
        margin: 0.35rem auto 0.15rem;
        width: 3.25rem;
        height: 3.25rem;
    }

    .swal2-popup.swal2-popup-catalog-modal .swal2-icon-content {
        font-size: 1.65rem;
    }

.swal2-popup.swal2-popup-sm {
    padding: 0.85rem 0.95rem 0.95rem;
}

.swal2-title.swal2-title-sm {
    font-size: 1.05rem;
    margin-bottom: 0.25rem;
}

.swal2-html-container.swal2-text-sm {
    font-size: 0.9rem;
    margin: 0.35rem 0 0.2rem;
}

.swal2-actions .swal2-btn-sm {
    font-size: 0.82rem;
    padding: 0.34rem 0.75rem;
    border-radius: 0 !important;
}

/* Role permission matrix (admin/roles/.../permissions) */
.department-page .role-perm-matrix .accordion-button {
    font-weight: 600;
    font-size: 0.95rem;
}

.department-page .role-perm-matrix .role-perm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.35rem 1rem;
}

.department-page .role-perm-matrix .form-check {
    margin-bottom: 0;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

.department-page .role-perm-matrix .form-check-input:checked + .form-check-label {
    font-weight: 600;
}

.department-page .role-perm-matrix .form-check-label {
    font-size: 0.875rem;
}

.department-page .role-perm-matrix .perm-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.78rem;
    color: #64748b;
}