/* 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.
   --------------------------------------------------------------------------- */
.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: 96; 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: 95; }
.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; }
}


/* ---- AJAX "page is busy" indicator --------------------------------------
 * KTApp.blockPage() blocks the page on EVERY ajax request with an overlay at
 * z-index 1100 - above an open modal (1050) - so while a request is in flight
 * nothing on screen can be clicked, popup included. Its spinner box, however,
 * is z-index 1011: behind the modal AND behind the overlay, 20px and faint.
 * A request that answers slowly therefore looked like a perfectly normal page
 * that simply ignored every tap. Lift the spinner above the overlay, give it a
 * card, and dim the overlay - all revealed by msStartBlockWatchdog only once
 * the wait is long enough to be worth showing, so short requests still feel
 * instant. */
.blockUI.blockMsg.blockPage {
	z-index: 1101 !important;
	transform: translate(-50%, -50%);
	padding: 20px 24px !important;
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
}
.blockUI.blockMsg.blockPage .kt-spinner {
	display: block;
	width: 24px;
	height: 24px;
	margin: 0 auto;
}
/* Hidden ONLY while msStartBlockWatchdog is still deciding whether this request is slow enough to
   be worth showing. A blockPage() called directly - the 34 export/download buttons, which fire no
   jsf.ajax event and so never reach the watchdog - carries neither class and shows at once. */
html.ms-block-pending .blockUI.blockMsg.blockPage {
	/* !important is required: jQuery blockUI fades the box in by animating an INLINE opacity,
	   which would otherwise beat this rule and flash the spinner for ~200ms on every request.
	   The watchdog REMOVES ms-block-pending when it adds ms-block-visible, so the reveal still works. */
	opacity: 0 !important;
}
html.ms-block-visible .blockUI.blockMsg.blockPage {
	opacity: 1;
	transition: opacity .2s ease-in;
}
.blockUI.blockOverlay {
	transition: opacity .2s ease-in;
}
html.ms-block-visible .blockUI.blockOverlay {
	opacity: .25 !important;
}