/**
 * WPInstitut Modern Stylesheet for Fast Support Plugin
 * Completely redesigns the Angular support portal to match the WPInstitut theme design language.
 *
 * @author wpgenie
 * @package Fast_Plugin
 */

:root {
	--wpinstitut-primary: #294d3f;
	--wpinstitut-primary-hover: #193b2d;
	--wpinstitut-primary-light: #466a58;
	--wpinstitut-primary-rgb: 41, 77, 63;
	--wpinstitut-secondary: #edf2e9;
	--wpinstitut-navy: #202c28;
	--wpinstitut-navy-dark: #193b2d;
	--wpinstitut-text: #202c28;
	--wpinstitut-text-muted: #64706a;
	--wpinstitut-text-subtle: #64706a;
	--wpinstitut-border: #dde3dc;
	--wpinstitut-border-hover: #c7d5c8;
	--wpinstitut-bg-page: #fbfcf8;
	--wpinstitut-bg-card: #ffffff;
	--wpinstitut-cta: #294d3f;
	--wpinstitut-cta-hover: #193b2d;
	--wpinstitut-success: #10b981;
	--wpinstitut-warning: #f59e0b;
	--wpinstitut-radius-sm: 6px;
	--wpinstitut-radius-md: 10px;
	--wpinstitut-radius-lg: 16px;
	--wpinstitut-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
	--wpinstitut-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
	--wpinstitut-shadow-lg: 0 10px 30px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
	--wpinstitut-font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Global Typography & Resets */
tick-app {
	background-color: var(--wpinstitut-bg-page) !important;
}

.fast-primary-bg {
	background: var(--wpinstitut-primary) !important;
	color: #ffffff !important;
}

.fast-accent-bg {
	background: var(--wpinstitut-secondary) !important;
	color: var(--wpinstitut-text) !important;
}

.fast-login-background {
	background: var(--wpinstitut-bg-page) !important;
}

.fast-login-background .fast-primary-bg {
	background: var(--wpinstitut-secondary) !important;
	color: var(--wpinstitut-text) !important;
}

.fast-primary-color,
.fast-accent-color {
	color: var(--wpinstitut-primary) !important;
}

body,
.mat-drawer-container,
.mat-card,
.mat-dialog-container,
.mat-menu-panel,
.mat-select-panel {
	color: var(--wpinstitut-text) !important;
}

a:not(.mat-raised-button):not(.mat-fab):not(.mat-mini-fab),
.mat-button.mat-primary,
.mat-icon-button.mat-primary,
.mat-button.mat-accent,
.mat-icon-button.mat-accent,
.mat-form-field.mat-focused .mat-form-field-label,
.mat-select:focus:not(.mat-select-disabled).mat-primary .mat-select-arrow,
.mat-primary .mat-option.mat-selected:not(.mat-option-disabled),
.mat-accent .mat-option.mat-selected:not(.mat-option-disabled),
.ql-snow .ql-tooltip a.ql-action,
.ql-snow .ql-tooltip a.ql-remove {
	color: var(--wpinstitut-primary) !important;
}

.mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,
.mat-progress-bar-fill::after,
.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb,
.mat-raised-button.mat-accent,
.mat-fab.mat-accent,
.mat-mini-fab.mat-accent {
	background-color: var(--wpinstitut-primary) !important;
	color: #ffffff !important;
}

.mat-checkbox:not(.mat-checkbox-disabled) .mat-checkbox-ripple .mat-ripple-element,
.mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
	background-color: rgba(var(--wpinstitut-primary-rgb), 0.2) !important;
}

.mat-progress-spinner circle,
.mat-spinner circle {
	stroke: var(--wpinstitut-primary) !important;
}

.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke {
	stroke: var(--wpinstitut-primary) !important;
}

.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill {
	fill: var(--wpinstitut-primary) !important;
}

body,
body.mat-typography,
.mat-typography,
button,
input,
textarea,
select,
.mat-button,
.mat-raised-button,
.mat-stroked-button,
.mat-flat-button,
.mat-card,
.mat-card-title,
.mat-toolbar,
.mat-tab-label,
.mat-step-label,
.mat-menu-item,
.mat-form-field {
	font-family: var(--wpinstitut-font) !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.mat-typography {
	background-color: var(--wpinstitut-bg-page) !important;
	color: var(--wpinstitut-text) !important;
}

/* Main Top Header Navbar - Clean WPInstitut Brand Style */
.mat-toolbar.mat-primary,
mat-toolbar[color="primary"] {
	background-color: #ffffff !important;
	color: var(--wpinstitut-text) !important;
	border-bottom: 1px solid var(--wpinstitut-border) !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
	min-height: 64px !important;
	height: 64px !important;
	padding: 0 24px !important;
	z-index: 10 !important;
}

.mat-toolbar.mat-primary .mat-icon-button {
	color: #64706a !important;
	border-radius: var(--wpinstitut-radius-sm) !important;
	transition: background-color 0.2s ease, color 0.2s ease !important;
}

.mat-toolbar.mat-primary .mat-icon-button:hover {
	background-color: #edf2e9 !important;
	color: var(--wpinstitut-primary) !important;
}

/* WPInstitut Official Logo */
.fast-toolbar-logo {
	height: 32px !important;
	width: auto !important;
	max-width: 140px !important;
	object-fit: contain !important;
	padding: 0 !important;
	margin-right: 8px !important;
	display: inline-block !important;
	vertical-align: middle !important;
}

/* Header Brand & Title */
.fast-sidenav-title {
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--wpinstitut-text-muted) !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
}

.fast-sidenav-title::before {
	content: none;
	font-size: 16px !important;
	font-weight: 700 !important;
	color: var(--wpinstitut-navy) !important;
	letter-spacing: -0.02em !important;
	padding-right: 10px !important;
	border-right: 1.5px solid var(--wpinstitut-border) !important;
	display: inline-block !important;
}

@media (max-width: 599px) {
	.fast-sidenav-title {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* User Menu & Avatar */
tick-admin-user-menu {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
}

.tick-toolbar-avatar {
	width: 36px !important;
	height: 36px !important;
	border-radius: 50% !important;
	border: 2px solid var(--wpinstitut-border) !important;
	object-fit: cover !important;
	margin: 0 8px !important;
	padding: 0 !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* Exit Button styled as "Back to site" */
.mat-toolbar a.mat-icon-button[aria-describedby*="cdk-describedby"],
.mat-toolbar a.mat-icon-button[href*="wpinstitut"],
.mat-toolbar a.mat-icon-button[href*="test"],
.mat-toolbar a.mat-icon-button[href="/"] {
	width: auto !important;
	padding: 0 14px !important;
	border-radius: var(--wpinstitut-radius-sm) !important;
	background-color: #fbfcf8 !important;
	border: 1px solid var(--wpinstitut-border) !important;
	color: #505e55 !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	height: 36px !important;
	line-height: 36px !important;
	transition: all 0.2s ease !important;
	margin-right: 10px !important;
}

.mat-toolbar a.mat-icon-button[aria-describedby*="cdk-describedby"]:hover,
.mat-toolbar a.mat-icon-button[href*="wpinstitut"]:hover,
.mat-toolbar a.mat-icon-button[href*="test"]:hover,
.mat-toolbar a.mat-icon-button[href="/"]:hover {
	background-color: var(--wpinstitut-secondary) !important;
	border-color: #c7d5c8 !important;
	color: var(--wpinstitut-primary) !important;
}

.mat-toolbar a.mat-icon-button[aria-describedby*="cdk-describedby"]::after,
.mat-toolbar a.mat-icon-button[href*="wpinstitut"]::after,
.mat-toolbar a.mat-icon-button[href*="test"]::after,
.mat-toolbar a.mat-icon-button[href="/"]::after {
	content: 'Back to site';
	margin-left: 4px;
	font-size: 13px;
	font-weight: 500;
}

/* Sidenav / Sidebar */
mat-sidenav.mat-sidenav {
	width: 320px !important;
	background-color: #fbfcf8 !important;
	border-right: 1px solid var(--wpinstitut-border) !important;
	box-shadow: none !important;
}

tick-admin-sidenav .fast-sidenav-background {
	background-color: #fbfcf8 !important;
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
}

/* 1. Sidebar Top Header */
tick-admin-sidenav-toolbar {
	order: 1 !important;
	display: block !important;
}

.fast-sidenav-toolbar {
	background-color: #ffffff !important;
	color: var(--wpinstitut-text) !important;
	border-bottom: 1px solid var(--wpinstitut-border) !important;
	min-height: 64px !important;
	height: 64px !important;
	padding: 0 20px !important;
}

.fast-sidenav-toolbar .fast-sidenav-toolbar__title {
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var(--wpinstitut-navy) !important;
	letter-spacing: -0.01em !important;
}

/* 2. Reposition "+ Create Ticket" button to the TOP (order 2) */
tick-admin-sidenav .fast-sidenav-background > mat-toolbar:last-of-type,
mat-sidenav .fast-sidenav-background.mat-toolbar {
	order: 2 !important;
	background-color: #ffffff !important;
	border-bottom: 1px solid var(--wpinstitut-border) !important;
	border-top: none !important;
	padding: 12px 16px !important;
	min-height: 60px !important;
	height: 60px !important;
	box-shadow: none !important;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px !important;
}

mat-sidenav .fast-sidenav-background.mat-toolbar a.mat-raised-button {
	flex: 1 1 auto !important;
	width: auto !important;
	max-width: 100% !important;
	background: linear-gradient(135deg, var(--wpinstitut-primary) 0%, var(--wpinstitut-primary-hover) 100%) !important;
	color: #ffffff !important;
	border-radius: var(--wpinstitut-radius-sm) !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	height: 40px !important;
	line-height: 40px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	box-shadow: 0 2px 6px rgba(41, 77, 63, 0.25) !important;
	transition: all 0.2s ease !important;
	margin: 0 !important;
}

mat-sidenav .fast-sidenav-background.mat-toolbar a.mat-raised-button:hover {
	box-shadow: 0 4px 12px rgba(41, 77, 63, 0.35) !important;
	transform: translateY(-1px);
}

mat-sidenav .fast-sidenav-background.mat-toolbar button.mat-icon-button {
	flex: 0 0 36px !important;
	width: 36px !important;
	height: 36px !important;
	line-height: 36px !important;
	color: var(--wpinstitut-text-muted) !important;
	border-radius: var(--wpinstitut-radius-sm) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
}

mat-sidenav .fast-sidenav-background.mat-toolbar button.mat-icon-button:hover {
	background-color: #edf2e9 !important;
	color: var(--wpinstitut-primary) !important;
}

tick-admin-sidenav > .fast-sidenav-background {
	position: relative;
}

tick-admin-sidenav .fast-sidenav-toolbar {
	padding-right: 60px !important;
}

tick-admin-sidenav > .fast-sidenav-background > mat-toolbar.fast-sidenav-background {
	position: static !important;
}

tick-admin-sidenav > .fast-sidenav-background > mat-toolbar.fast-sidenav-background > button.mat-icon-button {
	position: absolute !important;
	top: 14px;
	right: 12px;
	z-index: 2;
}

tick-admin-sidenav:not(:has(a.mat-raised-button)) > .fast-sidenav-background > mat-toolbar.fast-sidenav-background {
	min-height: 0 !important;
	height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

mat-sidenav .fast-sidenav-background.mat-toolbar button.mat-icon-button:focus-visible {
	outline: 2px solid var(--wpinstitut-primary);
	outline-offset: 2px;
}

/* 3. Ticket List / Content / Loader (order 3, fills remaining height) */
tick-admin-sidenav .fast-sidenav-loader,
tick-admin-sidenav .fast-sidenav-content,
tick-admin-sidenav tick-admin-sidenav-ticket-list,
tick-admin-sidenav .fast-sidenav-no-tickets {
	order: 3 !important;
	flex: 1 1 auto !important;
	overflow-y: auto !important;
}

.fast-sidenav-content {
	background-color: #fbfcf8 !important;
	padding: 14px 12px !important;
}

/* Empty State in Sidebar */
.fast-sidenav-no-tickets {
	padding: 48px 16px !important;
	text-align: center !important;
	color: var(--wpinstitut-text-muted) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
}

.fast-sidenav-no-tickets::before {
	content: '';
	display: block;
	width: 48px;
	height: 48px;
	margin: 0 auto 12px auto;
	background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23294d3f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center;
	border-radius: 50%;
	border: 1px solid var(--wpinstitut-border);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

/* Sidebar Ticket Item Cards */
.fast-sidenav-ticket.mat-list-item,
.mat-list-item.mat-3-line,
.mat-nav-list .mat-list-item {
	background-color: #ffffff !important;
	border-radius: var(--wpinstitut-radius-md) !important;
	margin-bottom: 8px !important;
	border: 1px solid var(--wpinstitut-border) !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
	transition: all 0.2s ease !important;
	height: auto !important;
	min-height: 64px !important;
	padding: 10px 12px !important;
	display: flex !important;
	align-items: center !important;
}

.fast-sidenav-ticket .mat-list-item-content {
	padding: 0 !important;
	width: 100% !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
}

.fast-sidenav-ticket .mat-list-avatar {
	width: 36px !important;
	min-width: 36px !important;
	height: 36px !important;
	border-radius: 50% !important;
	border: 1px solid var(--wpinstitut-border) !important;
	object-fit: cover !important;
	margin: 0 !important;
}

.fast-sidenav-ticket .mat-list-text {
	padding: 0 !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
	color: var(--wpinstitut-text) !important;
}

.fast-sidenav-ticket h3.mat-line,
.fast-sidenav-ticket .mat-list-text h3 {
	font-size: 13.5px !important;
	font-weight: 600 !important;
	color: var(--wpinstitut-navy) !important;
	line-height: 1.35 !important;
	margin: 0 0 3px 0 !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.fast-sidenav-ticket p.mat-line,
.fast-sidenav-ticket .mat-list-text p {
	font-size: 12px !important;
	color: var(--wpinstitut-text-muted) !important;
	margin: 0 !important;
	line-height: 1.3 !important;
}

.fast-sidenav-ticket .fast-sidenav-ticket__icon {
	color: #64706a !important;
	font-size: 18px !important;
	width: 18px !important;
	height: 18px !important;
	flex: 0 0 18px !important;
	margin-left: auto !important;
}

.fast-sidenav-ticket.mat-list-item:hover {
	background-color: var(--wpinstitut-secondary) !important;
	border-color: #c7d5c8 !important;
	transform: translateY(-1px);
	box-shadow: 0 3px 6px rgba(41, 77, 63, 0.1) !important;
}

.fast-sidenav-ticket.fast-sidenav-ticket--state-active,
.mat-nav-list .mat-list-item.mat-list-item-active,
.mat-list-item.mat-list-item-selected {
	background-color: #edf2e9 !important;
	border-left: 4px solid var(--wpinstitut-primary) !important;
	border-color: #c7d5c8 !important;
	box-shadow: 0 2px 5px rgba(41, 77, 63, 0.08) !important;
}

.fast-sidenav-ticket.fast-sidenav-ticket--state-active h3.mat-line {
	color: var(--wpinstitut-primary) !important;
}

.fast-sidenav-ticket.fast-sidenav-ticket--state-active .fast-sidenav-ticket__icon {
	color: var(--wpinstitut-primary) !important;
}

/* Main Content Workspace */
.tick-admin-content {
	background-color: #fbfcf8 !important;
	background-image: none !important;
	padding: 0 !important;
	margin: 0 !important;
	height: calc(100vh - 64px) !important;
	overflow: hidden !important;
	display: flex !important;
	flex-direction: column !important;
}

/* Ticket Conversation Thread Layout */
tick-ticket {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	width: 100% !important;
	overflow: hidden !important;
	background-color: #fbfcf8 !important;
}

tick-ticket mat-sidenav-container.mat-sidenav-container {
	height: 100% !important;
	background-color: #fbfcf8 !important;
}

tick-ticket mat-sidenav-content.mat-sidenav-content {
	background-color: #fbfcf8 !important;
	overflow: hidden !important;
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
}

tick-ticket mat-sidenav-content > div[fxfill] {
	height: 100% !important;
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden !important;
}

/* Comments Scrollable Stream */
.tick-comments-content {
	flex: 1 1 auto !important;
	overflow-y: auto !important;
	padding: 28px 24px 36px !important;
	max-width: 880px !important;
	width: 100% !important;
	margin: 0 auto !important;
	box-sizing: border-box !important;
}

/* Fast Comment Card Architecture */
.fast-comment {
	margin-left: 0 !important;
	margin-right: auto !important;
	margin-bottom: 32px !important;
	display: grid !important;
	grid-template-columns: minmax(0, 1fr);
	align-items: start !important;
	gap: 8px !important;
	width: 86% !important;
	max-height: none !important;
}

.fast-comment--not-author {
	margin-left: auto !important;
	margin-right: 0 !important;
}

.fast-comment--not-author .fast-comment__user {
	justify-content: flex-end !important;
}

.fast-comment--not-author .fast-comment__user .mat-caption {
	text-align: right !important;
}

.fast-comment--not-author .fast-comment__card-time {
	justify-content: flex-end !important;
}

@media (max-width: 599px) {
	.fast-comment {
		width: 94% !important;
	}
}

.fast-comment__user {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 8px;
	width: auto !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 4px !important;
}

.fast-comment__avatar {
	width: 28px !important;
	min-width: 28px !important;
	height: 28px !important;
	border-radius: 50% !important;
	border: 2px solid #ffffff !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
	object-fit: cover !important;
}

.fast-comment__user .mat-caption {
	font-size: 13px !important;
	font-weight: 700 !important;
	color: var(--wpinstitut-text) !important;
	margin: 0 !important;
	max-width: 100% !important;
	overflow: visible !important;
	white-space: normal !important;
	overflow-wrap: anywhere;
	text-align: left !important;
}

/* Hide retro speech bubbles */
.fast-comment__card:after,
.fast-comment__card:before {
	display: none !important;
}

/* Comment Cards */
.fast-comment__card.mat-card {
	box-sizing: border-box !important;
	flex: 1 1 auto !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	background-color: #ffffff !important;
	border-radius: var(--wpinstitut-radius-md) !important;
	border: 1px solid var(--wpinstitut-border) !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
	padding: 20px 24px !important;
	position: relative !important;
	transition: all 0.2s ease !important;
}

.fast-comment__card.mat-card:hover {
	border-color: var(--wpinstitut-border-hover) !important;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06) !important;
}

/* Agent / Staff Comment Card */
.fast-comment--not-author .fast-comment__card.mat-card {
	background: var(--wpinstitut-secondary) !important;
	border: 1px solid #c7d5c8 !important;
	border-right: 4px solid var(--wpinstitut-primary) !important;
	box-shadow: 0 2px 6px rgba(41, 77, 63, 0.06) !important;
}

.fast-comment--not-author .fast-comment__user .mat-caption {
	color: var(--wpinstitut-primary) !important;
	font-weight: 700 !important;
}

/* Agent Only / Private Note */
.fast-comment--agent-only .fast-comment__card.mat-card {
	background: #FFFBEB !important;
	border: 1px solid #FDE68A !important;
	border-left: 4px solid #F59E0B !important;
}

/* Comment Content Typography */
.fast-comment__card-content {
	font-size: 14.5px !important;
	line-height: 1.65 !important;
	color: #202c28 !important;
	margin-bottom: 12px !important;
}

.fast-comment__card-content p {
	margin: 0 0 10px 0 !important;
}

.fast-comment__card-content p:last-child {
	margin-bottom: 0 !important;
}

/* Comment Time & Actions */
.fast-comment__card-time {
	position: static !important;
	font-size: 12px !important;
	font-style: normal !important;
	color: var(--wpinstitut-text-subtle) !important;
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding-top: 10px !important;
	border-top: 1px solid #edf2e9 !important;
	margin-top: 12px !important;
}

.fast-comment__card-action a {
	color: var(--wpinstitut-primary) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	text-decoration: none !important;
}

.fast-comment__card-action a:hover {
	text-decoration: underline !important;
}

/* Code Blocks inside comments (.ql-syntax / pre) */
.fast-comment__card-content pre,
.fast-comment__card-content .ql-syntax,
.ql-snow .ql-editor pre.ql-syntax {
	background-color: #202c28 !important;
	color: #dde3dc !important;
	font-family: 'JetBrains Mono', Consolas, 'SF Mono', Monaco, monospace !important;
	font-size: 13px !important;
	line-height: 1.6 !important;
	padding: 16px 20px !important;
	border-radius: var(--wpinstitut-radius-sm) !important;
	border: 1px solid #202c28 !important;
	overflow-x: auto !important;
	margin: 14px 0 !important;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

/* Bottom Reply Bar (tick-ticket-reply) */
tick-ticket-reply {
	display: block !important;
	background-color: #ffffff !important;
	border-top: 1px solid var(--wpinstitut-border) !important;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.04) !important;
	z-index: 5 !important;
}

tick-ticket-reply mat-toolbar.mat-toolbar {
	background-color: #ffffff !important;
	color: var(--wpinstitut-text) !important;
	height: 64px !important;
	min-height: 64px !important;
	padding: 0 24px !important;
	max-width: 880px !important;
	margin: 0 auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
}

tick-ticket-reply button.mat-raised-button {
	background: linear-gradient(135deg, var(--wpinstitut-primary) 0%, var(--wpinstitut-primary-hover) 100%) !important;
	color: #ffffff !important;
	border-radius: var(--wpinstitut-radius-sm) !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	height: 42px !important;
	line-height: 42px !important;
	padding: 0 24px !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	box-shadow: 0 2px 6px rgba(41, 77, 63, 0.25) !important;
	transition: all 0.2s ease !important;
}

tick-ticket-reply button.mat-raised-button:hover {
	box-shadow: 0 4px 12px rgba(41, 77, 63, 0.35) !important;
	transform: translateY(-1px) !important;
}

tick-ticket-reply button.mat-icon-button {
	color: var(--wpinstitut-text-muted) !important;
	border-radius: var(--wpinstitut-radius-sm) !important;
}

tick-ticket-reply button.mat-icon-button:hover {
	background-color: #edf2e9 !important;
	color: var(--wpinstitut-primary) !important;
}

/* Ticket Details Drawer (right side) */
tick-ticket mat-sidenav.mat-drawer-end {
	background-color: #ffffff !important;
	border-left: 1px solid var(--wpinstitut-border) !important;
	box-shadow: -4px 0 20px rgba(0, 0, 0, 0.05) !important;
	width: 320px !important;
}

.fast-ticket-details {
	padding: 24px !important;
	background-color: #ffffff !important;
}

/* Support Center Welcome Hub Card (tick-home) */
tick-home {
	width: 100% !important;
	height: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: var(--wpinstitut-bg-page) !important;
	background-image: radial-gradient(#c7d5c8 0.75px, transparent 0.75px) !important;
	background-size: 24px 24px !important;
	padding: 32px !important;
	box-sizing: border-box !important;
	overflow-y: auto !important;
}

tick-home > div {
	max-width: 680px !important;
	width: 100% !important;
	height: auto !important;
	background: #ffffff !important;
	border-radius: var(--wpinstitut-radius-lg) !important;
	border: 1px solid var(--wpinstitut-border) !important;
	box-shadow: var(--wpinstitut-shadow-lg) !important;
	padding: 56px 48px !important;
	text-align: center !important;
	margin: auto !important;
}

tick-home .mat-title {
	font-size: 26px !important;
	font-weight: 700 !important;
	color: var(--wpinstitut-navy) !important;
	letter-spacing: -0.02em !important;
	margin-bottom: 12px !important;
}

tick-home .mat-title::before {
	content: '';
	display: block;
	width: 68px;
	height: 68px;
	margin: 0 auto 24px auto;
	background: #edf2e9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 24 24' fill='none' stroke='%23294d3f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center;
	border-radius: 50%;
	border: 2px solid #c7d5c8;
	box-shadow: 0 4px 10px rgba(41, 77, 63, 0.12);
}

tick-home p {
	font-size: 15px !important;
	color: var(--wpinstitut-text-muted) !important;
	line-height: 1.65 !important;
	margin-bottom: 32px !important;
	max-width: 460px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

tick-home a.mat-raised-button {
	background: linear-gradient(135deg, var(--wpinstitut-primary) 0%, var(--wpinstitut-primary-hover) 100%) !important;
	color: #ffffff !important;
	border-radius: var(--wpinstitut-radius-sm) !important;
	padding: 0 36px !important;
	height: 48px !important;
	line-height: 48px !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	box-shadow: 0 4px 14px rgba(41, 77, 63, 0.35) !important;
	display: inline-block !important;
	transition: all 0.2s ease !important;
}

tick-home a.mat-raised-button:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 20px rgba(41, 77, 63, 0.45) !important;
}

/* Stepper Wizard (tick-new-ticket) */
.fast-new-ticket-background {
	background: var(--wpinstitut-bg-page) !important;
	background-image: radial-gradient(#c7d5c8 0.75px, transparent 0.75px) !important;
	background-size: 24px 24px !important;
	padding: 48px 24px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.fast-new-ticket-wizard.mat-stepper-horizontal {
	max-width: 860px !important;
	width: 100% !important;
	margin: 0 auto !important;
	background-color: #ffffff !important;
	border-radius: var(--wpinstitut-radius-lg) !important;
	border: 1px solid var(--wpinstitut-border) !important;
	box-shadow: var(--wpinstitut-shadow-lg) !important;
	overflow: hidden !important;
}

.mat-horizontal-stepper-header-container {
	background-color: #ffffff !important;
	border-bottom: 1px solid var(--wpinstitut-border) !important;
	padding: 10px 20px !important;
}

.mat-horizontal-stepper-header {
	height: 64px !important;
	padding: 0 16px !important;
}

.mat-step-icon {
	width: 32px !important;
	height: 32px !important;
	border-radius: 50% !important;
	font-weight: 600 !important;
	font-size: 13px !important;
}

.mat-step-icon-not-touched {
	background-color: #edf2e9 !important;
	color: var(--wpinstitut-text-muted) !important;
	border: 1px solid #c7d5c8 !important;
}

.mat-step-header[aria-selected="true"] .mat-step-icon {
	background-color: var(--wpinstitut-primary) !important;
	color: #ffffff !important;
	box-shadow: 0 0 0 4px rgba(41, 77, 63, 0.15) !important;
}

.mat-step-header[aria-selected="true"] .mat-step-label {
	color: var(--wpinstitut-primary) !important;
	font-weight: 600 !important;
}

.mat-step-label {
	font-size: 14px !important;
	color: var(--wpinstitut-text) !important;
}

.mat-stepper-horizontal-line {
	border-top-color: var(--wpinstitut-border) !important;
}

.fast-new-ticket-wizard .mat-card {
	box-shadow: none !important;
	border: none !important;
	padding: 36px 32px !important;
}

.fast-new-ticket-wizard .mat-card-title {
	font-size: 22px !important;
	font-weight: 700 !important;
	color: var(--wpinstitut-navy) !important;
	letter-spacing: -0.01em !important;
	margin-bottom: 16px !important;
}

/* Top Branding Bar on /support/ticket/new */
tick-new-ticket {
	display: block !important;
	padding-top: 64px !important;
	box-sizing: border-box !important;
}

tick-new-ticket::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 64px;
	background-color: #ffffff;
	border-bottom: 1px solid var(--wpinstitut-border);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
	z-index: 100;
}

tick-new-ticket::after {
	content: 'WPInstitut Support';
	position: fixed;
	top: 0;
	left: 24px;
	height: 64px;
	line-height: 64px;
	font-size: 16px;
	font-weight: 700;
	color: var(--wpinstitut-navy);
	letter-spacing: -0.01em;
	z-index: 101;
	background: url('../images/logo.png') no-repeat left center;
	background-size: 32px 32px;
	padding-left: 42px;
}

.fast-card-logo {
	height: 36px !important;
	width: auto !important;
	object-fit: contain !important;
	display: inline-block !important;
}

.fast-new-ticket-wizard .mat-card-content {
	font-size: 15px !important;
	line-height: 1.65 !important;
	color: #505e55 !important;
}

.fast-new-ticket-wizard .mat-card-actions {
	border-top: 1px solid var(--wpinstitut-border) !important;
	padding: 24px 0 0 0 !important;
	margin-top: 24px !important;
}

/* Button Upgrades */
.mat-raised-button.mat-primary,
button.mat-raised-button.mat-primary,
a.mat-raised-button.mat-primary {
	background-color: var(--wpinstitut-primary) !important;
	color: #ffffff !important;
	border-radius: var(--wpinstitut-radius-sm) !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	padding: 0 24px !important;
	height: 42px !important;
	line-height: 42px !important;
	box-shadow: 0 2px 6px rgba(41, 77, 63, 0.25) !important;
	transition: all 0.2s ease !important;
}

.mat-raised-button.mat-primary:hover,
button.mat-raised-button.mat-primary:hover,
a.mat-raised-button.mat-primary:hover {
	background-color: var(--wpinstitut-primary-hover) !important;
	box-shadow: 0 4px 12px rgba(41, 77, 63, 0.35) !important;
	transform: translateY(-1px);
}

.mat-button.mat-warn,
a.mat-button.mat-warn {
	color: var(--wpinstitut-cta) !important;
	font-weight: 500 !important;
	border-radius: var(--wpinstitut-radius-sm) !important;
}

.mat-button.mat-warn:hover,
a.mat-button.mat-warn:hover {
	background-color: rgba(243, 58, 27, 0.08) !important;
}

/* Tabs */
.mat-tab-header {
	border-bottom: 1px solid var(--wpinstitut-border) !important;
}

.mat-tab-label {
	font-weight: 500 !important;
	font-size: 14px !important;
	color: var(--wpinstitut-text-muted) !important;
	opacity: 0.85 !important;
	transition: color 0.2s ease !important;
}

.mat-tab-label.mat-tab-label-active {
	color: var(--wpinstitut-primary) !important;
	font-weight: 600 !important;
	opacity: 1 !important;
}

.mat-ink-bar {
	background-color: var(--wpinstitut-primary) !important;
	height: 3px !important;
	border-radius: 3px 3px 0 0 !important;
}

/* Inputs & Form Fields */
.mat-form-field-underline {
	background-color: var(--wpinstitut-border) !important;
}

.mat-form-field-ripple {
	background-color: var(--wpinstitut-primary) !important;
}

.mat-focused .mat-form-field-label {
	color: var(--wpinstitut-primary) !important;
}

.fast-customer-ticket {
	border-radius: var(--wpinstitut-radius-md) !important;
	border: 1px solid var(--wpinstitut-border) !important;
	background-color: #ffffff !important;
	box-shadow: none !important;
}

/* Radio Buttons */
.mat-radio-checked .mat-radio-outer-circle {
	border-color: var(--wpinstitut-primary) !important;
}

.mat-radio-checked .mat-radio-inner-circle {
	background-color: var(--wpinstitut-primary) !important;
}

/* Quill Editor */
.ql-toolbar.ql-snow {
	border-color: var(--wpinstitut-border) !important;
	background-color: #fbfcf8 !important;
	border-radius: var(--wpinstitut-radius-md) var(--wpinstitut-radius-md) 0 0 !important;
	padding: 10px !important;
}

.ql-container.ql-snow {
	border-color: var(--wpinstitut-border) !important;
	border-radius: 0 0 var(--wpinstitut-radius-md) var(--wpinstitut-radius-md) !important;
	font-family: var(--wpinstitut-font) !important;
	font-size: 15px !important;
	background-color: #ffffff !important;
}

.ql-snow .ql-toolbar button.ql-active,
.ql-snow .ql-toolbar button:hover {
	color: var(--wpinstitut-primary) !important;
}

.ql-snow .ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke {
	stroke: var(--wpinstitut-primary) !important;
}

.ql-snow .ql-toolbar button.ql-active .ql-fill,
.ql-snow .ql-toolbar button:hover .ql-fill {
	fill: var(--wpinstitut-primary) !important;
}

/* Modal Dialogs */
.mat-dialog-container {
	border-radius: var(--wpinstitut-radius-lg) !important;
	padding: 32px !important;
	box-shadow: var(--wpinstitut-shadow-lg) !important;
	border: 1px solid var(--wpinstitut-border) !important;
}

/* Tables */
.fast-product-table,
.fast-purchase-list table {
	border-collapse: separate !important;
	border-spacing: 0 !important;
	border: 1px solid var(--wpinstitut-border) !important;
	border-radius: var(--wpinstitut-radius-md) !important;
	overflow: hidden !important;
}

.fast-product-table th,
.fast-purchase-list th {
	background-color: #fbfcf8 !important;
	font-weight: 600 !important;
	color: var(--wpinstitut-navy) !important;
	font-size: 13px !important;
	border-bottom: 1px solid var(--wpinstitut-border) !important;
}

.fast-product-table td,
.fast-purchase-list td {
	border-bottom: 1px solid var(--wpinstitut-border) !important;
	font-size: 14px !important;
}

.fast-purchase-list tr:hover td,
.fast-product-table tr:hover td {
	background-color: var(--wpinstitut-secondary) !important;
}

/* ==========================================================================
	Agent @Mention Autocomplete & Highlighting
	========================================================================== */

.wpinstitut-mention-dropdown {
	position: absolute;
	z-index: 10000;
	background: #ffffff;
	border: 1px solid var(--wpinstitut-border);
	border-radius: var(--wpinstitut-radius-md);
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
	width: 260px;
	max-height: 240px;
	overflow-y: auto;
	font-family: var(--wpinstitut-font);
}

.wpinstitut-mention-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 6px !important;
}

.wpinstitut-mention-item {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 8px 10px !important;
	border-radius: 6px !important;
	cursor: pointer !important;
	transition: background-color 0.15s ease !important;
}

.wpinstitut-mention-item:hover,
.wpinstitut-mention-item.is-active {
	background-color: var(--wpinstitut-secondary) !important;
}

.wpinstitut-mention-avatar {
	width: 28px !important;
	height: 28px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	border: 1px solid var(--wpinstitut-border) !important;
	flex-shrink: 0 !important;
}

.wpinstitut-mention-info {
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden !important;
}

.wpinstitut-mention-name {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--wpinstitut-navy) !important;
	line-height: 1.3 !important;
	white-space: nowrap !important;
	text-overflow: ellipsis !important;
	overflow: hidden !important;
}

.wpinstitut-mention-slug {
	font-size: 11px !important;
	color: var(--wpinstitut-text-subtle) !important;
	line-height: 1.2 !important;
}

.fast-comment__card-content .fast-mention,
.fast-mention {
	display: inline-block;
	background-color: #dfefb0 !important;
	color: #294d3f !important;
	font-weight: 600 !important;
	padding: 1px 6px !important;
	border-radius: 4px !important;
	font-size: 0.95em !important;
	line-height: normal !important;
	border: 1px solid #c7d5c8 !important;
}

/* ==========================================================================
	Screenshot Pasting & Embedding
	========================================================================== */

.wpinstitut-paste-placeholder {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	background-color: #edf2e9 !important;
	color: #294d3f !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	padding: 4px 10px !important;
	border-radius: 6px !important;
	border: 1px dashed #294d3f !important;
	user-select: none !important;
	pointer-events: none !important;
}

.wpinstitut-paste-spinner {
	display: inline-block !important;
	width: 14px !important;
	height: 14px !important;
	border: 2px solid rgba(41, 77, 63, 0.2) !important;
	border-top-color: #294d3f !important;
	border-radius: 50% !important;
	animation: wpinstitut-spin 0.8s linear infinite !important;
}

@keyframes wpinstitut-spin {
	to {
		transform: rotate(360deg);
	}
}

.fast-pasted-screenshot,
.fast-comment__card-content img,
.ql-editor img {
	max-width: 100% !important;
	height: auto !important;
	border-radius: 8px !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
	border: 1px solid var(--wpinstitut-border) !important;
	margin: 8px 0 !important;
	display: block !important;
	cursor: zoom-in !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.fast-comment__card-content img:hover,
.ql-editor img:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
}

/* Editor Image Floating Action Toolbar */
.wpinstitut-editor-image-toolbar {
	position: absolute;
	z-index: 10001;
	display: none;
	align-items: center;
	gap: 6px;
	background: #202c28;
	padding: 4px 8px;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
	opacity: 0;
	transition: opacity 0.15s ease;
	pointer-events: none;
}

.wpinstitut-editor-image-toolbar.is-visible {
	display: flex;
	opacity: 1;
	pointer-events: auto;
}

.wpinstitut-img-btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	background: transparent !important;
	border: none !important;
	color: #dde3dc !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	padding: 4px 8px !important;
	border-radius: 4px !important;
	cursor: pointer !important;
	transition: background-color 0.15s ease, color 0.15s ease !important;
}

.wpinstitut-img-btn .material-icons {
	font-size: 15px !important;
}

.wpinstitut-img-btn:hover {
	background: rgba(255, 255, 255, 0.15) !important;
	color: #ffffff !important;
}

.wpinstitut-img-delete-btn:hover {
	background: #ef4444 !important;
	color: #ffffff !important;
}

/* Modal Lightbox */
.wpinstitut-image-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.wpinstitut-image-modal.is-open {
	opacity: 1;
	visibility: visible;
}

.wpinstitut-image-modal-backdrop {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(32, 44, 40, 0.85);
	backdrop-filter: blur(4px);
}

.wpinstitut-image-modal-container {
	position: relative;
	z-index: 1;
	max-width: 90vw;
	max-height: 90vh;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: wpinstitut-modal-scale 0.2s ease-out;
}

@keyframes wpinstitut-modal-scale {
	from {
		transform: scale(0.95);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

.wpinstitut-image-modal-close {
	position: absolute;
	top: -40px;
	right: -10px;
	width: 36px;
	height: 36px;
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: #ffffff;
	font-size: 24px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.wpinstitut-image-modal-close:hover {
	background: #ef4444;
	transform: scale(1.05);
}

.wpinstitut-image-modal-img {
	max-width: 90vw;
	max-height: 85vh;
	object-fit: contain;
	border-radius: 8px;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: #202c28;
}