/*
 * The product's own look, shared by every page and loaded after the page's stylesheet: a dark navy bar with the
 * gate mark (IP vartai), and a teal accent. Not LINTA's style: this is a separate business product.
 */
:root {
	--brand-ink: #0f2133;
	--brand-ink-2: #18324a;
	--brand-teal: #0f766e;
	--brand-teal-light: #5eead4;
	--brand-on-ink: #f4f7fa;
	--brand-on-ink-muted: #a9b8c8;

	/* the pages' own accent variables, set to the brand */
	--accent: #0f766e;
	--accent-soft: #dcf3ef;
	--accent-text: #115e59;
	--search: #134e4a;
	--selected-bg: #e3f4f1;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--accent: #2dd4bf;
		--accent-soft: #123f3c;
		--accent-text: #99f6e4;
	}
}

body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

.top.brand-bar {
	position: sticky;
	top: 0;
	z-index: 10;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
	padding: 10px 20px;
	background: var(--brand-ink);
	color: var(--brand-on-ink);
	border-bottom: 3px solid var(--brand-teal);
	box-shadow: 0 2px 10px rgb(15 33 51 / 18%);
}
.brand-bar::after { content: none; }

.brand-bar .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--brand-on-ink); text-decoration: none; }
.brand-bar .brand-mark { flex: none; width: 34px; height: 34px; }
.brand-bar .brand-name { display: block; font-weight: 700; font-size: 16px; letter-spacing: .01em; line-height: 1.15; }
.brand-bar .brand-sub { display: block; color: var(--brand-on-ink-muted); font-size: 12px; font-weight: 500; }

.brand-bar .nav { display: flex; gap: 4px; align-items: center; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.brand-bar .nav::-webkit-scrollbar { display: none; }
.brand-bar .nav-item { color: var(--brand-on-ink-muted); text-decoration: none; font-weight: 600; font-size: 14px; padding: 7px 12px; border-radius: 6px; white-space: nowrap; }
.brand-bar .nav-item:hover { color: var(--brand-on-ink); background: var(--brand-ink-2); }
.brand-bar .nav-item.current { color: var(--brand-on-ink); background: var(--brand-ink-2); box-shadow: inset 0 -2px 0 var(--brand-teal-light); }

/* "Prekių ženklai ▾": a popover menu, in the top layer so the scrolling nav doesn't clip it; common.js places it */
.brand-bar .nav .nav-menu-button { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; font: 600 14px/1.2 inherit; font-family: inherit; }
.brand-bar .nav .nav-menu-button.current { background: var(--brand-ink-2); }
.brand-bar .nav .nav-menu-button:hover { background: var(--brand-ink-2); }
.nav-menu-button .caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .8; transition: transform .15s; }
.nav-menu-button[aria-expanded=true] .caret { transform: rotate(180deg); }
.nav-menu { position: fixed; inset: auto; margin: 0; padding: 6px; min-width: 260px; max-width: calc(100vw - 24px); border: 1px solid #2b4560; border-radius: 10px; background: var(--brand-ink); box-shadow: 0 10px 28px rgb(15 33 51 / 35%); }
/* without popover support (common.js): hidden until opened, above the page */
.no-popover .nav-menu { display: none; z-index: 1000; }
.no-popover .nav-menu.open { display: block; }
.nav-menu a { display: block; padding: 9px 12px 9px 14px; border-radius: 7px; color: var(--brand-on-ink); text-decoration: none; font-weight: 600; font-size: 14px; border-left: 3px solid transparent; }
.nav-menu a small { display: block; margin-top: 2px; color: var(--brand-on-ink-muted); font-weight: 500; font-size: 12px; }
.nav-menu a:hover, .nav-menu a:focus-visible { background: var(--brand-ink-2); outline: none; }
.nav-menu a.current { border-left-color: var(--brand-teal-light); background: var(--brand-ink-2); }

.brand-bar .header-slot { flex: 1 1 auto; display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.brand-bar .header-slot [hidden] { display: none; }
.brand-bar .spacer { flex: 1 1 auto; }

/* buttons and fields in the dark bar */
.brand-bar button, .brand-bar a.button {
	padding: 7px 14px; border-radius: 6px; font: 600 14px/1.2 inherit; font-family: inherit; cursor: pointer;
	background: var(--brand-teal); color: #fff; border: 1px solid var(--brand-teal); text-decoration: none;
}
.brand-bar button.secondary, .brand-bar a.button.secondary, .brand-bar .logout {
	background: transparent; color: var(--brand-on-ink); border: 1px solid #3a536b;
}
.brand-bar button.secondary:hover, .brand-bar a.button.secondary:hover, .brand-bar .logout:hover { border-color: var(--brand-teal-light); }
.brand-bar input[type=text] {
	padding: 7px 10px; border-radius: 6px; border: 1px solid #3a536b; background: var(--brand-ink-2);
	color: var(--brand-on-ink); font: inherit; width: 15em; max-width: 100%;
}
.brand-bar input[type=text]::placeholder { color: var(--brand-on-ink-muted); }
.brand-bar form { display: flex; gap: 6px; margin: 0; }

@media (max-width: 900px) {
	.brand-bar .nav-item, .brand-bar .nav .nav-menu-button { padding: 7px 9px; font-size: 13.5px; }
}

@media (max-width: 720px) {
	.top.brand-bar { position: static; padding: 10px 14px; }
	.brand-bar .brand-sub { display: none; }
	.brand-bar .nav { order: 3; width: 100%; }
	.brand-bar form { order: 4; flex: 1 1 100%; }
	.brand-bar form input[type=text] { flex: 1; width: auto; }
}

@media print {
	.top.brand-bar { display: none; }
}

.brand-bar .me { display: none; color: var(--brand-on-ink-muted); font-size: 13px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 1440px) { .brand-bar .me { display: inline; } }

/* YYYY-MM-DD date fields (common.js) */
.iso-date { position: relative; display: inline-flex; align-items: center; width: 12em; max-width: 100%; align-self: flex-start; }
.iso-date input[type=text] { width: 100%; box-sizing: border-box; max-width: 100%; padding-right: 34px; font-variant-numeric: tabular-nums; }
.iso-date-button { position: absolute; right: 4px; padding: 2px 5px; border: 0; background: none; cursor: pointer; font-size: 15px; line-height: 1; opacity: .7; }
.iso-date-button:hover { opacity: 1; }
.iso-date-picker { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }