/* =================================================================
   Spar ERP — project styles.
   Loaded LAST so it overrides AdminKit / Bootstrap defaults.

   Conventions:
     - CSS variables on :root for per-project theming. Override in a
       per-tenant stylesheet to rebrand without recompiling AdminKit.
     - Light mode only. Dark mode is parked — AdminKit 3.3.0 bundles
       Bootstrap 5.2, which predates the 5.3 [data-bs-theme] colour
       modes, so there is no dark palette to hook into.
     - Named utility classes (.w-input-sm, .avatar-circle-*, etc.)
       replace inline style="" attributes. No `style=""` in views.
   ================================================================= */

:root {
	/* Brand. Sampled from the SPAR droplet logo and deepened to #17739F
	   so white button text clears WCAG AA (5.26:1). --accent is the
	   logo's lighter droplet blue, for highlights on dark surfaces. */
	--brand: #17739f;
	--brand-hover: #135f83;
	--brand-active: #10536f;
	--brand-rgb: 23, 115, 159;
	--accent: #48a8d8;
	--surface: #ffffff;
	--ink: #1f2937;
	--ink-muted: #6b7280;
	--border: #e5e7eb;

	/* Layout tokens. */
	--avatar-sm: 32px;
	--avatar-md: 40px;
	--avatar-lg: 100px;
	--input-width-sm: 200px;
	--input-width-md: 280px;
}

/* =================================================================
   Brand mapping — repoint Bootstrap's "primary" at the SPAR blue.
   AdminKit ships Bootstrap 5.2, whose components read per-component
   CSS variables (--bs-btn-bg and friends), so rebranding is a matter
   of overriding those rather than recompiling Sass.
   ================================================================= */

:root {
	--bs-primary: var(--brand);
	--bs-primary-rgb: var(--brand-rgb);
	--bs-link-color: var(--brand);
	--bs-link-hover-color: var(--brand-hover);
}

.btn-primary {
	--bs-btn-bg: var(--brand);
	--bs-btn-border-color: var(--brand);
	--bs-btn-hover-bg: var(--brand-hover);
	--bs-btn-hover-border-color: var(--brand-hover);
	--bs-btn-active-bg: var(--brand-active);
	--bs-btn-active-border-color: var(--brand-active);
	--bs-btn-disabled-bg: var(--brand);
	--bs-btn-disabled-border-color: var(--brand);
	--bs-btn-focus-shadow-rgb: var(--brand-rgb);
}

.btn-outline-primary {
	--bs-btn-color: var(--brand);
	--bs-btn-border-color: var(--brand);
	--bs-btn-hover-bg: var(--brand);
	--bs-btn-hover-border-color: var(--brand);
	--bs-btn-active-bg: var(--brand);
	--bs-btn-active-border-color: var(--brand);
	--bs-btn-focus-shadow-rgb: var(--brand-rgb);
}

.text-primary {
	color: var(--brand) !important;
}

.bg-primary {
	background-color: var(--brand) !important;
}

.border-primary {
	border-color: var(--brand) !important;
}

a {
	color: var(--brand);
}

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

/* Sidebar brand lockup. AdminKit's .sidebar-brand is a text slot; we put
   the SPAR logo in it, so give the image a sane ceiling instead of an
   inline width/height attribute pair. */
.sidebar-brand-logo {
	max-width: 100%;
	height: 40px;
	object-fit: contain;
}

/* Sidebar active state + brand lockup follow the same blue. */
.sidebar-link:hover i,
.sidebar-link:hover svg,
.sidebar-item.active > .sidebar-link,
.sidebar-item.active .sidebar-link:hover {
	border-left-color: var(--brand);
}

.form-control:focus,
.form-select:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 0.2rem rgba(var(--brand-rgb), 0.25);
}

/* =================================================================
   Alerts.

   AdminKit 3.3.0's free build ships NO alert styles at all — not `.alert`,
   not the variants, not `.alert-dismissible`. Bootstrap's alert component
   is simply absent from app.css, so `<div class="alert alert-danger">`
   rendered as unstyled text. This block restores it.

   Colours are Bootstrap 5.2's own alert palette so the variants match
   every other `success` / `danger` / `warning` / `info` cue in the UI.
   ================================================================= */

.alert {
	position: relative;
	padding: 1rem;
	margin-bottom: 1rem;
	border: 1px solid transparent;
	border-radius: 0.25rem;
}

.alert-dismissible {
	padding-right: 3rem;
}

.alert-dismissible .btn-close {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	padding: 1.25rem 1rem;
}

.alert > ul {
	padding-left: 1.25rem;
}

.alert-success {
	color: #0f5132;
	background-color: #d1e7dd;
	border-color: #badbcc;
}

.alert-danger {
	color: #842029;
	background-color: #f8d7da;
	border-color: #f5c2c7;
}

.alert-warning {
	color: #664d03;
	background-color: #fff3cd;
	border-color: #ffecb5;
}

.alert-info {
	color: #055160;
	background-color: #cff4fc;
	border-color: #b6effb;
}

/* Bootstrap's fade transition — `.fade` exists in AdminKit but the paired
   opacity rules that make a dismissible alert visible do not. */
.alert.fade {
	transition: opacity 0.15s linear;
}

.alert.fade:not(.show) {
	opacity: 0;
}

.alert.fade.show {
	opacity: 1;
}

/* =================================================================
   Pagination.

   Like alerts, AdminKit's free build ships NO pagination styles —
   `.pagination`, `.page-item` and `.page-link` are all absent, so the
   pager rendered as a bulleted <ul>. Reimplemented here on the brand
   colour rather than Bootstrap's default blue.
   ================================================================= */

.pagination {
	display: flex;
	padding-left: 0;
	list-style: none;
	gap: 0.25rem;
}

.page-link {
	display: block;
	padding: 0.375rem 0.75rem;
	color: var(--ink);
	background-color: #fff;
	border: 1px solid var(--border);
	border-radius: 0.25rem;
	text-decoration: none;
	transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.page-link:hover {
	color: var(--brand-hover);
	background-color: #f8f9fa;
	border-color: var(--border);
}

.page-link:focus {
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(var(--brand-rgb), 0.25);
}

.page-item.active .page-link {
	color: #fff;
	background-color: var(--brand);
	border-color: var(--brand);
}

/* Disabled ends must not look clickable — the old markup left "previous"
   on page 1 looking live while linking back to page 1. */
.page-item.disabled .page-link {
	color: var(--ink-muted);
	background-color: #fff;
	border-color: var(--border);
	opacity: 0.55;
	pointer-events: none;
}

.pagination-sm .page-link {
	padding: 0.25rem 0.5rem;
	font-size: 0.875rem;
}

/* =================================================================
   Button color contrast — keep text legible on solid backgrounds.
   ================================================================= */

.btn-secondary,
.btn-warning,
.btn-success {
	--bs-btn-color: #fff;
	--bs-btn-hover-color: #fff;
	--bs-btn-active-color: #fff;
	--bs-btn-disabled-color: #eee;
}

/* =================================================================
   Named utility classes — sweep targets for inline `style=""`.
   ================================================================= */

/* Chart canvas wrapper. Chart.js sizes itself from its PARENT, so a bare
   canvas inside a card body can resolve to zero height and render nothing.
   Every [data-chart] canvas must sit in one of these. */
.chart-box {
	position: relative;
	height: 260px;
}

.chart-box-sm {
	height: 200px;
}

/* Dashboard stat tile — the coloured icon disc next to the number. */
.stat-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(var(--brand-rgb), 0.1);
	color: var(--brand);
	flex-shrink: 0;
}

.stat-icon-danger {
	background: rgba(220, 53, 69, 0.1);
	color: #dc3545;
}

.stat-icon-warning {
	background: rgba(255, 193, 7, 0.15);
	color: #b98900;
}

.stat-icon-success {
	background: rgba(25, 135, 84, 0.1);
	color: #198754;
}

/* Auth card (login / register / reset) — replaces Volt's .fmxw-500. */
.auth-card {
	max-width: 500px;
}

/* Filter search inputs in list-toolbars. */
.w-input-sm {
	width: var(--input-width-sm);
}

.w-input-md {
	width: var(--input-width-md);
}

/* Compact filter dropdowns: shrink-to-content selects. */
.form-select-auto {
	width: auto;
}

/* Avatar sizing. Use these instead of inline width/height. */
.avatar-square-md {
	width: var(--avatar-md);
	height: var(--avatar-md);
	object-fit: cover;
}

.avatar-circle-lg {
	width: var(--avatar-lg);
	height: var(--avatar-lg);
	object-fit: cover;
}

/* Account profile header — colored band above the body, with the
   avatar overlapping. Replaces a stack of inline `style="..."`. */
.account-cover {
	height: 100px;
	border-radius: 0.5rem 0.5rem 0 0;
}

.account-body-offset {
	margin-top: -60px;
}

/* =================================================================
   FullCalendar — tweaks to make AdminKit + FC look at home.
   ================================================================= */

.fc-daygrid-day-frame {
	padding: 0.5rem;
}

.fc-daygrid-day-number {
	color: var(--bs-body-color);
	font-weight: 600;
}

.fc-col-header-cell-cushion {
	color: var(--bs-body-color);
}

.fc-daygrid-event {
	border: none;
	color: var(--bs-body-color);
	margin-bottom: 0.25rem;
}

.fc-col-header-cell {
	background-color: var(--bs-light);
	font-size: 1rem !important;
	font-weight: 600 !important;
	padding-top: 0.5rem !important;
	padding-bottom: 0.5rem !important;
}

.fc-theme-standard a {
	color: var(--bs-body-color);
}

.fc-list-day-text {
	font-weight: 600;
	margin-right: 0.5rem;
}

/* =================================================================
   Planner / drag-drop helpers (used by SortableJS-driven views).
   ================================================================= */

.planner-sort-placeholder {
	background-color: var(--bs-light);
	border: 1px dashed var(--bs-border-color);
	min-height: 36px;
}

.planner-reports-list .planner-report-item {
	display: block;
}

.planner-report-item.planner-selected {
	box-shadow: inset 0 0 0 2px rgba(13, 110, 253, 0.35);
	background: rgba(13, 110, 253, 0.05);
}

.planner-report-item.planner-multi-moving {
	opacity: 0.6;
}

.planner-multi-helper {
	padding: 4px 8px;
	background: rgba(13, 110, 253, 0.1);
	border: 1px solid rgba(13, 110, 253, 0.25);
	border-radius: 6px;
	font-size: 12px;
}

/* =================================================================
   Confirm popover (vanilla replacement for the old jQuery popover).
   ================================================================= */

.zo-confirm-popover .popover-body {
	min-width: 220px;
}

.zo-confirm-popover .zo-confirm-actions {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

/* =================================================================
   Global toast. Shown by ZO.toast(text, color) from script.js.
   Position: fixed bottom-right, fades in/out via the .show class.
   ================================================================= */

#zo-toast {
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	z-index: 1100;
	padding: 0.75rem 1rem;
	border-radius: 0.5rem;
	background: var(--bs-primary, var(--accent));
	color: #fff;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.18s ease, transform 0.18s ease;
	pointer-events: none;
}

#zo-toast.show {
	opacity: 1;
	transform: translateY(0);
}