:root {
    --xf-subnav-height: 56px;
    --xf-sidebar-bg: #6c3bff;
    --xf-sidebar-active-bg: #dc3545;
    --xf-sidebar-link: #ffffff;
    --xf-sidebar-muted: rgba(255, 255, 255, 0.62);
    --xf-icon-blue: #0ea5e9;
    --xf-icon-indigo: #6366f1;
    --xf-icon-violet: #8b5cf6;
    --xf-icon-emerald: #10b981;
    --xf-icon-amber: #f59e0b;
    --xf-icon-rose: #f43f5e;
    --xf-icon-cyan: #06b6d4;
}

/*
 * Keep the admin side menu purple by default, and paint the menu list itself
 * as well as the sidebar container. This prevents long menu items from
 * overflowing below the sidebar background and appearing as white text on the
 * page background during first paint or menu scrolling.
 */
body.admin #menu.sidebar,
body.admin .sidebar,
body.admin #side-menu,
body.admin #setup-menu,
body.admin #setup-menu-wrapper {
    background: var(--xf-sidebar-bg) !important;
}

body.admin #menu.sidebar,
body.admin .sidebar {
    border-right: 0 !important;
}

[dir="rtl"] body.admin #menu.sidebar,
[dir="rtl"] body.admin .sidebar {
    border-left: 0 !important;
}

body.admin #side-menu,
body.admin #setup-menu {
    min-height: 100vh;
    padding-bottom: 2rem;
}

body.admin #side-menu {
    padding-top: var(--xf-subnav-height) !important;
}

body.admin #menu.sidebar {
    overflow-x: hidden;
}

/* Department dividers are interactive headings, not passive faint labels.
   The centered pill gives the hierarchy a strong scan point while the rule
   preserves separation without consuming unnecessary vertical space. */
body.admin #side-menu > li.menu-section-label {
    align-items: center;
    color: #ffffff !important;
    cursor: pointer;
    display: flex !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    gap: 9px;
    justify-content: center;
    line-height: 1.35 !important;
    margin: 14px 10px 7px !important;
    min-height: 38px;
    overflow: hidden;
    padding: 0 8px !important;
    position: relative;
    text-align: center;
    user-select: none;
}

body.admin #side-menu > li.menu-section-label::before,
body.admin #side-menu > li.menu-section-label::after {
    background: rgba(255, 255, 255, 0.28);
    content: "";
    flex: 1 1 0;
    height: 1px;
    min-width: 10px;
    pointer-events: none;
}

body.admin #side-menu > li.menu-section-label > span {
    align-items: center;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(28, 12, 67, 0.14);
    color: inherit !important;
    display: inline-flex !important;
    gap: 7px;
    justify-content: center;
    max-width: calc(100% - 14px);
    padding: 6px 11px;
    position: relative;
    flex: 0 1 auto;
    white-space: normal !important;
    z-index: 1;
}

body.admin #side-menu > li.menu-section-label:hover > span,
body.admin #side-menu > li.menu-section-label:focus > span,
body.admin #side-menu > li.menu-section-label:focus-visible > span {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.42);
}

body.admin #side-menu > li.menu-section-label:focus,
body.admin #side-menu > li.menu-section-label:focus-visible {
    outline: none;
}

body.admin #side-menu > li.menu-section-label:focus-visible > span {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

body.admin #side-menu .xf-sidebar-section-chevron {
    color: #ffffff !important;
    flex: 0 0 auto;
    font-size: 10px;
    transition: transform 0.18s ease;
}

body.admin #side-menu > li.menu-section-label.is-collapsed .xf-sidebar-section-chevron {
    transform: rotate(90deg);
}

body.admin #side-menu > li.xf-sidebar-section-hidden {
    display: none !important;
}

/*
 * Close controls must keep their contrast regardless of the surface behind
 * them. A light control surface with a dark icon works on both light and dark
 * panels and avoids theme utility classes making the icon disappear.
 */
body.admin #setup-menu .close-customizer,
body.admin .sidebar .close-customizer,
body.admin button.close,
body.admin a.close,
body.admin .btn-close {
    color: #172033 !important;
    background-color: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(23, 32, 51, 0.18) !important;
    border-radius: 999px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.22) !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

body.admin #setup-menu .close-customizer {
    align-items: center !important;
    cursor: pointer;
    display: inline-flex !important;
    flex: 0 0 32px;
    height: 32px;
    justify-content: center !important;
    min-width: 32px;
    padding: 0 !important;
}

body.admin #setup-menu .close-customizer i,
body.admin .sidebar .close-customizer i,
body.admin button.close > span,
body.admin button.close i,
body.admin a.close i,
body.admin .btn-close i,
body.admin .btn-close svg {
    color: inherit !important;
    opacity: 1 !important;
    stroke: currentColor !important;
}

body.admin #setup-menu .close-customizer:hover,
body.admin #setup-menu .close-customizer:focus,
body.admin .sidebar .close-customizer:hover,
body.admin .sidebar .close-customizer:focus,
body.admin button.close:hover,
body.admin button.close:focus,
body.admin a.close:hover,
body.admin a.close:focus,
body.admin .btn-close:hover,
body.admin .btn-close:focus {
    color: #020617 !important;
    background-color: #ffffff !important;
    border-color: rgba(23, 32, 51, 0.36) !important;
    opacity: 1 !important;
}

body.admin #setup-menu .close-customizer:focus-visible,
body.admin .sidebar .close-customizer:focus-visible,
body.admin button.close:focus-visible,
body.admin a.close:focus-visible,
body.admin .btn-close:focus-visible {
    outline: 2px solid #ffffff !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(23, 32, 51, 0.42) !important;
}

body.admin .sidebar ul.nav li a,
body.admin #side-menu li a,
body.admin #setup-menu li a,
body.admin .sidebar ul.nav li a i.menu-icon,
body.admin .sidebar ul.nav li a .menu-icon,
body.admin #side-menu li a i.menu-icon,
body.admin #setup-menu li a i.menu-icon {
    color: var(--xf-sidebar-link) !important;
}

body.admin .sidebar > ul.nav > li > a,
body.admin #side-menu > li > a,
body.admin #setup-menu > li > a {
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
}

body.admin .sidebar > ul.nav > li:hover > a:first-child,
body.admin .sidebar > ul.nav > li.active > a:first-child,
body.admin #side-menu > li.active > a,
body.admin #setup-menu > li.active > a,
body.admin #side-menu.nav > li > a:hover,
body.admin #side-menu.nav > li > a:focus,
body.admin #setup-menu.nav > li > a:hover,
body.admin #setup-menu.nav > li > a:focus {
    background: var(--xf-sidebar-active-bg) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 0.375rem !important;
    box-shadow: none !important;
    color: var(--xf-sidebar-link) !important;
}

body.admin .sidebar > ul.nav > li:hover > a:first-child i.menu-icon,
body.admin .sidebar > ul.nav > li.active > a:first-child i.menu-icon,
body.admin #side-menu > li.active > a i.menu-icon,
body.admin #setup-menu > li.active > a i.menu-icon,
body.admin #side-menu.nav > li > a:hover i.menu-icon,
body.admin #side-menu.nav > li > a:focus i.menu-icon,
body.admin #setup-menu.nav > li > a:hover i.menu-icon,
body.admin #setup-menu.nav > li > a:focus i.menu-icon {
    color: var(--xf-sidebar-link) !important;
}

body.admin .sidebar ul.nav li .nav-second-level,
body.admin #side-menu li .nav-second-level,
body.admin #setup-menu li .nav-second-level {
    background: var(--xf-sidebar-bg) !important;
}

body.admin .sidebar ul.nav li .nav-second-level li a,
body.admin #side-menu li .nav-second-level li a,
body.admin #setup-menu li .nav-second-level li a {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

body.admin .sidebar ul.nav li .nav-second-level li.active > a,
body.admin #side-menu li .nav-second-level li.active > a,
body.admin #setup-menu li .nav-second-level li.active > a,
body.admin .sidebar ul.nav li .nav-second-level li a:hover,
body.admin #side-menu li .nav-second-level li a:hover,
body.admin #setup-menu li .nav-second-level li a:hover,
body.admin .sidebar ul.nav li .nav-second-level li a:focus,
body.admin #side-menu li .nav-second-level li a:focus,
body.admin #setup-menu li .nav-second-level li a:focus {
    background: rgba(255, 255, 255, 0.14) !important;
    border-radius: 0.375rem !important;
    color: var(--xf-sidebar-link) !important;
}

body.admin #header {
    background: var(--xf-sidebar-bg) !important;
    border-bottom: 0 !important;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.12), 0 1px 2px -1px rgb(0 0 0 / 0.12) !important;
}

body.admin #header .logo,
body.admin #header .logo-text,
body.admin #header .navbar-nav > li > a,
body.admin #header .navbar-nav > li > a i,
body.admin #header .navbar-nav > li > a svg,
body.admin #header .navbar-nav > li > a span,
body.admin #header .icon,
body.admin #header .icon a,
body.admin #header .mobile-menu-toggle,
body.admin #header .open-customizer-mobile,
body.admin #header .hide-menu,
body.admin #header .top-nav,
body.admin #header .top-nav a,
body.admin #header .top-nav i,
body.admin #header button,
body.admin #header button i {
    color: var(--xf-sidebar-link) !important;
}

body.admin #header .hide-menu svg,
body.admin #header .hide-menu path,
body.admin #header .mobile-menu-toggle svg,
body.admin #header .mobile-menu-toggle path,
body.admin #header .navbar-nav > li > a svg,
body.admin #header .navbar-nav > li > a path {
    stroke: var(--xf-sidebar-link) !important;
}

body.admin #header li > a.active,
body.admin #header .navbar-nav > li > a:hover,
body.admin #header .navbar-nav > li > a:focus,
body.admin #header .navbar-nav .open > a,
body.admin #header .navbar-nav .open > a:hover,
body.admin #header .navbar-nav .open > a:focus {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--xf-sidebar-link) !important;
}

/*
 * The global navbar link rule adds vertical padding to all header links. Keep
 * the profile trigger at the header's exact height and center its avatar.
 */
body.admin #header .header-user-profile {
    display: flex;
    align-items: center;
    height: 57px;
}

body.admin #header .header-user-profile > .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    height: 57px;
    margin: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1;
    box-sizing: border-box;
}

body.admin #header .header-user-profile .staff-profile-image-small {
    display: block;
    flex: 0 0 auto;
    align-self: center;
    margin-top: 0;
    margin-bottom: 0;
}

body.admin #header #search_input,
body.admin #header .search-input,
body.admin #header input[type="search"] {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
}

body.admin #header #search_input::placeholder,
body.admin #header .search-input::placeholder,
body.admin #header input[type="search"]::placeholder {
    color: rgba(255, 255, 255, 0.75) !important;
}

body.admin #header .header-quick-setup-menu {
    width: 340px;
    max-width: calc(100vw - 30px);
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

body.admin #header .header-quick-setup-menu > li > a,
body.admin #header .header-quick-setup-menu .dropdown-header {
    white-space: normal;
}

[dir="rtl"] body.admin #header .header-quick-setup-menu {
    text-align: right;
}

#xf-allmodules-overlay {
    isolation: isolate;
}

#xf-allmodules-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.xf-module-card {
    display: flex;
    width: 100%;
}

/* Ensure all cards in the module grid are the same height */
.xf-module-card .card {
    min-height: 100%;
    width: 100%;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.xf-module-card .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.xf-module-children {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 160px;
    overflow-y: auto;
}

/* XFATORA AUTH LOGO FIX */
body.login_admin .company-logo img{
    display:block;
    width:auto!important;
    height:auto!important;
    max-width:260px!important;
    max-height:112px!important;
    object-fit:contain;
    margin:0 auto;
}

/* ==========================================================================
   Xfatora UI system
   Keep these final overrides together so core and module screens share the
   same brand, interaction and surface language.
   ========================================================================== */
:root {
    --xf-brand-50: #f7f3ff;
    --xf-brand-100: #eee7ff;
    --xf-brand-200: #ded0ff;
    --xf-brand-300: #c4a7ff;
    --xf-brand-400: #a274ff;
    --xf-brand-500: #773bee;
    --xf-brand-600: #5e17eb;
    --xf-brand-700: #4f11ca;
    --xf-brand-800: #410ea6;
    --xf-accent: #ff5757;
    --xf-accent-dark: #e64b4b;
    --xf-ink: #172033;
    --xf-muted: #64748b;
    --xf-border: #e2e8f0;
    --xf-canvas: #f6f7fb;
    --xf-surface: #ffffff;
    --xf-success: #16845b;
    --xf-warning: #b86a08;
    --xf-danger: #d83a4a;
    --xf-radius-sm: 6px;
    --xf-radius: 10px;
    --xf-radius-lg: 14px;
    --xf-shadow-sm: 0 1px 2px rgba(23, 32, 51, 0.05);
    --xf-shadow: 0 8px 24px rgba(23, 32, 51, 0.07);
    --xf-focus: 0 0 0 3px rgba(94, 23, 235, 0.18);
    --xf-sidebar-bg: var(--xf-brand-600);
    --xf-sidebar-active-bg: rgba(255, 255, 255, 0.16);
}

body.admin {
    background: var(--xf-canvas);
    color: var(--xf-ink);
}

body.admin #wrapper,
body.admin #wrapper > .content {
    background: var(--xf-canvas);
}

/* Navigation: violet is the brand anchor; coral is kept for true emphasis. */
body.admin #menu.sidebar,
body.admin .sidebar,
body.admin #side-menu,
body.admin #setup-menu,
body.admin #setup-menu-wrapper,
body.admin #header {
    background: var(--xf-brand-600) !important;
}

body.admin #menu.sidebar {
    box-shadow: 8px 0 30px rgba(45, 17, 105, 0.12);
}

[dir="rtl"] body.admin #menu.sidebar {
    box-shadow: -8px 0 30px rgba(45, 17, 105, 0.12);
}

body.admin .sidebar > ul.nav > li > a,
body.admin #side-menu > li > a,
body.admin #setup-menu > li > a {
    min-height: 42px;
    margin: 2px 10px;
    padding: 10px 12px;
    border-radius: var(--xf-radius-sm) !important;
    transition: background-color 0.16s ease, transform 0.16s ease;
}

body.admin .sidebar > ul.nav > li:hover > a:first-child,
body.admin .sidebar > ul.nav > li.active > a:first-child,
body.admin #side-menu > li.active > a,
body.admin #setup-menu > li.active > a,
body.admin #side-menu.nav > li > a:hover,
body.admin #side-menu.nav > li > a:focus,
body.admin #setup-menu.nav > li > a:hover,
body.admin #setup-menu.nav > li > a:focus {
    background: var(--xf-sidebar-active-bg) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow: inset 3px 0 0 var(--xf-accent) !important;
}

[dir="rtl"] body.admin .sidebar > ul.nav > li:hover > a:first-child,
[dir="rtl"] body.admin .sidebar > ul.nav > li.active > a:first-child,
[dir="rtl"] body.admin #side-menu > li.active > a,
[dir="rtl"] body.admin #setup-menu > li.active > a {
    box-shadow: inset -3px 0 0 var(--xf-accent) !important;
}

body.admin .sidebar ul.nav li .nav-second-level,
body.admin #side-menu li .nav-second-level,
body.admin #setup-menu li .nav-second-level {
    background: rgba(45, 17, 105, 0.14) !important;
    margin: 2px 10px 8px;
    padding: 4px;
    border-radius: var(--xf-radius-sm);
}

body.admin .sidebar ul.nav li .nav-second-level li a,
body.admin #side-menu li .nav-second-level li a,
body.admin #setup-menu li .nav-second-level li a {
    min-height: 36px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-radius: 5px !important;
}

body.admin #header {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

body.admin #header .navbar-nav > li > a:hover,
body.admin #header .navbar-nav > li > a:focus,
body.admin #header .navbar-nav .open > a {
    background: rgba(255, 255, 255, 0.12) !important;
}

/* Typography, links and keyboard access */
body.admin a {
    color: var(--xf-brand-600);
}

body.admin a:hover,
body.admin a:focus {
    color: var(--xf-brand-700);
}

body.admin :focus-visible {
    outline: none;
    box-shadow: var(--xf-focus) !important;
}

body.admin h1,
body.admin h2,
body.admin h3,
body.admin h4,
body.admin h5,
body.admin h6,
body.admin .panel-title {
    color: var(--xf-ink);
    letter-spacing: -0.01em;
}

body.admin .text-muted,
body.admin .help-block {
    color: var(--xf-muted) !important;
}

/* Cards and panels */
body.admin .panel,
body.admin .card,
body.admin .widget,
body.admin .kan-ban-col,
body.admin .modal-content {
    background: var(--xf-surface);
    border: 1px solid var(--xf-border);
    border-radius: var(--xf-radius);
    box-shadow: var(--xf-shadow-sm);
}

body.admin .panel_s {
    border-radius: var(--xf-radius);
    box-shadow: var(--xf-shadow-sm);
}

body.admin .panel_s > .panel-body {
    border: 1px solid var(--xf-border);
    border-radius: var(--xf-radius);
    box-shadow: none;
}

body.admin .panel-heading,
body.admin .card-header {
    background: var(--xf-surface);
    border-bottom: 1px solid var(--xf-border);
    border-radius: var(--xf-radius) var(--xf-radius) 0 0;
}

/* Buttons */
body.admin .btn {
    min-height: 36px;
    border-radius: var(--xf-radius-sm);
    font-weight: 600;
    box-shadow: none;
    transition: background-color 0.16s ease, border-color 0.16s ease,
                color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

body.admin .btn:hover {
    transform: translateY(-1px);
}

body.admin .btn-primary,
body.admin .btn-info {
    background: var(--xf-brand-600) !important;
    border-color: var(--xf-brand-600) !important;
    color: #fff !important;
}

body.admin .btn-primary:hover,
body.admin .btn-primary:focus,
body.admin .btn-primary:active,
body.admin .btn-info:hover,
body.admin .btn-info:focus,
body.admin .btn-info:active {
    background: var(--xf-brand-700) !important;
    border-color: var(--xf-brand-700) !important;
}

body.admin .btn-default {
    background: #fff !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}

body.admin .btn-default:hover,
body.admin .btn-default:focus {
    background: var(--xf-brand-50) !important;
    border-color: var(--xf-brand-300) !important;
    color: var(--xf-brand-700) !important;
}

body.admin .btn-danger {
    background: var(--xf-danger) !important;
    border-color: var(--xf-danger) !important;
}

/* A calm success action: the previous solid green competed with primary
   actions and inherited violet text in a few modules. */
body.admin .btn-success,
body.admin a.btn-success,
body.admin button.btn-success,
body.admin input.btn-success {
    background: #dcfce7 !important;
    border-color: #86efac !important;
    color: #166534 !important;
    box-shadow: 0 1px 3px rgba(22, 101, 52, 0.1) !important;
}

body.admin .btn-success:hover,
body.admin .btn-success:focus,
body.admin .btn-success:active,
body.admin .btn-success.active,
body.admin .open > .dropdown-toggle.btn-success {
    background: #bbf7d0 !important;
    border-color: #4ade80 !important;
    color: #14532d !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16) !important;
}

body.admin .btn-success:disabled,
body.admin .btn-success.disabled {
    background: #ecfdf5 !important;
    border-color: #bbf7d0 !important;
    color: #4d7c5a !important;
    box-shadow: none !important;
}

body.admin .btn-success > i,
body.admin .btn-success > svg {
    color: inherit !important;
    stroke: currentColor !important;
}

/* Forms */
body.admin .form-control,
body.admin .bootstrap-select > .dropdown-toggle,
body.admin .select2-container .select2-selection,
body.admin .input-group-addon {
    min-height: 38px;
    border-color: #cbd5e1;
    border-radius: var(--xf-radius-sm);
    box-shadow: none;
}

body.admin .form-control:focus,
body.admin .bootstrap-select.open > .dropdown-toggle,
body.admin .select2-container--focus .select2-selection,
body.admin .select2-container--open .select2-selection {
    border-color: var(--xf-brand-500) !important;
    box-shadow: var(--xf-focus) !important;
}

body.admin label,
body.admin .control-label {
    color: #334155;
    font-weight: 600;
}

/* Tables: calmer headers improve scanning on dense ERP screens. */
body.admin .table {
    background: var(--xf-surface);
}

body.admin .table thead th,
body.admin table.dataTable thead > tr > th,
body.admin table.dataTable thead > tr > td {
    background: #f1edff !important;
    border-top: 1px solid var(--xf-brand-200) !important;
    border-bottom: 1px solid var(--xf-brand-200) !important;
    color: #3d246f !important;
    font-weight: 700;
}

body.admin .table thead th a,
body.admin table.dataTable thead > tr > th a {
    color: #3d246f !important;
}

body.admin .table > tbody > tr > td {
    border-top-color: #edf0f5;
    vertical-align: middle;
}

body.admin .table-hover > tbody > tr:hover,
body.admin table.dataTable tbody > tr:hover {
    background: var(--xf-brand-50) !important;
}

body.admin table.dataTable thead > tr > th.sorting_asc,
body.admin table.dataTable thead > tr > th.sorting_desc,
body.admin table.dataTable thead > tr > td.sorting_asc,
body.admin table.dataTable thead > tr > td.sorting_desc {
    background: var(--xf-brand-200) !important;
    color: var(--xf-brand-800) !important;
}

/* Tabs, pagination, dropdowns and feedback */
body.admin .nav-tabs {
    border-bottom-color: var(--xf-border);
}

body.admin .nav-tabs > li > a {
    color: var(--xf-muted);
    border-radius: var(--xf-radius-sm) var(--xf-radius-sm) 0 0;
}

body.admin .nav-tabs > li.active > a,
body.admin .nav-tabs > li.active > a:hover,
body.admin .nav-tabs > li.active > a:focus {
    border-color: var(--xf-border) var(--xf-border) #fff;
    color: var(--xf-brand-700);
    box-shadow: inset 0 3px 0 var(--xf-brand-600);
}

body.admin .pagination > .active > a,
body.admin .pagination > .active > span,
body.admin .pagination > .active > a:hover,
body.admin .pagination > .active > span:hover,
body.admin .pagination > .active > a:focus,
body.admin .pagination > .active > span:focus {
    background: var(--xf-brand-600);
    border-color: var(--xf-brand-600);
    color: #fff !important;
}

body.admin .dropdown-menu {
    border: 1px solid var(--xf-border);
    border-radius: var(--xf-radius);
    box-shadow: var(--xf-shadow);
}

body.admin .dropdown-menu > li > a {
    color: #334155;
}

body.admin .dropdown-menu > li > a:hover,
body.admin .dropdown-menu > li > a:focus {
    background: var(--xf-brand-50);
    color: var(--xf-brand-700);
}

body.admin .modal-header {
    background: var(--xf-brand-600) !important;
    border-radius: var(--xf-radius) var(--xf-radius) 0 0;
}

body.admin .label-primary,
body.admin .badge-primary {
    background: var(--xf-brand-600);
    color: #fff !important;
}

body.admin .alert-info {
    background: var(--xf-brand-50);
    border-color: var(--xf-brand-200);
    color: #45258c;
}

/* Login is the first product screen; match it to the application shell. */
body.login_admin {
    background:
        radial-gradient(circle at 15% 10%, rgba(94, 23, 235, 0.18), transparent 32rem),
        radial-gradient(circle at 90% 85%, rgba(255, 87, 87, 0.12), transparent 28rem),
        #f7f6fb;
}

body.login_admin .login-form {
    border: 1px solid var(--xf-border);
    border-radius: var(--xf-radius-lg);
    box-shadow: 0 20px 60px rgba(45, 17, 105, 0.12);
}

body.login_admin .btn-primary {
    background: var(--xf-brand-600) !important;
    border-color: var(--xf-brand-600) !important;
}

body.login_admin .form-control:focus {
    border-color: var(--xf-brand-500);
    box-shadow: var(--xf-focus);
}

/* All-modules launcher */
.xf-module-card .card {
    border: 1px solid var(--xf-border);
    border-radius: var(--xf-radius);
    box-shadow: var(--xf-shadow-sm);
}

.xf-module-card .card:hover {
    border-color: var(--xf-brand-200);
    box-shadow: var(--xf-shadow);
}

@media (max-width: 767px) {
    body.admin .panel_s > .panel-body {
        padding: 15px;
    }

    body.admin .btn {
        min-height: 40px;
    }

    body.admin .table-responsive {
        border-color: var(--xf-border);
        border-radius: var(--xf-radius-sm);
    }
}

/* Dashboard data visualization ------------------------------------------ */
body.admin .widget[id^="widget-erp-"] .panel_s,
body.admin .widget[id^="widget-erp-"] .panel-body {
    max-width: 100%;
    overflow: visible;
}

body.admin .widget[id^="widget-erp-"] .panel-body > .tw-flex h4 {
    align-items: center;
    display: flex;
    line-height: 1.45;
    min-width: 0;
}

body.admin .erp-dashboard-metrics {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
    margin: 0;
    min-width: 0;
}

body.admin .erp-dashboard-metrics-count-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.admin .erp-dashboard-metric {
    float: none !important;
    margin: 0 !important;
    min-width: 0;
    padding: 0 !important;
    width: auto !important;
}

body.admin .erp-dashboard-metric-card {
    background: linear-gradient(145deg, #ffffff, #faf8ff);
    border: 1px solid #e4def1;
    border-radius: 10px;
    box-shadow: 0 2px 7px rgba(50, 26, 94, 0.06);
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-start;
    min-height: 96px;
    min-width: 0;
    overflow: hidden;
    padding: 12px;
}

body.admin .erp-dashboard-metric-value {
    color: #172033;
    direction: ltr;
    font-size: clamp(22px, 2.15vw, 30px);
    font-variant-numeric: tabular-nums;
    font-weight: 750;
    letter-spacing: -0.02em;
    line-height: 1.15;
    max-width: 100%;
    overflow: hidden;
    text-align: start;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.admin .erp-dashboard-metric-label {
    color: #64748b;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.55;
    margin-top: 7px;
    overflow-wrap: normal;
    word-break: normal;
}

body.admin #widget-finance_overview .finance-summary,
body.admin #widget-finance_overview .panel_s,
body.admin #widget-finance_overview .panel-body {
    max-width: 100%;
    overflow: hidden;
}

body.admin #widget-finance_overview .home-summary {
    margin-inline: 0;
}

body.admin #widget-finance_overview .home-summary > [class*="col-"] {
    padding-inline: 9px;
}

body.admin #widget-finance_overview .home-summary > [class*="col-"] > .row {
    display: grid;
    gap: 9px 8px;
    grid-template-columns: minmax(0, 1fr) 72px;
    margin: 0;
}

body.admin #widget-finance_overview .home-summary > [class*="col-"] > .row > div:has(> p) {
    grid-column: 1 / -1;
    min-width: 0;
    padding: 0;
}

body.admin #widget-finance_overview .home-summary p {
    background: #f7f5fc;
    border: 1px solid #e8e2f3;
    border-radius: 8px;
    color: #332458 !important;
    display: flex !important;
    font-weight: 700;
    justify-content: flex-start;
    margin: 0 0 3px !important;
    padding: 8px 9px;
    width: 100%;
}

body.admin #widget-finance_overview .home-summary p svg {
    color: #7655c5 !important;
    flex: 0 0 20px;
    height: 20px;
    width: 20px;
}

body.admin #widget-finance_overview .text-stats-wrapper:not(:has(> p)) {
    align-self: center;
    grid-column: 1;
    min-width: 0;
    padding: 0;
}

body.admin #widget-finance_overview .text-stats-wrapper:not(:has(> p)) > a {
    align-items: baseline;
    display: flex !important;
    gap: 5px;
    line-height: 1.35;
    margin: 0 !important;
    max-width: 100%;
    min-width: 0;
    white-space: normal;
}

body.admin #widget-finance_overview .text-stats-wrapper ._total {
    color: #172033;
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

body.admin #widget-finance_overview .progress-finance-status {
    color: #64748b !important;
    display: flex;
    flex-direction: column;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    gap: 5px;
    grid-column: 2;
    justify-content: center;
    padding: 0;
    text-align: end !important;
}

body.admin #widget-finance_overview .progress-finance-status .progress {
    background: #e9edf3;
    border-radius: 999px;
    height: 6px;
    overflow: hidden;
    width: 100%;
}

body.admin #widget-finance_overview .progress-finance-status .progress-bar {
    border-radius: 999px;
    min-width: 0;
}

body.admin #widget-finance_overview #invoices_total dl > div {
    border-color: #e4def1 !important;
    box-shadow: 0 2px 7px rgba(50, 26, 94, 0.05);
    min-width: 0;
}

body.admin #widget-finance_overview #invoices_total dd,
body.admin #widget-finance_overview #invoices_total [class*="amount"] {
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

body.admin .widget canvas {
    max-width: 100% !important;
}

body.admin #widget-top_stats .tw-truncate {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
}

body.admin #widget-top_stats [class*="quick-stats-"] {
    min-height: 86px;
}

body.admin .widget .table-responsive,
body.admin .widget .dataTables_wrapper {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
}

body.admin .widget .table-responsive {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

body.admin .widget .nav-tabs {
    align-items: stretch;
    display: flex;
    gap: 3px;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

body.admin .widget .nav-tabs > li {
    flex: 0 0 auto;
}

/* Dashboard drag feedback: use a compact preview instead of cloning complex
   widgets and canvases, which could cover the viewport with a white helper. */
body.admin.dashboard-widget-dragging,
body.admin.dashboard-widget-dragging * {
    cursor: grabbing !important;
}

body.admin .xf-dashboard-drag-helper {
    align-items: center;
    background: linear-gradient(135deg, #ffffff, #f8f5ff);
    border: 2px solid #8b5cf6;
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(31, 16, 70, 0.25);
    color: #241445;
    direction: inherit;
    display: flex;
    gap: 10px;
    min-height: 58px;
    overflow: hidden;
    padding: 10px 12px;
    pointer-events: none;
}

body.admin .xf-dashboard-drag-helper-icon {
    align-items: center;
    background: #8b5cf6;
    border-radius: 8px;
    color: #ffffff;
    display: inline-flex;
    flex: 0 0 30px;
    height: 30px;
    justify-content: center;
    width: 30px;
}

body.admin .xf-dashboard-drag-helper-title {
    font-size: 13px;
    font-weight: 750;
    line-height: 1.4;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.admin .placeholder-dashboard-widgets {
    background: rgba(139, 92, 246, 0.07);
    border: 2px dashed #9b7ae3;
    border-radius: 12px;
    box-sizing: border-box;
    margin-bottom: 16px;
    min-height: 96px;
}

/* Every movable widget gets the same visible handle. Keep it outside the
   content flow so it never covers a heading or an action button. */
body.admin:not(.mobile) .widget {
    overflow: visible !important;
    position: relative;
}

body.admin:not(.mobile) .widget .panel_s {
    overflow: visible;
}

body.admin:not(.mobile) .widget .widget-dragger {
    align-items: center;
    background: #ffffff;
    border: 1px solid #d8d1e7;
    border-radius: 8px;
    box-shadow: 0 2px 7px rgba(50, 26, 94, 0.14);
    color: #7652bf;
    display: flex;
    font-size: 12px;
    height: 28px;
    justify-content: center;
    left: -11px;
    opacity: 0.92;
    top: 11px;
    transition: background-color 0.16s ease, border-color 0.16s ease,
                color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
    width: 28px;
    z-index: 8;
}

body.admin:not(.mobile) .widget .widget-dragger:hover,
body.admin:not(.mobile) .widget .widget-dragger:focus,
body.admin:not(.mobile) .widget .widget-dragger:active {
    background: #f3edff;
    border-color: #a78bfa;
    box-shadow: 0 3px 10px rgba(94, 23, 235, 0.2);
    color: #5e17eb;
    opacity: 1;
    outline: none;
    transform: scale(1.04);
}

body.admin:not(.mobile) .widget .widget-dragger:focus-visible {
    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.28);
}

body.admin.dashboard-widget-dragging .widget-dragger {
    pointer-events: none;
}

@media (max-width: 767px) {
    body.admin .erp-dashboard-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.admin #widget-finance_overview .home-summary > [class*="col-"] > .row {
        grid-template-columns: minmax(0, 1fr) 68px;
    }
}

/* XFatora icon system -----------------------------------------------------
 * A compact, colorful and predictable icon language shared by navigation,
 * dashboard widgets and dense application screens. Semantic success,
 * warning and destructive colors remain reserved for their real meaning.
 */
body.admin #side-menu > li,
body.admin #setup-menu > li {
    --xf-icon-tone: var(--xf-icon-blue);
}

body.admin #side-menu > li:nth-of-type(7n + 2),
body.admin #setup-menu > li:nth-of-type(7n + 2) {
    --xf-icon-tone: var(--xf-icon-amber);
}

body.admin #side-menu > li:nth-of-type(7n + 3),
body.admin #setup-menu > li:nth-of-type(7n + 3) {
    --xf-icon-tone: var(--xf-icon-emerald);
}

body.admin #side-menu > li:nth-of-type(7n + 4),
body.admin #setup-menu > li:nth-of-type(7n + 4) {
    --xf-icon-tone: var(--xf-icon-rose);
}

body.admin #side-menu > li:nth-of-type(7n + 5),
body.admin #setup-menu > li:nth-of-type(7n + 5) {
    --xf-icon-tone: var(--xf-icon-violet);
}

body.admin #side-menu > li:nth-of-type(7n + 6),
body.admin #setup-menu > li:nth-of-type(7n + 6) {
    --xf-icon-tone: var(--xf-icon-cyan);
}

body.admin #side-menu > li:nth-of-type(7n),
body.admin #setup-menu > li:nth-of-type(7n) {
    --xf-icon-tone: var(--xf-icon-indigo);
}

body.admin #side-menu > li:not(.menu-section-label) > a > i.menu-icon[class*="fa-"],
body.admin #setup-menu > li > a > i.menu-icon[class*="fa-"] {
    align-items: center !important;
    background: var(--xf-icon-tone) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.16) !important;
    box-sizing: border-box;
    color: #ffffff !important;
    display: flex !important;
    float: left;
    font-size: 12px !important;
    height: 26px !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: -2px 12px -2px 0 !important;
    width: 26px !important;
}

body.admin #side-menu .nav-second-level > li > a > i.menu-icon[class*="fa-"],
body.admin #setup-menu .nav-second-level > li > a > i.menu-icon[class*="fa-"] {
    align-items: center !important;
    background: var(--xf-icon-tone) !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14) !important;
    box-sizing: border-box;
    color: #ffffff !important;
    display: flex !important;
    float: left;
    font-size: 10px !important;
    height: 21px !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: -1px 10px -1px 0 !important;
    width: 21px !important;
}

/* Keep familiar product and semantic identities stable wherever they occur. */
body.admin #side-menu > li:not(.menu-section-label) > a > i.menu-icon[class*="fa-"].fa-whatsapp,
body.admin #setup-menu > li > a > i.menu-icon[class*="fa-"].fa-whatsapp,
body.admin #side-menu .nav-second-level > li > a > i.menu-icon[class*="fa-"].fa-whatsapp,
body.admin #setup-menu .nav-second-level > li > a > i.menu-icon[class*="fa-"].fa-whatsapp {
    background: #16a34a !important;
}

body.admin #side-menu > li:not(.menu-section-label) > a > i.menu-icon[class*="fa-"]:is(.fa-dollar, .fa-usd, .fa-money-bill, .fa-money-check),
body.admin #setup-menu > li > a > i.menu-icon[class*="fa-"]:is(.fa-dollar, .fa-usd, .fa-money-bill, .fa-money-check),
body.admin #side-menu .nav-second-level > li > a > i.menu-icon[class*="fa-"]:is(.fa-dollar, .fa-usd, .fa-money-bill, .fa-money-check),
body.admin #setup-menu .nav-second-level > li > a > i.menu-icon[class*="fa-"]:is(.fa-dollar, .fa-usd, .fa-money-bill, .fa-money-check) {
    background: #059669 !important;
}

body.admin #side-menu > li:not(.menu-section-label) > a > i.menu-icon[class*="fa-"]:is(.fa-lock, .fa-shield, .fa-shield-halved),
body.admin #setup-menu > li > a > i.menu-icon[class*="fa-"]:is(.fa-lock, .fa-shield, .fa-shield-halved),
body.admin #side-menu .nav-second-level > li > a > i.menu-icon[class*="fa-"]:is(.fa-lock, .fa-shield, .fa-shield-halved),
body.admin #setup-menu .nav-second-level > li > a > i.menu-icon[class*="fa-"]:is(.fa-lock, .fa-shield, .fa-shield-halved) {
    background: #7c3aed !important;
}

/* Header shortcuts use the same compact chips without changing their hit area. */
body.admin #header li.icon > a > i,
body.admin #header li.icon > a > svg,
body.admin #header li.icon > a > span > i,
body.admin #header li.icon > a > span > svg,
body.admin #header a[data-header-quick-setup-trigger] svg {
    align-items: center !important;
    background: var(--xf-icon-blue) !important;
    border: 1px solid rgba(255, 255, 255, 0.32) !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.18) !important;
    box-sizing: border-box;
    color: #ffffff !important;
    display: inline-flex !important;
    font-size: 11px !important;
    height: 26px !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 5px !important;
    stroke: currentColor !important;
    width: 26px !important;
}

body.admin #header li.header-newsfeed > a > i,
body.admin #header li.header-newsfeed > a > svg,
body.admin #header li.header-newsfeed > a > span > i,
body.admin #header li.header-newsfeed > a > span > svg {
    background: var(--xf-icon-cyan) !important;
}

body.admin #header li.header-todo > a > i,
body.admin #header li.header-todo > a > svg,
body.admin #header li.header-todo > a > span > i,
body.admin #header li.header-todo > a > span > svg {
    background: var(--xf-icon-emerald) !important;
}

body.admin #header li.header-timers > a > i,
body.admin #header li.header-timers > a > svg,
body.admin #header li.header-timers > a > span > i,
body.admin #header li.header-timers > a > span > svg {
    background: var(--xf-icon-amber) !important;
}

body.admin #header li.header-notifications > a > i,
body.admin #header li.header-notifications > a > svg,
body.admin #header li.header-notifications > a > span > i,
body.admin #header li.header-notifications > a > span > svg {
    background: var(--xf-icon-rose) !important;
}

body.admin #header a[data-header-quick-setup-trigger] svg {
    background: var(--xf-icon-violet) !important;
}

/* Smaller dashboard icon badges with the same vivid palette. */
body.admin .widget .circle.numbertext {
    align-items: center !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 999px !important;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.14) !important;
    display: inline-flex !important;
    flex: 0 0 40px !important;
    height: 40px !important;
    justify-content: center !important;
    width: 40px !important;
}

body.admin .widget .circle.numbertext > i {
    color: #ffffff !important;
    font-size: 15px !important;
    line-height: 1 !important;
}

body.admin .widget .circle.numbertext.circle_warning {
    background: var(--xf-icon-amber) !important;
}

body.admin .widget .circle.numbertext.circle_info {
    background: var(--xf-icon-blue) !important;
}

body.admin .widget .circle.numbertext.circle_success {
    background: var(--xf-icon-emerald) !important;
}

body.admin .widget .circle.numbertext.circle_default {
    background: var(--xf-icon-violet) !important;
}

body.admin #widget-whatsapp-widget .panel-body > .row {
    min-height: 76px !important;
    padding-inline-end: 52px !important;
}

/* Compact icon chips in widget, panel, modal and tab headings. */
body.admin :is(
    .widget h3,
    .widget h4,
    .widget h5,
    .widget p.tw-font-semibold,
    .panel-heading h3,
    .panel-heading h4,
    .panel-title,
    .modal-title,
    .nav-tabs > li > a,
    .xf-crm-page-heading
) > i[class*="fa-"]:first-child:not(.fa-caret-down):not(.fa-chevron-down):not(.fa-chevron-up):not(.fa-spinner) {
    align-items: center;
    background: var(--xf-icon-violet) !important;
    border-radius: 7px;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.12);
    color: #ffffff !important;
    display: inline-flex;
    font-size: 11px !important;
    height: 24px;
    justify-content: center;
    line-height: 1 !important;
    margin-inline-end: 7px;
    vertical-align: middle;
    width: 24px;
}

body.admin :is(.widget, .panel-heading, .panel-title, .modal-title, .nav-tabs, .xf-crm-page-heading) i:is(.fa-user, .fa-users, .fa-user-circle, .fa-handshake) {
    background: var(--xf-icon-blue) !important;
}

body.admin :is(.widget, .panel-heading, .panel-title, .modal-title, .nav-tabs, .xf-crm-page-heading) i:is(.fa-check, .fa-circle-check, .fa-check-circle) {
    background: var(--xf-icon-emerald) !important;
}

body.admin :is(.widget, .panel-heading, .panel-title, .modal-title, .nav-tabs, .xf-crm-page-heading) i:is(.fa-warning, .fa-triangle-exclamation, .fa-exclamation) {
    background: var(--xf-icon-amber) !important;
}

body.admin :is(.widget, .panel-heading, .panel-title, .modal-title, .nav-tabs, .xf-crm-page-heading) i:is(.fa-whatsapp, .fa-comment, .fa-comments, .fa-envelope) {
    background: #16a34a !important;
}

body.admin :is(.widget, .panel-heading, .panel-title, .modal-title, .nav-tabs, .xf-crm-page-heading) i:is(.fa-chart-line, .fa-chart-bar, .fa-compass, .fa-gauge) {
    background: var(--xf-icon-indigo) !important;
}

body.admin .widget .panel-body > .text-center > i[class*="fa-"]:not(.fa-toggle-on):not(.fa-toggle-off) {
    align-items: center;
    background: #eef2ff !important;
    border: 1px solid #c7d2fe;
    border-radius: 10px;
    color: var(--xf-icon-indigo) !important;
    display: inline-flex;
    font-size: 15px !important;
    height: 36px;
    justify-content: center;
    width: 36px;
}

/* Dense action areas use semantic glyph color without adding bulky badges. */
body.admin :is(.table, .panel-body, .dropdown-menu, .dataTables_wrapper, .btn-default) i:is(.fa-edit, .fa-pencil, .fa-pen) {
    color: var(--xf-icon-amber) !important;
}

body.admin :is(.table, .panel-body, .dropdown-menu, .dataTables_wrapper, .btn-default) i:is(.fa-trash, .fa-trash-can, .fa-remove) {
    color: var(--xf-icon-rose) !important;
}

body.admin :is(.table, .panel-body, .dropdown-menu, .dataTables_wrapper, .btn-default) i:is(.fa-eye, .fa-search, .fa-magnifying-glass) {
    color: var(--xf-icon-blue) !important;
}

body.admin :is(.table, .panel-body, .dropdown-menu, .dataTables_wrapper, .btn-default) i:is(.fa-check, .fa-check-circle, .fa-circle-check) {
    color: var(--xf-icon-emerald) !important;
}

body.admin :is(.table, .panel-body, .dropdown-menu, .dataTables_wrapper, .btn-default) i:is(.fa-download, .fa-upload, .fa-file-export) {
    color: var(--xf-icon-violet) !important;
}

body.admin :is(.table, .panel-body, .dropdown-menu, .dataTables_wrapper, .btn-default) i.fa-whatsapp {
    color: #16a34a !important;
}

/* Icons inside colored buttons inherit the button foreground for contrast. */
body.admin .btn:not(.btn-default) > i {
    background: transparent !important;
    color: inherit !important;
}

@media (max-width: 767px) {
    body.admin #side-menu > li:not(.menu-section-label) > a > i.menu-icon[class*="fa-"],
    body.admin #setup-menu > li > a > i.menu-icon[class*="fa-"] {
        border-radius: 7px !important;
        font-size: 11px !important;
        height: 24px !important;
        margin-block: -1px !important;
        width: 24px !important;
    }

    body.admin .widget .circle.numbertext {
        flex-basis: 36px !important;
        height: 36px !important;
        width: 36px !important;
    }

    body.admin .widget .circle.numbertext > i {
        font-size: 13px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.admin *,
    body.admin *::before,
    body.admin *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Header dropdown contrast
   Header triggers are white on violet, but every opened menu is a light
   surface and must restore dark content colors. */
body.admin #header .dropdown-menu {
    background: var(--xf-surface) !important;
    color: var(--xf-ink) !important;
}

body.admin #header .dropdown-menu .dropdown-header,
body.admin #header .dropdown-menu > li > a,
body.admin #header .dropdown-menu > li > a span,
body.admin #header .dropdown-menu > li > a i,
body.admin #header .quick-create-menu > li > a,
body.admin #header .quick-create-menu > li > a span,
body.admin #header .quick-create-menu > li > a i,
body.admin #header .notifications .notification-handler,
body.admin #header .notifications .notification-title,
body.admin #header .notifications .notification-date,
body.admin #header .notifications .text-muted,
body.admin #header .notifications .not-mark-as-read-inline,
body.admin #header .notifications > div > a {
    color: #334155 !important;
}

body.admin #header .dropdown-menu > li > a:hover,
body.admin #header .dropdown-menu > li > a:focus,
body.admin #header .quick-create-menu > li > a:hover,
body.admin #header .quick-create-menu > li > a:focus {
    background: var(--xf-brand-50) !important;
    color: var(--xf-brand-700) !important;
}

body.admin #header .dropdown-menu > li > a:hover span,
body.admin #header .dropdown-menu > li > a:focus span,
body.admin #header .dropdown-menu > li > a:hover i,
body.admin #header .dropdown-menu > li > a:focus i {
    color: var(--xf-brand-700) !important;
}

body.admin #header .notifications .unread-notification {
    background: #eef4ff !important;
}

body.admin #header .notifications .unread-notification:hover {
    background: var(--xf-brand-100) !important;
}

body.admin #header .notifications .unread-notification .notification-title,
body.admin #header .notifications .unread-notification .notification-date {
    color: #243b75 !important;
}

/* The stored logo uses a violet wordmark. Give it a light brand-safe plate
   so it remains legible on the violet application header. */
body.admin #header #logo > .logo {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 9px;
    box-shadow: 0 2px 10px rgba(45, 17, 105, 0.14);
}

body.admin #header #logo > .logo img {
    display: block;
    max-width: 132px;
    max-height: 30px;
    object-fit: contain;
}

/* Sales and CRM
   A shared hierarchy for Customers, Leads, Proposals, Estimates, Invoices,
   Payments, Contracts, Credit Notes, and Items. */
.xf-crm-page {
    --xf-crm-accent: var(--xf-brand-600);
    --xf-crm-accent-soft: var(--xf-brand-50);
    --xf-crm-accent-border: var(--xf-brand-200);
}

.xf-crm-page-heading {
    position: relative;
    overflow: hidden;
    padding: 18px 20px;
    background:
        linear-gradient(118deg, rgba(247, 243, 255, 0.98), rgba(255, 255, 255, 0.96) 62%),
        var(--xf-surface);
    border: 1px solid var(--xf-crm-accent-border);
    border-inline-start: 4px solid var(--xf-crm-accent);
    border-radius: var(--xf-radius-lg);
    box-shadow: var(--xf-shadow-sm);
}

.xf-crm-page-heading::after {
    position: absolute;
    inset-block-start: -45px;
    inset-inline-end: -30px;
    width: 138px;
    height: 138px;
    background: radial-gradient(circle, rgba(119, 59, 238, 0.13), rgba(119, 59, 238, 0) 68%);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.xf-crm-page-heading h4 {
    position: relative;
    z-index: 1;
    color: var(--xf-ink);
    letter-spacing: -0.012em;
}

.xf-crm-page-subtitle {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 5px 0 0;
    color: var(--xf-muted);
    font-size: 13px;
    line-height: 1.55;
}

.xf-crm-page-heading > a,
.xf-crm-page-heading .tw-grow > a {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    margin-top: 7px;
    color: var(--xf-brand-700);
    font-size: 12px;
    font-weight: 600;
}

.xf-crm-page ._buttons,
.xf-crm-page > .panel_s:first-of-type > .panel-body > .panel-table-full:first-child {
    padding: 10px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid var(--xf-border);
    border-radius: var(--xf-radius);
    box-shadow: var(--xf-shadow-sm);
}

.xf-crm-page ._buttons::before,
.xf-crm-page ._buttons::after {
    display: table;
    content: " ";
}

.xf-crm-page ._buttons::after {
    clear: both;
}

.xf-crm-page .btn {
    font-weight: 600;
}

.xf-crm-page .btn-primary {
    box-shadow: 0 3px 9px rgba(94, 23, 235, 0.2);
}

.xf-crm-page .btn-primary:hover,
.xf-crm-page .btn-primary:focus {
    box-shadow: 0 4px 12px rgba(79, 17, 202, 0.24);
    transform: translateY(-1px);
}

.xf-crm-page .panel_s {
    overflow: hidden;
}

.xf-crm-page .panel-body {
    color: var(--xf-ink);
}

.xf-crm-page .panel-table-full {
    border-radius: var(--xf-radius);
}

.xf-crm-page .table.dataTable {
    margin-top: 0 !important;
}

.xf-crm-page .table.dataTable > thead > tr > th,
.xf-crm-page .table > thead > tr > th {
    height: 48px;
    padding-block: 12px !important;
    background: linear-gradient(180deg, var(--xf-brand-50), #fbfaff) !important;
    border-top: 1px solid var(--xf-brand-100) !important;
    border-bottom: 1px solid var(--xf-brand-200) !important;
    color: var(--xf-brand-800) !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.015em;
    vertical-align: middle;
}

.xf-crm-page .table.dataTable > tbody > tr > td,
.xf-crm-page .table > tbody > tr > td {
    padding-block: 13px !important;
    border-top-color: #edf1f7 !important;
    color: #334155;
    vertical-align: middle;
}

.xf-crm-page .table.dataTable > tbody > tr:hover > td,
.xf-crm-page .table > tbody > tr:hover > td {
    background: #faf8ff !important;
}

.xf-crm-page .dataTables_filter .input-group,
.xf-crm-page .dataTables_length select {
    border-radius: var(--xf-radius-sm);
}

.xf-crm-page .dataTables_info,
.xf-crm-page .dataTables_empty,
.xf-crm-page .dataTables_paginate {
    color: var(--xf-muted) !important;
    font-size: 12px;
}

.xf-crm-page .dataTables_empty {
    min-height: 104px;
    padding: 38px 16px !important;
    background: #fcfcfe;
    text-align: center;
}

.xf-crm-page .pagination > .active > a,
.xf-crm-page .pagination > .active > span {
    background: var(--xf-brand-600);
    border-color: var(--xf-brand-600);
}

.xf-crm-page .label {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}

.xf-crm-page .label-success {
    background: #ecfdf3 !important;
    border-color: #bbf7d0;
    color: #18794e !important;
}

.xf-crm-page .label-warning {
    background: #fff8e6 !important;
    border-color: #fde3a7;
    color: #9a6700 !important;
}

.xf-crm-page .label-danger {
    background: #fff1f2 !important;
    border-color: #fecdd3;
    color: #be123c !important;
}

.xf-crm-page .label-info {
    background: #eff6ff !important;
    border-color: #bfdbfe;
    color: #1d4ed8 !important;
}

.xf-crm-page .leads-overview .tw-grid > button,
.xf-crm-page #contract_summary .tw-grid > div,
.xf-crm-page .tw-grid > .tw-bg-white {
    min-height: 52px;
    background: var(--xf-surface) !important;
    border-color: var(--xf-border) !important;
    border-radius: var(--xf-radius) !important;
    box-shadow: var(--xf-shadow-sm) !important;
}

.xf-crm-page .leads-overview .tw-grid > button:hover,
.xf-crm-page #contract_summary .tw-grid > div:hover,
.xf-crm-page .tw-grid > .tw-bg-white:hover {
    border-color: var(--xf-brand-300) !important;
    box-shadow: 0 5px 16px rgba(50, 26, 94, 0.08) !important;
    transform: translateY(-1px);
}

.xf-crm-page .nav-tabs {
    border-bottom-color: var(--xf-border);
}

.xf-crm-page .nav-tabs > li > a {
    color: #64748b;
    font-weight: 600;
}

.xf-crm-page .nav-tabs > li.active > a,
.xf-crm-page .nav-tabs > li.active > a:hover,
.xf-crm-page .nav-tabs > li.active > a:focus {
    color: var(--xf-brand-700);
}

.xf-crm-page .kan-ban-col .panel_s,
.xf-crm-page .kan-ban-content .panel_s {
    border: 1px solid var(--xf-border);
    border-radius: var(--xf-radius);
    box-shadow: var(--xf-shadow-sm);
}

.xf-crm-page .kan-ban-col .panel_s:hover,
.xf-crm-page .kan-ban-content .panel_s:hover {
    border-color: var(--xf-brand-300);
    box-shadow: var(--xf-shadow);
}

.xf-crm-page .kan-ban-col > .kan-ban-col-wrapper {
    background: #f8f7fc;
    border: 1px solid var(--xf-border);
    border-radius: var(--xf-radius-lg);
}

/* Detail and edit screens share the same calm form treatment even when the
   list-specific xf-crm-page wrapper is not present. */
body.admin:where(.clients, .leads, .proposals, .estimates, .invoices, .payments, .contracts, .credit-notes, .credit_notes, .invoice-items, .invoice_items) .modal-content,
body.admin:where(.clients, .leads, .proposals, .estimates, .invoices, .payments, .contracts, .credit-notes, .credit_notes, .invoice-items, .invoice_items) #wrapper .panel_s {
    border-color: var(--xf-border);
    border-radius: var(--xf-radius);
    box-shadow: var(--xf-shadow-sm);
}

body.admin:where(.clients, .leads, .proposals, .estimates, .invoices, .payments, .contracts, .credit-notes, .credit_notes, .invoice-items, .invoice_items) .modal-header,
body.admin:where(.clients, .leads, .proposals, .estimates, .invoices, .payments, .contracts, .credit-notes, .credit_notes, .invoice-items, .invoice_items) .panel-heading {
    background: linear-gradient(180deg, #ffffff, #fbfaff);
    border-bottom-color: var(--xf-border);
}

body.admin:where(.clients, .leads, .proposals, .estimates, .invoices, .payments, .contracts, .credit-notes, .credit_notes, .invoice-items, .invoice_items) .form-control:focus,
body.admin:where(.clients, .leads, .proposals, .estimates, .invoices, .payments, .contracts, .credit-notes, .credit_notes, .invoice-items, .invoice_items) .bootstrap-select.open > .dropdown-toggle {
    border-color: var(--xf-brand-400) !important;
    box-shadow: var(--xf-focus) !important;
}

body.admin:where(.clients, .leads, .proposals, .estimates, .invoices, .payments, .contracts, .credit-notes, .credit_notes, .invoice-items, .invoice_items) label:not(.label) {
    color: #334155;
    font-weight: 600;
}

[dir="rtl"] .xf-crm-page .pull-left {
    float: right !important;
}

[dir="rtl"] .xf-crm-page .pull-right {
    float: left !important;
}

@media (max-width: 767px) {
    .xf-crm-page-heading {
        padding: 15px 16px;
        border-inline-start-width: 3px;
    }

    .xf-crm-page-subtitle {
        font-size: 12px;
    }

    .xf-crm-page ._buttons,
    .xf-crm-page ._buttons > .tw-flex {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }

    .xf-crm-page ._buttons .pull-left,
    .xf-crm-page ._buttons .pull-right,
    [dir="rtl"] .xf-crm-page ._buttons .pull-left,
    [dir="rtl"] .xf-crm-page ._buttons .pull-right {
        float: none !important;
    }

    .xf-crm-page ._buttons .display-block.pull-right,
    .xf-crm-page ._buttons #vueApp {
        width: 100%;
        margin: 0 !important;
    }

    .xf-crm-page .table-responsive,
    .xf-crm-page .panel-table-full {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .xf-crm-page .table.dataTable > thead > tr > th,
    .xf-crm-page .table > thead > tr > th,
    .xf-crm-page .table.dataTable > tbody > tr > td,
    .xf-crm-page .table > tbody > tr > td {
        white-space: nowrap;
    }
}