@import "antd/dist/reset.css";
@import "./file-management.css";

body {
	margin: 0;
	font-family:
		-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
		"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

code {
	font-family:
		source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}

.dropdown-btn,
.dropdown-btn > .sc-dropdown-trigger,
.dropdown-btn > .sc-btn-default {
	border: none;
	box-shadow: none;
	padding: 0;
}

.dropdown-btn > .sc-dropdown-trigger > span {
	background-color: white !important;
}

.simplyconf-site-layout-content {
	min-height: 680px;
}

.simplyconf-logo {
	float: left;
	width: 60px;
	cursor: pointer;
}

.simplyconf-logo img {
	width: 100%;
	height: inherit;
}

.simplyconf-breadcrumb {
	cursor: pointer;
}

.simplyconf-layout-header {
	background: white !important;
	padding: 0 12px !important;
}

/* Wrapper page container */
.simplyconf-wrapper-container {
	background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	min-height: calc(100vh - 200px);
	padding: 12px;
}

/* Wrapper page header */
.simplyconf-wrapper-header {
	margin-bottom: 12px;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.8);
	border-left: 4px solid var(--simplyconf-primary-color, #1890ff);
}

/* Wrapper content area */
.simplyconf-wrapper-content {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.8);
}

.simplyconf-page-stats {
	margin: "0 auto";
}

/* Page header gradient - uses theme primary color */
.simplyconf-page-header {
	margin-bottom: 24px;
	margin-top: 12px;
	background: linear-gradient(
		90deg,
		var(--simplyconf-primary-color, #667eea) 0%,
		color-mix(in srgb, var(--simplyconf-primary-color, #667eea) 80%, black) 100%
	);
	padding: 20px;
	box-shadow: 0 4px 12px
		color-mix(
			in srgb,
			var(--simplyconf-primary-color, #667eea) 15%,
			transparent
		);
	border-radius: var(--simplyconf-border-radius, 12px);
}

/* Main action button styling - for primary create/add buttons in headers */
.simplyconf-main-action-btn {
	background: rgba(255, 255, 255, 0.2) !important;
	border-color: rgba(255, 255, 255, 0.3) !important;
	color: #fff !important;
	font-weight: 600 !important;
	backdrop-filter: blur(10px);
	transition: all 0.3s ease;
}

.simplyconf-main-action-btn:hover {
	background: rgba(255, 255, 255, 0.3) !important;
	border-color: rgba(255, 255, 255, 0.4) !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Secondary action button styling - for generate defaults and other secondary actions */
.simplyconf-secondary-action-btn {
	background: rgba(255, 255, 255, 0.15) !important;
	border-color: rgba(255, 255, 255, 0.3) !important;
	color: #fff !important;
	font-weight: 500 !important;
	backdrop-filter: blur(10px);
	transition: all 0.3s ease;
}

.simplyconf-secondary-action-btn:hover {
	background: rgba(255, 255, 255, 0.25) !important;
	border-color: rgba(255, 255, 255, 0.4) !important;
	transform: translateY(-1px);
}

/* Bulk actions button styling */
.simplyconf-bulk-actions-btn {
	background: rgba(255, 255, 255, 0.2) !important;
	border-color: rgba(255, 255, 255, 0.3) !important;
	color: #fff !important;
	backdrop-filter: blur(10px);
	transition: all 0.3s ease;
}

.simplyconf-bulk-actions-btn:hover {
	background: rgba(255, 255, 255, 0.3) !important;
	border-color: rgba(255, 255, 255, 0.4) !important;
	transform: translateY(-1px);
}

/* Danger bulk action button styling (for delete selected buttons) */
.simplyconf-bulk-danger-btn {
	background: rgba(255, 77, 79, 0.8) !important;
	border-color: rgba(255, 255, 255, 0.3) !important;
	color: #fff !important;
	backdrop-filter: blur(10px);
	transition: all 0.3s ease;
	border-radius: 20px !important;
}

.simplyconf-bulk-danger-btn:hover {
	background: rgba(255, 77, 79, 0.9) !important;
	border-color: rgba(255, 255, 255, 0.4) !important;
	transform: translateY(-1px);
}

#simplyconf-dashboard {
	padding: 2rem 0;
}

.simplyconf-page-body {
	margin: 0 auto;
}

/* Indent only the tab navigation bar, not the content */
.reviews-tabs-indented .sc-tabs-nav {
	padding-left: 24px;
}

/* Card header gradient - for Ant Design Card components */
.simplyconf-card-header {
	color: #fff !important;
}

/* Dashboard stat card - white card with subtle shadow */
.simplyconf-stat-card {
	background: rgba(255, 255, 255, 0.95);
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.8);
}

/* Content card - standard card with shadow and spacing */
.simplyconf-content-card {
	margin-bottom: 24px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	border-radius: 8px;
}

.sc-descriptions-bordered .sc-descriptions-view {
	border: none !important;
}

.site-form-in-drawer-wrapper {
	position: absolute;
	right: 0px;
	bottom: 0px;
	width: 100%;
	padding: 10px 16px;
	text-align: right;
	background: #fff;
	border-top: 1px solid #e9e9e9;
}

.react-form-builder .react-form-builder-preview.is-editing .edit-form {
	left: 160px;
	top: 40px;
}

/* .sc-popover {
  z-index: 1050 !important;
} */

/* Enhanced Table Styling for Abstracts */
.table-row-light {
	background-color: #fafafa !important;
}

.table-row-dark {
	background-color: #ffffff !important;
}

.table-row-light:hover,
.table-row-dark:hover {
	background-color: color-mix(
		in srgb,
		var(--simplyconf-primary-color, #1890ff) 10%,
		white
	) !important;
}

/* Table header styling */
.sc-table-thead > tr > th {
	font-weight: 600 !important;
	color: #262626 !important;
	border-bottom: 2px solid
		color-mix(in srgb, var(--simplyconf-primary-color, #1890ff) 15%, white) !important;
}

/* Table container enhancements */
.sc-table-container {
	border-radius: 8px !important;
	overflow: hidden !important;
}

/* Pagination styling */
.sc-pagination {
	margin-top: 24px !important;
	padding: 16px !important;
	background: #fafafa !important;
	border-radius: 8px !important;
	border: 1px solid #f0f0f0 !important;
}

/* Settings card styling */
.simplyconf-settings-card {
	background: #fafafa !important;
	border: 0px !important;
}
.simplyconf-settings-card .sc-card-body {
	padding: 16px !important;
}

/* Settings collapse styling */
.simplyconf-settings-collapse {
	margin-bottom: 24px !important;
	border-radius: 0px !important;
	border: 0px !important;
}

/* Admin search input - consistent styling across all admin pages */
.simplyconf-admin-search {
	width: 220px !important;
}

.simplyconf-admin-search input {
	height: 32px !important;
	line-height: 32px !important;
	margin: -4px 4px !important;
}

.simplyconf-admin-search input::placeholder {
	line-height: 32px !important;
	vertical-align: middle !important;
}

.simplyconf-admin-search .sc-input-prefix {
	display: flex !important;
	align-items: center !important;
}

/* Standardized clickable table column link */
.simplyconf-table-link {
	padding: 0 !important;
	height: auto !important;
	text-align: left !important;
	white-space: normal !important;
	color: var(--simplyconf-primary-color, #333333) !important;
	line-height: 1.5 !important;
}

.simplyconf-table-link:hover {
	color: color-mix(
		in srgb,
		var(--simplyconf-primary-color, #333333) 75%,
		black
	) !important;
}

/* Theme-aware primary button styling */
.sc-btn-primary {
	background-color: var(--simplyconf-primary-color, #1890ff) !important;
	border-color: var(--simplyconf-primary-color, #1890ff) !important;
}

.sc-btn-primary:hover {
	background-color: color-mix(
		in srgb,
		var(--simplyconf-primary-color, #1890ff) 85%,
		black
	) !important;
	border-color: color-mix(
		in srgb,
		var(--simplyconf-primary-color, #1890ff) 85%,
		black
	) !important;
}

/* Active menu item styling */
.sc-menu-item-selected {
	color: var(--simplyconf-primary-color, #1890ff) !important;
}

.sc-menu-item-selected::after {
	border-bottom-color: var(--simplyconf-primary-color, #1890ff) !important;
}

/* Active tab styling */
.sc-tabs-tab-active .sc-tabs-tab-btn {
	color: var(--simplyconf-primary-color, #1890ff) !important;
}

.sc-tabs-ink-bar {
	background: var(--simplyconf-primary-color, #1890ff) !important;
}

/* Link styling */
a {
	color: var(--simplyconf-primary-color, #1890ff);
}

a:hover {
	color: color-mix(
		in srgb,
		var(--simplyconf-primary-color, #1890ff) 85%,
		black
	);
}

/* Theme-aware Switch (toggle) active state */
.sc-switch-checked {
	background-color: var(--simplyconf-primary-color, #1890ff) !important;
}

/* Theme-aware Checkbox checked state */
.sc-checkbox-checked .sc-checkbox-inner {
	background-color: var(--simplyconf-primary-color, #1890ff) !important;
	border-color: var(--simplyconf-primary-color, #1890ff) !important;
}

.sc-checkbox-wrapper:hover .sc-checkbox-inner,
.sc-checkbox:hover .sc-checkbox-inner {
	border-color: var(--simplyconf-primary-color, #1890ff) !important;
}

/* Theme-aware Radio checked state */
.sc-radio-checked .sc-radio-inner {
	border-color: var(--simplyconf-primary-color, #1890ff) !important;
}

.sc-radio-checked .sc-radio-inner::after {
	background-color: var(--simplyconf-primary-color, #1890ff) !important;
}

.sc-radio-wrapper:hover .sc-radio-inner,
.sc-radio:hover .sc-radio-inner {
	border-color: var(--simplyconf-primary-color, #1890ff) !important;
}

/* Theme-aware Slider track */
.sc-slider-track {
	background-color: var(--simplyconf-primary-color, #1890ff) !important;
}

.sc-slider-handle::after {
	box-shadow: 0 0 0 2px var(--simplyconf-primary-color, #1890ff) !important;
}

/* Theme-aware Select / Dropdown highlighted option */
.sc-select-item-option-selected:not(.sc-select-item-option-disabled) {
	background-color: color-mix(
		in srgb,
		var(--simplyconf-primary-color, #1890ff) 10%,
		white
	) !important;
	color: var(--simplyconf-primary-color, #1890ff) !important;
}

/* Theme-aware Tag (default variant) */
.sc-tag-blue {
	color: var(--simplyconf-primary-color, #1890ff) !important;
	border-color: color-mix(
		in srgb,
		var(--simplyconf-primary-color, #1890ff) 30%,
		white
	) !important;
	background: color-mix(
		in srgb,
		var(--simplyconf-primary-color, #1890ff) 10%,
		white
	) !important;
}

/* Theme-aware Progress bar */
.sc-progress-bg {
	background-color: var(--simplyconf-primary-color, #1890ff) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Mobile responsive — action headers (Stage 1.1)
 *
 * Every list view renders `.simplyconf-page-header` as a `<Row space-between>`
 * with the title on the left and a non-wrapping `<Space>` of fixed-width
 * controls (search 300px, selects 150px, buttons) on the right. On phones that
 * Space is 560–850px wide inside a ~300px screen, so the right-hand controls
 * either get clipped (frontend) or force the whole page to scroll (wp-admin).
 *
 * Below 768px: stack the two columns, let the controls wrap, and make the
 * search + selects fill the row so nothing overflows the viewport.
 * ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.simplyconf-page-header .sc-row {
		flex-direction: column;
		align-items: stretch;
		row-gap: 12px;
	}

	.simplyconf-page-header .sc-row > .sc-col {
		max-width: 100%;
		flex: 1 1 100%;
	}

	/* Controls Space: allow wrapping and take the full width. */
	.simplyconf-page-header .sc-space.sc-space-horizontal {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		row-gap: 8px;
	}

	/* Buttons keep their natural width and wrap onto shared rows. */
	.simplyconf-page-header .sc-space-horizontal > .sc-space-item {
		flex: 0 1 auto;
	}

	/* Search and selects span the full row (override inline width:300/150). */
	.simplyconf-page-header .sc-space-item:has(.sc-input-affix-wrapper),
	.simplyconf-page-header .sc-space-item:has(.sc-input),
	.simplyconf-page-header .sc-space-item:has(.sc-select) {
		flex: 1 1 100%;
	}

	.simplyconf-page-header .sc-space-item .sc-input-affix-wrapper,
	.simplyconf-page-header .sc-space-item .sc-input,
	.simplyconf-page-header .sc-space-item .sc-select {
		width: 100% !important;
		min-width: 0 !important;
	}

	/* Admin entity sub-nav (Stage 2.1) — the Wrapper header lays out the page
	 * title next to a non-wrapping <Space> of nav buttons via an inline
	 * `display:flex; justify-content:space-between`. On phones the title got
	 * crushed to one letter per line and the button strip (700px+) scrolled the
	 * whole admin page. Stack the title above the nav and let both wrap. */
	.simplyconf-wrapper-header > div {
		flex-wrap: wrap;
		row-gap: 12px;
	}

	.simplyconf-wrapper-header .sc-space,
	.simplyconf-wrapper-header .sc-space-horizontal {
		flex-wrap: wrap;
	}

	/* Modals (Stage 3.1) — StyledModal and Ant confirm dialogs use a fixed pixel
	 * width (default 720) that overflows a phone. Cap every modal to the viewport
	 * and pull it toward the top so the keyboard doesn't push it off-screen. */
	.sc-modal {
		max-width: calc(100vw - 16px) !important;
		margin: 8px auto !important;
		top: 8px !important;
		padding-bottom: 0;
	}

	/* Touch targets (Stage 4) — the icon-only action buttons in the list
	 * headers (refresh, columns, …) default to 32px, below the ~44px comfort
	 * target on touch screens. Bump them up on mobile. */
	.simplyconf-page-header .sc-btn,
	.simplyconf-wrapper-header .sc-btn {
		min-height: 40px;
	}

	.simplyconf-page-header .sc-btn.sc-btn-icon-only,
	.simplyconf-wrapper-header .sc-btn.sc-btn-icon-only {
		min-width: 40px;
	}
}
