:root {
    --app-bg: #f7f7fb;
    --surface: #ffffff;
    --surface-muted: #f2f5fb;
    --border: #e4e6ee;
    --text: #232323;
    --muted: #6f7380;
    --primary: #ff6666;
    --primary-dark: #ee5252;
    --success: #3bb77e;
    --danger: #e84b4b;
    --warning: #f4a340;
    --sidebar: #ffffff;
    --sidebar-muted: #747887;
    --mobi-blue: #6592e6;
    --mobi-violet: #7967e8;
    --mobi-coral: #ff6666;
    --mobi-shadow: 0 14px 40px rgba(35, 35, 35, .08);
}

body,
button,
input,
select,
textarea {
    font-family: "Inter Tight", Inter, "Segoe UI", Arial, sans-serif;
}

body {
    background:
        radial-gradient(circle at 92% 4%, rgba(101, 146, 230, .13), transparent 24rem),
        radial-gradient(circle at 12% 96%, rgba(255, 102, 102, .1), transparent 22rem),
        var(--app-bg);
    color: var(--text);
}

.app-shell,
.app-main {
    background: transparent;
}

/* Thanh điều hướng sáng, gọn và có điểm nhấn kiểu Mobirise. */
.app-sidebar {
    border-right: 1px solid rgba(35, 35, 35, .08);
    background: rgba(255, 255, 255, .96);
    color: var(--text);
    box-shadow: 8px 0 30px rgba(35, 35, 35, .04);
}

.sidebar-brand {
    border-bottom-color: var(--border);
}

.brand-mark {
    border-radius: 12px;
    background: linear-gradient(135deg, var(--mobi-coral), #ff8a66);
    color: #fff;
    box-shadow: 0 8px 20px rgba(255, 102, 102, .25);
}

.brand-title,
.sidebar-user-name {
    color: var(--text);
}

.brand-subtitle,
.sidebar-user-role {
    color: var(--sidebar-muted);
}

.sidebar-toggle {
    border-color: var(--border);
    border-radius: 999px;
    background: #f5f6fa;
    color: #4c5060;
}

.sidebar-toggle:hover,
.sidebar-toggle:focus {
    border-color: rgba(101, 146, 230, .35);
    background: #eaf1ff;
    color: #3f6fc8;
}

.sidebar-link {
    margin-bottom: .2rem;
    border-radius: 12px;
    color: #505463;
}

.sidebar-link:hover {
    background: #f1f4fa;
    color: var(--text);
    transform: translateX(2px);
}

.sidebar-link.active {
    background: linear-gradient(135deg, var(--mobi-coral), #ff826d);
    color: #fff;
    box-shadow: 0 9px 22px rgba(255, 102, 102, .22);
}

.nav-icon {
    border-radius: 9px;
    background: rgba(101, 146, 230, .13);
    color: #4777cf;
}

.sidebar-link.active .nav-icon {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

.sidebar-user {
    border-top-color: var(--border);
}

.topbar {
    border-bottom: 1px solid rgba(35, 35, 35, .07);
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 5px 24px rgba(35, 35, 35, .045);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/* Khối nội dung và card có khoảng thở, bo góc lớn. */
.app-content {
    padding: 1.25rem;
}

.card,
.modal-content,
.dropdown-menu,
.list-group,
.alert {
    border-color: rgba(35, 35, 35, .08);
    border-radius: 18px;
}

.card {
    overflow: hidden;
    box-shadow: var(--mobi-shadow) !important;
}

.card-header {
    padding: 1rem 1.2rem;
    background: #fff !important;
}

.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.modal-title {
    color: #171717;
    font-weight: 750;
    letter-spacing: -.02em;
}

.modal-content {
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(35, 35, 35, .2);
}

.modal-header,
.modal-footer {
    border-color: var(--border);
    background: #fff;
}

.dropdown-menu {
    padding: .55rem;
    box-shadow: 0 18px 55px rgba(35, 35, 35, .16);
}

.dropdown-item {
    border-radius: 10px;
    padding: .55rem .75rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: #f1f4fa;
}

/* Nút dạng viên thuốc, màu san hô và xanh dịu như trang tham chiếu. */
.btn {
    min-height: 38px;
    padding: .48rem 1rem;
    border-radius: 999px;
    font-weight: 700;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    border-color: var(--mobi-coral);
    background: var(--mobi-coral);
    box-shadow: 0 8px 20px rgba(255, 102, 102, .2);
}

.btn-primary:hover,
.btn-primary:focus {
    border-color: var(--primary-dark);
    background: var(--primary-dark);
    box-shadow: 0 10px 24px rgba(255, 102, 102, .28);
}

.btn-outline-primary {
    border-color: var(--mobi-blue);
    color: #4777cf;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    border-color: var(--mobi-blue);
    background: var(--mobi-blue);
    color: #fff;
}

.btn-secondary,
.btn-outline-secondary {
    border-color: #d8dbe4;
    background: #fff;
    color: #454957;
}

.btn-secondary:hover,
.btn-outline-secondary:hover {
    border-color: #c9d8f4;
    background: #edf3ff;
    color: #3f6fc8;
}

.btn-danger,
.btn-outline-danger:hover {
    border-color: var(--danger);
    background: var(--danger);
    color: #fff;
}

.btn-sm {
    min-height: 34px;
    padding: .36rem .78rem;
}

.btn-close {
    border-radius: 50%;
}

/* Trường nhập liệu mềm mại, focus xanh và giữ chiều cao chuẩn. */
.form-control,
.form-select {
    border-color: #dfe2ea;
    border-radius: 11px;
    background-color: #fff;
}

.form-control:hover,
.form-select:hover {
    border-color: #c8d3e7;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--mobi-blue);
    box-shadow: 0 0 0 .22rem rgba(101, 146, 230, .16);
}

.form-check-input:checked {
    border-color: var(--mobi-blue);
    background-color: var(--mobi-blue);
}

/* Chuẩn hóa kích thước công tắc trên toàn hệ thống. */
.form-check.form-switch {
    min-height: 1.65rem;
    padding-left: 3.65rem;
}

.form-switch .form-check-input {
    width: 3rem !important;
    height: 1.65rem !important;
    margin-left: -3.65rem !important;
    border-width: 1px;
    cursor: pointer;
}

.form-switch .form-check-label {
    min-height: 1.65rem;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.form-label {
    color: #454957;
    font-weight: 700;
}

/* Bảng dữ liệu rõ ràng nhưng nhẹ hơn. */
.table {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: rgba(101, 146, 230, .055);
    color: var(--text);
}

.table thead th,
table thead th {
    border-bottom-color: #dfe3ec;
    background: #eef3fc;
    color: #4b5770;
    font-size: .74rem;
    font-weight: 400 !important;
    letter-spacing: normal;
    text-transform: none !important;
}

.table tbody td {
    border-color: #eceef3;
}

.table-hover tbody tr:hover {
    background: rgba(101, 146, 230, .055);
}

.badge {
    padding: .4em .68em;
    border-radius: 999px;
}

.nav-tabs {
    gap: .35rem;
    border-bottom: 0;
}

.nav-tabs .nav-link {
    border: 0;
    border-radius: 999px;
    background: #eef1f6;
    color: #555a68;
}

.nav-tabs .nav-link:hover {
    background: #e7edfa;
    color: #3f6fc8;
}

.nav-tabs .nav-link.active {
    background: var(--mobi-blue);
    color: #fff;
    box-shadow: 0 7px 18px rgba(101, 146, 230, .22);
}

.pagination .page-link {
    margin: 0 .12rem;
    border-color: var(--border);
    border-radius: 999px !important;
    color: #4777cf;
}

.pagination .active > .page-link {
    border-color: var(--mobi-blue);
    background: var(--mobi-blue);
}

.app-toast {
    box-shadow: 0 18px 45px rgba(35, 35, 35, .16);
}

/* Màu nút gradient tím–hồng theo mẫu; giữ nút xóa/cảnh báo màu đỏ. */
.btn:not(.btn-danger):not(.btn-outline-danger):not(.btn-close):not(.btn-link) {
    border-color: #6332ff;
    background-color: #6332ff;
    background-image: linear-gradient(100deg, #5532ff 0%, #9627ff 48%, #f000da 100%);
    color: #fff;
    box-shadow: 0 8px 20px rgba(128, 39, 255, .2);
}

.btn:not(.btn-danger):not(.btn-outline-danger):not(.btn-close):not(.btn-link):hover,
.btn:not(.btn-danger):not(.btn-outline-danger):not(.btn-close):not(.btn-link):focus,
.btn:not(.btn-danger):not(.btn-outline-danger):not(.btn-close):not(.btn-link):focus-visible {
    border-color: #4c28e8;
    background-color: #4c28e8;
    background-image: linear-gradient(100deg, #4826ec 0%, #8420ee 48%, #d900c5 100%);
    color: #fff;
    box-shadow: 0 10px 26px rgba(128, 39, 255, .3);
}

.btn:not(.btn-danger):not(.btn-outline-danger):not(.btn-close):not(.btn-link):disabled,
.btn:not(.btn-danger):not(.btn-outline-danger):not(.btn-close):not(.btn-link).disabled {
    border-color: #b9a8ef;
    background-image: linear-gradient(100deg, #9585d9, #d98bd2);
    color: #fff;
    opacity: .65;
}

@media (max-width: 991.98px) {
    .app-sidebar {
        box-shadow: 16px 0 45px rgba(35, 35, 35, .16);
    }

    .app-content {
        padding: .75rem;
    }

    .card,
    .modal-content,
    .dropdown-menu {
        border-radius: 15px;
    }
}

@media (max-width: 575.98px) {
    .app-content {
        padding: .5rem;
    }

    .card-header,
    .card-body {
        padding-right: .85rem;
        padding-left: .85rem;
    }

    .btn:not(.btn-close) {
        min-height: 40px;
    }

    .modal:not(.shared-file-preview-modal) .modal-dialog {
        margin: .5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn,
    .sidebar-link {
        transition: none;
    }
}