/* here you can put your own css to customize and override the theme for both RTL and LTR*/

/* font Assistant / Opesn Sans */
/*@import url(https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700);

code, pre {
  font-family:Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
  color:#333;
  font-size:12px;
}*/

/* END font Assistant / Opesn Sans */

body {
	font-size: 14px;
}


body, html {
    font-family: Rubik !important;   
}

.form-group label {
    font-size: 14px;
}
.form-control {
    font-size: 14px;
    border: 1px solid #c2cad8;
}
.toast .toast-message {
	font-size: 1rem;
}
.kt-badge.kt-badge--inline {
	font-weight: bold;
}

.table thead th, .table thead td {
	padding-top:0.75rem;
	padding-bottom:0.75rem;
}
.table-striped tbody tr:nth-of-type(odd) {/*this is for removing the background from tables that are inside the td of the table (like the actions table)*/
    background-color: transparent;
}
.table-striped > tbody > tr:nth-of-type(odd) {
	background-color: #fbfcfd;
}
.table-hover > tbody > tr:hover {
    background-color: #f3f4f6;
}
.table thead tr:first-child > th {
	background-color: #f1f4f7;
}

.btn-purple {
    color: #fff;
    background-color: #6f42c1;
    border-color: #6f42c1;
}
.btn-purple:hover {
	color: #fff;
    background-color: #703688;
    border-color: #6a3381;
}
.btn-purple:active {
	background-color:#5b2c6f;
	border-color:#432051;
}
.btn-white {
    color: #666;
    background-color: #fff;
    border-color: #fff;
}
.btn-white:hover {
    background-color: #e6e6e6;
    border-color: #e0e0e0;
}
.btn.default {
    color: #666;
    background-color: #e1e5ec;
    border-color: #e1e5ec;
}
.btn.default:hover {
    background-color: #c2cad8;
    border-color: #bcc5d4;
}
.btn.default:active {
	background-color:#acb7ca;
	border-color:#93a1bb;
}
.btn.btn-icon.btn-xs {
    height: 1.8rem;
    width: 2.5rem;
}
.btn.btn-xs [class^="fa-"], .btn-group-xs > .btn [class^="fa-"], .btn.btn-xs [class*=" fa-"], .btn-group-xs > .btn [class*=" fa-"] {
    font-size: 0.9rem;
}
.btn.btn-xs [class^="flaticon2-"], .btn-group-xs > .btn [class^="flaticon2-"], .btn.btn-xs [class*=" flaticon2-"], .btn-group-xs > .btn [class*=" flaticon2-"] {
    font-size: 0.9rem;
}
.btn-xs {
    padding: 0.4rem 0.5rem;
    font-size: 0.875rem;
  	line-height: 1;
 	border-radius: 0.2rem; 
 }

.btn {
	white-space: nowrap;
}

.actions .btn:not(:last-child), .table-toolbar .btn:not(:last-child), .actions .btn-div:not(:last-child), .table-toolbar .btn-div:not(:last-child),
.actions .btn-group:not(:last-child), .table-toolbar .btn-group:not(:last-child){
    margin-right: 5px;
}
.btn-group>.btn-group:not(:last-child) {
    margin-right: 0px;
}


.no-margin-next {
    margin-right: 0 !important;
}

/*.btn i {
    padding-right: 0 !important;
}*/

.margin-bottom-40 {
  margin-bottom: 40px; 
 }
.btn.btn-xs [class^="la-"], .btn-group-xs > .btn [class^="la-"], .btn.btn-xs [class*=" la-"], .btn-group-xs > .btn [class*=" la-"] {
    font-size: 1rem;
}
.table thead th, .table thead td {
	font-weight:bold;
}
.table .kt-checkbox {
	margin-bottom:0 !important;
}
.kt-checkbox>span {
    border: 1px solid #c2cad8;
}
.kt-checkbox>span:after {
    border: solid #888;
}
.kt-checkbox>input:disabled~span {
	background-color: #f7f8fa;
	cursor: default;
}
.list_actions td {
	border:0;
	padding:0;
}
table.list_actions .btn {
    margin-top: 0;
    margin-right: 0;
    margin-left: 5px;
    white-space: nowrap;
}
.bootstrap-select.form-control-sm .dropdown-toggle {
    padding: 0.5rem 0.5rem;
}
.kt-aside-menu .kt-menu__nav > .kt-menu__item > .kt-menu__heading .kt-menu__link-text, .kt-aside-menu .kt-menu__nav > .kt-menu__item > .kt-menu__link .kt-menu__link-text {
    color: #a2a3b7;
}
.kt-menu__link-text {
	text-align: center;
}

/*@media (min-width: 1025px) {
	.kt-aside {
	    width: 160px;
	}
	.kt-aside--fixed .kt-wrapper {
	    padding-right: 160px;
	}
	.kt-header--fixed .kt-header {
	    right: 160px;
	}
	.kt-aside--minimize .kt-aside-menu .kt-menu__nav > .kt-menu__item:not([data-ktmenu-submenu-mode=accordion]).kt-menu__item--hover > .kt-menu__submenu, .kt-aside-menu.kt-aside-menu--dropdown .kt-menu__nav > .kt-menu__item:not([data-ktmenu-submenu-mode=accordion]).kt-menu__item--hover > .kt-menu__submenu {
    	margin-right: 160px;
    }
}*/
.kt-aside-menu .kt-menu__nav > .kt-menu__item > .kt-menu__submenu .kt-menu__subnav > .kt-menu__item > .kt-menu__link {
    padding: 0 15px;
}
.kt-aside__brand {
	background-color: #242434;
}
.page-item.active .page-link {
	z-index:0;
}
.kt-aside-menu .kt-menu__nav > .kt-menu__item > .kt-menu__heading .kt-menu__link-icon, .kt-aside-menu .kt-menu__nav > .kt-menu__item > .kt-menu__link .kt-menu__link-icon {
    color: #4d5d7c;
}
.kt-subheader .kt-subheader__main .kt-subheader__title {
    font-size: 1.7rem;
}
.kt-subheader .kt-subheader__main .kt-subheader__title small {
    font-size: 1.0rem;
    margin-top: 6px;
    marign-left: 5px;
}
@media (max-width: 768px) {
	.kt-subheader .kt-subheader__main .kt-subheader__title {
	    font-size: 1.4rem;
	}
}
@media (max-width: 768px) {
	th.column-header-filter.kt-visible-mobile {
	    display: inherit !important;
	}
}
@media (max-width: 1024px) {
	.kt-header-mobile {
		background-color: #242434;
	}
}
.js-break-long-word { 
	overflow-wrap: break-word;
	word-break: break-word;
}
.table-toolbar, .actions {
	margin-bottom: 20px;
}
.kt-subheader__title .actions {
	margin-bottom: 0px;
}
.kt-portlet__foot .actions {
	margin-bottom: 0px;
}
.pull-right {
    float: left!important;
}
.dropdown-menu > li > a, .dropdown-menu > .dropdown-item {
    padding: 0.5rem 1.2rem;
}
.bootstrap-select .dropdown-menu.inner > li > a {
	padding: 7px 15px;
}
.toolbar-new-button {
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /* -webkit-box-align: center; */
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-item-align: center;
    /* align-self: center; */
    /* -webkit-box-pack: center; */
    -ms-flex-pack: center;
    justify-content: center;
}
  
.dropdown-menu > .dropdown-item > .kt-badge {
    margin-left: 0.75rem;
}
.text-stat {
	margin-left:5px;
}
.kt-subheader .btn {
	margin-top:0;
	margin-bottom:0;
}
.dashboard-iconbox {
	padding-left: 0;
    padding-right: 0;
    overflow: hidden;
    container-type: inline-size;
    height: calc(100% - 20px);
}
/* Stretch link-wrapped stat cubes so all cubes in a row get equal height */
a:has(> .dashboard-iconbox) {
	display: block;
	height: 100%;
}
.dashboard-iconbox .kt-portlet__body {
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
	-ms-flex-pack: center;
	justify-content: center;
	padding-top: 5px;
	padding-bottom: 5px;
}
.dashboard-iconbox .kt-iconbox__body {
	-ms-flex-align: center;
	align-items: center;
}
.dashboard-iconbox .kt-iconbox__body .kt-iconbox__icon {
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	padding-inline-end: clamp(8px, 4cqw, 16px);
}
.dashboard-iconbox .kt-iconbox__body .kt-iconbox__icon > i {
	font-size: clamp(24px, 13cqw, 41px);
}
.dashboard-iconbox .kt-iconbox__body .kt-iconbox__desc {
	min-width: 0;
}
/* Stat font sizes scale with the CUBE width via container-query units (cqw), clamped in
   ABSOLUTE px on purpose — NOT rem/em. The page root font-size differs by device/viewport
   (≈12-13px on a phone, 16px on desktop), so a rem/em cap would let the same cube render
   bigger on one device than another. px clamps make the cube look identical everywhere.
   The MAX equals the desktop quarter-cube size (≈cqw at a ~310px box): a full-width mobile
   cube is WIDER (~400px) than a desktop quarter-cube, so without this px cap cqw blows the
   text up on mobile. Capping at the desktop size keeps mobile == desktop == refined, while
   narrow cubes (reports, 6-up) stay cqw-driven below the cap. */
.dashboard-iconbox .kt-widget24__stats {
	font-size: clamp(15px, 8cqw, 25px);
	line-height: 1.25;
	margin-bottom: 0.25rem;
}
/* Keep amount + currency sign on one line (pure-amount divs and ltr amount spans only) */
.dashboard-iconbox .kt-widget24__stats .number:not([dir]),
.dashboard-iconbox .kt-widget24__stats span[dir="ltr"] {
	white-space: nowrap;
}
.dashboard-iconbox .kt-iconbox__body .kt-iconbox__desc .kt-iconbox__content {
	font-size: clamp(10px, 4.5cqw, 14px);
	line-height: 1.35;
}
/* Very narrow cubes — drop the icon so the number stays readable */
@container (max-width: 220px) {
	.dashboard-iconbox .kt-iconbox__body .kt-iconbox__icon {
		display: none;
	}
}
.kt-badge.kt-badge--inline{
	white-space: nowrap;
}
.kt-badge.kt-badge--inline.kt-badge--md {
    padding: .3rem .6rem;
}
.dataTables_wrapper .dataTables_info {
	margin-bottom: 1rem;
}
.daterangepicker .drp-calendar td.active.available.off {
	background-color: inherit;	
}
.daterangepicker .drp-calendar td.today, .datepicker tbody tr > td.day.today {
	background: rgba(238, 162, 0, 0.7) !important;
}
.datepicker tbody tr > td.day.today.active {
	background-color: #5867dd !important;
}
.datepicker tbody tr>td.day.disabled {
	color: #bfbfbf;
}
@media (min-width:1024px){.modal-md{max-width:600px}}

.input-group .btn i {
    color: inherit;
}
.btn i.iconAfter {
	padding-right: 0;
	padding-left: 0.5rem;
}
.form-group {
    margin-bottom: 1.3rem;
}
.kt-list-timeline .kt-list-timeline__items .kt-list-timeline__item [class*=" fa-"], .kt-list-timeline .kt-list-timeline__items .kt-list-timeline__item [class^=flaticon2-] {
    font-size: 0.9rem;
}
.btn-group-sm>.btn, .btn-sm {
	padding: .65rem 1rem;
}
.input-group>.twitter-typeahead:not(:last-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.input-group>.twitter-typeahead {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1%;
    margin-bottom: 0;
}
.no-padding{
	padding-left: 0px;
	padding-right: 0px;
}

/* correction for typeahead so it will be on all field length and not in a constant size*/
.tt-menu {
	width: 100%;
}

/* the font of error message is too little in metronic */
.invalid-feedback {
	font-size: 13px!important;
}

/* the font of help text is too little in metronic */
.text-muted {
	font-size: 13px!important;
}
.actions .kt-subheader__btn-daterange, .table-toolbar .kt-subheader__btn-daterange{
    background: #e1e3ec;
}
.actions .kt-subheader__btn-daterange .kt-subheader__btn-daterange-date, .table-toolbar .kt-subheader__btn-daterange .kt-subheader__btn-daterange-date{
    display: inline-block;
    color: #2c77f4;
    margin-left: 0;
    font-weight: 500;
}
.actions .kt-subheader__btn-daterange i, .table-toolbar .kt-subheader__btn-daterange i{
    color: #2c77f4;
}
.btn i{
    font-size: 1rem!important;
}
.btn-group-sm>.btn, .btn-sm {
    line-height: 1.15;
}
select.form-control[size] {
    height: calc(1.5em + 1.3rem + 2px);
}
select.form-control-sm[size] {
	height: calc(1.5em + 1rem + 2px);
}
.btn.btn-icon {
    height: 2.93rem;
}
.kt-font-bold {
    font-weight: 600!important;
}
.fa-2 {
    font-size: 2em;
}
.bootstrap-switch .bootstrap-switch-handle-off, .bootstrap-switch .bootstrap-switch-handle-on, .bootstrap-switch .bootstrap-switch-label {
	letter-spacing: inherit;
}

.kt-wizard-v1 .kt-wizard-v1__nav .kt-wizard-v1__nav-items .kt-wizard-v1__nav-item[data-ktwizard-state=done]:after {
	color: #1dc9b7
}
.kt-wizard-v1 .kt-wizard-v1__nav .kt-wizard-v1__nav-items .kt-wizard-v1__nav-item[data-ktwizard-state=done] .kt-wizard-v1__nav-body .kt-wizard-v1__nav-icon {
	color: #1dc9b7
}
.kt-wizard-v1 .kt-wizard-v1__nav .kt-wizard-v1__nav-items .kt-wizard-v1__nav-item[data-ktwizard-state=done] .kt-wizard-v1__nav-body .kt-wizard-v1__nav-icon g [fill] {
	fill: #1dc9b7
}
.kt-wizard-v1 .kt-wizard-v1__nav .kt-wizard-v1__nav-items .kt-wizard-v1__nav-item[data-ktwizard-state=done] .kt-wizard-v1__nav-body .kt-wizard-v1__nav-label {
	color: #1dc9b7
}
.kt-wizard-v1 .kt-wizard-v1__nav .kt-wizard-v1__nav-items .kt-wizard-v1__nav-item[data-ktwizard-state=current]:after {
    color: #2c77f4;
}
.kt-login.kt-login--v5 .btn {
	height: inherit;
}
.bootbox.modal .modal-content .modal-header .close:before {
    content: "";
}
.modal .modal-content .modal-header .close {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #f0f3f7;
    color: #6c757d;
    opacity: 1;
    font-size: 0;
    padding: 0;
    margin: 0;
    border: none;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.modal .modal-content .modal-header .close:before {
    content: "\f00d";
    font-family: "FontAwesome";
    font-weight: 900;
    font-size: 18px;
    line-height: 1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal .modal-content .modal-header .close:hover,
.modal .modal-content .modal-header .close:focus {
    background-color: #e1e5ec;
    color: #3f4254;
    transform: scale(1.05);
    opacity: 1;
    outline: none;
}
@media (max-width: 767px) {
    .modal .modal-content .modal-header .close {
        width: 36px;
        height: 36px;
    }
    .modal .modal-content .modal-header .close:before {
        font-size: 16px;
    }
}
/* Session-timeout dialog only.
   The bootstrap-session-timeout plugin builds Bootstrap-3 markup (close button BEFORE the
   title), and the theme bundle pins that button with an ID rule
   "#session-timeout-dialog .modal-header .close { position:absolute; top:1.75rem; left/right:25px }".
   That rule outranks the round 40px close styling above, so the button was taken out of the
   header's flex flow and hung ~4px BELOW the header divider. Put it back in the flow and give
   it the same metrics every other modal header uses (padding-bottom 8px + margin-top -7px,
   see met/modal.xhtml). order:1 keeps it on the reading-end side in both RTL and LTR.
   Scoped to #session-timeout-dialog - no other modal is affected. */
#session-timeout-dialog .modal-content .modal-header {
    padding-bottom: 8px;
}
#session-timeout-dialog .modal-content .modal-header .close {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    margin-top: -7px;
    order: 1;
}
.modal-drag-handle {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 3px;
    padding: 4px 10px;
    cursor: move;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    opacity: 0.35;
    transition: opacity 0.15s ease-in-out;
    z-index: 2;
}
.modal-drag-handle:hover {
    opacity: 0.8;
}
.modal-drag-handle span {
    width: 4px;
    height: 4px;
    background-color: #595d6e;
    border-radius: 50%;
    display: inline-block;
}
@media (pointer: coarse) {
    .modal-drag-handle { display: none; }
}
.alert[data-notify] .close:before {
	content: "";
}
.kt-login.kt-login--v3 .kt-login__wrapper .kt-login__container .kt-form .form-control.is-invalid, .was-validated .form-control:invalid {
    border: 1px solid #fd397a;
}
.dropdown-item.active, .dropdown-item:active {
    color: #555;
    background-color: #f6f6f6;
}
.btn-round-at-end {
	border-top-right-radius: 4px!important;
    border-bottom-right-radius: 4px!important;
}
.form-control-sm {
    font-size: 1rem;
}
.control-label .required, .form-group .required {
    color: #e02222;
}
.tt-suggestion.tt-cursor {
  background-color: #eee;
}
.kt-notification .kt-notification__item:after {
	content: "";
}
.kt-notification a.kt-notification__item {
	cursor: pointer;
}
.minicolors-swatch {
  width: 34px !important;
  height: 34px !important;
}

/* Legacy fallback — only for browsers without container-query support */
@supports not (container-type: inline-size) {
	@media (min-width: 1000px) and (max-width: 1400px) {
		.dashboard-iconbox .kt-portlet__body {
			padding: 15px !important;
			padding-top: 3px !important;
			padding-bottom: 3px !important;
		}
		.kt-widget24__stats {
			font-size: 1.33vw !important;
		}
		.kt-iconbox__content {
		    font-size: 0.82vw !important;
		}
	}
}

table.table thead .sorting_asc:after {
    content:"\2191"
}
table.table thead .sorting_desc:after {
    content:"\2193"
}
table.table thead th a.sortable {
	color:#212529;
}

.toast-top-full-width {
    top: 12px;
}

.dz-drag-hover {
	background: #F0F0F0;
}

th.rf-dt-shdr-c > span {
	font-family: inherit !important;
}
.bg-purple {
    background-color: #6f42c1!important;
}
#toast-container>div {
	opacity: 1;
	font-weight: bold;
}
.tt-menu {
	max-height: 400px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.modal-backdrop.show {
	opacity: 0.7;
}
.kt-header-mobile .kt-header-mobile__toolbar .kt-header-mobile__toolbar-toggler span::after, .kt-header-mobile .kt-header-mobile__toolbar .kt-header-mobile__toolbar-toggler span::before, .kt-header-mobile .kt-header-mobile__toolbar .kt-header-mobile__toolbar-toggler span {
   background: #e83e8c;
}
.kt-aside-menu .kt-menu__nav>.kt-menu__item>.kt-menu__link {
    padding: 9px 10px;
}
.kt-badge.kt-badge--unified-default {
    color: #cecece;
}
.kt-badge.kt-badge--unified-yellow {
    color: #f6f62d;
}
.danger {
    color: #fd397a;
}
.warning {
    color: #ffb822;
}

/* "New" button dropdown - Mobile tile layout (rendered only when gen.mobile=true via c:if) */

/* Dropdown container */
.new-btn-dropdown {
    width: calc(100vw - 20px) !important;
    max-width: 400px;
    border-radius: 16px !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.04) !important;
    padding: 0 !important;
    overflow: hidden;
    border: none !important;
    background: #f8f9fc;
}

/* Gradient header */
.new-btn-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 18px 16px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.new-btn-header i {
    font-size: 13px;
    background: rgba(255,255,255,0.25);
    width: 24px;
    height: 24px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hide all standard dividers */
.new-btn-dropdown > .dropdown-divider {
    display: none;
}

/* --- Documents section (scrollable responsive grid) --- */
.new-btn-docs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 14px 12px;
    max-height: 250px;
    overflow-y: auto;
    overflow-x: hidden; /* a long doc-type label (e.g. "חשבון עסקה (דרישה לתשלום)") must never cause horizontal scroll/jiggle */
    -webkit-overflow-scrolling: touch;
    background: #f8f9fc;
}

.new-btn-docs .dropdown-item {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 4px 12px !important;
    text-align: center;
    font-size: 12px !important;
    font-weight: 600;
    color: #48465b;
    background: #fff;
    min-height: 90px;
    line-height: 1.25;
    border: none;
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    transition: transform 0.15s, box-shadow 0.15s;
    /* Bootstrap's .dropdown-item defaults to white-space:nowrap → a long label (e.g.
       "חשבון עסקה (דרישה לתשלום)") stays on one line, spills out of the tile and blows out
       the grid (horizontal jiggle). Allow wrapping + let the grid item shrink to its column. */
    white-space: normal;
    overflow-wrap: break-word;
    min-width: 0;
    width: 100%;
}

.new-btn-docs .dropdown-item:active {
    transform: scale(0.96);
    box-shadow: 0 0 0 rgba(0,0,0,0);
    background: #f0f2ff;
}

.new-btn-docs .dropdown-item i {
    font-size: 22px !important;
    color: #5d78ff;
    margin-bottom: 8px;
    width: 44px !important;
    height: 44px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: #eef0ff;
    border-radius: 12px;
    flex-shrink: 0;
}

/* --- "Scroll for more" affordance on the documents grid ---
   The grid scrolls (max-height above), but on a phone the cut-off wasn't obvious, so customers
   didn't realise there were more document types below the fold. The wrapper is only a positioning
   context — it shrink-wraps the grid and never changes its responsive sizing. The soft fade +
   bouncing chevron is shown ONLY while the grid can still scroll down (JS toggles .nbd-more) and
   fades away once the user reaches the end; when everything fits it never appears. */
.new-btn-docs-wrap {
    position: relative;
}
.new-btn-docs-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 44px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 5px;
    background: linear-gradient(to top, #f8f9fc 35%, rgba(248,249,252,0.85) 65%, rgba(248,249,252,0));
    pointer-events: none; /* never intercept a tap meant for a tile underneath */
    opacity: 0;
    transition: opacity 0.2s ease;
}
.new-btn-docs-wrap.nbd-more .new-btn-docs-fade {
    opacity: 1;
}
.new-btn-docs-fade i {
    font-size: 15px;
    line-height: 1;
    color: #764ba2; /* the purple from the header gradient */
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(102,89,168,0.28);
    animation: nbdBounce 1.5s ease-in-out infinite;
}
@keyframes nbdBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(3px); }
}

/* --- Quick Actions section (responsive grid) --- */
.new-btn-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 0 12px 14px;
    background: #f8f9fc;
    border-top: 1px solid #ebedf2;
    padding-top: 14px;
}

.new-btn-actions .dropdown-item {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 4px 12px !important;
    text-align: center;
    font-size: 12.5px !important;
    font-weight: 600;
    color: #48465b;
    background: #fff;
    min-height: 90px;
    line-height: 1.25;
    border: none;
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    transition: transform 0.15s, box-shadow 0.15s;
    white-space: normal;
    overflow-wrap: break-word;
    min-width: 0;
    width: 100%;
}

.new-btn-actions .dropdown-item:active {
    transform: scale(0.96);
    box-shadow: 0 0 0 rgba(0,0,0,0);
}

.new-btn-actions .dropdown-item i {
    font-size: 22px !important;
    margin-bottom: 8px;
    width: 44px !important;
    height: 44px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    flex-shrink: 0;
}

/* Accent icon backgrounds per action tile */
.new-btn-actions a:nth-of-type(1) i { color: #fd397a; background: #ffebf1; }  /* Camera */
.new-btn-actions a:nth-of-type(2) i { color: #5d78ff; background: #eef0ff; }  /* Item */
.new-btn-actions a:nth-of-type(3) i { color: #0abb87; background: #e3f8f1; }  /* Customer */
.new-btn-actions a:nth-of-type(4) i { color: #ffb822; background: #fff6e0; }  /* Supplier */
.new-btn-actions a:nth-of-type(5) i { color: #7c5ecf; background: #f0ebff; }  /* Project */

/* Small phones: 2 columns */
@media (max-width: 359px) {
    .new-btn-docs { grid-template-columns: repeat(2, 1fr); }
    .new-btn-actions { grid-template-columns: repeat(2, 1fr); }
}

/* SweetAlert custom icon support */
.swal-custom-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5867dd 0%, #6f42c1 100%);
    color: #fff;
    font-size: 36px;
    box-shadow: 0 8px 25px rgba(88, 103, 221, 0.3);
}
.swal-custom-icon i {
    line-height: 1;
}

/* SweetAlert2 Confirm Dialog Styling */
.swal-confirm-dialog {
    border-radius: 12px !important;
}
.swal-confirm-dialog .swal2-actions {
    flex-direction: row-reverse;
}
.swal-confirm-dialog .swal2-title {
    font-size: 1.25em;
    font-weight: 600;
    color: #333;
}
.swal-confirm-dialog .swal2-content {
    font-size: 1em;
    color: #555;
    line-height: 1.6;
}
.swal-confirm-dialog .swal2-confirm {
    border-radius: 6px !important;
    padding: 8px 28px !important;
    font-weight: 500;
    font-size: 1em;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.swal-confirm-dialog .swal2-cancel {
    border-radius: 6px !important;
    padding: 8px 28px !important;
    font-weight: 500;
    font-size: 1em;
}



/* ===== Invite Friend Button: Desktop=text, Mobile=icon ===== */
.invite-friend-text {
    font-style: initial;
    font-size: 16px;
}
.invite-friend-icon-btn {
    display: none;
}

@media (max-width: 767px) {
    .invite-friend-text {
        display: none !important;
    }
    .invite-friend-icon-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        color: #7c3aed;
        font-size: 18px;
    }
    .invite-friend-icon-btn > i {
        color: #7c3aed;
        font-size: 18px;
    }
}



/* ===== Invite Friend Card ===== */
.invite-friend-card {
    border: none !important;
    border-radius: 20px !important;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.18);
    padding: 0 !important;
}

.invite-friend-inner {
    background: linear-gradient(145deg, #4f46e5, #7c3aed, #a855f7);
    padding: 30px 24px 26px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Subtle decorative pattern */
.invite-friend-inner::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -30%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.invite-friend-inner::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -20%;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(255,255,255,0.07) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.invite-friend-icon {
    font-size: 44px;
    margin-bottom: 10px;
    line-height: 1;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.15));
}

.invite-friend-title {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
    line-height: 1.3;
    letter-spacing: -0.3px;
}

.invite-friend-desc {
    font-size: 13.5px;
    color: rgba(255,255,255,0.88);
    line-height: 1.6;
    margin-bottom: 22px;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}

.invite-friend-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.invite-friend-actions .btn-invite {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.invite-friend-actions .btn-invite:hover {
    transform: translateY(-2px);
    color: #fff;
    text-decoration: none;
}

.invite-friend-actions .btn-invite:active {
    transform: translateY(0) scale(0.97);
}

.invite-friend-actions .btn-invite i {
    font-size: 18px;
}

.invite-friend-actions .btn-invite-whatsapp {
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1.5px solid rgba(255,255,255,0.35);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.invite-friend-actions .btn-invite-whatsapp:hover {
    background: rgba(255,255,255,0.3);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.invite-friend-actions .btn-invite-whatsapp i {
    color: #25D366;
}

.invite-friend-actions .btn-invite-mail {
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1.5px solid rgba(255,255,255,0.35);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.invite-friend-actions .btn-invite-mail:hover {
    background: rgba(255,255,255,0.3);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.invite-friend-actions .btn-invite-mail i {
    color: #fbbf24;
}



/* ===== Invite Accountant Button (sibling of Invite Friend, business/teal accent) ===== */
/* The trigger is a brand-gradient pill so it stands out from the plain "invite friend" text */
.invite-accountant-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(135deg, #1b3b8b, #1aa6a0);
    color: #fff !important;
    padding: 7px 16px;
    border-radius: 50px;
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(27,59,139,0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.invite-accountant-trigger:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(27,59,139,0.45);
}
.invite-accountant-trigger-ico {
    font-size: 17px;
    color: #fff;
}
.invite-accountant-text {
    font-style: initial;
    font-size: 15px;
    color: #fff;
    font-weight: 700;
}
.invite-accountant-icon-btn {
    display: none;
}

@media (max-width: 767px) {
    .invite-accountant-trigger {
        background: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
    .invite-accountant-trigger-ico {
        display: none !important;
    }
    .invite-accountant-text {
        display: none !important;
    }
    .invite-accountant-icon-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        color: #1aa6a0;
        font-size: 18px;
    }
    .invite-accountant-icon-btn > i {
        color: #1aa6a0;
        font-size: 18px;
    }
}

/* ===== Invite Accountant Card ===== */
.invite-accountant-card {
    border: none !important;
    border-radius: 20px !important;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.18);
    padding: 0 !important;
}
.invite-accountant-inner {
    background: linear-gradient(145deg, #0f2a5e, #1b3b8b, #1aa6a0);
    padding: 30px 24px 26px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.invite-accountant-inner::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -30%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.invite-accountant-inner::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -20%;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(255,255,255,0.07) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.invite-accountant-icon {
    font-size: 44px;
    margin-bottom: 10px;
    line-height: 1;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.15));
}
.invite-accountant-title {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
    line-height: 1.3;
    letter-spacing: -0.3px;
}
.invite-accountant-desc {
    font-size: 13.5px;
    color: rgba(255,255,255,0.9);
    line-height: 1.6;
    margin-bottom: 20px;
    max-width: 290px;
    margin-left: auto;
    margin-right: auto;
}
.invite-accountant-desc b {
    color: #ffd866;
}
.invite-accountant-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    position: relative;
    z-index: 1;
}
.invite-accountant-actions .btn-invite {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.invite-accountant-actions .btn-invite:hover {
    transform: translateY(-2px);
    color: #fff;
    text-decoration: none;
}
.invite-accountant-actions .btn-invite:active {
    transform: translateY(0) scale(0.97);
}
.invite-accountant-actions .btn-invite i {
    font-size: 18px;
}
.invite-accountant-actions .btn-invite-whatsapp,
.invite-accountant-actions .btn-invite-mail {
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1.5px solid rgba(255,255,255,0.35);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.invite-accountant-actions .btn-invite-whatsapp:hover,
.invite-accountant-actions .btn-invite-mail:hover {
    background: rgba(255,255,255,0.3);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.invite-accountant-actions .btn-invite-whatsapp i {
    color: #25D366;
}
.invite-accountant-actions .btn-invite-mail i {
    color: #ffd866;
}
.invite-accountant-link {
    display: inline-block;
    margin-top: 16px;
    color: rgba(255,255,255,0.85);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: underline;
    position: relative;
    z-index: 1;
}
.invite-accountant-link:hover {
    color: #fff;
    text-decoration: underline;
}



/* SweetAlert2 Mobile Responsive */
@media (max-width: 767px) {
    .swal2-popup {
        width: 90% !important;
        max-width: 90vw !important;
        padding: 15px !important;
        font-size: 0.95em !important;
    }
    .swal2-popup .swal2-title {
        font-size: 1.1em;
    }
    .swal2-popup .swal2-content {
        font-size: 0.9em;
    }
    .swal2-popup .swal2-actions {
        flex-wrap: wrap;
        gap: 8px;
    }
    .swal2-popup .swal2-confirm,
    .swal2-popup .swal2-cancel {
        min-width: 100px;
        padding: 8px 20px !important;
        font-size: 0.95em;
    }
    .swal-custom-icon {
        width: 60px;
        height: 60px;
        font-size: 28px;
    }
}

/* Exact filter toggle button inside column header filter */
.exact-filter-btn {
	position: absolute;
	left: 2px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	line-height: 16px;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	border-radius: 3px;
	color: #bbb;
	background: #f0f0f0;
	user-select: none;
	z-index: 5;
	padding: 0;
	display: none;
}
.exact-filter-btn.visible {
	display: none;
}
.exact-filter-wrapper:hover .exact-filter-btn.visible {
	display: block;
}
/* "off" button hidden by default, shown when active */
.exact-filter-btn.exact-filter-off {
	display: none;
}
.exact-filter-btn.exact-filter-off.visible {
	display: block;
}
.exact-filter-btn:hover {
	color: #333;
	background: #e0e0e0;
}
.exact-filter-btn.exact-filter-off {
	color: #fff;
	background: #8d95d6;
}
.exact-filter-btn.exact-filter-off:hover {
	color: #fff;
	background: #5867dd;
}
.exact-filter-wrapper .has-exact-btn {
	padding-left: 24px;
}

/* ---------------------------------------------------------------------------
   Table-filter / date controls must NOT escape to the ROOT stacking context.
   Bootstrap puts the calendar button (.input-group-append .btn) at
   position:relative;z-index:2, a focused .form-control inside an input-group at
   z-index:3, and .exact-filter-btn above is z-index:5. #kt_aside is only
   z-index:1 (its flyout submenu, z-index:98, is trapped inside it), so with no
   isolating ancestor these paint OVER the open sidebar submenu and swallow its
   clicks. position+z-index:0 turns each control into its own stacking context:
   the order INSIDE it is unchanged, the whole control drops below the sidebar.
   The month filter carries .date on the same input-group, so it is covered too.
   Safe: bootstrap-datepicker renders its dropdown into <body> (container:"body"),
   so the calendar panel itself still escapes. See docs/claude/xhtml-jsf.md. */
.exact-filter-wrapper,
.input-group.date {
	position: relative;
	z-index: 0;
}

/* ===========================================================================
   b:expenseImageThumb — thumbnail of expense document with hover-zoom preview
   Used in actions columns of expense-related tables (ocrFeedbackReport, etc.)
   =========================================================================== */
.exp-thumb-wrap {
	position: relative;
	display: inline-block;
	line-height: 0;
	vertical-align: middle;
}
.exp-thumb-link {
	display: inline-block;
	line-height: 0;
	text-decoration: none;
}
.exp-thumb {
	object-fit: cover;
	border-radius: 6px;
	border: 1px solid #ebedf2;
	background: #fff;
	cursor: zoom-in;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
	display: block;
}
.exp-thumb-wrap:hover .exp-thumb,
.exp-thumb-wrap.exp-thumb-open .exp-thumb {
	border-color: #5d78ff;
	box-shadow: 0 2px 8px rgba(93, 120, 255, 0.35);
}
/* The zoomed preview — fixed-position so it can escape clipped/scrolled ancestors.
   JS positions it next to the thumbnail (see initExpenseImageThumbs). */
.exp-thumb-zoom {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1055;
	background: #ffffff;
	border: 1px solid #e2e5ec;
	border-radius: 10px;
	padding: 6px;
	box-shadow: 0 12px 36px rgba(40, 50, 90, 0.22), 0 2px 8px rgba(0,0,0,0.08);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.18s ease, visibility 0.18s;
	line-height: 0;
}
.exp-thumb-wrap:hover .exp-thumb-zoom,
.exp-thumb-wrap.exp-thumb-open .exp-thumb-zoom {
	opacity: 1;
	visibility: visible;
}
.exp-thumb-zoom img {
	display: block;
	border-radius: 6px;
	object-fit: contain;
}
/* Mobile — when the tap-open class is applied, center the zoomed image on the screen
   as an overlay so the tiny phone screen can actually see it. */
@media (hover: none) and (pointer: coarse) {
	.exp-thumb-wrap.exp-thumb-open::before {
		content: '';
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.55);
		z-index: 1050;
		animation: expThumbFade 0.18s ease;
	}
	.exp-thumb-wrap.exp-thumb-open .exp-thumb-zoom {
		top: 50% !important;
		left: 50% !important;
		transform: translate(-50%, -50%);
		max-width: 92vw;
		max-height: 92vh;
		padding: 8px;
	}
	.exp-thumb-wrap.exp-thumb-open .exp-thumb-zoom img {
		max-width: 88vw;
		max-height: 85vh;
	}
}
@keyframes expThumbFade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ===========================================================================
   b:customerPreview — customer name with hover-card showing main customer details.
   Used in the merge-customers/merge-suppliers list: the customer name itself
   acts as the trigger (no separate icon, no navigation), and on hover/tap a
   structured card with all the key fields appears next to it.
   =========================================================================== */
.cust-preview-wrap {
	position: relative;
	display: inline-block;
	vertical-align: middle;
}
.cust-preview-trigger-name {
	display: inline-block;
	color: #5d78ff;
	cursor: default;
	transition: color 0.15s ease, text-decoration-color 0.15s ease;
	text-decoration: underline dotted rgba(93, 120, 255, 0.4);
	text-underline-offset: 3px;
}
.cust-preview-wrap:hover .cust-preview-trigger-name,
.cust-preview-wrap.cust-preview-open .cust-preview-trigger-name {
	color: #2c4ad6;
	text-decoration: underline solid #2c4ad6;
}
.cust-preview-card {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1055;
	width: 340px;
	max-width: 92vw;
	background: #ffffff;
	border: 1px solid #e2e5ec;
	border-radius: 10px;
	padding: 12px 14px;
	box-shadow: 0 12px 36px rgba(40, 50, 90, 0.22), 0 2px 8px rgba(0,0,0,0.08);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.18s ease, visibility 0.18s;
	font-size: 13px;
	color: #48465b;
	text-align: start;
}
.cust-preview-wrap:hover .cust-preview-card,
.cust-preview-wrap.cust-preview-open .cust-preview-card {
	opacity: 1;
	visibility: visible;
}
.cust-preview-header {
	border-bottom: 1px solid #ebedf2;
	padding-bottom: 8px;
	margin-bottom: 8px;
}
.cust-preview-title {
	font-weight: 600;
	font-size: 15px;
	color: #2c2e3e;
	line-height: 1.3;
	word-break: break-word;
}
.cust-preview-subtitle {
	display: inline-block;
	margin-top: 2px;
	color: #74788d;
	font-size: 12px;
}
.cust-preview-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.cust-preview-row {
	display: flex;
	align-items: baseline;
	gap: 8px;
	line-height: 1.4;
}
.cust-preview-label {
	flex: 0 0 110px;
	color: #74788d;
	font-size: 12px;
	font-weight: 500;
}
.cust-preview-value {
	flex: 1 1 auto;
	color: #2c2e3e;
	word-break: break-word;
	overflow-wrap: anywhere;
}
.cust-preview-balance {
	font-weight: 600;
}
.cust-preview-remark .cust-preview-value {
	white-space: pre-wrap;
	max-height: 80px;
	overflow: auto;
}
@media (hover: none) and (pointer: coarse) {
	.cust-preview-wrap.cust-preview-open::before {
		content: '';
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.55);
		z-index: 1050;
		animation: expThumbFade 0.18s ease;
	}
	.cust-preview-wrap.cust-preview-open .cust-preview-card {
		top: 50% !important;
		left: 50% !important;
		transform: translate(-50%, -50%);
		max-width: 92vw;
		max-height: 85vh;
		overflow-y: auto;
	}
}

/* Merge-screen per-row supplier-history dropdown (b:customersContent).
 * Anchored next to the row's history icon by showSupplierHistory() in functions.js. */
.merge-name-cell {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}
.supplier-history-card {
	position: fixed;
	z-index: 1060;
	min-width: 620px;
	max-width: 92vw;
	background: #ffffff;
	border: 1px solid #c2cad8;
	border-radius: 8px;
	padding: 28px 12px 12px 12px;
	box-shadow: 0 12px 36px rgba(40, 50, 90, 0.22), 0 2px 8px rgba(0, 0, 0, 0.08);
	font-size: 14px;
	color: #48465b;
}
.supplier-history-close {
	position: absolute;
	top: 6px;
	inset-inline-end: 10px;
	width: 24px;
	height: 24px;
	line-height: 24px;
	text-align: center;
	border-radius: 50%;
	color: #74788d;
	font-size: 16px;
	background: #f0f1f5;
}
.supplier-history-close:hover {
	background: #e1e3ec;
	color: #2c2e3e;
	text-decoration: none;
}
.supplier-history-table {
	width: 100%;
	border-collapse: collapse;
	background: #ffffff;
}
.supplier-history-table td {
	border: 1px solid #ebedf2;
	padding: 6px 8px;
}
.supplier-history-card-link {
	margin-top: 8px;
}
.supplier-history-empty {
	padding: 10px;
	color: #74788d;
	text-align: center;
}

/* Subtle pulse animation to draw attention to important call-to-action buttons.
   Used by the document preview "Close" button so users discover that it issues
   a closing document (receipt, invoice, etc.). */
@keyframes close-btn-pulse-glow {
	0%   { box-shadow: 0 0 0 0 rgba(54, 153, 255, 0.55); }
	70%  { box-shadow: 0 0 0 10px rgba(54, 153, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(54, 153, 255, 0); }
}
.btn.close-btn-pulse {
	animation: close-btn-pulse-glow 2.2s ease-out infinite;
	position: relative;
}
.btn.close-btn-pulse:hover,
.btn.close-btn-pulse:focus,
.close-btn-attention.show .btn.close-btn-pulse {
	animation: none;
}
.close-btn-attention .dropdown-menu .dropdown-header {
	color: #6c757d;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	padding: 8px 16px 4px;
	letter-spacing: 0.3px;
}
@media (prefers-reduced-motion: reduce) {
	.btn.close-btn-pulse { animation: none; }
}

/* Bloodhound typeahead dropdown styling inside the retroactive-close modal */
#retroactiveClose .twitter-typeahead { width: 100%; display: block !important; }
#retroactiveClose .tt-menu {
	width: 100%; background: #fff; border: 1px solid #d6d6d6; border-radius: 4px;
	max-height: 320px; overflow-y: auto; z-index: 1080;
	box-shadow: 0 6px 12px rgba(0,0,0,0.15); margin-top: 2px;
}
#retroactiveClose .tt-suggestion { padding: 0; cursor: pointer; }
#retroactiveClose .tt-suggestion:hover,
#retroactiveClose .tt-suggestion.tt-cursor { background: #f5f5f5; }
#retroactiveClose .tt-hint { color: #999; }

/* Document preview inside retroactive-close modal — responsive image of the picked document */
.retroactive-preview-row {
	margin-top: 10px;
}
.retroactive-preview-link {
	display: inline-block;
	position: relative;
	padding: 6px;
	background: #fafbfc;
	border: 1px solid #e2e5ec;
	border-radius: 6px;
	text-decoration: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06);
	transition: box-shadow 0.15s ease-out, transform 0.15s ease-out;
	max-width: 100%;
}
.retroactive-preview-link:hover {
	box-shadow: 0 6px 18px rgba(0,0,0,0.12);
	transform: translateY(-1px);
	text-decoration: none;
}
.retroactive-preview-img {
	display: block;
	max-width: 100%;
	max-height: 360px;
	width: auto;
	height: auto;
	margin: 0 auto;
	border-radius: 4px;
	background: #fff;
}
.retroactive-preview-loading,
.retroactive-preview-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 120px;
	color: #74788d;
	font-size: 14px;
	background: rgba(255,255,255,0.85);
	border-radius: 6px;
	padding: 24px 16px;
	text-align: center;
}
.retroactive-preview-loading {
	font-size: 22px;
}
.retroactive-preview-fallback {
	color: #5867dd;
	border: 1px dashed #c2cad8;
	background: #fbfcfd;
}
.retroactive-preview-fallback .fa {
	margin-left: 6px;
	font-size: 18px;
}
@media (max-width: 768px) {
	.retroactive-preview-img {
		/* let max-width: 100% control the size — image scales to container width */
		max-height: none;
	}
	.retroactive-preview-link {
		display: block;
		text-align: center;
		width: 100%;
	}
}

/* === Updates icons (accountant lightbulb) — 3-pulse flash on page load === */
.accountant-updates-flash .kt-header__topbar-icon {
	animation: header-updates-glow 1.6s ease-out 3 0.4s;
	border-radius: 50%;
}
.accountant-updates-flash .kt-header__topbar-icon .fa-lightbulb {
	color: #ffb822 !important;
	animation: header-updates-wobble 0.6s ease-in-out 3 0.6s;
	transform-origin: 50% 100%;
	display: inline-block;
}
/* user star: keep the gold color but no page-load flash animation */
.user-updates-flash .kt-header__topbar-icon .fa-star {
	color: #ffb822 !important;
}
@keyframes header-updates-glow {
	0%   { box-shadow: 0 0 0 0 rgba(255, 184, 34, 0.75); }
	70%  { box-shadow: 0 0 0 14px rgba(255, 184, 34, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 184, 34, 0); }
}
@keyframes header-updates-wobble {
	0%, 100% { transform: scale(1) rotate(-8deg); }
	50%      { transform: scale(1.18) rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) {
	.accountant-updates-flash .kt-header__topbar-icon { animation: none; }
	.accountant-updates-flash .kt-header__topbar-icon .fa-lightbulb { animation: none; }
}

/* Purchase status row colors (purchase_status_cd code 101) — soft tints aligned with
   UsersAction.getPurchaseStatusColor() so the combo pill and the row tint match. */
tr.row-status-1 td { background-color: rgba(93, 120, 255, 0.06) !important; }   /* נרשם - כחול */
tr.row-status-2 td { background-color: rgba(88, 103, 221, 0.07) !important; }   /* מעוניין - אינדיגו */
tr.row-status-3 td { background-color: rgba(10, 187, 135, 0.09) !important; }   /* רכש - ירוק */
tr.row-status-4 td { background-color: rgba(253, 126, 20, 0.08) !important; }   /* לא מעוניין - כתום */
tr.row-status-5 td { background-color: rgba(253, 57, 122, 0.07) !important; }   /* ביטל - ורוד */
tr.row-status-6 td { background-color: rgba(116, 120, 141, 0.07) !important; }  /* לא ניתן להשיג - אפור */
tr.row-status-7 td { background-color: rgba(137, 80, 252, 0.07) !important; }   /* מתכחש לפניה - סגול */
tr.row-status-8 td { background-color: rgba(255, 184, 34, 0.10) !important; }   /* ליד כפול - צהוב */
tr.row-status-9 td { background-color: rgba(161, 165, 183, 0.10) !important; }  /* לא רלוונטי - אפור בהיר */

/* ── Bootbox dialog close (×) button ──────────────────────────────────────────
   Bootbox renders its close control as <button class="bootbox-close-button close">×</button>,
   where the × is a direct text node with no inner <span>. Metronic's modal-header .close
   styling hides the native glyph (icon-font reset — font-size/line-height 0 — plus an empty
   :before icon) because it is built for Bootstrap's <span>&times;</span> markup. On bootbox's
   markup that leaves the button blank: e.g. the "עסק נוסף בטאב אחר" / session-conflict dialogs
   showed no close X. Restore a plain, visible × for bootbox close buttons only. Clicking it
   already runs the dialog's onEscape handler (bootbox wires .bootbox-close-button to onEscape),
   so no JS change is needed. */
.bootbox.modal .modal-content .modal-header .bootbox-close-button.close {
	font-family: inherit !important;
	font-size: 1.5rem !important;
	line-height: 1 !important;
	color: #74788d !important;
	opacity: 0.7;
}
.bootbox.modal .modal-content .modal-header .bootbox-close-button.close:before {
	content: none !important;
}
.bootbox.modal .modal-content .modal-header .bootbox-close-button.close:hover {
	color: #2c77f4 !important;
	opacity: 1;
}

/* ---------------------------------------------------------------------------
   met:searchTable stickyHead="true" — wide-table helpers (see met/dataTable.xhtml)
   Horizontal scroll for the table, a second scrollbar above it, and a copy of the
   header rows pinned to the top of the screen. Driven by msStickyTableInit
   (script_ms/met/functions.js); everything is located by these class names.
   ⚠️ Both pinned boxes stay BELOW 95, which is where Metronic puts everything that
   opens over the page - .dropdown-menu, .daterangepicker, .tagify__dropdown - while the
   fixed app header sits at 97. They are opaque white and span the whole content width,
   so one notch too high paints a white stripe straight across an open menu: the date
   picker on דוח פרסום lost a calendar row and half a preset to the top scrollbar.
   They only ever have to cover the table under them, and the table is z-index auto.
   The side menu needs the rule right below this one to survive them - its flyout submenu
   reaches out over the table, and Metronic leaves the whole static aside at z-index 1.
   --------------------------------------------------------------------------- */
/* The aside-menu--dropdown flyout opens out of the side menu and across the content, but
   Metronic gives it z-index 98 INSIDE an aside that is itself only z-index 1 - a child
   cannot climb out of its parent's stacking context, so the whole submenu is painted at
   level 1 and anything positioned in the page covers it. The two boxes above did exactly
   that: the top scrollbar cut a bar through the first item of the מסמכים submenu.
   95 is the overlay tier, so .dropdown-menu and .daterangepicker - same 95, later in the
   DOM - still open above the menu, and the fixed header (97) still wins.
   ⚠️ The media query is load-bearing: below 1025px Metronic switches the aside to an
   off-canvas panel at z-index 1001 with its overlay at 1000, and that rule is LESS
   specific than this one - unscoped, this would drop the mobile menu behind its own
   overlay. */
@media (min-width: 1025px) {
	.kt-aside--static .kt-aside { z-index: 95; }
}
.ms-table-scroll { overflow-x: auto; width: 100%; }
/* Scrollbar above the table, kept in sync with the table's own. It pins together with
   the header copy - msStickySyncPane sets its top, and without a top a sticky box
   never sticks, so an untouched table behaves exactly as before. Once the table's own
   scrollbar has left the screen this bar is the only way left to reach the far
   columns, so it has to come along. */
.ms-scroll-top { overflow-x: auto; overflow-y: hidden; width: 100%; position: sticky; z-index: 94; background: #fff; }
.ms-scroll-top > div { height: 1px; }
/* Sticky wrapper takes no height in the flow, so adding it shifts nothing; the pinned
   copy hangs off it absolutely and is clipped horizontally. */
.ms-sticky-head { position: sticky; top: 0; height: 0; z-index: 93; }
.ms-sticky-head-clip {
	position: absolute; top: 0; inset-inline-start: 0; width: 100%;
	overflow: hidden; display: none; background: #fff;
	box-shadow: 0 4px 8px rgba(82, 63, 105, 0.10);
}
.ms-sticky-head-clip table { margin: 0; table-layout: fixed; }
/* The pinned rows are a legend — the live controls stay in the real header. */
.ms-sticky-head-clip, .ms-sticky-head-clip * { pointer-events: none; }
@media (max-width: 1024px) {
	.ms-sticky-head { display: none; }
	/* the pinned bar belongs with the pinned header, and neither is used here */
	.ms-scroll-top { position: static; }
}
@media print {
	.ms-sticky-head { display: none; }
	.ms-scroll-top { position: static; }
	.ms-table-scroll { overflow: visible; }
}