@import url( 'https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700;800&display=swap' );

.incman-contractor-form-wrap,
.incman-single-view,
.incman-manager-form-wrap {
	--incman-primary: #0e5273;
	--incman-primary-dark: #0a4f70;
	--incman-accent: #0e7692;
	--incman-ink: #2b2f31;
	--incman-paper: #f6f7f7;
	--incman-line: #e2e5e6;
	--incman-muted: #6b7075;
	--incman-amber: #c98a2c;
	--incman-green: #3f7d5c;
	--incman-red: #b23a2e;

	max-width: 520px;
	margin: 0 auto;
	padding: 20px 16px 96px;
	box-sizing: border-box;
	font-family: 'Rubik', 'Segoe UI', Tahoma, sans-serif;
	color: var( --incman-ink );
	font-size: 16px;
	line-height: 1.5;
}

.incman-manager-form-wrap {
	/* Wide enough that the 7-column report row (~980px incl. its own
	   padding) always fits inside the ticket card's padding without
	   .incman-report-list needing to fall back to its horizontal scroll. */
	max-width: 1100px;
	padding-bottom: 32px;
}

.incman-list-toolbar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 16px;
}

.incman-new-incident-button {
	width: auto;
	padding: 12px 22px;
}

/* ---------- Create-incident modal ---------- */

.incman-modal {
	border: none;
	border-radius: 10px;
	padding: 0;
	width: 92vw;
	max-width: 480px;
	max-height: 88vh;
	overflow: hidden;
}

.incman-modal[open] {
	display: flex;
	flex-direction: column;
}

.incman-modal::backdrop {
	background: rgba( 43, 47, 49, 0.55 );
}

.incman-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px;
	border-bottom: 1px solid var( --incman-line );
	flex: 0 0 auto;
}

.incman-modal-close {
	border: none;
	background: none;
	font-size: 22px;
	line-height: 1;
	color: var( --incman-muted );
	cursor: pointer;
	padding: 4px 8px;
}

.incman-modal-body {
	padding: 20px;
	overflow-y: auto;
}

.incman-contractor-form-wrap *,
.incman-single-view *,
.incman-manager-form-wrap * {
	box-sizing: border-box;
}

/* Plain inline links (not .incman-button) get the accent color, in every
   state. Colors are !important and prefixed with the wrapper class: the
   host theme/page-builder (Elementor's own a:hover, etc.) can otherwise
   out-specificity or out-order a plain class rule, which is what was
   turning our links/buttons pink on hover - that pink was never ours, it
   was the theme's default link-hover color bleeding through. */

.incman-contractor-form-wrap a:link,
.incman-contractor-form-wrap a:visited,
.incman-contractor-form-wrap a:hover,
.incman-contractor-form-wrap a:focus,
.incman-single-view a:link,
.incman-single-view a:visited,
.incman-single-view a:hover,
.incman-single-view a:focus,
.incman-manager-form-wrap a:link,
.incman-manager-form-wrap a:visited,
.incman-manager-form-wrap a:hover,
.incman-manager-form-wrap a:focus {
	color: var( --incman-accent ) !important;
}

.incman-contractor-form-wrap .incman-button:link,
.incman-contractor-form-wrap .incman-button:visited,
.incman-contractor-form-wrap .incman-button:hover,
.incman-contractor-form-wrap .incman-button:focus,
.incman-contractor-form-wrap .incman-button:active,
.incman-single-view .incman-button:link,
.incman-single-view .incman-button:visited,
.incman-single-view .incman-button:hover,
.incman-single-view .incman-button:focus,
.incman-single-view .incman-button:active,
.incman-manager-form-wrap .incman-button:link,
.incman-manager-form-wrap .incman-button:visited,
.incman-manager-form-wrap .incman-button:hover,
.incman-manager-form-wrap .incman-button:focus,
.incman-manager-form-wrap .incman-button:active {
	color: var( --incman-ink ) !important;
	background: #fff !important;
	border-color: var( --incman-line ) !important;
	text-decoration: none !important;
}

.incman-contractor-form-wrap .incman-button-primary:link,
.incman-contractor-form-wrap .incman-button-primary:visited,
.incman-contractor-form-wrap .incman-button-primary:hover,
.incman-contractor-form-wrap .incman-button-primary:focus,
.incman-contractor-form-wrap .incman-button-primary:active,
.incman-single-view .incman-button-primary:link,
.incman-single-view .incman-button-primary:visited,
.incman-single-view .incman-button-primary:hover,
.incman-single-view .incman-button-primary:focus,
.incman-single-view .incman-button-primary:active,
.incman-manager-form-wrap .incman-button-primary:link,
.incman-manager-form-wrap .incman-button-primary:visited,
.incman-manager-form-wrap .incman-button-primary:hover,
.incman-manager-form-wrap .incman-button-primary:focus,
.incman-manager-form-wrap .incman-button-primary:active {
	color: #fff !important;
	background: var( --incman-primary ) !important;
	border-color: var( --incman-primary ) !important;
}

.incman-contractor-form-wrap .incman-button-whatsapp:link,
.incman-contractor-form-wrap .incman-button-whatsapp:visited,
.incman-contractor-form-wrap .incman-button-whatsapp:hover,
.incman-contractor-form-wrap .incman-button-whatsapp:focus,
.incman-contractor-form-wrap .incman-button-whatsapp:active,
.incman-manager-form-wrap .incman-button-whatsapp:link,
.incman-manager-form-wrap .incman-button-whatsapp:visited,
.incman-manager-form-wrap .incman-button-whatsapp:hover,
.incman-manager-form-wrap .incman-button-whatsapp:focus,
.incman-manager-form-wrap .incman-button-whatsapp:active {
	color: #06341c !important;
	background: #25d366 !important;
	border-color: #25d366 !important;
}

.incman-single-view .incman-button-danger:link,
.incman-single-view .incman-button-danger:visited,
.incman-single-view .incman-button-danger:hover,
.incman-single-view .incman-button-danger:focus,
.incman-single-view .incman-button-danger:active {
	color: #fff !important;
	background: var( --incman-red ) !important;
	border-color: var( --incman-red ) !important;
}

.incman-manager-form-wrap .incman-report-number:link,
.incman-manager-form-wrap .incman-report-number:visited,
.incman-manager-form-wrap .incman-report-number:hover,
.incman-manager-form-wrap .incman-report-number:focus {
	color: var( --incman-primary ) !important;
}

.incman-manager-form-wrap .incman-icon-button,
.incman-manager-form-wrap .incman-icon-button:hover,
.incman-manager-form-wrap .incman-icon-button:focus,
.incman-manager-form-wrap .incman-icon-button:active {
	background: #fff !important;
	color: var( --incman-muted ) !important;
	border-color: var( --incman-line ) !important;
}

.incman-manager-form-wrap .incman-icon-button-whatsapp:link,
.incman-manager-form-wrap .incman-icon-button-whatsapp:visited,
.incman-manager-form-wrap .incman-icon-button-whatsapp:hover,
.incman-manager-form-wrap .incman-icon-button-whatsapp:focus,
.incman-manager-form-wrap .incman-icon-button-whatsapp:active {
	background: #e9f9ef !important;
	color: #1da851 !important;
	border-color: #bdeccd !important;
}

/* Every other raw <button> in the plugin (outside the .incman-button
   system, which is already hardened above) gets the same treatment: force
   its background/color to stay put on hover/focus/active, since the host
   theme's own button/image hover styles (its "pink" was never ours) can
   otherwise bleed through with higher specificity or later source order. */

.incman-single-view .incman-gallery-item,
.incman-single-view .incman-gallery-item:hover,
.incman-single-view .incman-gallery-item:focus,
.incman-single-view .incman-gallery-item:active {
	background: none !important;
	border: none !important;
}

.incman-contractor-form-wrap .incman-thumb-remove,
.incman-contractor-form-wrap .incman-thumb-remove:hover,
.incman-contractor-form-wrap .incman-thumb-remove:focus,
.incman-contractor-form-wrap .incman-thumb-remove:active {
	background: rgba( 43, 47, 49, 0.75 ) !important;
	color: #fff !important;
	border: none !important;
}

.incman-manager-form-wrap .incman-modal-close,
.incman-manager-form-wrap .incman-modal-close:hover,
.incman-manager-form-wrap .incman-modal-close:focus,
.incman-manager-form-wrap .incman-modal-close:active {
	background: none !important;
	color: var( --incman-muted ) !important;
	border: none !important;
}

.incman-single-view .incman-image-modal-close,
.incman-single-view .incman-image-modal-close:hover,
.incman-single-view .incman-image-modal-close:focus,
.incman-single-view .incman-image-modal-close:active {
	background: rgba( 20, 22, 23, 0.6 ) !important;
	color: #fff !important;
	border: none !important;
}

/* ---------- Ticket shell ---------- */

.incman-ticket {
	position: relative;
	background: #fff;
	border: 1px solid var( --incman-line );
	border-top: 3px solid var( --incman-primary );
	border-radius: 8px;
	margin-bottom: 20px;
}

.incman-ticket-body {
	padding: 20px 22px;
}

.incman-ticket-title {
	font-size: 18px;
	font-weight: 700;
	margin: 0;
	color: var( --incman-primary );
}

/* ---------- Header row: hero number + status pill ---------- */

.incman-ticket-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.incman-hero-number {
	margin: 0;
	color: var( --incman-primary );
}

.incman-hero-number small {
	display: block;
	font-size: 12.5px;
	font-weight: 500;
	color: var( --incman-muted );
	margin-bottom: 4px;
}

.incman-hero-number .incman-hero-number-value {
	display: block;
	font-size: 28px;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* ---------- Status pill ---------- */

.incman-status-badge {
	display: inline-block;
	font-weight: 700;
	font-size: 12.5px;
	padding: 6px 14px;
	border-radius: 999px;
	white-space: nowrap;
	margin-top: 2px;
}

.incman-status-pending {
	color: var( --incman-amber );
	background: rgba( 201, 138, 44, 0.12 );
}

.incman-status-report_received {
	color: var( --incman-accent );
	background: rgba( 14, 118, 146, 0.1 );
}

.incman-status-completed {
	color: var( --incman-green );
	background: rgba( 63, 125, 90, 0.12 );
}

.incman-status-cancelled {
	color: var( --incman-red );
	background: rgba( 178, 58, 46, 0.1 );
}

/* ---------- Spec-sheet rows (read-only details) ---------- */

.incman-spec {
	margin: 0;
	border-top: 1px solid var( --incman-line );
	margin-top: 18px;
}

.incman-spec-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid var( --incman-line );
}

.incman-spec-row dt {
	color: var( --incman-muted );
	font-size: 14px;
	flex: 0 0 auto;
}

.incman-spec-row dd {
	margin: 0;
	font-weight: 500;
	text-align: left;
}

.incman-spec-row dd.incman-spec-wrap {
	text-align: right;
	white-space: pre-line;
}

/* ---------- Form fields ---------- */

.incman-field {
	margin-bottom: 16px;
}

.incman-field label {
	display: block;
	font-weight: 700;
	font-size: 14px;
	margin-bottom: 6px;
}

.incman-widefat {
	width: 100%;
	padding: 12px;
	border: 1px solid var( --incman-line );
	border-radius: 6px;
	font-family: inherit;
	font-size: 16px;
	background: #fff;
	color: var( --incman-ink );
}

.incman-widefat:focus {
	outline: none;
	border-color: var( --incman-accent );
	box-shadow: 0 0 0 3px rgba( 14, 118, 146, 0.15 );
}

select.incman-widefat {
	appearance: none;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%232B2F31' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: left 14px center;
	padding-left: 36px;
}

input[type='file'].incman-widefat {
	border-style: dashed;
	padding: 18px 12px;
	text-align: center;
	color: var( --incman-muted );
}

.incman-checkbox-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	padding: 12px;
	border: 1px solid var( --incman-line );
	border-radius: 6px;
	background: #fff;
}

.incman-field .incman-checkbox-option {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 400;
	margin-bottom: 0;
}

/* ---------- Fault type manager popup ---------- */

.incman-manage-types-button {
	margin-inline-start: 8px;
}

.incman-issue-type-list {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.incman-issue-type-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.incman-issue-type-rename-form {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
}

.incman-issue-type-rename-form .incman-widefat {
	padding: 8px 12px;
}

.incman-issue-type-add-form {
	display: flex;
	gap: 8px;
	padding-top: 12px;
	border-top: 1px solid var( --incman-line );
}

/* ---------- Buttons ---------- */

.incman-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 13px 18px;
	border-radius: 6px;
	border: 1px solid var( --incman-line );
	background: #fff;
	color: var( --incman-ink );
	font-family: inherit;
	font-weight: 700;
	font-size: 15.5px;
	cursor: pointer;
	text-decoration: none;
	box-sizing: border-box;
}

.incman-button-primary {
	background: var( --incman-primary );
	border-color: var( --incman-primary );
	color: #fff;
}

.incman-button-whatsapp {
	background: #25d366;
	border-color: #25d366;
	color: #06341c;
}

.incman-button-danger {
	background: var( --incman-red );
	border-color: var( --incman-red );
	color: #fff;
}

.incman-cancel-form {
	margin-top: 18px;
}

.incman-cancel-form .incman-button {
	width: auto;
	padding: 10px 18px;
	font-size: 14px;
}

.incman-button:active {
	opacity: 0.92;
}

/* ---------- GPS box - captured automatically on load, so it's presented
   as a clear, standing status block rather than a plain form row. ---------- */

.incman-gps-box {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #eaf2f4;
	border: 1px solid rgba( 14, 118, 146, 0.25 );
	border-radius: 8px;
	padding: 14px 16px;
	margin-bottom: 20px;
}

.incman-gps-icon {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	color: var( --incman-accent );
}

.incman-gps-text {
	flex: 1 1 auto;
	min-width: 0;
}

.incman-gps-label {
	display: block;
	font-weight: 700;
	font-size: 14.5px;
	color: var( --incman-primary );
}

#incman_gps_status {
	display: block;
	font-size: 13px;
	color: var( --incman-muted );
	margin-top: 2px;
}

.incman-gps-box.incman-gps-ok #incman_gps_status {
	color: var( --incman-green );
	font-weight: 600;
}

.incman-gps-box.incman-gps-error #incman_gps_status {
	color: var( --incman-red );
	font-weight: 600;
}

.incman-gps-retry {
	flex: 0 0 auto;
	width: auto;
	padding: 8px 14px;
	font-size: 13.5px;
}

/* ---------- Image previews ---------- */

.incman-thumb-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px;
}

.incman-thumb {
	position: relative;
	width: 84px;
	height: 84px;
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid var( --incman-line );
}

.incman-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.incman-thumb-remove {
	position: absolute;
	top: 4px;
	left: 4px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: none;
	background: rgba( 43, 47, 49, 0.75 );
	color: #fff;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.incman-thumb-note {
	font-size: 12.5px;
	color: var( --incman-muted );
	margin-top: 8px;
}

/* Sticky submit bar keeps the primary action in thumb reach on mobile */

.incman-submit-bar {
	position: sticky;
	bottom: 0;
	background: var( --incman-paper );
	padding: 14px 0 0;
	margin: 24px -16px -16px;
	padding-inline: 16px;
	padding-bottom: 16px;
	border-top: 1px solid var( --incman-line );
}

/* ---------- Notices ---------- */

.incman-notice {
	max-width: 520px;
	margin: 20px auto;
	padding: 14px 16px;
	border-inline-start: 3px solid var( --incman-primary );
	background: var( --incman-paper );
	border-radius: 4px;
	font-family: 'Rubik', 'Segoe UI', Tahoma, sans-serif;
	font-size: 15px;
	line-height: 1.5;
}

.incman-notice-error {
	border-inline-start-color: var( --incman-red );
}

.incman-notice-success {
	border-inline-start-color: var( --incman-green );
}

/* ---------- Gallery ---------- */

.incman-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.incman-gallery img {
	border-radius: 4px;
	max-width: 140px;
	height: auto;
	border: 1px solid var( --incman-line );
	display: block;
}

.incman-gallery-item {
	padding: 0;
	border: none;
	background: none;
	cursor: zoom-in;
	line-height: 0;
	border-radius: 4px;
	overflow: hidden;
}

.incman-gallery-item:hover img {
	opacity: 0.85;
}

/* ---------- Image lightbox ---------- */

.incman-image-modal {
	position: relative;
	border: none;
	padding: 0;
	background: transparent;
	width: 90vw;
	max-width: 900px;
	max-height: 90vh;
}

.incman-image-modal[open] {
	display: flex;
	align-items: center;
	justify-content: center;
}

.incman-image-modal::backdrop {
	background: rgba( 20, 22, 23, 0.85 );
}

.incman-image-modal img {
	max-width: 100%;
	max-height: 90vh;
	border-radius: 6px;
	display: block;
}

.incman-image-modal-close {
	position: absolute;
	top: 10px;
	left: 10px;
	background: rgba( 20, 22, 23, 0.6 );
	color: #fff;
	border-radius: 50%;
	width: 34px;
	height: 34px;
}

/* ---------- Back link ---------- */

.incman-back-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 16px;
	font-weight: 700;
	font-size: 14.5px;
}

.incman-back-link svg {
	width: 16px;
	height: 16px;
}

.incman-share-field {
	direction: ltr;
	text-align: left;
	font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
	font-size: 13px;
}

/* ---------- Stats overview (fault types + status charts) ---------- */

.incman-stats-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.incman-stat-title {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 700;
	color: var( --incman-muted );
}

.incman-bar-chart {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.incman-bar-row {
	display: grid;
	grid-template-columns: 92px 1fr 28px;
	align-items: center;
	gap: 10px;
}

.incman-bar-label {
	font-size: 13px;
	color: var( --incman-ink );
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.incman-bar-track {
	position: relative;
	height: 12px;
	border-radius: 4px;
	background: var( --incman-paper );
	overflow: hidden;
}

.incman-bar-fill {
	display: block;
	height: 100%;
	min-width: 4px;
	border-radius: 4px;
}

.incman-bar-value {
	font-size: 13px;
	font-weight: 700;
	color: var( --incman-ink );
	text-align: left;
	font-variant-numeric: tabular-nums;
}

@media ( max-width: 640px ) {
	.incman-stats-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------- Report list + filters (manager side) ---------- */

.incman-filter-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: flex-end;
	margin-bottom: 18px;
}

.incman-filter-row .incman-field {
	margin-bottom: 0;
	flex: 1 1 130px;
	min-width: 0;
}

.incman-filter-row .incman-button {
	width: auto;
	flex: 0 0 auto;
	padding: 12px 16px;
}

.incman-report-list {
	border-top: 1px solid var( --incman-line );
	overflow-x: auto;
}

.incman-report-row {
	display: grid;
	grid-template-columns: 100px minmax( 140px, 1fr ) minmax( 140px, 1fr ) 130px 150px 130px 90px;
	align-items: center;
	gap: 12px;
	padding: 12px 10px;
	border-bottom: 1px solid var( --incman-line );
	min-width: 980px;
}

.incman-report-row > * {
	justify-self: start;
	text-align: start;
}

.incman-report-row .incman-status-badge,
.incman-report-row .incman-report-date,
.incman-report-row .incman-report-duration,
.incman-report-row .incman-report-actions,
.incman-report-row-head span:nth-child( 4 ),
.incman-report-row-head span:nth-child( 5 ),
.incman-report-row-head span:nth-child( 6 ),
.incman-report-row-head span:nth-child( 7 ) {
	justify-self: center;
	text-align: center;
}

.incman-report-row-head {
	font-size: 12.5px;
	font-weight: 700;
	color: var( --incman-muted );
	padding-top: 10px;
	padding-bottom: 10px;
}

.incman-report-row:not( .incman-report-row-head ) {
	cursor: pointer;
}

.incman-report-row:not( .incman-report-row-head ):hover {
	background: var( --incman-paper );
}

.incman-report-number {
	font-weight: 700;
	color: var( --incman-primary );
	text-decoration: none;
}

.incman-report-actions {
	display: flex;
	gap: 6px;
	position: relative;
	z-index: 1;
}

.incman-icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: 6px;
	border: 1px solid var( --incman-line );
	background: #fff;
	cursor: pointer;
}

.incman-icon-button svg {
	width: 16px;
	height: 16px;
}

.incman-icon-button-whatsapp {
	color: #1da851;
}

.incman-report-contractor,
.incman-report-issue-type {
	min-width: 0;
	width: 100%;
	font-size: 14px;
	color: var( --incman-ink );
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.incman-report-date,
.incman-report-duration {
	font-size: 13px;
	color: var( --incman-muted );
}

.incman-report-empty {
	padding: 24px 0;
	text-align: center;
	color: var( --incman-muted );
	font-size: 14.5px;
}

.incman-pagination {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 16px;
}

.incman-pagination .incman-button {
	width: auto;
	padding: 9px 16px;
	font-size: 14px;
}

@media ( max-width: 480px ) {
	.incman-contractor-form-wrap,
	.incman-single-view,
	.incman-manager-form-wrap {
		padding-left: 12px;
		padding-right: 12px;
	}

	.incman-ticket-body {
		padding: 16px 16px;
	}
}