/* Apple-inspired monochrome admin theme */
:root {
    --apple-black: #0b0b0d;
    --apple-ink: #1d1d1f;
    --apple-gray-900: #2c2c2e;
    --apple-gray-700: #636366;
    --apple-gray-500: #8e8e93;
    --apple-gray-300: #d1d1d6;
    --apple-gray-200: #e5e5ea;
    --apple-gray-100: #f2f2f7;
    --apple-white: #ffffff;
    --apple-radius: 14px;
    --apple-shadow: 0 8px 24px rgba(0, 0, 0, .06);
}

* { scrollbar-color: #8e8e93 #f2f2f7; }
body {
    background: var(--apple-gray-100);
    color: var(--apple-ink);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
    letter-spacing: -.01em;
}
a { color: var(--apple-ink); }
a:hover { color: #000; }
.textWhite { color: var(--apple-ink) !important; }

/* Navigation */
.main-sidebar.sidebar-dark-primary,
aside.main-sidebar.sidebar-dark-primary.elevation-4 {
    background: var(--apple-black);
    box-shadow: 4px 0 24px rgba(0, 0, 0, .12) !important;
}
.brand-link { border-bottom: 1px solid rgba(255,255,255,.12) !important; padding: 16px 14px; }
.brand-link .brand-image { filter: grayscale(1) brightness(0) invert(1); opacity: .9 !important; }
.main-sidebar .brand-text { color: #fff; font-weight: 600; letter-spacing: -.02em; }
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link { color: #b8b8bd; border-radius: 10px; margin: 3px 10px; }
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:hover { background: #262628; color: #fff; }
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active,
li.nav-item .active > a { background: #fff; color: var(--apple-black); box-shadow: none; }
.sidebar-dark-primary .nav-treeview > .nav-item > .nav-link { color: #a8a8ad; margin-left: 18px; }
.nav-sidebar .nav-icon { font-size: .9rem !important; }

.main-header.navbar.navbar-white {
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid var(--apple-gray-200);
    box-shadow: 0 1px 10px rgba(0,0,0,.03);
}
.main-header .navbar-nav .nav-link { color: var(--apple-ink); }
.main-header .navbar-nav .nav-link:hover { color: #000; }
.dropdown-menu { border: 1px solid var(--apple-gray-200); border-radius: 12px; box-shadow: var(--apple-shadow); padding: 8px; }
.dropdown-item { border-radius: 8px; }
.dropdown-item:hover { background: var(--apple-gray-100); }

/* Page shell and dashboard */
.content-wrapper { background: var(--apple-gray-100); }
.content-header { padding: 28px 0 18px; }
.content-header h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -.04em; }
.breadcrumb { background: transparent; color: var(--apple-gray-500); }
.breadcrumb a { color: var(--apple-gray-700); }
.content .small-box {
    display: flex; align-items: center; padding: 22px; min-height: 126px;
    background: var(--apple-white) !important; color: var(--apple-ink);
    border: 1px solid var(--apple-gray-200); border-radius: var(--apple-radius);
    box-shadow: var(--apple-shadow); transition: transform .2s ease, box-shadow .2s ease;
}
.content .small-box:hover { background: var(--apple-white) !important; color: var(--apple-ink); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.1); }
.content .small-box .icon-div { width: 54px; height: 54px; border-radius: 16px; background: var(--apple-black) !important; display: flex; align-items: center; justify-content: center; }
.content .small-box .icon-div img { width: 25px; height: 25px; filter: grayscale(1) brightness(0) invert(1); }
.content .inner { padding-left: 16px; }
.content .inner h3 { color: var(--apple-ink); font-size: 1.8rem; font-weight: 700; margin: 0; }
.content .inner p { color: var(--apple-gray-700); margin: 3px 0 0; }

/* Cards, tables, forms and dialogs */
.content .card, .modal .modal-content { background: var(--apple-white); color: var(--apple-ink); border: 1px solid var(--apple-gray-200); border-radius: var(--apple-radius); box-shadow: var(--apple-shadow); }
.card-header, .card-footer, .content .card .card-header, .content .card .card-body { background: var(--apple-white); color: var(--apple-ink); border-color: var(--apple-gray-200); }
.card-header { font-weight: 600; }
.table { color: var(--apple-ink); }
.table thead th, .dataTables_wrapper .dataTable thead th { background: var(--apple-gray-100); color: var(--apple-gray-700); border: 0; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.dataTables_wrapper .dataTable tbody tr, .dataTables_wrapper .dataTable tbody tr:nth-child(even) { background: var(--apple-white); color: var(--apple-ink); }
.table td, .table th { border-color: var(--apple-gray-200); vertical-align: middle; }
.form-control, .custom-select, .select2-container .select2-selection--multiple, .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select {
    background: var(--apple-white); color: var(--apple-ink); border: 1px solid var(--apple-gray-300); border-radius: 9px; min-height: 38px;
}
.form-control:focus, .custom-select:focus { border-color: var(--apple-black); box-shadow: 0 0 0 3px rgba(0,0,0,.1); }
.btn { border-radius: 9px; font-weight: 600; }
.customButton, .btn-primary { color: #fff !important; background: var(--apple-black) !important; border-color: var(--apple-black) !important; }
.customButton:hover, .btn-primary:hover { background: #3a3a3c !important; border-color: #3a3a3c !important; }
.customButtonDefault, .btn-default { color: var(--apple-ink); background: var(--apple-gray-200); border: 0; }
.btn-danger { background: #3a3a3c; border-color: #3a3a3c; }
.modal .modal-header, .modal .modal-footer { border-color: var(--apple-gray-200); }
.modal .modal-body input, .modal .modal-body select, .content .card-body input, .content .card-body textarea, .content .card-body select { background: var(--apple-white); color: var(--apple-ink); border-color: var(--apple-gray-300); }
.select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--apple-gray-200); color: var(--apple-ink); border: 0; }

/* Authentication */
.login-page { background: linear-gradient(135deg, #f2f2f7 0%, #fff 60%, #e5e5ea 100%) !important; }
.login-box .card { background: rgba(255,255,255,.96); color: var(--apple-ink); border: 1px solid var(--apple-gray-200); border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.12); }
.login-box .login-box-msg { color: var(--apple-ink); font-size: 1.35rem; letter-spacing: -.03em; }
.login-box .card input, .login-box .card .input-group-append .input-group-text { background: #fff; border-color: var(--apple-gray-300); color: var(--apple-ink); }
.login-box a { color: var(--apple-gray-700); }

@media (max-width: 767.98px) {
    .content-header { padding: 20px 0 12px; }
    .content-header h1 { font-size: 1.45rem; }
    .content .small-box { min-height: 108px; padding: 16px; }
    .content .small-box .icon-div { width: 44px; height: 44px; border-radius: 13px; }
    .content .inner h3 { font-size: 1.45rem; }
}