/**
 * Styles for the React stock manager. Bundled into build/index.css.
 */

.rtsm-app {
	max-width: 1200px;

	.rtsm-header {
		margin: 0 0 8px;

		h1 {
			margin: 0;
			padding: 0;
			font-size: 23px;
			font-weight: 400;
			line-height: 1.3;
		}

		.rtsm-subtitle {
			margin: 4px 0 0;
			color: #646970;
			font-size: 13px;
		}
	}

	// Tabs ------------------------------------------------------------------
	.rtsm-tabs {
		> .components-tab-panel__tabs {
			border-bottom: 1px solid #c3c4c7;
			margin-bottom: 12px;
		}
	}

	// Toolbar ---------------------------------------------------------------
	.rtsm-toolbar {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		gap: 16px;
		padding: 16px;
		margin: 12px 0;
		background: #fff;
		border: 1px solid #c3c4c7;
		border-radius: 4px;

		.rtsm-toolbar__search {
			flex: 1 1 280px;
			min-width: 220px;
		}

		.rtsm-toolbar__filters {
			display: flex;
			flex-wrap: wrap;
			align-items: flex-end;
			gap: 12px;
		}
	}

	.rtsm-filter-badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 18px;
		height: 18px;
		margin-left: 6px;
		padding: 0 5px;
		background: #2271b1;
		color: #fff;
		border-radius: 9px;
		font-size: 11px;
		line-height: 18px;
	}

	// Advanced filters ------------------------------------------------------
	.rtsm-filters {
		padding: 16px;
		margin: -4px 0 12px;
		background: #f6f7f7;
		border: 1px solid #c3c4c7;
		border-radius: 4px;

		.rtsm-filters__row {
			display: flex;
			flex-wrap: wrap;
			gap: 16px;
			align-items: flex-end;

			& + .rtsm-filters__row {
				margin-top: 14px;
			}

			.components-base-control {
				min-width: 170px;
			}
		}

		.rtsm-filters__toggles {
			align-items: center;
		}
	}

	// Action bar ------------------------------------------------------------
	.rtsm-actions {
		margin: 12px 0;

		.rtsm-bulk,
		.rtsm-io {
			display: flex;
			align-items: center;
			gap: 8px;
		}

		.rtsm-dirty-count {
			color: #b26200;
			font-weight: 600;
			font-size: 12px;
		}
	}

	// Number inputs ---------------------------------------------------------
	.rtsm-stock-input {
		width: 90px;
		padding: 4px 8px;
		border: 1px solid #8c8f94;
		border-radius: 4px;
		text-align: right;
	}

	// Tables ----------------------------------------------------------------
	.rtsm-table-wrap {
		position: relative;
		min-height: 120px;

		.rtsm-table-overlay {
			position: absolute;
			inset: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba( 255, 255, 255, 0.6 );
			z-index: 2;
		}
	}

	.rtsm-table {
		.rtsm-col-check {
			width: 36px;
			text-align: center;
		}

		.rtsm-col-thumb {
			width: 52px;

			img {
				display: block;
				border-radius: 4px;
				object-fit: cover;
			}

			.rtsm-thumb-placeholder {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 40px;
				height: 40px;
				background: #f0f0f1;
				border-radius: 4px;
				color: #a7aaad;
			}
		}

		.rtsm-col-sku,
		.rtsm-col-type,
		.rtsm-col-status {
			width: 130px;
		}

		.rtsm-col-stock {
			width: 130px;
		}

		.rtsm-col-name {
			.rtsm-meta {
				display: flex;
				align-items: center;
				gap: 8px;
				margin-top: 2px;
			}

			.rtsm-price {
				color: #646970;
				font-size: 12px;
			}
		}

		.rtsm-row.is-dirty {
			background: #fcf6e6 !important;

			.rtsm-stock-input {
				border-color: #dba617;
				box-shadow: 0 0 0 1px #dba617;
			}
		}

		.rtsm-row.is-variation {
			background: #fbfbfc;

			.rtsm-col-name {
				padding-left: 28px;
				position: relative;

				&::before {
					content: '↳';
					position: absolute;
					left: 10px;
					color: #a7aaad;
				}

				strong {
					font-weight: 400;
				}
			}
		}

		.rtsm-expand {
			color: #2271b1;
		}

		.rtsm-variation-hint {
			background: none;
			border: 0;
			padding: 0;
			color: #2271b1;
			cursor: pointer;
			font-size: 12px;
			text-decoration: underline;
		}
	}

	.rtsm-muted {
		color: #a7aaad;
	}

	.rtsm-type-badge {
		display: inline-block;
		padding: 1px 8px;
		background: #f0f0f1;
		border-radius: 10px;
		font-size: 11px;
		text-transform: capitalize;
		color: #50575e;
	}

	.rtsm-badge--low {
		display: inline-block;
		padding: 0 7px;
		background: #fcf0e8;
		color: #b26200;
		border: 1px solid #f0c9a8;
		border-radius: 9px;
		font-size: 11px;
		font-weight: 600;
		text-transform: uppercase;
	}

	.rtsm-status {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		font-size: 12px;
		font-weight: 600;
		text-transform: capitalize;

		&::before {
			content: '';
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background: currentColor;
		}

		&--instock {
			color: #007017;
		}

		&--outofstock {
			color: #b32d2e;
		}

		&--onbackorder {
			color: #b26200;
		}
	}

	.rtsm-empty {
		padding: 32px 12px;
		text-align: center;
		color: #646970;
	}

	// Pagination ------------------------------------------------------------
	.rtsm-pagination {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 12px;
		margin: 14px 0;

		.rtsm-count {
			color: #646970;
			font-size: 13px;
		}

		.rtsm-pagination__buttons {
			display: flex;
			align-items: center;
			gap: 6px;

			.rtsm-page-indicator {
				padding: 0 8px;
				font-size: 13px;
			}
		}
	}

	// Activity log ----------------------------------------------------------
	.rtsm-log-filters {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		gap: 16px;
		padding: 16px;
		margin: 12px 0;
		background: #fff;
		border: 1px solid #c3c4c7;
		border-radius: 4px;

		.rtsm-log-filters__search {
			flex: 1 1 240px;
			min-width: 200px;
		}

		.rtsm-date {
			display: flex;
			flex-direction: column;
			gap: 4px;
			font-size: 11px;
			text-transform: uppercase;
			color: #646970;

			input {
				padding: 4px 8px;
				border: 1px solid #8c8f94;
				border-radius: 4px;
			}
		}
	}

	.rtsm-log-table {
		.rtsm-log-date {
			white-space: nowrap;
			color: #646970;
			font-size: 12px;
		}

		.rtsm-change {
			font-variant-numeric: tabular-nums;

			.rtsm-arrow {
				color: #a7aaad;
			}
		}
	}

	.rtsm-source {
		display: inline-block;
		padding: 1px 8px;
		border-radius: 10px;
		font-size: 11px;
		text-transform: capitalize;

		&--manual {
			background: #eef3f8;
			color: #2271b1;
		}

		&--import {
			background: #eaf6ec;
			color: #007017;
		}
	}
}

// Import modal (rendered in a portal, outside .rtsm-app) --------------------
.rtsm-import-modal {
	.rtsm-import-hint {
		margin-top: 0;
		color: #646970;
	}

	input[type='file'] {
		display: block;
		margin: 12px 0;
	}

	.rtsm-import-count {
		font-weight: 600;
	}

	.rtsm-import-detail {
		margin-top: 6px;
		font-size: 12px;
	}

	.rtsm-modal-actions {
		display: flex;
		justify-content: flex-end;
		gap: 10px;
		margin-top: 20px;
	}
}