/* =============================================================================
   WebifyGO Admin — Shared UI Improvements
   Loaded globally via header.tpl after style.css and includes/style.css.
   All interactive color tokens use var(--bs-primary) / var(--bs-primary-rgb)
   so white-label theming works correctly.
   ============================================================================= */

/* ---- Design tokens -------------------------------------------------------- */
:root {
	--wb-surface-0: #F5F7FA;
	--wb-surface-1: #FFFFFF;
	--wb-border: #E2E8F0;
	--wb-border-md: #CBD5E1;
	--wb-text: #0F172A;
	--wb-text-2: #64748B;
	--wb-text-3: #94A3B8;
	--wb-sidebar: #EAECEF;
	--wb-radius: 8px;
	--wb-radius-sm: 6px;
}

/* ---- Navbar --------------------------------------------------------------- */

.hk-navbar {
	border-bottom: 2px solid rgba(69, 80, 223, 1) !important;
}

.hk-navbar .dropdown-menu {
	border: 1px solid var(--wb-border);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
	border-radius: var(--wb-radius);
}

/* ---- Sidebar nav — scoped to .hk-menu to avoid clobbering tab/pill navs -- */

.hk-menu {
	background: var(--wb-sidebar) !important;
}

.hk-menu .nav-link:hover {
	background-color: rgba(0, 0, 0, 0.04) !important;
}

/* Active — left-border indicator instead of a background fill.
   The 3px inset shadow on the left is the signature wayfinding signal:
   precise, not decorative, earns its place in a 30-item settings nav. */
.hk-menu .nav-link.active {
	background-color: rgba(var(--bs-primary-rgb), 0.06) !important;
	color: var(--bs-primary) !important;
	box-shadow: inset 3px 0 0 var(--bs-primary) !important;
	font-weight: 600;
	border-radius: 0 0.375rem 0.375rem 0 !important;
}

.hk-menu .navbar-nav > .nav-item > .nav-link {
	border-radius: 0.375rem;
	transition: background-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

.hk-menu .navbar-nav > .nav-item > .nav-link:hover {
	background-color: rgba(0, 0, 0, 0.04) !important;
}

/* ---- Sidebar header & section labels -------------------------------------- */

.menu-header {
	padding: 1rem;
	border-bottom: 2px solid rgba(69, 80, 223, 1) !important;
}

.nav-header span {
	color: var(--wb-text-3);
	font-weight: 700;
	font-size: 0.625rem;
	text-transform: uppercase;
	letter-spacing: 0.09em;
}

/* ---- Page background ------------------------------------------------------ */

.hk-pg-body {
	background: var(--wb-surface-0);
}

/* ---- Page header ---------------------------------------------------------- */

.contactapp-title {
	font-size: 0.9375rem !important;
	font-weight: 600 !important;
	color: var(--wb-text) !important;
	letter-spacing: -0.01em;
}

/* ---- Cards ---------------------------------------------------------------- */

.hk-pg-wrapper .card {
	border-color: var(--wb-border);
	border-radius: var(--wb-radius);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
}

.hk-pg-wrapper .card.shadow-sm {
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
}

/* Card section headers — eyebrow label treatment.
   Smaller, not larger, than default h6. Uppercase + tracked = annotation,
   not headline. Signals "this names the section" without competing with content. */
.hk-pg-wrapper .card-header {
	background: var(--wb-surface-1);
	border-bottom-color: var(--wb-border);
}

.hk-pg-wrapper .card-header h2,
.hk-pg-wrapper .card-header h3,
.hk-pg-wrapper .card-header h4,
.hk-pg-wrapper .card-header h5,
.hk-pg-wrapper .card-header h6,
.hk-pg-wrapper .card-header .h5,
.hk-pg-wrapper .card-header .h6 {
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--wb-text-2);
	margin-bottom: 0;
}

.hk-pg-wrapper .card-header h2 i,
.hk-pg-wrapper .card-header h3 i,
.hk-pg-wrapper .card-header h4 i,
.hk-pg-wrapper .card-header h5 i,
.hk-pg-wrapper .card-header h6 i {
	opacity: 0.55;
}

/* Exempt colored card headers (bg-primary, bg-success, etc.) from eyebrow treatment.
   text-white / text-dark are always present on colored headers — use them as the selector hook. */
.hk-pg-wrapper .card-header.text-white h2,
.hk-pg-wrapper .card-header.text-white h3,
.hk-pg-wrapper .card-header.text-white h4,
.hk-pg-wrapper .card-header.text-white h5,
.hk-pg-wrapper .card-header.text-white h6,
.hk-pg-wrapper .card-header.text-dark h2,
.hk-pg-wrapper .card-header.text-dark h3,
.hk-pg-wrapper .card-header.text-dark h4,
.hk-pg-wrapper .card-header.text-dark h5,
.hk-pg-wrapper .card-header.text-dark h6 {
	font-size: revert;
	font-weight: revert;
	text-transform: none;
	letter-spacing: normal;
	color: inherit;
	margin-bottom: 0;
}

/* Collapsible card headers */
.card-header[data-bs-toggle='collapse'] {
	background: var(--wb-surface-0);
}

.card-header[data-bs-toggle='collapse']:hover {
	background: #ECEFF3;
}

/* ---- Notifications -------------------------------------------------------- */

.notifications-text {
	font-weight: 500;
}

.notifications-time {
	font-size: 0.75rem;
	color: var(--wb-text-2);
}

/* ---- Global Search -------------------------------------------------------- */

.gs-item:hover,
.gs-item.gs-active {
	background-color: rgba(var(--bs-primary-rgb), 0.08);
	color: var(--bs-primary) !important;
}

.gs-group-label {
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* ---- Form container max-width (create/edit forms) ------------------------- */

.create-form-wrap {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

/* ---- Form labels ---------------------------------------------------------- */

.form-label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: #495057;
	margin-bottom: 0.3rem;
}

/* Tighter inside the page wrapper */
.hk-pg-wrapper .form-label {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--wb-text-2);
	margin-bottom: 0.25rem;
	letter-spacing: 0.01em;
}

/* ---- Form controls -------------------------------------------------------- */

.hk-pg-wrapper .form-control,
.hk-pg-wrapper .form-select {
	font-size: 0.875rem;
	border-color: var(--wb-border-md);
	border-radius: var(--wb-radius-sm);
	color: var(--wb-text);
}

.hk-pg-wrapper .form-control-sm,
.hk-pg-wrapper .form-select-sm {
	font-size: 0.8125rem;
	border-radius: var(--wb-radius-sm);
}

/* ---- Input focus ring using primary token --------------------------------- */

.form-control:focus,
.form-select:focus {
	border-color: rgba(var(--bs-primary-rgb), 0.5);
	box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15);
}

.hk-pg-wrapper .form-control:focus,
.hk-pg-wrapper .form-select:focus {
	border-color: rgba(var(--bs-primary-rgb), 0.55);
	box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.12);
}

/* ---- Buttons -------------------------------------------------------------- */

.hk-pg-wrapper .btn {
	font-weight: 500;
	font-size: 0.8125rem;
	border-radius: var(--wb-radius-sm);
	letter-spacing: 0.01em;
	transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

/* Primary — subtle resting elevation, lifts on hover */
.hk-pg-wrapper .btn-primary {
	box-shadow: 0 1px 3px rgba(var(--bs-primary-rgb), 0.25);
}

.hk-pg-wrapper .btn-primary:hover {
	box-shadow: 0 4px 10px rgba(var(--bs-primary-rgb), 0.32) !important;
	transform: translateY(-1px);
}

.hk-pg-wrapper .btn-primary:active {
	transform: translateY(0);
	box-shadow: 0 1px 3px rgba(var(--bs-primary-rgb), 0.2) !important;
}

/* Secondary — ghost: no fill, just a quiet border */
.hk-pg-wrapper .btn-secondary {
	background: transparent;
	border-color: var(--wb-border-md);
	color: var(--wb-text-2);
}

.hk-pg-wrapper .btn-secondary:hover {
	background: var(--wb-surface-0);
	border-color: var(--wb-border-md);
	color: var(--wb-text);
	box-shadow: none;
}

.hk-pg-wrapper .btn-outline-secondary {
	border-color: var(--wb-border-md);
	color: var(--wb-text-2);
}

.hk-pg-wrapper .btn-outline-secondary:hover {
	background: var(--wb-surface-0);
	border-color: var(--wb-border-md);
	color: var(--wb-text);
}

/* Global fallback for btn-primary hover (outside .hk-pg-wrapper) */
.btn-primary:hover {
	box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.28);
}

/* ---- Activity timeline dot using primary token ---------------------------- */

.tl-dot {
	box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.25);
}

/* ---- Tables --------------------------------------------------------------- */

.hk-pg-wrapper .table-light th {
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wb-text-2);
	background: var(--wb-surface-0);
	border-color: var(--wb-border);
}

.hk-pg-wrapper .table > :not(caption) > * > * {
	border-color: var(--wb-border);
}

/* ---- Settings offcanvas panel --------------------------------------------- */

#settingsPanel .offcanvas-header {
	background: var(--wb-surface-0);
}

#settingsPanel .list-group-item {
	font-size: 0.8125rem;
	color: var(--wb-text-2);
	border-color: var(--wb-border);
	transition: background 0.1s ease, color 0.1s ease;
}

#settingsPanel .list-group-item:hover {
	background: var(--wb-surface-0);
	color: var(--bs-primary);
}

#settingsPanel .list-group-item img {
	transition: opacity 0.1s ease;
}

#settingsPanel .list-group-item:hover img {
	opacity: 0.7;
}

/* ---- Dropdowns ------------------------------------------------------------ */

.hk-pg-wrapper .dropdown-menu {
	border-color: var(--wb-border);
	border-radius: var(--wb-radius);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
}

.hk-pg-wrapper .dropdown-item {
	font-size: 0.875rem;
	color: var(--wb-text);
	border-radius: var(--wb-radius-sm);
}

.hk-pg-wrapper .dropdown-item:hover {
	background: var(--wb-surface-0);
	color: var(--wb-text);
}

/* ---- Modals --------------------------------------------------------------- */

.modal-content {
	border-color: var(--wb-border);
	border-radius: var(--wb-radius);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
}

.modal-header {
	border-bottom-color: var(--wb-border);
}

.modal-footer {
	border-top-color: var(--wb-border);
}

.modal-title {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--wb-text);
}

/* ---- Thin scrollbar (admin wrapper only) ---------------------------------- */

.hk-pg-wrapper ::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

.hk-pg-wrapper ::-webkit-scrollbar-thumb {
	background-color: #ced4da;
	border-radius: 3px;
}

.hk-pg-wrapper ::-webkit-scrollbar-track {
	background-color: transparent;
}

/* ---- Reduced motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.hk-pg-wrapper .btn {
		transition: none;
		transform: none !important;
	}

	.hk-menu .navbar-nav > .nav-item > .nav-link {
		transition: none;
	}
}

/* ---- Contact page header -------------------------------------------------- */

/* Adds a clean surface+border treatment to the shared page header shell */
.contact-header {
	border-bottom: 1px solid var(--wb-border);
	background: var(--wb-surface-1);
}

/* ---- Navigation tabs — translations page, any tabbed card panel ----------- */

.hk-pg-wrapper .nav-tabs {
	border-bottom-color: var(--wb-border);
	gap: 2px;
	background: #f7f7f7;
}

.hk-pg-wrapper .nav-tabs .nav-link {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--wb-text-2);
	border: none;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	padding: 0.5rem 0.875rem;
	transition: color 0.12s ease, border-color 0.12s ease;
}

.hk-pg-wrapper .nav-tabs .nav-link:hover {
	color: var(--wb-text);
	background: none;
	border-color: transparent;
	border-bottom: 2px solid var(--wb-border-md);
}

.hk-pg-wrapper .nav-tabs .nav-link.active {
	color: var(--bs-primary);
	border-bottom: 2px solid var(--bs-primary);
	background: none;
	font-weight: 600;
}

/* ---- Pagination — users list and other paginated views -------------------- */

.hk-pg-wrapper .page-link {
	font-size: 0.8125rem;
	color: var(--wb-text-2);
	border-color: var(--wb-border);
	transition: background 0.1s ease, color 0.1s ease;
}

.hk-pg-wrapper .page-link:hover {
	background: var(--wb-surface-0);
	border-color: var(--wb-border);
	color: var(--wb-text);
}

/* ---- Card footer ---------------------------------------------------------- */

.hk-pg-wrapper .card-footer {
	background: var(--wb-surface-0);
	border-top-color: var(--wb-border);
	font-size: 0.875rem;
}

/* ---- Badges --------------------------------------------------------------- */

.hk-pg-wrapper .badge {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	border-radius: 4px;
	padding: 0.25em 0.5em;
}

/* ---- List group — permissions roles sidebar, settings items --------------- */

.hk-pg-wrapper .list-group-item {
	font-size: 0.875rem;
	border-color: var(--wb-border);
}

.hk-pg-wrapper .list-group-item-action {
	color: var(--wb-text-2);
	transition: background 0.1s ease, color 0.1s ease;
}

.hk-pg-wrapper .list-group-item-action:hover {
	background: var(--wb-surface-0);
	color: var(--bs-primary);
}

.hk-pg-wrapper .list-group-item-action.active {
	background: rgba(var(--bs-primary-rgb), 0.06);
	color: var(--bs-primary);
	border-color: var(--wb-border);
	font-weight: 600;
}

/* ---- Input group — password toggles, search bars ------------------------- */

.hk-pg-wrapper .input-group-text {
	font-size: 0.875rem;
	border-color: var(--wb-border-md);
	background: var(--wb-surface-0);
	color: var(--wb-text-2);
}

/* ---- Form text (help text below inputs) ----------------------------------- */

.hk-pg-wrapper .form-text {
	font-size: 0.75rem;
	color: var(--wb-text-3);
}

/* ---- Layout editor section labels ----------------------------------------- */

.layout-section-label {
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wb-text-2);
}

.layout-settings-body {
	max-width: 640px;
}

/* ---- Server stats progress bars ------------------------------------------- */

.stat-progress {
	height: 4px;
}

/* ---- AI field optimizer button -------------------------------------------- */

.ai-optimizer-btn {
	opacity: 0.55;
	font-size: 0.75rem;
	transition: opacity 0.12s ease, color 0.12s ease;
}

.ai-optimizer-btn:hover {
	opacity: 1;
	color: var(--bs-primary);
}

/* ---- Dashboard tab action icons (rename / delete tab) --------------------- */

.dashboard-tab-action {
	font-size: 0.6875rem;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.1s ease;
}

.dashboard-tab-action:hover {
	opacity: 1;
}

/* ============================================================
   Point 4 — Default primary color
   More intentional than Bootstrap's #0d6efd. Overridden by
   white-label config (wl-theme-vars inline style in header.tpl).
   ============================================================ */
:root {
	--bs-primary: #453dd8;
	--bs-link-color: #453dd8;
	--bs-link-hover-color: #453dd8;
}

/* ============================================================
   Point 2 — Choices.js token alignment
   Override the library's default opinionated styles to match
   our border, radius, focus ring, and surface tokens.
   ============================================================ */

/* Reset default margin-bottom on the wrapper */
.choices {
	margin-bottom: 0;
}

/* Main container — match .form-control */
.choices__inner {
	background: var(--wb-surface-1) !important;
	border: 1px solid var(--wb-border-md) !important;
	border-radius: var(--wb-radius-sm) !important;
	padding: 0.3rem 0.5rem !important;
	min-height: 36px !important;
	font-size: 0.875rem !important;
}

.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
	border-color: rgba(var(--bs-primary-rgb), 0.55) !important;
	box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.12) !important;
	outline: none !important;
}

/* Input inside choices */
.choices__input {
	font-size: 0.875rem !important;
	background: transparent !important;
	color: var(--wb-text) !important;
	margin-bottom: 0 !important;
	padding: 2px 4px !important;
}

/* Selected single item */
.choices__item.choices__item--selectable {
	font-size: 0.875rem;
}

/* Multi-select chips */
.choices__item.choices__item--choice.is-selected,
.choices__list--multiple .choices__item {
	background: rgba(var(--bs-primary-rgb), 0.1) !important;
	border: 1px solid rgba(var(--bs-primary-rgb), 0.2) !important;
	color: var(--bs-primary) !important;
	border-radius: 4px !important;
	font-size: 0.75rem !important;
}

/* Dropdown list */
.choices__list--dropdown,
.choices[data-type*='select-one'] .choices__list--dropdown {
	border: 1px solid var(--wb-border) !important;
	border-radius: var(--wb-radius-sm) !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04) !important;
	background: var(--wb-surface-1) !important;
	overflow: hidden;
}

/* Dropdown items */
.choices__list--dropdown .choices__item {
	font-size: 0.875rem !important;
	color: var(--wb-text) !important;
	padding: 7px 12px !important;
}

.choices__list--dropdown .choices__item.is-highlighted {
	background: rgba(var(--bs-primary-rgb), 0.07) !important;
	color: var(--bs-primary) !important;
}

/* Search input inside dropdown */
.choices__list--dropdown .choices__input {
	border-bottom: 1px solid var(--wb-border) !important;
	padding: 8px 12px !important;
	font-size: 0.8125rem !important;
}

/* Hide default caret arrow (already done in style.css — reinforce) */
.choices[data-type='select-one']::after { display: none !important; }

/* ============================================================
   Point 2 — Flatpickr token alignment
   ============================================================ */

/* Calendar popup */
.flatpickr-calendar {
	border: 1px solid var(--wb-border) !important;
	border-radius: var(--wb-radius) !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04) !important;
	font-size: 0.8125rem !important;
}

/* Month/year header */
.flatpickr-months {
	background: var(--wb-surface-0) !important;
	border-radius: var(--wb-radius) var(--wb-radius) 0 0 !important;
}

.flatpickr-month {
	color: var(--wb-text) !important;
	fill: var(--wb-text) !important;
}

.flatpickr-prev-month,
.flatpickr-next-month {
	color: var(--wb-text-2) !important;
	fill: var(--wb-text-2) !important;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
	color: var(--bs-primary) !important;
	fill: var(--bs-primary) !important;
}

/* Weekday labels */
.flatpickr-weekday {
	color: var(--wb-text-3) !important;
	font-size: 0.6875rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
}

/* Day cells */
.flatpickr-day {
	border-radius: var(--wb-radius-sm) !important;
	font-size: 0.8125rem !important;
	color: var(--wb-text) !important;
}

.flatpickr-day:hover {
	background: var(--wb-surface-0) !important;
	border-color: var(--wb-border) !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
	background: var(--bs-primary) !important;
	border-color: var(--bs-primary) !important;
	color: #fff !important;
}

.flatpickr-day.today {
	border-color: var(--bs-primary) !important;
	color: var(--bs-primary) !important;
	font-weight: 600 !important;
}

.flatpickr-day.today:hover {
	background: var(--bs-primary) !important;
	color: #fff !important;
}

.flatpickr-day.inRange {
	background: rgba(var(--bs-primary-rgb), 0.1) !important;
	border-color: rgba(var(--bs-primary-rgb), 0.15) !important;
}

/* ============================================================
   Point 5 — Toast notification redesign
   Override jquery.toast defaults with clean, modern toasts.
   ============================================================ */

.jq-toast-wrap {
	width: 320px !important;
	z-index: 99999 !important;
}

.jq-toast-wrap.top-right {
	top: 72px !important;
	right: 20px !important;
}

/* Base toast — override the dark gray default */
.jq-toast-single {
	border-radius: 8px !important;
	padding: 12px 16px !important;
	font-family: inherit !important;
	font-size: 0.875rem !important;
	line-height: 1.5 !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.06) !important;
	background: #fff !important;
	color: #111827 !important;
	border: 1px solid #e4e7ec !important;
	border-left-width: 4px !important;
	margin-bottom: 8px !important;
}

/* Type-specific left border + icon area */
.jq-toast-inv {
	background: #fff !important;
	color: #111827 !important;
	padding-left: 44px !important;
	position: relative !important;
}

.jq-toast-inv::before {
	content: '';
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background-size: 10px;
	background-repeat: no-repeat;
	background-position: center;
}

/* Success */
.jq-toast-inv.jq-toast-inv-success {
	border-left-color: #16a34a !important;
}
.jq-toast-inv.jq-toast-inv-success::before {
	background-color: #16a34a;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
}

/* Danger/Error */
.jq-toast-inv.jq-toast-inv-danger {
	border-left-color: #dc2626 !important;
}
.jq-toast-inv.jq-toast-inv-danger::before {
	background-color: #dc2626;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z'/%3E%3C/svg%3E");
}

/* Warning */
.jq-toast-inv.jq-toast-inv-warning {
	border-left-color: #d97706 !important;
}
.jq-toast-inv.jq-toast-inv-warning::before {
	background-color: #d97706;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z'/%3E%3C/svg%3E");
}

/* Info (default) */
.jq-toast-inv.jq-toast-inv-info,
.jq-toast-inv:not([class*='jq-toast-inv-']) {
	border-left-color: var(--bs-primary) !important;
}
.jq-toast-inv.jq-toast-inv-info::before,
.jq-toast-inv:not([class*='jq-toast-inv-'])::before {
	background-color: var(--bs-primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z'/%3E%3C/svg%3E");
}

/* Hide the progress loader bar — we don't use it */
.jq-toast-loader { display: none !important; }

/* ============================================================
   Design system propagation — settings, users, workflows, etc.
   Override Bootstrap utility classes to match list-view tokens
   without requiring template edits on every admin page.
   ============================================================ */

/* ---- Table headers: remove table-light grey, use hairline + muted labels ---- */
.hk-pg-wrapper thead.table-light,
.hk-pg-wrapper thead.table-light tr,
.hk-pg-wrapper thead.table-light th {
	background: transparent !important;
	--bs-table-bg: transparent !important;
}
.hk-pg-wrapper thead.table-light th {
	border-bottom: 2px solid var(--wb-border) !important;
	font-weight: 700 !important;
	font-size: 0.6625rem !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	color: #6f7784 !important;
	padding: 10px 14px !important;
}

/* ---- Table body rows: hairline dividers ---- */
.hk-pg-wrapper .table-hover tbody tr {
	border-bottom: 1px solid var(--wb-border);
	transition: background 0.08s ease;
}
.hk-pg-wrapper .table-hover tbody td {
	border: none;
	padding: 8px 14px;
	vertical-align: middle;
}

/* ---- Card footer: remove bg-light grey ---- */
.hk-pg-wrapper .card-footer.bg-light {
	background: transparent !important;
}
.hk-pg-wrapper .card-footer.bg-light.border-top {
	border-top-color: var(--wb-border) !important;
}

/* ---- Card header: bg-white is fine, just normalize the border ---- */
.hk-pg-wrapper .card-header.bg-white {
	background: var(--wb-surface-1) !important;
}
.hk-pg-wrapper .card-header.bg-white.border-bottom {
	border-bottom-color: var(--wb-border) !important;
}

/* ---- Shared contact-body for settings pages ---- */
.contact-body.m-3 {
	margin: 12px !important;
}
.contact-body.m-4 {
	margin: 16px !important;
}

/* ============================================================
   Modules page
   ============================================================ */

.module-search-input {
	width: 190px;
}


.module-card {
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.module-card:hover {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04) !important;
	border-color: var(--wb-border-md) !important;
}

.module-name-link {
	color: var(--wb-text);
	transition: color 0.12s ease;
}

.module-name-link:hover {
	color: var(--bs-primary) !important;
}


/* ============================================================
   Popup / iframe create mode
   ============================================================ */

.modal-xxl {
	max-width: min(1400px, 96vw);
}

.modal-xxl .modal-content {
	height: 92vh;
}

body.popup-mode .hk-navbar,
body.popup-mode .hk-menu {
	display: none !important;
}

body.popup-mode .hk-pg-wrapper {
	margin-left: 0 !important;
	padding-top: 0 !important;
}

/* ============================================================
   Task detail popup
   ============================================================ */

#con-task-popup-modal .modal-content {
	border: none;
	border-radius: 12px;
	overflow: hidden;
}

.tp-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 1.5rem 1rem;
	border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.tp-header-main {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	min-width: 0;
}

.tp-title {
	font-size: 1.05rem;
	font-weight: 600;
	margin: 0;
	line-height: 1.3;
	word-break: break-word;
}

.tp-status-badge {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 600;
	padding: 0.2rem 0.65rem;
	border-radius: 20px;
	letter-spacing: 0.02em;
}

.tp-body {
	display: flex;
	gap: 0;
	min-height: 300px;
	max-height: 500px;
}

.tp-left {
	width: 42%;
	flex-shrink: 0;
	padding: 1.25rem 1.5rem;
	border-right: 1px solid var(--bs-border-color, #dee2e6);
	overflow-y: auto;
}

.tp-right {
	flex: 1;
	padding: 1.25rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	overflow: hidden;
}

.tp-field-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem 1.25rem;
}

.tp-field {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.tp-field.tp-field-wide {
	grid-column: span 2;
}

.tp-field-label {
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bs-secondary-color, #868e96);
}

.tp-field-value {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--bs-body-color);
	word-break: break-word;
}

.tp-field-link {
	color: var(--bs-primary);
	text-decoration: none;
}

.tp-field-link:hover {
	text-decoration: underline;
}

.tp-field-empty {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--bs-border-color, #dee2e6);
	border-radius: 2px;
	margin-top: 6px;
}

.tp-desc-label {
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bs-secondary-color, #868e96);
	margin-bottom: 0.25rem;
}

.tp-desc-body {
	flex: 1;
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--bs-body-color);
	overflow-y: auto;
}

.tp-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.85rem 1.5rem;
	border-top: 1px solid var(--bs-border-color, #dee2e6);
	background: var(--bs-light, #f8f9fa);
}