/*
 * GEN-306 Admin UI v2 - base layer: typography, focus, links, scrollbars, reduced motion.
 * Loaded after style.min.css and the theme's custom.css, so equal specificity wins here.
 * Uses tokens.css only.
 */

/* ---------- Typography ---------- */
body,
.nk-body,
.ui-widget,
.ui-widget button, .ui-widget input, .ui-widget select, .ui-widget textarea,
.search_filter, div.tagsinput, div.tagsinput input, .Newbar p, #info,
input, button, select, textarea, .btn, .form-control {
	font-family: var(--font-sans);
}

body {
	font-size: var(--fs-14);
	line-height: var(--lh-base);
	font-weight: var(--fw-regular);
	color: var(--c-text);
	background: var(--c-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, .h1 { font-size: var(--fs-26); font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: -.015em; color: var(--c-text); }
h2, .h2 { font-size: var(--fs-18); font-weight: var(--fw-semibold); line-height: var(--lh-tight); color: var(--c-text); }
h3, .h3 { font-size: var(--fs-16); font-weight: var(--fw-semibold); line-height: var(--lh-tight); color: var(--c-text); }
h1, h2, h3, h4, h5, h6, .title { font-family: var(--font-sans); }

code, kbd, pre, samp, .v2-mono { font-family: var(--font-mono); }
.v2-mono { font-size: var(--fs-13); font-variant-numeric: tabular-nums; }
.v2-num, .text-right, td.amount, .amount { font-variant-numeric: tabular-nums; }

/* Text is never justified (sec. 3). .panel-body carried text-align: justify into every
   PanelSection, ListSection and FormPanel body. */
.panel-body,
.box-content-wrap p,
.ui-dialog .ui-dialog-content,
.BoxButton-P,
.pIntro,
.text-p {
	text-align: start;
}

/* Minimum text size is 12px. These legacy rules set 8 - 11.4px on text. */
.datepicker .cw,
.table-hover > thead:first-child > tr:first-child > th,
.input-group-addon,
.copyright,
.help,
.inner-table-titles,
.MaxMind-text,
.Pending-Mng, .Urgent, .ToDo, .Pending-Customer, .Hold, .Done,
.lblSubParentCompanyName,
.Header-account,
.nk-tb-head .nk-tb-col,
.nk-tb-list,
.nk-tb-list .user-info .tb-lead + span, .nk-tb-list .tb-lead + .tb-date,
.icon-text,
.badge-sm, .badge-md,
.Currency-Manual, .Currency-Prico, .Currency-OpenExchange, .Currency-Default,
.nk-files-head .nk-file-item > div,
.dropdown-header-name,
.nk-wg-action-content .title,
.account-picker-right,
.smalltext,
.nk-menu-badge,
.user-status,
.profile-balance-subtitle,
.btn-xs,
.font-small,
.table-striped .badge-dim,
.brq-rail .link-list-menu li.brq-nav-group,
.brq-party-label, .brq-party-iban-label, .brq-fact-label {
	font-size: var(--fs-12);
}

/* ---------- Links ---------- */
a { color: var(--c-accent-text); text-decoration: none; }
a:hover, a:focus { color: var(--c-accent-text); text-decoration: underline; }
.btn, .btn:hover, .btn:focus, .nav a, .nav a:hover, .nk-menu-link, .nk-menu-link:hover,
.v2-rail a, .v2-rail a:hover, .v2-flyout a, .v2-header a, .v2-palette a { text-decoration: none; }

/* ---------- Focus ---------- */
:focus { outline: none; }
:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 2px;
}

/* ---------- Scrollbars ---------- */
html, body, .v2-scroll {
	scrollbar-width: thin;
	scrollbar-color: var(--c-border-input) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--c-border-input); border-radius: var(--r-pill); border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Icons (sprite in ui-v2/icons.svg) ---------- */
.v2-icon {
	width: var(--icon);
	height: var(--icon);
	flex: 0 0 auto;
	display: inline-block;
	vertical-align: middle;
	stroke: currentColor;
	fill: none;
}
.v2-icon--sm { width: var(--icon-sm); height: var(--icon-sm); }

/* ---------- Helpers ---------- */
.v2-visually-hidden {
	position: absolute !important; /* must beat any legacy position on the hidden element */
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}
.v2-kbd {
	display: inline-flex;
	align-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 var(--sp-1);
	border: 1px solid var(--c-border);
	border-radius: var(--r-sm);
	background: var(--c-surface-2);
	color: var(--c-text-subtle);
	font: var(--fw-medium) var(--fs-11)/1 var(--font-sans);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important; /* overrides every legacy animation */
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Inline justified text (about 485 style="text-align: justify" attributes across the modules) and the
   .text-justify helper: !important is the only way past an inline style. */
.v2 [style*="text-align: justify"],
.v2 [style*="text-align:justify"],
.v2 .text-justify {
	text-align: start !important;
}

/* Page background on every layer the legacy template paints (body, .nk-body, .nk-app-root, .nk-main, .nk-wrap,
   .background-body-wrap is !important there), so the whole page is one colour (--c-bg, #FAFAFA). */
html,
body.v2,
.v2 .nk-app-root,
.v2 .nk-main,
.v2 .nk-wrap,
.v2 #dvMain,
.v2 .background-body-wrap { background: var(--c-bg) !important; }