:root {
    --mac-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", sans-serif;
    --mac-bg: #f5f5f7;
    --mac-surface: rgba(255, 255, 255, 0.78);
    --mac-surface-solid: #ffffff;
    --mac-surface-soft: rgba(255, 255, 255, 0.58);
    --mac-border: rgba(60, 60, 67, 0.16);
    --mac-border-strong: rgba(60, 60, 67, 0.28);
    --mac-text: #1d1d1f;
    --mac-muted: #6e6e73;
    --mac-blue: #007aff;
    --mac-blue-dark: #005ecb;
    --mac-green: #34c759;
    --mac-red: #ff3b30;
    --mac-yellow: #ffcc00;
    --mac-radius: 18px;
    --mac-shadow: 0 18px 48px rgba(0, 0, 0, 0.08);
    --mac-shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.06);
}

html,
body {
    font-family: var(--mac-font);
    color: var(--mac-text);
    background:
        radial-gradient(circle at 12% 0%, rgba(0, 122, 255, 0.13), transparent 28rem),
        radial-gradient(circle at 88% 10%, rgba(255, 45, 85, 0.09), transparent 24rem),
        linear-gradient(180deg, #fbfbfd 0%, var(--mac-bg) 42%, #ececf1 100%);
    min-height: 100%;
    letter-spacing: 0;
}

body,
#app {
    min-height: 100vh;
}

a {
    color: var(--mac-blue);
}

a:hover {
    color: var(--mac-blue-dark);
}

#app,
#main,
#main-content,
.page-heading,
.page-content,
.content-wrapper {
    background: transparent;
}

#main {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    padding-top: 1.25rem;
}

#main-content {
    display: flex;
    min-height: calc(100vh - 1.25rem);
    flex: 1 0 auto;
    flex-direction: column;
}

#main-content > .page-heading,
#main.layout-horizontal > .content-wrapper {
    flex: 1 0 auto;
}

.layout-horizontal #main {
    min-height: 100vh;
    padding-top: 0;
}

.layout-horizontal .content-wrapper {
    flex: 1 0 auto;
}

h1,
h2,
h3,
h4,
h5,
h6,
.page-title,
.card-title {
    color: var(--mac-text);
    font-family: var(--mac-font);
    font-weight: 700;
    letter-spacing: 0;
}

.text-muted,
.text-gray-600,
.breadcrumb-item,
.breadcrumb-item a,
.user-dropdown-status,
.notification-subtitle {
    color: var(--mac-muted) !important;
}

.navbar-top,
.header-top,
.main-navbar,
.dropdown-menu,
.card,
.modal-content,
.swal2-popup,
.toastify,
.form-control,
.form-select,
.dataTable-wrapper .dataTable-container,
.table,
.alert {
    border: 1px solid var(--mac-border);
}

.navbar-top,
.header-top {
    background: var(--mac-surface);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-radius: var(--mac-radius);
    box-shadow: var(--mac-shadow-soft);
}

.navbar-top {
    padding: 0.85rem 1rem;
}

header.mb-3,
header.mb-5 {
    margin-bottom: 1.5rem !important;
}

.header-top {
    margin: 1rem auto 0;
    padding: 0.75rem 0;
}

.header-top .container,
.main-navbar .container {
    max-width: 1180px;
}

.main-navbar {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(22px) saturate(170%);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    border-radius: 999px;
    box-shadow: var(--mac-shadow-soft);
    margin: 0.9rem auto 0;
    max-width: 1180px;
}

.main-navbar ul .menu-link,
.main-navbar ul .menu-link span {
    color: var(--mac-text);
}

.main-navbar ul .menu-item.active > .menu-link,
.main-navbar ul .menu-link:hover {
    background: rgba(0, 122, 255, 0.1);
    color: var(--mac-blue);
    border-radius: 999px;
}

.main-navbar .submenu {
    border-radius: var(--mac-radius);
    border: 1px solid var(--mac-border);
    box-shadow: var(--mac-shadow);
    overflow: hidden;
}

.sidebar-wrapper {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(26px) saturate(180%);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
    border-right: 1px solid var(--mac-border);
    box-shadow: 18px 0 50px rgba(0, 0, 0, 0.05);
}

.sidebar-wrapper .sidebar-header img {
    max-width: 170px !important;
    height: auto !important;
    object-fit: contain;
}

.sidebar-wrapper .menu .sidebar-title {
    color: var(--mac-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sidebar-wrapper .menu .sidebar-link {
    color: var(--mac-text);
    border-radius: 14px;
    margin: 0.16rem 0.8rem;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.sidebar-wrapper .menu .sidebar-link i,
.sidebar-wrapper .menu .sidebar-link svg {
    color: var(--mac-muted);
}

.sidebar-wrapper .menu .sidebar-item.active > .sidebar-link,
.sidebar-wrapper .menu .sidebar-link:hover {
    background: rgba(0, 122, 255, 0.11);
    color: var(--mac-blue);
    transform: translateX(2px);
}

.sidebar-wrapper .menu .sidebar-item.active > .sidebar-link i,
.sidebar-wrapper .menu .sidebar-link:hover i {
    color: var(--mac-blue);
}

.theme-toggle {
    background: rgba(242, 242, 247, 0.85);
    border: 1px solid var(--mac-border);
    border-radius: 999px;
    padding: 0.28rem 0.42rem;
}

.card {
    background: var(--mac-surface);
    backdrop-filter: blur(20px) saturate(170%);
    -webkit-backdrop-filter: blur(20px) saturate(170%);
    border-radius: var(--mac-radius);
    box-shadow: var(--mac-shadow-soft);
}

.card > .card-header:first-child {
    position: relative;
    padding-left: 4.25rem;
}

.card > .card-header:first-child::before,
#auth .card::before,
.auth-card::before {
    content: "";
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 999px;
    background: var(--mac-red);
    box-shadow: 1.05rem 0 0 var(--mac-yellow), 2.1rem 0 0 var(--mac-green);
}

#auth .card,
.auth-card {
    position: relative;
    padding-top: 1.4rem;
}

.card-header,
.card-footer {
    background: transparent;
    border-color: var(--mac-border);
}

.btn {
    border-radius: 999px;
    font-weight: 650;
    letter-spacing: 0;
    box-shadow: none;
}

.btn-primary,
.bg-primary,
.badge.bg-primary,
.notification-icon.bg-primary {
    background: var(--mac-blue) !important;
    border-color: var(--mac-blue) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--mac-blue-dark) !important;
    border-color: var(--mac-blue-dark) !important;
}

.btn-success,
.bg-success,
.badge.bg-success {
    background: var(--mac-green) !important;
    border-color: var(--mac-green) !important;
}

.btn-danger,
.bg-danger,
.badge.bg-danger {
    background: var(--mac-red) !important;
    border-color: var(--mac-red) !important;
}

.btn-warning,
.bg-warning,
.badge.bg-warning {
    background: var(--mac-yellow) !important;
    border-color: var(--mac-yellow) !important;
    color: var(--mac-text) !important;
}

.form-control,
.form-select,
.dataTable-input,
.dataTable-selector {
    background-color: rgba(255, 255, 255, 0.78);
    border-color: var(--mac-border);
    border-radius: 12px;
    color: var(--mac-text);
    font-family: var(--mac-font);
}

.form-control:focus,
.form-select:focus,
.dataTable-input:focus,
.dataTable-selector:focus {
    background-color: #fff;
    border-color: rgba(0, 122, 255, 0.55);
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.16);
}

.dropdown-menu {
    background: var(--mac-surface);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-radius: 16px;
    box-shadow: var(--mac-shadow);
    padding: 0.45rem;
}

.dropdown-item {
    border-radius: 10px;
    color: var(--mac-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: rgba(0, 122, 255, 0.1);
    color: var(--mac-blue);
}

.table,
table.dataTable {
    background: var(--mac-surface);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--mac-radius);
    overflow: hidden;
}

.table thead th,
table.dataTable thead th {
    background: rgba(242, 242, 247, 0.88);
    color: var(--mac-muted);
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.table tbody tr,
table.dataTable tbody tr {
    background: transparent;
}

.table > :not(caption) > * > *,
table.dataTable > :not(caption) > * > * {
    border-color: rgba(60, 60, 67, 0.11);
}

.pagination .page-link {
    border-radius: 999px;
    border-color: var(--mac-border);
    color: var(--mac-blue);
    margin: 0 0.12rem;
}

.pagination .active .page-link,
.page-item.active .page-link {
    background: var(--mac-blue);
    border-color: var(--mac-blue);
}

.avatar img,
.user-img img {
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.breadcrumb {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid var(--mac-border);
    border-radius: 999px;
    display: inline-flex;
    padding: 0.5rem 0.8rem;
}

footer,
.footer {
    color: var(--mac-muted);
}

footer {
    margin-top: auto;
    flex-shrink: 0;
}

#auth {
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 18%, rgba(0, 122, 255, 0.18), transparent 26rem),
        radial-gradient(circle at 82% 8%, rgba(175, 82, 222, 0.13), transparent 24rem),
        linear-gradient(135deg, #fbfbfd 0%, #f2f2f7 100%);
}

#auth .card,
#auth .auth-card,
#auth .auth-card .card,
.auth-card {
    background: rgba(255, 255, 255, 0.84);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid var(--mac-border);
    border-radius: 24px;
    box-shadow: var(--mac-shadow);
}

body.theme-dark,
body.theme-dark #app {
    color: var(--mac-text);
    background:
        radial-gradient(circle at 12% 0%, rgba(0, 122, 255, 0.13), transparent 28rem),
        radial-gradient(circle at 88% 10%, rgba(255, 45, 85, 0.09), transparent 24rem),
        linear-gradient(180deg, #fbfbfd 0%, var(--mac-bg) 42%, #ececf1 100%);
}

body.theme-dark .card,
body.theme-dark .navbar-top,
body.theme-dark .header-top,
body.theme-dark .main-navbar,
body.theme-dark .sidebar-wrapper,
body.theme-dark .dropdown-menu,
body.theme-dark .modal-content,
body.theme-dark .swal2-popup,
body.theme-dark .form-control,
body.theme-dark .form-select,
body.theme-dark .dataTable-input,
body.theme-dark .dataTable-selector,
body.theme-dark .table,
body.theme-dark table.dataTable {
    background: var(--mac-surface);
    border-color: var(--mac-border);
    color: var(--mac-text);
}

body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark h4,
body.theme-dark h5,
body.theme-dark h6,
body.theme-dark .page-title,
body.theme-dark .card-title,
body.theme-dark .sidebar-wrapper .menu .sidebar-link,
body.theme-dark .dropdown-item,
body.theme-dark .main-navbar ul .menu-link,
body.theme-dark .main-navbar ul .menu-link span {
    color: var(--mac-text);
}

body.theme-dark .text-muted,
body.theme-dark .text-gray-600,
body.theme-dark .breadcrumb-item,
body.theme-dark .breadcrumb-item a {
    color: var(--mac-muted) !important;
}

body.theme-dark .table thead th,
body.theme-dark table.dataTable thead th {
    background: rgba(242, 242, 247, 0.88);
    color: var(--mac-muted);
}

@media (max-width: 1199.98px) {
    .sidebar-wrapper {
        border-radius: 0 24px 24px 0;
    }

    .main-navbar {
        border-radius: 20px;
        margin-left: 1rem;
        margin-right: 1rem;
    }
}

@media (max-width: 767.98px) {
    #main {
        padding: 0.75rem;
    }

    .navbar-top,
    .header-top,
    .card {
        border-radius: 16px;
    }

    .breadcrumb {
        border-radius: 14px;
    }
}