/* Global custom styles for the site (keeps background consistent) */

/* Primary site background — used by pages that include head.php */
body.site-bg, body {
	background-image: url('../img/250.png');
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	/* don't force global text color here — let content areas define their own colors */
}

/* Ensure pages using .site-bg behave like the profile page: full-height flex column
   so footers using `mt-auto` sit at the bottom when content is short */
body.site-bg {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Allow main content area to grow if present (keeps footer at bottom) */
body.site-bg main {
  flex: 1 0 auto;
}

/* Provide a gentle gradient overlay layer when needed; pages can add/remove the "with-overlay" class on body */
body.with-overlay::before {
	content: '';
	position: fixed;
	inset: 0;
	background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(24,1,97,0.06));
	pointer-events: none;
	z-index: 0;
}

/* Utility: ensure main containers sit above the background overlay */
.container, .navbar, .sidebar, main, .card {
	position: relative;
	z-index: 2;
}

/* Scoped text color: keep header/topbar, sidebar and footer text white so icons/links there remain visible */
.top-bar, .navbar, .sidebar, .footer-gradient {
	color: #fff;
}

/* Main content default text color should be dark for readability */
main, .container, .profile-card, .card, .content {
	color: #222;
}

/* Small helper so older pages that add .bg class keep backwards compatibility */
body.bg { /* allow older pages to keep using body.bg */ background: inherit; }

/* Footer gradient used by profile and global footer.php */
.footer-gradient {
	background: linear-gradient(to right, #180161, #4F1787);
	color: white !important;
	padding: 18px 0 22px !important; /* slightly taller to match profile spacing */
	text-align: center !important;
	width: 100% !important;
	left: 0;
	right: 0;
	bottom: 0;
	font-size: 0.95rem !important;
	letter-spacing: 0.2px;
	position: relative; /* keep in normal flow */
}

/* Utility spacing for footer when using container */
.footer-gradient .container {
	position: relative;
	z-index: 3;
}

/* Footer content layout: center text and icons with a small separator */
.footer-gradient small {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: rgba(255,255,255,0.95);
}
.footer-gradient .footer-sep {
	display: inline-block;
	width: 1px;
	height: 14px;
	background: rgba(255,255,255,0.35);
	margin: 0 8px;
	vertical-align: middle;
}
.footer-gradient a.text-white {
	color: rgba(255,255,255,0.95) !important;
	margin-left: 6px;
}
.footer-gradient i.fab {
	font-size: 0.95rem;
}

/* Styles for participant grid in calendar events */
.participant-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
    padding: 10px;
}

.participant-badge {
    display: inline-block;
    padding: 6px 12px;
    margin: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: #ff77a9 !important;
    color: #fff !important;
    border-radius: 15px;
    font-size: 0.9em;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
}

.participant-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Styles for selected participants in add/edit modals */
.selected-participants {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-top: 10px;
}

.selected-participant {
    display: inline-flex;
    align-items: center;
    background: #ff77a9;
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.9em;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.selected-participant .remove-participant {
    margin-left: 8px;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.selected-participant .remove-participant:hover {
    opacity: 1;
}

/* Custom styles for pink buttons */
.btn-primary,
button[type="submit"].btn-primary,
.btn-sign-up {
    background-color: #FF69B4 !important; /* Hot pink */
    border-color: #FF69B4 !important;
    color: white !important;
    transition: all 0.3s ease !important;
}

/* Hover effect for pink buttons */
.btn-primary:hover,
button[type="submit"].btn-primary:hover,
.btn-sign-up:hover {
    background-color: #FF1493 !important; /* Deeper pink on hover */
    border-color: #FF1493 !important;
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(255, 105, 180, 0.3);
}

/* Active/Focus state for pink buttons */
.btn-primary:active,
.btn-primary:focus,
button[type="submit"].btn-primary:active,
button[type="submit"].btn-primary:focus,
.btn-sign-up:active,
.btn-sign-up:focus {
    background-color: #FF1493 !important;
    border-color: #FF1493 !important;
    box-shadow: 0 2px 4px rgba(255, 105, 180, 0.5) !important;
}