/**
 * BWP Portal - Layout & Components
 * Extends design-system.css and frontend.css
 */

/* Theme Transition - Linear/Notion: fast, minimal */
body,
.bwp-portal-layout,
.bwp-sidebar,
.bwp-portal-header,
.bwp-portal-content,
.bwp-stat-card,
.bwp-card,
.bwp-modal-content,
input, select, textarea {
    transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}



/* Background handled by design-system.css */

/* Revenue & action cards use design-system tokens */

/* Buttons - Primary (blue) */
.bwp-btn-primary,
button.bwp-primary,
a.bwp-btn-primary {
    background: var(--bwp-primary) !important;
    color: var(--bwp-surface-elevated) !important;
    border-radius: var(--bwp-radius-sm) !important;
    border: none !important;
    font-weight: 500 !important;
    transition: var(--bwp-transition) !important;
}

.bwp-btn-primary:hover,
button.bwp-primary:hover,
a.bwp-btn-primary:hover {
    background: var(--bwp-primary-hover) !important;
    transform: translateY(-1px);
}

.bwp-btn-secondary {
    background: var(--bwp-bg) !important;
    color: var(--bwp-text-dark) !important;
    border-radius: var(--bwp-radius-sm) !important;
}

/* Status Badges - Lime Theme */
.bwp-badge-completed,
.badge-completed {
    background: var(--bwp-success-bg) !important;
    color: hsl(var(--bwp-h-success) 55% 18%) !important;
}

.bwp-badge-pending,
.badge-pending {
    background: var(--bwp-surface-elevated)7ed !important;
    color: hsl(var(--bwp-h-warning) 55% 30%) !important;
}

.bwp-badge-cancelled,
.badge-cancelled {
    background: var(--bwp-error-bg) !important;
    color: hsl(var(--bwp-h-danger) 55% 35%) !important;
}

.bwp-badge-progress,
.badge-progress {
    background: var(--bwp-primary-subtle) !important;
    color: hsl(var(--bwp-h-primary) 55% 32%) !important;
}

/* Tables - Lime Theme */
.bwp-table {
    background: var(--bwp-card);
    border-radius: var(--bwp-radius);
    overflow: hidden;
}

.bwp-table thead {
    background: var(--bwp-neutral-50);
}

.bwp-table th {
    border-bottom: 1px solid var(--bwp-border);
    font-weight: 500;
    color: var(--bwp-text-muted);
}

.bwp-table tr:hover {
    background: var(--bwp-bg);
}

/* Links - Lime Theme */
.bwp-link,
a.bwp-link {
    color: var(--bwp-text-dark) !important;
    transition: var(--bwp-transition);
}

.bwp-link:hover,
a.bwp-link:hover {
    color: var(--bwp-primary-hover) !important;
}

/* KPI Grid */
.bwp-kpi-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--bwp-grid-gap);
	margin-bottom: var(--bwp-grid-gap);
}

@media (max-width: 1200px) {
	.bwp-kpi-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.bwp-kpi-grid {
		grid-template-columns: 1fr;
	}
}

/* Login Page - LIME THEME */
.bwp-login-page {
	margin: 0;
	padding: 0;
	background: var(--bwp-bg);
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	transition: background-color 0.3s ease;
}

.bwp-login-container {
	display: flex;
	width: 100%;
	max-width: 1100px;
	background: var(--bwp-card);
	border-radius: 24px;
	box-shadow: var(--bwp-shadow-strong);
	overflow: hidden;
	min-height: 580px;
	margin: 20px;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.bwp-login-left {
	flex: 1;
	background: var(--bwp-text)111;
	color: var(--bwp-surface-elevated);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px;
	position: relative;
	overflow: hidden;
}

.bwp-login-left::before {
	content: '';
	position: absolute;
	bottom: -30%;
	right: -30%;
	width: 400px;
	height: 400px;
	background: var(--bwp-primary);
	border-radius: 50%;
	opacity: 0.15;
	animation: pulse 15s infinite;
}

.bwp-login-left::after {
	content: '';
	position: absolute;
	top: -20%;
	left: -20%;
	width: 300px;
	height: 300px;
	background: var(--bwp-primary);
	border-radius: 50%;
	opacity: 0.08;
	animation: pulse 20s infinite reverse;
}

@keyframes pulse {
	0%, 100% { transform: scale(1); opacity: 0.15; }
	50% { transform: scale(1.1); opacity: 0.25; }
}

.bwp-login-brand {
	position: relative;
	z-index: 1;
	text-align: center;
}

.bwp-logo {
	width: 70px;
	height: 70px;
	background: var(--bwp-primary);
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	font-weight: bold;
	color: var(--bwp-surface-elevated);
	margin: 0 auto 30px;
}

.bwp-login-brand h1 {
	font-size: 32px;
	font-weight: 600;
	margin: 0 0 12px 0;
	color: var(--bwp-surface-elevated);
}

.bwp-login-brand p {
	font-size: 18px;
	opacity: 0.9;
	margin: 0;
}

.bwp-login-right {
	flex: 1;
	padding: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bwp-login-card {
	width: 100%;
	max-width: 400px;
}

.bwp-login-card h2 {
	font-size: 28px;
	font-weight: 600;
	color: var(--bwp-neutral-900);
	margin: 0 0 30px 0;
}

.bwp-form-group {
	margin-bottom: 24px;
}

.bwp-form-group label {
	display: block;
	font-weight: 500;
	color: var(--bwp-neutral-600);
	margin-bottom: 8px;
	font-size: 14px;
}

.bwp-form-input,
.bwp-form-select,
.bwp-form-textarea {
	width: 100%;
	padding: var(--bwp-space-3) var(--bwp-space-4);
	border: 1px solid var(--bwp-border);
	border-radius: var(--bwp-radius);
	font-size: var(--bwp-text-base);
	transition: var(--bwp-transition);
	background: var(--bwp-input-bg);
}

.bwp-form-input:focus,
.bwp-form-select:focus,
.bwp-form-textarea:focus {
	outline: none;
	border-color: var(--bwp-primary);
	box-shadow: 0 0 0 3px var(--bwp-primary-glow);
}

.bwp-form-group-inline {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.bwp-checkbox-label {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.bwp-checkbox-label input[type="checkbox"] {
	width: 18px;
	height: 18px;
	cursor: pointer;
}

.bwp-forgot-link {
	color: var(--bwp-text);
	text-decoration: none;
	font-size: 14px;
	transition: color 0.2s;
}

.bwp-forgot-link:hover {
	color: var(--bwp-accent);
	text-decoration: underline;
}

.bwp-btn-primary,
.bwp-btn-secondary {
	padding: 14px 28px;
	border: none;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-decoration: none;
}

.bwp-btn-primary {
	background: var(--bwp-primary);
	color: var(--bwp-surface-elevated);
}

.bwp-btn-primary:hover:not(:disabled) {
	background: var(--bwp-primary-hover);
	box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.bwp-btn-secondary {
	background: var(--bwp-neutral-100);
	color: var(--bwp-text);
	border: none;
}

.bwp-btn-secondary:hover:not(:disabled) {
	background: var(--bwp-border);
}

.bwp-btn-block {
	width: 100%;
}

.bwp-btn-primary:disabled,
.bwp-btn-secondary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.bwp-message {
	margin-top: 16px;
	font-size: 14px;
}

.bwp-message .bwp-success {
	color: var(--bwp-accent);
	padding: 12px;
	background: var(--bwp-accent-muted);
	border-radius: 8px;
}

.bwp-message .bwp-error {
	color: var(--bwp-error);
	padding: 12px;
	background: var(--bwp-error-bg);
	border-radius: 8px;
}

/* Portal Layout */
.bwp-portal-body {
	margin: 0;
	padding: 0;
	background: var(--bwp-bg);
	font-family: var(--bwp-font-sans);
}

.bwp-portal-layout {
	display: flex;
	min-height: 100vh;
}

/* Note: Main sidebar and header styles are now inline in class-portal-ui.php for better modularity */

/* Portal Content - unified with bwp-portal-main-content sizing */
.bwp-portal-content {
	flex: 1;
	margin-left: var(--bwp-sidebar-width);
	margin-top: var(--bwp-header-height);
	padding: 32px;
	min-height: calc(100vh - var(--bwp-header-height));
	transition: margin-left var(--bwp-transition);
	background: var(--bwp-bg);
}

.bwp-page-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--bwp-grid-gap);
	flex-wrap: wrap;
	gap: var(--bwp-space-4);
}

.bwp-page-header h1 {
	font-size: var(--bwp-text-2xl);
	font-weight: var(--bwp-font-bold);
	color: var(--bwp-text);
	margin: 0;
}

.bwp-back-link {
	color: var(--bwp-text);
	text-decoration: none;
	font-size: 14px;
	margin-bottom: 20px;
	display: inline-block;
	transition: all 0.2s;
}

.bwp-back-link:hover {
	color: var(--bwp-accent);
}

/* Tickets */
.bwp-tickets-list {
	display: grid;
	gap: var(--bwp-grid-gap);
}

.bwp-ticket-card {
	background: var(--bwp-card-bg);
	border-radius: var(--bwp-card-radius);
	padding: var(--bwp-card-padding);
	box-shadow: var(--bwp-card-shadow);
	cursor: pointer;
	transition: var(--bwp-transition);
	border: var(--bwp-card-border);
}

.bwp-ticket-card:hover {
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
	transform: translateY(-4px);
}

.bwp-ticket-card-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 12px;
}

.bwp-ticket-card-header h3 {
	font-size: 18px;
	font-weight: 600;
	color: var(--bwp-neutral-900);
	margin: 0;
	flex: 1;
}

.bwp-ticket-badges {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}

.bwp-status-badge {
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
}

.bwp-status-badge.status-open {
	background: var(--bwp-success-bg);
	color: hsl(var(--bwp-h-success) 55% 18%);
}

.bwp-status-badge.status-closed {
	background: var(--bwp-error-bg);
	color: hsl(var(--bwp-h-danger) 55% 35%);
}

.bwp-status-badge.status-in_progress {
	background: var(--bwp-primary-subtle);
	color: hsl(var(--bwp-h-primary) 55% 32%);
}

.bwp-status-badge.priority-low {
	background: var(--bwp-neutral-100);
	color: var(--bwp-text-muted);
}

.bwp-status-badge.priority-medium {
	background: var(--bwp-surface-elevated)7ed;
	color: hsl(var(--bwp-h-warning) 55% 30%);
}

.bwp-status-badge.priority-high {
	background: hsl(var(--bwp-h-warning) 95% 85%);
	color: hsl(var(--bwp-h-warning) 55% 30%);
}

.bwp-status-badge.priority-urgent {
	background: var(--bwp-error-bg);
	color: hsl(var(--bwp-h-danger) 55% 35%);
}

.bwp-ticket-excerpt {
	color: var(--bwp-text-muted);
	margin: 0 0 12px 0;
	line-height: 1.6;
}

.bwp-ticket-meta {
	display: flex;
	gap: 16px;
	font-size: 13px;
	color: var(--bwp-text-muted);
}

/* Ticket Detail / Chat */
.bwp-ticket-detail-page {
	background: var(--bwp-surface-elevated);
	border-radius: 20px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: calc(100vh - 100px);
}

.bwp-ticket-header {
	padding: 24px;
	border-bottom: 1px solid var(--bwp-border-light);
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.bwp-ticket-header-left h1 {
	font-size: 24px;
	font-weight: 600;
	margin: 0 0 12px 0;
}

.bwp-ticket-meta {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.bwp-ticket-chat {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.bwp-messages-container {
	flex: 1;
	overflow-y: auto;
	padding: 24px;
	background: var(--bwp-neutral-100);
}

.bwp-messages-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.bwp-message-item {
	display: flex;
	gap: 12px;
	max-width: 70%;
}

.bwp-message-item.bwp-message-customer {
	margin-left: auto;
	flex-direction: row-reverse;
}

.bwp-message-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--bwp-border-light);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	flex-shrink: 0;
}

.bwp-message-content-wrapper {
	flex: 1;
}

.bwp-message-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 6px;
}

.bwp-message-header strong {
	font-size: 14px;
	color: var(--bwp-neutral-900);
}

.bwp-message-date {
	font-size: 12px;
	color: var(--bwp-text-muted);
}

.bwp-message-text {
	background: var(--bwp-surface-elevated);
	padding: 12px 16px;
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	color: var(--bwp-neutral-600);
	line-height: 1.6;
	white-space: pre-wrap;
	word-wrap: break-word;
}

.bwp-message-customer .bwp-message-text {
	background: var(--bwp-text)111;
	color: var(--bwp-surface-elevated);
}

.bwp-message-attachments {
	margin-top: 8px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bwp-attachment-image {
	display: inline-block;
	max-width: 200px;
	border-radius: 8px;
	overflow: hidden;
}

.bwp-attachment-image img {
	width: 100%;
	height: auto;
	display: block;
}

.bwp-attachment-file {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: #f8f9fa;
	border-radius: 8px;
	color: var(--bwp-neutral-600);
	text-decoration: none;
	font-size: 13px;
	transition: background 0.2s;
}

.bwp-attachment-file:hover {
	background: var(--bwp-border-light);
}

/* Reply Form */
.bwp-ticket-reply {
	padding: 20px;
	border-top: 1px solid var(--bwp-border-light);
	background: var(--bwp-surface-elevated);
}

.bwp-file-upload-area {
	margin-bottom: 12px;
}

.bwp-file-preview {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 8px;
}

.bwp-file-item {
	position: relative;
	display: inline-block;
}

.bwp-file-item img {
	max-width: 100px;
	max-height: 100px;
	border-radius: 8px;
}

.bwp-file-item .bwp-remove-file {
	position: absolute;
	top: -8px;
	right: -8px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #dc3545;
	color: var(--bwp-surface-elevated);
	border: none;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bwp-btn-attach {
	padding: 8px 16px;
	background: #f8f9fa;
	border: 2px dashed #dee2e6;
	border-radius: 8px;
	color: var(--bwp-text-muted);
	cursor: pointer;
	font-size: 14px;
	transition: all 0.2s;
}

.bwp-btn-attach:hover {
	background: var(--bwp-border-light);
	border-color: #adb5bd;
}

.bwp-reply-textarea {
	width: 100%;
	padding: 12px 16px;
	border: 2px solid var(--bwp-border-light);
	border-radius: 8px;
	font-size: 15px;
	resize: vertical;
	font-family: inherit;
}

.bwp-reply-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 12px;
}

/* Empty State */
.bwp-empty-state {
	text-align: center;
	padding: 60px 20px;
	color: var(--bwp-text-muted);
}

.bwp-empty-state p {
	font-size: 16px;
	margin-bottom: 20px;
}

/* Loading */
.bwp-loading {
	text-align: center;
	padding: 40px;
	color: var(--bwp-text-muted);
}

/* Mobile Responsive */
@media (max-width: 768px) {
	.bwp-login-container {
		flex-direction: column;
		min-height: auto;
	}
	
	.bwp-login-left {
		padding: 40px 20px;
		min-height: 200px;
	}
	
	.bwp-login-right {
		padding: 40px 20px;
	}
	
	.bwp-sidebar {
		transform: translateX(-100%);
		transition: transform 0.3s;
	}
	
	.bwp-sidebar.open {
		transform: translateX(0);
	}
	
	.bwp-portal-content {
		margin-left: 0;
		padding: 12px;
	}
	
	.bwp-message-item {
		max-width: 85%;
	}
	
	.bwp-ticket-detail-page {
		height: calc(100vh - 60px);
	}
}

/* Nested containers: don't double-constrain */
.bwp-portal-content .bwp-page-container,
.bwp-portal-content .bwp-admin-portal-page,
.bwp-portal-main-content .bwp-page-container,
.bwp-portal-main-content .bwp-admin-portal-page {
	max-width: none;
	margin: 0;
	padding: 0;
}

.bwp-settings-page,
.bwp-calendar-page,
.bwp-invoice-edit-page,
.bwp-booking-form-wrapper {
	width: 100%;
}