/*
 * HRMS UI theme: one place for the look of every screen, in light and dark (body.dark-theme), on desktop and phone.
 * Loaded after the template styles (style.css, style-dark.css), so it only overrides; page-specific styles still apply.
 * Colours come from the BGIR logo: purple (primary), green (success), yellow (warning).
 */

/* ------------------------------------------------------------------ tokens */
body {
    --ui-bg: #f3f4f9;
    --ui-surface: #ffffff;
    --ui-surface-2: #f8f9fc;
    --ui-surface-3: #eef0f6;
    --ui-border: #e3e6ef;
    --ui-border-strong: #cfd4e2;
    --ui-text: #1d2433;
    --ui-text-2: #454f63;
    --ui-muted: #6b7489;
    --ui-primary: #7b2d8e;
    --ui-primary-hover: #66237a;
    --ui-primary-soft: #f5ebf8;
    --ui-primary-text: #ffffff;
    --ui-success: #3f9b3a;
    --ui-success-soft: #e9f6e8;
    --ui-warning: #c99a06;
    --ui-warning-soft: #fdf6dc;
    --ui-danger: #d64545;
    --ui-danger-soft: #fdecec;
    --ui-info: #2f7fd1;
    --ui-info-soft: #e8f1fc;
    --ui-table-head: #f6f2f9;
    --ui-row-hover: #faf6fc;
    --ui-row-stripe: #fbfbfd;
    --ui-focus: rgba(123, 45, 142, .22);
    --ui-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --ui-shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 6px 16px rgba(16, 24, 40, .05);
    --ui-shadow-lg: 0 12px 32px rgba(16, 24, 40, .14);
    --ui-radius: 12px;
    --ui-radius-sm: 8px;
    --ui-font: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body.dark-theme {
    --ui-bg: #0f1320;
    --ui-surface: #171c2b;
    --ui-surface-2: #1c2233;
    --ui-surface-3: #232a3d;
    --ui-border: #2a3247;
    --ui-border-strong: #3a4460;
    --ui-text: #e6e9f2;
    --ui-text-2: #c3c9d8;
    --ui-muted: #949db3;
    --ui-primary: #c08bd4;
    --ui-primary-hover: #d1a5e1;
    --ui-primary-soft: rgba(192, 139, 212, .14);
    --ui-primary-text: #1a1024;
    --ui-success: #6cc066;
    --ui-success-soft: rgba(108, 192, 102, .14);
    --ui-warning: #e8c341;
    --ui-warning-soft: rgba(232, 195, 65, .14);
    --ui-danger: #f07272;
    --ui-danger-soft: rgba(240, 114, 114, .14);
    --ui-info: #6aa9ec;
    --ui-info-soft: rgba(106, 169, 236, .14);
    --ui-table-head: #20263a;
    --ui-row-hover: #1f2537;
    --ui-row-stripe: #1a2030;
    --ui-focus: rgba(192, 139, 212, .3);
    --ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --ui-shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 8px 20px rgba(0, 0, 0, .25);
    --ui-shadow-lg: 0 16px 40px rgba(0, 0, 0, .5);
}

/* ------------------------------------------------------------------ base */
body.main-body,
body.main-body.dark-theme {
    background: var(--ui-bg) !important;
    color: var(--ui-text);
    font-family: var(--ui-font);
    -webkit-font-smoothing: antialiased;
}

body.main-body .page,
body.main-body .main-content,
body.main-body .app-content {
    background: transparent !important;
}

body.main-body h1, body.main-body h2, body.main-body h3,
body.main-body h4, body.main-body h5, body.main-body h6,
body.main-body .h4, body.main-body .h5 {
    color: var(--ui-text);
}

body.main-body .text-muted { color: var(--ui-muted) !important; }
body.main-body .text-dark { color: var(--ui-text) !important; }
body.main-body a { color: var(--ui-primary); }
body.main-body a:hover { color: var(--ui-primary-hover); }
body.main-body hr { border-color: var(--ui-border); }

::selection { background: var(--ui-focus); }

body.main-body ::-webkit-scrollbar { width: 10px; height: 10px; }
body.main-body ::-webkit-scrollbar-thumb { background: var(--ui-border-strong); border-radius: 10px; border: 2px solid var(--ui-bg); }
body.main-body ::-webkit-scrollbar-track { background: transparent; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ header */
body.main-body .sticky,
body.main-body .sticky.sticky-pin { background: transparent; }

body.main-body .main-header,
body.main-body.dark-theme .main-header {
    background: var(--ui-surface) !important;
    border-bottom: 1px solid var(--ui-border) !important;
    box-shadow: none !important;
    height: 64px;
}

body.main-body .main-header > .container-fluid {
    height: 64px;
    display: flex;
    align-items: center;
    padding: 0 20px;
}

body.main-body .main-header-left { display: flex; align-items: center; gap: 14px; }

/* the logo sits on its own white tile in both themes (the logo artwork has a white background) */
body.main-body .header-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    padding: 1px;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow-sm);
    margin: 0 !important;
}

body.main-body .header-brand img {
    max-width: 100%;
    max-height: 100%;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    background: transparent !important;
    padding: 0 !important;
}

body.main-body .header-brand .desktop-dark { display: none !important; }
body.main-body .header-brand .desktop-logo { display: block !important; }

body.main-body .main-header-right .nav-link { color: var(--ui-text-2) !important; }

body.main-body .main-header .menu-icon > a,
body.main-body .main-header .full-screen-link {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    padding: 0 !important;
    transition: background .15s;
}

body.main-body .main-header .menu-icon > a:hover { background: var(--ui-surface-3); }
body.main-body .main-header .menu-icon { margin: 0 2px; }

.ui-head-ico { font-size: 18px; color: var(--ui-text-2); }

body.main-body .main-header .pulse {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--ui-danger) !important;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 17px;
    box-shadow: 0 0 0 2px var(--ui-surface);
}

body.main-body .main-header .pulse::before,
body.main-body .main-header .pulse::after { display: none !important; }
body.main-body .main-header .ntfctn-count { color: #fff; }

body.main-body .main-profile-menu .profile-user img,
body.main-body .main-profile-menu .profile-user .avatar {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 2px var(--ui-surface), 0 0 0 3px var(--ui-border-strong);
}

/* theme switch */
body.main-body .themebtn {
    background: var(--ui-surface-3) !important;
    box-shadow: inset 0 0 0 1px var(--ui-border) !important;
    width: 76px;
    height: 34px;
}

body.main-body .themebtn::before { color: var(--ui-text-2) !important; font-family: var(--ui-font) !important; font-weight: 500 !important; font-size: 12px !important; }
body.main-body .btn__indicator { background: var(--ui-surface) !important; box-shadow: var(--ui-shadow) !important; }
body.main-body .btn__icon { color: var(--ui-primary) !important; }

/* ------------------------------------------------------------------ top menu */
body.main-body .horizontal-main.hor-menu,
body.main-body.dark-theme .horizontal-main.hor-menu {
    background: var(--ui-surface) !important;
    border-bottom: 1px solid var(--ui-border) !important;
    box-shadow: var(--ui-shadow-sm) !important;
}

body.main-body .horizontalMenu > .horizontalMenu-list > li > a {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    color: var(--ui-text-2) !important;
    font-size: 13.5px;
    font-weight: 500;
    padding: 8px 12px !important;
    margin: 6px 2px;
    border-radius: 9px;
    line-height: 1.4 !important;
    transition: background .15s, color .15s;
}

body.main-body .horizontalMenu > .horizontalMenu-list > li > a img { display: none; }

body.main-body .horizontalMenu > .horizontalMenu-list > li:hover > a,
body.main-body .horizontalMenu > .horizontalMenu-list > li > a.active,
body.main-body .horizontalMenu > .horizontalMenu-list > li > a:focus {
    background: var(--ui-primary-soft) !important;
    color: var(--ui-primary) !important;
}

body.main-body .horizontalMenu > .horizontalMenu-list > li > a .horizontal-icon { margin-left: 2px; font-size: 12px; opacity: .7; }

.ui-menu-ico { font-size: 15px; width: 18px; text-align: center; color: var(--ui-primary); opacity: .9; }
.ui-sub-ico { font-size: 13px; width: 18px; margin-right: 10px; text-align: center; color: var(--ui-muted); }
.ui-home-label { display: none; }

body.main-body .horizontalMenu > .horizontalMenu-list > li > ul.sub-menu {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: var(--ui-shadow-lg) !important;
    padding: 6px !important;
    min-width: 240px;
    margin-top: 2px;
}

body.main-body .horizontalMenu > .horizontalMenu-list > li > ul.sub-menu > li > a {
    display: flex !important;
    align-items: center;
    color: var(--ui-text-2) !important;
    font-size: 13.5px;
    padding: 9px 12px !important;
    border-radius: 8px;
    white-space: nowrap;
}

body.main-body .horizontalMenu > .horizontalMenu-list > li > ul.sub-menu > li > a::before { display: none !important; }

body.main-body .horizontalMenu > .horizontalMenu-list > li > ul.sub-menu > li > a:hover,
body.main-body .horizontalMenu > .horizontalMenu-list > li > ul.sub-menu > li > a.active {
    background: var(--ui-primary-soft) !important;
    color: var(--ui-primary) !important;
}

body.main-body .horizontalMenu > .horizontalMenu-list > li > ul.sub-menu > li > a:hover .ui-sub-ico { color: var(--ui-primary); }

/* ------------------------------------------------------------------ side menu (the module's own screens) */
body.main-body .app-sidebar,
body.main-body.dark-theme .app-sidebar {
    background: var(--ui-surface) !important;
    border-right: 1px solid var(--ui-border) !important;
    box-shadow: none !important;
}

body.main-body .app-sidebar .side-menu__item {
    color: var(--ui-text-2) !important;
    border-radius: 10px;
    margin: 4px 8px;
}

body.main-body .app-sidebar .side-menu__item.active,
body.main-body .app-sidebar .side-menu__item:hover {
    background: var(--ui-primary-soft) !important;
    color: var(--ui-primary) !important;
}

body.main-body .app-sidebar .side-menu__item .ui-menu-ico { font-size: 17px; }
body.main-body .app-sidebar .side-menu__label { color: inherit !important; font-weight: 600; }

body.main-body .app-sidebar .slide-item {
    display: flex !important;
    align-items: center;
    color: var(--ui-text-2) !important;
    border-radius: 8px;
    margin: 1px 8px;
    padding: 8px 12px !important;
    font-size: 13.5px;
}

body.main-body .app-sidebar .slide-item::before { display: none !important; }

body.main-body .app-sidebar .slide-item.active,
body.main-body .app-sidebar .slide-item:hover {
    background: var(--ui-primary-soft) !important;
    color: var(--ui-primary) !important;
}

body.main-body .app-sidebar__toggle a,
body.main-body .app-sidebar__toggle i { color: var(--ui-primary) !important; }

/* ------------------------------------------------------------------ page header */
body.main-body .breadcrumb-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 18px 0 16px !important;
}

body.main-body .content-title { color: var(--ui-text) !important; }

body.main-body .breadcrumb-header .content-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: -.01em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

body.main-body .content-title > i.fe { color: var(--ui-primary); font-size: 18px !important; }

body.main-body .breadcrumb { background: transparent !important; margin: 0; }
body.main-body .breadcrumb-item,
body.main-body .breadcrumb-item.active { color: var(--ui-muted) !important; font-size: 13px; }
body.main-body .breadcrumb-item a,
body.main-body .breadcrumb-item a.L-Tag { color: var(--ui-primary) !important; font-weight: 500; }
body.main-body .breadcrumb-item + .breadcrumb-item::before { color: var(--ui-border-strong) !important; }

body.main-body .Add-Edit-btn { display: flex; flex-wrap: wrap; gap: 8px; }
body.main-body .Add-Edit-btn .btn { margin: 0 !important; }

/* ------------------------------------------------------------------ cards and panels */
body.main-body .card,
body.main-body .card1,
body.main-body .panel,
body.main-body .box,
body.main-body .default-box,
body.main-body.dark-theme .card,
body.main-body.dark-theme .panel,
body.main-body.dark-theme .box {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: var(--ui-shadow) !important;
    color: var(--ui-text);
}

body.main-body .card .card,
body.main-body .card .panel,
body.main-body .card .box { box-shadow: none !important; }

body.main-body .card-header,
body.main-body .panel-header,
body.main-body.dark-theme .card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--ui-border) !important;
    color: var(--ui-text) !important;
}

body.main-body .card-title,
body.main-body .panel-header h4,
body.main-body .panel-header h5,
body.main-body .panel-header .title { color: var(--ui-text) !important; font-weight: 600; }

body.main-body .card-footer {
    background: var(--ui-surface-2) !important;
    border-top: 1px solid var(--ui-border) !important;
}

/* dashboard */
body.main-body .kpi-card {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: var(--ui-shadow-sm) !important;
    transition: transform .15s, box-shadow .15s;
}

body.main-body .kpi-card:hover { transform: translateY(-2px); box-shadow: var(--ui-shadow) !important; }
body.main-body .kpi-value { color: var(--ui-text) !important; font-weight: 700 !important; }
body.main-body .kpi-label { color: var(--ui-muted) !important; font-weight: 500; }
body.main-body .greeting-text,
body.main-body .greeting-text * { color: var(--ui-text) !important; }
body.main-body .greeting-date { color: var(--ui-muted) !important; }
body.main-body .portal-summary-header { opacity: 1 !important; }

/* ------------------------------------------------------------------ buttons */
body.main-body .btn {
    border-radius: 9px;
    box-shadow: none !important;
    font-weight: 500;
    letter-spacing: .01em;
    transition: background .15s, border-color .15s, box-shadow .15s, transform .05s;
}

body.main-body .btn:active { transform: translateY(1px); }
body.main-body .btn:focus,
body.main-body .btn.focus { box-shadow: 0 0 0 3px var(--ui-focus) !important; }
body.main-body .btn-sm { border-radius: 8px; padding: 5px 12px; font-size: 12.5px; }

body.main-body .btn-primary,
body.main-body.dark-theme .btn-primary {
    background: var(--ui-primary) !important;
    border-color: var(--ui-primary) !important;
    color: var(--ui-primary-text) !important;
}

body.main-body .btn-primary:hover,
body.main-body .btn-primary:focus {
    background: var(--ui-primary-hover) !important;
    border-color: var(--ui-primary-hover) !important;
    color: var(--ui-primary-text) !important;
}

body.main-body .btn-secondary,
body.main-body .btn-light,
body.main-body .btn-default,
body.main-body.dark-theme .btn-secondary {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border-strong) !important;
    color: var(--ui-text-2) !important;
}

body.main-body .btn-secondary:hover,
body.main-body .btn-light:hover { background: var(--ui-surface-3) !important; color: var(--ui-text) !important; }

body.main-body .btn-success { background: var(--ui-success) !important; border-color: var(--ui-success) !important; color: #fff !important; }
body.main-body .btn-danger { background: var(--ui-danger) !important; border-color: var(--ui-danger) !important; color: #fff !important; }
body.main-body .btn-warning { background: var(--ui-warning) !important; border-color: var(--ui-warning) !important; color: #1d2433 !important; }
body.main-body .btn-info { background: var(--ui-info) !important; border-color: var(--ui-info) !important; color: #fff !important; }
body.main-body.dark-theme .btn-success,
body.main-body.dark-theme .btn-danger,
body.main-body.dark-theme .btn-info { color: #10131c !important; }

body.main-body .btn-outline-primary { color: var(--ui-primary) !important; border-color: var(--ui-primary) !important; background: transparent !important; }
body.main-body .btn-outline-primary:hover { background: var(--ui-primary-soft) !important; }

body.main-body .backbutton,
body.main-body .backbutton.btn {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border-strong) !important;
    color: var(--ui-text-2) !important;
}

/* data table export buttons */
body.main-body .dt-buttons .dt-button,
body.main-body button.dt-button {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border-strong) !important;
    color: var(--ui-text-2) !important;
    border-radius: 9px !important;
    padding: 6px 12px !important;
    font-size: 12.5px !important;
    font-weight: 500;
    box-shadow: none !important;
    margin: 2px 3px !important;
}

body.main-body .dt-buttons .dt-button:hover { background: var(--ui-primary-soft) !important; color: var(--ui-primary) !important; border-color: var(--ui-primary) !important; }
body.main-body .dt-buttons .buttons-pdf i,
body.main-body .dt-buttons .buttons-pdf span::before { color: #d64545; }
body.main-body div.dt-button-collection {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-sm) !important;
    box-shadow: var(--ui-shadow-lg) !important;
}

body.main-body div.dt-button-collection .dt-button { border: 0 !important; width: 100%; text-align: left; }

/* ------------------------------------------------------------------ forms */
body.main-body label,
body.main-body .col-form-label,
body.main-body .form-label { color: var(--ui-text-2) !important; font-weight: 500; font-size: 13px; }

body.main-body .lblrequired,
body.main-body .required,
body.main-body .tx-danger { color: var(--ui-danger) !important; }

body.main-body .form-control,
body.main-body .form-select,
body.main-body select.form-control,
body.main-body textarea.form-control,
body.main-body .dt-input,
body.main-body.dark-theme .form-control,
body.main-body.dark-theme .form-select {
    background-color: var(--ui-surface) !important;
    border: 1px solid var(--ui-border-strong) !important;
    color: var(--ui-text) !important;
    border-radius: 9px !important;
    min-height: 38px;
    font-size: 13.5px;
    box-shadow: none !important;
    transition: border-color .15s, box-shadow .15s;
}

body.main-body .form-control::placeholder { color: var(--ui-muted) !important; opacity: .8; }

body.main-body .form-control:focus,
body.main-body .form-select:focus,
body.main-body .dt-input:focus {
    border-color: var(--ui-primary) !important;
    box-shadow: 0 0 0 3px var(--ui-focus) !important;
    outline: 0;
}

body.main-body .form-control:disabled,
body.main-body .form-control[readonly] {
    background-color: var(--ui-surface-3) !important;
    color: var(--ui-muted) !important;
}

body.main-body.dark-theme input[type="date"]::-webkit-calendar-picker-indicator,
body.main-body.dark-theme input[type="month"]::-webkit-calendar-picker-indicator,
body.main-body.dark-theme input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(.85); }

body.main-body.dark-theme select option { background: var(--ui-surface); color: var(--ui-text); }

body.main-body .form-check-input:checked,
body.main-body .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--ui-primary) !important;
    border-color: var(--ui-primary) !important;
}

body.main-body .input-group-text {
    background: var(--ui-surface-3) !important;
    border-color: var(--ui-border-strong) !important;
    color: var(--ui-text-2) !important;
}

/* SumoSelect */
body.main-body .SumoSelect > .CaptionCont {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border-strong) !important;
    border-radius: 9px !important;
    color: var(--ui-text) !important;
    min-height: 38px;
}

body.main-body .SumoSelect > .CaptionCont > span { color: var(--ui-text) !important; }
body.main-body .SumoSelect > .CaptionCont > span.placeholder { color: var(--ui-muted) !important; font-style: normal; }
body.main-body .SumoSelect.open > .CaptionCont,
body.main-body .SumoSelect:focus > .CaptionCont { border-color: var(--ui-primary) !important; box-shadow: 0 0 0 3px var(--ui-focus) !important; }

body.main-body .SumoSelect > .optWrapper {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-sm) !important;
    box-shadow: var(--ui-shadow-lg) !important;
}

body.main-body .SumoSelect > .optWrapper > .options li.opt { color: var(--ui-text-2); border-bottom-color: var(--ui-border) !important; }
body.main-body .SumoSelect > .optWrapper > .options li.opt:hover { background: var(--ui-primary-soft) !important; }
body.main-body .SumoSelect .select-all { background: var(--ui-surface-2) !important; color: var(--ui-text); border-bottom-color: var(--ui-border) !important; }
body.main-body .SumoSelect .search-txt { background: var(--ui-surface) !important; color: var(--ui-text) !important; }
body.main-body .SumoSelect > .optWrapper.multiple > .MultiControls { background: var(--ui-surface-2) !important; border-top-color: var(--ui-border) !important; }
body.main-body .SumoSelect > .optWrapper.multiple > .MultiControls > p { color: var(--ui-text-2); }

/* Select2 */
body.main-body .select2-container--default .select2-selection--single,
body.main-body .select2-container--default .select2-selection--multiple {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border-strong) !important;
    border-radius: 9px !important;
    min-height: 38px;
}

body.main-body .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ui-text) !important; line-height: 36px !important; }
body.main-body .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px !important; }
body.main-body .select2-container--default.select2-container--focus .select2-selection--multiple,
body.main-body .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--ui-primary) !important; }

body.main-body .select2-dropdown {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-sm) !important;
    box-shadow: var(--ui-shadow-lg);
    color: var(--ui-text);
}

body.main-body .select2-search__field { background: var(--ui-surface) !important; color: var(--ui-text) !important; border-color: var(--ui-border-strong) !important; }
body.main-body .select2-results__option--highlighted,
body.main-body .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--ui-primary) !important; color: var(--ui-primary-text) !important; }
body.main-body .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--ui-primary-soft) !important;
    border: 0 !important;
    color: var(--ui-primary) !important;
    border-radius: 6px !important;
}

/* ------------------------------------------------------------------ tables */
body.main-body .table,
body.main-body table.dataTable,
body.main-body.dark-theme .table {
    color: var(--ui-text) !important;
    border-color: var(--ui-border) !important;
    background: transparent !important;
    margin-bottom: 0;
}

body.main-body .table thead th,
body.main-body table.dataTable thead th,
body.main-body table.dataTable thead td,
body.main-body.dark-theme .table thead th {
    background: var(--ui-table-head) !important;
    color: var(--ui-text-2) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--ui-border) !important;
    border-top: 0 !important;
    padding: 12px 12px !important;
    white-space: nowrap;
}

body.main-body .table thead tr:first-child th:first-child { border-top-left-radius: 10px; }
body.main-body .table thead tr:first-child th:last-child { border-top-right-radius: 10px; }

body.main-body .table td,
body.main-body table.dataTable tbody td,
body.main-body.dark-theme .table td {
    background: transparent !important;
    color: var(--ui-text) !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--ui-border) !important;
    padding: 11px 12px !important;
    vertical-align: middle;
    font-size: 13.5px;
}

body.main-body table.dataTable tbody tr,
body.main-body .table tbody tr { background: var(--ui-surface) !important; }
body.main-body table.dataTable tbody tr:nth-child(even) { background: var(--ui-row-stripe) !important; }
body.main-body .table tbody tr:hover,
body.main-body table.dataTable tbody tr:hover { background: var(--ui-row-hover) !important; }
body.main-body table.dataTable tbody td.sorting_1,
body.main-body table.dataTable tbody tr > .dtfc-fixed-left,
body.main-body table.dataTable tbody tr > .dtfc-fixed-start { background: inherit !important; box-shadow: none !important; }
body.main-body table.dataTable > tbody > tr > * { box-shadow: none !important; }

body.main-body .tableDark,
body.main-body .table-responsive,
body.main-body .dt-container .row > .col-sm-12:has(> table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

body.main-body .table-bordered,
body.main-body .table-bordered td,
body.main-body .table-bordered th { border-color: var(--ui-border) !important; }

/* action icons in tables */
body.main-body .table .viewicon,
body.main-body .table .editicon,
body.main-body .table .delete-ic,
body.main-body .table .ak_table_icon,
body.main-body .table .typcn-eye-outline,
body.main-body .table .typcn-edit,
body.main-body .table .trash {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: 15px;
    transition: background .15s;
}

body.main-body .table .typcn-eye-outline,
body.main-body .table .viewicon { color: var(--ui-info) !important; }
body.main-body .table .typcn-edit,
body.main-body .table .editicon { color: var(--ui-primary) !important; }
body.main-body .table .trash,
body.main-body .table .delete-ic { color: var(--ui-danger) !important; }
body.main-body .table a:hover > .typcn-eye-outline,
body.main-body .table .viewicon:hover { background: var(--ui-info-soft); }
body.main-body .table a:hover > .typcn-edit,
body.main-body .table .editicon:hover { background: var(--ui-primary-soft); }
body.main-body .table .trash:hover,
body.main-body .table .delete-ic:hover { background: var(--ui-danger-soft); }

/* DataTables controls */
body.main-body .dt-container,
body.main-body .dataTables_wrapper { color: var(--ui-text-2); }
body.main-body .dt-length label,
body.main-body .dt-search label,
body.main-body .dt-info { color: var(--ui-muted) !important; font-size: 13px; }
body.main-body .dt-search input,
body.main-body .dataTables_filter input { min-width: 200px; }
body.main-body .dt-length select { min-width: 72px; }

/* style.css paints .dt-paging as a blue pill with white text; DataTables 2 sets button colour to inherit */
body.main-body div.dt-container .dt-paging,
body.main-body #EmpWiseSummary .dt-paging {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    color: var(--ui-muted) !important;
}

body.main-body div.dt-container .dt-paging .dt-paging-button,
body.main-body .dataTables_paginate .paginate_button,
body.main-body .page-link {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    color: var(--ui-text-2) !important;
    border-radius: 8px !important;
    margin: 0 2px !important;
    min-width: 34px;
}

body.main-body div.dt-container .dt-paging .dt-paging-button:hover:not(.disabled),
body.main-body .page-link:hover { background: var(--ui-primary-soft) !important; color: var(--ui-primary) !important; border-color: var(--ui-primary) !important; }

body.main-body div.dt-container .dt-paging .dt-paging-button.current,
body.main-body div.dt-container .dt-paging .dt-paging-button.current:hover,
body.main-body .page-item.active .page-link {
    background: var(--ui-primary) !important;
    border-color: var(--ui-primary) !important;
    color: var(--ui-primary-text) !important;
}

body.main-body div.dt-container .dt-paging .dt-paging-button.disabled,
body.main-body div.dt-container .dt-paging .dt-paging-button.disabled:hover {
    background: var(--ui-surface-2) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-muted) !important;
    opacity: .6;
    cursor: default;
}

body.main-body div.dt-container .dt-paging .ellipsis { color: var(--ui-muted) !important; padding: 0 6px; }

body.main-body div.dt-processing,
body.main-body .dataTables_processing {
    background: var(--ui-surface) !important;
    color: var(--ui-text-2) !important;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-sm);
    box-shadow: var(--ui-shadow);
}

body.main-body div.dt-processing > div:last-child > div { background: var(--ui-primary) !important; }

/* ------------------------------------------------------------------ badges, alerts, tabs */
body.main-body .badge { border-radius: 6px; font-weight: 600; padding: .38em .6em; }
body.main-body .badge-success, body.main-body .bg-success { background-color: var(--ui-success) !important; }
body.main-body .badge-danger, body.main-body .bg-danger { background-color: var(--ui-danger) !important; }
body.main-body .badge-warning, body.main-body .bg-warning { background-color: var(--ui-warning) !important; }
body.main-body .badge-primary, body.main-body .bg-primary { background-color: var(--ui-primary) !important; }
body.main-body .text-primary { color: var(--ui-primary) !important; }
body.main-body .text-success { color: var(--ui-success) !important; }
body.main-body .text-danger { color: var(--ui-danger) !important; }
body.main-body .text-warning { color: var(--ui-warning) !important; }

body.main-body .alert { border-radius: var(--ui-radius-sm); border: 1px solid transparent; }
body.main-body .alert-success { background: var(--ui-success-soft) !important; color: var(--ui-success) !important; border-color: transparent !important; }
body.main-body .alert-danger { background: var(--ui-danger-soft) !important; color: var(--ui-danger) !important; border-color: transparent !important; }
body.main-body .alert-warning { background: var(--ui-warning-soft) !important; color: var(--ui-text) !important; border-color: transparent !important; }
body.main-body .alert-info { background: var(--ui-info-soft) !important; color: var(--ui-info) !important; border-color: transparent !important; }

body.main-body .nav-tabs { border-bottom: 1px solid var(--ui-border) !important; gap: 4px; }
body.main-body .nav-tabs .nav-link {
    color: var(--ui-muted) !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    background: transparent !important;
    font-weight: 500;
    padding: 10px 14px;
}

body.main-body .nav-tabs .nav-link.active,
body.main-body .nav-tabs .nav-link:hover { color: var(--ui-primary) !important; border-bottom-color: var(--ui-primary) !important; }

body.main-body .nav-pills .nav-link { border-radius: 9px; color: var(--ui-text-2); }
body.main-body .nav-pills .nav-link.active { background: var(--ui-primary) !important; color: var(--ui-primary-text) !important; }

/* ------------------------------------------------------------------ dropdowns, modals, alerts */
body.main-body .dropdown-menu,
body.main-body.dark-theme .dropdown-menu {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: var(--ui-shadow-lg) !important;
    color: var(--ui-text);
}

body.main-body .dropdown-item { color: var(--ui-text-2) !important; border-radius: 8px; }
body.main-body .dropdown-item:hover,
body.main-body .dropdown-item:focus { background: var(--ui-primary-soft) !important; color: var(--ui-primary) !important; }
body.main-body .dropdown-divider { border-color: var(--ui-border) !important; }
body.main-body .main-header-notification .dropdown-menu,
body.main-body .main-profile-menu .dropdown-menu { overflow: hidden; }
body.main-body .menu-header-content,
body.main-body .main-header-notification .menu-header-content { background: var(--ui-primary) !important; }

body.main-body .modal-content,
body.main-body.dark-theme .modal-content {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--ui-shadow-lg) !important;
    color: var(--ui-text);
}

body.main-body .modal-header,
body.main-body .modal-footer { border-color: var(--ui-border) !important; background: transparent !important; }
body.main-body .modal-title { color: var(--ui-text) !important; font-weight: 600; }
body.main-body.dark-theme .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
.modal-backdrop.show { opacity: .55; }

body.main-body .swal2-popup {
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    border-radius: 16px !important;
}

body.main-body .swal2-title { color: var(--ui-text) !important; }
body.main-body .swal2-html-container { color: var(--ui-text-2) !important; }
body.main-body .swal2-styled.swal2-confirm { background: var(--ui-primary) !important; border-radius: 9px !important; color: var(--ui-primary-text) !important; }
body.main-body .swal2-styled.swal2-cancel { border-radius: 9px !important; }
body.main-body .swal2-styled:focus { box-shadow: 0 0 0 3px var(--ui-focus) !important; }

/* ------------------------------------------------------------------ footer */
body.main-body .main-content.app-content { padding-bottom: 64px; }

body.main-body .main-footer,
body.main-body.dark-theme .main-footer {
    background: var(--ui-surface) !important;
    border-top: 1px solid var(--ui-border) !important;
    color: var(--ui-muted) !important;
    font-size: 12.5px;
    box-shadow: none !important;
}

body.main-body .main-footer a { color: var(--ui-primary) !important; }
body.main-body .main-footer span,
body.main-body .main-footer div { color: var(--ui-muted); }

/* ------------------------------------------------------------------ calendar widgets and charts */
body.main-body .apexcharts-text,
body.main-body .apexcharts-legend-text { fill: var(--ui-text-2) !important; color: var(--ui-text-2) !important; }
body.main-body .apexcharts-gridline { stroke: var(--ui-border) !important; }
body.main-body .apexcharts-tooltip { background: var(--ui-surface) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; }

/* dashboard calendar */
body.main-body .calendar-container .day-header { color: var(--ui-muted) !important; font-weight: 600; font-size: 12px; }
body.main-body .calendar-container .day-cell {
    background: var(--ui-surface-2) !important;
    color: var(--ui-text) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

body.main-body .calendar-container .day-cell:hover { border-color: var(--ui-primary) !important; }
body.main-body .calendar-container .day-cell.other-month { background: transparent !important; color: var(--ui-muted) !important; opacity: .55; }
body.main-body .calendar-container .day-cell.today {
    background: var(--ui-primary) !important;
    border-color: var(--ui-primary) !important;
    color: var(--ui-primary-text) !important;
    font-weight: 700;
}

body.main-body .calendar-container select.dropdown {
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    border: 1px solid var(--ui-border-strong) !important;
    border-radius: 9px !important;
}

body.main-body .calendar-container .nav-button {
    background: var(--ui-primary-soft) !important;
    color: var(--ui-primary) !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.main-body .calendar-container .legend { background: transparent !important; color: var(--ui-text-2) !important; }
body.main-body .calendar-container .legend-item { color: var(--ui-text-2) !important; }

body.main-body .fc,
body.main-body .fc th,
body.main-body .fc td { border-color: var(--ui-border) !important; color: var(--ui-text); }

/* empty state for charts and lists with no data */
.ui-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 260px;
    color: var(--ui-muted);
    font-size: 14px;
}

.ui-empty i { font-size: 34px; color: var(--ui-border-strong); }

/* ------------------------------------------------------------------ loader */
body.main-body #global-loader { background: var(--ui-bg) !important; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 991.98px) {
    /* the header is fixed on small screens; keep the page below it */
    body.main-body .main-content.app-content { padding-top: 58px !important; }
    body.main-body .breadcrumb-header { padding-top: 0 !important; }

    body.main-body .main-header,
    body.main-body .main-header > .container-fluid { height: 58px; }
    body.main-body .main-header > .container-fluid { padding: 0 12px; }

    body.main-body .header-brand { width: 40px; height: 40px; }

    /* the template's menu toggle (hamburger) */
    body.main-body .animated-arrow.hor-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        position: relative !important;
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 10px;
        background: var(--ui-surface-3);
        top: auto !important;
        left: auto !important;
    }

    body.main-body .animated-arrow.hor-toggle span,
    body.main-body .animated-arrow.hor-toggle span::before,
    body.main-body .animated-arrow.hor-toggle span::after { background: var(--ui-text-2) !important; }
    body.main-body .animated-arrow.hor-toggle span { position: relative; margin: 0 !important; top: auto !important; left: auto !important; }

    /* the menu becomes a drawer */
    body.main-body .horizontal-main.hor-menu { border-bottom: 0 !important; box-shadow: none !important; }
    body.main-body .horizontalMenu > .horizontalMenu-list {
        background: var(--ui-surface) !important;
        box-shadow: var(--ui-shadow-lg);
        padding: 12px 10px 80px !important;
    }

    body.main-body .horizontalMenu > .horizontalMenu-list > li { border: 0 !important; }
    body.main-body .horizontalMenu > .horizontalMenu-list > li > a { display: flex !important; margin: 2px 0; padding: 12px 14px !important; }
    body.main-body .horizontalMenu > .horizontalMenu-list > li > a .horizontal-icon { margin-left: auto; }
    body.main-body .horizontalMenu > .horizontalMenu-list > li > ul.sub-menu {
        box-shadow: none !important;
        border: 0 !important;
        background: var(--ui-surface-2) !important;
        margin: 2px 0 6px;
        min-width: 0;
    }

    body.main-body .horizontalMenu > .horizontalMenu-list > li > .horizontalMenu-click > i { color: var(--ui-text-2) !important; }
    body.main-body .horizontal-overlapbg { background: rgba(10, 12, 20, .5) !important; }
    .ui-home-label { display: inline; }

    body.main-body .main-header-message.signout label { display: none; }
}

@media (max-width: 767.98px) {
    body.main-body .main-content .container-fluid,
    body.main-body .main-content > .container-fluid { padding-left: 12px !important; padding-right: 12px !important; }

    /* the module side menu takes no room on a phone */
    body.main-body .app-sidebar { display: none !important; }
    body.main-body .app-content,
    body.main-body .main-content.app-content { margin-left: 0 !important; padding-left: 0 !important; }

    body.main-body .breadcrumb-header { flex-direction: column; align-items: flex-start !important; margin: 14px 0 12px !important; }
    body.main-body .breadcrumb-header > div { flex-wrap: wrap; width: 100%; }
    body.main-body .breadcrumb-header .breadcrumb { display: none; }
    body.main-body .content-title { font-size: 18px !important; }
    body.main-body .Add-Edit-btn { width: 100%; }
    body.main-body .Add-Edit-btn .btn { flex: 1 1 auto; text-align: center; }

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

    /* DataTables header controls stack */
    body.main-body .dt-container > .row:first-child > div { width: 100%; max-width: 100%; flex: 0 0 100%; text-align: left !important; margin-bottom: 8px; }
    body.main-body .dt-search,
    body.main-body .dt-length { display: flex; align-items: center; gap: 8px; }
    body.main-body .dt-search input { flex: 1; min-width: 0; margin-left: 0 !important; }
    body.main-body .dt-buttons { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-start !important; }
    body.main-body .dt-container > .row:last-child > div { width: 100%; max-width: 100%; flex: 0 0 100%; justify-content: center !important; text-align: center; }
    body.main-body .dt-paging nav { display: flex; flex-wrap: wrap; justify-content: center; }

    body.main-body .table td,
    body.main-body .table th { white-space: nowrap; }

    body.main-body .modal-dialog { margin: 10px; }

    body.main-body .main-footer { text-align: center; }
    body.main-body .main-footer .row > div,
    body.main-body .main-footer .container-fluid > div { width: 100%; text-align: center !important; margin: 2px 0; }

    body.main-body .main-header .menu-icon { margin: 0; }

    /* dashboard */
    body.main-body .kpi-row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    body.main-body .kpi-row .kpi-card { width: auto !important; margin: 0 !important; }
    body.main-body .charts-row,
    body.main-body .box-wrap-1,
    body.main-body .bottom-row { display: flex !important; flex-direction: column; gap: 12px; }
    body.main-body .charts-row > *,
    body.main-body .box-wrap-1 > *,
    body.main-body .bottom-row > * { width: 100% !important; max-width: 100% !important; }
}

@media (max-width: 400px) {
    body.main-body .themebtn::before { display: none; }
    body.main-body .themebtn { width: 62px; }
}

body.main-body .main-header .pulse.ui-hidden { display: none !important; }

/* ------------------------------------------------------------------ page widgets with their own colours */
/* settings tabs (Company, Branch, Salary/Tax settings, Setting, Tax Master) */
body.main-body .tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--ui-border); padding-bottom: 10px; }
body.main-body .tabs a.tab,
body.main-body a.tab {
    background: var(--ui-surface-3) !important;
    color: var(--ui-text-2) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 9px !important;
    padding: 8px 14px !important;
    font-weight: 500;
    font-size: 13px;
    box-shadow: none !important;
}

body.main-body .tabs a.tab:hover,
body.main-body a.tab:hover { color: var(--ui-primary) !important; border-color: var(--ui-primary) !important; }
body.main-body .tabs a.tab.active,
body.main-body a.tab.active { background: var(--ui-primary) !important; border-color: var(--ui-primary) !important; color: var(--ui-primary-text) !important; }

/* explanatory notes under headings (lp-note, ar-note, mp-note, ...) */
body.main-body p[class$="-note"],
body.main-body span[class$="-note"],
body.main-body div[class$="-note"] { color: var(--ui-muted) !important; }

/* back / secondary buttons the pages colour themselves */
body.main-body .btn-primary-back,
body.main-body .Backbutton,
body.main-body .btn-danger-outline {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border-strong) !important;
    color: var(--ui-text-2) !important;
}

body.main-body .btn-primary-back:hover,
body.main-body .Backbutton:hover { background: var(--ui-surface-3) !important; color: var(--ui-text) !important; }

/* any plain table (not only .table) */
body.main-body table th { color: var(--ui-text-2); }
body.main-body.dark-theme table th { background-color: var(--ui-table-head) !important; color: var(--ui-text-2) !important; border-color: var(--ui-border) !important; }
body.main-body.dark-theme table td { color: var(--ui-text); border-color: var(--ui-border) !important; }

/* containers that are white or pastel in the page styles */
body.main-body.dark-theme .bg-white,
body.main-body.dark-theme .bg-light,
body.main-body.dark-theme .notification-list,
body.main-body.dark-theme #fullNotification,
body.main-body.dark-theme .header-sec2,
body.main-body.dark-theme .content-wrapper,
body.main-body.dark-theme .regime-card,
body.main-body.dark-theme .block:not([class*="bg-"]) {
    background-color: var(--ui-surface-2) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}

body.main-body .regime-card { border: 1px solid var(--ui-border); border-radius: var(--ui-radius); }
body.main-body.dark-theme .text-dark { color: var(--ui-text) !important; }
body.main-body.dark-theme .num { color: var(--ui-text) !important; }

/* task dashboard count tiles: tinted card, the colour on a top bar and the number */
body.main-body .block[class*="bg-"] {
    --tile: var(--ui-primary);
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-top: 4px solid var(--tile) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: var(--ui-shadow-sm) !important;
    transition: transform .15s, box-shadow .15s;
}

body.main-body .block[class*="bg-"]:hover { transform: translateY(-2px); box-shadow: var(--ui-shadow) !important; }
body.main-body .block.bg-yellow { --tile: #e0a800; }
body.main-body .block.bg-blue { --tile: #3b6cf6; }
body.main-body .block.bg-green { --tile: #2fa864; }
body.main-body .block.bg-red { --tile: #f0715f; }
body.main-body .block.bg-red-2 { --tile: #e03131; }
body.main-body .block.bg-purple { --tile: #7b2d8e; }
body.main-body.dark-theme .block.bg-purple { --tile: #c08bd4; }
body.main-body .block[class*="bg-"] .num { color: var(--tile) !important; font-weight: 700; }
body.main-body .block[class*="bg-"] p,
body.main-body .block[class*="bg-"] span { color: var(--ui-text-2) !important; font-weight: 500; }

/* dashboard task tiles */
body.main-body .mini-kpi { border-radius: var(--ui-radius-sm) !important; }
body.main-body.dark-theme .mini-kpi {
    background-color: var(--ui-surface-2) !important;
    border: 1px solid var(--ui-border) !important;
    border-left: 4px solid var(--ui-primary) !important;
}

body.main-body .mini-kpi-value { color: var(--ui-text) !important; font-weight: 700; }
body.main-body .mini-kpi-label { color: var(--ui-muted) !important; }

/* inputs the pages style without .form-control (tax calculator boxes and similar) */
body.main-body.dark-theme input[type="text"]:not(.btn),
body.main-body.dark-theme input[type="number"],
body.main-body.dark-theme input[type="email"],
body.main-body.dark-theme input[type="date"],
body.main-body.dark-theme input[type="month"],
body.main-body.dark-theme input[type="password"],
body.main-body.dark-theme input:not([type]),
body.main-body.dark-theme textarea,
body.main-body.dark-theme select {
    background-color: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    border-color: var(--ui-border-strong) !important;
}

body.main-body.dark-theme .regime-card-section-body .d-flex,
body.main-body.dark-theme .regime-card-section-body .d-flex > div,
body.main-body.dark-theme div.content-wrapper,
body.main-body.dark-theme .card-body div.content-wrapper { background-color: var(--ui-surface-2) !important; color: var(--ui-text) !important; }

body.main-body .exp-btn {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border-strong) !important;
    color: var(--ui-text-2) !important;
    border-radius: 9px !important;
}

body.main-body .exp-btn:hover { color: var(--ui-primary) !important; border-color: var(--ui-primary) !important; }

/* leave: profile box and the year calendar */
body.main-body [class^="leave-apply-box"] {
    background: var(--ui-surface-2) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius) !important;
    color: var(--ui-text);
}

body.main-body .calendar .month-container { padding: 6px; }
body.main-body .calendar table.month {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-sm) !important;
    box-shadow: var(--ui-shadow-sm) !important;
    overflow: hidden;
}

body.main-body .calendar .month-title {
    background: var(--ui-primary-soft) !important;
    color: var(--ui-primary) !important;
    font-weight: 600;
    padding: 7px 0 !important;
}

body.main-body .calendar .day-header,
body.main-body .calendar .week-number { color: var(--ui-text-2) !important; font-weight: 600; }
body.main-body .calendar .day .day-content { color: var(--ui-text-2) !important; border-radius: 6px; }
body.main-body .calendar .day .day-content:hover { background: var(--ui-primary-soft) !important; color: var(--ui-primary) !important; }
body.main-body .calendar .calendar-header {
    background: var(--ui-surface) !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius-sm);
}

body.main-body .calendar .calendar-header table th { background: transparent !important; color: var(--ui-text) !important; border: 0 !important; }
body.main-body .calendar .calendar-header .year-title:not(.year-neighbor):not(.year-neighbor2) { color: var(--ui-text) !important; }
body.main-body .calendar .calendar-header .year-neighbor,
body.main-body .calendar .calendar-header .year-neighbor2 { color: var(--ui-muted) !important; }
body.main-body .calendar .calendar-header th:hover { background: var(--ui-surface-3) !important; }

/* filter rows above lists */
body.main-body #drpdwn-btn { background: transparent !important; }
body.main-body .btn { font-style: normal !important; }

/* back to top */
body.main-body #back-to-top,
body.main-body .back-to-top {
    background: var(--ui-primary) !important;
    color: var(--ui-primary-text) !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: var(--ui-shadow-lg) !important;
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
}

body.main-body #back-to-top i,
body.main-body .back-to-top i { color: var(--ui-primary-text) !important; }