/* =============================================
   Custom Styles - eProcurement Dashboard
   ============================================= */

/* ===== Role & Permissions - Section Styling ===== */

/* Permission group sections: reverse header so chevron is on the left */
.permission-group-section .fi-section-header {
	flex-direction: row-reverse;
	gap: 0.75rem;
}

/* Make the text container expand to fill all available width */
.permission-group-section .fi-section-header-text-ctn {
	flex: 1;
	min-width: 0;
}

/* Make heading take full width so the row inside stretches */
.permission-group-section .fi-section-header-heading {
	width: 100%;
}

/* The flex row that holds the group name on the left and badge on the right */
.permission-heading-row {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
}

/* Subtle gray background for the section card */
.permission-group-section>.fi-section {
	background-color: #f9fafb;
	border: 1px solid #e5e7eb;
}

.dark .permission-group-section>.fi-section {
	background-color: rgba(255, 255, 255, 0.03);
	border-color: rgba(255, 255, 255, 0.1);
}

/* Permission badge styling */
.permission-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.125rem 0.75rem;
	border-radius: 9999px;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.5;
	background-color: #ffedd5;
	color: #c2410c;
	white-space: nowrap;
}

.dark .permission-badge {
	background-color: rgba(194, 65, 12, 0.2);
	color: #fed7aa;
}

/* ===== Blue-600 for text utility on Filament pages ===== */
/* Tailwind v4 CSS variable not loaded on Filament pages, define here */
:root {
	--color-blue-600: #2563eb;
}

.text-blue-600 {
	color: var(--color-blue-600);
}

/* ===== Sidebar Collapse/Expand Button - Orange ===== */

.fi-topbar-open-collapse-sidebar-btn,
.fi-topbar-close-collapse-sidebar-btn {
	color: #d97706 !important;
}

.fi-topbar-open-collapse-sidebar-btn:hover,
.fi-topbar-close-collapse-sidebar-btn:hover {
	color: #b45309 !important;
	background-color: #fffbeb !important;
}

.dark .fi-topbar-open-collapse-sidebar-btn,
.dark .fi-topbar-close-collapse-sidebar-btn {
	color: #f59e0b !important;
}

.dark .fi-topbar-open-collapse-sidebar-btn:hover,
.dark .fi-topbar-close-collapse-sidebar-btn:hover {
	color: #fbbf24 !important;
	background-color: rgba(245, 158, 11, 0.1) !important;
}

/* ===== Procurement Tabs Layout Fix ===== */

/* Prevent vertical tabs container from stretching to full height of content */
.fi-sc-tabs.fi-vertical {
	align-items: flex-start !important;
}

/* ===== Company Information Upload Contrast - Light Mode ===== */

:root:not(.dark) body.fi-body .logo-viewer-label,
:root:not(.dark) body.fi-body .file-viewer-label {
	color: #030712 !important;
	font-family: inherit !important;
	font-size: 0.875rem !important;
	font-weight: 500 !important;
	line-height: 1.25rem !important;
	opacity: 1 !important;
}

:root:not(.dark) body.fi-body .file-viewer-name,
:root:not(.dark) body.fi-body .file-viewer-empty,
:root:not(.dark) body.fi-body .logo-viewer-empty {
	color: #111827 !important;
	opacity: 1 !important;
}

:root:not(.dark) body.fi-body .file-viewer-name {
	font-weight: 500 !important;
}

:root:not(.dark) body.fi-body .fi-fo-field:has(.fi-fo-file-upload) .fi-fo-field-label-content {
	color: #030712 !important;
	font-weight: 500 !important;
	opacity: 1 !important;
}

:root:not(.dark) body.fi-body .fi-fo-file-upload .filepond--drop-label label,
:root:not(.dark) body.fi-body .fi-fo-file-upload .filepond--file,
:root:not(.dark) body.fi-body .fi-fo-file-upload .filepond--file-info-main,
:root:not(.dark) body.fi-body .fi-fo-file-upload .filepond--file-status-main {
	color: #111827 !important;
	opacity: 1 !important;
}

:root:not(.dark) body.fi-body .fi-fo-file-upload .filepond--file-info-sub,
:root:not(.dark) body.fi-body .fi-fo-file-upload .filepond--file-status-sub {
	color: #4b5563 !important;
	opacity: 1 !important;
}

:root:not(.dark) body.fi-body .fi-fo-file-upload .filepond--item-panel {
	background-color: #f8fafc !important;
	border: 1px solid #cbd5e1 !important;
}

:root:not(.dark) body.fi-body .fi-fo-file-upload [data-filepond-item-state='processing-complete'] .filepond--item-panel {
	background-color: #ecfdf5 !important;
	border-color: #86efac !important;
}

/* ===== Email Verified Page ===== */

.ev-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 1rem 0 2rem;
	gap: 1.25rem;
	text-align: center;
}

.ev-icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	border-radius: 9999px;
	background-color: rgb(220 252 231);
}

.dark .ev-icon-wrap {
	background-color: rgb(20 83 45);
}

.ev-heading {
	font-size: 1.125rem;
	font-weight: 600;
	color: rgb(3 7 18);
	text-align: center;
	margin: 0;
}

.dark .ev-heading {
	color: rgb(255 255 255);
}

.ev-text {
	font-size: 0.875rem;
	line-height: 1.5rem;
	color: rgb(107 114 128);
	text-align: center;
	margin: 0;
}

.dark .ev-text {
	color: rgb(156 163 175);
}

.ev-btn {
	width: 100%;
}

/* Ensure logo is properly sized on simple-layout pages (e.g. email-verified) */
.fi-simple-page .fi-logo {
	height: 5rem !important;
}