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

body.hrms-modern {
    --hrms-black: #ffffff;
    --hrms-black-deep: #f8f9fa;
    --hrms-panel: #ffffff;
    --hrms-panel-soft: #f3f4f6;
    --hrms-red: var(--primary-color, #d71920);
    --hrms-red-dark: var(--primary-hover, #b51218);
    --hrms-red-soft: #fde8e9;
    --hrms-ink: var(--text-main, #171717);
    --hrms-muted: var(--text-muted, #555555);
    --hrms-line: var(--border-color, #e5e5e5);
    --hrms-text-on-primary: #ffffff;
    --hrms-danger-text: var(--primary-hover, #b51218);
    --bs-primary: var(--hrms-red) !important;
    --bs-primary-rgb: 215, 25, 32 !important;
    background: var(--bg-main, #f8f9fa) !important;
    color: var(--hrms-ink);
    font-family: var(--theme-font, 'DM Sans'), 'Segoe UI', sans-serif;
}

body.hrms-modern h1,
body.hrms-modern h2,
body.hrms-modern h3,
body.hrms-modern h4,
body.hrms-modern h5,
body.hrms-modern h6,
body.hrms-modern .page-header-title,
body.hrms-modern .btn {
    font-family: 'Space Grotesk', 'DM Sans', sans-serif;
}

body.hrms-modern .dash-sidebar {
    background: #ffffff !important;
    border-right: 1px solid var(--hrms-line);
    box-shadow: 12px 0 32px rgba(17, 17, 17, .04);
}

body.hrms-modern .dash-sidebar .navbar-wrapper,
body.hrms-modern .dash-sidebar .navbar-content {
    background: transparent !important;
}

body.hrms-modern .dash-sidebar .main-logo {
    border-bottom: 1px solid var(--hrms-line);
}

body.hrms-modern .dash-sidebar .main-logo a {
    color: var(--hrms-ink);
}

body.hrms-modern .dash-sidebar .main-logo img {
    filter: none;
    max-height: 42px;
}

body.hrms-modern .dash-sidebar .dash-navbar>.dash-item>.dash-link,
body.hrms-modern .dash-sidebar .dash-item .dash-link {
    color: #303030 !important;
    border-radius: 8px;
    margin: 3px 12px;
    transition: background .2s ease, color .2s ease;
}

body.hrms-modern .dash-sidebar .dash-item .dash-link i,
body.hrms-modern .dash-sidebar .dash-item .dash-link .dash-micon {
    color: #555555 !important;
}

body.hrms-modern .dash-sidebar .dash-navbar>.dash-item>.dash-link:hover,
body.hrms-modern .dash-sidebar .dash-item.active>.dash-link,
body.hrms-modern .dash-sidebar .dash-item .dash-submenu .dash-item.active>.dash-link {
    background: var(--hrms-red-soft) !important;
    color: var(--hrms-red) !important;
}

body.hrms-modern .dash-sidebar .dash-navbar>.dash-item>.dash-link:hover i,
body.hrms-modern .dash-sidebar .dash-item.active>.dash-link i,
body.hrms-modern .dash-sidebar .dash-item .dash-submenu .dash-item.active>.dash-link i {
    color: var(--hrms-red) !important;
}

body.hrms-modern .dash-sidebar .dash-submenu {
    background: #ffffff !important;
}

body.hrms-modern .dash-sidebar .dash-submenu .dash-link {
    color: #4a4a4a !important;
}

body.hrms-modern .dash-sidebar .dash-submenu .dash-link:hover,
body.hrms-modern .dash-sidebar .dash-submenu .dash-item.active>.dash-link {
    background: var(--hrms-red-soft) !important;
    color: var(--hrms-red) !important;
}

body.hrms-modern .dash-sidebar .dash-submenu .dash-item.active>.dash-link {
    box-shadow: inset 3px 0 0 var(--hrms-red);
}

body.hrms-modern .dash-header {
    background: #ffffff !important;
    border-bottom: 1px solid var(--hrms-line);
    box-shadow: 0 4px 20px rgba(17, 17, 17, .04);
}

body.hrms-modern .dash-header .dash-head-link {
    color: var(--hrms-ink) !important;
}

body.hrms-modern .dash-header .theme-avtar {
    background: var(--hrms-red-soft);
    border: 1px solid #f3b0b3;
}

body.hrms-modern .dash-header .theme-avtar img {
    border-color: var(--hrms-red) !important;
}

body.hrms-modern .dash-header .dash-head-link:hover {
    color: var(--hrms-red) !important;
}

body.hrms-modern .dash-header .dropdown-menu {
    border: 1px solid var(--hrms-line);
    box-shadow: 0 16px 40px rgba(17, 17, 17, .12);
}

body.hrms-modern .dash-content {
    background: #f8f9fa;
}

body.hrms-modern .page-header {
    background: transparent;
    padding: 30px 30px 18px;
}

body.hrms-modern .page-header-title h4 {
    color: var(--hrms-ink);
    font-weight: 700;
    letter-spacing: -.02em;
}

body.hrms-modern .breadcrumb .breadcrumb-item,
body.hrms-modern .breadcrumb .breadcrumb-item a {
    color: var(--hrms-muted);
}

body.hrms-modern .breadcrumb .breadcrumb-item a:hover {
    color: var(--hrms-red);
}

body.hrms-modern .card {
    background: #fff;
    border: 1px solid var(--hrms-line);
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(17, 17, 17, .04);
}

body.hrms-modern .card-header {
    background: #fff;
    border-bottom: 1px solid var(--hrms-line);
    padding: 18px 22px;
}

body.hrms-modern .card-header h5,
body.hrms-modern .card-header h4 {
    color: var(--hrms-ink);
    font-weight: 700;
}

body.hrms-modern .card-body {
    padding: 22px;
}

body.hrms-modern .card-footer {
    background: #fafafa;
    border-top: 1px solid var(--hrms-line);
}

body.hrms-modern .card-stats,
body.hrms-modern .dashboard-card,
body.hrms-modern .dash-card {
    background: #ffffff !important;
    border-color: var(--hrms-line) !important;
    color: var(--hrms-ink) !important;
}

body.hrms-modern .card-stats h3,
body.hrms-modern .card-stats h4,
body.hrms-modern .dashboard-card h3,
body.hrms-modern .dashboard-card h4,
body.hrms-modern .dash-card h3,
body.hrms-modern .dash-card h4 {
    color: var(--hrms-ink) !important;
}

body.hrms-modern .card-stats p,
body.hrms-modern .dashboard-card p,
body.hrms-modern .dash-card p {
    color: var(--hrms-muted) !important;
}

body.hrms-modern .btn-primary,
body.hrms-modern .btn-danger,
body.hrms-modern .bg-primary,
body.hrms-modern .bg-danger {
    background-color: var(--hrms-red) !important;
    border-color: var(--hrms-red) !important;
    color: #fff !important;
}

body.hrms-modern .btn-primary:hover,
body.hrms-modern .btn-danger:hover {
    background-color: var(--hrms-red-dark) !important;
    border-color: var(--hrms-red-dark) !important;
}

body.hrms-modern .btn-outline-primary {
    border-color: var(--hrms-red);
    color: var(--hrms-red);
}

body.hrms-modern .btn-outline-primary:hover {
    background: var(--hrms-red);
    color: #fff;
}

body.hrms-modern .text-primary,
body.hrms-modern a.text-primary {
    color: var(--hrms-red) !important;
}

body.hrms-modern .bg-light-primary {
    background: var(--hrms-red-soft) !important;
    color: var(--hrms-red) !important;
}

body.hrms-modern .form-control,
body.hrms-modern .form-select,
body.hrms-modern .input-group-text {
    border-color: #dfe2e5;
    border-radius: 8px;
    background: #fff;
    color: var(--hrms-ink);
}

body.hrms-modern .form-control:focus,
body.hrms-modern .form-select:focus {
    border-color: var(--hrms-red);
    box-shadow: 0 0 0 3px rgba(215, 25, 32, .14);
}

body.hrms-modern .form-label {
    color: #2d2d2d;
    font-weight: 600;
}

body.hrms-modern .table {
    --bs-table-border-color: var(--hrms-line);
    --bs-table-striped-bg: #fafafa;
    --bs-table-hover-bg: #fff5f5;
    color: var(--hrms-ink);
}

body.hrms-modern .table thead th {
    background: #f8f9fa;
    color: #333333;
    border-color: var(--hrms-line);
    font-size: .74rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

body.hrms-modern .table tbody tr:hover {
    --bs-table-accent-bg: #fff5f5;
}

body.hrms-modern .table a {
    color: var(--hrms-red);
}

body.hrms-modern[data-theme='red-black'],
body.hrms-modern[data-theme='custom-org'] {
    --primary-color: #D71920;
    --primary-hover: #B51218;
    --bg-main: #F8F9FA;
    --bg-surface: #FFFFFF;
    --text-main: #171717;
    --text-muted: #555555;
    --border-color: #E5E5E5;
    --hrms-red-soft: #FDE8E9;
}

body.hrms-modern[data-theme='red-black'] .dash-content,
body.hrms-modern[data-theme='custom-org'] .dash-content {
    background: #f8f9fa !important;
    color: #171717;
}

body.hrms-modern[data-theme='red-black'] .page-header-title h4,
body.hrms-modern[data-theme='custom-org'] .page-header-title h4,
body.hrms-modern[data-theme='red-black'] .card-header h5,
body.hrms-modern[data-theme='custom-org'] .card-header h5,
body.hrms-modern[data-theme='red-black'] .card-header h4,
body.hrms-modern[data-theme='custom-org'] .card-header h4,
body.hrms-modern[data-theme='red-black'] .form-label,
body.hrms-modern[data-theme='custom-org'] .form-label {
    color: #171717 !important;
}

body.hrms-modern[data-theme='red-black'] .card,
body.hrms-modern[data-theme='custom-org'] .card,
body.hrms-modern[data-theme='red-black'] .modal-content,
body.hrms-modern[data-theme='custom-org'] .modal-content,
body.hrms-modern[data-theme='red-black'] .dropdown-menu,
body.hrms-modern[data-theme='custom-org'] .dropdown-menu {
    background: #ffffff !important;
    border-color: #e5e5e5 !important;
    color: #171717;
}

body.hrms-modern[data-theme='red-black'] .card-body,
body.hrms-modern[data-theme='custom-org'] .card-body,
body.hrms-modern[data-theme='red-black'] .modal-body,
body.hrms-modern[data-theme='custom-org'] .modal-body,
body.hrms-modern[data-theme='red-black'] .list-group-item,
body.hrms-modern[data-theme='custom-org'] .list-group-item {
    color: #171717 !important;
}

body.hrms-modern[data-theme='red-black'] .text-dark,
body.hrms-modern[data-theme='custom-org'] .text-dark,
body.hrms-modern[data-theme='red-black'] .text-body,
body.hrms-modern[data-theme='custom-org'] .text-body,
body.hrms-modern[data-theme='red-black'] .text-black,
body.hrms-modern[data-theme='custom-org'] .text-black {
    color: #171717 !important;
}

body.hrms-modern[data-theme='red-black'] .text-muted,
body.hrms-modern[data-theme='custom-org'] .text-muted,
body.hrms-modern[data-theme='red-black'] small,
body.hrms-modern[data-theme='custom-org'] small,
body.hrms-modern[data-theme='red-black'] .form-text,
body.hrms-modern[data-theme='custom-org'] .form-text {
    color: #555555 !important;
}

body.hrms-modern[data-theme='red-black'] .card a:not(.btn),
body.hrms-modern[data-theme='custom-org'] .card a:not(.btn),
body.hrms-modern[data-theme='red-black'] .modal a:not(.btn),
body.hrms-modern[data-theme='custom-org'] .modal a:not(.btn) {
    color: #D71920;
}

body.hrms-modern[data-theme='red-black'] .dropdown-item,
body.hrms-modern[data-theme='custom-org'] .dropdown-item,
body.hrms-modern[data-theme='red-black'] .dropdown-header,
body.hrms-modern[data-theme='custom-org'] .dropdown-header {
    color: #171717 !important;
}

body.hrms-modern[data-theme='red-black'] .dropdown-item:hover,
body.hrms-modern[data-theme='custom-org'] .dropdown-item:hover {
    background: rgba(215, 25, 32, .08) !important;
}

body.hrms-modern[data-theme='red-black'] .card-header,
body.hrms-modern[data-theme='custom-org'] .card-header,
body.hrms-modern[data-theme='red-black'] .card-footer,
body.hrms-modern[data-theme='custom-org'] .card-footer,
body.hrms-modern[data-theme='red-black'] .modal-header,
body.hrms-modern[data-theme='custom-org'] .modal-header {
    background: transparent !important;
    border-color: #e5e5e5 !important;
}

body.hrms-modern[data-theme='red-black'] .form-control,
body.hrms-modern[data-theme='custom-org'] .form-control,
body.hrms-modern[data-theme='red-black'] .form-select,
body.hrms-modern[data-theme='custom-org'] .form-select,
body.hrms-modern[data-theme='red-black'] .input-group-text,
body.hrms-modern[data-theme='custom-org'] .input-group-text {
    background: #ffffff !important;
    border-color: #e5e5e5 !important;
    color: #171717 !important;
}

body.hrms-modern[data-theme='red-black'] .table,
body.hrms-modern[data-theme='custom-org'] .table {
    --bs-table-color: #171717;
    --bs-table-bg: transparent;
    --bs-table-border-color: #e5e5e5;
    --bs-table-striped-bg: #fafafa;
    --bs-table-hover-bg: #fff5f5;
    color: #171717;
}

body.hrms-modern[data-theme='red-black'] .table td,
body.hrms-modern[data-theme='custom-org'] .table td,
body.hrms-modern[data-theme='red-black'] .table th,
body.hrms-modern[data-theme='custom-org'] .table th {
    color: #171717 !important;
}

body.hrms-modern[data-theme='red-black'] .table thead th,
body.hrms-modern[data-theme='custom-org'] .table thead th {
    background: #f8f9fa !important;
    border-color: #e5e5e5 !important;
    color: #333333 !important;
}

body.hrms-modern[data-theme='red-black'] .btn-primary,
body.hrms-modern[data-theme='custom-org'] .btn-primary,
body.hrms-modern[data-theme='red-black'] .btn-danger,
body.hrms-modern[data-theme='custom-org'] .btn-danger,
body.hrms-modern[data-theme='red-black'] .badge.bg-primary,
body.hrms-modern[data-theme='custom-org'] .badge.bg-primary,
body.hrms-modern[data-theme='red-black'] .badge.bg-danger,
body.hrms-modern[data-theme='custom-org'] .badge.bg-danger {
    color: #ffffff !important;
}

body.hrms-modern .modal-dialog {
    margin: .75rem auto;
    max-height: calc(100vh - 1.5rem);
}

body.hrms-modern .modal-content {
    max-height: calc(100vh - 1.5rem);
    overflow: hidden;
}

body.hrms-modern .modal-body {
    overflow-y: auto;
}

body.hrms-modern[data-theme='light'] {
    --hrms-red-soft: #fce8e5;
}

body.hrms-modern .theme-preference-menu .dropdown-item i {
    color: var(--primary-color) !important;
    margin-right: 8px;
}

body.auth-modern {
    background: #f8f9fa !important;
    color: #171717 !important;
}

body.auth-modern .custom-login,
body.auth-modern .custom-login-inner,
body.auth-modern .custom-wrapper {
    background: #f8f9fa !important;
}

body.auth-modern .login-bg-img,
body.auth-modern .login-bg-img img,
body.auth-modern .bg-login {
    display: none !important;
}

body.auth-modern .custom-login-inner::before {
    background: radial-gradient(circle at 80% 20%, rgba(215, 25, 32, .12), transparent 35%), linear-gradient(135deg, #ffffff, #f8f9fa) !important;
    content: '';
    inset: 0;
    position: absolute;
    z-index: -1;
}

body.auth-modern .custom-login-inner .dash-header {
    background: rgba(255, 255, 255, .9) !important;
    border: 1px solid #e5e5e5;
    border-radius: 14px;
    margin: 18px auto 0;
    max-width: 1180px;
}

body.auth-modern .custom-login-inner .custom-row>.card {
    border: 1px solid #e5e5e5;
    background: #ffffff;
    box-shadow: 0 16px 40px rgba(17, 17, 17, .06);
}

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

body.hrms-modern .pagination .page-link {
    color: var(--hrms-red);
    border-color: var(--hrms-line);
}

body.hrms-modern .pagination .active .page-link {
    background: var(--hrms-red);
    border-color: var(--hrms-red);
    color: #fff;
}

body.hrms-modern .nav-tabs {
    border-bottom-color: var(--hrms-line);
}

body.hrms-modern .nav-tabs .nav-link {
    color: var(--hrms-muted);
}

body.hrms-modern .nav-tabs .nav-link.active {
    color: var(--hrms-red);
    border-color: var(--hrms-red) var(--hrms-red) #fff;
}

body.hrms-modern .modal-content {
    border: 1px solid var(--hrms-line);
    border-radius: 12px;
    box-shadow: 0 22px 60px rgba(17, 17, 17, .2);
}

body.hrms-modern .modal-header {
    border-bottom-color: var(--hrms-line);
}

body.hrms-modern .alert-danger {
    background: var(--hrms-red-soft);
    border-color: #f7c5be;
    color: var(--hrms-danger-text);
}

/* Semantic theme layer. Role and tenant values arrive from the admin layout. */
body.hrms-modern[data-theme='red-black'],
body.hrms-modern[data-theme='custom-org'] {
    --hrms-surface-text: var(--text-main, #fff);
}

body.hrms-modern[data-theme='red-black'] .dash-content,
body.hrms-modern[data-theme='custom-org'] .dash-content {
    background: var(--bg-main) !important;
    color: var(--text-main);
}

body.hrms-modern[data-theme='red-black'] .page-header-title h4,
body.hrms-modern[data-theme='custom-org'] .page-header-title h4,
body.hrms-modern[data-theme='red-black'] .card-header h5,
body.hrms-modern[data-theme='custom-org'] .card-header h5,
body.hrms-modern[data-theme='red-black'] .card-header h4,
body.hrms-modern[data-theme='custom-org'] .card-header h4,
body.hrms-modern[data-theme='red-black'] .form-label,
body.hrms-modern[data-theme='custom-org'] .form-label {
    color: var(--text-main) !important;
}

body.hrms-modern[data-theme='red-black'] .card,
body.hrms-modern[data-theme='custom-org'] .card,
body.hrms-modern[data-theme='red-black'] .modal-content,
body.hrms-modern[data-theme='custom-org'] .modal-content,
body.hrms-modern[data-theme='red-black'] .dropdown-menu,
body.hrms-modern[data-theme='custom-org'] .dropdown-menu {
    background: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main);
}

body.hrms-modern[data-theme='red-black'] .card-body,
body.hrms-modern[data-theme='custom-org'] .card-body,
body.hrms-modern[data-theme='red-black'] .modal-body,
body.hrms-modern[data-theme='custom-org'] .modal-body,
body.hrms-modern[data-theme='red-black'] .list-group-item,
body.hrms-modern[data-theme='custom-org'] .list-group-item {
    color: var(--text-main) !important;
}

body.hrms-modern[data-theme='red-black'] .text-dark,
body.hrms-modern[data-theme='custom-org'] .text-dark,
body.hrms-modern[data-theme='red-black'] .text-body,
body.hrms-modern[data-theme='custom-org'] .text-body,
body.hrms-modern[data-theme='red-black'] .text-black,
body.hrms-modern[data-theme='custom-org'] .text-black {
    color: var(--text-main) !important;
}

body.hrms-modern[data-theme='red-black'] .text-muted,
body.hrms-modern[data-theme='custom-org'] .text-muted,
body.hrms-modern[data-theme='red-black'] small,
body.hrms-modern[data-theme='custom-org'] small,
body.hrms-modern[data-theme='red-black'] .form-text,
body.hrms-modern[data-theme='custom-org'] .form-text {
    color: var(--text-muted) !important;
}

body.hrms-modern[data-theme='red-black'] .card a:not(.btn),
body.hrms-modern[data-theme='custom-org'] .card a:not(.btn),
body.hrms-modern[data-theme='red-black'] .modal a:not(.btn),
body.hrms-modern[data-theme='custom-org'] .modal a:not(.btn) {
    color: var(--primary-color);
}

body.hrms-modern[data-theme='red-black'] .dropdown-item,
body.hrms-modern[data-theme='custom-org'] .dropdown-item,
body.hrms-modern[data-theme='red-black'] .dropdown-header,
body.hrms-modern[data-theme='custom-org'] .dropdown-header {
    color: var(--text-main) !important;
}

body.hrms-modern[data-theme='red-black'] .dropdown-item:hover,
body.hrms-modern[data-theme='custom-org'] .dropdown-item:hover {
    background: color-mix(in srgb, var(--primary-color) 14%, transparent) !important;
}

body.hrms-modern[data-theme='red-black'] .card-header,
body.hrms-modern[data-theme='custom-org'] .card-header,
body.hrms-modern[data-theme='red-black'] .card-footer,
body.hrms-modern[data-theme='custom-org'] .card-footer,
body.hrms-modern[data-theme='red-black'] .modal-header,
body.hrms-modern[data-theme='custom-org'] .modal-header {
    background: transparent !important;
    border-color: var(--border-color) !important;
}

body.hrms-modern[data-theme='red-black'] .form-control,
body.hrms-modern[data-theme='custom-org'] .form-control,
body.hrms-modern[data-theme='red-black'] .form-select,
body.hrms-modern[data-theme='custom-org'] .form-select,
body.hrms-modern[data-theme='red-black'] .input-group-text,
body.hrms-modern[data-theme='custom-org'] .input-group-text {
    background: var(--bg-main) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

body.hrms-modern[data-theme='red-black'] .table,
body.hrms-modern[data-theme='custom-org'] .table {
    --bs-table-color: var(--text-main);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--border-color);
    --bs-table-striped-bg: color-mix(in srgb, var(--bg-surface) 82%, #fff 18%);
    --bs-table-hover-bg: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--text-main);
}

body.hrms-modern[data-theme='red-black'] .table td,
body.hrms-modern[data-theme='custom-org'] .table td,
body.hrms-modern[data-theme='red-black'] .table th,
body.hrms-modern[data-theme='custom-org'] .table th {
    color: var(--text-main) !important;
}

body.hrms-modern[data-theme='red-black'] .table thead th,
body.hrms-modern[data-theme='custom-org'] .table thead th {
    background: var(--bg-main) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

body.hrms-modern[data-theme='red-black'] .btn-primary,
body.hrms-modern[data-theme='custom-org'] .btn-primary,
body.hrms-modern[data-theme='red-black'] .btn-danger,
body.hrms-modern[data-theme='custom-org'] .btn-danger,
body.hrms-modern[data-theme='red-black'] .badge.bg-primary,
body.hrms-modern[data-theme='custom-org'] .badge.bg-primary,
body.hrms-modern[data-theme='red-black'] .badge.bg-danger,
body.hrms-modern[data-theme='custom-org'] .badge.bg-danger {
    color: var(--hrms-text-on-primary) !important;
}

body.hrms-modern .modal-dialog {
    margin: .75rem auto;
    max-height: calc(100vh - 1.5rem);
}

body.hrms-modern .modal-content {
    max-height: calc(100vh - 1.5rem);
    overflow: hidden;
}

body.hrms-modern .modal-body {
    overflow-y: auto;
}

body.hrms-modern[data-theme='light'] {
    --hrms-red-soft: #fce8e5;
}

body.hrms-modern .theme-preference-menu .dropdown-item i {
    color: var(--primary-color) !important;
    margin-right: 8px;
}

body.auth-modern {
    background: var(--bg-main) !important;
    color: var(--text-main) !important;
}

body.auth-modern .custom-login,
body.auth-modern .custom-login-inner,
body.auth-modern .custom-wrapper {
    background: var(--bg-main) !important;
}

body.auth-modern .login-bg-img,
body.auth-modern .login-bg-img img,
body.auth-modern .bg-login {
    display: none !important;
}

body.auth-modern .custom-login-inner::before {
    background: radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--primary-color) 28%, transparent), transparent 35%), linear-gradient(135deg, #121212, #1e1e1e) !important;
    content: '';
    inset: 0;
    position: absolute;
    z-index: -1;
}

body.auth-modern .custom-login-inner .dash-header {
    background: color-mix(in srgb, var(--bg-surface) 92%, transparent) !important;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    margin: 18px auto 0;
    max-width: 1180px;
}

body.auth-modern .custom-login-inner .custom-row>.card {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 16px;
    box-shadow: 0 22px 70px rgba(0, 0, 0, .35);
    color: var(--text-main);
}

body.auth-modern .custom-login-inner .custom-row>.card>.card-body,
body.auth-modern .custom-login-inner .custom-row>.card .card-header,
body.auth-modern .custom-login-inner .custom-row>.card .card-footer {
    background: transparent !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

body.auth-modern .custom-login-inner .form-control {
    background: var(--bg-main) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

body.auth-modern .custom-login-inner label,
body.auth-modern .custom-login-inner h2,
body.auth-modern .custom-login-inner h3,
body.auth-modern .custom-login-inner h4,
body.auth-modern .custom-login-inner p,
body.auth-modern .custom-login-inner a,
body.auth-modern .auth-footer,
body.auth-modern .navbar .nav-link {
    color: var(--text-main) !important;
}

body.auth-modern .custom-login-inner .btn-primary,
body.auth-modern .custom-login-inner .bg-primary {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
}

body.auth-modern .custom-login-inner .btn-primary:hover {
    background: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

body.auth-modern .custom-login-inner .text-primary,
body.auth-modern .custom-login-inner a:hover {
    color: var(--primary-color) !important;
}

@media (max-width: 991px) {
    body.hrms-modern .page-header {
        padding: 22px 18px 14px;
    }

    body.hrms-modern .dash-sidebar {
        box-shadow: 8px 0 30px rgba(17, 17, 17, .22);
    }
}

@media (max-width: 575px) {
    body.hrms-modern .card-body {
        padding: 16px;
    }

    body.hrms-modern .page-header {
        padding-left: 14px;
        padding-right: 14px;
    }

    body.hrms-modern .page-header .breadcrumb {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        white-space: nowrap;
    }

    body.hrms-modern .page-header .action-btn-col {
        max-width: 100%;
        width: 100%;
    }

    body.hrms-modern .page-header .action-btn-col .btn {
        margin-top: 4px;
        max-width: 100%;
        white-space: normal;
    }
}