/* File: \media\com_easyenroll\css\device.css */

/* Device page layout — full width, no max-width */
.device-page-wrap {
	background: #f5f5f5;
	box-sizing: border-box;
	width: 100%;
	border-radius: 8px;
	border: 1px solid #c1cdd9;
}

/* Two-column grid for sections */
.device-grid {
	display: grid;
	gap: 0 30px;
	grid-template-columns: 1fr 1fr;
	width: 100%
}

.device-grid-item {
	min-width: 0
}

/* Full-width items span both columns */
.device-grid-full {
	grid-column: 1 / -1;
	min-width: 0
}

/* Title row */

.device-copy-all-btn {
	background: transparent;
	border: 1px solid #d8e2ec;
	border-radius: 3px;
	color: #5d7d9d;
	cursor: pointer;
	flex-shrink: 0;
	font-family: inherit;
	padding: 3px 12px;
	transition: all 0.15s ease
}

.device-copy-all-btn:hover {
	background: #e2eaf3;
	border-color: #adc5de
}

/* Section header */
.device-section-header {
	border-bottom: 1px solid #c1cdd9;
	box-sizing: border-box;
	font-weight: 600;
	margin: 0;
	padding: 8px 0 5px 0
}

/* Section body */
.device-section-body {
	box-sizing: border-box;
	padding: 2px 0 10px 0
}

/* Field rows */
.device-field-row {
	border-bottom: 1px solid #c1cdd9;
	display: flex;
	padding: 3px 0
}

.device-field-row:last-child {border-bottom: 0}

.device-field-label {
	flex: 0 0 40%;
	margin: 0;
	min-width: 100px
}

.device-field-value {
	align-items: center;
	display: flex;
	flex: 0 0 60%;
	gap: 6px;
	word-break: break-word
}

.device-field-value .device-value-text {
	flex: 1;
	margin: 0;
	min-width: 0
}

/* Detected device inline (inside User Agent row) */
.device-detected-inline {
	align-items: center;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 2px;
	padding: 2px 0
}

/* Numbering */
.device-section-nr,
.device-row-nr {
	display: inline-block;
	min-width: 24px
}

/* Copy button — always visible */
.device-copy-btn {
	background: transparent;
	border: 1px solid #c1cdd9;
	border-radius: 3px;
	color: #5d7d9d;
	cursor: pointer;
	flex-shrink: 0;
	font-family: inherit;
	font-size: 0.6rem;
	padding: 1px 6px;
	transition: all 0.15s ease
}

.device-copy-btn:hover {
	background: #e2eaf3;
	border-color: #adc5de
}

/* IP row */
.device-ip-row {
	align-items: center;
	border-bottom: 1px solid #c1cdd9;
	display: flex;
	padding: 6px 0 5px 0
}

.device-ip-row p {margin: 0}

.device-ip-copy-btn {
	background: transparent;
	border: 1px solid #d8e2ec;
	border-radius: 3px;
	color: #5d7d9d;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.6rem;
	margin-left: 8px;
	padding: 1px 6px;
	transition: all 0.15s ease
}

.device-ip-copy-btn:hover {
	background: #e2eaf3;
	border-color: #adc5de
}

/* Responsive — single column on mobile */
@media (max-width: 768px) {
	.device-grid {grid-template-columns: 1fr}
	.device-grid-full {grid-column: 1}
}

@media (max-width: 600px) {
	.device-field-row {flex-direction: column}
	.device-field-label {
		flex: none;
		padding-bottom: 2px
	}
	.device-field-value {flex: none}
}