/**
 * Debug Log Router: the plugin page.
 *
 * Loaded on the plugin page only, on every tab of it. Directions are logical
 * properties, so right-to-left languages mirror the layout without a
 * stylesheet of their own.
 *
 * ⚠️ One style stays inline on purpose: display:none on the copy button. That
 * is behaviour, not looks - the script reveals the button once the library is
 * there, and moving the rule here would leave a dead button on screen whenever
 * this file failed to load with scripts off.
 *
 * Разбор - development/docs/oformlenie.md; the older rules -
 * development/docs/admin.md, «Собственные стили».
 */

/*
 * The palette, and the only place colours are written down (заказчик,
 * 2026-09-28). Everything below refers to these names; a colour typed out
 * further down is a bug. Scoped to the page wrapper rather than :root, so
 * nothing leaks into the rest of the admin even if this file ever were.
 *
 * Each colour comes as a family: -fg for text, icons and outlines, -bg for a
 * light fill, -line for a quiet border on that fill. Every -fg was checked
 * against its own -bg and against white for a contrast of at least 4.5:1;
 * the figures are in docs/oformlenie.md, «Своя палитра».
 *
 * The meanings are the common ones, so nobody needs a legend: blue is what
 * can be pressed or is open now, green is download (and success), red is
 * loss or breakage, orange a warning, purple something outdated but not
 * urgent, grey everything neutral.
 */
.dlogr-page {
	--dlogr-text: #1d2327;
	--dlogr-muted: #50575e;
	--dlogr-surface: #fff;
	--dlogr-border: #dcdcde;
	--dlogr-rule: #c3c4c7;
	--dlogr-tab-bg: #e5e7ea;
	--dlogr-shadow: rgba(0, 0, 0, 0.04);

	--dlogr-blue-fg: #2271b1;
	--dlogr-blue-bg: #f0f6fc;
	--dlogr-blue-line: #c5d9ed;

	--dlogr-green-fg: #007a1f;
	--dlogr-green-bg: #edf7ee;
	--dlogr-green-line: #b8dfc0;

	--dlogr-red-fg: #9b2c2c;
	--dlogr-red-bg: #fcf0f1;
	--dlogr-red-line: #f0c4c6;

	--dlogr-orange-fg: #ad5700;
	--dlogr-orange-bg: #fff4e5;
	--dlogr-orange-line: #f3cf9f;

	--dlogr-purple-fg: #7440ad;
	--dlogr-purple-bg: #f5f0fb;
	--dlogr-purple-line: #dccbf0;

	--dlogr-grey-fg: #50575e;
	--dlogr-grey-bg: #f0f0f1;
	--dlogr-grey-line: #dcdcde;
}

/*
 * Tabs: core's .nav-tab, restyled on this page only. The active tab is white
 * with a blue bar along its bottom edge. The bar is an inset shadow rather
 * than a border, so it takes no room and the tab does not jump when it
 * becomes active; with keyboard focus the focus ring is added to it rather
 * than replacing it.
 */
.dlogr-page .nav-tab-wrapper {
	border-bottom-color: var(--dlogr-border);
}

.dlogr-page .nav-tab {
	border-color: var(--dlogr-border);
	background: var(--dlogr-tab-bg);
	color: var(--dlogr-muted);
}

.dlogr-page .nav-tab:hover,
.dlogr-page .nav-tab:focus {
	background: var(--dlogr-surface);
	color: var(--dlogr-text);
}

.dlogr-page .nav-tab-active,
.dlogr-page .nav-tab-active:hover,
.dlogr-page .nav-tab-active:focus,
.dlogr-page .nav-tab-active:focus:active {
	border-bottom-color: var(--dlogr-surface);
	background: var(--dlogr-surface);
	color: var(--dlogr-text);
	box-shadow: inset 0 -3px 0 var(--dlogr-blue-fg);
}

.dlogr-page .nav-tab-active:focus {
	box-shadow: inset 0 -3px 0 var(--dlogr-blue-fg), 0 0 0 2px var(--dlogr-blue-fg);
}

/*
 * A block of a tab, drawn by DLOGR_Admin::blocks() around whatever the block
 * printed. Cards replaced the rule between blocks (заказчик, 2026-09-28), so
 * the room between them is simply the margin.
 *
 * ⚠️ No rounded corners anywhere on this page - cards, notices, pills,
 * labels, tabs (заказчик, 2026-09-28). Buttons and tables have none worth
 * speaking of, and rounded things around them looked out of step. A new rule
 * with border-radius in this file goes against that decision.
 */
.dlogr-card {
	margin-block: 20px;
	padding-block: 20px;
	padding-inline: 24px;
	background: var(--dlogr-surface);
	border: 1px solid var(--dlogr-border);
	box-shadow: 0 1px 2px var(--dlogr-shadow);
}

.dlogr-card > :first-child {
	margin-block-start: 0;
}

.dlogr-card > :last-child {
	margin-block-end: 0;
}

/*
 * Cards side by side. Every card drawn in a row takes an equal share, so a row
 * of three that drew two splits in halves rather than leaving a hole.
 *
 * One below the other under 1366px - one point for every row on the page,
 * the small cards of the Status tab included (заказчик, 2026-09-28). Core's
 * 782px and then 1200px were tried and both came too late: the cards got
 * narrow long before (docs/oformlenie.md, «Ряды карточек»).
 */
.dlogr-row {
	display: flex;
	gap: 20px;
	margin-block: 20px;
}

.dlogr-row > .dlogr-card {
	flex: 1 1 0;
	min-width: 0;
	margin-block: 0;
}

@media screen and (max-width: 1366px) {
	.dlogr-row {
		flex-direction: column;
	}
}

/*
 * Icons: Lucide, drawn with lines rather than fills. The drawing attributes
 * were taken off the symbols in the sprite and live here instead, so the
 * colour follows the text around an icon and the line weight of all of them
 * changes in one place. All five properties are inherited, which is how they
 * reach into the shadow tree of <use>.
 */
.dlogr-icon {
	flex: none;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: middle;
}

/*
 * The sprite itself. width and height of 0 on the element already keep it
 * out of sight should this file fail to load; this takes it out of the flow
 * as well. Not display:none, which in some browsers stops <use> from finding
 * what is inside.
 */
.dlogr-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/*
 * No striping (заказчик, 2026-09-28). The class stays in the markup, so
 * bringing the stripes back is taking this one rule out. Core's rule is
 * .striped > tbody > :nth-child(odd) in wp-admin/css/common.css.
 */
.dlogr-page table.striped > tbody > :nth-child(odd) {
	background-color: transparent;
}

/*
 * A notice inside the page: the whole box tinted by how serious it is. Takes
 * the place of core's .notice.inline on this page; the notices on every other
 * admin screen stay core's, because those screens are not ours. Not a .notice
 * on purpose, either: core's script moves every .notice without .inline up
 * under the page title, and these belong where they are printed.
 *
 * The icon is centred on the height of the box (заказчик, 2026-09-28) rather
 * than kept level with the first line.
 */
.dlogr-note {
	display: flex;
	gap: 14px;
	align-items: center;
	margin-block: 1em;
	padding-block: 10px;
	padding-inline: 14px;
	border: 1px solid var(--dlogr-grey-line);
	background: var(--dlogr-grey-bg);
	color: var(--dlogr-grey-fg);
}

.dlogr-note-body {
	flex: 1 1 auto;
	min-width: 0;
}

.dlogr-note p {
	margin-block: 0.5em;
}

/*
 * The outcome of the last press, printed first on the page, above the title.
 * Three times the room above it (заказчик, 2026-09-28): the 1em of any other
 * note collapses with the 10px core gives .wrap, which left 13px.
 */
.dlogr-page > .dlogr-note:first-child {
	margin-block-start: 3em;
}

/*
 * Text in the colour of the icon (заказчик, 2026-09-28); the icon has no
 * colour of its own and takes currentColor from here. Each -fg on its own -bg
 * was checked at 4.5:1 or more - see the palette above.
 *
 * ⚠️ Regular weight, not 600. 600 was tried the same day and taken back: it
 * swallowed the emphasis of strong, which core also draws at 600, and the
 * system font on Windows has no 500 to fall between them.
 */
.dlogr-note-success {
	border-color: var(--dlogr-green-line);
	background: var(--dlogr-green-bg);
	color: var(--dlogr-green-fg);
}

.dlogr-note-warning {
	border-color: var(--dlogr-orange-line);
	background: var(--dlogr-orange-bg);
	color: var(--dlogr-orange-fg);
}

.dlogr-note-error {
	border-color: var(--dlogr-red-line);
	background: var(--dlogr-red-bg);
	color: var(--dlogr-red-fg);
}

/*
 * A label: one short value in a row - the type of a log record, the level of
 * a journal entry. Light fill, dark text of the same hue, a quiet border.
 */
.dlogr-chip {
	display: inline-block;
	padding-block: 1px;
	padding-inline: 8px;
	border: 1px solid var(--dlogr-grey-line);
	background: var(--dlogr-grey-bg);
	color: var(--dlogr-grey-fg);
	white-space: nowrap;
}

.dlogr-chip-red {
	border-color: var(--dlogr-red-line);
	background: var(--dlogr-red-bg);
	color: var(--dlogr-red-fg);
}

.dlogr-chip-orange {
	border-color: var(--dlogr-orange-line);
	background: var(--dlogr-orange-bg);
	color: var(--dlogr-orange-fg);
}

.dlogr-chip-purple {
	border-color: var(--dlogr-purple-line);
	background: var(--dlogr-purple-bg);
	color: var(--dlogr-purple-fg);
}

.dlogr-chip-blue {
	border-color: var(--dlogr-blue-line);
	background: var(--dlogr-blue-bg);
	color: var(--dlogr-blue-fg);
}

/*
 * A vertical rule between things of a different kind in one row: the log
 * files and the journal on the Logs tab, the harmless buttons and Delete in a
 * directory row.
 */
.dlogr-rule {
	margin-inline: 10px;
	border-inline-start: 1px solid var(--dlogr-rule);
}

.dlogr-actions .dlogr-rule {
	align-self: stretch;
	margin-inline: 6px;
}

/* The buttons of one log directory, side by side. */
.dlogr-actions {
	display: flex;
	gap: 6px;
}

.dlogr-actions form {
	margin: 0;
}

/*
 * Outlined buttons. Core colours .wp-core-ui .button with the admin theme
 * colour and changes it again on hover, focus and active, so every state is
 * named here: a single class would lose to core and the button would turn
 * blue under the cursor. A disabled button keeps core's grey, which core sets
 * with !important.
 */
.wp-core-ui .button.dlogr-button-download,
.wp-core-ui .button.dlogr-button-download:hover,
.wp-core-ui .button.dlogr-button-download:focus,
.wp-core-ui .button.dlogr-button-download:active {
	border-color: var(--dlogr-green-fg);
	color: var(--dlogr-green-fg);
}

/* Used both in the directory row and by the button that confirms a deletion. */
.wp-core-ui .button.dlogr-button-delete,
.wp-core-ui .button.dlogr-button-delete:hover,
.wp-core-ui .button.dlogr-button-delete:focus,
.wp-core-ui .button.dlogr-button-delete:active {
	border-color: var(--dlogr-red-fg);
	color: var(--dlogr-red-fg);
}

/*
 * A button with an icon before its text. Core draws .button as an
 * inline-block with a fixed line height; flex lines the icon up with the
 * text without touching that height.
 */
.wp-core-ui .button.dlogr-button-icon {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.dlogr-button-icon .dlogr-icon {
	width: 16px;
	height: 16px;
}

/* The heading of a card, with its icon in blue in front. */
.dlogr-card-title {
	display: flex;
	align-items: center;
	gap: 12px;
}

.dlogr-card-title .dlogr-icon {
	width: 24px;
	height: 24px;
	color: var(--dlogr-blue-fg);
}

/*
 * The row the Logs tab picks a file from: the seven context files, the rule,
 * the journal - as pills since 2026-09-28, where it used to be a framed line
 * of links. A line under the row separates it from the notes below it, and
 * only when there are any.
 */
.dlogr-files {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-block: 1em;
}

.dlogr-files:not(:last-child) {
	padding-block-end: 16px;
	border-block-end: 1px solid var(--dlogr-border);
}

.dlogr-files .dlogr-rule {
	align-self: stretch;
	margin-inline: 6px;
}

/*
 * One pill. Three kinds: a file that can be opened (a link), the file on
 * screen (blue outline, no link), and a file not written yet (grey, no link).
 */
.dlogr-file {
	display: inline-block;
	padding-block: 5px;
	padding-inline: 14px;
	border: 1px solid transparent;
	background: var(--dlogr-blue-bg);
	color: var(--dlogr-blue-fg);
	text-decoration: none;
}

a.dlogr-file:hover,
a.dlogr-file:focus {
	border-color: var(--dlogr-blue-line);
	color: var(--dlogr-blue-fg);
}

.dlogr-file-current {
	border-color: var(--dlogr-blue-fg);
	color: var(--dlogr-text);
	font-weight: 600;
}

.dlogr-file-none {
	background: var(--dlogr-grey-bg);
	color: var(--dlogr-grey-fg);
}

/*
 * The line about the file on screen: icon, what and how much, and Download
 * pushed to the far side.
 */
.dlogr-file-line {
	display: flex;
	align-items: center;
	gap: 12px;
}

.dlogr-file-line > .dlogr-icon {
	width: 24px;
	height: 24px;
	color: var(--dlogr-blue-fg);
}

.dlogr-file-line-text {
	flex: 1 1 auto;
	min-width: 0;
}

/* Table heads on a light grey, as in the sketches. */
.dlogr-page table.widefat thead th {
	background: var(--dlogr-grey-bg);
}

/* The line under a table: how much is shown, and the way to more. */
.dlogr-table-footer {
	color: var(--dlogr-muted);
}

/*
 * The log directory, right above the table it captions. 600 is the weight
 * core draws strong with.
 */
.dlogr-log-directory {
	font-weight: 600;
}

/* The form around the confirming Delete, in line with Cancel. */
.dlogr-inline-form {
	display: inline-block;
	margin-inline-end: 6px;
}

/*
 * A log record: capped in height and scrolling inside itself, so a long stack
 * trace does not stretch the table.
 */
.dlogr-record {
	max-height: 14em;
	overflow: auto;
	white-space: pre-wrap;
	margin: 0;

	/*
	 * A line with no spaces in it - a long URL, base64, JSON on one line -
	 * would otherwise set the width of the cell and push the table sideways
	 * (dorabotki.md, пункт 6). "anywhere" rather than "break-word": only it
	 * counts towards min-content, which is what a table cell is sized by.
	 */
	overflow-wrap: anywhere;
}

/*
 * One line of a record, with a hanging indent: the line of the file starts at
 * the edge, what the browser wraps is pushed in by three characters
 * (заказчик, 2026-10-04). Full-width inline-block, so the real line breaks
 * between these elements stay real characters - see record_lines().
 */
.dlogr-line {
	display: inline-block;
	box-sizing: border-box;
	width: 100%;
	padding-inline-start: 3ch;
	text-indent: -3ch;
	vertical-align: top;

	/*
	 * ⚠️ Set here as well, not left to inherit from .dlogr-record: core's
	 * common.css has ".widefat * { word-wrap: break-word; }", which lands on
	 * every element of the table directly. Without this line the table went
	 * 36000 px wide on a 5000-character record (measured 2026-10-04).
	 */
	overflow-wrap: anywhere;
}

/*
 * A piece of wp-config.php: the block to paste in, or lines the removal will
 * touch. One colour for all of it - no syntax colouring (заказчик,
 * 2026-09-28).
 */
.dlogr-code {
	max-height: 16em;
	overflow: auto;
	white-space: pre-wrap;
	margin-block: 0 1em;
	margin-inline: 0;
	padding-block: 0.6em;
	padding-inline: 0.8em;
	background: var(--dlogr-grey-bg);
	border: 1px solid var(--dlogr-border);
	line-height: 1.6;
}

/*
 * Numbered: each line is a block, and its number is drawn from data-line in a
 * column of its own. Generated content cannot be selected, so a line dragged
 * over with the mouse comes out without its number. The padding moves from
 * the box onto the first and last line, so the number column runs the full
 * height; the number takes the line's top padding over with inherit and
 * stays level with the text.
 */
.dlogr-code-numbered {
	padding: 0;
}

.dlogr-code-line {
	display: block;
	position: relative;
	min-height: 1.6em;
	padding-inline: 4.2em 0.8em;
}

.dlogr-code-line:first-child {
	padding-block-start: 0.6em;
}

.dlogr-code-line:last-child {
	padding-block-end: 0.6em;
}

.dlogr-code-line::before {
	content: attr(data-line);
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	box-sizing: border-box;
	width: 3.4em;
	padding-block-start: inherit;
	padding-inline-end: 0.6em;
	border-inline-end: 1px solid var(--dlogr-border);
	background: var(--dlogr-tab-bg);
	color: var(--dlogr-muted);
	text-align: end;
	user-select: none;
}

/* A heading inside a card, with its icon: "Will be removed", "Given back". */
.dlogr-subtitle {
	display: flex;
	align-items: center;
	gap: 8px;
}

/*
 * The colour of the icon in a heading. Blue unless told otherwise: the state
 * heading of the Status tab says the state with it.
 */
.dlogr-title-green .dlogr-icon {
	color: var(--dlogr-green-fg);
}

.dlogr-title-red .dlogr-icon {
	color: var(--dlogr-red-fg);
}

.dlogr-title-orange .dlogr-icon {
	color: var(--dlogr-orange-fg);
}

.dlogr-title-grey .dlogr-icon {
	color: var(--dlogr-grey-fg);
}

.dlogr-title-blue .dlogr-icon {
	color: var(--dlogr-blue-fg);
}

/*
 * The lines the removal gives back, a small card each, two to a row; one
 * below the other under 1366px, the same point as the rows of cards. An odd
 * one out keeps half the width rather than stretching (docs/oformlenie.md,
 * «Ряды карточек»).
 */
.dlogr-subcards {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-block: 1em;
}

.dlogr-subcard {
	flex: 0 1 calc(50% - 10px);
	min-width: 0;
	box-sizing: border-box;
	padding-block: 4px 0;
	padding-inline: 16px;
	border: 1px solid var(--dlogr-border);
}

.dlogr-subcard .description {
	margin-block: 0.5em 0.3em;
}

@media screen and (max-width: 1366px) {
	.dlogr-subcard {
		flex-basis: 100%;
	}
}

/*
 * The logging switch on the Settings tab: core's checkbox, redrawn. Without
 * this file it is an ordinary checkbox, which is exactly what it is.
 *
 * Square, like everything on the page (заказчик, 2026-09-28): the
 * border-radius here is not a rounding but the cancelling of core's 2px.
 * Core's own checked look - the tick drawn in ::before, the theme colour, the
 * float - is overridden rule by rule, since the same pseudo-element becomes
 * the knob. The knob moves with inset-inline-start rather than a transform,
 * so a right-to-left page moves it the right way by itself.
 */
.dlogr-switch {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}

.dlogr-page .dlogr-switch input[type="checkbox"] {
	position: relative;
	flex: none;
	width: 40px;
	min-width: 40px;
	height: 22px;
	margin: 0;
	border: 1px solid var(--dlogr-rule);
	border-radius: 0;
	background: var(--dlogr-grey-bg);
	transition: background-color 0.15s, border-color 0.15s;
}

.dlogr-page .dlogr-switch input[type="checkbox"]::before,
.dlogr-page .dlogr-switch input[type="checkbox"]:checked::before {
	content: "";
	position: absolute;
	top: 2px;
	inset-inline-start: 2px;
	float: none;
	width: 16px;
	height: 16px;
	margin: 0;
	background: var(--dlogr-muted);
	transition: inset-inline-start 0.15s, background-color 0.15s;
}

.dlogr-page .dlogr-switch input[type="checkbox"]:checked {
	border-color: var(--dlogr-blue-fg);
	background: var(--dlogr-blue-fg);
}

.dlogr-page .dlogr-switch input[type="checkbox"]:checked::before {
	inset-inline-start: 20px;
	background: var(--dlogr-surface);
}

.dlogr-page .dlogr-switch input[type="checkbox"]:focus {
	outline: 0;
	box-shadow: 0 0 0 2px var(--dlogr-surface), 0 0 0 4px var(--dlogr-blue-fg);
}

@media (prefers-reduced-motion: reduce) {
	.dlogr-page .dlogr-switch input[type="checkbox"],
	.dlogr-page .dlogr-switch input[type="checkbox"]::before {
		transition: none;
	}
}

/*
 * The one button of the Settings tab, and the line about unsaved changes.
 * Sticks to the bottom of the window while the form is on screen: the
 * deletion card above is long and would take the button out of sight of
 * whoever just flipped a switch at the top.
 */
.dlogr-save-bar {
	position: sticky;
	bottom: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 16px;
	margin-block: 20px 0;
	padding-block: 12px;
	padding-inline: 24px;
	background: var(--dlogr-surface);
	border: 1px solid var(--dlogr-border);
	box-shadow: 0 -2px 6px var(--dlogr-shadow);
}

.dlogr-unsaved {
	color: var(--dlogr-orange-fg);
	font-weight: 600;
}

/*
 * A log directory name: monospace on a light fill, not a box that looks like
 * a text field - it cannot be typed over.
 */
.dlogr-dir-name {
	padding-block: 3px;
	padding-inline: 8px;
	background: var(--dlogr-grey-bg);
}

/* The buttons of a directory row take what they need; the name, the rest. */
.dlogr-col-actions {
	width: 1%;
	white-space: nowrap;
}

.wp-core-ui .button-small.dlogr-button-icon .dlogr-icon {
	width: 14px;
	height: 14px;
}

/* The label column of the Status table. */
.dlogr-label {
	width: 16em;
}

/*
 * Column widths. Number and time mean the same thing in the log table and in
 * the journal, so they share a rule. The rest belong to one table each, even
 * where the figure happens to match: changing one must not move another.
 */
.dlogr-col-number {
	width: 4em;
}

.dlogr-col-time {
	width: 14em;
}

/* Log table. */
.dlogr-col-type {
	width: 12em;
}

/* Journal. */
.dlogr-col-level {
	width: 5em;
}

.dlogr-col-code {
	width: 14em;
}

.dlogr-col-actor {
	width: 9em;
}

/* Constants declared before this plugin, on the Status tab. */
.dlogr-col-constant {
	width: 14em;
}

.dlogr-col-in-force {
	width: 8em;
}

.dlogr-col-would-set {
	width: 12em;
}

/*
 * The Support tab (заказчик, 2026-10-08). The first card puts the logo at the
 * start and the text beside it; under core's 782px the logo goes on top, as
 * there is no room left for text next to it. The edge rules of .dlogr-card
 * reach only the wrapper here, so the text column repeats them.
 * Разбор - development/docs/oformlenie.md, «Вкладка «Поддержка»».
 */
.dlogr-about {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

.dlogr-logo {
	flex: none;
	width: 96px;
	height: 96px;
}

.dlogr-about-text {
	flex: 1 1 auto;
	min-width: 0;
}

.dlogr-about-text > :first-child {
	margin-block-start: 0;
}

.dlogr-about-text > :last-child {
	margin-block-end: 0;
}

@media screen and (max-width: 782px) {
	.dlogr-about {
		flex-direction: column;
		gap: 16px;
	}
}

/* Rate and coffee side by side; on a narrow card they wrap. */
.dlogr-support-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* The small print under the cards: no card of its own, muted and smaller. */
.dlogr-support-footer {
	margin-block-start: 20px;
	color: var(--dlogr-muted);
	font-size: 12px;
}

.dlogr-support-footer p {
	margin-block: 0 4px;
}