/**
 * Repair Order List widget styles.
 *
 * Frontend styles for the Elementor Repair Order List widget.
 */

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700&display=swap");
@import url("design-tokens.css");
@import url("components.css");
@import url("table.css");
@import url("rt-button-styles.css");
@import url("dialog.css");

.rt-repair-order-list {
	box-sizing: border-box;
	color: var(--rt-color-text);
	font-family: var(--rt-font-family);
	font-size: var(--rt-font-size-base);
	line-height: var(--rt-line-height-base);
}

.rt-repair-order-list *,
.rt-repair-order-list *::before,
.rt-repair-order-list *::after {
	box-sizing: inherit;
}

.rt-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Toolbar
   -------------------------------------------------------------------------- */

.rt-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--rt-space-4);
	padding: var(--rt-space-4) var(--rt-space-5);
	border: 1px solid var(--rt-color-border);
	border-radius: var(--rt-radius-lg);
	background: var(--rt-color-surface);
	box-shadow: var(--rt-shadow-xs);
}

.rt-toolbar-left,
.rt-toolbar-right {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rt-space-3);
}

.rt-toolbar-left {
	flex: 1 1 auto;
	min-width: 0;
}

.rt-toolbar-right {
	flex: 1 1 auto;
	justify-content: flex-end;
}

.rt-toolbar__title {
	margin: 0;
	color: var(--rt-color-text);
	font-size: var(--rt-font-size-xl);
	font-weight: var(--rt-font-weight-semibold);
	line-height: var(--rt-line-height-tight);
}

.rt-toolbar__record-count {
	display: inline-flex;
	align-items: center;
	min-height: 2rem;
	padding: 0 var(--rt-space-3);
	border: 1px solid var(--rt-color-border);
	border-radius: var(--rt-radius-full);
	background: var(--rt-color-surface-muted);
	color: var(--rt-color-text-muted);
	font-size: var(--rt-font-size-sm);
	font-weight: var(--rt-font-weight-medium);
	white-space: nowrap;
}

.rt-export-menu {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rt-space-2);
}

.rt-export-menu__label {
	color: var(--rt-color-text-muted);
	font-size: var(--rt-font-size-sm);
	font-weight: var(--rt-font-weight-medium);
}

/* Search
   -------------------------------------------------------------------------- */

.rt-search {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rt-space-2);
}

.rt-search__select,
.rt-search__input {
	min-height: var(--rt-input-height-md);
	padding: var(--rt-space-2) var(--rt-space-3);
	border: 1px solid var(--rt-color-border-strong);
	border-radius: var(--rt-radius-md);
	background: var(--rt-color-surface);
	color: var(--rt-color-text);
	font-family: inherit;
	font-size: var(--rt-font-size-sm);
	line-height: var(--rt-line-height-base);
	transition:
		border-color var(--rt-transition-base),
		box-shadow var(--rt-transition-base);
}

.rt-search__select {
	min-width: 9rem;
}

.rt-search__input {
	min-width: 12rem;
}

.rt-search__select:hover,
.rt-search__input:hover {
	border-color: var(--rt-color-gray-400);
}

.rt-search__select:focus,
.rt-search__input:focus {
	border-color: var(--rt-color-primary);
	outline: none;
	box-shadow: var(--rt-focus-ring);
}

.rt-search__input::placeholder {
	color: var(--rt-color-gray-400);
}

/* Date filter
   -------------------------------------------------------------------------- */

.rt-date-filter {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rt-space-2);
}

.rt-date-filter__label {
	color: var(--rt-color-text-muted);
	font-size: var(--rt-font-size-sm);
	font-weight: var(--rt-font-weight-medium);
	white-space: nowrap;
}

.rt-date-filter__input {
	min-height: var(--rt-input-height-md);
	padding: var(--rt-space-2) var(--rt-space-3);
	border: 1px solid var(--rt-color-border-strong);
	border-radius: var(--rt-radius-md);
	background: var(--rt-color-surface);
	color: var(--rt-color-text);
	font-family: inherit;
	font-size: var(--rt-font-size-sm);
	line-height: var(--rt-line-height-base);
	transition:
		border-color var(--rt-transition-base),
		box-shadow var(--rt-transition-base);
}

.rt-date-filter__input:hover {
	border-color: var(--rt-color-gray-400);
}

.rt-date-filter__input:focus {
	border-color: var(--rt-color-primary);
	outline: none;
	box-shadow: var(--rt-focus-ring);
}

.rt-date-filter__separator {
	color: var(--rt-color-text-muted);
	font-size: var(--rt-font-size-sm);
}

/* Responsive
   -------------------------------------------------------------------------- */

.rt-order-preview-wrap {
	margin-top: var(--rt-space-5);
}

/* Table
   -------------------------------------------------------------------------- */

.rt-repair-order-list {
	--rt-table-width: max-content;
	--rt-table-min-width: 100%;
	--rt-table-max-width: none;
	--rt-table-header-bg: var(--rt-color-surface-muted);
	--rt-table-header-color: var(--rt-color-text);
	--rt-table-header-min-height: auto;
	--rt-table-body-color: var(--rt-color-text);
	--rt-table-body-min-height: auto;
	--rt-table-body-vertical-align: middle;
	--rt-table-body-border-color: var(--rt-color-divider);
	--rt-table-body-border-width: 1px;
	--rt-table-row-odd-bg: transparent;
	--rt-table-row-even-bg: transparent;
	--rt-table-row-hover-bg: var(--rt-color-surface-hover);
	--rt-table-row-hover-color: inherit;
	--rt-table-row-transition-duration: 0.2s;
}

.rt-repair-order-list .rt-table-wrapper {
	overflow-x: auto;
	overflow-y: hidden;
	width: 100%;
}

.rt-repair-order-list .rt-table {
	width: var(--rt-table-width);
	min-width: var(--rt-table-min-width);
	max-width: var(--rt-table-max-width);
	table-layout: fixed;
}

.rt-repair-order-list.rt-table-width--full .rt-table {
	--rt-table-width: 100%;
	--rt-table-min-width: 100%;
}

.rt-repair-order-list.rt-table-width--auto .rt-table {
	--rt-table-width: max-content;
}

.rt-repair-order-list .rt-table thead th {
	background-color: var(--rt-table-header-bg);
	color: var(--rt-table-header-color);
	min-height: var(--rt-table-header-min-height);
	font-size: var(--rt-font-size-xs);
	font-weight: var(--rt-font-weight-semibold);
	line-height: var(--rt-line-height-base);
	text-align: left;
	text-transform: uppercase;
	letter-spacing: var(--rt-letter-spacing-wide);
}

.rt-repair-order-list .rt-table tbody td {
	color: var(--rt-table-body-color);
	min-height: var(--rt-table-body-min-height);
	vertical-align: var(--rt-table-body-vertical-align);
	border-bottom: var(--rt-table-body-border-width) solid var(--rt-table-body-border-color);
	transition:
		background-color var(--rt-table-row-transition-duration),
		color var(--rt-table-row-transition-duration);
}

.rt-repair-order-list .rt-table tbody tr:nth-child(odd) td {
	background-color: var(--rt-table-row-odd-bg);
}

.rt-repair-order-list .rt-table tbody tr:nth-child(even) td {
	background-color: var(--rt-table-row-even-bg);
}

.rt-repair-order-list .rt-table tbody tr:hover td {
	background-color: var(--rt-table-row-hover-bg);
	color: var(--rt-table-row-hover-color);
}

.rt-repair-order-list .rt-table tbody tr:last-child td {
	border-bottom: 0;
}

.rt-repair-order-list .rt-table thead th,
.rt-repair-order-list .rt-table tbody td {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rt-repair-order-list .rt-table__cell-text {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}

/* Repair status badges
   -------------------------------------------------------------------------- */

.rt-repair-order-list .rt-badge:not([class*="rt-badge--"]) {
	color: var(--rt-color-gray-700);
	background: var(--rt-color-gray-100);
	border: 1px solid var(--rt-color-border);
}

.rt-badge--pending {
	color: var(--rt-color-warning);
	background: var(--rt-color-warning-soft);
	border: 1px solid var(--rt-color-warning-border);
}

.rt-badge--processing {
	color: var(--rt-color-primary);
	background: var(--rt-color-primary-soft);
	border: 1px solid var(--rt-color-primary-border);
}

.rt-badge--completed {
	color: var(--rt-color-success);
	background: var(--rt-color-success-soft);
	border: 1px solid var(--rt-color-success-border);
}

.rt-badge--cancelled {
	color: var(--rt-color-error);
	background: var(--rt-color-error-soft);
	border: 1px solid var(--rt-color-error-border);
}

.rt-toast {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 99999;
	max-width: min(24rem, calc(100vw - 2rem));
	padding: 0.875rem 1rem;
	border-radius: var(--rt-radius-md);
	background: var(--rt-color-text);
	color: var(--rt-color-text-inverse);
	box-shadow: var(--rt-shadow-md);
	opacity: 0;
	transform: translateY(0.75rem);
	transition:
		opacity 0.2s ease,
		transform 0.2s ease;
	pointer-events: none;
}

.rt-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.rt-toast--success {
	background: var(--rt-color-success);
}

.rt-toast--error {
	background: var(--rt-color-error);
}

@media (max-width: 782px) {
	.rt-toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.rt-toolbar-left,
	.rt-toolbar-right {
		width: 100%;
		justify-content: flex-start;
	}

	.rt-search,
	.rt-date-filter {
		width: 100%;
	}

	.rt-search__select,
	.rt-search__input,
	.rt-date-filter__input {
		width: 100%;
		min-width: 0;
	}

	.rt-repair-order-list .rt-table-wrapper {
		max-width: 100%;
		-webkit-overflow-scrolling: touch;
	}

	.rt-repair-order-list .rt-table {
		max-width: none;
	}
}