/* ===================================================================
   eDoctor theme - "clean medical".
   Loaded after main_mobile.css / main_desktop.css (and the module
   stylesheets) and restyles the shared building blocks on top of them:
   one blue accent, white cards on a soft blue-grey page, quiet borders,
   one type scale. Colours live in the tokens below; component rules use
   only the tokens so the palette can be tuned in one place.
   Layout-only rules stay in the two base stylesheets.
   =================================================================== */

:root {
	--c-bg:				#f4f6f9;
	--c-surface:		#ffffff;
	--c-surface-2:		#f8fafc;
	--c-hover:			#f1f5f9;
	--c-border:			#e3e8ef;
	--c-border-strong:	#cfd7e2;

	--c-text:			#1f2937;
	--c-text-2:			#475467;
	--c-muted:			#6b7280;
	--c-subtle:			#98a2b3;

	--c-primary:		#2563eb;
	--c-primary-hover:	#1d4ed8;
	--c-primary-soft:	#eef3ff;
	--c-primary-ring:	rgba(37, 99, 235, .18);

	--c-danger:			#dc2626;
	--c-danger-soft:	#fef2f2;
	--c-success:		#16a34a;
	--c-success-soft:	#ecfdf3;
	--c-warning:		#b45309;
	--c-warning-soft:	#fffbeb;

	/* Sidebar */
	--c-nav:			#0f1e3d;
	--c-nav-text:		#c9d3e3;
	--c-nav-muted:		#93a2bb;
	--c-nav-hover:		rgba(255, 255, 255, .07);
	--c-nav-line:		rgba(255, 255, 255, .10);

	/* Page header strip */
	--c-hero:			linear-gradient(120deg, #e3edff 0%, #f1f6ff 100%);
	--c-hero-edge:		#d3e1fb;

	--radius-lg:		12px;
	--radius:			8px;
	--radius-sm:		6px;
	--shadow-card:		0 0 0 1px var(--c-border), 0 1px 2px rgba(16, 24, 40, .04);
	--shadow-pop:		0 8px 24px rgba(16, 24, 40, .12), 0 0 0 1px var(--c-border);

	/* Variables the base stylesheets already use, pointed at the palette. */
	--left-menu-color:		var(--c-surface);
	--left-menu-text-color:	var(--c-text-2);
	--left-menu-bg-color:	var(--c-primary-soft);
	--button-mainbg-color:	var(--c-primary);
}

/* ------------------------------------------------------------ base */
body {
	background-color: var(--c-bg);
	color: var(--c-text);
	font-size: 14px;
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
}
a, a:visited { color: var(--c-primary); }
a:hover { color: var(--c-primary-hover); text-decoration: none; }
::selection { background: var(--c-primary-ring); }

/* Logo: "e-" in the accent, "doctor" in the text colour. */
.top-container .edoc-logo a, .top-container .edoc-logo a:visited {
	color: var(--c-text);
	font-weight: 600;
	letter-spacing: -.02em;
}
.top-container .edoc-logo span { color: var(--c-primary); }

/* Login card: fields as wide as the Login button, a little space between them. */
.login-card { box-shadow: var(--shadow-card); }
.login-card input:not([type=submit]):not([type=checkbox]) { width: 100%; height: 38px; margin-bottom: 10px; }
.login-card label { color: var(--c-muted); font-size: 13px; font-weight: 500; margin-bottom: 4px; }

/* Sysadmin "login as": an amber banner over every page while it lasts, and the
   "Hyr si" button in the owner users list. */
.imp-bar {
	position: sticky;
	top: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px 14px;
	padding: 7px 16px;
	background-color: #fef3c7;
	border-bottom: 1px solid #f5d27a;
	color: #78350f;
	font-size: 13px;
}
.imp-bar a, .imp-bar a:visited {
	padding: 3px 12px;
	border-radius: 999px;
	background-color: #92400e;
	color: #fff;
	font-weight: 600;
	white-space: nowrap;
}
.imp-bar a:hover { background-color: #78350f; color: #fff; }
.imp-form { margin: 0; }
.imp-btn {
	height: 26px;
	padding: 0 10px;
	border: 1px solid var(--c-border-strong);
	border-radius: var(--radius-sm);
	background-color: var(--c-surface);
	color: var(--c-text-2);
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
}
.imp-btn:hover { border-color: var(--c-primary); color: var(--c-primary); background-color: var(--c-primary-soft); }

/* ------------------------------------------------------------ cards
   Every top-level white box gets the same radius and hairline edge. The edge
   is a box-shadow ring, not a border, so no box changes size. */
fieldset,
.form-filter,
.list-container,
.analiza-head,
.main-container > .item-table,
.main-container > form > .item-table {
	background-color: var(--c-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}
fieldset fieldset,
fieldset.view,
fieldset.subview,
fieldset.submit,
fieldset.collapsed,
fieldset.analize,
.form-columns > form > fieldset fieldset { box-shadow: none; }
fieldset.collapsed { background-color: transparent !important; }
fieldset.submit { background-color: transparent !important; }
fieldset.grey, fieldset.subview { background-color: var(--c-surface-2) !important; }

/* Page titles and the action links under them (Modifiko · Printo · ...) */
.form-title,
.form-entry .form-title,
.view-entry .form-title,
.form-filter .form-title,
.analiza-head .form-title {
	color: var(--c-text);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -.01em;
}
.form-title .sep { color: var(--c-subtle); font-weight: 400; margin: 0 6px; }
/* Action links under a page title (Modifiko · Printo · ...): a quiet row, not part of the heading. */
.form-title .underlinks,
.form-entry .form-title .underlinks,
.view-entry .form-title .underlinks {
	margin-top: 6px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0;
}
.form-title .underlinks .divider { color: var(--c-border-strong); margin: 0 6px; }

/* Section legends (collapsible card headers) */
fieldset legend a,
fieldset legend a:visited {
	color: var(--c-text);
	font-size: 15px;
	font-weight: 600;
}
fieldset legend a:hover { color: var(--c-primary); }
fieldset.view legend,
fieldset.static legend { color: var(--c-text); font-size: 15px; font-weight: 600; }
fieldset.subview legend { color: var(--c-text-2); font-size: 14px; }
fieldset.view { border-top-color: var(--c-border); }
fieldset.warning legend { color: var(--c-danger); }

/* Field labels */
.form-entry label, .form-view label, fieldset label, .form-filter label {
	color: var(--c-muted);
	font-size: 13px;
	font-weight: 500;
}
fieldset.static .form-item label { color: var(--c-muted); }
.form-entry .form-info, .owner-settings .form-info { color: var(--c-subtle); border-left-color: var(--c-border); }

/* ------------------------------------------------------------ inputs */
input, select, textarea {
	color: var(--c-text);
	border: 1px solid var(--c-border-strong);
	border-radius: var(--radius-sm);
	background-color: var(--c-surface);
	transition: border-color .12s, box-shadow .12s;
}
input:not(:placeholder-shown),
select:has(option:checked:not([value="0"])) { background-color: var(--c-surface); }
input::placeholder, textarea::placeholder { color: var(--c-subtle); }
.form-entry input:hover, .form-entry select:hover, .form-entry textarea:hover,
input:hover, select:hover, textarea:hover {
	outline: none;
	border-color: var(--c-subtle);
}
input:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--c-primary);
	box-shadow: 0 0 0 3px var(--c-primary-ring);
}
/* Only typing fields: buttons (submit/button/file) also count as :read-only. */
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=file]):not([type=checkbox]):not([type=radio]):read-only,
input.locked,
input:not([type=submit]):not([type=button]):disabled, select:disabled, textarea:disabled,
input[type="text"]:disabled, input[type="date"]:disabled,
.filter-data .filter-input:disabled, .filter-data .filter-other:disabled {
	background-color: var(--c-hover) !important;
	color: var(--c-muted);
	border-color: var(--c-border);
}
/* Checkboxes/radios keep the native control, tinted with the accent. */
input[type=checkbox], input[type=radio] {
	accent-color: var(--c-primary);
	box-shadow: none;
}
.filter-data .filter-input.filled { background-color: var(--c-warning-soft); }
.form-entry label.checkbox, .form-filter label.checkbox, .form-entry label.option {
	border-color: var(--c-border);
	border-radius: var(--radius);
	color: var(--c-text-2);
}

/* ------------------------------------------------------------ buttons */
input.submit, input.button {
	height: 36px;
	min-width: 80px;
	padding: 0 18px;
	border-radius: var(--radius);
	font-family: "Inter", sans-serif;
	font-size: 14px;
	font-weight: 600;
	box-shadow: none;
	cursor: pointer;
	transition: background-color .12s, border-color .12s, color .12s;
}
input.submit {
	opacity: 1;
	color: #fff;
	background-color: var(--c-primary);
	border: 1px solid var(--c-primary);
}
input.submit:hover {
	background-color: var(--c-primary-hover);
	border: 1px solid var(--c-primary-hover);
}
input.button {
	color: var(--c-text);
	background-color: var(--c-surface);
	border: 1px solid var(--c-border-strong);
}
input.button:hover { background-color: var(--c-surface-2); border-color: var(--c-subtle); }
input.submit:focus, input.button:focus { box-shadow: 0 0 0 3px var(--c-primary-ring); }
input.button:disabled, input.submit:disabled {
	background-image: none;
	background-color: var(--c-hover);
	border-color: var(--c-border);
	color: var(--c-subtle);
	cursor: default;
}
input.button.taxed { color: var(--c-danger); }
input.button.template {
	background-image: none;
	background-color: var(--c-warning-soft);
	border-color: #f3d19c;
	color: var(--c-warning);
}

/* ------------------------------------------------------------ tabs */
.head-tab a, .head_sub_tab a,
.head-tab a:visited, .head_sub_tab a:visited {
	display: inline-block;
	color: var(--c-text-2);
	background-color: var(--c-surface);
	border: 1px solid var(--c-border-strong);
	border-radius: 999px;
	font-weight: 500;
}
.head-tab a:hover, .head_sub_tab a:hover {
	background-color: var(--c-hover);
	color: var(--c-text);
}
.head-tab a.active, .head_sub_tab a.active,
.head-tab a.active:hover, .head_sub_tab a.active:hover {
	background-color: var(--c-primary);
	border-color: var(--c-primary);
	color: #fff;
}

/* ------------------------------------------------------------ page header buttons
   Outline buttons in page headers, e.g. AnalizaFill's "Vizita <date>" next to
   the title and "Print all" / "PDF all" at the end of the group tabs. */
.analiza-head .head-title-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
}
.analiza-head .head-title-row .form-title { width: auto; }
/* .head-tab is width:100% everywhere else; here it shares the row with the actions. */
.head-tab-row .head-tab:has(+ .head-tab-actions) { width: auto; flex: 1 1 0; min-width: 0; }
.head-tab-actions { gap: 8px; margin-left: auto; }
a.head-btn, a.head-btn:visited {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding: 0 12px;
	border: 1px solid var(--c-border-strong);
	border-radius: var(--radius);
	background-color: var(--c-surface);
	color: var(--c-text);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .12s, border-color .12s, color .12s;
}
a.head-btn:hover { border-color: var(--c-primary); color: var(--c-primary); background-color: var(--c-primary-soft); }
a.head-btn svg { width: 15px; height: 15px; flex: 0 0 15px; }
a.head-btn.busy { opacity: .6; cursor: progress; }
/* Email button after a successful send. */
a.head-btn.sent, a.head-btn.sent:visited { border-color: #86d6a6 !important; color: var(--c-success) !important; background-color: var(--c-success-soft) !important; }

/* ------------------------------------------------------------ page header strip
   The title that opens a page (patient, visit, calendar, analiza, ...) sits on
   a pale blue band with dark text; its action links (Modifiko · Printo · ...)
   become small white pills. Titles inside cards and filter forms keep the plain
   card style. */
.page-hero,
.main-container > .form-title,
.main-container > .view-entry > .form-title,
.analiza-head {
	background: var(--c-hero);
	color: var(--c-text);
	border-radius: var(--radius-lg);
	box-shadow: 0 0 0 1px var(--c-hero-edge);
}
.main-container > .form-title,
.main-container > .view-entry > .form-title {
	position: relative;
	width: auto;
	margin: 0 0 16px;
	padding: 18px 22px;
	font-size: 20px;
	color: var(--c-text);
}
.main-container > .form-title .sep,
.main-container > .view-entry > .form-title .sep,
.analiza-head .form-title .sep { color: var(--c-subtle); }

/* Action links as pills */
.main-container > .form-title .underlinks,
.main-container > .view-entry > .form-title .underlinks,
.analiza-head .form-title .underlinks {
	position: static;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 12px;
}
.main-container > .form-title .underlinks .divider,
.main-container > .view-entry > .form-title .underlinks .divider,
.analiza-head .form-title .underlinks .divider { display: none; }
.main-container > .form-title .underlinks a,
.main-container > .form-title .underlinks a:visited,
.main-container > .view-entry > .form-title .underlinks a,
.main-container > .view-entry > .form-title .underlinks a:visited,
.analiza-head .form-title .underlinks a,
.analiza-head .form-title .underlinks a:visited {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 12px;
	border: 1px solid var(--c-hero-edge);
	border-radius: 999px;
	background-color: var(--c-surface);
	color: var(--c-primary);
	font-size: 13px;
	font-weight: 500;
}
.main-container > .form-title .underlinks a:hover,
.main-container > .view-entry > .form-title .underlinks a:hover,
.analiza-head .form-title .underlinks a:hover {
	border-color: var(--c-primary);
	background-color: var(--c-surface);
	color: var(--c-primary-hover);
	text-decoration: none;
}
.main-container > .form-title .error,
.main-container > .view-entry > .form-title .error,
.analiza-head .form-title .error {
	position: static;
	display: inline-block;
	margin: 8px 0 0;
	padding: 4px 10px;
	border-radius: var(--radius-sm);
	background-color: var(--c-danger-soft);
	color: var(--c-danger);
	font-size: 13px;
}

/* Analiza / calendar header on the band: title, tabs and buttons. */
.analiza-head { display: flow-root; padding: 16px 18px 6px; }
.analiza-head .form-title { color: var(--c-text); margin-bottom: 12px; }
.analiza-head .head-tab a, .analiza-head .head-tab a:visited {
	background-color: var(--c-surface);
	border-color: var(--c-hero-edge);
	color: var(--c-text-2);
}
/* Group tabs: larger than the generic tab pills - they are the main navigation of this page. */
.analiza-head .head-tab li { height: auto; margin: 0 6px 8px 0; }
.analiza-head .head-tab a, .analiza-head .head-tab a:visited { margin: 0; padding: 7px 16px; font-size: 15px; font-weight: 500; }
.analiza-head .head-tab a:hover { border-color: var(--c-primary); color: var(--c-primary); background-color: var(--c-surface); }
.analiza-head .head-tab a.active,
.analiza-head .head-tab a.active:hover {
	background-color: var(--c-primary);
	border-color: var(--c-primary);
	color: #fff;
	font-weight: 600;
}

/* Buttons on the band (Vizita, Print all, patient actions): white, blue on hover;
   .primary is the main action, solid blue. */
.page-hero a.head-btn, .page-hero a.head-btn:visited,
.analiza-head a.head-btn, .analiza-head a.head-btn:visited {
	background-color: var(--c-surface);
	border-color: var(--c-hero-edge);
	color: var(--c-text);
}
.page-hero a.head-btn:hover,
.analiza-head a.head-btn:hover {
	background-color: var(--c-surface);
	border-color: var(--c-primary);
	color: var(--c-primary);
}
.page-hero a.head-btn.primary, .page-hero a.head-btn.primary:visited {
	background-color: var(--c-primary);
	border-color: var(--c-primary);
	color: #fff;
	font-weight: 600;
}
.page-hero a.head-btn.primary:hover { background-color: var(--c-primary-hover); border-color: var(--c-primary-hover); color: #fff; }

/* Patient header card: initials, name, fact chips, actions. */
.patient-hero {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0 0 16px;
	padding: 18px 22px;
}
.patient-hero .hero-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: var(--c-primary);
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: .02em;
}
.patient-hero .hero-main { flex: 1 1 260px; min-width: 0; }
.patient-hero .hero-title {
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1.2;
	color: var(--c-text);
}
.patient-hero .hero-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.patient-hero .hero-chip {
	padding: 3px 10px;
	border-radius: 999px;
	border: 1px solid var(--c-hero-edge);
	background-color: var(--c-surface);
	color: var(--c-text-2);
	font-size: 13px;
	font-weight: 500;
}
.patient-hero .hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.patient-hero a.hero-title, .patient-hero a.hero-title:visited { color: var(--c-text); text-decoration: none; }
.patient-hero a.hero-title:hover { color: var(--c-primary); }

/* Analiza page: a compact one-line patient card - name, then sex/age chips on
   the same line, actions on the right. */
.ax-hero {
	gap: 8px 16px;
	padding: 8px 14px;
	margin-bottom: 12px;
	background: var(--c-surface);
	box-shadow: var(--shadow-card);
}
/* On the white card: chips (plain info) stay white, the buttons get the light fill so they read as clickable. */
.ax-hero .hero-chip { background-color: var(--c-surface); border-color: var(--c-border); }
.ax-hero a.head-btn, .ax-hero a.head-btn:visited { background-color: var(--c-hover); border-color: var(--c-border); }
.ax-hero a.head-btn:hover { background-color: var(--c-primary-soft); border-color: var(--c-primary); color: var(--c-primary); }
.ax-hero .hero-main {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 12px;
}
.ax-hero .hero-title { font-size: 20px; }
.ax-hero .hero-chips { margin-top: 0; }

/* The visit's groups as buttons in their own card, between the patient card and
   the results; the badge is the number of exams in the group. */
.ax-groups {
	margin: 0 0 12px;
	padding: 7px 10px;
	background-color: var(--c-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}
.ax-group-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ax-group-tabs a, .ax-group-tabs a:visited {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 34px;
	padding: 0 10px;
	border: 1px solid var(--c-border);
	border-radius: 12px;
	background-color: var(--c-hover);
	color: var(--c-text-2);
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	transition: background-color .12s, border-color .12s, color .12s;
}
.ax-group-tabs a:hover { border-color: var(--c-primary); color: var(--c-primary); background-color: var(--c-primary-soft); }
.ax-group-tabs a.active, .ax-group-tabs a.active:hover {
	background-color: var(--c-primary);
	border-color: var(--c-primary);
	color: #fff;
	font-weight: 600;
}
.ax-group-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background-color: var(--c-surface);
	color: var(--c-muted);
	font-size: 12px;
	font-weight: 600;
}
.ax-group-tabs a:hover .ax-group-count { color: var(--c-primary); }
.ax-group-tabs a.active .ax-group-count { background-color: rgba(255, 255, 255, .22); color: #fff; }

/* Analiza results: the normal-values column in a smaller size, it is reference text. */
.item-table.ax-form td.ax-desc { font-size: 12px; line-height: 1.35; }

/* Owners admin (Settings > Owners > Klinikat): form card with its buttons inside,
   and the clinics list with status badges and per-row links. */
.owners-admin .form-title { margin: 0 5px 8px; }
.owners-admin .owners-code { font-weight: 600; letter-spacing: .02em; }
.owners-admin .form-title .owners-code {
	display: inline-block;
	margin-left: 4px;
	padding: 1px 8px;
	border-radius: var(--radius-sm);
	background-color: var(--c-primary-soft);
	color: var(--c-primary);
	font-size: 15px;
}
.owners-admin .owners-actions {
	display: flex;
	gap: 10px;
	width: 100%;
	margin-top: 10px;
	padding: 12px 5px 2px;
	border-top: 1px solid var(--c-border);
}
.owners-admin .owners-actions input.button { margin-left: 0; }
.owners-admin .owners-list-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 2px 4px 8px;
}
.owners-admin .owners-list-head .form-title { margin: 0; }
.owners-admin .owners-count {
	display: inline-block;
	min-width: 24px;
	margin-left: 6px;
	padding: 0 8px;
	border-radius: 999px;
	background-color: var(--c-hover);
	color: var(--c-muted);
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	vertical-align: middle;
}
.owners-admin .owners-muted { color: var(--c-muted); }
.owners-admin .owners-status {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
}
.owners-admin .owners-status.on { background-color: var(--c-success-soft); color: var(--c-success); }
.owners-admin .owners-status.off { background-color: var(--c-hover); color: var(--c-muted); }
.owners-admin .owners-links { white-space: nowrap; }
.owners-admin .owners-links a { margin-left: 12px; font-size: 13px; font-weight: 500; }
.owners-admin .owners-links a.danger { color: var(--c-danger); }
.owners-admin .item-table tbody td { padding-top: 9px; padding-bottom: 9px; }

/* OwnerSettings (admin, go=owners&do=settings): one <form> card per settings
   table, each with grouped checkbox cards that show their description under
   the name instead of in a hover title. */
.owner-settings > form { margin-bottom:15px; }
/* stretch: checkbox cards in the same row get equal heights even when one
   description wraps to two lines. */
.owner-settings fieldset.general { align-items:stretch; }
.owner-settings fieldset.owner-pick {
	align-items:flex-end;
	margin-bottom:15px;
}
.owner-settings .settings-nav {
	display:flex;
	flex-wrap:wrap;
	gap:6px;
	padding:5px 5px 10px;
	margin-left:auto;
}
.owner-settings .settings-nav a {
	padding:5px 12px;
	border:1px solid #e5e5e5;
	border-radius:15px;
	font-size:13px;
	color:var(--left-menu-text-color);
	text-decoration:none;
	background-color:#fff;
}
.owner-settings .settings-nav a:hover {
	border-color:var(--button-mainbg-color);
	color:var(--button-mainbg-color);
}
.owner-settings .settings-empty {
	padding:30px;
	border-radius:15px;
	background-color:#fff;
	text-align:center;
	color:#8a929b;
	font-size:14px;
}
.owner-settings .settings-group {
	width:100%;
	margin:15px 5px 5px;
	padding-bottom:5px;
	border-bottom:1px solid #eee;
	font-size:12px;
	font-weight:600;
	letter-spacing:.04em;
	text-transform:uppercase;
	color:#8a929b;
}
.owner-settings .form-item { margin-bottom:0; }
.owner-settings label.checkbox {
	height:100%;
	min-height:52px;
	align-items:flex-start;
	gap:8px;
	margin:0;
	padding:8px 10px;
	cursor:pointer;
	transition:background-color .15s, border-color .15s;
}
.owner-settings label.checkbox:hover { border-color:#c9d6e8; }
.owner-settings label.checkbox:has(input:checked) {
	border-color:#b8d0f0;
	background-color:#f2f7fc;
}
.owner-settings label.checkbox input.checkbox {
	flex:0 0 16px;
	margin:2px 0 0;
}
.owner-settings .check-body {
	display:flex;
	flex-direction:column;
	gap:2px;
	min-width:0;
}
.owner-settings .check-body .check-text {
	min-width:0;
	color:#333;
	font-weight:500;
}
.owner-settings .form-info {
	padding-left:0;
	border-left:none;
	font-style:normal;
	font-size:12px;
	line-height:1.4;
	color:#999;
}
.owner-settings label .form-info { margin-left:6px; }
.owner-settings .check-body .form-info { margin-left:0; }
.owner-settings fieldset fieldset {
	width:100%;
	margin:15px 0 5px;
	background-color:#fafafa;
}
.owner-settings fieldset fieldset.collapsed { background-color:transparent; }
.owner-settings textarea {
	font-family:Consolas, "Courier New", monospace;
	font-size:12px;
	padding:6px;
}
.owner-settings .settings-actions {
	display:flex;
	align-items:center;
	gap:10px;
	width:100%;
	margin-top:15px;
	padding:12px 5px 5px;
	border-top:1px solid #eee;
}
.owner-settings .settings-actions input.button { margin-left:0; border:1px solid #ddd; }
/* OwnerLocks toggle, top-right of each option: open = owner may change it,
   closed = only the sysadmin can (paid features). */
.owner-settings .form-item:has(> .lock-toggle) > label.checkbox { padding-right:36px; }
.owner-settings label.lock-toggle {
	position:absolute;
	top:9px;
	right:10px;
	display:flex;
	align-items:center;
	justify-content:center;
	width:26px;
	height:26px;
	margin:0;
	border-radius:6px;
	cursor:pointer;
	font-size:14px;
	opacity:.35;
	filter:grayscale(1);
}
/* Text/template fields: sit level with the field's label, above the input. */
.owner-settings .form-item:not(:has(> label.checkbox)) > label.lock-toggle { top:2px; height:22px; }
/* Print settings me/pa koke pair: one toggle per textarea, above its right end. */
.owner-settings .prs-pair label.lock-toggle { top:-24px; right:0; height:22px; }
.owner-settings label.lock-toggle::before { content:'\1F513'; }
.owner-settings label.lock-toggle:hover { opacity:.8; background-color:#f1f1f1; }
.owner-settings label.lock-toggle:has(input:checked) {
	opacity:1;
	filter:none;
	background-color:#fff4e5;
}
.owner-settings label.lock-toggle:has(input:checked)::before { content:'\1F512'; }
.owner-settings label.lock-toggle input { position:absolute; opacity:0; width:0; height:0; margin:0; }
.owner-settings .form-item:has(> .lock-toggle input:checked) > label.checkbox { border-color:#f3c98b; }
/* Owner's own settings pages: an option the sysadmin locked. */
.form-entry label.checkbox:has(input:disabled) {
	opacity:.6;
	cursor:not-allowed;
	background-color:#f7f7f7;
}
.form-entry label.checkbox:has(input:disabled)::after {
	content:'\1F512';
	margin-left:auto;
	padding-left:8px;
}
.form-entry textarea:disabled,
.form-entry input[type=text]:disabled {
	background-color:#f7f7f7;
	color:#999;
	cursor:not-allowed;
}

/* Owner settings on a phone: owner picker and section links stacked, options one per row. */
@media screen and (max-width: 699px) {
	/* main_mobile.css floats every label at 30% width (label-beside-field layout). */
	.owner-settings label { float: none; width: auto; }
	.owner-settings label.checkbox { display: flex; width: 100%; }
	.owner-settings label.lock-toggle { width: 26px; }
	/* A fieldset won't shrink below its content by default: without this the scrolling
	   section-links row widens the whole page past the screen. */
	.owner-settings fieldset { min-width: 0; max-width: 100%; }
	.owner-settings fieldset.general { display: flex; flex-wrap: wrap; }
	.owner-settings fieldset.owner-pick { display: block; padding: 12px; }
	.owner-settings fieldset.owner-pick .form-item { width: 100% !important; padding: 0 0 8px; }
	.owner-settings fieldset.owner-pick label { display: flex; flex-wrap: wrap; gap: 2px 8px; }
	.owner-settings fieldset.owner-pick label .form-info { margin-left: 0; white-space: normal; }
	.owner-settings fieldset.owner-pick select { width: 100%; height: 38px; }
	/* Section links wrap onto as many rows as needed. */
	.owner-settings .settings-nav { flex-wrap: wrap; gap: 6px; margin: 0; padding: 4px 0 2px; }
	.owner-settings fieldset.general { padding: 12px 10px; }
	.owner-settings .form-item,
	.owner-settings .form-item.w20percent,
	.owner-settings .form-item.w25percent,
	.owner-settings .form-item.w33percent,
	.owner-settings .form-item.w50percent { width: 100% !important; padding: 4px 0; }
	.owner-settings label.checkbox { min-height: 48px; }
	.owner-settings .form-item input[type=text],
	.owner-settings .form-item select,
	.owner-settings .form-item textarea { width: 100% !important; }
	.owner-settings .settings-group { margin: 14px 0 4px; }
	.owner-settings .settings-actions { padding: 12px 0 0; }
	.owner-settings .settings-actions input { flex: 1 1 0; }
}

/* ------------------------------------------------------------ tables */
.item-table tr { border-top-color: var(--c-border); }
.item-table.invoice tbody, .item-table.view tbody { border-bottom-color: var(--c-border); }
.item-table thead td,
.item-table.view thead td,
.item-table.payments thead td {
	color: var(--c-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	border-bottom: 1px solid var(--c-border);
}
.item-table thead td a, .item-table thead td a:visited { color: var(--c-muted); }
.item-table thead td a:hover { color: var(--c-primary); }
.item-table tbody td { color: var(--c-text); }
.item-table tbody tr:hover { background-color: var(--c-surface-2); }
.item-table tr.current, .item-table tbody tr.current:hover { background-color: var(--c-primary-soft); }
.item-table tr.to-select:hover { background-color: var(--c-hover); }
.item-table tfoot { border-top-color: var(--c-border-strong); }
.item-table tfoot td.note { color: var(--c-muted); }
.item-table tbody td.status.open { color: var(--c-danger); }
.item-table tbody td.status.closed,
.item-table tbody td.status.waiting { color: var(--c-border-strong); }
.item-table tbody td.status.active,
.item-table tbody td.status.finished,
.item-table tbody td.status.received { color: var(--c-success); }
.item-table tbody td.status.sent { color: #eab308; }
.item-table tbody td.status.accepted { color: var(--c-primary); }
.item-table tbody td.status.transmitted { color: var(--c-subtle); }

/* ------------------------------------------------------------ dropdown lists */
.search-div .search-list,
.filter-data .filter-list {
	border: none;
	border-radius: var(--radius);
	background-color: var(--c-surface);
	box-shadow: var(--shadow-pop);
	overflow: hidden;
}
.search-div .search-item, .filter-data .filter-item { border-bottom-color: var(--c-border); }
.search-div .search-item:hover, .filter-data .filter-item:hover { background-color: var(--c-hover); }
.filter-data .filter-item.active { background-color: var(--c-primary-soft); }
.search-div .search-item span.patient, .search-div .search-item span.patient * { color: var(--c-text); }
.search-div .search-item span.age { color: var(--c-muted); }

/* ------------------------------------------------------------ messages */
.error, .form-entry div.error { color: var(--c-danger); }
.form-entry .info, div.info {
	color: var(--c-success);
}
.save-status {
	border-radius: var(--radius);
	box-shadow: var(--shadow-pop);
	font-weight: 600;
	padding-top: 5px;
}
.save-status.success { background-color: var(--c-success-soft); color: var(--c-success) !important; }
.save-status.error { background-color: var(--c-danger-soft); color: var(--c-danger) !important; }
.error-status { border-radius: var(--radius); box-shadow: var(--shadow-pop); }
/* showAlert(): a centred dialog at any screen width (it used to be a fixed
   400px box with its OK button positioned by pixel offsets). */
.overlay {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(15, 23, 42, .45);
}
.overlay .message {
	position: relative;
	width: 420px;
	max-width: 100%;
	height: auto;
	min-height: 0;
	margin: 0 !important;
	padding: 24px 24px 72px;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-pop);
	background-color: var(--c-surface);
	color: var(--c-text);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	text-align: left;
}
.overlay .message a.small-btn.cancel { position: absolute; top: 10px; right: 10px; float: none; margin: 0; }
.overlay .message .btndiv {
	position: absolute;
	left: auto;
	right: 20px;
	bottom: 20px;
	width: auto;
	min-width: 72px;
	padding: 7px 16px;
	border: 1px solid var(--c-primary);
	border-radius: var(--radius);
	background-color: var(--c-primary);
	color: #fff;
	font-weight: 600;
}
.overlay .message .btndiv:hover { background-color: var(--c-primary-hover); }

/* ===================================================================
   Desktop (>= 700px): white top bar and sidebar framing the page.
   =================================================================== */
@media screen and (min-width: 700px) {

/* Fixed-width sidebar (it was 18% of the screen - 400px+ on a wide monitor) and
   the page uses everything to its right; main_desktop.css also capped the page
   at 90/80/70% from 1700px up, leaving an empty strip on the right. */
:root {
	--left-menu-width: 248px;
	--main-container-width: calc(100% - 248px);
}
.main-container { width: var(--main-container-width); }
/* Pages are capped at 1280px so rows stay readable on wide screens; reports and
   wide lists (_Interface::_mainContainerClass()) keep the full width. */
.main-container { max-width: 1280px; }
.main-container.wide { max-width: none; }

/* The sidebar is a float that stops where its menu ends, so its navy column
   is painted on the container instead, full height. */
.global-container {
	min-height: 100vh;
	background:
		linear-gradient(to right,
			var(--c-nav) var(--left-menu-width),
			var(--c-bg) var(--left-menu-width));
}
.left-container { background: transparent; padding: 14px 12px; clear: left; }

.top-container {
	height: 56px;
	background-color: var(--c-surface);
	border-bottom: 1px solid var(--c-border);
}
/* Logo block continues the navy column up through the top bar (and over its bottom border). */
/* The negative margin keeps the extra 1px out of the float layout: otherwise, at some zoom
   levels, the logo float reaches below the bar and the sidebar float is placed to its right. */
.top-container .edoc-logo {
	height: calc(100% + 1px);
	margin-bottom: -1px;
	background-color: var(--c-nav);
	box-shadow: inset 0 -1px 0 var(--c-nav-line);
	z-index: 1;
}
.top-container .edoc-logo a, .top-container .edoc-logo a:visited { padding-top: 11px; padding-left: 20px; font-size: 26px; color: #fff; }
.top-container .edoc-logo span, .top-container .edoc-logo a span { color: #60a5fa; }

/* Search sits at the left of the top bar, lined up with the page content below. */
.top-container .top-content { justify-content: flex-start; }
.top-container .search-container { margin-left: 20px; }

.search-container .search-input {
	height: 38px;
	line-height: 38px;
	font-size: 15px;
	border-radius: 10px;
	border: 1px solid var(--c-border);
	background-color: var(--c-surface-2);
	background-position: 10px 11px;
}
.search-container .search-input:focus {
	background-color: var(--c-surface);
	border-color: var(--c-primary);
	box-shadow: 0 0 0 3px var(--c-primary-ring);
}
.logged-container { color: var(--c-text-2); }
.logged-container .links a.username { color: var(--c-text); font-weight: 600; }

/* Sidebar menu, light on navy */
.left-nav li a, .left-nav li a:visited {
	padding: 8px 10px;
	border-radius: var(--radius);
	color: var(--c-nav-text);
	font-weight: 500;
	transition: background-color .12s, color .12s;
}
.left-nav li a:hover { background-color: var(--c-nav-hover); color: #fff; font-weight: 500; }
.left-nav li.expanded > a { color: #fff; font-weight: 600; }
.left-nav li ul {
	margin: 2px 0 6px 19px;
	padding-left: 8px;
	border-left: 1px solid var(--c-nav-line);
}
.left-nav li ul a, .left-nav li ul a:visited { color: var(--c-nav-muted); padding: 6px 10px; }
.left-nav li ul a:hover { color: #fff; }
.left-nav li a.active,
.left-nav li a.active.root,
.left-nav li ul a.active {
	padding: 8px 10px;
	border: none;
	border-radius: var(--radius);
	background-color: var(--c-primary);
	color: #fff;
	font-weight: 600;
	box-shadow: 0 4px 12px rgba(37, 99, 235, .35);
}
.left-nav li a.active:after { display: none; }

/* Menu icons are dark PNGs set inline as the link's background: hide that copy
   and redraw it on ::before, inverted to light so it shows on navy. */
.left-nav li a.root,
.left-nav li a.active.root { padding-left: 36px; background-size: 0 0; }
.left-nav li a.root::before {
	content: "";
	position: absolute;
	left: 10px;
	top: 50%;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	background-image: inherit;
	background-size: 18px 18px;
	background-repeat: no-repeat;
	background-position: center;
	filter: invert(1);
	opacity: .6;
}
.left-nav li a.root:hover::before,
.left-nav li.expanded > a.root::before,
.left-nav li a.active.root::before { opacity: 1; }

/* Page area: a little breathing room from the sidebar and top bar. */
.main-container { padding-top: 16px; padding-left: 20px; padding-right: 20px; }

/* Quick exam prices: the panel opens under the top bar, and its "show" toggle is a
   round button in the bottom-right corner instead of half-hidden behind the bar. */
.quick-exam-prices {
	top: 56px;
	background-color: var(--c-surface);
	border-left: 1px solid var(--c-border);
	box-shadow: -8px 0 24px rgba(16, 24, 40, .08);
}
.quick-exam-prices .quick-results { border-top-color: var(--c-border); }
.quick-buttons button {
	height: 30px;
	border: 1px solid var(--c-border-strong);
	border-radius: var(--radius-sm);
	background-color: var(--c-surface);
	opacity: .8;
}
.quick-buttons .show {
	top: auto;
	bottom: 20px;
	right: 20px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border-color: var(--c-border);
	background-size: 18px;
	box-shadow: var(--shadow-pop);
	opacity: 1;
}
.quick-buttons .show:hover { background-color: var(--c-hover); }

}

/* ===================================================================
   Mobile (< 700px)
   =================================================================== */
@media screen and (max-width: 699px) {

/* Navy top bar, matching the desktop sidebar. */
.top-container {
	background-color: var(--c-nav);
	border-bottom: none;
}
.top-container .edoc-logo, .top-container .edoc-logo a { background-color: transparent; }
.top-container .edoc-logo a, .top-container .edoc-logo a:visited { color: #fff; }
.top-container .edoc-logo span, .top-container .edoc-logo a span { color: #60a5fa; }
.top-container .logged-container, .top-container .logged-container a { color: var(--c-nav-text); }
.top-container .mobile-menu { filter: invert(1); opacity: .85; }
.left-nav li a { border-radius: var(--radius); color: var(--c-text-2); }
.left-nav li a.active { background-color: var(--c-primary-soft); color: var(--c-primary); font-weight: 600; }
.logged-container, .logged-container a { color: var(--c-muted); }

/* Side-by-side form fields (w25/w33/w50percent) stack on a phone instead of
   squeezing their labels into a few characters per line. */
.form-entry .form-item.w20percent,
.form-entry .form-item.w25percent,
.form-entry .form-item.w33percent,
.form-entry .form-item.w50percent { width: 100% !important; }

.form-title .sep { margin: 0 3px; }

/* Menu panel: from under the 60px top bar to the bottom of the screen, scrolling on its
   own (it was a 100%-high block of a page that can be shorter than the screen).
   index.php also sets an inline min-height on it for the desktop sidebar. */
.left-container {
	position: fixed;
	top: 60px;
	bottom: 0;
	left: 0;
	right: 0;
	height: auto;
	min-height: 0 !important;
	padding: 10px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	z-index: 90;
}
body.menu-open { overflow: hidden; }

/* Tighter page and card spacing - more room for content on a small screen. */
.main-container { padding: 8px 8px 16px; }
fieldset, .form-filter, .list-container,
.main-container > .item-table, .main-container > form > .item-table { border-radius: 10px; }
fieldset, .list-container { padding: 10px; }
.list-container { margin-top: 8px; }
.form-title { margin: 2px 0 10px; font-size: 17px; }

/* Search / filter forms: a two-column grid of full-width fields, the search button
   a full-width bar; date ranges and the button take a whole row. */
.form-filter {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 8px;
	margin-bottom: 8px;
	padding: 10px;
	overflow: visible;
}
.form-filter .form-title { grid-column: 1 / -1; margin: 0; font-size: 15px; }
.form-filter .form-item {
	float: none;
	width: auto !important;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;
}
.form-filter label { margin-bottom: 2px; font-size: 12px; font-weight: 500; }
.form-filter input[type=text], .form-filter input[type=date],
.form-filter select, .form-filter .filter-data { width: 100% !important; height: 32px; font-size: 14px; }
.form-filter .form-item:has(input[type=date] + input[type=date]),
.form-filter .form-item:has(input[type=date] ~ input[type=date]) { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.form-filter .form-item:has(input[type=date] ~ input[type=date]) label { flex: 1 0 100%; }
.form-filter .form-item:has(input[type=date] ~ input[type=date]) input[type=date] { flex: 1 1 0; width: auto !important; }
.form-filter .form-item:has(> input.search),
.form-filter .filter-button { grid-column: 1 / -1; position: static; width: auto; height: auto; float: none; }
.form-filter .form-item:has(> input.search) > label { display: none; }
/* Some forms put the button first in the markup (AnalizaList): keep it at the end. */
.form-filter .filter-button { order: 99; }
.form-filter .filter-button input.search { display: block; }
.form-filter input.search {
	width: 100%;
	height: 36px;
	border-radius: var(--radius);
	background-size: 20px;
	opacity: 1;
}

/* Table cells (or any element) marked .m-hide are left out on a phone. */
.m-hide { display: none !important; }
/* ... and .m-small cells get smaller, muted text (dates and other secondary info). */
.item-table td.m-small, .item-table td.m-small a { font-size: 11px; line-height: 1.25; color: var(--c-muted); }
/* Header filter fields (owner users list, ...) have fixed widths that hold a table wider
   than the screen; let them shrink with their column. */
.item-table .table-search { width: 100% !important; min-width: 0; }
.item-table td { padding-left: 2px; padding-right: 2px; }
.imp-btn { padding: 0 8px; }
/* Owner users list on a phone: smaller text, last login smallest. */
.users-list td, .users-list td a { font-size: 12px; }
.users-list thead td, .users-list thead td a { font-size: 11px; }
.users-list td.c-last { font-size: 10px; line-height: 1.25; color: var(--c-muted); }
.users-list .imp-btn { height: 24px; font-size: 11px; }

/* Patient search results: birth date left out (the age is shown), names stand out. */
.ptn-list .c-bday { display: none; }
.ptn-list td.c-name a { font-weight: 600; }
.item-table tbody td { padding-top: 4px; padding-bottom: 4px; }

}

/* "Vizitat" etc. inside list rows: a small tappable pill in the accent colour. */
.item-table a.inside-button, .item-table a.inside-button:visited {
	padding: 2px 8px;
	border-radius: 999px;
	background-color: var(--c-primary-soft);
	color: var(--c-primary) !important;
	font-size: 11px;
	font-weight: 600;
}
.item-table a.inside-button:hover { background-color: var(--c-primary); color: #fff !important; }