/**
 * Segue Portal Site-Wide Custom Styles
 * Common styles used across all pages
 */

/* ========================================================================
   HYPERSPEED BACKGROUND
   ======================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* -- Hyperspeed starfield canvas (created by footer-js.asp on every page) -- */
/* -- Legacy #binaryRainBg divs still exist in ~180 pages; they render empty and are harmless. -- */
#hyperspeedBg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

/* -- Ensure content is above the animated background -- */
/* -- Override base template's justify-content:center which vertically centers short pages -- */
.page {
	position: relative;
	z-index: 1;
	justify-content: flex-start !important;
}

.main-content {
	position: relative;
	z-index: 1;
}

.card {
	position: relative;
	z-index: 2;
	backdrop-filter: blur(1px);
}

/* ========================================================================
   CUSTOM CARD HEADER STYLES
   ======================================================================== */

/* -- Prominent card headers: light blue gradient (page-title family) with a slow sheen sweep -- */
.custom-card .card-header {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #2a6f9e 0%, #3392c4 60%, #3fa8d8 100%);
	border-bottom: none;
	min-height: 48px;
	align-items: center;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

/* -- Subtle light band sweeping left-to-right (~8s loop); transform-only so it stays cheap -- */
.custom-card .card-header::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,0.16) 50%, transparent 75%);
	transform: translateX(-100%);
	animation: headerSheen 8s linear infinite;
	pointer-events: none;
}

@keyframes headerSheen {
	to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
	.custom-card .card-header::before { animation: none; }
}

.custom-card .card-header .card-title {
	font-family: 'Inter', sans-serif !important;
	font-weight: 700 !important;
	font-size: 1.1rem !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	background: none !important;
	-webkit-background-clip: unset !important;
	text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

.custom-card .card-header .card-title i {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
}

.custom-card .card-header .badge {
	color: #fff;
}

/* -- Card header subtitle (small text under the title) -- */
.custom-card .card-header small {
	color: rgba(255, 255, 255, 0.85) !important;
	display: block;
	margin-top: 0.25rem;
	font-size: 0.8rem;
}

/* ========================================================================
   INVENTORY BOX STYLES
   ======================================================================== */

/* -- Equal height inventory boxes -- */
.inventory-box {
	min-height: 180px;
}

.inventory-box .card {
	height: 100%;
}

.inventory-box .card-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

/* -- Inventory box gradient backgrounds matching border colors -- */
.inventory-box .border-success .card-body {
	background: linear-gradient(135deg, rgba(25, 135, 84, 0.08) 0%, rgba(255, 255, 255, 1) 50%, rgba(25, 135, 84, 0.08) 100%);
}

.inventory-box .border-danger .card-body {
	background: linear-gradient(135deg, rgba(220, 53, 69, 0.08) 0%, rgba(255, 255, 255, 1) 50%, rgba(220, 53, 69, 0.08) 100%);
}

.inventory-box .border-warning .card-body {
	background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 193, 7, 0.15) 100%);
}

.inventory-box .border-info .card-body {
	background: linear-gradient(135deg, rgba(13, 202, 240, 0.08) 0%, rgba(255, 255, 255, 1) 50%, rgba(13, 202, 240, 0.08) 100%);
}

.inventory-box .border-primary .card-body {
	background: linear-gradient(135deg, rgba(13, 110, 253, 0.08) 0%, rgba(255, 255, 255, 1) 50%, rgba(13, 110, 253, 0.08) 100%);
}

.inventory-box .border-secondary .card-body {
	background: linear-gradient(135deg, rgba(108, 117, 125, 0.08) 0%, rgba(255, 255, 255, 1) 50%, rgba(108, 117, 125, 0.08) 100%);
}

.inventory-box .border-dark .card-body {
	background: linear-gradient(135deg, rgba(33, 37, 41, 0.08) 0%, rgba(255, 255, 255, 1) 50%, rgba(33, 37, 41, 0.08) 100%);
}

.inventory-box .border-light .card-body {
	background: linear-gradient(135deg, rgba(248, 249, 250, 0.5) 0%, rgba(255, 255, 255, 1) 50%, rgba(248, 249, 250, 0.5) 100%);
}

/* ========================================================================
   LOGO ANIMATION CONTAINER
   ======================================================================== */

/* -- Logo animation container -- */
.logo-animation-container {
	position: relative;
	background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 40%, #0d1b2a 100%);
	border-radius: 8px;
	overflow: hidden;
}

.logo-animation-container .stars {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.logo-animation-container .star {
	position: absolute;
	background: #ffffff;
	border-radius: 50%;
	animation: twinkle var(--duration) ease-in-out infinite;
	animation-delay: var(--delay);
}

@keyframes twinkle {
	0%, 100% { opacity: var(--min-opacity); transform: scale(1); }
	50% { opacity: var(--max-opacity); transform: scale(1.2); }
}

.logo-animation-container .nebula {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 120%;
	height: 120%;
	background: radial-gradient(ellipse at center, rgba(79, 172, 254, 0.15) 0%, rgba(0, 242, 254, 0.08) 30%, transparent 70%);
	z-index: 2;
}

.logo-animation-container .logo-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
	text-align: center;
}

.logo-animation-container .logo-center img {
	width: 120px;
	height: auto;
	animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {
	0%, 100% { 
		filter: drop-shadow(0 0 5px rgba(79, 172, 254, 0.5));
		transform: scale(1);
	}
	50% { 
		filter: drop-shadow(0 0 20px rgba(79, 172, 254, 0.8));
		transform: scale(1.05);
	}
}

.logo-animation-container .total-label {
	margin-top: 10px;
}

.logo-animation-container .total-count {
	color: #ffffff;
	font-size: 24px;
	font-weight: bold;
}

/* ========================================================================
   DATATABLE STYLES
   ======================================================================== */

/* -- DataTable spacing -- */
.dataTables_wrapper .row:first-child {
	margin-bottom: 1rem !important;
}

.dataTables_wrapper .row:last-child {
	margin-top: 1rem !important;
}

/* -- Table row spacing -- */
.table tbody tr td {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}

/* -- DataTable header styling -- */
.table thead th {
	font-family: 'Exo 2', sans-serif !important;
	text-transform: uppercase;
	font-size: 0.7rem;
	text-align: center;
	font-weight: 700;
	letter-spacing: 0.06em;
	background: linear-gradient(180deg, #f0f3f8 0%, #e4e9f1 100%);
	border-bottom: 2px solid #b8c4d4;
	color: #4a5568;
	padding: 0.6rem 0.5rem;
	white-space: nowrap;
}

/* ========================================================================
   ANIMATIONS
   ======================================================================== */

/* -- Spinning animation for loaders/exports -- */
@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.spinning-svg {
	animation: spin 4s linear infinite;
}

/* -- SweetAlert loading spinner -- */
.swal-loading-spinner {
	animation: spin 1.5s linear infinite;
}

.swal-loading-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px;
}

.swal-loading-content img {
	width: 80px;
	height: 80px;
	margin-bottom: 15px;
}

.swal-loading-content p {
	margin: 0;
	color: #495057;
	font-size: 14px;
}

/* ========================================================================
   BADGE STYLES
   ======================================================================== */

/* -- Fixed width condition badges -- */
.condition-badge {
	display: inline-block;
	min-width: 140px;
	text-align: center;
}

/* ========================================================================
   TEXT HEADER STYLES
   ======================================================================== */

/* -- Page Title Styling -- */
/* -- Override Bootstrap fw-medium (font-weight:500!important) with higher specificity -- */
.page-title,
h1.page-title,
.page-title.fw-medium,
h1.page-title.fw-medium,
.page-header-breadcrumb h1 {
	font-family: 'Inter', sans-serif !important;
	font-weight: 700 !important;
	background: linear-gradient(100deg, #3389c9 0%, #41b5e8 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	font-size: calc(1.375rem + 2pt);
	/* -- Solid, hard-edged (no blur) light-blue block drop-shadow on the gradient page title. --
	   -- filter:drop-shadow (not text-shadow) because text-shadow does not render on background-clip:text. -- */
	filter: drop-shadow(0 2px 0 #8fd3ff);
}

/* -- Section headers -- */
.section-header {
	color: #343a40;
	font-weight: 600;
	border-bottom: 2px solid #4a9fd4;
	padding-bottom: 0.5rem;
	margin-bottom: 1rem;
}

/* -- Gradient text headers -- */
.gradient-text-primary {
	background: linear-gradient(135deg, #2d6a9f 0%, #4a9fd4 50%, #6bb9e8 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	font-weight: 600;
}

.gradient-text-success {
	background: linear-gradient(135deg, #146c43 0%, #198754 50%, #25a368 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	font-weight: 600;
}

.gradient-text-danger {
	background: linear-gradient(135deg, #b02a37 0%, #dc3545 50%, #e35d6a 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	font-weight: 600;
}

.gradient-text-warning {
	background: linear-gradient(135deg, #cc9a06 0%, #ffc107 50%, #ffcd39 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	font-weight: 600;
}

.gradient-text-info {
	background: linear-gradient(135deg, #087990 0%, #0dcaf0 50%, #3dd5f3 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	font-weight: 600;
}

/* ========================================================================
   LEFT SIDEBAR MENU STYLES
   ======================================================================== */

/* -- Reduce all sidebar menu text by 1pt -- */
.app-sidebar .side-menu__label {
	font-size: calc(0.875rem - 1pt) !important;
}

.app-sidebar .slide-menu .side-menu__item {
	font-size: calc(0.875rem - 1pt) !important;
}

/* -- Category headers -- */
.app-sidebar .category-name {
	font-size: calc(0.6875rem - 1pt) !important;
}

/* ========================================================================
   UTILITY CLASSES
   ======================================================================== */

/* -- Card with subtle shadow -- */
.card-elevated {
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
	transition: box-shadow 0.3s ease;
}

.card-elevated:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* -- Smooth transitions -- */
.smooth-transition {
	transition: all 0.3s ease;
}

/* -- Pulse animation for notifications/badges -- */
@keyframes pulse {
	0% { transform: scale(1); }
	50% { transform: scale(1.05); }
	100% { transform: scale(1); }
}

.pulse-animation {
	animation: pulse 2s infinite;
}

/* ========================================================================
   MODAL HEADER STYLES
   ======================================================================== */

/* -- Consistent modal heading style (matches AI Analysis modal) -- */
.modal-header {
	padding: 1.25rem 1.5rem;
}

.modal-header .modal-title {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 1.375rem;
	letter-spacing: 0.02em;
}

/* ========================================================================
   MODAL Z-INDEX FIX
   ======================================================================== */

/* -- Ensure modals appear above all page content -- */
/* -- The .page element has z-index: 1, but Bootstrap appends backdrops to body -- */
/* -- This creates a stacking context issue where backdrops appear above modals -- */
.modal-backdrop {
	z-index: 1050 !important;
}

.modal {
	z-index: 1055 !important;
}

.modal-dialog {
	z-index: 1060 !important;
}

.modal-content {
	z-index: 1060 !important;
}

/* -- SweetAlert should appear above Bootstrap modals -- */
.swal2-container {
	z-index: 2000 !important;
}

/* -- SweetAlert title font -- */
.swal2-title {
	font-family: 'Inter', sans-serif !important;
	font-weight: 700 !important;
}

.swal2-html-container h1,
.swal2-html-container h2,
.swal2-html-container h3,
.swal2-html-container h4,
.swal2-html-container h5,
.swal2-html-container h6 {
	font-family: 'Inter', sans-serif !important;
	font-weight: 700 !important;
}

/* ========================================================================
   BUTTON BACKGROUND FILL
   ======================================================================== */

/* -- Outline buttons (no solid fill) get a white background. -- */
/* -- Hover/focus/active keep Bootstrap's coloured fill (higher specificity). -- */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-dark {
	background-color: #fff;
}

/* -- btn-outline-light gets white fill too, with darkened text/border so it stays readable -- */
.btn-outline-light {
	background-color: #fff;
	color: #495057;
	border-color: #dee2e6;
}

/* -- Modal headers: slate/blue gradient (matches card headers) + white text +
      white close icon on EVERY modal, same as the app/portal stylesheet. -- */
.modal-header {
	background: linear-gradient(135deg, #2a6f9e 0%, #3392c4 60%, #3fa8d8 100%);
	border-bottom: none;
	color: #fff;
}
.modal-header .modal-title,
.modal-header .modal-title i {
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.modal-header .btn-close {
	filter: brightness(0) invert(1);
	opacity: 0.9;
}