@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* Shared tokens + default Blue style */
body.theme-propos {
    --pp-primary: #1E5BFF;
    --pp-primary-hover: #1546D8;
    --pp-primary-soft: #E8EFFF;
    --pp-navy: #0D3AA8;
    --pp-navy-2: #0A2F8C;
    --pp-header: #1E5BFF;
    --pp-bg: #F4F7FC;
    --pp-card: #FFFFFF;
    --pp-text: #12203A;
    --pp-muted: #7B8AA3;
    --pp-border: #E6ECF5;
    --pp-accent: #F5C518;
    --pp-accent-text: #12203A;
    --pp-success: #22C55E;
    --pp-danger: #EF4444;
    --pp-radius: 16px;
    --pp-radius-sm: 12px;
    --pp-radius-pill: 999px;
    --pp-shadow: 0 10px 28px rgba(30, 91, 255, 0.08);
    --pp-header-shadow: 0 8px 20px rgba(30, 91, 255, 0.18);
    --pp-focus-ring: rgba(30, 91, 255, 0.14);
    --pp-nav-text: #ffffff;
    --pp-nav-hover: rgba(255, 255, 255, 0.12);
    --pp-sidebar-text: rgba(255, 255, 255, 0.82);
    --pp-sidebar-header-bg: var(--pp-navy-2);
    --pp-sidebar-active-bg: rgba(255, 255, 255, 0.14);
    --pp-sidebar-active-text: #ffffff;
    --pp-login-from: var(--pp-header);
    --pp-login-to: var(--pp-primary-hover);
}

body.theme-propos.skin-blue,
body.theme-propos.login-page-blue {
    --pp-primary: #1E5BFF;
    --pp-primary-hover: #1546D8;
    --pp-primary-soft: #E8EFFF;
    --pp-navy: #0D3AA8;
    --pp-navy-2: #0A2F8C;
    --pp-header: #1E5BFF;
    --pp-shadow: 0 10px 28px rgba(30, 91, 255, 0.08);
    --pp-header-shadow: 0 8px 20px rgba(30, 91, 255, 0.18);
    --pp-focus-ring: rgba(30, 91, 255, 0.14);
}

body.theme-propos.skin-blue-light,
body.theme-propos.login-page-blue-light {
    --pp-primary: #1E5BFF;
    --pp-primary-hover: #1546D8;
    --pp-primary-soft: #E8EFFF;
    --pp-navy: #F7F9FC;
    --pp-navy-2: #EEF3FB;
    --pp-header: #1E5BFF;
    --pp-shadow: 0 10px 28px rgba(30, 91, 255, 0.08);
    --pp-header-shadow: 0 8px 20px rgba(30, 91, 255, 0.18);
    --pp-focus-ring: rgba(30, 91, 255, 0.14);
    --pp-sidebar-text: #334155;
    --pp-sidebar-header-bg: #EEF3FB;
    --pp-sidebar-active-bg: var(--pp-primary-soft);
    --pp-sidebar-active-text: var(--pp-primary);
}

body.theme-propos.skin-green,
body.theme-propos.login-page-green {
    --pp-primary: #00A65A;
    --pp-primary-hover: #008D4C;
    --pp-primary-soft: #E5F7EE;
    --pp-navy: #0B5C38;
    --pp-navy-2: #08472B;
    --pp-header: #00A65A;
    --pp-shadow: 0 10px 28px rgba(0, 166, 90, 0.10);
    --pp-header-shadow: 0 8px 20px rgba(0, 166, 90, 0.20);
    --pp-focus-ring: rgba(0, 166, 90, 0.16);
}

body.theme-propos.skin-green-light,
body.theme-propos.login-page-green-light {
    --pp-primary: #00A65A;
    --pp-primary-hover: #008D4C;
    --pp-primary-soft: #E5F7EE;
    --pp-navy: #F6FBF8;
    --pp-navy-2: #EAF6EF;
    --pp-header: #00A65A;
    --pp-shadow: 0 10px 28px rgba(0, 166, 90, 0.10);
    --pp-header-shadow: 0 8px 20px rgba(0, 166, 90, 0.20);
    --pp-focus-ring: rgba(0, 166, 90, 0.16);
    --pp-sidebar-text: #1F3B2E;
    --pp-sidebar-header-bg: #EAF6EF;
    --pp-sidebar-active-bg: var(--pp-primary-soft);
    --pp-sidebar-active-text: var(--pp-primary);
}

body.theme-propos.skin-red,
body.theme-propos.login-page-red {
    --pp-primary: #DD4B39;
    --pp-primary-hover: #C23321;
    --pp-primary-soft: #FBEAEA;
    --pp-navy: #8B2418;
    --pp-navy-2: #6F1C13;
    --pp-header: #DD4B39;
    --pp-shadow: 0 10px 28px rgba(221, 75, 57, 0.10);
    --pp-header-shadow: 0 8px 20px rgba(221, 75, 57, 0.20);
    --pp-focus-ring: rgba(221, 75, 57, 0.16);
}

body.theme-propos.skin-red-light,
body.theme-propos.login-page-red-light {
    --pp-primary: #DD4B39;
    --pp-primary-hover: #C23321;
    --pp-primary-soft: #FBEAEA;
    --pp-navy: #FDF7F6;
    --pp-navy-2: #F8ECEA;
    --pp-header: #DD4B39;
    --pp-shadow: 0 10px 28px rgba(221, 75, 57, 0.10);
    --pp-header-shadow: 0 8px 20px rgba(221, 75, 57, 0.20);
    --pp-focus-ring: rgba(221, 75, 57, 0.16);
    --pp-sidebar-text: #4A2420;
    --pp-sidebar-header-bg: #F8ECEA;
    --pp-sidebar-active-bg: var(--pp-primary-soft);
    --pp-sidebar-active-text: var(--pp-primary);
}

body.theme-propos.skin-yellow,
body.theme-propos.login-page-yellow {
    --pp-primary: #F39C12;
    --pp-primary-hover: #E08E0B;
    --pp-primary-soft: #FFF6E5;
    --pp-navy: #8A5A08;
    --pp-navy-2: #6E4806;
    --pp-header: #F39C12;
    --pp-accent: #1E5BFF;
    --pp-accent-text: #ffffff;
    --pp-shadow: 0 10px 28px rgba(243, 156, 18, 0.12);
    --pp-header-shadow: 0 8px 20px rgba(243, 156, 18, 0.22);
    --pp-focus-ring: rgba(243, 156, 18, 0.20);
}

body.theme-propos.skin-yellow-light,
body.theme-propos.login-page-yellow-light {
    --pp-primary: #F39C12;
    --pp-primary-hover: #E08E0B;
    --pp-primary-soft: #FFF6E5;
    --pp-navy: #FFFBF3;
    --pp-navy-2: #F8F0E0;
    --pp-header: #F39C12;
    --pp-accent: #1E5BFF;
    --pp-accent-text: #ffffff;
    --pp-shadow: 0 10px 28px rgba(243, 156, 18, 0.12);
    --pp-header-shadow: 0 8px 20px rgba(243, 156, 18, 0.22);
    --pp-focus-ring: rgba(243, 156, 18, 0.20);
    --pp-sidebar-text: #4A3B16;
    --pp-sidebar-header-bg: #F8F0E0;
    --pp-sidebar-active-bg: var(--pp-primary-soft);
    --pp-sidebar-active-text: var(--pp-navy-2);
}

body.theme-propos.skin-purple,
body.theme-propos.login-page-purple {
    --pp-primary: #605CA8;
    --pp-primary-hover: #4D4990;
    --pp-primary-soft: #EEEBF8;
    --pp-navy: #3B3870;
    --pp-navy-2: #2C2A56;
    --pp-header: #605CA8;
    --pp-shadow: 0 10px 28px rgba(96, 92, 168, 0.12);
    --pp-header-shadow: 0 8px 20px rgba(96, 92, 168, 0.22);
    --pp-focus-ring: rgba(96, 92, 168, 0.18);
}

body.theme-propos.skin-purple-light,
body.theme-propos.login-page-purple-light {
    --pp-primary: #605CA8;
    --pp-primary-hover: #4D4990;
    --pp-primary-soft: #EEEBF8;
    --pp-navy: #F7F6FB;
    --pp-navy-2: #EEEBF6;
    --pp-header: #605CA8;
    --pp-shadow: 0 10px 28px rgba(96, 92, 168, 0.12);
    --pp-header-shadow: 0 8px 20px rgba(96, 92, 168, 0.22);
    --pp-focus-ring: rgba(96, 92, 168, 0.18);
    --pp-sidebar-text: #33315A;
    --pp-sidebar-header-bg: #EEEBF6;
    --pp-sidebar-active-bg: var(--pp-primary-soft);
    --pp-sidebar-active-text: var(--pp-primary);
}

body.theme-propos.skin-black,
body.theme-propos.login-page-black {
    --pp-primary: #1F2937;
    --pp-primary-hover: #111827;
    --pp-primary-soft: #E5E7EB;
    --pp-navy: #111827;
    --pp-navy-2: #030712;
    --pp-header: #FFFFFF;
    --pp-nav-text: #111827;
    --pp-nav-hover: #F3F4F6;
    --pp-shadow: 0 10px 28px rgba(17, 24, 39, 0.08);
    --pp-header-shadow: 0 1px 0 #E5E7EB;
    --pp-focus-ring: rgba(17, 24, 39, 0.12);
}

body.theme-propos.skin-black-light,
body.theme-propos.login-page-black-light {
    --pp-primary: #1F2937;
    --pp-primary-hover: #111827;
    --pp-primary-soft: #E5E7EB;
    --pp-navy: #F9FAFB;
    --pp-navy-2: #F3F4F6;
    --pp-header: #FFFFFF;
    --pp-nav-text: #111827;
    --pp-nav-hover: #F3F4F6;
    --pp-shadow: 0 10px 28px rgba(17, 24, 39, 0.08);
    --pp-header-shadow: 0 1px 0 #E5E7EB;
    --pp-focus-ring: rgba(17, 24, 39, 0.12);
    --pp-sidebar-text: #374151;
    --pp-sidebar-header-bg: #F3F4F6;
    --pp-sidebar-active-bg: var(--pp-primary-soft);
    --pp-sidebar-active-text: var(--pp-primary);
}

body.theme-propos,
body.theme-propos .wrapper,
body.theme-propos .content-wrapper,
body.theme-propos .main-footer,
body.theme-propos .form-control,
body.theme-propos .btn,
body.theme-propos .box,
body.theme-propos .sidebar-menu,
body.theme-propos .navbar,
body.theme-propos .modal-content,
body.theme-propos .select2-container {
    font-family: 'Plus Jakarta Sans', 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

body.theme-propos {
    color: var(--pp-text);
    background: var(--pp-bg);
}

body.theme-propos .wrapper,
body.theme-propos .content-wrapper {
    background-color: var(--pp-bg) !important;
}

/* Header */
body.theme-propos .main-header .navbar {
    background-color: var(--pp-header) !important;
    box-shadow: var(--pp-header-shadow);
}

body.theme-propos .main-header .navbar .nav > li > a,
body.theme-propos .main-header .navbar .sidebar-toggle,
body.theme-propos .main-header .navbar .clock {
    color: var(--pp-nav-text) !important;
}

body.theme-propos .main-header .navbar .nav > li > a:hover,
body.theme-propos .main-header .navbar .nav > li > a:active,
body.theme-propos .main-header .navbar .nav > li > a:focus,
body.theme-propos .main-header .navbar .nav .open > a,
body.theme-propos .main-header .navbar .sidebar-toggle:hover {
    background: var(--pp-nav-hover) !important;
    color: var(--pp-nav-text) !important;
}

body.theme-propos .main-header .logo,
body.theme-propos .main-header .logo:hover {
    background-color: var(--pp-navy) !important;
    color: var(--pp-sidebar-active-text) !important;
    border-bottom: 0;
    font-weight: 800;
}

body.theme-propos.skin-black .main-header .logo,
body.theme-propos.skin-black-light .main-header .logo {
    background-color: #111827 !important;
    color: #fff !important;
}

body.theme-propos .main-header li.user-header {
    background: linear-gradient(180deg, var(--pp-header) 0%, var(--pp-navy) 100%) !important;
}

body.theme-propos .main-header .navbar .label,
body.theme-propos .main-header .navbar .label-warning {
    background-color: var(--pp-accent) !important;
    color: var(--pp-accent-text) !important;
}

/* Sidebar */
body.theme-propos .main-sidebar,
body.theme-propos .left-side {
    background-color: var(--pp-navy) !important;
}

body.theme-propos .sidebar-menu > li.header {
    color: var(--pp-muted) !important;
    background: var(--pp-sidebar-header-bg) !important;
}

body.theme-propos .sidebar a,
body.theme-propos .treeview-menu > li > a {
    color: var(--pp-sidebar-text) !important;
}

body.theme-propos .sidebar-menu > li > a {
    border-left: 3px solid transparent;
    border-radius: 0 20px 20px 0;
    margin: 2px 8px 2px 0;
}

body.theme-propos .sidebar-menu > li:hover > a,
body.theme-propos .sidebar-menu > li.active > a {
    color: var(--pp-sidebar-active-text) !important;
    background: var(--pp-sidebar-active-bg) !important;
    border-left-color: var(--pp-accent) !important;
}

body.theme-propos .sidebar-menu > li > .treeview-menu {
    background: var(--pp-navy-2) !important;
}

body.theme-propos .treeview-menu > li.active > a,
body.theme-propos .treeview-menu > li > a:hover {
    color: var(--pp-sidebar-active-text) !important;
}

body.theme-propos .user-panel > .info,
body.theme-propos .user-panel > .info > a {
    color: var(--pp-sidebar-text) !important;
}

body.theme-propos .sidebar-form {
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-pill);
}

body.theme-propos .sidebar-form input[type="text"],
body.theme-propos .sidebar-form .btn {
    background: transparent !important;
    color: var(--pp-sidebar-text) !important;
}

/* Content / cards */
body.theme-propos .content-header h1,
body.theme-propos .content-header .breadcrumb {
    color: var(--pp-text);
}

body.theme-propos .box {
    border: 0;
    border-radius: var(--pp-radius);
    box-shadow: var(--pp-shadow);
    background: var(--pp-card);
}

body.theme-propos .box.box-primary,
body.theme-propos .box.box-info,
body.theme-propos .box.box-success,
body.theme-propos .box.box-warning,
body.theme-propos .box.box-danger,
body.theme-propos .box.box-default {
    border-top: 3px solid var(--pp-primary);
}

body.theme-propos .box-header {
    border-radius: var(--pp-radius) var(--pp-radius) 0 0;
}

body.theme-propos .box.box-solid.box-primary {
    border: 1px solid var(--pp-primary);
}

body.theme-propos .box.box-solid.box-primary > .box-header {
    background: var(--pp-primary) !important;
}

body.theme-propos .small-box {
    border-radius: var(--pp-radius);
    box-shadow: var(--pp-shadow);
}

body.theme-propos .small-box.bg-aqua,
body.theme-propos .bg-aqua {
    background-color: var(--pp-primary) !important;
}

body.theme-propos .small-box.bg-blue,
body.theme-propos .bg-blue,
body.theme-propos .bg-light-blue {
    background-color: var(--pp-navy) !important;
    color: var(--pp-sidebar-active-text) !important;
}

body.theme-propos .small-box.bg-green,
body.theme-propos .bg-green,
body.theme-propos .btn-success {
    background-color: var(--pp-primary) !important;
    border-color: var(--pp-primary) !important;
}

body.theme-propos .btn-success:hover,
body.theme-propos .btn-success:active,
body.theme-propos .btn-success:focus {
    background-color: var(--pp-primary-hover) !important;
    border-color: var(--pp-primary-hover) !important;
}

body.theme-propos .info-box {
    border-radius: var(--pp-radius);
    box-shadow: var(--pp-shadow);
}

/* Buttons */
body.theme-propos .btn {
    border-radius: var(--pp-radius-sm);
    font-weight: 700;
}

body.theme-propos .btn .fa,
body.theme-propos .fa,
body.theme-propos .fa:before {
    font-family: FontAwesome !important;
    font-weight: normal !important;
    font-style: normal !important;
}

body.theme-propos .glyphicon,
body.theme-propos .glyphicon:before {
    font-family: 'Glyphicons Halflings' !important;
}

body.theme-propos .btn-xs,
body.theme-propos .btn-group-xs > .btn,
body.theme-propos .table .btn-group .btn {
    border-radius: 3px;
    font-weight: 400;
}

body.theme-propos .table .btn-group > .btn:first-child:not(:last-child) {
    border-radius: 3px 0 0 3px;
}

body.theme-propos .table .btn-group > .btn:last-child:not(:first-child) {
    border-radius: 0 3px 3px 0;
}

body.theme-propos .table .btn-group > .btn:not(:first-child):not(:last-child) {
    border-radius: 0;
}

body.theme-propos .table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

body.theme-propos .box-body,
body.theme-propos .dataTables_wrapper {
    width: 100%;
    max-width: 100%;
    overflow: visible;
}

body.theme-propos table.dataTable {
    width: 100% !important;
    max-width: 100%;
    table-layout: auto;
}

body.theme-propos table.dataTable thead th:last-child,
body.theme-propos table.dataTable tfoot tr:first-child th:last-child,
body.theme-propos table.dataTable tfoot tr:first-child td:last-child {
    position: sticky;
    right: 0;
    z-index: 4;
    width: 1%;
    white-space: nowrap;
    text-align: center;
    background: var(--pp-bg);
    box-shadow: inset 8px 0 8px -8px rgba(18, 32, 58, 0.18);
}

body.theme-propos table.dataTable tbody td:last-child {
    position: sticky;
    right: 0;
    z-index: 3;
    width: 1%;
    white-space: nowrap;
    text-align: center;
    background: var(--pp-card);
    box-shadow: inset 8px 0 8px -8px rgba(18, 32, 58, 0.18);
}

body.theme-propos .table-striped > tbody > tr:nth-of-type(odd) > td:last-child {
    background-color: #FAFCFF;
}

body.theme-propos .table-hover > tbody > tr:hover > td:last-child {
    background-color: var(--pp-primary-soft);
}

body.theme-propos table.dataTable tbody td:last-child .btn-group {
    display: inline-flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    float: none;
    vertical-align: middle;
}

body.theme-propos.pos .list-table thead th:last-child,
body.theme-propos.pos .list-table tbody td:last-child,
body.theme-propos.pos #posTable td:last-child,
body.theme-propos.pos .list-table th.satu {
    position: static !important;
    right: auto;
    z-index: auto;
    min-width: 0 !important;
    width: 1% !important;
    max-width: none !important;
    padding: 4px 2px !important;
    text-align: center !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    white-space: nowrap !important;
}

body.theme-propos.pos .posdel,
body.theme-propos.pos .list-table .satu .fa-trash-o {
    display: inline-block !important;
    width: 18px;
    height: 18px;
    color: #dd4b39 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    vertical-align: middle;
    cursor: pointer;
    visibility: visible;
    opacity: 1;
}

body.theme-propos.pos .posdel:before,
body.theme-propos.pos .list-table .satu .fa-trash-o:before {
    content: "" !important;
    display: block !important;
    width: 18px;
    height: 18px;
    font-family: inherit !important;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dd4b39' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

body.theme-propos .btn-primary,
body.theme-propos .btn-info {
    background-color: var(--pp-primary) !important;
    border-color: var(--pp-primary) !important;
    color: #fff !important;
}

body.theme-propos.skin-yellow .btn-primary,
body.theme-propos.skin-yellow .btn-info,
body.theme-propos.skin-yellow-light .btn-primary,
body.theme-propos.skin-yellow-light .btn-info,
body.theme-propos.skin-black .btn-primary,
body.theme-propos.skin-black .btn-info,
body.theme-propos.skin-black-light .btn-primary,
body.theme-propos.skin-black-light .btn-info {
    color: var(--pp-accent-text, #fff) !important;
}

body.theme-propos.skin-yellow .btn-primary,
body.theme-propos.skin-yellow .btn-info,
body.theme-propos.skin-yellow-light .btn-primary,
body.theme-propos.skin-yellow-light .btn-info {
    color: #12203A !important;
}

body.theme-propos .btn-primary:hover,
body.theme-propos .btn-primary:active,
body.theme-propos .btn-primary:focus,
body.theme-propos .btn-info:hover,
body.theme-propos .btn-info:active,
body.theme-propos a.btn-primary:hover,
body.theme-propos a.btn-primary:focus,
body.theme-propos a.btn-info:hover,
body.theme-propos a.btn-info:focus {
    background-color: var(--pp-primary-hover) !important;
    border-color: var(--pp-primary-hover) !important;
    color: #fff !important;
}

body.theme-propos .btn-warning {
    background-color: var(--pp-accent) !important;
    border-color: var(--pp-accent) !important;
    color: var(--pp-accent-text) !important;
}

body.theme-propos .btn-warning:hover,
body.theme-propos .btn-warning:active {
    filter: brightness(0.95);
}

body.theme-propos .btn-danger,
body.theme-propos a.btn-danger,
body.theme-propos a.btn-danger:hover,
body.theme-propos a.btn-danger:focus,
body.theme-propos a.btn-danger:active {
    background-color: var(--pp-danger) !important;
    border-color: var(--pp-danger) !important;
    color: #fff !important;
}

body.theme-propos .btn-default {
    border-color: var(--pp-border);
    color: var(--pp-text);
    background: #fff;
}

body.theme-propos .btn-flat {
    border-radius: var(--pp-radius-sm) !important;
}

/* Forms */
body.theme-propos .form-control,
body.theme-propos .select2-container--default .select2-selection--single,
body.theme-propos .select2-container--default .select2-selection--multiple {
    border-radius: var(--pp-radius-sm);
    border-color: var(--pp-border);
    background: #F7F9FD;
    height: auto;
    min-height: 38px;
}

body.theme-propos .form-control:focus {
    border-color: var(--pp-primary);
    box-shadow: 0 0 0 3px var(--pp-focus-ring);
    background: #fff;
}

body.theme-propos .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--pp-primary);
}

body.theme-propos select.select2-hidden-accessible {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    min-height: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    max-width: 1px !important;
    left: 0 !important;
    top: 0 !important;
}

/* Tables */
body.theme-propos .table thead th {
    background: var(--pp-bg);
    color: var(--pp-text);
    border-bottom: 1px solid var(--pp-border) !important;
    font-weight: 700;
}

body.theme-propos .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #FAFCFF;
}

body.theme-propos .table-hover > tbody > tr:hover {
    background-color: var(--pp-primary-soft);
}

body.theme-propos .pagination > .active > a,
body.theme-propos .pagination > .active > span,
body.theme-propos .pagination > .active > a:hover,
body.theme-propos .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--pp-primary) !important;
    border-color: var(--pp-primary) !important;
    color: #fff !important;
}

/* Nav / tabs */
body.theme-propos .nav-tabs-custom > .nav-tabs > li.active {
    border-top-color: var(--pp-primary);
}

body.theme-propos .nav-pills > li.active > a,
body.theme-propos .nav-pills > li.active > a:hover,
body.theme-propos .nav-pills > li.active > a:focus {
    background-color: var(--pp-primary);
}

/* Labels / alerts */
body.theme-propos .label-primary,
body.theme-propos .label-info,
body.theme-propos .bg-light-blue {
    background-color: var(--pp-primary) !important;
}

body.theme-propos .alert-success {
    background: #E9F9EF;
    border-color: #C7F0D4;
    color: #166534;
    border-radius: var(--pp-radius-sm);
}

body.theme-propos a:not(.btn) {
    color: var(--pp-primary);
}

body.theme-propos a:not(.btn):hover,
body.theme-propos a:not(.btn):focus {
    color: var(--pp-primary-hover);
}

body.theme-propos .text-primary,
body.theme-propos .text-info,
body.theme-propos .text-aqua {
    color: var(--pp-primary) !important;
}

body.theme-propos .text-success {
    color: var(--pp-success) !important;
}

body.theme-propos .text-danger {
    color: var(--pp-danger) !important;
}

/* Modals */
body.theme-propos .modal-content {
    border-radius: var(--pp-radius);
    border: 0;
    box-shadow: 0 24px 60px rgba(18, 32, 58, 0.18);
}

body.theme-propos .modal-header {
    border-bottom-color: var(--pp-border);
}

body.theme-propos .modal-footer {
    border-top-color: var(--pp-border);
    background: #FAFCFF;
    border-radius: 0 0 var(--pp-radius) var(--pp-radius);
}

/* Footer */
body.theme-propos .main-footer {
    background: #fff;
    border-top: 1px solid var(--pp-border);
    color: var(--pp-muted);
}

/* Login */
body.theme-propos.login-page {
    background: linear-gradient(180deg, var(--pp-login-from) 0%, var(--pp-login-to) 42%, var(--pp-bg) 42%) !important;
}

body.theme-propos.skin-black.login-page,
body.theme-propos.login-page-black,
body.theme-propos.login-page-black-light {
    background: linear-gradient(180deg, #111827 0%, #1F2937 42%, var(--pp-bg) 42%) !important;
}

body.theme-propos .login-logo a,
body.theme-propos .login-logo a:hover {
    color: #fff;
    font-weight: 800;
}

body.theme-propos .login-box-body {
    background: #fff;
    border-radius: 24px;
    box-shadow: var(--pp-shadow);
    padding: 32px 28px 24px;
}

body.theme-propos .login-box-msg {
    color: var(--pp-muted);
    font-weight: 500;
}

body.theme-propos .login-box .form-control {
    border-radius: var(--pp-radius-pill);
    height: 46px;
    padding-left: 18px;
    background: var(--pp-bg);
    border: 1px solid transparent;
}

body.theme-propos .login-box .form-control:focus {
    background: #fff;
    border-color: var(--pp-primary);
}

body.theme-propos .login-box .btn-primary {
    border-radius: var(--pp-radius-pill) !important;
    padding: 12px 16px;
    margin-top: 10px;
    height: 46px;
    font-size: 15px;
}

body.theme-propos .login-box .text-danger,
body.theme-propos .login-box a.text-danger {
    color: var(--pp-primary) !important;
}

/* POS */
body.theme-propos.pos .main-header .navbar {
    background: var(--pp-header) !important;
}

body.theme-propos.pos .main-header .logo {
    background: var(--pp-navy) !important;
}

body.theme-propos.pos.skin-black .main-header .logo,
body.theme-propos.pos.skin-black-light .main-header .logo {
    background: #111827 !important;
    color: #fff !important;
}

body.theme-propos .pos #item-list .btn,
body.theme-propos .pos .contents #item-list .btn {
    border-radius: var(--pp-radius-sm);
    border-color: var(--pp-border);
    box-shadow: var(--pp-shadow);
}

body.theme-propos .pos #category-sidebar-menu li.active a,
body.theme-propos .pos .control-sidebar-menu > li.active > a {
    background: var(--pp-primary) !important;
    color: #fff !important;
}

body.theme-propos #payment,
body.theme-propos #submit-sale,
body.theme-propos #paymentModal .btn-primary,
body.theme-propos .payment-submit-sale {
    background: var(--pp-primary) !important;
    border-color: var(--pp-primary) !important;
    border-radius: var(--pp-radius-sm) !important;
}

body.theme-propos #hold {
    background: var(--pp-accent) !important;
    border-color: var(--pp-accent) !important;
    color: var(--pp-accent-text) !important;
}

body.theme-propos .bg-purple {
    background-color: var(--pp-navy) !important;
}

body.theme-propos .bg-navy {
    background-color: var(--pp-navy-2) !important;
}

@media (max-width: 767px) {
    body.theme-propos .main-header .navbar .dropdown-menu li a {
        color: var(--pp-text) !important;
    }
    body.theme-propos .main-header .navbar .dropdown-menu li a:hover {
        background: var(--pp-primary-soft) !important;
        color: var(--pp-primary) !important;
    }
}