/* QR Code Manager Styles */

pc-qrcode-manager {
	display: block;
	width: 100%;
	padding: var(--rd-spacing-big);
	box-sizing: border-box;
}

.qrcode-manager-header {
	margin-bottom: var(--rd-spacing-xx-big);
}

.qrcode-manager-header h1 {
	font-size: var(--rd-fontsize-8);
	font-weight: var(--rd-fontweights-open-sans-1);
	margin-bottom: var(--rd-spacing-sm);
}

.qrcode-manager-description {
	font-size: var(--rd-fontsize-4);
	color: var(--rd-font-secondary);
}

.qrcode-manager-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--rd-spacing-big);
	gap: var(--rd-spacing-md);
	flex-wrap: wrap;
}

.qrcode-manager-search {
	flex: 1;
	max-width: 300px;
}

.qrcode-manager-search input {
	width: 100%;
}

.qrcode-manager-loading,
.qrcode-manager-empty {
	text-align: center;
	padding: var(--rd-spacing-xx-big);
	color: var(--rd-font-secondary);
	font-size: var(--rd-fontsize-5);
}

.qrcode-manager-table-wrap {
	overflow-x: auto;
	background-color: var(--rd-font-light);
	border-radius: var(--rd-borderradius-border-md);
	box-shadow: 0 0 1px 0 #3f3f4480, 0 1px 3px 0 #3f3f4426;
	width: 100%;
}

.qrcode-manager-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--rd-fontsize-4);
}

.qrcode-manager-table thead {
	background-color: var(--rd-list-default-dark);
}

.qrcode-manager-table th {
	padding: var(--rd-spacing-md);
	text-align: left;
	font-weight: var(--rd-fontweights-open-sans-1);
	white-space: nowrap;
}

.qrcode-manager-table td {
	padding: var(--rd-spacing-md);
	border-top: 1px solid var(--rd-border-mid);
	vertical-align: top;
}

.qrcode-row:hover {
	background-color: var(--rd-list-hover);
}

.qrcode-name {
	font-weight: var(--rd-fontweights-open-sans-1);
}

.qrcode-manager-table th:first-child,
.qrcode-manager-table td:first-child {
	width: 100%;
}

.qrcode-description {
	font-size: var(--rd-fontsize-3);
	color: var(--rd-font-secondary);
	margin-top: var(--rd-spacing-x-sm);
}

.qrcode-uuid {
	font-family: monospace;
	font-size: var(--rd-fontsize-3);
	background-color: var(--rd-list-default-dark);
	padding: 2px 6px;
	border-radius: 3px;
	word-break: break-all;
}

.qrcode-target-url {
	color: var(--rd-primary-active);
	text-decoration: none;
	word-break: break-all;
	max-width: 250px;
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.qrcode-target-url:hover {
	text-decoration: underline;
}

.qrcode-clicks {
	text-align: right;
	font-weight: var(--rd-fontweights-open-sans-1);
}

.qrcode-last-clicked,
.qrcode-created {
	white-space: nowrap;
	font-size: var(--rd-fontsize-3);
	color: var(--rd-font-secondary);
}

.qrcode-utm {
	font-size: var(--rd-fontsize-3);
	white-space: nowrap;
}

.qrcode-utm-empty {
	color: var(--rd-font-tertiary);
	font-style: italic;
}

.qrcode-actions {
	white-space: nowrap;
}

.qrcode-actions button {
	margin-right: var(--rd-spacing-x-sm);
}

.qrcode-actions button:last-child {
	margin-right: 0;
}

.qrcode-actions .iconbutton.qr.active {
	background-color: var(--rd-primary-active);
	color: var(--rd-font-light);
}

.qrcode-preview-row td {
	background-color: var(--rd-list-default-dark);
	padding: var(--rd-spacing-big);
}

.qrcode-preview {
	display: flex;
	align-items: center;
	gap: var(--rd-spacing-big);
	justify-content: center;
}

.qrcode-preview img {
	width: 200px;
	height: 200px;
	border: 1px solid var(--rd-border-mid);
	border-radius: var(--rd-borderradius-border-sm);
}

.qrcode-preview-url {
	font-size: var(--rd-fontsize-4);
}

.qrcode-preview-url a {
	color: var(--rd-primary-active);
	text-decoration: none;
}

.qrcode-preview-url a:hover {
	text-decoration: underline;
}

.qrcode-manager-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--rd-spacing-md);
	padding: var(--rd-spacing-big);
}

.qrcode-manager-pagination span {
	font-size: var(--rd-fontsize-4);
	color: var(--rd-font-secondary);
}

/* Form styles */
.qrcode-form {
	min-width: 400px;
}

.qrcode-form-field {
	margin-bottom: var(--rd-spacing-md);
}

.qrcode-form-field label {
	display: block;
	font-weight: var(--rd-fontweights-open-sans-1);
	margin-bottom: var(--rd-spacing-x-sm);
	font-size: var(--rd-fontsize-4);
}

.qrcode-form-field input,
.qrcode-form-field textarea {
	width: 100%;
	box-sizing: border-box;
}

/* Icon button for QR */
.iconbutton.qr {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='3' height='3'/%3E%3Crect x='18' y='14' width='3' height='3'/%3E%3Crect x='14' y='18' width='3' height='3'/%3E%3Crect x='18' y='18' width='3' height='3'/%3E%3C/svg%3E");
	background-size: 16px 16px;
	background-repeat: no-repeat;
	background-position: center;
}

.iconbutton.copy {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
	background-size: 16px 16px;
	background-repeat: no-repeat;
	background-position: center;
}

.iconbutton.download {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7,10 12,15 17,10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
	background-size: 16px 16px;
	background-repeat: no-repeat;
	background-position: center;
}

/* UTM Builder */
.qrcode-utm-toggle {
	display: block;
	margin-top: var(--rd-spacing-sm);
	padding: var(--rd-spacing-x-sm) var(--rd-spacing-sm);
	background: none;
	border: 1px dashed var(--rd-border-mid);
	border-radius: var(--rd-borderradius-border-sm);
	color: var(--rd-primary-active);
	font-size: var(--rd-fontsize-3);
	cursor: pointer;
	width: 100%;
	text-align: left;
	transition: background-color 0.2s, border-color 0.2s;
}

.qrcode-utm-toggle:hover {
	background-color: var(--rd-list-hover);
	border-color: var(--rd-primary-active);
}

.qrcode-utm-builder {
	margin-top: var(--rd-spacing-md);
	padding: var(--rd-spacing-md);
	background-color: var(--rd-list-default-dark);
	border-radius: var(--rd-borderradius-border-sm);
	border: 1px solid var(--rd-border-mid);
}

.qrcode-utm-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--rd-spacing-md);
}

.qrcode-utm-grid .qrcode-form-field {
	margin-bottom: 0;
}

.qrcode-utm-grid .qrcode-form-field small {
	display: block;
	margin-top: var(--rd-spacing-x-sm);
	font-size: var(--rd-fontsize-2);
	color: var(--rd-font-secondary);
}