/**
 * CSS code for the "Edit" screen
 *
 * @package TablePress
 * @subpackage Views CSS
 * @author Tobias Bäthge
 * @since 1.0.0
 */

/* Container for Advanced Editor and Help Box dialogs. */
.hidden-container {
	display: none;
}

.postbox {
	scroll-margin-top: 72px;
}

/* Positioning of the "Help" button in the header section of a postbox. */
.postbox .postbox-header .hndle {
	&:has(> .help-container) {
		justify-content: flex-start;
		gap: 12px;
	}

	> .help-container {
		height: 24px;
	}
}

/* Allow wide postboxes to scroll sideways. */
body,
div#post-body.metabox-holder.columns-1 {
	overflow: visible !important;
}

/* Add space between the screen options fieldsets. */
#tablepress-screen-options {
	margin-top: 20px;
}

/* Move backdrop of the wpLink dialog above the "Advanced Editor" dialog. */
body #wp-link-backdrop {
	z-index: 100103;
}

/* Fix height of the wpLink dialog, to prevent vertical scrolling in WP 7.0+. */
body[class*="branch-7-"] #wp-link-wrap {
	height: 642px;
	margin-top: -321px;
}

/* Header Bar. */
#tablepress-header-bar-section {
	margin-bottom: 20px;
	padding: 8px 12px;
	border: 1px solid #c3c4c7;
	background: #ffffff;

	/* Sticky at top of page. */
	@media screen and (min-width: 601px) {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 32px) - 1px); /* 1px offset to remove top border. */
		z-index: 9989; /* Above the table editor, but below the admin menu and WP Pointers. */
	}
	/* Full width on smaller screens, to prevent the table editor from being visible near the right edge when scrolling. */
	@media screen and (min-width: 601px) and (max-width: 782px) {
		margin-left: -11px;
		margin-right: -21px;
	}
}

/* Table name and ID display in header. */
.tablepress-header-table-name,
.tablepress-header-table-id {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Background color for the readonly Shortcode text field. */
#table-information-shortcode {
	&,
	+ .components-input-control__suffix {
		background-color: #f0f0f1;
	}
}

/* Styling and positioning of buttons in wpdialogs. */
.ui-dialog {
	.button {
		box-shadow: none;
	}
	.ui-dialog-buttonset {
		width: 100%;
	}
	.button-cancel,
	.button-cancel:hover {
		color: #b32d2e;
		border-color: transparent;
		background-color: transparent;
		text-decoration: underline;
	}
	.button-ok {
		float: right;
	}
}

/* Content of the Advanced Editor wpdialog. */
#advanced-editor {
	padding: 5px;

	.wp-editor-container {
		border: none;
	}
}

#tablepress-page #tablepress_edit-table-data {
	display: inline-block; /* Stretch to the width of the table... */
	min-width: calc(100% - 2px); /* but use the full width, minus 2px to account for the borders. */
}

#tablepress_edit-table-manipulation .column-1,
#tablepress_edit-table-manipulation .column-2 {
	width: 50%;
}

/* Jspreadsheet CSS. */

#table-editor {
	font-size: 14px;
}

/* Minimum row height, using :after to keep resize animation. */
.jexcel > tbody > tr:after {
	content: "";
	display: inline-block;
	min-height: 22px;
}

.jexcel > thead > tr > td {
	text-align: center !important;
	z-index: 22; /* Prevent drag corner from floating above fixed header. */

	/* Use custom sorting arrow icons. */
	&:not(:first-child,.dragging,.dragging-left,.dragging-right) {
		/* stylelint-disable-next-line function-url-quotes */
		background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23999' d='M1408 1088q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45zm0-384q0 26-19 45t-45 19h-896q-26 0-45-19t-19-45 19-45l448-448q19-19 45-19t45 19l448 448q19 19 19 45z'/%3E%3C/svg%3E");
		background-position: center right 10px;
		background-repeat: no-repeat;
	}
	&.arrow-up:not(.dragging,.dragging-left,.dragging-right) {
		/* stylelint-disable-next-line function-url-quotes */
		background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1408 1088q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z'/%3E%3C/svg%3E");
	}
	&.arrow-down:not(.dragging,.dragging-left,.dragging-right) {
		/* stylelint-disable-next-line function-url-quotes */
		background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1408 704q0 26-19 45t-45 19h-896q-26 0-45-19t-19-45 19-45l448-448q19-19 45-19t45 19l448 448q19 19 19 45z'/%3E%3C/svg%3E");
	}
}

/* Override default opacity, to not have text shine through when the header row/column is fixed to the top/left of the screen. */
.jexcel > thead > tr > td.dragging,
.jexcel > tbody > tr.dragging > td {
	background-color: #ffffff;
	opacity: 1;
}

.jexcel > tbody > tr > td {
	vertical-align: top;
	word-break: break-word;
	padding: 0;

	&:first-child {
		padding: 4px;
	}

	/* Show all lines of text in an edited cell. */
	&.editing {
		--table-editor-line-clamp-editing: 0;
	}

	> div {
		display: -webkit-box;
		-webkit-line-clamp: var(--table-editor-line-clamp-editing, var(--table-editor-line-clamp));
		-webkit-box-orient: vertical;
		overflow: hidden;
		padding: 4px;
	}
}

/* Fixed header. */
.admin-bar .jexcel > thead > tr > td {
	@media screen and (min-width: 601px) {
		top: calc(var(--wp-admin--admin-bar--height) + 59px); /* Offset of 61px for the Header Bar and 2px to remove top and bottom border. */
	}
	@media screen and (min-width: 783px) {
		top: calc(var(--wp-admin--admin-bar--height) + 52px); /* Offset of 54px for the Header Bar and 2px to remove top and bottom border. */
	}
}

/* Fixed left column, taking into account the width of the admin bar. */
.jexcel > tbody > tr > .jexcel_row {
	body & {
		position: sticky;
		z-index: 21; /* Prevent drag corner from floating above fixed left column. */
		left: 160px;
	}
	body.folded & {
		left: 36px;
	}
	body.auto-fold & {
		@media only screen and (max-width: 960px) {
			left: 36px;
		}
		@media screen and (max-width: 782px) {
			left: 0;
		}
	}
}

.jexcel tbody tr:nth-child(even) td:not(.jexcel_row) {
	background-color: #f9f9f9;
}

.jexcel_container .jexcel tbody tr td.highlight {
	background-color: rgba(0, 94, 255, 0.05);
}

.jexcel_container .jexcel tbody tr.head-row td:not(.jexcel_row):not(.column-hidden),
.jexcel_container .jexcel tbody tr.foot-row td:not(.jexcel_row):not(.column-hidden) {
	background-color: #d9edf7;
}

.jexcel_container .jexcel tbody tr.row-hidden td:not(.jexcel_row),
.jexcel_container .jexcel tbody tr td.column-hidden {
	background-color: rgba(255, 224, 224, 0.7);
}

.jexcel > tbody > tr > .highlight {
	&-top {
		border-top: 1px solid rgb(82, 146, 247);
	}
	&-left {
		border-left: 1px solid rgb(82, 146, 247);
	}
	&-right {
		border-right: 1px solid rgb(82, 146, 247);
	}
	&-bottom {
		border-bottom: 1px solid rgb(82, 146, 247);
	}
}

.jexcel_corner {
	background-color: rgb(82, 146, 247);
}

.jexcel > tbody > tr > td > textarea {
	font-size: inherit;
	box-shadow: none;
	padding: 3px !important;
	line-height: 1 !important;
}

/* Fullscreen mode. */
.admin-bar .jexcel_container.fullscreen .jexcel > thead > tr > td {
	top: 0;
}
.jexcel_container.fullscreen {
	z-index: 99999;
}

/* Context menu. */
.jcontextmenu {
	margin: 1px; /* Don't trigger actions by accident */
	z-index: 99999; /* Hover above WP Admin bar */

	> div.header {
		display: none !important;
	}
	> div a {
		color: #111111;
		font-size: 14px;
	}
	> div {
		padding: 4px 4px 4px 16px;
	}
	> .jcontextmenu-disabled,
	> .jcontextmenu-disabled a {
		color: #999999;
		cursor: default;
	}
	> div.jcontextmenu-disabled:hover {
		background: transparent;
	}
}