/*
 * The dark-mode choice in the user menu (met_layout: "מראה" - light / dark / follow the device). Loaded only when the
 * session is offered the choice (gen.uiTheme). Each option carries Metronic 9's data-kt-theme-switch-set; KTThemeSwitch
 * (m9.js) sets data-kt-theme-switch-mode on <html>, and the check mark follows it here - so it is right after any AJAX
 * re-render of the header, with no server state.
 */
.im-theme-choice .kt-notification__item { cursor: default; }
.im-theme-choice__options { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 3px; }
.im-theme-choice__opt { display: inline-flex; align-items: center; gap: 5px; color: inherit; font-size: 0.95rem; white-space: nowrap; }
.im-theme-choice__opt:hover { text-decoration: underline; }
.im-theme-choice__opt .fa-check { visibility: hidden; font-size: 0.8rem; }
html[data-kt-theme-switch-mode="light"] .im-theme-choice__opt[data-kt-theme-switch-set="light"] .fa-check,
html[data-kt-theme-switch-mode="dark"] .im-theme-choice__opt[data-kt-theme-switch-set="dark"] .fa-check,
html[data-kt-theme-switch-mode="system"] .im-theme-choice__opt[data-kt-theme-switch-set="system"] .fa-check { visibility: visible; }
html[data-kt-theme-switch-mode="light"] .im-theme-choice__opt[data-kt-theme-switch-set="light"],
html[data-kt-theme-switch-mode="dark"] .im-theme-choice__opt[data-kt-theme-switch-set="dark"],
html[data-kt-theme-switch-mode="system"] .im-theme-choice__opt[data-kt-theme-switch-set="system"] { font-weight: 600; }

/*
 * Dark mode for what paints its colours from JavaScript, where no stylesheet token can reach: ApexCharts writes its
 * own <style> and puts colours in SVG attributes and in inline styles (ApexChartsService / met:apexcharts). A CSS
 * property beats an SVG presentation attribute, so these rules follow a LIVE switch too. Every rule is under
 * html.dark - the light theme is untouched. Colours come from the dark palette (m6-dark.css), so a palette change
 * reaches the charts as well.
 */
html.dark .apexcharts-xaxis text, html.dark .apexcharts-yaxis text, html.dark .apexcharts-title-text,
html.dark .apexcharts-subtitle-text, html.dark .apexcharts-datalabels-group text, html.dark .apexcharts-yaxis-title text,
html.dark .apexcharts-xaxis-title text { fill: var(--im-text-595d6e, #c9cad8); }
html.dark .apexcharts-legend-text { color: var(--im-text-595d6e, #c9cad8) !important; }
html.dark .apexcharts-gridline, html.dark .apexcharts-grid-borders line, html.dark .apexcharts-xaxis-tick,
html.dark .apexcharts-xaxis line, html.dark .apexcharts-yaxis line { stroke: var(--im-border-ebedf2, #2d2d3d); }
html.dark .apexcharts-radialbar-track .apexcharts-radialbar-area { stroke: var(--im-border-ebedf2, #2d2d3d); }
html.dark .apexcharts-pie-area { stroke: var(--im-bg-ffffff, #222231); }
html.dark .apexcharts-tooltip.apexcharts-theme-light, html.dark .apexcharts-xaxistooltip, html.dark .apexcharts-yaxistooltip {
    background: var(--im-bg-ffffff, #222231); border-color: var(--im-border-e3e3e3, #333343); color: var(--im-text-48465b, #d7d8e6);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); }
/* the axis tooltips are greyer than the point tooltip in light (#eceff1): keep them apart in dark too */
html.dark .apexcharts-xaxistooltip, html.dark .apexcharts-yaxistooltip { background: var(--im-bg-f7f8fa, #1c1c2b); }
html.dark .apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
    background: var(--im-bg-f8f8f8, #1d1d2b); border-bottom-color: var(--im-border-e3e3e3, #333343); }
html.dark .apexcharts-xaxistooltip-bottom:before, html.dark .apexcharts-xaxistooltip-bottom:after { border-bottom-color: var(--im-bg-ffffff, #222231); }
html.dark .apexcharts-menu { background: var(--im-bg-ffffff, #222231); border-color: var(--im-border-e3e3e3, #333343); }
html.dark .apexcharts-menu-item:hover { background: var(--im-bg-f7f8fa, #1c1c2b); }
html.dark .apexcharts-toolbar svg { fill: var(--im-text-74788d, #b9b9c7); }

/*
 * Colours that Java writes into a style string (bean.set("amount_style", "color:red"), TaxAssessment's value_style,
 * the documents list totals ...). They are not tokenized in Java on purpose: the same strings feed the PDF
 * (AnnualCalcPdfCells.styleColor parses "color:red"/"color:green") and the e-mails. In dark mode only, the pure
 * red/green/grey they carry are lifted so they stay readable on the dark surface; the -color guard keeps
 * background-color/border-color out.
 */
html.dark [style*="color:red"]:not([style*="-color:red"]), html.dark [style*="color: red"]:not([style*="-color: red"]) { color: #ff6b6b !important; }
html.dark [style*="color:green"]:not([style*="-color:green"]), html.dark [style*="color: green"]:not([style*="-color: green"]) { color: #5fd068 !important; }
html.dark [style*="color:#74788d"]:not([style*="-color:#74788d"]) { color: var(--im-text-74788d, #b9b9c7) !important; }

/*
 * An accent colour a page takes from Java (the document-type pill, the task priority / tracking / category pills) is
 * written as style="--im-accent:#6f42c1;color:var(--im-accent)" - identical in light. In dark only its lightness is
 * raised to a readable level on the dark surface, keeping its hue and chroma. (A browser without relative colours
 * drops the declaration and shows the original colour.)
 */
html.dark [style*="--im-accent"] { color: oklch(from var(--im-accent) max(l, 0.74) c h) !important; }

/*
 * Documents in dark mode - the white pages of issued documents, expenses, bank documents and every file the app shows.
 * They are DIMMED, never inverted: the colours, logos, stamps and signatures stay true, only the glare goes (white
 * paper reads as about #d4d4d4, black text stays black). The user can release it; the choice is one for the whole
 * system and stays on this device (localStorage im-doc-dim, class im-doc-bright on <html>, set before the first paint
 * by uiThemeHead). It is the sun / moon button in the corner of every document viewer (script_ms/m9/doc-dim.js -
 * a thumbnail you click to open follows the choice without a button of its own) and the "עמעום מסמכים" line in the
 * "מראה" menu. What a document surface is: an image, frame or object served by one of the document servlets, a
 * page image of the document preview (a4j:mediaOutput), and the wrapper jquery.maphilight paints the expense image
 * on (its inline background). KEEP THE LIST IN SYNC with DOC_SELECTOR in doc-dim.js. All under html.dark: light is
 * untouched.
 */
html.dark:not(.im-doc-bright) :is(
	img[src*="MediaOutputResource"], img[src*="servlets/downloadExpenseFile"], img[src*="servlets/downloadDocFile"],
	img[src*="servlets/viewDocFile"], img[src*="servlets/downloadAccountingFile"], img[src*="servlets/downloadAnnualReportFile"],
	img[src*="servlets/downloadImportFile"], img[src*="servlets/downloadIrsConfirmationFile"], img[src*="servlets/downloadWorkingHourFile"],
	img[src*="servlets/downloadTaskFile"], img[src*="servlets/supplierCheckPreview"], img[src*="servlets/projectSharePdf"],
	img[src*="servlets/downloadImage?type=bank"], img[src*="/expense_files/"],
	iframe[src*="servlets/download"], iframe[src*="servlets/viewDocFile"], iframe[src*="servlets/projectSharePdf"], iframe[src*="/expense_files/"],
	embed[src*="servlets/download"], object[data*="servlets/download"],
	div[style*="servlets/downloadExpenseFile"]
) { filter: brightness(0.8) contrast(1.1); }

/* The button in the corner of a document viewer: a zero-height sticky bar, so it takes no room and stays in view while
   a long document scrolls; it sits outside any pan/zoom transform, so it stays put while the image moves. */
html.dark .im-doc-dim-host { position: relative; }
.im-doc-dim-bar { position: sticky; top: 0; height: 0; z-index: 5; pointer-events: none; }
.im-doc-dim-bar--abs { position: absolute; top: 0; inset-inline: 0; }
.im-doc-dim-btn {
	position: absolute; top: 10px; inset-inline-end: 10px; pointer-events: auto; margin: 0;
	width: 34px; height: 34px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
	background: rgba(20, 20, 32, 0.78); color: #e7e7f0; border: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); cursor: pointer; font-size: 20px; line-height: 1;
	-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background-color 0.15s ease, color 0.15s ease;
}
.im-doc-dim-btn:hover { background: rgba(20, 20, 32, 0.95); color: #ffd666; }
.im-doc-dim-btn:focus-visible { outline: 2px solid #5d78ff; outline-offset: 2px; }
.im-doc-dim-btn .la-moon-o { display: none; }
html.im-doc-bright .im-doc-dim-btn .la-sun-o { display: none; }
html.im-doc-bright .im-doc-dim-btn .la-moon-o { display: inline-block; }
html:not(.dark) .im-doc-dim-bar { display: none; }

/* The same choice in the "מראה" menu - a check mark while documents are dimmed; shown only in dark mode. */
.im-doc-dim-choice { margin-top: 6px; }
html:not(.dark) .im-doc-dim-choice { display: none; }
html.dark:not(.im-doc-bright) .im-doc-dim-choice .fa-check { visibility: visible; }
html.dark:not(.im-doc-bright) .im-doc-dim-choice .im-theme-choice__opt { font-weight: 600; }

/*
 * The sign-in screens (login, locked) - offered the dark mode by GeneralAction.SIGN_IN_PAGES, with their own light /
 * dark choice (ms/layout/uiThemePills.xhtml). Every pill IS a language pill (.kt-lang-pill: height, border, radius,
 * font, hover); the active one takes the active language pill's colours from html[data-kt-theme-switch-mode], like the
 * check mark above. Where the group sits depends on the width AND on gen.mobile (a phone or a tablet, decided on the
 * server: the layouts place their logo by it, and its keyboard scrolls the page under anything fixed):
 *   login, a computer, 768px and up    - beside the fixed language row, at its reading-start end (--beside, placed
 *                                        absolutely so the row keeps its exact box; 20px clear of the globe, which
 *                                        heads the languages);
 *   login, under 768px or gen.mobile   - under the language row but IN the page (--below), so it scrolls away with the
 *                                        page instead of covering a field the keyboard scrolled up;
 *   locked, a computer, 768px and up   - alone in the same fixed corner (-corner);
 *   locked, under 768px or gen.mobile  - under the form (-below-form): the logo starts at the top there, under the corner.
 * Under 768px the pills show only their icons (each has a title and an aria-label).
 */
.im-theme-pills { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
/* will-change: its own compositing layer - otherwise the group widens the fixed row's layer and the language pills'
   shadows are rasterized one subpixel off (+-1 on 4 pixels in ru, measured): with it the row is pixel-identical */
.im-theme-pills--beside { position: absolute; top: 0; inset-inline-end: calc(100% + 20px); will-change: transform; }
/* top: the row's 14px + one pill (13px x line-height 1.4, 4px padding and a 1px border on each side) + 6px;
   z-index 1: above the page, below the fixed row it scrolls under */
.im-theme-pills--below { display: none; position: absolute; top: calc(14px + 13px * 1.4 + 10px + 6px); inset-inline-end: 14px; z-index: 1; }
.im-theme-pills--below.im-theme-pills--mobile { display: flex; }
.im-theme-pill .fa-solid { margin-inline-end: 5px; }
html[data-kt-theme-switch-mode="light"] .im-theme-pill[data-kt-theme-switch-set="light"],
html[data-kt-theme-switch-mode="dark"] .im-theme-pill[data-kt-theme-switch-set="dark"],
html[data-kt-theme-switch-mode="system"] .im-theme-pill[data-kt-theme-switch-set="system"] {
	background: var(--im-bg-5d78ff, #5d78ff); border-color: var(--im-border-5d78ff, #5d78ff); font-weight: 600;
	color: var(--im-text-ffffff, #fff); -webkit-text-fill-color: var(--im-text-ffffff, #fff);
}
.im-theme-pills-corner { position: fixed; top: 14px; inset-inline-end: 14px; z-index: 1050; }
.im-theme-pills-below-form { justify-content: center; margin-top: 2rem; }
/* the group rides in the language row's stacking context (z-index 1050, above the backdrop), so a centred popup
   (forgot password, code, 2FA) would cut it in half from 1024 to 1440 - while a popup is open it is not shown */
body.modal-open .im-theme-pills { visibility: hidden; }
@media (max-width: 767.98px) {
	.im-theme-pills-corner { position: static; justify-content: center; margin-top: 2rem; }
	.im-theme-pills--beside { display: none; }
	.im-theme-pills--below { display: flex; }
	.im-theme-pill { padding-inline: 9px; }
	.im-theme-pill .fa-solid { margin-inline-end: 0; }
	.im-theme-pill__label { display: none; }
}
/* Their art in dark: the background network (set INLINE on the wrapper, so only !important reaches it - scoped to
   html.dark, light keeps the inline image) and the logo with its grey ink lightened (brand blue / green kept): a
   second <img> (.im-logo-dark, rendered only with the theme) takes the first one's place under html.dark - plain
   display, which every engine has (content: url() on an <img> is not in every browser). */
html.dark #kt_login.kt-login--v3 > .kt-grid__item { background-image: url("vendor/media/bg/bg-3-dark.jpg") !important; }
.im-logo-dark { display: none; }
html.dark #kt_login.kt-login--v3 .kt-login__logo img { display: none; }
html.dark #kt_login.kt-login--v3 .kt-login__logo img.im-logo-dark { display: inline; }