:root {
    --upos-ink: #0b1220;
    --upos-ink-soft: #1e293b;
    --upos-muted: #64748b;
    --upos-bg: #eef2ef;
    --upos-surface: #ffffff;
    --upos-line: rgba(15, 23, 42, 0.08);
    --upos-accent: #0f766e;
    --upos-accent-2: #14b8a6;
    --upos-accent-soft: rgba(20, 184, 166, 0.14);
    --upos-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    --upos-radius: 14px;
}

html,
body,
body.tw-bg-gray-100 {
    background: var(--upos-bg) !important;
    color: var(--upos-ink-soft);
}

main.tw-bg-gray-100,
#scrollable-container {
    background: var(--upos-bg) !important;
}

.upos-topbar {
    background: linear-gradient(100deg, #0b1220 0%, #134e4a 55%, #0f766e 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 24px rgba(11, 18, 32, 0.18);
}

.upos-icon-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

.upos-icon-btn:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
}

aside.side-bar,
.upos-sidebar {
    background: #fbfdfc !important;
    box-shadow: 8px 0 24px rgba(15, 23, 42, 0.04);
}

.upos-brand {
    background: linear-gradient(135deg, #0b1220, #115e59) !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#side-bar {
    background: transparent !important;
    border-right: 0 !important;
}

#side-bar a {
    border-radius: 10px !important;
}

#side-bar a:hover {
    background: var(--upos-accent-soft) !important;
    color: var(--upos-accent) !important;
}

#side-bar a.tw-bg-gray-200,
#side-bar .tw-bg-gray-200 > a,
#side-bar a.tw-text-primary-700 {
    background: var(--upos-accent-soft) !important;
    color: var(--upos-accent) !important;
    font-weight: 600 !important;
}

.content-header h1,
.content-header small {
    color: var(--upos-ink) !important;
}

.content-wrapper,
section.content {
    background: transparent !important;
}

.box,
.box.box-primary,
.box.box-solid {
    background: var(--upos-surface) !important;
    border: 1px solid var(--upos-line) !important;
    border-radius: var(--upos-radius) !important;
    box-shadow: var(--upos-shadow) !important;
    overflow: hidden;
}

.box-header,
.box.box-primary > .box-header,
.box-primary .box-header {
    background: transparent !important;
    border-bottom: 1px solid var(--upos-line) !important;
    color: var(--upos-ink) !important;
}

.box-title {
    color: var(--upos-ink) !important;
    font-weight: 600 !important;
}

.navbar.navbar-default,
nav.navbar.bg-white {
    background: var(--upos-surface) !important;
    border: 1px solid var(--upos-line) !important;
    border-radius: var(--upos-radius) !important;
    box-shadow: var(--upos-shadow) !important;
}

.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a {
    color: var(--upos-ink-soft) !important;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > li > a:hover {
    background: var(--upos-accent-soft) !important;
    color: var(--upos-accent) !important;
    border-radius: 10px;
}

.btn-primary,
.bg-aqua,
.small-box.bg-aqua {
    background-color: var(--upos-accent) !important;
    border-color: var(--upos-accent) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #115e59 !important;
    border-color: #115e59 !important;
}

.small-box {
    border-radius: var(--upos-radius) !important;
    box-shadow: var(--upos-shadow) !important;
}

.small-box.bg-red {
    background: #be123c !important;
}

.small-box.bg-green {
    background: #047857 !important;
}

.small-box.bg-yellow {
    background: #b45309 !important;
}

.table > thead > tr > th {
    background: #f1f5f4 !important;
    color: var(--upos-ink) !important;
    border-bottom: 1px solid var(--upos-line) !important;
}

.pagination > .active > a,
.pagination > .active > span {
    background-color: var(--upos-accent) !important;
    border-color: var(--upos-accent) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--upos-accent) !important;
}

.skin-blue-light .main-header .navbar,
.skin-blue .main-header .navbar,
.skin-blue-light .main-header .logo,
.skin-blue .main-header .logo {
    background-color: #0b1220 !important;
}

.skin-blue-light .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li.active > a {
    background: var(--upos-accent-soft) !important;
    color: var(--upos-accent) !important;
    border-left-color: var(--upos-accent) !important;
}