/*
 * Panel UI components owned by this project — popups, grids, pagers, and the odd rule for a
 * ported widget whose own class names style.css never knew about.
 *
 * WHY THIS FILE EXISTS. The ported panel screens were drawing their dialogs with GWT's class
 * names (.gwt-DialogBox, .Caption, .dialogContent and the nine decorated cells) and relying on
 * whatever style.css still had for them. That is a dependency on a framework this project is
 * retiring, and it had already broken: style.css gives .gwt-DialogBox nothing but a z-index and
 * leaves .dialogContent an EMPTY rule, so the white background came only from .dialogMiddleCenter
 * — a cell of the 3x3 table GWT's widget generated. richtext.js emitted that table and looked
 * like a window; videolarim.js's log popup did not, and rendered as transparent text floating
 * over the page (Sait, 2026-09-14: "logs popup shows nothing and it's transparent. doesnt look
 * like a window").
 *
 * So the components are ours now, with their own namespace. Nothing here depends on a gwt-* class
 * and nothing here should be given one.
 *
 * The palette is taken from the panel's own modal (.eminmisiniz in style.css) and its tables, so
 * these read as part of the same panel rather than as a second design.
 */

:root {
	--wui-ink: #394547;
	--wui-muted: #7b8a8d;
	--wui-line: #d9dede;
	--wui-head: #f1f1f1;
	--wui-accent: #03a9f4;
	--wui-shadow: rgba(0, 0, 0, .5);
}

/* ---------------------------------------------------------------- popups */

.wui-glass {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 100000;
	background: rgba(0, 0, 0, .35);
}

.wui-dialog {
	position: fixed;
	left: 50%;
	top: 60px;
	transform: translateX(-50%);
	z-index: 100001;
	/* an explicit opaque background is the whole point of this file.
	   background-color, not the `background` shorthand: some CSS engines do not
	   expand the shorthand when a computed style is asked for background-color,
	   and this property is asserted on in PanelBrowserTest. */
	background-color: #fff;
	color: var(--wui-ink);
	font-size: 13px;
	border-radius: 3px;
	box-shadow: 1px 1px 3px var(--wui-shadow);
	/* column layout so the caption and footer stay put and only the body scrolls */
	display: flex;
	flex-direction: column;
	min-width: 280px;
	max-width: 90vw;
	max-height: 80vh;
	overflow: hidden;
}

.wui-dialog-caption {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: var(--wui-head);
	border-bottom: 1px solid #bbb;
	padding: 6px 8px 6px 10px;
	font-weight: bold;
	cursor: default;
	/* the caption is a drag handle; text selection while dragging looks broken */
	user-select: none;
}

.wui-dialog-x {
	border: 0;
	background: transparent;
	font-size: 18px;
	line-height: 1;
	padding: 0 4px;
	cursor: pointer;
	color: var(--wui-muted);
}

.wui-dialog-x:hover { color: var(--wui-ink); }

.wui-dialog-body {
	padding: 10px;
	overflow: auto;
	/* the body is the only part that scrolls, so it gets the flexible height */
	flex: 1 1 auto;
}

.wui-dialog-footer {
	display: flex;
	justify-content: flex-end;
	gap: 6px;
	padding: 8px 10px;
	border-top: 1px solid var(--wui-line);
	background: #fafbfb;
}

.wui-btn {
	font: inherit;
	padding: 4px 12px;
	border: 1px solid #c3caca;
	background: #fff;
	border-radius: 3px;
	cursor: pointer;
	color: var(--wui-ink);
}

.wui-btn:hover { background: #f3f6f6; }

.wui-btn-primary {
	background: var(--wui-accent);
	border-color: var(--wui-accent);
	color: #fff;
}

.wui-btn-primary:hover { background: #0398db; }

/* ----------------------------------------------------------------- grids */

.wui-grid {
	border-collapse: collapse;
	width: 100%;
	font-size: 12px;
}

.wui-grid th,
.wui-grid td {
	border-bottom: 1px solid var(--wui-line);
	padding: 5px 8px;
	text-align: left;
	vertical-align: top;
}

.wui-grid th {
	background: var(--wui-head);
	border-bottom: 1px solid #bbb;
	white-space: nowrap;
}

.wui-grid tbody tr:nth-child(even) { background: #fafbfb; }
.wui-grid tbody tr:hover { background: #eef7fb; }

/* long log lines must not force the dialog wider than the viewport */
.wui-grid td.wui-wrap {
	white-space: pre-wrap;
	word-break: break-word;
	max-width: 520px;
}

.wui-grid td.wui-nowrap { white-space: nowrap; }

.wui-empty {
	padding: 18px;
	text-align: center;
	color: var(--wui-muted);
}

/* ---------------------------------------------------------------- pagers */

.wui-pager {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	padding: 6px 2px 0;
	font-size: 12px;
	color: var(--wui-muted);
}

.wui-pager-btn {
	font: inherit;
	min-width: 28px;
	padding: 2px 8px;
	border: 1px solid #c3caca;
	background: #fff;
	border-radius: 3px;
	cursor: pointer;
	color: var(--wui-ink);
}

.wui-pager-btn:hover:not(:disabled) { background: #f3f6f6; }

.wui-pager-btn:disabled {
	opacity: .45;
	cursor: default;
}

/* ---------------------------------------------------------------- toasts */

/*
 * Top-right outcome messages that dismiss themselves (Sait, 2026-09-14: "we need to create
 * top-right popup success/failure messages that will hide in 10 secs", and "dont use browser
 * native error/confirm dialogs").
 *
 * Above .wui-dialog on purpose: an action taken inside a popup reports its outcome as a toast, and
 * that must not appear behind the popup that launched it.
 */
.wui-toasts {
	position: fixed;
	top: 12px;
	right: 12px;
	z-index: 100010;
	display: flex;
	flex-direction: column;
	gap: 8px;
	/* the strip spans the corner but must not swallow clicks on the page behind it */
	pointer-events: none;
	max-width: min(380px, 90vw);
}

.wui-toast {
	pointer-events: auto;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background-color: #fff;
	color: var(--wui-ink);
	font-size: 13px;
	line-height: 18px;
	padding: 10px 12px;
	border-radius: 3px;
	border-left: 4px solid var(--wui-muted);
	box-shadow: 1px 1px 6px var(--wui-shadow);
	/* the message is the point; long ones wrap rather than clip */
	word-break: break-word;
	animation: wui-toast-in .18s ease-out;
}

@keyframes wui-toast-in {
	from { opacity: 0; transform: translateX(12px); }
	to   { opacity: 1; transform: none; }
}

/* a fading toast must not keep taking clicks on its way out */
.wui-toast.wui-toast-out {
	opacity: 0;
	transition: opacity .18s ease-in;
	pointer-events: none;
}

.wui-toast-success { border-left-color: #2e9e5b; }
.wui-toast-error   { border-left-color: #c0392b; }
.wui-toast-info    { border-left-color: var(--wui-accent); }

.wui-toast-text { flex: 1 1 auto; }

.wui-toast-x {
	border: 0;
	background: transparent;
	font-size: 16px;
	line-height: 1;
	padding: 0 2px;
	cursor: pointer;
	color: var(--wui-muted);
}

.wui-toast-x:hover { color: var(--wui-ink); }

/* --------------------------------------------------------------- confirm */

.wui-confirm-message {
	margin: 0;
	padding: 4px 2px 8px;
	line-height: 20px;
}

.wui-btn-danger {
	background: #c0392b;
	border-color: #c0392b;
	color: #fff;
}

.wui-btn-danger:hover { background: #ab3326; }

/*
 * Respect a reduced-motion preference: the animations here are decoration, and the components must
 * still appear and disappear correctly without them.
 */
@media (prefers-reduced-motion: reduce) {
	.wui-toast { animation: none; }
	.wui-toast.wui-toast-out { transition: none; }
}

.wui-confirm-note {
	color: var(--wui-muted);
	font-size: 12px;
	line-height: 17px;
	padding: 0 2px 4px;
}

/* ---------------------------------------------------------------- inputs */

.wui-input {
	font: inherit;
	width: 100%;
	box-sizing: border-box;
	padding: 6px 8px;
	border: 1px solid #c3caca;
	border-radius: 3px;
	color: var(--wui-ink);
	background-color: #fff;
}

.wui-input:focus {
	outline: none;
	border-color: var(--wui-accent);
}

.wui-input-error {
	color: #c0392b;
	font-size: 12px;
	line-height: 17px;
	padding: 4px 2px 0;
}

/* ------------------------------------------------------- rich-text toolbar */

/*
 * The ported editor's toolbar rows (richtext.js emits two: one above the editing frame, one below).
 *
 * The chrome itself — background strip, border-bottom, padding, and the 4px button margins — comes
 * from style.css's .gwt-RichTextToolbar rules, which the toolbar now carries that class to pick up.
 * It did not, so it had no rule at all; see the comment in richtext.js.
 *
 * This sheet loads AFTER style.css, so what follows overrides it where they overlap. The legacy
 * shorthand is padding: 3px on all sides; Sait asked for 4px at the bottom (2026-09-14).
 */
.kaf-RichTextToolbar {
	padding-bottom: 4px;
}

/*
 * The editing surface itself — an iframe in designMode, as GWT's RichTextArea was.
 *
 * Its border was INVISIBLE (Sait, 2026-09-14). Two reasons, and neither is style.css: the element
 * carries frameBorder="0", which kills the browser's default, and style.css has no
 * .gwt-RichTextArea rule at all. The border used to come from GWT's own theme stylesheet, which
 * left with the module — the same way the dialog lost its background. (manage.css has
 * .kaf-richText / .kaf-HasRichTextToolbar, but no JSP loads that file.)
 *
 * border-box because richtext.js sets the frame's width inline, often 100%: without it the border
 * pushes the editor past its container.
 */
.gwt-RichTextArea {
	/* longhand, not the `border` shorthand: some CSS engines do not expand a shorthand when a
	   computed style is asked for border-bottom-width, and this is asserted on in
	   PanelBrowserTest. The same trap already cost a round on background vs background-color. */
	border-width: 1px;
	border-style: solid;
	border-color: #c3caca;
	border-radius: 3px;
	background-color: #fff;
	box-sizing: border-box;
}