/**
 * Customer Portal Styles
 * 
 * Minimal styling to allow theme inheritance
 * Focus on layout, spacing, and functional UI elements
 * 
 * @package    MultisiteHelpdesk
 * @subpackage Assets/CSS
 * @since      0.6.0
 */

/* ========================================
   Container & Layout
   ======================================== */

.mshd-portal-container {
	max-width: 100%;
	margin: 0 auto;
	/* No padding here — the theme/page template controls spacing. */
	display: block !important; /* Override theme flexbox/grid */
}

.mshd-portal-container * {
	box-sizing: border-box;
}

/* Defensive rule to prevent SVGs from blowing up if specific sizing fails */
.mshd-portal-container svg {
	max-width: 100%;
	height: auto;
}

.mshd-portal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 2rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid #e2e8f0;
}

.mshd-portal-header h1 {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	font-size: 2rem;
	line-height: 1.2;
}

/* Portal heading icon styling
 * Size: 60x60px for good visibility without overwhelming the title
 * stroke-width: 1.0 for balanced line thickness
 * translateY: -5px to vertically center with text baseline
 * Note: Icon::render() called with inject_size=false to allow CSS control
 */
.mshd-portal-header h1 svg,
.mshd-portal-tickets-page h1 svg {
	flex-shrink: 0;
	width: 60px;
	height: 60px;
	stroke-width: 1.0;
	display: inline-block;
	vertical-align: middle;
	margin-right: 15px;
	max-width: none; /* Override the max-width: 100% just in case */
}

/* Ensure the heading is flex for alignment */
.mshd-portal-tickets-page h1.wp-heading-inline {
	display: inline-flex;
	align-items: center;
}

.mshd-portal-header .mshd-portal-actions {
	display: flex;
	gap: 0.5rem;
}

/* ========================================
   Filters
   ======================================== */

.mshd-filters-bar,
.mshd-portal-filters {
	background: #ffffff;
	padding: 1.5rem;
	border-radius: 8px;
	margin-bottom: 2rem;
	border: 1px solid #e2e8f0;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.mshd-filters-form,
.mshd-filter-form {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: flex-end;
}

.mshd-filter-group {
	flex: 1 1 200px;
	min-width: 150px;
}

.mshd-filter-group label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.5rem;
	font-size: 0.875rem;
}

.mshd-filter-group input,
.mshd-filter-group select {
	width: 100%;
	padding: 0.5rem;
	border: 1px solid #cbd5e1;
	border-radius: 4px;
}

.mshd-filter-actions {
	display: flex;
	gap: 0.5rem;
}

/* Force filters and table to stack (YooTheme overrides) */
.mshd-portal-tickets-page .mshd-filters-bar,
.mshd-portal-tickets-page .mshd-portal-filters {
	display: block !important;
	width: 100% !important;
	clear: both !important;
	float: none !important;
}

.mshd-portal-tickets-page .mshd-filters-form,
.mshd-portal-tickets-page .mshd-filter-form {
	display: flex !important;
	flex-wrap: wrap !important;
	width: 100% !important;
	clear: both !important;
	float: none !important;
}

/* ========================================
   Ticket Cards (My Tickets)
   ======================================== */

.mshd-tickets-grid {
	display: grid;
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.mshd-ticket-card {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 1rem;
	transition: all 0.2s ease;
}

.mshd-ticket-card:hover {
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	border-color: #cbd5e1;
}

.mshd-ticket-card-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 1rem;
}

.mshd-ticket-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	background: #f8fafc;
	padding: 1.5rem;
	border-radius: 8px;
	margin-bottom: 2rem;
}

.mshd-ticket-main {
	flex: 1;
	min-width: 0;
}

.mshd-ticket-id {
	font-family: monospace;
	font-size: 0.875rem;
	color: #64748b;
	font-weight: 600;
}

.mshd-ticket-meta {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 0.5rem;
}

.mshd-ticket-subject {
	font-size: 1rem;
	font-weight: 600;
	margin: 0;
	line-height: 1.4;
}

.mshd-ticket-subject a {
	text-decoration: none;
	color: #1e293b;
	transition: color 0.2s ease;
}

.mshd-ticket-subject a:hover {
	color: #3b82f6;
}

.mshd-ticket-date {
	font-size: 0.75rem;
	color: #94a3b8;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.mshd-ticket-date svg {
	width: 12px;
	height: 12px;
}

/* ========================================
   Merge Legend (Portal)
   ======================================== */

.mshd-merge-legend {
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	padding: 12px 16px;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

.mshd-merge-legend-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 500;
	color: #6b7280;
}

.mshd-merge-legend-label svg {
	width: 14px;
	height: 14px;
}

.mshd-merge-legend-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mshd-merge-legend-badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
	background: #fff;
	border: 2px solid;
	color: #1e293b;
}

.mshd-ticket-actions {
	flex-shrink: 0;
}

.mshd-ticket-view-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 6px;
	background: #f8fafc;
	color: #64748b;
	transition: all 0.2s ease;
	text-decoration: none;
}

.mshd-ticket-view-link:hover {
	background: #1d4ed8;
	color: #ffffff;
	transform: translateX(2px);
}

/* ========================================
   Badges
   ======================================== */

.mshd-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem 0.75rem;
	border-radius: 9999px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.025em;
}

.mshd-badge svg {
	width: 14px;
	height: 14px;
}

/* Status Badges */
.mshd-badge-open {
	background: #dbeafe;
	color: #1e40af;
}

.mshd-badge-in-progress {
	background: #fef3c7;
	color: #92400e;
}

.mshd-badge-resolved {
	background: #d1fae5;
	color: #065f46;
}

.mshd-badge-closed {
	background: #f1f5f9;
	color: #475569;
}

/* Priority Badges */
.mshd-badge-priority {
	background: #f1f5f9;
	color: #475569;
}

/* ========================================
   Portal Admin-List Styling
   ======================================== */

.mshd-portal-container .mshd-tickets-table {
	width: 100%;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	overflow: hidden;
	background: #ffffff;
	font-size: 13px;
}

.mshd-portal-container .mshd-tickets-table th,
.mshd-portal-container .mshd-tickets-table td {
	padding: 14px 12px;
	vertical-align: middle;
	width: auto !important;
}

.mshd-portal-container .mshd-tickets-table thead th {
	background: #f8fafc;
	font-weight: 700;
	color: #0f172a;
}

/* Disable sticky header/footer in portal */
.mshd-portal-container .mshd-tickets-table.wp-list-table.widefat thead,
.mshd-portal-container .mshd-tickets-table.wp-list-table.widefat tfoot {
	position: static;
	top: auto;
	bottom: auto;
	box-shadow: none;
}

/* Column sizing optimized for portal */
/* Use specific width percentages to force layout in fixed-table mode */
/* Reset inherited admin column widths first */
.mshd-portal-container .mshd-tickets-table th:first-child,
.mshd-portal-container .mshd-tickets-table td:first-child {
	width: 10% !important;
	padding-left: 1.5rem;
}

.mshd-portal-container .mshd-tickets-table th[data-col="subject"],
.mshd-portal-container .mshd-tickets-table td[data-col="subject"] {
	width: 35% !important;
}

.mshd-portal-container .mshd-tickets-table th[data-col="status"],
.mshd-portal-container .mshd-tickets-table td[data-col="status"] {
	width: 12% !important;
	text-align: center;
}

.mshd-portal-container .mshd-tickets-table th[data-col="priority"],
.mshd-portal-container .mshd-tickets-table td[data-col="priority"] {
	width: 12% !important;
	text-align: center;
}

.mshd-portal-container .mshd-tickets-table th[data-col="created"],
.mshd-portal-container .mshd-tickets-table td[data-col="created"] {
	width: 13% !important;
	text-align: right;
}

.mshd-portal-container .mshd-tickets-table th[data-col="last_reply"],
.mshd-portal-container .mshd-tickets-table td[data-col="last_reply"] {
	text-align: right;
	width: 18% !important;
	padding-right: 1.5rem;
}

/* Filter bar alignment - Flexbox Layout */
.mshd-portal-container .tablenav.top {
	padding: 1rem 1.5rem;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	background: #ffffff;
	margin-bottom: 24px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
	height: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

/* Filters Section (Left) */
.mshd-portal-container .tablenav.top .alignleft.actions {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
}

.mshd-portal-container .mshd-filters-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.mshd-portal-container .mshd-search-inline {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

/* Search Section (Right) */
.mshd-portal-container .tablenav.top .alignright {
	float: none;
	width: auto;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.mshd-portal-container .mshd-search-form {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	width: 100%;
	max-width: 520px;
	justify-content: center;
}

/* Make search full width on its own row if needed, or inline */
.mshd-tickets-filter-search {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-right: auto; /* Pushes filters to left */
}

/* Ensure inputs are tall enough and consistent */
.mshd-portal-container select,
.mshd-portal-container input[type="search"], 
.mshd-portal-container .mshd-search-form .button,
.mshd-portal-container .tablenav .button {
	height: 38px !important;
	line-height: normal !important;
	padding: 0 12px !important;
	box-sizing: border-box !important;
	vertical-align: middle;
	display: inline-flex;
	align-items: center;
}

/* Specific fix for search input to prevent WP overrides */
.mshd-portal-container input[type="search"] {
	min-width: 200px;
}

/* Remove WP default clearing div issue */
.mshd-portal-container .tablenav.top br.clear {
	display: none;
}

/* Hide pagination top if redundant or styled poorly */
.mshd-portal-container .tablenav.top .tablenav-pages {
	display: none;
}

.mshd-portal-container .mshd-tickets-table tbody tr:hover {
	background: #f9fafb;
}

.mshd-portal-container .mshd-col-hidden {
	display: none !important;
}

/* Match admin list table base styles */
.mshd-portal-container .wp-list-table {
	width: 100%;
	border-collapse: collapse;
	color: #1d2327;
	font-size: 13px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.mshd-portal-container .widefat {
	border: 1px solid #c3c4c7;
	background: #fff;
}

.mshd-portal-container .striped > tbody > :nth-child(odd),
.mshd-portal-container .striped > tbody > :nth-child(odd) td {
	background-color: #f6f7f7;
}

.mshd-portal-container .button:not(.button-primary):not(.uk-button-primary),
.mshd-portal-container button.button:not(.button-primary):not(.uk-button-primary),
.mshd-portal-container input[type="submit"].button:not(.button-primary):not(.uk-button-primary) {
	background: #f6f7f7;
	border: 1px solid #c3c4c7;
	color: #2c3338;
	border-radius: 3px;
	line-height: 2;
	min-height: 30px;
	padding: 0 10px;
}

.mshd-portal-container .button:not(.button-primary):not(.uk-button-primary):hover,
.mshd-portal-container button.button:not(.button-primary):not(.uk-button-primary):hover,
.mshd-portal-container input[type="submit"].button:not(.button-primary):not(.uk-button-primary):hover {
	background: #f0f0f1;
	border-color: #8c8f94;
}

.mshd-portal-container select,
.mshd-portal-container input[type="search"] {
	border: 1px solid #8c8f94;
	border-radius: 3px;
	background: #fff;
	color: #2c3338;
	font-size: 13px;
	min-height: 30px;
	padding: 0 8px;
}

.mshd-portal-container .mshd-ticket-number {
	font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.3px;
	color: #0f172a;
	text-decoration: none;
	white-space: nowrap;
	margin: 0;
	padding: 0;
}

.mshd-portal-container .mshd-ticket-number:hover {
	color: var(--mshd-color-primary-aaa);
}

.mshd-portal-container .mshd-ticket-cell {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.mshd-portal-container .mshd-ticket-subject {
	color: #1d2327;
	font-size: 13px;
	line-height: 1.4;
	text-decoration: none;
	margin: 0;
	padding-left: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mshd-portal-container .mshd-ticket-subject:hover {
	color: var(--mshd-color-primary-aaa);
}

.mshd-portal-container .mshd-reply-count {
	display: inline-block;
	background: var(--mshd-color-primary);
	color: #fff;
	padding: 0 4px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 600;
	margin-left: 3px;
	vertical-align: super;
	line-height: 16px;
	position: relative;
	top: -0.5em;
	min-width: 16px;
	height: 16px;
	text-align: center;
}

.mshd-portal-container .mshd-ticket-cell .mshd-ticket-subject {
	font-size: 13px;
	color: #334155;
}

/* Hide admin-only columns/controls in portal view */
.mshd-portal-container .check-column,
.mshd-portal-container th[data-col="customer"],
.mshd-portal-container td[data-col="customer"],
.mshd-portal-container th[data-col="agent"],
.mshd-portal-container td[data-col="agent"] {
	display: none;
}

.mshd-portal-container .tablenav.bottom,
.mshd-portal-container .bulkactions,
.mshd-portal-container .mshd-column-controls,
.mshd-portal-container #cb-select-all {
	display: none;
}

.mshd-portal-container .mshd-filters-form select,
.mshd-portal-container .mshd-filters-form input[type="search"] {
	min-width: 160px;
	border-radius: 8px;
}

.mshd-portal-container .mshd-filters-form .button {
	border-radius: 9999px;
}

/* ========================================
   Single Ticket View
   ======================================== */

.mshd-ticket-back {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
	text-decoration: none;
	font-size: 0.875rem;
}

.mshd-ticket-title-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 1rem;
}

.mshd-ticket-title-row h1 {
	margin: 0;
	flex: 1;
}

.mshd-ticket-meta-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	font-size: 0.875rem;
	color: #64748b;
}

.mshd-ticket-meta-bar .mshd-badge {
	font-size: 0.75rem;
}

/* Custom Fields Section */
.mshd-custom-fields-section {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 1.5rem;
	margin-bottom: 2rem;
}

.mshd-custom-fields-section h3 {
	margin-top: 0;
	margin-bottom: 1rem;
	font-size: 1rem;
	color: #334155;
}

.mshd-custom-fields-list {
	display: grid;
	gap: 1rem;
}

.mshd-custom-fields-list dt {
	font-weight: 600;
	color: #475569;
	margin-bottom: 0.25rem;
}

.mshd-custom-fields-list dd {
	margin: 0 0 1rem 0;
	color: #64748b;
}

/* Ticket Description */
.mshd-ticket-description {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 1.5rem;
	margin-bottom: 2rem;
	line-height: 1.7;
}

/* ========================================
   Replies Thread
   ======================================== */

.mshd-replies-section {
	margin-bottom: 2rem;
}

.mshd-replies-section h3 {
	margin-bottom: 1.5rem;
}

.mshd-replies-list {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.mshd-reply {
	background: transparent;
	border: none;
	padding: .5rem;
	display: flex;
	gap: 12px;
	margin-bottom: 20px;
	align-items: flex-start;
}

.mshd-reply-staff {
	background: #f0fdf4;
	border-color: #bbf7d0;
}

.mshd-reply-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	justify-content: space-between;
	margin-bottom: 8px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(0,0,0,0.05);
}

.mshd-reply-avatar img {
	border-radius: 50%;
	border: 1px solid #f0f0f1;
}

.mshd-reply-meta {
	flex: 1;
}

.mshd-reply-author {
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.mshd-reply-author .mshd-badge {
	margin-left: 0.5rem;
	font-size: 0.625rem;
	padding: 0.125rem 0.5rem;
	background: #15803d;
	color: #ffffff;
}

.mshd-reply-date {
	font-size: 0.875rem;
	color: #94a3b8;
}

.mshd-reply-content {
	font-size: 14px;
	line-height: 1.5;
	color: #2c3338;
}

.mshd-reply-content img {
	max-width: 90%;
	height: auto;
}

/* ========================================
   Reply Form
   ======================================== */

.mshd-reply-form-section {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 1.5rem;
	margin-bottom: 2rem;
}

.mshd-reply-form-section h3 {
	margin-top: 0;
	margin-bottom: 1.5rem;
}

.mshd-reply-form textarea {
	width: 100%;
	padding: 0.75rem;
	border: 1px solid #cbd5e1;
	border-radius: 4px;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.6;
	resize: vertical;
}

/* Sidebar Fields */
.mshd-sidebar-field {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
}

.mshd-sidebar-field label {
	display: block;
	margin-bottom: 5px;
	font-size: 13px;
	color: #50575e;
}

.mshd-sidebar-field select {
	max-width: 60%;
}

.mshd-sidebar-field .mshd-badge {
	margin-left: auto;
}

.mshd-reply-form textarea:focus {
	outline: none;
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.mshd-reply-actions {
	margin-top: 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.mshd-reply-status {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	color: #64748b;
}

.mshd-ticket-closed-notice {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background: #fef3c7;
	border: 1px solid #fde047;
	border-radius: 8px;
	padding: 1rem;
	margin-bottom: 2rem;
	color: #92400e;
}

/* ========================================
   Notice Messages (settings_errors)
   ======================================== */

.mshd-portal-container .notice,
.mshd-portal-container .updated,
.mshd-portal-container .error,
.mshd-portal-container div.notice,
.mshd-single-ticket .notice,
.mshd-single-ticket .updated,
.mshd-single-ticket .error,
.mshd-single-ticket div.notice {
	position: relative;
	background: #fff;
	border-left: 4px solid #72aee6;
	border-radius: 4px;
	padding: 1rem 2.5rem 1rem 1rem;
	margin: 1rem 0 2rem 0;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.mshd-portal-container .notice-success,
.mshd-portal-container .updated,
.mshd-single-ticket .notice-success,
.mshd-single-ticket .updated {
	border-left-color: #00a32a;
	background: #f0f9f0;
}

.mshd-portal-container .notice-error,
.mshd-portal-container .error,
.mshd-single-ticket .notice-error,
.mshd-single-ticket .error {
	border-left-color: #dc2626;
	background: #fef2f2;
}

.mshd-portal-container .notice-warning,
.mshd-single-ticket .notice-warning {
	border-left-color: #f59e0b;
	background: #fffbeb;
}

.mshd-portal-container .notice-info,
.mshd-single-ticket .notice-info {
	border-left-color: #3b82f6;
	background: #eff6ff;
}

.mshd-portal-container .notice p,
.mshd-single-ticket .notice p {
	margin: 0.5em 0;
	padding: 0;
	font-size: 0.95rem;
	line-height: 1.5;
}

.mshd-portal-container .notice .notice-dismiss,
.mshd-single-ticket .notice .notice-dismiss {
	position: absolute;
	top: 0;
	right: 0;
	padding: 0.75rem;
	background: none;
	border: none;
	cursor: pointer;
	color: #64748b;
	transition: color 0.2s;
}

.mshd-portal-container .notice .notice-dismiss:hover,
.mshd-single-ticket .notice .notice-dismiss:hover {
	color: #334155;
}

.mshd-portal-container .notice .notice-dismiss::before,
.mshd-single-ticket .notice .notice-dismiss::before {
	content: '\00d7';
	font-size: 1.5rem;
	font-weight: 300;
	display: block;
	width: 20px;
	height: 20px;
	line-height: 1;
}

.mshd-portal-container .notice .screen-reader-text,
.mshd-single-ticket .notice .screen-reader-text {
	position: absolute;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	overflow: hidden;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	word-wrap: normal !important;
}

/* ========================================
   New Ticket Form
   ======================================== */

.mshd-portal-form {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 2rem;
}

.mshd-form-group {
	margin-bottom: 1.5rem;
}

.mshd-form-group label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.5rem;
	color: #334155;
}

.mshd-form-group label .required {
	color: #dc2626;
}

.mshd-form-group input[type="text"],
.mshd-form-group input[type="email"],
.mshd-form-group input[type="url"],
.mshd-form-group input[type="number"],
.mshd-form-group input[type="date"],
.mshd-form-group select,
.mshd-form-group textarea {
	width: 100%;
	padding: 0.75rem;
	border: 1px solid #cbd5e1;
	border-radius: 4px;
	font-family: inherit;
	font-size: 1rem;
}

.mshd-form-group input:focus,
.mshd-form-group select:focus,
.mshd-form-group textarea:focus {
	outline: none;
	border-color: #3b82f6;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.mshd-form-group .description {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	color: #64748b;
}

.mshd-checkbox-group,
.mshd-radio-group {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.mshd-checkbox-label,
.mshd-radio-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
}

.mshd-form-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid #e2e8f0;
}

.mshd-form-status {
	font-size: 0.875rem;
}

.mshd-form-status.success {
	color: #16a34a;
}

.mshd-form-status.error {
	color: #dc2626;
}

.mshd-form-status.loading {
	color: #3b82f6;
}

/* ========================================
   Empty States
   ======================================== */

.mshd-empty-state {
	text-align: center;
	padding: 5rem 2rem;
	background: #f8fafc;
	border: 2px dashed #cbd5e1;
	border-radius: 12px;
	max-width: 500px;
	margin: 2rem auto;
}

.mshd-empty-icon {
	display: flex;
	justify-content: center;
	margin-bottom: 1.5rem;
}

.mshd-empty-icon svg {
	width: 80px;
	height: 80px;
}

.mshd-empty-state svg {
	color: #cbd5e1;
}

.mshd-empty-state h2 {
	margin: 0 0 0.75rem 0;
	color: #334155;
	font-size: 1.75rem;
	font-weight: 600;
}

.mshd-empty-state h3 {
	margin: 0 0 0.75rem 0;
	color: #334155;
	font-size: 1.5rem;
	font-weight: 600;
}

.mshd-empty-state p {
	color: #64748b;
	margin-bottom: 2rem;
	font-size: 1rem;
	line-height: 1.6;
}

.mshd-empty-state .button-hero {
	padding: 0.75rem 2rem;
	font-size: 1rem;
	height: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

/* ========================================
   Pagination
   ======================================== */

.mshd-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	margin-top: 2rem;
}

.mshd-pagination .page-info {
	font-size: 0.875rem;
	color: #64748b;
}

/* ========================================
   Button Enhancements
   ======================================== */

/* Header action button group - consistent gap on all screen sizes */
.mshd-header-actions {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* Ensure primary buttons in portal container show icon + text inline */
.mshd-portal-container .button-primary {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.mshd-portal-header .button-primary {
	font-weight: 600;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	transition: all 0.2s ease;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.mshd-portal-header .button-primary:hover {
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	transform: translateY(-1px);
}

.button {
	transition: all 0.2s ease;
}

.button:hover {
	opacity: 0.9;
}

/* ========================================
   Loading States
   ======================================== */

.mshd-loading {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.mshd-loading svg {
	animation: spin 1s linear infinite;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/* ========================================
   Login Required
   ======================================== */

.mshd-login-required {
	min-height: 50vh;
}

.mshd-login-card {
	max-width: 480px;
	margin: 0 auto;
}

.mshd-login-icon img {
	max-width: 200px;
	max-height: 80px;
	height: auto;
	margin: 0 auto;
}

.mshd-login-icon svg {
	width: 64px;
	height: 64px;
	color: #64748b;
}

.mshd-login-title {
	font-weight: 700;
	color: #1e293b;
}

.mshd-login-text {
	color: #64748b;
}

.mshd-login-button {
	border-radius: 500px !important;
}

/* Self-Registration Form ([mshd_register]) — self-contained styles so the
   form renders correctly with or without a UIkit-based theme. */
.mshd-register {
	min-height: 50vh;
}

.mshd-register-card {
	max-width: 480px;
	margin: 0 auto;
}

.mshd-register-logo img {
	max-width: 200px;
	max-height: 80px;
	width: auto;
	height: auto;
	margin: 0 auto;
}

.mshd-register-title {
	font-weight: 700;
	color: #1e293b;
}

.mshd-register-text {
	color: #475569;
}

.mshd-register-card .mshd-form-group {
	margin-bottom: 1.25rem;
}

.mshd-register-card .mshd-form-group label {
	display: block;
	margin-bottom: 0.375rem;
	font-weight: 600;
	color: #1e293b;
}

/* Visually hide the honeypot without display:none (bots skip hidden fields). */
.mshd-register-hp {
	position: absolute;
	left: -9999px;
	top: -9999px;
}

.mshd-register-submit:focus-visible,
.mshd-register-card input:focus-visible,
.mshd-register-footer a:focus-visible {
	outline: 2px solid #1d4ed8;
	outline-offset: 2px;
}

.mshd-register-feedback {
	display: none;
	margin: 1rem 0 0;
	padding: 0.875rem 1rem;
	border-radius: 6px;
	border: 1px solid transparent;
	text-align: left;
}

.mshd-register-feedback.is-visible {
	display: block;
}

/* Alert colors chosen for WCAG AA contrast on their backgrounds. */
.mshd-register-feedback--success {
	background: #f0fdf4;
	border-color: #bbf7d0;
	color: #166534;
}

.mshd-register-feedback--error {
	background: #fef2f2;
	border-color: #fecaca;
	color: #991b1b;
}

.mshd-register-disabled,
.mshd-register-logged-in {
	max-width: 480px;
	margin: 1.5rem auto;
	padding: 0.875rem 1rem;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	background: #f8fafc;
	color: #334155;
	text-align: center;
}

/* Inline Login Form */
.mshd-inline-login-form {
	max-width: 420px;
	margin: 0 auto;
	text-align: left;
	background: rgba(255, 255, 255, 0.98);
	padding: 2.5rem;
	border-radius: 12px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
	backdrop-filter: blur(10px);
	position: relative;
	z-index: 1;
}

.mshd-inline-login-form form {
	margin: 0;
}

.mshd-inline-login-form label {
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 600;
	color: #334155;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.mshd-inline-login-form input[type="text"],
.mshd-inline-login-form input[type="password"] {
	width: 100%;
	padding: 0.875rem 1rem;
	border: 2px solid #e2e8f0;
	border-radius: 8px;
	font-size: 15px;
	margin-bottom: 1.25rem;
	transition: all 0.3s ease;
	background: #f8fafc;
}

.mshd-inline-login-form input[type="text"]:focus,
.mshd-inline-login-form input[type="password"]:focus {
	outline: none;
	border-color: #667eea;
	background: #ffffff;
	box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.mshd-inline-login-form input[type="submit"] {
	width: 100%;
	background: linear-gradient(135deg, #4f46e5 0%, #5b21b6 100%);
	color: #fff;
	border: none;
	padding: 1rem;
	font-size: 1rem;
	font-weight: 700;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.3s ease;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	box-shadow: 0 4px 14px rgba(79, 70, 229, 0.4);
}

.mshd-inline-login-form input[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}

.mshd-inline-login-form .login-remember {
	margin-bottom: 1.5rem;
	display: flex;
	align-items: center;
}

.mshd-inline-login-form .login-remember input[type="checkbox"] {
	margin: 0 0.5rem 0 0;
	width: auto;
}

.mshd-inline-login-form .login-remember label {
	display: inline;
	font-weight: normal;
	margin: 0;
	text-transform: none;
	letter-spacing: normal;
	font-size: 0.9375rem;
	color: #64748b;
}

.mshd-login-footer {
	text-align: center;
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid #e2e8f0;
	font-size: 14px;
}

.mshd-login-footer a {
	color: #667eea;
	text-decoration: none;
	font-weight: 500;
	transition: color 0.2s;
}

.mshd-login-footer a:hover {
	color: #5568d3;
	text-decoration: underline;
}

/* ========================================
   Responsive Design
   ======================================== */

@media (max-width: 768px) {
	.mshd-portal-tickets-page {
		overflow-x: hidden;
	}

	.mshd-portal-tickets-page .wrap,
	.mshd-portal-tickets-page .mshd-filters-bar,
	.mshd-portal-tickets-page .mshd-filters-form {
		max-width: 100%;
		box-sizing: border-box;
	}
	.mshd-portal-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}

	.mshd-filters-form {
		flex-direction: column;
	}

	.mshd-filter-group {
		width: 100%;
	}

	.mshd-filter-actions {
		width: 100%;
	}

	.mshd-filter-actions button {
		flex: 1;
	}

	.mshd-ticket-card-header {
		flex-direction: column;
		gap: 0.75rem;
	}

	.mshd-ticket-footer {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}

	.mshd-ticket-title-row {
		flex-direction: column;
		gap: 1rem;
	}

	.mshd-form-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.mshd-form-actions button {
		width: 100%;
		justify-content: center;
	}
}

@media (max-width: 480px) {
	.mshd-portal-container {
		padding: 1rem 0.5rem;
	}

	.mshd-ticket-card,
	.mshd-ticket-header,
	.mshd-ticket-description,
	.mshd-reply,
	.mshd-reply-form-section,
	.mshd-portal-form {
		padding: 1rem;
	}

	.mshd-filters-bar {
		padding: 1rem;
	}
}

/* ==========================================================================
   PORTAL TICKETS TABLE (Admin-Style Layout)
   Refined to match WP Admin Table styles exactly on Frontend
   ========================================================================== */

.mshd-portal-tickets-page {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
	color: #1d2327 !important;
	display: block !important;
	position: relative !important;
	max-width: 100% !important;
	overflow-x: hidden !important;
	min-width: 0 !important;
	margin-left: 0 !important;
	box-sizing: border-box !important;
}

.mshd-portal-tickets-page * {
	box-sizing: border-box !important;
}

.mshd-portal-tickets-page .mshd-table-scroll {
	display: block !important;
	width: 100% !important;
	overflow-x: auto !important;
	margin-bottom: 20px;
	clear: both !important;
	float: none !important;
	container-type: inline-size; /* New stacking context */
}

.mshd-portal-tickets-page a {
	color: var(--mshd-color-primary);
	text-decoration: none;
}

.mshd-portal-tickets-page a:hover {
	color: var(--mshd-color-primary-aaa);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   WP List Table Base Styles (Front-end Simulation)
   -------------------------------------------------------------------------- */
.mshd-portal-tickets-page .wp-list-table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 20px;
    background: #fff;
    border: 1px solid #c3c4c7;
    box-shadow: 0 1px 1px rgba(0,0,0,0.04);
}

.mshd-portal-tickets-page .wp-list-table th,
.mshd-portal-tickets-page .wp-list-table td {
    padding: 8px 10px;
    text-align: left;
    font-size: 13px;
    line-height: 1.5;
    vertical-align: top;
	word-wrap: break-word;
}

.mshd-portal-tickets-page .wp-list-table th {
	vertical-align: middle; /* Headers are usually vertically centered */
}

/* Header & Footer */
.mshd-portal-tickets-page .wp-list-table thead th,
.mshd-portal-tickets-page .wp-list-table tfoot th {
    border-bottom: 1px solid #c3c4c7 !important;
    font-weight: 600 !important;
    color: #1d2327 !important;
    background: #f0f0f1 !important;
}

.mshd-portal-tickets-page .wp-list-table thead td,
.mshd-portal-tickets-page .wp-list-table tfoot td {
    border-bottom: 1px solid #c3c4c7 !important;
	border-top: 1px solid #c3c4c7 !important;
}

/* Sortable Headers */
.mshd-portal-tickets-page .mshd-sortable {
    color: #1d2327;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
	font-weight: 600;
	white-space: nowrap;
	gap: 4px;
}

.mshd-portal-tickets-page .mshd-sortable:hover {
    color: var(--mshd-color-primary);
}

.mshd-portal-tickets-page .mshd-sort-arrows {
	color: #a7aaad; /* Default gray for inactive arrows */
	display: inline-flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	font-size: 8px !important;
	line-height: 1 !important;
	margin-left: 5px !important;
	vertical-align: middle !important;
	height: 14px !important;
}

.mshd-portal-tickets-page .mshd-sort-arrows .active {
	color: var(--mshd-color-primary) !important;
	font-weight: bold !important;
	opacity: 1 !important;
}

/* Striping */
.mshd-portal-tickets-page .wp-list-table.striped > tbody > tr:nth-child(odd) {
    background-color: #f6f7f7;
}

.mshd-portal-tickets-page .wp-list-table.striped > tbody > tr:nth-child(even) {
    background-color: #fff;
}

/* Row Hover */
.mshd-portal-tickets-page .wp-list-table > tbody > tr:hover {
    background-color: #f0f6fc !important;
}

/* --------------------------------------------------------------------------
   Columns & Table Layout
   -------------------------------------------------------------------------- */

/* Force table display (YooTheme resets) */
.mshd-portal-tickets-page .mshd-tickets-table.wp-list-table {
	display: table !important;
	table-layout: fixed !important;
	border-collapse: collapse !important;
	width: 100% !important;
	border: 1px solid #c3c4c7 !important;
	box-shadow: 0 1px 1px rgba(0,0,0,.04) !important;
	background: #fff !important;
	
	/* Reset positioning that might cause flexible overlaps */
	position: static !important;
	float: none !important;
	clear: both !important;
	margin-top: 20px !important;
}

.mshd-portal-tickets-page .mshd-tickets-table thead {
	display: table-header-group !important;
}

.mshd-portal-tickets-page .mshd-tickets-table tbody {
	display: table-row-group !important;
}

.mshd-portal-tickets-page .mshd-tickets-table tfoot {
	display: table-footer-group !important;
}

.mshd-portal-tickets-page .mshd-tickets-table tr {
	display: table-row !important;
}

.mshd-portal-tickets-page .mshd-tickets-table th,
.mshd-portal-tickets-page .mshd-tickets-table td {
	display: table-cell !important;
	float: none !important;
	clear: none !important;
}

.mshd-portal-tickets-page .mshd-tickets-table thead th {
	background: #fff !important;
	border-bottom: 1px solid #c3c4c7 !important;
	padding: 8px 10px !important;
	height: 48px !important;
	vertical-align: middle !important;
}

.mshd-portal-tickets-page .mshd-tickets-table thead th a,
.mshd-portal-tickets-page .mshd-tickets-table thead th .mshd-sortable {
    color: #3c434a !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
	font-size: 14px !important;
}

.mshd-portal-tickets-page .mshd-tickets-table thead th .sorting-indicator {
	margin-left: 5px !important;
	opacity: 0.6;
}

/* Explicit Widths & Cell styles */
.mshd-portal-tickets-page td {
	padding: 12px 10px !important;
	vertical-align: middle !important;
	border-bottom: 1px solid #f0f0f1 !important;
}

.mshd-portal-tickets-page th[data-col="ticket_number"], 
.mshd-portal-tickets-page td.mshd-ticket-number-column { width: 9% !important; min-width: 80px !important; text-align: left !important; }

.mshd-portal-tickets-page th[data-col="subject"], 
.mshd-portal-tickets-page td.mshd-subject-column { width: 33% !important; text-align: left !important; }

.mshd-portal-tickets-page th[data-col="status"], 
.mshd-portal-tickets-page td.mshd-status-column { width: 12% !important; min-width: 95px !important; text-align: center !important; }

.mshd-portal-tickets-page th[data-col="priority"], 
.mshd-portal-tickets-page td.mshd-priority-column { width: 12% !important; min-width: 85px !important; text-align: center !important; }

.mshd-portal-tickets-page th[data-col="created"], 
.mshd-portal-tickets-page td.mshd-created-column { width: 17% !important; min-width: 110px !important; text-align: right !important; }

.mshd-portal-tickets-page th[data-col="last_reply"], 
.mshd-portal-tickets-page td.mshd-last-reply-column { width: 17% !important; min-width: 110px !important; text-align: right !important; }

.mshd-portal-tickets-page .mshd-desktop-last-reply {
	display: block !important;
}

/* Ticket Number & Subject Styling */
.mshd-portal-tickets-page .mshd-ticket-cell {
	display: flex;
	flex-direction: column;
}

.mshd-portal-tickets-page .mshd-ticket-number {
	font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
	font-weight: 500;
	color: var(--mshd-color-primary);
	font-size: 16px;
	margin-bottom: 3px;
	display: inline-block;
	text-decoration: none;
}

.mshd-portal-tickets-page .mshd-ticket-number:hover {
	color: var(--mshd-color-primary-aaa);
}

.mshd-portal-tickets-page .mshd-ticket-subject {
	font-weight: 600;
	color: #1d2327; /* Stronger color for subject as per Admin Table usually */
	font-size: 14px;
	display: block;
	line-height: 1.4;
    text-decoration: none;
}

.mshd-portal-tickets-page .mshd-ticket-subject:hover {
	color: var(--mshd-color-primary);
}

/* Reply Count Badge */
.mshd-portal-tickets-page .mshd-reply-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #646970;
    color: white;
    font-size: 9px;
    font-weight: 700;
    border-radius: 50%;
    min-width: 16px;
    height: 16px;
    margin-left: 5px;
    line-height: 1;
    vertical-align: text-top;
}

/* Status & Priority Badges */
.mshd-portal-tickets-page .mshd-badge,
.mshd-portal-tickets-page .mshd-status-badge,
.mshd-portal-tickets-page .mshd-priority-badge {
	display: inline-block !important;
	box-sizing: border-box !important;
	padding: 3px 8px !important;
	border-radius: 3px !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-align: center !important;
	white-space: nowrap !important;
	text-transform: uppercase !important;
	letter-spacing: 0.3px !important;
}

.mshd-portal-tickets-page .mshd-status-badge {
	min-width: 100px !important;
}

.mshd-portal-tickets-page .mshd-priority-badge {
	min-width: 80px !important;
}

/* Portal filter button: Show/Hide Closed */
.mshd-portal-tickets-page .mshd-toggle-closed {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	border-radius: 16px !important;
	padding: 6px 12px !important;
	border: 1px solid #c3c4c7 !important;
	background: #fff !important;
	color: #1d2327 !important;
	font-size: 13px !important;
	line-height: normal !important;
	height: 38px !important;
	cursor: pointer !important;
	text-decoration: none !important;
}

.mshd-portal-tickets-page .mshd-toggle-closed.active {
	background: #f0f6fc !important;
	border-color: var(--mshd-color-primary) !important;
}

/* Portal filter button: Clear Filters */
.mshd-portal-tickets-page #mshd-clear-filters {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	border-radius: 16px !important;
	padding: 6px 12px !important;
	border: 1px solid #c3c4c7 !important;
	background: #fff !important;
	color: #1d2327 !important;
	text-decoration: none !important;
	font-size: 13px !important;
	line-height: normal !important;
	height: 38px !important;
	cursor: pointer !important;
	transition: all 0.15s ease !important;
}

.mshd-portal-tickets-page #mshd-clear-filters:hover {
	background: #f6f7f7;
	border-color: #8c8f94;
	color: #000;
}

.mshd-portal-tickets-page #mshd-filter-organization {
	min-width: 190px;
}

.mshd-portal-tickets-page #mshd-filter-customer {
	min-width: 170px;
}

/* --------------------------------------------------------------------------
   Inbox-Style Ticket Rows
   -------------------------------------------------------------------------- */
.mshd-portal-tickets-page .mshd-ticket-cell.mshd-inbox-style {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mshd-portal-tickets-page .mshd-ticket-row-main {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	flex-wrap: nowrap !important;
}

.mshd-portal-tickets-page .mshd-reply-badge {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 20px !important;
	height: 20px !important;
	padding: 0 !important;
	background: var(--mshd-color-primary) !important;
	color: #fff !important;
	border-radius: 50% !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	flex-shrink: 0 !important;
	align-self: center !important;
}

.mshd-portal-tickets-page .mshd-ticket-row-main .mshd-ticket-number {
	font-family: monospace;
	font-size: 14px !important;
	color: var(--mshd-color-primary) !important;
	white-space: nowrap !important;
	flex-shrink: 0 !important;
	font-weight: 600 !important;
}

.mshd-portal-tickets-page .mshd-merged-ticket-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	color: #6b7280;
	margin-right: 6px;
	flex-shrink: 0;
}

.mshd-portal-tickets-page .mshd-merged-ticket-icon svg {
	width: 14px;
	height: 14px;
}

.mshd-portal-tickets-page .mshd-ticket-row-main .mshd-ticket-subject {
	font-weight: 600 !important;
	font-size: 15px !important;
	color: #2c3338 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

.mshd-portal-tickets-page .mshd-ticket-row-preview {
	padding-left: 30px; /* Align with subject (reply badge width + gap) */
	margin-top: 0;
	line-height: 1;
}

.mshd-portal-tickets-page .mshd-ticket-row-preview a {
	color: #646970;
	font-size: 0.9em;
	text-decoration: none;
	line-height: 1;
}

.mshd-portal-tickets-page .mshd-ticket-row-preview a:hover {
	color: var(--mshd-color-primary);
}

/* Mobile-only inline meta (hidden on desktop) */
.mshd-mobile-status,
.mshd-mobile-priority,
.mshd-mobile-created,
.mshd-mobile-last-reply {
	display: none !important;
}

/* Hide preview on mobile */
@media (max-width: 768px) {
	.mshd-portal-tickets-page .mshd-ticket-row-preview {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Active Filters Bar with Tags
   -------------------------------------------------------------------------- */
.mshd-active-filters-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 12px 15px;
	margin-bottom: 15px;
	background: #f0f6fc;
	border-left: 4px solid var(--mshd-color-primary);
	border-radius: 0 4px 4px 0;
}

.mshd-active-filters-label {
	font-weight: 600;
	color: var(--mshd-color-primary);
	margin-right: 4px;
}

.mshd-active-filters-head {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-right: 6px;
}

.mshd-active-clear-all {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	background: #fff;
	color: #50575e;
	text-decoration: none;
}

.mshd-active-clear-all:hover {
	border-color: #b02020;
	color: #b02020;
	background: #fff;
}

.mshd-filter-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mshd-filter-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px 4px 10px;
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 3px;
	font-size: 12px;
	color: #1d2327;
}

.mshd-filter-tag .mshd-remove-filter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	padding: 0;
	margin: 0;
	background: transparent;
	border: none;
	border-radius: 50%;
	color: #787c82;
	font-size: 14px;
	font-weight: bold;
	line-height: 1;
	cursor: pointer;
	transition: all 0.15s ease;
}

.mshd-filter-tag .mshd-remove-filter:hover {
	background: #d63638;
	color: #fff;
}

/* Sortable Column Headers */
.mshd-portal-tickets-page .mshd-sort-arrows .inactive {
	color: #c3c4c7 !important;
	opacity: 0.8 !important;
}

.mshd-portal-tickets-page .mshd-sortable:hover .mshd-sort-arrows .inactive {
	opacity: 1;
	color: #999;
}

/* Filters Bar */
.mshd-portal-tickets-page .mshd-filters-bar {
	background: #fff;
    border: 1px solid #c3c4c7;
	padding: 10px 12px;
	margin: 15px 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.mshd-portal-tickets-page .mshd-filters-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mshd-portal-tickets-page select,
.mshd-portal-tickets-page input[type="search"] {
    border: 1px solid #8c8f94;
    border-radius: 4px;
    padding: 0 8px;
    line-height: 2;
    min-height: 30px;
    font-size: 13px;
    color: #2c3338;
}

.mshd-portal-tickets-page .button,
.mshd-portal-container .button {
    display: inline-block;
    text-decoration: none;
    font-size: 13px;
    line-height: 2.15384615;
    min-height: 30px;
    margin: 0;
    padding: 0 10px;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    -webkit-appearance: none;
    border-radius: 3px;
    white-space: nowrap;
    box-sizing: border-box;
    color: var(--mshd-color-primary);
    border-color: var(--mshd-color-primary);
    background: #f6f7f7;
    vertical-align: top;
}

.mshd-portal-tickets-page .button:hover,
.mshd-portal-container .button:hover {
    background: #f0f0f1;
    border-color: #0a4b78;
    color: #0a4b78;
}

/* Responsive */
@media (max-width: 782px) {
    .mshd-portal-tickets-page .mshd-tickets-table {
        display: block;
        overflow-x: auto;
    }
    
    .mshd-portal-tickets-page .mshd-filters-bar {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ==========================================================================
   Single Ticket View (Portal Match to Admin)
   ========================================================================== */

/* Layout Container */
.mshd-ticket-layout {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    align-items: flex-start;
}

.mshd-ticket-sidebar {
    width: 300px;
    flex-shrink: 0;
}

/* Sidebar Cards */
.mshd-sidebar-card {
    background: #fff;
    border: 1px solid #ccd0d4;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px; /* Slight rounding for portal feel */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.mshd-sidebar-card h3 {
    margin: 0 0 15px 0;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    color: #1d2327;
}

.mshd-sidebar-field .mshd-field-value,
.mshd-sidebar-field .mshd-text-value {
    font-size: 13px;
    color: #2c3338;
}

.mshd-sidebar-field:last-child {
    margin-bottom: 0;
}

/* Ticket Details Summary Rows (Default to 14px on desktop to match rest of details) */
.mshd-ticket-summary-row {
    font-size: 14px;
}

/* Customer Info Card in Sidebar */
.mshd-customer-info-content .mshd-info-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    font-size: 13px;
    line-height: 1.4;
}

.mshd-info-row .mshd-info-icon {
    margin-right: 8px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.mshd-info-row:last-child {
    margin-bottom: 0;
}

.mshd-text-muted {
    color: #646970;
}

/* Reply Thread Styles */
.mshd-replies-thread {
    margin-bottom: 30px;
}

.mshd-replies-thread h3 {
    font-size: 18px;
    color: #1d2327;
    margin: 0 0 20px;
}

/* Consecutive replies - reduced spacing but keep avatar visible */
.mshd-reply.mshd-reply-consecutive {
    margin-top: -12px;
}

/* Avatar */
.mshd-reply-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Agent Badge */
.mshd-agent-badge {
    display: block;
    margin-top: 3px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
    padding: 1px 4px;
    border-radius: 3px;
    text-align: center;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Reply Bubble */
.mshd-reply-bubble {
    flex: 1;
    max-width: 80%; /* Only 80% width for SMS/text feel */
    min-width: 0; /* allow shrinking below pre/code min-content width so overflow-x can scroll instead of blowing out the bubble */
    border-radius: 12px;
    padding: 12px 16px;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.mshd-reply-author-name {
    font-size: 14px;
    color: #1d2327;
}

.mshd-reply-time {
    font-size: 12px;
    color: var(--mshd-text-muted, #646970);
}

.mshd-reply-content p {
    margin: 0 0 1em;
}

.mshd-reply-content p:last-child {
    margin-bottom: 0;
}

.mshd-reply-content .mshd-kb-card {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin: 14px 0;
	padding: 18px;
	border: 1px solid #d7dee5;
	border-radius: 14px;
	background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
	box-shadow: 0 6px 18px rgba(34, 113, 177, 0.08);
}

.mshd-reply-content .mshd-kb-card__media {
	flex: 0 0 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 8px;
	border-radius: 12px;
	background: #edf5fb;
}

.mshd-reply-content .mshd-kb-card__icon {
	display: block;
	width: 40px;
	height: 40px;
	max-width: 40px;
	margin: 0;
	object-fit: contain;
}

.mshd-reply-content .mshd-kb-card__body {
	flex: 1 1 auto;
	min-width: 0;
}

.mshd-reply-content .mshd-kb-card__eyebrow {
	margin: 0 0 4px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mshd-color-primary);
}

.mshd-reply-content .mshd-kb-card__title {
	margin: 0 0 4px;
	font-size: 18px;
	line-height: 1.1;
	font-weight: 700;
}

.mshd-reply-content .mshd-kb-card__title a {
	color: #163a63;
	text-decoration: none;
	border-bottom: 2px solid rgba(34, 113, 177, 0.18);
	padding-bottom: 1px;
}

.mshd-reply-content .mshd-kb-card__excerpt {
	margin: 0 0 4px;
	font-size: 12px;
	line-height: 1.35;
	color: #43515f;
}

.mshd-reply-content .mshd-kb-card__action {
	margin: 0;
	font-size: 12px;
	line-height: 1.2;
	font-weight: 600;
}

.mshd-reply-content .mshd-kb-card__action a {
	color: var(--mshd-color-primary);
	text-decoration: none;
}

@media (max-width: 782px) {
	.mshd-reply-content .mshd-kb-card {
		flex-direction: column;
	}
}

/* Customer Reply Style (Regular Users/Org Managers) - Gray, Left-Aligned */
.mshd-reply-customer {
    flex-direction: row;
}

.mshd-reply-customer .mshd-reply-bubble {
    background: #f5f5f5;
    color: #1d2327;
    border: 2px solid #707779;
    border-top-left-radius: 4px; /* Squared corner for speaker attribution */
}

/* Agent Reply Style (Admins/Staff) - Blue, Right-Aligned */
.mshd-reply-agent {
    flex-direction: row-reverse;
}

.mshd-reply-agent .mshd-reply-bubble {
    background: #eef9fc;
    color: #1d2327;
    border: 2px solid var(--mshd-color-primary);
    border-top-right-radius: 4px; /* Squared corner for speaker attribution */
}

.mshd-reply-agent .mshd-reply-header {
    flex-direction: row-reverse;
}

/* Reply Form Card */
.mshd-reply-form-card {
    background: #fff;
    border: 1px solid #ccd0d4;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.mshd-reply-form-card .mshd-form-field {
    margin-bottom: 15px;
}

/* Attachments List */
.mshd-attachments-list {
    margin-top: 15px;
    background: #f6f7f7;
    padding: 10px;
    border-radius: 4px;
}

.mshd-attachments-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mshd-attachment-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    line-height: 1.4;
}

.mshd-attachment-item svg {
    display: block;
    flex-shrink: 0;
    margin-top: 2px;
    line-height: 1.4;
    color: #646970;
    font-size: 11px;
}

.mshd-status-badge,
.mshd-priority-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: #fff;
}

/* Mobile Responsiveness */
@media (max-width: 782px) {
    .mshd-ticket-layout {
        flex-direction: column;
    }

	.mshd-ticket-title-bar {
		flex-wrap: wrap;
	}

	.mshd-ticket-title-bar .mshd-title-right {
		margin-left: 0;
	}
    
    .mshd-ticket-sidebar {
        width: 100%;
    }
    
    .mshd-reply {
        gap: 10px;
    }
    
    .mshd-reply-avatar img {
        width: 32px;
        height: 32px;
    }
}

/* Title Bar Styles */
.mshd-ticket-title-bar {
    display: flex;
	align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px;
	flex-wrap: nowrap;
    gap: 15px;
}

.mshd-ticket-title-bar .mshd-title-left {
	flex: 1 1 auto;
	min-width: 0;
}

.mshd-ticket-title-bar .mshd-title-right {
	flex: 0 0 auto;
	margin-left: auto;
	align-self: flex-start;
}

.mshd-ticket-title-bar a.button.mshd-btn-back,
.mshd-ticket-title-bar a.button.mshd-back-link,
.mshd-ticket-title-bar a.button.mshd-btn-logout {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px;
	text-decoration: none !important;
	box-sizing: border-box !important;
	white-space: nowrap;
}

.mshd-ticket-title-bar a.button.mshd-btn-back:hover,
.mshd-ticket-title-bar a.button.mshd-btn-back:focus,
.mshd-ticket-title-bar a.button.mshd-back-link:hover,
.mshd-ticket-title-bar a.button.mshd-back-link:focus,
.mshd-ticket-title-bar a.button.mshd-btn-logout:hover,
.mshd-ticket-title-bar a.button.mshd-btn-logout:focus {
	text-decoration: none !important;
}

.mshd-btn-back,
.mshd-back-link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px;
	text-decoration: none !important;
	box-sizing: border-box !important;
	white-space: nowrap;
}

.mshd-btn-back:hover,
.mshd-btn-back:focus,
.mshd-back-link:hover,
.mshd-back-link:focus {
	text-decoration: none !important;
}

.mshd-ticket-title {
    margin: 0;
    font-size: 24px;
    color: #1d2327;
	flex: 1;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.mshd-portal-ticket .mshd-ticket-title-bar {
	display: block;
}

.mshd-ticket-form .mshd-ticket-title-bar {
	display: block;
}

.mshd-portal-ticket .mshd-ticket-top-actions {
	display: flex !important;
	align-items: flex-start;
	justify-content: space-between;
	gap: 15px;
	margin-bottom: 16px;
	width: 100% !important;
}

.mshd-portal-ticket .mshd-ticket-top-actions .mshd-btn-back {
	margin-right: auto !important;
	float: none !important;
}

.mshd-portal-ticket .mshd-ticket-top-actions .mshd-btn-logout {
	margin-left: auto !important;
	float: right !important;
}

.mshd-portal-ticket .mshd-ticket-title {
	margin: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.mshd-ticket-form .mshd-ticket-title {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin: 0;
	overflow-wrap: normal;
	word-break: normal;
	white-space: normal;

}

.mshd-ticket-form .mshd-ticket-title svg {
	flex: 0 0 auto;
}

.mshd-ticket-number {
    font-weight: 400;
    color: #646970;
    margin-left: 8px;
    font-size: 0.8em;
}

/* Ensure HR matches admin style */
hr.wp-header-end {
    margin: 0 0 20px 0;
    border: 0;
    border-top: 1px solid #ddd;
}

/* ========================================
   Form Controls
   ======================================== */

.mshd-form-control {
	display: block;
	width: 100%;
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: #0f172a;
	background-color: #ffffff;
	background-clip: padding-box;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	box-sizing: border-box;
    max-width: 100%;
}

.mshd-form-control:focus {
	color: #0f172a;
	background-color: #ffffff;
	border-color: #3b82f6;
	outline: 0;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

select.mshd-form-control {
    padding-right: 2.5rem; /* space for arrow */
    min-height: 38px;
}

/* ========================================
   Sidebar Custom Field Tweaks
   ======================================== */

.mshd-ticket-sidebar .mshd-custom-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.mshd-ticket-sidebar .mshd-custom-field label {
    margin-bottom: 0.25rem;
    display: block;
}

.mshd-ticket-sidebar .mshd-custom-field .mshd-field-value {
    width: 100%;
}

/* Disabled button state for Update Ticket */
.mshd-form-actions button.disabled {
    opacity: 0.7;
    cursor: wait;
}

/* Portal navigation button layout helpers */
.mshd-btn-logout {
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    vertical-align: middle;
    gap: 6px;
    box-sizing: border-box !important;
    white-space: nowrap;
}

.mshd-btn-logout:hover,
.mshd-btn-logout:focus {
    text-decoration: none !important;
}

.mshd-btn-logout svg {
    display: block;
    flex-shrink: 0;
}

.mshd-btn-back svg {
    display: block;
    flex-shrink: 0;
}

/* ========================================
   Floating Scroll Navigation Buttons
   Phase 0.6.4: Portal floating scroll buttons
   ======================================== */

/* Button container */

.mshd-portal-ticket .mshd-scroll-buttons {
	position: fixed;
	bottom: 40px;
	right: 15px;
	left: auto;
	top: auto;
	float: none;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	margin: 0;
}

.mshd-portal-ticket .mshd-scroll-buttons,
.mshd-portal-ticket .mshd-scroll-buttons.visible {
	position: fixed !important;
	right: 15px !important;
	bottom: 40px !important;
	left: auto !important;
	top: auto !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 8px !important;
	z-index: 9999 !important;
	float: none !important;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	margin: 0;
}

.mshd-portal-ticket .mshd-scroll-buttons.visible {
	opacity: 1;
	pointer-events: auto;
}

/* Individual buttons */
.mshd-portal-ticket .mshd-scroll-btn {
	width: 28px;
	height: 28px;
	border: 1px solid rgba(34, 113, 177, 0.25);
	border-radius: 4px;
	background: #fff;
	color: var(--mshd-color-primary);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: none;
	transition: background 0.2s ease, border-color 0.2s ease;
	position: relative;
	margin: 0;
	float: none;
}

.mshd-portal-ticket .mshd-scroll-btn:hover {
	background: rgba(34, 113, 177, 0.08);
	border-color: rgba(34, 113, 177, 0.6);
}

.mshd-portal-ticket .mshd-scroll-btn:focus {
	outline: 2px solid var(--mshd-color-primary);
	outline-offset: 3px;
}

.mshd-portal-ticket .mshd-scroll-btn:active {
	background: rgba(34, 113, 177, 0.12);
}

.mshd-portal-ticket .mshd-scroll-btn svg {
	width: 18px;
	height: 18px;
	stroke-width: 2;
}

/* Tooltips (left-positioned) */
.mshd-portal-ticket .mshd-scroll-btn::after {
	content: attr(title);
	position: absolute;
	right: 100%;
	top: 50%;
	transform: translateY(-50%);
	margin-right: 8px;
	padding: 4px 8px;
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	font-size: 12px;
	white-space: nowrap;
	border-radius: 3px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease 0.3s;
}

.mshd-portal-ticket .mshd-scroll-btn:hover::after {
	opacity: 1;
}

/* Responsive: Hide on mobile */
@media (max-width: 600px) {
	.mshd-portal-ticket .mshd-scroll-buttons {
		display: none;
	}
}

/* Tablet adjustments */
@media (max-width: 782px) and (min-width: 601px) {
	.mshd-portal-ticket .mshd-scroll-buttons {
		bottom: 30px;
		right: 20px;
	}
	
	.mshd-portal-ticket .mshd-scroll-btn {
		width: 44px;
		height: 44px;
	}
	
	.mshd-portal-ticket .mshd-scroll-btn svg {
		width: 14px;
		height: 14px;
	}
}

/* ==========================================================================
   Reply Truncation (Phase 0.6.4)
   ========================================================================== */

.mshd-reply-truncated {
	position: relative;
}

.mshd-reply-visible {
	position: relative;
	padding-bottom: 10px;
}

.mshd-reply-fade {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 60px;
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	pointer-events: none;
}

.mshd-reply-css-truncated:not(.expanded) .mshd-reply-visible {
	max-height: 18em;
	overflow: hidden;
}

.mshd-reply-css-truncated.expanded .mshd-reply-visible {
	max-height: none;
}

.mshd-reply-hidden {
	padding-top: 10px;
}

.mshd-show-more-btn,
.mshd-show-less-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	padding: 6px 12px;
	border: 1px solid #dcdcde;
	background: #f6f7f7;
	color: #2c3338;
	cursor: pointer;
	font-size: 13px;
	border-radius: 3px;
	transition: all 0.2s ease;
}

.mshd-show-more-btn:hover,
.mshd-show-less-btn:hover {
	background: #fff;
	border-color: var(--mshd-color-primary);
	color: var(--mshd-color-primary);
}

.mshd-show-more-btn svg,
.mshd-show-less-btn svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* When expanded, remove fade gradient */
.mshd-reply-truncated.expanded .mshd-reply-fade {
	display: none;
}

/* ==========================================================================
   MOBILE RESPONSIVE IMPROVEMENTS (Phase 0.6.1)
   Card-based layout for ticket list on mobile devices
   ========================================================================== */

/* Mobile: Transform table to card-based layout */
@media (max-width: 768px) {
	/* Ensure container is block */
	.mshd-portal-tickets-page .mshd-tickets-table.wp-list-table {
		display: block !important;
	}

	/* Hide table header and footer on mobile */
	.mshd-portal-tickets-page .mshd-tickets-table thead,
	.mshd-portal-tickets-page .mshd-tickets-table tfoot {
		display: none !important;
	}
	
	/* Transform table to block layout */
	.mshd-portal-tickets-page .mshd-tickets-table,
	.mshd-portal-tickets-page .mshd-tickets-table tbody,
	.mshd-portal-tickets-page .mshd-tickets-table tr,
	.mshd-portal-tickets-page .mshd-tickets-table td {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	.mshd-portal-tickets-page .mshd-table-scroll {
		overflow-x: hidden;
	}
	
	/* Remove table borders */
	.mshd-portal-tickets-page .wp-list-table {
		border: none;
		box-shadow: none;
	}
	
	/* Card-style rows - COMPACT 3-LINE LAYOUT */
	.mshd-portal-tickets-page .mshd-tickets-table tbody tr {
		background: #fff !important;
		border: 1px solid #d0d5dd;
		border-radius: 6px;
		margin-bottom: 8px;
		padding: 8px 10px;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
		transition: box-shadow 0.2s ease;
	}
	
	.mshd-portal-tickets-page .mshd-tickets-table tbody tr:hover {
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
		background: #fff !important;
	}
	
	/* Empty state */
	.mshd-portal-tickets-page .mshd-tickets-table tbody tr td.mshd-empty-state {
		padding: 40px 20px;
		text-align: center;
		color: #646970;
		font-size: 15px;
	}
	
	/* Reset table cell styles */
	.mshd-portal-tickets-page .mshd-tickets-table td {
		padding: 0 !important;
		border: none !important;
		text-align: left !important;
	}
	
	/* LINE 1: Badge + Ticket# + Subject */
	.mshd-portal-tickets-page .mshd-tickets-table tbody tr td:nth-child(1) {
		padding: 0 !important;
		margin-bottom: 4px;
		border: none !important;
	}
	
	.mshd-portal-tickets-page .mshd-ticket-row-main {
		gap: 6px;
		align-items: center;
		margin-bottom: 3px;
	}
	
	.mshd-portal-tickets-page .mshd-ticket-subject {
		font-size: 14px !important;
		font-weight: 600 !important;
		line-height: 1.3 !important;
		margin: 0;
		display: inline;
		word-wrap: break-word;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		flex: 1;
		min-width: 0;
	}
	
	.mshd-portal-tickets-page .mshd-ticket-number {
		font-size: 13px !important;
		display: inline;
		margin: 0;
		flex-shrink: 0;
	}
	
	.mshd-portal-tickets-page .mshd-reply-badge {
		width: 22px;
		height: 22px;
		font-size: 11px;
		min-width: 22px;
		flex-shrink: 0;
	}
	
	.mshd-portal-tickets-page .mshd-merged-ticket-icon {
		width: 16px;
		height: 16px;
		flex-shrink: 0;
	}
	
	/* LINE 2: Preview text (show it!) */
	.mshd-portal-tickets-page .mshd-ticket-row-preview {
		display: block !important;
		padding: 0;
		margin: 0 0 4px 0;
		line-height: 1.3;
	}
	
	.mshd-portal-tickets-page .mshd-ticket-row-preview a {
		color: #646970;
		font-size: 12px;
		line-height: 1.3;
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	/* LINE 3: Status + Priority + Last Reply */
	/* Hide status/priority columns, created column - we'll show differently */
	.mshd-portal-tickets-page .mshd-tickets-table tbody tr td:nth-child(3),
	.mshd-portal-tickets-page .mshd-tickets-table tbody tr td:nth-child(4),
	.mshd-portal-tickets-page .mshd-tickets-table tbody tr td:nth-child(5) {
		display: none !important;
	}
	
	/* Last Reply column becomes line 3 */
	.mshd-portal-tickets-page .mshd-tickets-table tbody tr td:nth-child(6) {
		display: flex !important;
		align-items: center;
		gap: 4px;
		flex-wrap: nowrap;
		padding: 0 !important;
		margin: 0 !important;
		overflow: hidden;
	}
	
	.mshd-portal-tickets-page .mshd-mobile-status,
	.mshd-portal-tickets-page .mshd-mobile-priority,
	.mshd-portal-tickets-page .mshd-mobile-created,
	.mshd-portal-tickets-page .mshd-mobile-last-reply {
		display: inline-flex;
		align-items: center;
		height: 14px;
		line-height: 14px;
		font-size: 10px;
		font-weight: 600;
		border-radius: 3px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		box-sizing: border-box;
	}
	
	.mshd-portal-tickets-page .mshd-mobile-status,
	.mshd-portal-tickets-page .mshd-mobile-priority {
		width: 20%;
		flex: 0 0 20%;
		justify-content: center;
		color: #fff;
		padding: 0 4px;
		border: 1px solid rgba(0, 0, 0, 0.2);
	}
	
	.mshd-portal-tickets-page .mshd-mobile-status {
		background: var(--status-color, #646970);
	}
	
	.mshd-portal-tickets-page .mshd-mobile-priority {
		background: var(--priority-color, #646970);
	}
	
	.mshd-portal-tickets-page .mshd-mobile-created,
	.mshd-portal-tickets-page .mshd-mobile-last-reply {
		width: 30%;
		flex: 0 0 30%;
		justify-content: flex-start;
		font-weight: 600;
		color: #2c3338;
		min-width: 0;
	}
	
	.mshd-portal-tickets-page .mshd-mobile-created span,
	.mshd-portal-tickets-page .mshd-mobile-last-reply span {
		color: #8c8f94;
		margin-right: 4px;
		font-weight: 500;
	}
	
	.mshd-portal-tickets-page .mshd-mobile-created time,
	.mshd-portal-tickets-page .mshd-mobile-last-reply time,
	.mshd-portal-tickets-page .mshd-mobile-last-reply .mshd-no-replies {
		font-size: 10px;
		font-weight: 500;
		color: #2c3338;
	}
	
	/* Header adjustments for mobile */
	.mshd-portal-tickets-page h1.wp-heading-inline {
		font-size: 24px;
		line-height: 1.3;
		display: flex;
		align-items: center;
		gap: 10px;
		margin-bottom: 16px;
	}
	
	.mshd-portal-tickets-page .mshd-heading-icon {
		width: 32px !important;
		height: 32px !important;
	}
	
	/* Header actions - side by side on mobile */
	.mshd-header-actions {
		float: none !important;
		display: flex;
		flex-direction: row;
		gap: 8px;
		margin-bottom: 20px;
	}
	
	.mshd-header-actions .button {
		flex: 1;
		justify-content: center;
		min-height: 44px !important;
		font-size: 14px !important;
		display: flex !important;
		align-items: center !important;
		gap: 6px;
		padding: 0 8px !important;
	}
	
	.mshd-header-actions .button svg {
		width: 16px;
		height: 16px;
		flex-shrink: 0;
	}
	
	/* Filters bar - compact side-by-side on mobile */
	.mshd-portal-tickets-page .mshd-filters-bar {
		padding: 10px;
		margin: 0 0 12px;
	}
	
	.mshd-portal-tickets-page .mshd-filters-form {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px;
		width: 100%;
	}
	
	/* Status and Priority on same row */
	.mshd-portal-tickets-page #mshd-filter-status,
	.mshd-portal-tickets-page #mshd-filter-priority {
		width: 48%;
		max-width: 48%;
		min-height: 44px;
		font-size: 14px;
		padding: 0 8px;
		flex: 1 1 48%;
	}
	
	/* Customer and Organization filters full width on mobile */
	.mshd-portal-tickets-page #mshd-filter-customer,
	.mshd-portal-tickets-page #mshd-filter-organization {
		width: 100%;
		max-width: 100%;
		min-height: 44px;
		font-size: 14px;
		padding: 0 8px;
	}
	
	.mshd-portal-tickets-page .mshd-inline-filter {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 6px 0;
		font-size: 14px;
		width: auto;
		flex: 0 0 auto;
		order: 2;
	}
	
	.mshd-portal-tickets-page .mshd-inline-filter input[type="checkbox"] {
		width: 20px;
		height: 20px;
		margin: 0;
	}
	
	/* Filter buttons */
	.mshd-portal-tickets-page .mshd-filters-form .button {
		width: 100%;
		min-height: 44px;
		font-size: 14px;
		justify-content: center;
	}

	/* Keep Clear Filters below search on mobile */
	.mshd-portal-tickets-page #mshd-clear-filters {
		order: 4;
		width: 100%;
	}
	
	/* Search inline with Hide Closed */
	.mshd-portal-tickets-page .mshd-search-inline {
		flex: 1 1 70%;
		width: 70%;
		display: flex;
		align-items: center;
		order: 3;
		min-width: 0;
	}
	
	.mshd-portal-tickets-page .mshd-search-inline input[type="search"] {
		width: 100%;
		min-height: 44px;
		font-size: 15px;
		padding: 0 12px;
		box-sizing: border-box;
		min-width: 0;
	}
	
	/* Active filters bar */
	.mshd-active-filters-bar {
		padding: 12px;
		margin-bottom: 12px;
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	
	.mshd-filter-tags {
		width: 100%;
	}
	
	.mshd-filter-tag {
		font-size: 13px;
		padding: 6px 10px 6px 12px;
	}
	
	.mshd-filter-tag .mshd-remove-filter {
		width: 20px;
		height: 20px;
		font-size: 16px;
	}
	
	/* Pagination - better touch targets */
	.mshd-portal-tickets-page .tablenav-pages a,
	.mshd-portal-tickets-page .tablenav-pages span.current {
		min-width: 44px;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 8px 12px;
		font-size: 15px;
		width: auto;
		flex: 0 0 auto;
	}
	
	.mshd-portal-tickets-page .tablenav-pages .displaying-num {
		font-size: 14px;
		padding: 8px 0;
		display: block;
		width: 100%;
		text-align: center;
		margin-bottom: 8px;
	}
	
	/* Pagination container - center and wrap */
	.mshd-portal-tickets-page .tablenav-pages {
		text-align: center;
	}
	
	.mshd-portal-tickets-page .pagination-links {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 4px;
	}
}

/* Extra small devices (phones < 480px) */
@media (max-width: 480px) {
	.mshd-portal-tickets-page {
		padding: 0 8px;
	}
	
	.mshd-portal-tickets-page .mshd-tickets-table tbody tr {
		padding: 10px;
		margin-bottom: 8px;
		border-radius: 4px;
	}
	
	.mshd-portal-tickets-page h1.wp-heading-inline {
		font-size: 20px;
	}
	
	.mshd-portal-tickets-page .mshd-heading-icon {
		width: 28px !important;
		height: 28px !important;
	}
	
	.mshd-portal-tickets-page .mshd-ticket-subject {
		font-size: 14px !important;
	}
	
	.mshd-portal-tickets-page .mshd-ticket-number {
		font-size: 12px !important;
	}
	
	.mshd-portal-tickets-page .mshd-ticket-row-preview a {
		font-size: 12px;
	}
	
	/* Smaller color blocks on very small screens */
	.mshd-portal-tickets-page .mshd-tickets-table tbody tr td:nth-child(5)::before,
	.mshd-portal-tickets-page .mshd-tickets-table tbody tr td:nth-child(5)::after {
		width: 12px;
		height: 12px;
	}
	
	.mshd-portal-tickets-page .mshd-last-reply-column::before {
		font-size: 11px;
	}
	
	.mshd-portal-tickets-page .mshd-tickets-table time {
		font-size: 11px;
	}
	
	.mshd-header-actions .button {
		font-size: 13px !important;
		padding: 0 6px !important;
	}
	
	.mshd-header-actions .button svg {
		width: 14px;
		height: 14px;
	}
}

/* ========================================
   YooTheme Conflict Fix - Custom Table Class
   ======================================== */

/* Using 'body' prefix to increase specificity over Theme CSS */
body .mshd-portal-tickets-page .mshd-portal-table {
	display: table !important;
	table-layout: fixed !important;
	border-collapse: collapse !important;
	width: 100% !important;
	margin-bottom: 20px !important;
	background: #fff !important;
	border: 1px solid #c3c4c7 !important;
	box-shadow: 0 1px 1px rgba(0,0,0,0.04) !important;
	
	/* Reset positioning to prevent theme conflicts */
	position: static !important;
	float: none !important;
	clear: both !important;
	margin-top: 20px !important;
}

body .mshd-portal-tickets-page .mshd-portal-table th,
body .mshd-portal-tickets-page .mshd-portal-table td {
	padding: 8px 10px !important;
	text-align: left !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	vertical-align: middle !important;
	word-wrap: break-word !important;
	border-bottom: 1px solid #c3c4c7 !important;
}

body .mshd-portal-tickets-page .mshd-portal-table th {
	font-weight: 600 !important;
	color: #1d2327 !important;
	background: #f0f0f1 !important;
}

body .mshd-portal-tickets-page .mshd-portal-table tr {
	display: table-row !important;
}

/* Striping */
body .mshd-portal-tickets-page .mshd-portal-table tr:nth-child(odd) {
	background-color: #f6f7f7 !important;
}

body .mshd-portal-tickets-page .mshd-portal-table tr:nth-child(even) {
	background-color: #fff !important;
}

body .mshd-portal-tickets-page .mshd-portal-table tr:hover {
	background-color: #f0f6fc !important;
}

/* Force HIDE Mobile Elements on Desktop (New Table Class) */
body .mshd-portal-tickets-page .mshd-portal-table .mshd-mobile-status,
body .mshd-portal-tickets-page .mshd-portal-table .mshd-mobile-priority,
body .mshd-portal-tickets-page .mshd-portal-table .mshd-mobile-created,
body .mshd-portal-tickets-page .mshd-portal-table .mshd-mobile-last-reply {
    display: none !important;
}

/* Mobile Responsive - Table Reset */
@media (max-width: 768px) {
	body .mshd-portal-tickets-page .mshd-portal-table {
		display: block !important;
		border: none !important;
		box-shadow: none !important;
	}

	body .mshd-portal-tickets-page .mshd-portal-table thead,
	body .mshd-portal-tickets-page .mshd-portal-table tfoot {
		display: none !important;
	}

	body .mshd-portal-tickets-page .mshd-portal-table tbody,
	body .mshd-portal-tickets-page .mshd-portal-table tr,
	body .mshd-portal-tickets-page .mshd-portal-table td {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	body .mshd-portal-tickets-page .mshd-portal-table td {
		padding: 0 !important;
		border: none !important;
	}
    
    /* Show Mobile Elements on Mobile */
    body .mshd-portal-tickets-page .mshd-portal-table .mshd-mobile-status,
    body .mshd-portal-tickets-page .mshd-portal-table .mshd-mobile-priority {
        display: inline-flex !important;
    }
    
    body .mshd-portal-tickets-page .mshd-portal-table .mshd-mobile-created,
    body .mshd-portal-tickets-page .mshd-portal-table .mshd-mobile-last-reply {
        display: inline-block !important;
    }
}


/* 
 * ==========================================================================
 * PORTAL TABLE LAYOUT FIXES (5/6-Column Layout)
 * ==========================================================================
 * Matches Admin/Blocks layout: [Subject+Ticket] [Status] [Priority] [Created] [Last Reply]
 */

/* 5-Column Defaults (Internal Customers) */
body .mshd-portal-tickets-page .mshd-portal-table th[data-col="ticket_number"],
body .mshd-portal-tickets-page .mshd-portal-table td.mshd-subject-column {
    width: 45% !important;
}

body .mshd-portal-tickets-page .mshd-portal-table th[data-col="status"],
body .mshd-portal-tickets-page .mshd-portal-table td.mshd-status-column {
    width: 15% !important;
}

body .mshd-portal-tickets-page .mshd-portal-table th[data-col="priority"],
body .mshd-portal-tickets-page .mshd-portal-table td.mshd-priority-column {
    width: 15% !important;
}

body .mshd-portal-tickets-page .mshd-portal-table th[data-col="created"],
body .mshd-portal-tickets-page .mshd-portal-table td.mshd-created-column {
    width: 10% !important;
}

body .mshd-portal-tickets-page .mshd-portal-table th[data-col="last_reply"],
body .mshd-portal-tickets-page .mshd-portal-table td.mshd-last-reply-column {
    width: 15% !important;
}

/* 6-Column Layout (Organization Managers) */
body .mshd-portal-tickets-page .mshd-portal-table.mshd-has-customer-col th[data-col="customer"],
body .mshd-portal-tickets-page .mshd-portal-table.mshd-has-customer-col td[data-col="customer"] {
    display: table-cell !important;
    width: 15% !important;
}

body .mshd-portal-tickets-page .mshd-portal-table.mshd-has-customer-col th[data-col="ticket_number"],
body .mshd-portal-tickets-page .mshd-portal-table.mshd-has-customer-col td.mshd-ticket-number-column {
    width: 35% !important;
}

body .mshd-portal-tickets-page .mshd-portal-table.mshd-has-customer-col th[data-col="status"],
body .mshd-portal-tickets-page .mshd-portal-table.mshd-has-customer-col td.mshd-status-column {
    width: 12% !important;
}

body .mshd-portal-tickets-page .mshd-portal-table.mshd-has-customer-col th[data-col="priority"],
body .mshd-portal-tickets-page .mshd-portal-table.mshd-has-customer-col td.mshd-priority-column {
    width: 12% !important;
}

body .mshd-portal-tickets-page .mshd-portal-table.mshd-has-customer-col th[data-col="created"],
body .mshd-portal-tickets-page .mshd-portal-table.mshd-has-customer-col td.mshd-created-column {
    width: 11% !important;
}

body .mshd-portal-tickets-page .mshd-portal-table.mshd-has-customer-col th[data-col="last_reply"],
body .mshd-portal-tickets-page .mshd-portal-table.mshd-has-customer-col td.mshd-last-reply-column {
    width: 15% !important;
}

/* Customer Column Specifics */
body .mshd-portal-tickets-page .mshd-customer-name {
    font-weight: 500 !important;
    color: #475569 !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* =========================================================================
   Close Request Feature (Phase 0.9.1)
   ========================================================================= */

/* Close-request reply — green tint */
.mshd-reply-close-request .mshd-reply-bubble {
	background: #f0fdf4 !important;
	border-color: #38a169 !important;
	box-shadow: 0 2px 4px rgba(56, 161, 105, 0.12);
}

/* Close-request badge in reply header */
.mshd-close-request-badge {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 1px 8px;
	font-size: 11px;
	font-weight: 600;
	color: #276749;
	background: #c6f6d5;
	border: 1px solid #9ae6b4;
	border-radius: 10px;
	line-height: 1.4;
	white-space: nowrap;
}

/* Mark Ticket Resolved checkbox and label */
.mshd-mark-resolved-label,
.mshd-send-copy-label {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	font-weight: 500;
	color: #276749;
	cursor: pointer;
	white-space: nowrap;
}

.mshd-mark-resolved-label input[type="checkbox"],
.mshd-send-copy-label input[type="checkbox"] {
	margin: 0;
}

/* Already-resolved note */
.mshd-resolved-note {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	font-weight: 500;
	color: #38a169;
}

/* OK TO CLOSE badge in portal ticket list (status column) */
.mshd-ok-to-close-badge {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin-top: 4px;
	padding: 2px 7px;
	font-size: 9px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	color: #15803d;
	background: #ffffff;
	border: 1px solid #15803d;
	border-radius: 3px;
	white-space: nowrap;
}

/* Subject Column Layout */
body .mshd-portal-tickets-page .mshd-ticket-cell {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

body .mshd-portal-tickets-page .mshd-ticket-row-main {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
}

/* Reply Badge (Red Circle) */
body .mshd-portal-tickets-page .mshd-reply-badge {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #d63638 !important;
    color: #fff !important;
    border-radius: 99px !important;
    min-width: 18px !important;
    height: 18px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
}

/* Ticket Number (#123) */
body .mshd-portal-tickets-page .mshd-ticket-number {
    flex-shrink: 0 !important;
    font-family: Consolas, Monaco, monospace !important;
    background: rgba(0,0,0,0.05) !important;
    padding: 0 4px !important;
    border-radius: 3px !important;
    color: #50575e !important;
    font-size: 11px !important;
    text-decoration: none !important;
    letter-spacing: -0.5px !important;
}

/* Subject Link */
body .mshd-portal-tickets-page .mshd-ticket-subject {
    color: var(--mshd-color-primary) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
body .mshd-portal-tickets-page .mshd-ticket-subject:hover {
    color: var(--mshd-color-primary-aaa) !important;
    text-decoration: underline !important;
}

/* Merged Icon */
body .mshd-portal-tickets-page .mshd-merged-ticket-icon {
    flex-shrink: 0 !important;
    color: #72777c !important;
}

/* Preview Text */
body .mshd-portal-tickets-page .mshd-ticket-row-preview,
body .mshd-portal-tickets-page .mshd-ticket-row-preview a {
    color: #646970 !important;
    font-size: 12px !important;
    text-decoration: none !important;
    display: block !important;
    width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-top: 0 !important;
}

/* Status & Priority Badges */
body .mshd-portal-tickets-page .mshd-portal-table .mshd-status-badge,
body .mshd-portal-tickets-page .mshd-portal-table .mshd-priority-badge {
    display: inline-block !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    text-align: center !important;
    min-width: 60px !important;
}

/* Ensure no text-wrapping for short columns */
body .mshd-portal-tickets-page .mshd-portal-table td.mshd-created-column, 
body .mshd-portal-tickets-page .mshd-portal-table td.mshd-last-reply-column {
    white-space: nowrap !important;
    color: #646970 !important;
    font-size: 12px !important;
}

/* Tickets table typography: bold header, regular footer */
body .mshd-portal-tickets-page .mshd-portal-table thead th,
body .mshd-portal-tickets-page .mshd-portal-table thead th a,
body .mshd-portal-tickets-page .mshd-portal-table thead th .mshd-sortable {
	font-weight: 700 !important;
}

body .mshd-portal-tickets-page .mshd-portal-table tfoot th,
body .mshd-portal-tickets-page .mshd-portal-table tfoot td,
body .mshd-portal-tickets-page .mshd-portal-table tfoot th a,
body .mshd-portal-tickets-page .mshd-portal-table tfoot th .mshd-sortable {
	font-weight: 400 !important;
}

/* Mobile Adjustments - Hide non-essential columns, stack content */
@media (max-width: 768px) {
    body .mshd-portal-tickets-page .mshd-portal-table th, 
    body .mshd-portal-tickets-page .mshd-portal-table td {
        width: 100% !important;
        display: block !important;
    }
    
    body .mshd-portal-tickets-page .mshd-ticket-row-main {
        flex-wrap: wrap !important;
    }
}

/* ==========================================================================
   Portal Mobile Layout Cleanup (Final Override)
   Keeps filters and actions readable on phones and removes duplicate footer row.
   ========================================================================== */
@media (max-width: 768px) {
	body .mshd-portal-tickets-page .wp-heading-inline {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-bottom: 14px;
	}

	body .mshd-portal-tickets-page .mshd-header-actions {
		float: none !important;
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		width: 100%;
		margin: 0 0 14px !important;
	}

	body .mshd-portal-tickets-page .mshd-header-actions .button {
		width: 100%;
		min-height: 44px !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center;
		gap: 6px;
		padding: 0 10px !important;
	}

	body .mshd-portal-tickets-page .mshd-filters-bar {
		padding: 12px !important;
		margin: 0 0 14px !important;
	}

	body .mshd-portal-tickets-page .mshd-filters-form {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 10px !important;
		align-items: stretch !important;
		width: 100% !important;
	}

	body .mshd-portal-tickets-page .mshd-filters-form select,
	body .mshd-portal-tickets-page .mshd-filters-form input[type="search"],
	body .mshd-portal-tickets-page .mshd-filters-form .mshd-toggle-closed,
	body .mshd-portal-tickets-page .mshd-filters-form #mshd-clear-filters,
	body .mshd-portal-tickets-page .mshd-filters-form .mshd-search-inline {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin: 0 !important;
	}

	body .mshd-portal-tickets-page .mshd-filters-form .button {
		min-height: 44px !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center;
		gap: 6px;
	}

	body .mshd-portal-tickets-page .mshd-filters-form .mshd-search-inline {
		display: block !important;
		order: 20 !important;
	}

	body .mshd-portal-tickets-page .mshd-layout-break {
		margin-bottom: 14px !important;
	}

	body .mshd-portal-tickets-page .mshd-tickets-table tfoot {
		display: none !important;
	}
}

@media (max-width: 480px) {
	body .mshd-portal-tickets-page .mshd-header-actions {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	body .mshd-portal-tickets-page .mshd-filters-bar .alignleft.actions {
		width: 100% !important;
		float: none !important;
		margin: 0 !important;
	}

	body .mshd-portal-tickets-page .mshd-filters-form > * {
		justify-self: stretch;
	}

	body .mshd-portal-tickets-page .mshd-tickets-table tbody tr td.mshd-empty-state {
		display: block !important;
		width: 100% !important;
		padding: 18px 14px !important;
		margin: 0 !important;
		border: 1px solid #d0d5dd !important;
		border-radius: 6px !important;
		background: #f8fafc !important;
		font-size: 16px !important;
		text-align: center !important;
	}
}

@media (max-width: 768px) {
	body .mshd-portal-container .tablenav.top .alignleft.actions {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	body .mshd-portal-container .mshd-filters-form {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 10px !important;
		width: 100% !important;
	}

	body .mshd-portal-container .mshd-filters-form select,
	body .mshd-portal-container .mshd-filters-form input[type="search"],
	body .mshd-portal-container .mshd-filters-form .button,
	body .mshd-portal-container .mshd-search-inline {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin: 0 !important;
	}

	body .mshd-portal-container .mshd-search-inline {
		margin-left: 0 !important;
		gap: 0 !important;
	}

	body .mshd-portal-tickets-page .mshd-header-actions {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 8px !important;
	}
}

body:has(.mshd-portal-tickets-page) .entry-title,
body:has(.mshd-portal-tickets-page) .uk-article-title,
body:has(.mshd-portal-tickets-page) .wp-block-post-title {
	display: none !important;
}

/* ==========================================================================
   Portal Mobile Filter Toggle UX (Final)
   ========================================================================== */
.mshd-btn-label-mobile {
	display: none;
}

@media (max-width: 768px) {
	body .mshd-portal-tickets-page .mshd-btn-label-full {
		display: none !important;
	}

	body .mshd-portal-tickets-page .mshd-btn-label-mobile {
		display: inline !important;
	}

	body .mshd-portal-tickets-page .mshd-header-actions {
		float: none !important;
		display: grid !important;
		grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) 44px !important;
		gap: 8px !important;
		align-items: stretch !important;
		width: 100% !important;
		margin-bottom: 14px !important;
	}

	body .mshd-portal-tickets-page .mshd-header-actions .button {
		min-height: 44px !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 6px;
		width: 100% !important;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		min-width: 0;
	}

	body .mshd-portal-tickets-page #mshd-mobile-filter-toggle {
		padding: 0 !important;
	}

	body .mshd-portal-tickets-page #mshd-mobile-filter-toggle.active {
		background: var(--mshd-color-primary) !important;
		border-color: var(--mshd-color-primary-aaa) !important;
		color: #fff !important;
	}

	body .mshd-portal-tickets-page #mshd-mobile-filter-toggle.active svg {
		stroke: currentColor !important;
	}

	body .mshd-portal-tickets-page #mshd-mobile-filter-toggle svg {
		margin: 0 !important;
	}

	body .mshd-portal-tickets-page .mshd-mobile-filter-panel .mshd-filters-form {
		display: none !important;
	}

	body .mshd-portal-tickets-page .mshd-mobile-filter-panel.mshd-mobile-filters-collapsed {
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
		padding: 0 !important;
		margin: 0 0 10px !important;
	}

	body .mshd-portal-tickets-page .mshd-mobile-filter-panel.mshd-mobile-filters-collapsed .mshd-filters-form {
		display: block !important;
	}

	body .mshd-portal-tickets-page .mshd-mobile-filter-panel.mshd-mobile-filters-collapsed .mshd-filters-form > * {
		display: none !important;
	}

	body .mshd-portal-tickets-page .mshd-mobile-filter-panel.mshd-mobile-filters-collapsed .mshd-search-inline {
		display: block !important;
		width: 100% !important;
		margin: 0 !important;
	}

	body .mshd-portal-tickets-page .mshd-mobile-filter-panel.mshd-mobile-filters-collapsed .mshd-search-inline input[type="search"] {
		width: 100% !important;
		min-height: 44px !important;
	}

	body .mshd-portal-tickets-page .mshd-mobile-filter-panel.mshd-mobile-filters-open .mshd-filters-form {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 10px !important;
		align-items: stretch !important;
	}

	body .mshd-portal-tickets-page .mshd-mobile-filter-panel .mshd-filters-form > * {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin: 0 !important;
	}

	body .mshd-portal-tickets-page .mshd-mobile-filter-panel .mshd-filters-form select,
	body .mshd-portal-tickets-page .mshd-mobile-filter-panel .mshd-filters-form input[type="search"],
	body .mshd-portal-tickets-page .mshd-mobile-filter-panel .mshd-filters-form .button {
		min-height: 44px !important;
	}

	body .mshd-portal-tickets-page .mshd-mobile-filter-panel #mshd-filter-status {
		grid-column: 1;
	}

	body .mshd-portal-tickets-page .mshd-mobile-filter-panel #mshd-filter-priority {
		grid-column: 2;
	}

	body .mshd-portal-tickets-page .mshd-mobile-filter-panel .mshd-toggle-closed {
		grid-column: 1;
	}

	body .mshd-portal-tickets-page .mshd-mobile-filter-panel .mshd-search-inline {
		grid-column: 2;
		display: block !important;
	}

	body .mshd-portal-tickets-page .mshd-mobile-filter-panel .mshd-search-inline input[type="search"] {
		width: 100% !important;
	}

	body .mshd-portal-tickets-page .mshd-mobile-filter-panel #mshd-filter-organization,
	body .mshd-portal-tickets-page .mshd-mobile-filter-panel #mshd-filter-customer,
	body .mshd-portal-tickets-page .mshd-mobile-filter-panel #mshd-clear-filters {
		grid-column: 1 / -1;
	}
}

/* =========================================================
   Code & Pre Formatting — rendered in reply/ticket content
   ========================================================= */
.mshd-reply-content code {
	font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
	font-size: 0.875em;
	background: #f3f4f6;
	color: #374151;
	padding: 0.15em 0.45em;
	border-radius: 4px;
	border: 1px solid #e5e7eb;
	white-space: pre-wrap;
	word-break: break-all;
}

.mshd-reply-content pre {
	font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
	font-size: 0.875em;
	background: #f3f4f6;
	color: #374151;
	padding: 1em 1.25em;
	border-radius: 6px;
	border: 1px solid #e5e7eb;
	overflow-x: auto;
	line-height: 1.6;
	margin: 0.75em 0;
	white-space: pre;
}

.mshd-reply-content pre code {
	background: none;
	color: inherit;
	padding: 0;
	border: none;
	border-radius: 0;
	font-size: inherit;
	white-space: inherit;
}

/* =========================================================
   TinyMCE modern polish — portal editors (new ticket form)
   ========================================================= */

.wp-editor-container {
	border: 1px solid #d1d5db !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	box-shadow: none !important;
}
.mce-tinymce.mce-container {
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	overflow: visible !important;
}
.mce-container .mce-toolbar-grp {
	background: #f9fafb !important;
	border-bottom: 1px solid #e5e7eb !important;
}
.mce-container .mce-btn {
	border: none !important;
	background: transparent !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	margin: 2px !important;
}
.mce-container .mce-btn:hover,
.mce-container .mce-btn.mce-active {
	background: #e5e7eb !important;
	border: none !important;
	box-shadow: none !important;
}
.mce-container .mce-btn button {
	padding: 6px 8px !important;
	color: #374151 !important;
}
.mce-container .mce-ico {
	color: #374151 !important;
	font-size: 18px !important;
	line-height: 1 !important;
}
.mce-container .mce-btn-group:not(:first-child) {
	border-left: 1px solid #e5e7eb !important;
	margin-left: 4px !important;
	padding-left: 4px !important;
}
.mce-container .mce-edit-area {
	border: none !important;
}
.mce-container .mce-listbox button {
	border: none !important;
	border-radius: 6px !important;
	background: transparent !important;
	color: #374151 !important;
	font-size: 13px !important;
	padding: 6px 8px !important;
}
.mce-container .mce-listbox.mce-active button,
.mce-container .mce-listbox:hover button {
	background: #e5e7eb !important;
}
.mce-container .mce-colorbutton .mce-open {
	border-left: 1px solid #e5e7eb !important;
}
.mce-container .mce-colorbutton button {
	padding: 6px 8px !important;
}
/* ==========================================================================
   Inline Image Preview & Lightbox
   ========================================================================== */

.mshd-attachment-item-image {
	display: block !important;
	overflow: hidden;
	align-items: initial;
	gap: 0;
}

.mshd-attachments-list .mshd-attachment-item.mshd-attachment-item-image {
	display: block !important;
}

.mshd-inline-image-link {
	display: block;
	line-height: 0;
}

.mshd-inline-image {
	display: block;
	max-width: 100%;
	height: auto;
	object-fit: contain;
	border-radius: 4px;
	cursor: pointer;
	border: 1px solid #e5e7eb;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mshd-inline-image:hover {
	border-color: var(--mshd-color-primary);
	box-shadow: 0 0 0 1px var(--mshd-color-primary);
}

.mshd-inline-image-meta {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 4px;
	font-size: 12px;
}

.mshd-attachment-item-image .mshd-inline-image-meta {
	display: flex;
	width: 100%;
}

.mshd-inline-image-meta .mshd-attachment-link {
	font-size: 12px;
}

.mshd-lightbox {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.85);
	z-index: 999999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	cursor: default;
}

.mshd-lightbox img {
	max-width: 90vw;
	max-height: 80vh;
	object-fit: contain;
	border-radius: 4px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.mshd-lightbox-toolbar {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 12px;
}

.mshd-lightbox-filename {
	color: rgba(255, 255, 255, 0.8);
	font-size: 13px;
}

.mshd-lightbox-download {
	color: #fff;
	text-decoration: none;
	font-size: 13px;
	background: rgba(255, 255, 255, 0.15);
	padding: 4px 12px;
	border-radius: 3px;
	transition: background 0.15s ease;
}

.mshd-lightbox-download:hover {
	background: rgba(255, 255, 255, 0.25);
	color: #fff;
}

.mshd-lightbox-close {
	position: absolute;
	top: 16px;
	right: 16px;
	background: rgba(255, 255, 255, 0.15);
	border: none;
	color: #fff;
	font-size: 24px;
	line-height: 1;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease;
}

.mshd-lightbox-close:hover {
	background: rgba(255, 255, 255, 0.3);
}

/* Portal Update Notifications */
.mshd-update-notification.mshd-portal-update-toast {
	position: fixed;
	top: 40px;
	right: 20px;
	z-index: 99999;
	width: min(360px, calc(100vw - 24px));
	background: #fff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	border-left: 4px solid var(--mshd-color-primary);
	border-radius: 6px;
	margin: 0;
	padding: 12px 36px 12px 12px;
	animation: mshd-slide-down 0.3s ease-out;
	box-sizing: border-box;
}

.mshd-portal-update-toast .notice-dismiss {
	position: absolute;
	top: 10px;
	right: 10px;
	background: none;
	border: 0;
	padding: 0;
	width: 20px;
	height: 20px;
	line-height: 20px;
	font-size: 20px;
	color: #646970;
	cursor: pointer;
}

.mshd-portal-update-toast .notice-dismiss:hover {
	color: #1d2327;
}

.mshd-portal-update-toast .mshd-notification-content {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0;
}

.mshd-portal-update-toast .mshd-notification-icon {
	color: var(--mshd-color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.mshd-portal-update-toast .mshd-notification-message {
	flex: 1;
	font-size: 14px;
	color: #1d2327;
	line-height: 1.4;
}

.mshd-portal-update-toast .mshd-notification-action,
.mshd-portal-update-toast .mshd-refresh-btn,
.mshd-portal-update-toast .mshd-refresh-ticket-list-btn {
	margin-left: auto;
	white-space: nowrap;
	flex-shrink: 0;
}

@keyframes mshd-slide-down {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Ticket List Update Indicators */
body .mshd-portal-tickets-page .mshd-tickets-table tbody tr.has-unread-notifications td:first-child {
	position: relative;
	box-shadow: inset 4px 0 0 0 #9ebf71;
}

body .mshd-portal-tickets-page .mshd-tickets-table tbody tr.has-unread-notifications {
	background: linear-gradient(90deg, rgba(158, 191, 113, 0.12), rgba(158, 191, 113, 0));
}

body .mshd-portal-tickets-page .mshd-tickets-table tbody tr.mshd-updated {
	animation: mshd-portal-ticket-highlight 1.2s ease;
}

@keyframes mshd-portal-ticket-highlight {
	0% {
		background-color: rgba(158, 191, 113, 0.35);
	}
	100% {
		background-color: transparent;
	}
}

@media (max-width: 768px) {
	.mshd-update-notification.mshd-portal-update-toast {
		top: 16px;
		right: 12px;
		left: 12px;
		width: auto;
	}

	.mshd-portal-update-toast .mshd-notification-content {
		flex-wrap: wrap;
		align-items: flex-start;
	}

	.mshd-portal-update-toast .mshd-notification-message {
		flex-basis: calc(100% - 32px);
	}

	.mshd-portal-update-toast .mshd-notification-action,
	.mshd-portal-update-toast .mshd-refresh-btn,
	.mshd-portal-update-toast .mshd-refresh-ticket-list-btn {
		margin-left: 32px;
	}
}

/* ==========================================================================
   TABLET RESPONSIVE — Prevent horizontal overflow at intermediate widths
   Applies between desktop (>1024px) and the mobile card view (≤768px).
   Columns are hidden via CSS only; DOM is unchanged so AJAX reload still works.
   ========================================================================== */

/* 769px–1024px: Hide the "Created" column — redundant when Last Reply is visible */
@media (max-width: 1024px) and (min-width: 769px) {
	/* YooTheme / body-prefix variant */
	body .mshd-portal-tickets-page .mshd-portal-table th[data-col="created"],
	body .mshd-portal-tickets-page .mshd-portal-table td.mshd-created-column,
	/* WP-list-table variant */
	.mshd-portal-tickets-page .mshd-tickets-table th[data-col="created"],
	.mshd-portal-tickets-page .mshd-tickets-table td.mshd-created-column,
	/* Legacy mshd-portal-container variant */
	.mshd-portal-container .mshd-tickets-table th[data-col="created"],
	.mshd-portal-container .mshd-tickets-table td[data-col="created"] {
		display: none !important;
	}

	/* 5-column: redistribute freed 10% across Subject (+7%) and Last Reply (+3%) */
	body .mshd-portal-tickets-page .mshd-portal-table:not(.mshd-has-customer-col) th[data-col="ticket_number"],
	body .mshd-portal-tickets-page .mshd-portal-table:not(.mshd-has-customer-col) td.mshd-subject-column {
		width: 52% !important;
	}
	body .mshd-portal-tickets-page .mshd-portal-table:not(.mshd-has-customer-col) th[data-col="last_reply"],
	body .mshd-portal-tickets-page .mshd-portal-table:not(.mshd-has-customer-col) td.mshd-last-reply-column {
		width: 18% !important;
	}

	/* 6-column org-manager: redistribute freed 11% across Subject (+8%) and Last Reply (+3%) */
	body .mshd-portal-tickets-page .mshd-portal-table.mshd-has-customer-col th[data-col="ticket_number"],
	body .mshd-portal-tickets-page .mshd-portal-table.mshd-has-customer-col td.mshd-subject-column {
		width: 43% !important;
	}
	body .mshd-portal-tickets-page .mshd-portal-table.mshd-has-customer-col th[data-col="last_reply"],
	body .mshd-portal-tickets-page .mshd-portal-table.mshd-has-customer-col td.mshd-last-reply-column {
		width: 18% !important;
	}
}

/* 769px–860px: 6-column org-manager view additionally hides "Priority" */
@media (max-width: 860px) and (min-width: 769px) {
	body .mshd-portal-tickets-page .mshd-portal-table.mshd-has-customer-col th[data-col="priority"],
	body .mshd-portal-tickets-page .mshd-portal-table.mshd-has-customer-col td.mshd-priority-column,
	.mshd-portal-tickets-page .mshd-tickets-table.mshd-has-customer-col th[data-col="priority"],
	.mshd-portal-tickets-page .mshd-tickets-table.mshd-has-customer-col td.mshd-priority-column {
		display: none !important;
	}

	/* Redistribute: Subject 45%, Customer 18%, Status 19%, Last Reply 18% */
	body .mshd-portal-tickets-page .mshd-portal-table.mshd-has-customer-col th[data-col="ticket_number"],
	body .mshd-portal-tickets-page .mshd-portal-table.mshd-has-customer-col td.mshd-subject-column {
		width: 45% !important;
	}
	body .mshd-portal-tickets-page .mshd-portal-table.mshd-has-customer-col th[data-col="customer"],
	body .mshd-portal-tickets-page .mshd-portal-table.mshd-has-customer-col td[data-col="customer"] {
		width: 18% !important;
	}
	body .mshd-portal-tickets-page .mshd-portal-table.mshd-has-customer-col th[data-col="status"],
	body .mshd-portal-tickets-page .mshd-portal-table.mshd-has-customer-col td.mshd-status-column {
		width: 19% !important;
	}
	body .mshd-portal-tickets-page .mshd-portal-table.mshd-has-customer-col th[data-col="last_reply"],
	body .mshd-portal-tickets-page .mshd-portal-table.mshd-has-customer-col td.mshd-last-reply-column {
		width: 18% !important;
	}
}
/* ==========================================================================
   Accessibility mode (.mshd-a11y-mode on <body>)
   Activated by the a11y toggle button; preference saved in user_meta.
   ========================================================================== */

.mshd-a11y-mode .mshd-portal-container {
	font-size: 1.25em;
	line-height: 1.6;
}

.mshd-a11y-mode .mshd-portal-container a {
	color: var(--mshd-color-primary-aaa) !important;
}

.mshd-a11y-mode .mshd-portal-container .button {
	font-size: 1.15em !important;
	padding: 0.5em 1.2em !important;
	min-height: 44px !important;
	height: auto !important;
}

.mshd-a11y-mode .mshd-portal-container .button-primary,
.mshd-a11y-mode .mshd-portal-container .uk-button-primary {
	--mshd-color-primary: var(--mshd-color-primary-aaa);
}

.mshd-a11y-mode .mshd-portal-container select,
.mshd-a11y-mode .mshd-portal-container input[type="search"] {
	font-size: 1.1em !important;
	height: auto !important;
	min-height: 44px !important;
	padding: 4px 12px !important;
}

.mshd-a11y-mode .mshd-portal-tickets-page .mshd-toggle-closed,
.mshd-a11y-mode .mshd-portal-tickets-page #mshd-clear-filters {
	font-size: 1.1em !important;
	height: auto !important;
	min-height: 44px !important;
	padding: 8px 14px !important;
}

.mshd-a11y-mode .mshd-portal-tickets-page .mshd-tickets-table thead th .mshd-sortable,
.mshd-a11y-mode .mshd-portal-tickets-page .mshd-tickets-table thead th a {
	font-size: 1.05em !important;
}

.mshd-a11y-mode .mshd-tickets-table td,
.mshd-a11y-mode .mshd-tickets-table th,
.mshd-a11y-mode .mshd-portal-table td,
.mshd-a11y-mode .mshd-portal-table th {
	font-size: 1.1em !important;
	padding: 12px 10px !important;
}

.mshd-a11y-mode .mshd-portal-tickets-page .mshd-ticket-row-main .mshd-ticket-number,
.mshd-a11y-mode .mshd-portal-tickets-page .mshd-ticket-row-main .mshd-ticket-subject {
	font-size: 1.1em !important;
}

.mshd-a11y-mode .mshd-ticket-card,
.mshd-a11y-mode .mshd-reply-card {
	font-size: 1.125em;
	line-height: 1.65;
}

.mshd-a11y-mode .mshd-portal-container input[type="text"],
.mshd-a11y-mode .mshd-portal-container input[type="email"],
.mshd-a11y-mode .mshd-portal-container textarea,
.mshd-a11y-mode .mshd-portal-container select {
	font-size: 1.125em !important;
	height: auto !important;
	min-height: 44px;
	border-width: 2px !important;
}

.mshd-a11y-mode .mshd-portal-container label {
	font-size: 1.05em !important;
	font-weight: 600;
}

.mshd-a11y-mode .mshd-reply-content {
	font-size: 1em !important;
	line-height: 1.65 !important;
}

.mshd-a11y-mode .mshd-reply-date,
.mshd-a11y-mode .mshd-reply-status {
	font-size: 0.85em !important;
}

.mshd-a11y-mode .mshd-sidebar-field label {
	font-size: 0.9em !important;
}

/* A11y toggle button — active state */
.mshd-btn-a11y[aria-pressed="true"] {
	background: var(--mshd-color-primary) !important;
	color: #fff !important;
	border-color: var(--mshd-color-primary) !important;
}

/* OS-level high contrast: auto-apply the same enhancements */
@media (prefers-contrast: more) {
	.mshd-portal-container {
		--mshd-color-primary: var(--mshd-color-primary-aaa);
	}

	.mshd-portal-container .button-primary,
	.mshd-portal-container .uk-button-primary {
		--mshd-color-primary: var(--mshd-color-primary-aaa);
	}

	.mshd-portal-container a {
		color: var(--mshd-color-primary-aaa) !important;
	}
}

/* Unread agent-reply rows (hide-closed force-include parity with satellite). */
.mshd-portal-tickets-page tr.mshd-ticket-row--unread td {
background: #e7f2dc;
}
.mshd-portal-tickets-page tr.mshd-ticket-row--unread td:first-child {
box-shadow: inset 4px 0 0 0 #9ebf71;
}
.mshd-portal-tickets-page .mshd-ticket-cell--unread .mshd-ticket-number,
.mshd-portal-tickets-page .mshd-ticket-cell--unread .mshd-ticket-subject {
font-weight: 700;
}