:root {
    --mk-page: #f4f7fb;
    --mk-page-soft: #eef8f5;
    --mk-surface: #ffffff;
    --mk-surface-2: #f8fafc;
    --mk-border: rgba(15, 23, 42, 0.10);
    --mk-border-strong: #d7e2ee;
    --mk-text: #102033;
    --mk-muted: #64748b;
    --mk-primary: #0f766e;
    --mk-primary-2: #0ea5e9;
    --mk-green: #16a34a;
    --mk-gold: #d97706;
    --mk-rose: #e11d48;
    --mk-sidebar: #ffffff;
    --mk-sidebar-hover: #eef7f4;
    --mk-shadow: 0 16px 38px rgba(15, 23, 42, 0.10);
    --mk-shadow-soft: 0 8px 22px rgba(15, 23, 42, 0.07);
}

html,
body {
    background: var(--mk-page) !important;
}

body {
    color: var(--mk-text) !important;
    background: linear-gradient(180deg, var(--mk-page-soft) 0, var(--mk-page) 330px, #f8fafc 100%) !important;
    font-family: Inter, "Segoe UI", Arial, sans-serif !important;
    letter-spacing: 0 !important;
}

body * {
    letter-spacing: 0 !important;
}

.wrapper,
.wraprer,
#main,
.main-container {
    background: transparent !important;
}

#main {
    margin-top: 62px !important;
}

.main-container {
    padding: 14px 14px 24px !important;
}

.navbar {
    height: 58px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    border-bottom: 1px solid var(--mk-border) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.09) !important;
    backdrop-filter: blur(12px);
}

.navbar-left a,
.navbar-right a,
.navbar a,
.ses {
    color: var(--mk-text) !important;
}

.navbar-left a,
.navbar-right a {
    padding-top: 18px !important;
    padding-bottom: 17px !important;
    font-weight: 750 !important;
}

.navbar-left a:hover,
.navbar-right a:hover,
.navbar-hover:hover {
    color: var(--mk-primary) !important;
    background: var(--mk-sidebar-hover) !important;
}

#brand {
    min-width: 190px !important;
    color: #0f172a !important;
    font-weight: 850 !important;
}

#brand span,
.navbar-left a:nth-child(3) {
    color: #0f172a !important;
}

.ses,
.dropd {
    height: 34px !important;
    margin-top: 11px !important;
    border: 1px solid var(--mk-border) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: var(--mk-text) !important;
    font-weight: 700 !important;
    padding: 4px 8px !important;
}

.sidenav {
    width: 220px;
    margin-top: 58px !important;
    background: var(--mk-sidebar) !important;
    border-right: 1px solid var(--mk-border) !important;
    box-shadow: 10px 0 28px rgba(15, 23, 42, 0.07) !important;
}

.sidenav .spa,
.spa {
    background: linear-gradient(135deg, #e9fbf4, #eef6ff) !important;
    border-bottom: 1px solid var(--mk-border) !important;
    color: #0f172a !important;
    font-weight: 850 !important;
}

.sidenav a,
.dropdown-btn {
    width: calc(100% - 14px) !important;
    margin: 5px 7px !important;
    padding: 2px 8px !important;
    border-radius: 8px !important;
    color: #243447 !important;
    font-weight: 650 !important;
    transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease !important;
}

.sidenav i,
.dropdown-btn i {
    color: #334155 !important;
    font-size: 18px !important;
}

.sidenav a:hover,
.dropdown-btn:hover {
    background: var(--mk-sidebar-hover) !important;
    color: var(--mk-primary) !important;
}

.sidenav a:hover i,
.dropdown-btn:hover i {
    color: var(--mk-primary) !important;
}

.active,
.sidenav a.active,
.dropdown-btn.active {
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.13), rgba(14, 165, 233, 0.12)) !important;
    color: var(--mk-primary) !important;
    box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.16) !important;
}

.active i,
.sidenav a.active i,
.dropdown-btn.active i {
    color: var(--mk-primary) !important;
}

.dropdown-container {
    padding: 2px 0 5px !important;
}

.dropdown-container a {
    font-size: 13px !important;
    color: #475569 !important;
}

.fa-caret-down,
.fa-caret-left {
    color: #64748b !important;
}

.card,
.box,
.modal-window > div,
.settings,
.login-box .card,
.register-box .card {
    background: var(--mk-surface) !important;
    color: var(--mk-text) !important;
    border: 1px solid var(--mk-border) !important;
    border-radius: 8px !important;
    box-shadow: var(--mk-shadow-soft) !important;
}

.card {
    margin: 8px !important;
    overflow: hidden !important;
}

.card-header {
    background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
    border-bottom: 1px solid var(--mk-border) !important;
    color: var(--mk-text) !important;
    padding: 13px 16px !important;
    margin-bottom: 0 !important;
}

.card-header h1,
.card-header h2,
.card-header h3,
.card h1,
.card h2,
.card h3,
h3 {
    color: var(--mk-text) !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
}

.card-header i {
    color: var(--mk-primary) !important;
}

.card-body {
    padding: 16px !important;
    color: var(--mk-text) !important;
}

.box {
    border-color: var(--mk-border) !important;
    margin: 8px !important;
}

.box-bordered {
    border: 1px solid var(--mk-border) !important;
}

.box-group-icon {
    color: var(--mk-primary) !important;
    background: #eef7f4 !important;
    border: 1px solid rgba(15, 118, 110, 0.16) !important;
    border-radius: 8px !important;
}

.box-group-area,
.box-group-area span,
.box span,
.box div {
    color: var(--mk-text) !important;
}

.box a {
    color: var(--mk-text) !important;
    display: block !important;
    text-decoration: none !important;
}

.box a:hover {
    color: var(--mk-primary) !important;
    text-decoration: none !important;
}

.box.bg-blue,
.bg-blue { background: linear-gradient(135deg, #0ea5e9, #2563eb) !important; color: #ffffff !important; }
.box.bg-green,
.bg-green { background: linear-gradient(135deg, #16a34a, #0f766e) !important; color: #ffffff !important; }
.box.bg-yellow,
.bg-yellow { background: linear-gradient(135deg, #d97706, #f59e0b) !important; color: #ffffff !important; }
.box.bg-red,
.bg-red { background: linear-gradient(135deg, #e11d48, #fb7185) !important; color: #ffffff !important; }
.box.bg-indigo,
.bg-indigo { background: linear-gradient(135deg, #4f46e5, #7c3aed) !important; color: #ffffff !important; }
.box.bg-purple,
.bg-purple { background: linear-gradient(135deg, #7c3aed, #a855f7) !important; color: #ffffff !important; }
.box.bg-pink,
.bg-pink { background: linear-gradient(135deg, #db2777, #f43f5e) !important; color: #ffffff !important; }
.box.bg-orange,
.bg-orange { background: linear-gradient(135deg, #ea580c, #f59e0b) !important; color: #ffffff !important; }
.box.bg-teal,
.bg-teal { background: linear-gradient(135deg, #0f766e, #14b8a6) !important; color: #ffffff !important; }
.box.bg-cyan,
.bg-cyan { background: linear-gradient(135deg, #0891b2, #06b6d4) !important; color: #ffffff !important; }
.box.bg-grey,
.bg-grey { background: linear-gradient(135deg, #475569, #64748b) !important; color: #ffffff !important; }
.box.bg-light-blue,
.bg-light-blue { background: linear-gradient(135deg, #0284c7, #38bdf8) !important; color: #ffffff !important; }
.bg-primary { background: linear-gradient(135deg, var(--mk-primary), var(--mk-primary-2)) !important; color: #ffffff !important; }
.bg-success { background: linear-gradient(135deg, #16a34a, #0f766e) !important; color: #ffffff !important; }
.bg-warning { background: linear-gradient(135deg, #d97706, #f59e0b) !important; color: #ffffff !important; }
.bg-danger { background: linear-gradient(135deg, #e11d48, #fb7185) !important; color: #ffffff !important; }
.bg-info { background: linear-gradient(135deg, #0284c7, #0ea5e9) !important; color: #ffffff !important; }

.box.bg-blue *,
.box.bg-green *,
.box.bg-yellow *,
.box.bg-red *,
.box.bg-indigo *,
.box.bg-purple *,
.box.bg-pink *,
.box.bg-orange *,
.box.bg-teal *,
.box.bg-cyan *,
.box.bg-grey *,
.box.bg-light-blue *,
.bg-primary *,
.bg-success *,
.bg-warning *,
.bg-danger *,
.bg-info * {
    color: #ffffff !important;
}

.box.bg-blue .box-group-icon,
.box.bg-green .box-group-icon,
.box.bg-yellow .box-group-icon,
.box.bg-red .box-group-icon,
.box.bg-indigo .box-group-icon,
.box.bg-purple .box-group-icon,
.box.bg-pink .box-group-icon,
.box.bg-orange .box-group-icon,
.box.bg-teal .box-group-icon,
.box.bg-cyan .box-group-icon,
.box.bg-grey .box-group-icon,
.box.bg-light-blue .box-group-icon {
    background: rgba(15, 23, 42, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    color: #ffffff !important;
}

.box.bg-blue .box-group-area,
.box.bg-green .box-group-area,
.box.bg-yellow .box-group-area,
.box.bg-red .box-group-area,
.box.bg-indigo .box-group-area,
.box.bg-purple .box-group-area,
.box.bg-pink .box-group-area,
.box.bg-orange .box-group-area,
.box.bg-teal .box-group-area,
.box.bg-cyan .box-group-area,
.box.bg-grey .box-group-area,
.box.bg-light-blue .box-group-area {
    text-shadow: 0 1px 2px rgba(15, 23, 42, 0.22) !important;
}

.table {
    background: #ffffff !important;
    color: var(--mk-text) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.table th,
.table td {
    color: #243447 !important;
    border-color: #dfe8f2 !important;
    padding: 8px !important;
}

.table th {
    background: #f1f6f9 !important;
    color: #334155 !important;
    font-weight: 850 !important;
}

.table td {
    background: #ffffff !important;
}

.table-hover:hover tbody tr:hover,
.table-hover tbody tr:hover td {
    background: #f8fbfd !important;
}

.table-responsive,
.overflow,
.tscroll {
    border-radius: 8px !important;
}

.form-control,
.group-item,
input,
select,
textarea {
    border: 1px solid #cfdbe7 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: var(--mk-text) !important;
    box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.03) !important;
}

.form-control,
.group-item {
    min-height: 38px !important;
    padding: 8px 10px !important;
}

.form-control:focus,
.group-item:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--mk-primary-2) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.16) !important;
}

.form-control::placeholder,
.group-item::placeholder,
input::placeholder,
textarea::placeholder {
    color: #94a3b8 !important;
}

.btn,
.btn-login,
button,
input[type="submit"] {
    border: 0 !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, var(--mk-primary), var(--mk-primary-2)) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    min-height: 34px !important;
    padding: 7px 13px !important;
    box-shadow: 0 10px 22px rgba(15, 118, 110, 0.20) !important;
    transition: transform 0.16s ease, filter 0.16s ease, box-shadow 0.16s ease !important;
}

.btn:hover,
.btn-login:hover,
button:hover,
input[type="submit"]:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.04) !important;
    box-shadow: 0 14px 28px rgba(15, 118, 110, 0.24) !important;
}

.btn-sm {
    min-height: 30px !important;
    padding: 5px 9px !important;
}

.btn-warning { background: linear-gradient(135deg, #d97706, #f59e0b) !important; }
.btn-danger { background: linear-gradient(135deg, #e11d48, #fb7185) !important; }
.btn-success { background: linear-gradient(135deg, #16a34a, #0f766e) !important; }
.btn-info { background: linear-gradient(135deg, #0284c7, #0ea5e9) !important; }

.alert {
    border-radius: 8px !important;
    padding: 10px 12px !important;
    border: 1px solid var(--mk-border) !important;
}

.badge,
[class*="badge-"] {
    border-radius: 999px !important;
    font-weight: 800 !important;
}

.modal-window {
    background-color: rgba(15, 23, 42, 0.46) !important;
    backdrop-filter: blur(8px);
}

.modal-window > div {
    background: #ffffff !important;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28) !important;
}

.modal-close {
    background: linear-gradient(135deg, #e11d48, #fb7185) !important;
    color: #ffffff !important;
}

.login-box,
.register-box {
    padding-top: 8% !important;
}

.login-box .card,
.register-box .card {
    max-width: 430px;
    margin-left: auto !important;
    margin-right: auto !important;
    box-shadow: var(--mk-shadow) !important;
}

#notify {
    background: rgba(15, 118, 110, 0.88) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    border-radius: 8px !important;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #eef2f7 !important;
    border: 0 !important;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border: 2px solid #eef2f7 !important;
    border-radius: 999px !important;
}

@media screen and (min-width: 750px) {
    .sidenav {
        width: 220px !important;
    }

    #main {
        margin-left: 220px !important;
    }
}

@media screen and (max-width: 750px) {
    body.mk-mobile-nav-open {
        overflow: hidden !important;
    }

    .navbar {
        height: 54px !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 6px !important;
    }

    .navbar-left,
    .navbar-right {
        display: flex !important;
        align-items: center !important;
        min-width: 0 !important;
    }

    .navbar-right {
        margin-left: auto !important;
        gap: 4px !important;
    }

    #brand,
    #cpage {
        display: none !important;
    }

    #openNav,
    #closeNav {
        width: 44px !important;
        height: 54px !important;
        padding: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 21px !important;
        float: none !important;
    }

    body:not(.mk-mobile-nav-open) #openNav {
        display: flex !important;
    }

    body:not(.mk-mobile-nav-open) #closeNav {
        display: none !important;
    }

    body.mk-mobile-nav-open #openNav {
        display: none !important;
    }

    body.mk-mobile-nav-open #closeNav {
        display: flex !important;
    }

    .navbar-left a,
    .navbar-right a {
        height: 54px !important;
        padding: 0 7px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
    }

    .navbar-right a[title="Idle Timeout"] span {
        width: auto !important;
        min-width: 58px !important;
        padding: 4px 5px !important;
    }

    .navbar-right #logout {
        font-size: 14px !important;
        max-width: 76px !important;
        overflow: hidden !important;
    }

    .ses,
    .dropd {
        height: 38px !important;
        max-width: 94px !important;
        margin-top: 0 !important;
        padding: 3px 6px !important;
        font-size: 13px !important;
    }

    .sidenav {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 0 !important;
        max-width: 86vw !important;
        height: calc(100dvh - 54px) !important;
        margin-top: 54px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        z-index: 1050 !important;
        box-shadow: 12px 0 34px rgba(15, 23, 42, 0.16) !important;
        transition: width 0.22s ease !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body.mk-mobile-nav-open .sidenav {
        width: min(86vw, 320px) !important;
        border-right: 1px solid var(--mk-border) !important;
    }

    body:not(.mk-mobile-nav-open) .sidenav {
        width: 0 !important;
        border-right: 0 !important;
        box-shadow: none !important;
    }

    .sidenav .spa,
    .spa {
        min-height: 54px !important;
    }

    .sidenav a,
    .dropdown-btn {
        min-height: 42px !important;
        display: flex !important;
        align-items: center !important;
        gap: 7px !important;
        white-space: normal !important;
        line-height: 1.25 !important;
    }

    .dropdown-btn .fa-caret-down,
    .dropdown-btn .fa-caret-left {
        margin-left: auto !important;
    }

    .mk-nav-overlay {
        display: none;
        position: fixed;
        inset: 54px 0 0 0;
        z-index: 1040;
        background: rgba(15, 23, 42, 0.38);
        backdrop-filter: blur(2px);
    }

    body.mk-mobile-nav-open .mk-nav-overlay {
        display: block !important;
    }

    #main {
        margin-top: 58px !important;
        margin-left: 0 !important;
        width: 100% !important;
    }

    .main-container {
        padding: 10px !important;
    }

    .card,
    .box {
        margin: 6px !important;
    }

    .card-body {
        padding: 12px !important;
    }
}

@media screen and (max-width: 390px) {
    .ses,
    .dropd {
        max-width: 82px !important;
        font-size: 12px !important;
    }

    .navbar-right a[title="Idle Timeout"] span {
        min-width: 48px !important;
    }

    .navbar-right #logout {
        max-width: 44px !important;
    }
}