/* ================================================================
   BAROQUE – APPLICATION THEME
   Branding overwrite for sysprofiler-framework-core (FINAL VERSION).
   Load AFTER sysprofiler-framework-core.css.
   ================================================================ */

:root {
	/* Baroque brand palette */
	--color-page: #f4f4f4;
	--color-card: #ffffff;
	--color-header: #000000;
	--color-header-border: rgba(255, 255, 255, 0.10);
	--color-text: #1b1b1b;
	--color-muted: #777777;
	--color-nav: #ffffff;
	--color-primary: #1b1b1b;
	--color-primary-dark: #000000;
	--color-secondary: #777777;
	--color-accent: #c19d60;
	--color-border: #ececec;
	--color-highlight-bg: #f2eee8;
	--color-icon-bg: #f2eee8;
	--color-icon-border-light: rgba(193, 157, 96, 0.34);

	/* Bootstrap mapping */
	--bs-primary: #1b1b1b;
	--bs-primary-rgb: 27, 27, 27;
	--bs-secondary: #777777;
	--bs-secondary-rgb: 119, 119, 119;
	--bs-body-color: #1b1b1b;
	--bs-body-bg: #f4f4f4;
	--bs-border-color: #ececec;
	--bs-link-color: #9d7942;
	--bs-link-hover-color: #c19d60;

	/* Application assets */
	--baroque-gold: #c19d60;
	--baroque-gold-dark: #9d7942;
	--baroque-cream: #f2eee8;
	--baroque-black: #000000;
	--baroque-auth-image: url("/assets/images/main-hero.jpg");
}

/* ================================================================
   Base and typography
   ================================================================ */

body {
	background: var(--color-page);
	color: var(--color-text);
}

a {
	color: var(--baroque-gold-dark);
}

a:hover {
	color: var(--color-accent);
}

.sp-page-title,
.sp-dashboard-hero h1,
.sp-auth-title {
	color: var(--color-primary);
}

.sp-eyebrow {
	color: var(--baroque-gold-dark);
	letter-spacing: 0.08em;
}

/* ================================================================
   Header and navigation
   ================================================================ */

.sp-header,
.sp-topbar,
.navbar.sp-navbar {
	background: var(--color-header);
	border-color: var(--color-header-border);
}

.sp-header .nav-link,
.sp-topbar .nav-link,
.sp-header .sp-user-menu-toggle,
.sp-topbar .sp-user-menu-toggle {
	color: rgba(255, 255, 255, 0.78);
}

.sp-header .nav-link:hover,
.sp-header .nav-link.active,
.sp-topbar .nav-link:hover,
.sp-topbar .nav-link.active,
.sp-header .sp-user-menu-toggle:hover,
.sp-topbar .sp-user-menu-toggle:hover {
	color: #ffffff;
}

.sp-header .nav-link.active::after,
.sp-topbar .nav-link.active::after {
	background: var(--color-accent);
}

/* ================================================================
   Buttons and interactive accents
   ================================================================ */

.btn-primary {
	--bs-btn-color: #ffffff;
	--bs-btn-bg: #1b1b1b;
	--bs-btn-border-color: #1b1b1b;
	--bs-btn-hover-color: #1b1b1b;
	--bs-btn-hover-bg: #c19d60;
	--bs-btn-hover-border-color: #c19d60;
	--bs-btn-active-color: #1b1b1b;
	--bs-btn-active-bg: #b68f50;
	--bs-btn-active-border-color: #b68f50;
	--bs-btn-disabled-color: #ffffff;
	--bs-btn-disabled-bg: #777777;
	--bs-btn-disabled-border-color: #777777;
}

.btn-outline-primary {
	--bs-btn-color: #9d7942;
	--bs-btn-border-color: #c19d60;
	--bs-btn-hover-color: #1b1b1b;
	--bs-btn-hover-bg: #c19d60;
	--bs-btn-hover-border-color: #c19d60;
	--bs-btn-active-color: #1b1b1b;
	--bs-btn-active-bg: #b68f50;
	--bs-btn-active-border-color: #b68f50;
}

.page-link,
.nav-tabs .nav-link:hover {
	color: var(--baroque-gold-dark);
}

.page-item.active .page-link,
.nav-tabs .nav-link.active {
	border-color: var(--color-primary);
	background: var(--color-primary);
	color: #ffffff;
}

/* ================================================================
   Cards, tables and forms
   ================================================================ */

.card,
.modal-content,
.dropdown-menu {
	border-color: var(--color-border);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.sp-page-icon {
	border-color: var(--color-icon-border-light);
	background: var(--baroque-cream);
	color: var(--baroque-gold-dark);
}

.table > :not(caption) > * > * {
	border-bottom-color: var(--color-border);
}

.table thead th {
	background: var(--baroque-cream);
	color: var(--color-primary);
}

.form-control:focus,
.form-select:focus,
.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 0.2rem rgba(193, 157, 96, 0.18);
}

.form-check-input:checked {
	border-color: var(--color-accent);
	background-color: var(--color-accent);
}

/* ================================================================
   Authentication page
   Uses the same Core markup; only the visual panel is replaced.
   ================================================================ */

.sp-auth-page,
body.sp-auth-page {
	background-color: var(--baroque-black);
	background-image: var(--baroque-auth-image);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* The FINAL Core renders its auth background on .sp-auth-page::before.
   Replace the former pattern with a dark readability overlay. */
.sp-auth-page::before {
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.28) 50%, rgba(0, 0, 0, 0.62) 100%);
	background-size: auto;
}

.sp-auth-visual,
.sp-auth-brand,
.sp-auth-brand-panel,
.sp-auth-hero {
	position: relative;
	background-color: var(--baroque-black);
	background-image:
		linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.62) 100%),
		var(--baroque-auth-image);
	background-position: center;
	background-size: cover;
}

.sp-auth-visual::after,
.sp-auth-brand::after,
.sp-auth-brand-panel::after,
.sp-auth-hero::after {
	position: absolute;
	inset: 0;
	border: 1px solid rgba(255, 255, 255, 0.10);
	content: "";
	pointer-events: none;
}

.sp-auth-visual > *,
.sp-auth-brand > *,
.sp-auth-brand-panel > *,
.sp-auth-hero > * {
	position: relative;
	z-index: 1;
}

.sp-auth-visual h1,
.sp-auth-visual h2,
.sp-auth-visual p,
.sp-auth-brand h1,
.sp-auth-brand h2,
.sp-auth-brand p,
.sp-auth-brand-panel h1,
.sp-auth-brand-panel h2,
.sp-auth-brand-panel p,
.sp-auth-hero h1,
.sp-auth-hero h2,
.sp-auth-hero p {
	color: #ffffff;
}

.sp-auth-card,
.sp-auth-form-panel {
	border-color: rgba(193, 157, 96, 0.24);
	background: rgba(255, 255, 255, 0.98);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22);
}

.sp-auth-card .btn-primary,
.sp-auth-form-panel .btn-primary {
	width: 100%;
}


/* ================================================================
   Touch optimated pages
   ================================================================ */

.sp-touch-page .form-control-xl {
	min-height: 72px;
	padding: 1rem 1.25rem;
	border-radius: 12px;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
}

.sp-touch-page .btn-xl {
	min-height: 64px;
	padding: 1rem 1.5rem;
	border-radius: 12px;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.2;
}

/* Fallback for the Core variant where the gradient sits directly on
   the auth wrapper instead of a dedicated visual column. */
.sp-auth-shell {
	background-color: var(--baroque-black);
	background-image:
		linear-gradient(90deg, rgba(0, 0, 0, 0.56) 0%, rgba(0, 0, 0, 0.20) 48%, rgba(0, 0, 0, 0.54) 100%),
		var(--baroque-auth-image);
	background-position: center;
	background-size: cover;
}

/* ================================================================
   Kanban Board
   ================================================================ */

.sp-kanban {
	width: 100%;
}

.sp-kanban-board {
	display: flex;
	gap: var(--grid-gap);
	align-items: stretch;
	width: 100%;
}

.sp-kanban-column {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	flex-direction: column;
	border: 1px solid var(--color-border);
	border-radius: var(--admin-radius);
	background: var(--color-card);
	overflow: hidden;
}

.sp-kanban-column-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 54px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--color-border);
}

.sp-kanban-column-title {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--color-primary);
	font-size: 0.85rem;
	font-weight: 750;
}

.sp-kanban-column-title span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sp-kanban-count {
	display: inline-flex;
	min-width: 26px;
	height: 24px;
	align-items: center;
	justify-content: center;
	padding-inline: 7px;
	border: 0;
	border-radius: 999px;
	background: var(--color-highlight-bg);
	color: var(--color-muted);
	font-size: 0.72rem;
	font-weight: 700;
}

.sp-kanban-column-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
}

/* ------------------------------------------------------------
   Kanban Card
   ------------------------------------------------------------ */

.sp-kanban-card {
	position: relative;
	padding: 14px;
	border: 1px solid var(--color-border);
	border-radius: 10px;
	background: var(--color-card);
	box-shadow: 0 4px 14px rgba(7, 31, 50, 0.05);
	transition:
		border-color 0.16s ease,
		box-shadow 0.16s ease,
		transform 0.16s ease;
}

.sp-kanban-card:hover {
	border-color: var(--color-icon-border-light);
	box-shadow: 0 8px 22px rgba(7, 31, 50, 0.09);
}

.sp-kanban-card-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}

.sp-kanban-card-title {
	margin: 0;
	color: var(--color-text);
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.35;
}

.sp-kanban-card-title a {
	color: inherit;
}

.sp-kanban-card-title a:hover {
	color: var(--color-accent);
}

.sp-kanban-card-description {
	display: -webkit-box;
	margin-top: 8px;
	overflow: hidden;
	color: var(--color-muted);
	font-size: 0.8rem;
	line-height: 1.45;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.sp-kanban-card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid rgba(11, 31, 51, 0.08);
	color: var(--color-muted);
	font-size: 0.74rem;
}

.sp-kanban-card-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.sp-kanban-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 12px;
}

.sp-kanban-card-actions {
	display: flex;
	align-items: center;
	gap: 4px;
}

/* ------------------------------------------------------------
   Card status accent
   ------------------------------------------------------------ */

.sp-kanban-card[data-status="info"] {
	border-left: 3px solid var(--color-accent);
}

.sp-kanban-card[data-status="open"] {
	border-left: 3px solid var(--admin-danger);
}

.sp-kanban-card[data-status="progress"] {
	border-left: 3px solid var(--admin-warning);
}

.sp-kanban-card[data-status="done"] {
	border-left: 3px solid var(--admin-success);
}

.sp-kanban-card[data-status="blocked"] {
	border-left: 3px solid var(--admin-danger);
}

/* ------------------------------------------------------------
   Card priority highlight
   ------------------------------------------------------------ */

.sp-kanban-card[data-priority="1"] {
	box-shadow: 0 0 0 2px rgba(200, 74, 74, 0.18), 0 8px 22px rgba(7, 31, 50, 0.09);
}

.sp-kanban-card[data-priority="3"] {
	box-shadow: 0 0 0 2px rgba(201, 130, 0, 0.16), 0 8px 22px rgba(7, 31, 50, 0.08);
}

/* ------------------------------------------------------------
   Empty column
   ------------------------------------------------------------ */

.sp-kanban-empty {
	padding: 24px 16px;
	border: 1px dashed rgba(11, 31, 51, 0.18);
	border-radius: 10px;
	color: var(--color-muted);
	text-align: center;
	font-size: 0.8rem;
}


/* ================================================================
   Status indicators
   ================================================================ */

.sp-status-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 6px;
	border-radius: 50%;
	background: var(--color-muted);
}

.sp-status-dot.is-backlog {
	background: var(--admin-danger);
}

.sp-status-dot.is-progress {
	background: var(--admin-warning);
}

.sp-status-dot.is-done {
	background: var(--admin-success);
}

.sp-status-dot.is-info {
	background: var(--color-accent);
}

/* ================================================================
   Responsive – Application Components
   ================================================================ */


@media (max-width: 991.98px) {
        .sp-auth-visual,
	.sp-auth-brand,
	.sp-auth-brand-panel,
	.sp-auth-hero {
		min-height: 240px;
		background-position: center 42%;
	}

	.sp-kanban-board {
		overflow-x: auto;
		padding-bottom: 8px;
		scroll-snap-type: x proximity;
	}

	.sp-kanban-column {
		flex: 0 0 320px;
		scroll-snap-align: start;
	}
}

@media (max-width: 575.98px) {
        .sp-auth-visual,
	.sp-auth-brand,
	.sp-auth-brand-panel,
	.sp-auth-hero {
		min-height: 190px;
	}

	.sp-auth-card,
	.sp-auth-form-panel {
		box-shadow: none;
	}

	.sp-kanban-board {
		gap: 12px;
	}

	.sp-kanban-column {
		flex-basis: calc(100vw - 48px);
	}

	.sp-kanban-column-header {
		padding: 12px 14px;
	}

	.sp-kanban-column-body {
		padding: 10px;
	}

	.sp-kanban-card {
		padding: 12px;
	}
}