/* Structural styling for the PrimeFaces widgets (the stock theme is off). */

/* ---- PrimeFaces structural styling (THEME=none) ---- */

.ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
	font-family: 'Barlow', system-ui, sans-serif;
	font-size: 14.5px;
}

.ui-datatable table {
	width: 100%;
	border-collapse: collapse;
}

/* The compound .ui-datatable.ui-widget outranks the structural rules in
   components.css, which loads after this sheet and would otherwise paint
   1px solid borders around every cell in the text colour. */
.ui-datatable.ui-widget thead th {
	text-align: left;
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	padding: 10px 14px;
	border: none;
	border-bottom: 1px solid var(--line);
}

.ui-datatable.ui-widget tbody td {
	padding: 12px 14px;
	border: none;
	border-bottom: 1px solid var(--line);
}

.ui-datatable.ui-widget tr:last-child td {
	border-bottom: none;
}

.ui-paginator {
	display: flex;
	gap: 6px;
	justify-content: center;
	padding: 12px 0 0;
}

.ui-paginator a, .ui-paginator span.ui-state-active {
	border-radius: 8px;
	padding: 6px 11px;
	font-weight: 600;
	color: var(--ink);
	cursor: pointer;
}

.ui-paginator span.ui-state-active {
	background: var(--accent);
	color: var(--on-accent);
}

/* The width a dialog asks for is a desktop width; PrimeFaces writes it inline
   and never reconsiders it, so a phone gets a box wider than the screen with
   its close button off the right edge. Capping it here holds, and the widget
   centres on the measured width, so the dialog still lands centred. */
.ui-dialog {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 18px;
	box-shadow: var(--shadow);
	padding: 6px 4px 12px;
	max-width: calc(100vw - 20px);
}

.ui-dialog .ui-dialog-titlebar {
	padding: 16px 20px 8px;
	font-family: 'Barlow Condensed', 'Barlow', sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	font-size: 20px;
}

.ui-dialog .ui-dialog-content {
	padding: 8px 20px 12px;
}

/* The titlebar's close control: the themeless icon span is empty, so the
   cross is drawn here and the anchor styled as a quiet round button. */
.ui-dialog .ui-dialog-titlebar-close {
	float: right;
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	color: var(--muted);
	text-decoration: none;
	transition: color .15s, background .15s;
}

.ui-dialog .ui-dialog-titlebar-close::before {
	content: '✕';
	font-family: 'Barlow', system-ui, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

.ui-dialog .ui-dialog-titlebar-close .ui-icon {
	display: none;
}

.ui-dialog .ui-dialog-titlebar-close:hover {
	color: var(--ink);
	background: var(--surface2);
}

.ui-widget-overlay {
	background: rgba(0, 0, 0, .45);
}

.ui-growl {
	position: fixed;
	top: 20px;
	right: 20px;
	width: 320px;
	z-index: 100;
}

.ui-growl-item-container {
	background: var(--surface);
	border: 1px solid var(--line);
	border-left: 4px solid var(--accent);
	border-radius: 12px;
	box-shadow: var(--shadow);
	margin-bottom: 10px;
	padding: 14px 16px;
}

.ui-growl-item-container.ui-growl-error,
.ui-growl-item-container.ui-growl-fatal {
	border-left-color: #c12946;
}

/* Lay the toast out as icon | message | close so the severity glyph aligns. The
   container selector outweighs the base component sheet, which loads after this one. */
.ui-growl-item-container .ui-growl-item {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Drop the base sheet's asymmetric padding, fixed width and float so the message
   sits symmetric and centres against the icon on the flex row. */
.ui-growl-item-container .ui-growl-title,
.ui-growl-item-container .ui-growl-message {
	color: var(--ink);
	width: auto;
	padding: 0;
	margin: 0;
	float: none;
}

/* Stack the title over the detail and centre them as a group so a message with
   no detail (an empty trailing paragraph) still sits centred against the icon
   and close control rather than riding high in the toast. */
.ui-growl-item-container .ui-growl-message {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.ui-growl-title {
	font-weight: 700;
}

/* Severity glyph drawn with PrimeIcons; the container selector outweighs the base
   component sheet so its 32px messages.png sprite, float and size are dropped and
   only the single glyph below remains. */
.ui-growl-item-container .ui-growl-image {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.4rem;
	height: auto;
	float: none;
	background: none;
}

.ui-growl-item-container .ui-growl-image::before {
	font-family: "primeicons";
	font-size: 1.25rem;
	line-height: 1;
}

.ui-growl-image-info::before {
	content: "\e924";
	color: var(--accent);
}

.ui-growl-image-warn::before {
	content: "\e922";
	color: #e9b35c;
}

.ui-growl-image-error::before,
.ui-growl-image-fatal::before {
	content: "\e90c";
	color: #c12946;
}

/* Pull the close control into the flex row (the base sheet floats it to the top
   corner) so it centres on the text line and pushes to the right edge. */
.ui-growl-item-container .ui-growl-icon-close {
	order: 1;
	position: static;
	align-self: center;
	margin-left: auto;
	color: var(--muted);
	text-indent: 0;
	overflow: visible;
}

.ui-growl-icon-close::before {
	content: "\00d7";
	font-size: 1.1rem;
	line-height: 1;
}

.ui-selectonemenu {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 11px;
	padding: 9px 30px 9px 14px;
	position: relative;
	cursor: pointer;
}

.ui-selectonemenu-panel {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	box-shadow: var(--shadow);
	padding: 6px;
}

.ui-selectonemenu-item {
	padding: 9px 12px;
	border-radius: 8px;
	cursor: pointer;
}

.ui-selectonemenu-item:hover, .ui-selectonemenu-item.ui-state-highlight {
	background: var(--accent-soft);
	color: var(--accent);
}

.ui-state-error {
	border-color: #c43d2f;
}

.ui-message-error, .ui-messages-error {
	color: #c43d2f;
	font-size: 13px;
	font-weight: 600;
}