/* Portal styles for Lucent ERP - Matching Figma Design */

/* Hide Alpine.js elements before initialization to prevent flash */
[x-cloak] {
	display: none !important;
}

/* Sticky Submit Request footer animations */
@keyframes ctaSlideUp {
	from {
		transform: translateY(100%);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}
@keyframes ctaSlideDown {
	from {
		transform: translateY(0);
		opacity: 1;
	}
	to {
		transform: translateY(100%);
		opacity: 0;
	}
}

/* ============================================
   Frappe Style Overrides - CRITICAL
   These rules must override Frappe's default styles
   ============================================ */

/* Full reset for portal pages */
.portal-container,
.portal-container * {
	box-sizing: border-box !important;
}

/* Reserve space for the sticky CTA footer (approx 80px) */
.portal-main {
	padding-bottom: 80px;
}

.portal-container {
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	min-height: 100vh;
	background-color: #faf8f4;
}

/* Strip Bootstrap's page-content-wrapper/page_content that web.html injects.
   NOTE: do NOT include `main` here — since we override {% block content %},
   Frappe's outer <main class="container my-4"> is never rendered; the only
   <main> in the DOM belongs to individual portal pages (e.g. request.html)
   and must keep its own max-width / margin / padding inline styles. */
body:has(.portal-container) .page-content-wrapper,
body:has(.portal-container) .page_content {
	max-width: none !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Prevent any Frappe/Bootstrap body padding from creating bottom gap */
body:has(.portal-container) {
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}

/* Reset all Frappe layout containers */
.portal-container .container,
.portal-container .web-container,
.portal-container .main-section,
.portal-container .page-content-wrapper,
.portal-container .row,
.portal-container .col,
.portal-container [class*='col-'] {
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	float: none !important;
}

/* Hide ALL Frappe UI elements that shouldn't appear in portal */
.portal-container .web-footer,
.portal-container .page-header-wrapper,
.portal-container .breadcrumb-container,
.portal-container nav.navbar:not(.portal-header),
.portal-container .website-footer,
.portal-container .footer-info,
.portal-container .footer-subscribe,
.portal-container .page-header,
.web-footer,
.website-footer,
footer.web-footer,
.portal-container ~ footer,
.portal-container ~ .web-footer {
	display: none !important;
}

/* Remove padding from page-breadcrumbs in portal */
.portal-container .page-breadcrumbs,
.portal-main .page-breadcrumbs {
	padding: 0 !important;
}

/* Reset Frappe form element styles */
.portal-container input,
.portal-container select,
.portal-container textarea,
.portal-container button {
	font-family:
		'Inter',
		-apple-system,
		BlinkMacSystemFont,
		sans-serif !important;
	border-radius: 6px;
}

.portal-container select {
	appearance: auto;
	-webkit-appearance: auto;
	background-image: none;
}

.portal-container button {
	cursor: pointer;
	border: none;
	background: transparent;
}

/* Reset link styles in portal */
.portal-container a {
	color: inherit;
	text-decoration: none;
}

.portal-container a:hover {
	text-decoration: none;
}

/* Portal main content area */
.portal-main {
	padding: 0 !important;
	width: 100% !important;
}

/* Flex layout helpers with !important to override Frappe */
.portal-container .flex,
.portal-main .flex {
	display: flex !important;
	flex-direction: row !important;
}

.portal-container .flex-1,
.portal-main .flex-1 {
	flex: 1 !important;
}

.portal-container .flex-col,
.portal-main .flex-col {
	flex-direction: column !important;
}

/* Space utilities - ensure vertical stacking */
.portal-main .space-y-2 {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.5rem !important;
}

.portal-main .space-y-2 > * {
	margin-top: 0 !important;
}

.portal-main .space-y-6 {
	display: flex !important;
	flex-direction: column !important;
	gap: 1.5rem !important;
}

/* Button reset in portal - prevent Frappe button styles */
.portal-main button {
	display: flex !important;
	background: transparent;
	border: none;
	cursor: pointer;
	font-family: inherit;
	text-align: left;
	width: auto;
}

.portal-main button.w-full {
	width: 100% !important;
}

/* Ensure aside sidebar has proper layout */
.portal-main aside {
	flex-shrink: 0 !important;
}

/* Alpine.js cloak - hide elements until Alpine initializes */
[x-cloak] {
	display: none !important;
}

/* ============================================
   CSS Reset & Base
   ============================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	font-family:
		'Inter',
		-apple-system,
		BlinkMacSystemFont,
		sans-serif;
	background-color: #faf8f4;
	color: #333;
	line-height: 1.5;
	margin: 0;
	padding: 0;
}

/* ============================================
   Typography
   ============================================ */
.font-serif {
	font-family: 'Playfair Display', Georgia, serif;
}
.font-sans {
	font-family:
		'Inter',
		-apple-system,
		BlinkMacSystemFont,
		sans-serif;
}

/* Reset Frappe's aggressive h1, h2 and h3 styling - only margins, keep font */
.portal-container h1,
.portal-main h1,
.portal-container h2,
.portal-main h2,
.portal-container h3,
.portal-main h3 {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Apply at all breakpoints */
@media (min-width: 576px) {
	.portal-container h1,
	.portal-main h1,
	.portal-container h2,
	.portal-main h2,
	.portal-container h3,
	.portal-main h3 {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}
}

@media (min-width: 1200px) {
	.portal-container h1,
	.portal-main h1,
	.portal-container h2,
	.portal-main h2,
	.portal-container h3,
	.portal-main h3 {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}
}

/* For h2 and h3 specifically, reset font inheritance when they don't have explicit font classes */
.portal-container h2:not(.font-serif):not(.font-sans),
.portal-main h2:not(.font-serif):not(.font-sans),
.portal-container h3:not(.font-serif):not(.font-sans),
.portal-main h3:not(.font-serif):not(.font-sans) {
	font-family: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
}

/* ============================================
   Portal Header
   ============================================ */
.portal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 32px;
	border-bottom: 1px solid #e8e4dc;
	background-color: #faf8f4;
}

.header-left {
	display: flex;
	align-items: center;
	gap: 32px;
}

.logo {
	font-size: 24px;
	color: #000;
	text-decoration: none;
	cursor: pointer;
}

.logo:hover {
	color: #000;
	text-decoration: none;
}

.header-nav {
	display: flex;
	align-items: center;
	gap: 24px;
}

.nav-link {
	font-size: 14px;
	color: #666;
	text-decoration: none;
	transition: color 0.2s;
}

.nav-link:hover {
	color: #333;
}

.nav-link.active {
	font-weight: 500;
	color: #000;
}

.header-right {
	display: flex;
	align-items: center;
	gap: 16px;
}

.icon-btn {
	background: transparent;
	border: none;
	cursor: pointer;
	color: #666;
	padding: 4px;
}

.icon-btn:hover {
	color: #333;
}

.logout-link {
	font-size: 14px;
	color: #666;
	text-decoration: none;
}

.logout-link:hover {
	color: #333;
}

/* ============================================
   Main Content Area
   ============================================ */
.portal-main {
	padding: 32px;
}

/* ============================================
   Page Header
   ============================================ */
.page-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
}

.page-title {
	font-size: 24px;
	color: #000;
	margin-bottom: 4px;
}

.page-subtitle {
	font-size: 14px;
	color: #666;
}

/* ============================================
   Buttons
   ============================================ */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: 8px;
	font-size: 14px;
	font-family: 'Inter', sans-serif;
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition:
		background-color 0.2s,
		color 0.2s;
}

.btn-primary {
	background-color: #1a1a1a;
	color: #fff;
}

.btn-primary:hover {
	background-color: #333;
	color: #fff;
}

.btn-link {
	background: transparent;
	color: #666;
	padding: 0;
	text-decoration: underline;
}

.btn-link:hover {
	color: #333;
}

/* ============================================
   Filters
   ============================================ */
.filters {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 24px;
}

.filter-group {
	display: flex;
	align-items: center;
	gap: 8px;
}

.filter-label {
	font-size: 12px;
	color: #666;
}

.filter-select {
	padding: 6px 12px;
	border-radius: 4px;
	border: 1px solid #e8e4dc;
	background-color: #fff;
	font-size: 14px;
	font-family: 'Inter', sans-serif;
	color: #333;
	cursor: pointer;
}

.filter-select:focus {
	outline: none;
	border-color: #999;
}

/* ============================================
   Cards & Panels
   ============================================ */
.card {
	border-radius: 8px;
	border: 1px solid #e8e4dc;
	background-color: #fff;
}

.card-header {
	padding: 16px 24px;
	border-bottom: 1px solid #e8e4dc;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.card-title {
	font-size: 18px;
	color: #000;
}

.card-body {
	padding: 24px;
}

/* ============================================
   Task List
   ============================================ */
.task-list-container {
	display: flex;
	gap: 24px;
}

.task-list {
	flex: 1;
}

.task-item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 16px 24px;
	border-bottom: 1px solid #e8e4dc;
	cursor: pointer;
	transition: background-color 0.2s;
	text-align: left;
	width: 100%;
	background: transparent;
	border-left: none;
	border-right: none;
	border-top: none;
}

.task-item:hover {
	background-color: #fdfcfa;
}

.task-item.selected {
	background-color: #fdfcfa;
}

.task-item:last-child {
	border-bottom: none;
}

/* Status indicators */
.status-icon {
	width: 20px;
	height: 20px;
	margin-top: 2px;
	flex-shrink: 0;
}

.status-pending {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid #ddd;
}

.status-in-progress {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid #d4a853;
	display: flex;
	align-items: center;
	justify-content: center;
}

.status-in-progress::after {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #d4a853;
}

.status-completed {
	color: #4a7c59;
}

/* Task content */
.task-content {
	flex: 1;
	min-width: 0;
}

.task-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
}

.task-title {
	font-size: 14px;
	font-weight: 500;
	color: #000;
}

.task-title.completed {
	color: #999;
	text-decoration: line-through;
}

.task-stage {
	font-size: 12px;
	color: #888;
	margin-bottom: 8px;
}

.task-description {
	font-size: 14px;
	color: #666;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.task-description.completed {
	color: #aaa;
}

/* Task meta (due date) */
.task-meta {
	text-align: right;
	flex-shrink: 0;
}

.task-due-label {
	font-size: 12px;
	color: #888;
	margin-bottom: 4px;
}

.task-due-date {
	font-size: 14px;
	color: #333;
}

.task-due-date.completed {
	color: #aaa;
}

/* ============================================
   Priority & Status Badges
   ============================================ */
.badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 12px;
	text-transform: capitalize;
}

.badge-high {
	background-color: #ffebee;
	color: #c45c4a;
}

.badge-medium {
	background-color: #fff8e1;
	color: #d4a853;
}

.badge-low {
	background-color: #f5f5f5;
	color: #666;
}

.badge-in-progress {
	background-color: #fff8e1;
	color: #d4a853;
}

.badge-pending {
	background-color: #f5f5f5;
	color: #666;
}

.badge-completed {
	background-color: #e8f5e9;
	color: #4a7c59;
}

/* ============================================
   Task Detail Panel
   ============================================ */
.task-detail-panel {
	width: 384px;
	flex-shrink: 0;
}

.detail-badges {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
}

.detail-title {
	font-size: 20px;
	color: #000;
	margin-bottom: 8px;
}

.detail-description {
	font-size: 14px;
	color: #666;
	margin-bottom: 24px;
}

.detail-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.detail-label {
	font-size: 14px;
	color: #888;
}

.detail-value {
	font-size: 14px;
	color: #333;
}

/* Related documents */
.related-docs {
	margin-bottom: 24px;
}

.related-docs-title {
	font-size: 12px;
	color: #888;
	margin-bottom: 8px;
}

.doc-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 4px;
	cursor: pointer;
	text-decoration: none;
	color: #333;
	transition: background-color 0.2s;
}

.doc-item:hover {
	background-color: #f5f3ef;
}

.doc-icon {
	color: #888;
}

/* ============================================
   Empty State
   ============================================ */
.empty-state {
	padding: 48px 24px;
	text-align: center;
}

.empty-icon {
	width: 48px;
	height: 48px;
	margin: 0 auto 16px;
	color: #ccc;
}

.empty-text {
	font-size: 14px;
	color: #888;
}

/* ============================================
   Close Button
   ============================================ */
.close-btn {
	padding: 4px;
	border-radius: 4px;
	background: transparent;
	border: none;
	cursor: pointer;
	color: #666;
	transition: background-color 0.2s;
}

.close-btn:hover {
	background-color: #f5f3ef;
}

/* ============================================
   Layout Utilities
   ============================================ */
.flex {
	display: flex !important;
}
.flex-1 {
	flex: 1 !important;
}
.flex-col {
	flex-direction: column !important;
}

/* Fix sidebar layout */
aside.w-72 > .space-y-2 {
	display: block !important;
}

aside.w-72 .space-y-2 > * {
	display: flex !important;
	margin-bottom: 8px;
}
.items-center {
	align-items: center;
}
.items-start {
	align-items: flex-start;
}
.justify-between {
	justify-content: space-between;
}
.gap-2 {
	gap: 8px;
}
.gap-4 {
	gap: 16px;
}
.gap-6 {
	gap: 24px;
}
.mb-4 {
	margin-bottom: 16px;
}
.mb-6 {
	margin-bottom: 24px;
}
.text-center {
	text-align: center;
}

/* ============================================
   Hide elements
   ============================================ */
.unknown-component {
	display: none;
}

/* ============================================
   Overview Page - Stages Sidebar
   ============================================ */
.portal-main .space-y-2 {
	display: flex !important;
	flex-direction: column !important;
}

.stage-item {
	display: flex !important;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 16px;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.2s;
	width: 100%;
	text-align: left;
	background: transparent;
	border: none;
	flex-direction: row !important;
}

.stage-item:hover {
	background-color: rgba(0, 0, 0, 0.03);
}

.stage-item.active {
	background-color: #f5f3ef;
}

.stage-number {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 500;
	flex-shrink: 0;
}

.stage-number.completed {
	background-color: #4a7c59;
	color: #fff;
}

.stage-number.current {
	background-color: #f5f3ef;
	color: #d4a853;
	border: 2px solid #d4a853;
}

.stage-number.pending {
	background-color: #f5f5f5;
	color: #999;
}

.stage-info {
	flex: 1;
	min-width: 0;
}

.stage-name {
	font-size: 14px;
	font-weight: 500;
	color: #000;
	margin-bottom: 2px;
}

.stage-status {
	font-size: 12px;
}

.stage-status.completed {
	color: #4a7c59;
}
.stage-status.current {
	color: #d4a853;
}
.stage-status.pending {
	color: #999;
}

/* ============================================
   Overview Page - Checklist
   ============================================ */
.checklist-progress {
	width: 120px;
	height: 8px;
	background-color: #e8e4dc;
	border-radius: 4px;
	overflow: hidden;
}

.checklist-progress-bar {
	height: 100%;
	background-color: #4a7c59;
	border-radius: 4px;
	transition: width 0.3s ease;
}

.checklist-item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 24px;
	border-bottom: 1px solid #e8e4dc;
}

.checklist-item:last-child {
	border-bottom: none;
}

.checklist-checkbox {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 2px solid #ddd;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: #fff;
}

.checklist-checkbox.completed {
	background-color: #4a7c59;
	border-color: #4a7c59;
	color: #fff;
}

.checklist-checkbox.in-progress {
	border-color: #d4a853;
}

.checklist-checkbox.in-progress::after {
	content: '';
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #d4a853;
}

.checklist-label {
	flex: 1;
	font-size: 14px;
	color: #333;
}

.checklist-label.completed {
	color: #999;
	text-decoration: line-through;
}

.badge-required {
	padding: 4px 12px;
	border-radius: 4px;
	font-size: 12px;
	background-color: #fef3c7;
	color: #d97706;
	font-weight: 500;
}

.btn-continue {
	padding: 6px 16px;
	border-radius: 6px;
	font-size: 13px;
	background-color: #1a1a1a;
	color: #fff;
	border: none;
	cursor: pointer;
	font-weight: 500;
}

.btn-continue:hover {
	background-color: #333;
}

/* ============================================
   Overview Page - Documents & Quick Actions
   ============================================ */
.doc-link,
.action-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-radius: 6px;
	cursor: pointer;
	text-decoration: none;
	color: #333;
	transition: background-color 0.2s;
	font-size: 14px;
}

.doc-link:hover,
.action-link:hover {
	background-color: #f5f3ef;
	text-decoration: none;
	color: #333;
}

.doc-icon,
.action-icon {
	width: 20px;
	height: 20px;
	color: #888;
	flex-shrink: 0;
}

.action-chevron {
	margin-left: auto;
	color: #ccc;
}

/* ============================================
   Additional Tailwind-like Utilities
   ============================================ */
.min-h-screen {
	min-height: 100vh;
}
.w-72 {
	width: 18rem;
}
.w-96 {
	width: 24rem;
}
.w-full {
	width: 100%;
}
.h-full {
	height: 100%;
}
.p-4 {
	padding: 1rem;
}
.p-5 {
	padding: 1.25rem;
}
.p-6 {
	padding: 1.5rem;
}
.p-8 {
	padding: 2rem;
}
.px-3 {
	padding-left: 0.75rem;
	padding-right: 0.75rem;
}
.px-4 {
	padding-left: 1rem;
	padding-right: 1rem;
}
.px-5 {
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}
.px-6 {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}
.py-1 {
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}
.py-1\.5 {
	padding-top: 0.375rem;
	padding-bottom: 0.375rem;
}
.py-2 {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}
.py-3 {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}
.py-4 {
	padding-top: 1rem;
	padding-bottom: 1rem;
}
.mb-1 {
	margin-bottom: 0.25rem;
}
.mb-2 {
	margin-bottom: 0.5rem;
}
.mb-3 {
	margin-bottom: 0.75rem;
}
.mb-8 {
	margin-bottom: 2rem;
}
.mt-2 {
	margin-top: 0.5rem;
}
.space-y-2 > * + * {
	margin-top: 0.5rem;
}
.space-y-4 > * + * {
	margin-top: 1rem;
}
.space-y-6 > * + * {
	margin-top: 1.5rem;
}
.grid {
	display: grid;
}
.grid-cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.col-span-2 {
	grid-column: span 2 / span 2;
}
.rounded {
	border-radius: 0.25rem;
}
.rounded-lg {
	border-radius: 0.5rem;
}
.rounded-full {
	border-radius: 9999px;
}
.border {
	border-width: 1px;
	border-style: solid;
}
.border-b {
	border-bottom-width: 1px;
	border-bottom-style: solid;
}
.border-r {
	border-right-width: 1px;
	border-right-style: solid;
}
.border-t {
	border-top-width: 1px;
	border-top-style: solid;
}
.divide-y > * + * {
	border-top-width: 1px;
	border-top-style: solid;
}
.overflow-hidden {
	overflow: hidden;
}
.overflow-y-auto {
	overflow-y: auto;
}
.truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.text-xs {
	font-size: 0.75rem;
	line-height: 1rem;
}
.text-sm {
	font-size: 0.875rem;
	line-height: 1.25rem;
}
.text-base {
	font-size: 1rem;
	line-height: 1.5rem;
}
.text-lg {
	font-size: 1.125rem;
	line-height: 1.75rem;
}
.text-xl {
	font-size: 1.25rem;
	line-height: 1.75rem;
}
.text-2xl {
	font-size: 1.5rem;
	line-height: 2rem;
}
.font-medium {
	font-weight: 500;
}
.capitalize {
	text-transform: capitalize;
}
.line-through {
	text-decoration: line-through;
}
.transition-colors {
	transition-property: color, background-color, border-color;
	transition-duration: 150ms;
}
.transition-all {
	transition-property: all;
	transition-duration: 150ms;
}
.cursor-pointer {
	cursor: pointer;
}
.resize-none {
	resize: none;
}
.w-4 {
	width: 1rem;
}
.w-5 {
	width: 1.25rem;
}
.w-8 {
	width: 2rem;
}
.w-12 {
	width: 3rem;
}
.w-16 {
	width: 4rem;
}
.w-32 {
	width: 8rem;
}
.h-2 {
	height: 0.5rem;
}
.h-4 {
	height: 1rem;
}
.h-5 {
	height: 1.25rem;
}
.h-8 {
	height: 2rem;
}
.h-12 {
	height: 3rem;
}
.h-16 {
	height: 4rem;
}
.mx-auto {
	margin-left: auto;
	margin-right: auto;
}
.max-w-md {
	max-width: 28rem;
}

/* Hover utilities */
.hover\:bg-gray-50:hover {
	background-color: #f9fafb;
}

/* Alpine.js cloak */
[x-cloak] {
	display: none !important;
}

/* ============================================
   SVG Icon Size Overrides
   Frappe's global CSS sets svg { width/height } without !important, so a
   higher-specificity selector is all we need to neutralise it.
   We deliberately DO NOT use !important here so that inline style="width:…"
   attributes on individual SVGs are respected by the cascade.
   ============================================ */
.portal-main svg,
.portal-container svg {
	width: auto;
	height: auto;
}

/* Named size helpers — use these classes instead of inline styles where
   you want a guaranteed size that can't be overridden by parent context. */
.portal-main svg.icon-sm,
.portal-container svg.icon-sm {
	width: 16px !important;
	height: 16px !important;
}

.portal-main svg.icon-md,
.portal-container svg.icon-md {
	width: 20px !important;
	height: 20px !important;
}

.portal-main svg.icon-lg,
.portal-container svg.icon-lg {
	width: 24px !important;
	height: 24px !important;
}

.portal-main svg.icon-xl,
.portal-container svg.icon-xl {
	width: 64px !important;
	height: 64px !important;
}

/* ============================================
   Files/Documents Page - Folder Tree
   ============================================ */
.portal-main aside button,
.portal-container aside button,
aside button,
.portal-main aside button:focus,
.portal-main aside button:active,
.portal-main aside button:hover {
	border: none !important;
	border-width: 0 !important;
	outline: none !important;
	box-shadow: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
}

/* File list row buttons - keep only bottom border */
.portal-main .file-row,
.portal-main button[style*='border-bottom'] {
	border-left: none !important;
	border-right: none !important;
	border-top: none !important;
}

/* Force remove all button borders in sidebar */
[style*='border-right: 1px solid'] button {
	border: 0 !important;
}

/* ============================================
   Inbox Page - Thread List
   ============================================ */
.thread-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 500;
	flex-shrink: 0;
	background-color: #4a7c59;
	color: #fff;
}

.thread-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px;
	border-bottom: 1px solid #e8e4dc;
	cursor: pointer;
	transition: background-color 0.2s;
	width: 100%;
	text-align: left;
	background: transparent;
	border-left: 3px solid transparent;
}

.thread-item:hover {
	background-color: rgba(255, 255, 255, 0.5);
}

.thread-item.selected,
.thread-item.active {
	background-color: #fff;
	border-left-color: #4a7c59;
}

.thread-subject {
	font-size: 14px;
	font-weight: 500;
	color: #000;
	margin-bottom: 4px;
}

.thread-subject.unread {
	font-weight: 600;
}

.thread-meta {
	font-size: 12px;
	color: #888;
	margin-bottom: 4px;
}

.thread-preview {
	font-size: 12px;
	color: #666;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.thread-timestamp {
	font-size: 11px;
	color: #aaa;
	margin-top: 4px;
}

.unread-indicator {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #4a7c59;
	flex-shrink: 0;
}

/* ============================================
   Inbox Page - Message Detail Panel
   ============================================ */
.message-panel-header {
	padding: 16px 24px;
	border-bottom: 1px solid #e8e4dc;
}

.message-subject {
	font-size: 18px;
	font-weight: 500;
	color: #000;
	margin-bottom: 4px;
}

.message-meta {
	font-size: 12px;
	color: #888;
}

/* Message bubbles */
.message-container {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	overflow-y: auto;
	flex: 1;
}

.message-bubble {
	max-width: 70%;
	padding: 12px 16px;
	border-radius: 12px;
	font-size: 14px;
	line-height: 1.5;
}

.message-bubble.other {
	background-color: #f5f3ef;
	color: #333;
	align-self: flex-start;
	border-bottom-left-radius: 4px;
}

.message-bubble.current-user {
	background-color: #4a5d4a;
	color: #fff;
	align-self: flex-end;
	border-bottom-right-radius: 4px;
}

.message-sender {
	font-size: 12px;
	font-weight: 500;
	margin-bottom: 4px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.message-sender-role {
	font-weight: 400;
	color: #888;
}

.message-timestamp {
	font-size: 11px;
	color: #aaa;
	margin-top: 8px;
}

.message-bubble.current-user .message-timestamp {
	color: rgba(255, 255, 255, 0.7);
}

/* Message input area */
.message-input-container {
	padding: 16px 24px;
	border-top: 1px solid #e8e4dc;
	background-color: #fdfcfa;
}

.message-textarea {
	width: 100%;
	min-height: 80px;
	padding: 12px 16px;
	border: 1px solid #e8e4dc;
	border-radius: 8px;
	font-size: 14px;
	font-family: 'Inter', sans-serif;
	resize: none;
	margin-bottom: 12px;
	background-color: #fff;
}

.message-textarea:focus {
	outline: none;
	border-color: #999;
}

.message-textarea::placeholder {
	color: #aaa;
}

.message-actions {
	display: flex;
	justify-content: flex-end;
}

.btn-send {
	padding: 10px 24px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	background-color: #1a1a1a;
	color: #fff;
	border: none;
	cursor: pointer;
}

.btn-send:hover {
	background-color: #333;
}

.btn-send:disabled {
	background-color: #ccc;
	cursor: not-allowed;
}

/* Attachments */
.attachments-section {
	padding: 16px 24px;
	border-top: 1px solid #e8e4dc;
	background-color: #fdfcfa;
}

.attachments-label {
	font-size: 12px;
	color: #888;
	margin-bottom: 8px;
}

.attachment-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border: 1px solid #e8e4dc;
	border-radius: 6px;
	font-size: 13px;
	color: #333;
	background-color: #fff;
	cursor: pointer;
	margin-right: 8px;
	margin-bottom: 8px;
}

.attachment-item:hover {
	background-color: #f5f3ef;
}

.attachment-icon {
	width: 16px;
	height: 16px;
	color: #888;
}

/* Empty state for message detail */
.empty-message-state {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #aaa;
}

.empty-message-icon {
	width: 64px;
	height: 64px;
	margin-bottom: 16px;
	color: #ddd;
}

/* Inbox badge */
.inbox-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 9999px;
	font-size: 12px;
	background-color: #e8f5e9;
	color: #4a7c59;
}

/* Make thread list buttons full width and proper layout */
.portal-main aside button.w-full {
	width: 100% !important;
	display: flex !important;
	text-align: left;
}

/* Fix for inline avatar in thread list - override inline styles */
.portal-main .w-10.h-10.rounded-full,
.portal-main aside .w-10.h-10,
.portal-main .flex-shrink-0.w-10,
aside button .w-10.h-10 {
	width: 40px !important;
	height: 40px !important;
	min-width: 40px !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background-color: #4a7c59 !important;
	color: #fff !important;
}

/* Message avatars - smaller */
.portal-main .w-8.h-8.rounded-full {
	width: 32px !important;
	height: 32px !important;
	min-width: 32px !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background-color: #4a7c59 !important;
	color: #fff !important;
}

/* ============================================
   Tasks Page - Override Frappe button borders
   ============================================ */
/* Task row - using div instead of button to avoid Frappe's button styling */
.task-row-btn,
div.task-row-btn,
.portal-main .task-row-btn,
.portal-container .task-row-btn {
	background-color: transparent;
	cursor: pointer;
	user-select: none;
}

.task-row-btn:hover {
	background-color: #fdfcfa !important;
}

.task-row-btn:focus {
	outline: 2px solid #e8e4dc;
	outline-offset: -2px;
}

/* Reset all button borders in the task list - aggressive override */
.portal-main .divide-y button,
.portal-main .divide-y > button,
.portal-main .divide-y > div button,
.portal-main .divide-y > div > button,
.portal-container .divide-y button,
div.divide-y button,
.divide-y button[type='button'],
.portal-main button.w-full,
.portal-main main button,
main.flex-1 button {
	border: none !important;
	border-top: none !important;
	border-bottom: none !important;
	border-left: none !important;
	border-right: none !important;
	border-width: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
}

/* Frappe adds borders via .btn class - override that */
.portal-main .btn,
.portal-main button.btn,
.portal-container .btn,
.portal-container button.btn {
	border: none !important;
	box-shadow: none !important;
}

/* Very aggressive - all buttons in portal-main */
.portal-main button:not([style*='background-color: #1A1A1A']) {
	border: 0 !important;
	border-style: none !important;
}

/* Add only the divider lines between items via the parent div */
.portal-main .divide-y {
	border-color: #e8e4dc !important;
}

.portal-main .divide-y > * + *,
.portal-main .divide-y > div + div {
	border-top: 1px solid #e8e4dc !important;
}

/* Reset for first child - no top border */
.portal-main .divide-y > *:first-child,
.portal-main .divide-y > div:first-child {
	border-top: none !important;
}

/* The task card container itself has a border - that's fine */
.portal-main .rounded-lg.border {
	border: 1px solid #e8e4dc !important;
}

/* But buttons inside should have no border */
.portal-main .rounded-lg.border button {
	border: none !important;
	box-shadow: none !important;
}

/* Child task indented section border */
.portal-main .border-t {
	border-top-width: 1px !important;
	border-top-style: solid !important;
}