/*
	Lboro Sync — Custom UI Theme
	Unique, modern and elegant skin built on Bootstrap utilities but fully re-styled.
*/

:root {
	--brand: #0e7aff;
	--brand-600: #0a68d6;
	--brand-700: #0a5ab8;
	--text: #e9eef6;
		--muted: #d7e0ea;
	--bg: #0b1020;
	--bg-soft: #0e1428;
	--card: rgba(255,255,255,0.08);
	--border: rgba(255,255,255,0.12);
	--ring: rgba(14,122,255,0.45);
	--success: #22c55e;
	--warning: #f59e0b;
	--danger: #ef4444;
}

/* Global */
html, body { height: 100%; }
body {
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	color: var(--text);
	background: radial-gradient(1200px 800px at 10% -10%, #1b2a4b 0%, rgba(27,42,75,0) 60%),
							radial-gradient(1000px 700px at 90% -20%, #14213d 0%, rgba(20,33,61,0) 60%),
							linear-gradient(180deg, #0b1020 0%, #0e1428 100%);
}

.app-body { display:flex; flex-direction:column; min-height:100vh; }
.container { max-width: 1080px; }

/* Headings and generic text */
h1, h2, h3, h4, h5, h6 { color: var(--text); }
p, li, label, dt, dd { color: var(--text); }
strong, b { color: #f4f7fb; }

/* Navbar */
.app-nav { backdrop-filter: saturate(180%) blur(14px); background: rgba(15, 23, 42, 0.35); border-bottom: 1px solid var(--border); }
.app-brand { font-weight: 700; color: #fff; letter-spacing: 0.2px; display:flex; align-items:center; gap:.5rem; }
.app-brand:hover { color: #fff; text-decoration: none; }
.brand-dot { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), #5cc8ff); box-shadow: 0 0 0 4px rgba(14,122,255,0.18); display:inline-block; }
.navbar .nav-link { color: var(--muted); }
.navbar .nav-link:hover { color: #ffffff; }
/* ensure dropdown overlays everything */
.navbar, .app-nav { position: relative; z-index: 1020; }
.dropdown-menu { z-index: 2000 !important; }

/* Chips */
.chip { display:inline-flex; align-items:center; padding:.35rem .6rem; border-radius:999px; font-weight:600; font-size:.85rem; }
.chip-primary { background: rgba(14,122,255,0.15); color: #cfe6ff; border: 1px solid rgba(14,122,255,0.25); }

/* Buttons */
.btn { border-radius: 10px; font-weight: 600; }
.btn-ghost { color:#e5e7eb; background: transparent; border: 1px solid transparent; }
.btn-ghost:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.08); }
.btn-brand { color: #fff; background: linear-gradient(135deg, var(--brand), #56b4ff); border: none; box-shadow: 0 8px 24px rgba(14,122,255,0.35); }
.btn-brand:hover { filter: brightness(0.95); }
.btn-outline-primary { color:#dbeafe; border-color: rgba(14,122,255,0.45); }
.btn-outline-primary:hover { background: rgba(14,122,255,0.15); border-color: rgba(14,122,255,0.6); color:#fff; }

/* Cards */
.card { border-radius: 16px; border: 1px solid var(--border); background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03)); box-shadow: 0 12px 50px rgba(0,0,0,0.25); }
.card-title { color: #ffffff; }
.hero-lead { font-size: 1.125rem; color: #cbd5e1; }

/* Forms */
.form-control, .form-select { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.16); color: var(--text); }
.form-control:focus, .form-select:focus { border-color: var(--ring); box-shadow: 0 0 0 .25rem rgba(14, 122, 255, 0.18); }
.form-label { color: #cbd5e1; }
.form-control::placeholder { color: #a9b8cc; }
.form-text { color: var(--muted); }

/* Alerts */
.alert { border-radius: 12px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.06); color: var(--text); }
.alert-success { border-color: rgba(34,197,94,0.35); background: rgba(34,197,94,0.18); color:#dcfce7; }
.alert-warning { border-color: rgba(245,158,11,0.35); background: rgba(245,158,11,0.18); color:#fef3c7; }
.alert-danger  { border-color: rgba(239,68,68,0.35);  background: rgba(239,68,68,0.18);  color:#fee2e2; }

/* Tables */
.table { --bs-table-bg: transparent; --bs-table-color: var(--text); }
.table thead th { color:#cbd5e1; border-bottom-color: rgba(255,255,255,0.12); }
.table tbody tr { border-color: rgba(255,255,255,0.08); }

/* Footer */
.app-footer { border-top: 1px solid var(--border); background: rgba(255,255,255,0.02); margin-top:auto; }

/* Utilities */
.profile-badge, .chip { padding: 0.4rem 0.6rem; border-radius: 999px; font-weight: 600; }
.btn-rounded { border-radius: 999px; }

/* Make Bootstrap toggler visible on dark glass nav */
.navbar-toggler { border: 1px solid rgba(255,255,255,0.3); }
.navbar-toggler-icon { filter: invert(1); }

/* Hero container */
.app-hero { border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); }

/* Readability overrides */
.text-muted { color: var(--muted) !important; }
.card .text-muted, .card .small { color: var(--muted) !important; }
.text-secondary, .text-body-secondary { color: var(--muted) !important; }
.text-body { color: var(--text) !important; }
.small, small, .form-text { color: var(--muted); }

/* Light surfaces in dark theme */
.bg-light { background-color: rgba(255,255,255,0.08) !important; color: #e5e7eb !important; }
.border { border-color: var(--border) !important; }

/* Links */
a { color: #9fc9ff; }
a:hover { color: #b8dcff; }

/* Dropdowns */
.dropdown-menu { background: rgba(15,23,42,0.95); border:1px solid var(--border); border-radius: 12px; color: var(--text); box-shadow: 0 20px 40px rgba(0,0,0,0.4); backdrop-filter: blur(10px); }
.dropdown-item { color: var(--text); }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(14,122,255,0.18); color: #fff; }
.dropdown-divider { border-top-color: rgba(255,255,255,0.12); }

/* Badges for better contrast */
.badge { border: 1px solid transparent; }
.badge.bg-secondary { background: rgba(255,255,255,0.16); color: var(--text); border-color: rgba(255,255,255,0.25); }
.badge.bg-success { background: rgba(34,197,94,0.22); color: #dcfce7; border-color: rgba(34,197,94,0.35); }
.badge.bg-warning { background: rgba(245,158,11,0.22); color: #fef3c7; border-color: rgba(245,158,11,0.35); }
.badge.bg-danger { background: rgba(239,68,68,0.22); color: #fee2e2; border-color: rgba(239,68,68,0.35); }

/* Ensure any inline heading pills remain readable (defensive) */
.card h6, .card .h6 { color: var(--text); background: transparent; }

/* Mini month calendar */
.mini-cal { width: 100%; overflow-x: auto; }
.mini-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(180px, 1fr)); gap: 10px; align-items: start; }
.mini-cal-head { text-align: center; font-weight: 700; color: var(--muted); padding: 6px 0; font-size: .9rem; }
.mini-cal-cell { border: 1px solid var(--border); border-radius: 10px; min-height: 110px; padding: 10px; background: rgba(255,255,255,0.03); display:flex; flex-direction:column; }
.mini-cal-other-month { opacity: 0.6; }
.mini-cal-daynum { font-weight: 800; font-size: .95rem; color: var(--text); margin-bottom:6px; }
.mini-cal-today { background: rgba(14,122,255,0.18); border-radius: 6px; padding: 2px 6px; display: inline-block; }
.mini-cal-events { list-style: none; padding-left: 0; margin: 0; flex: 1 1 auto; overflow: hidden; }
.mini-cal-events li { font-size: .78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom:4px; }
.mini-cal-noev { height: .8rem; }

/* Helper to make the calendar card wider than the content container and centered */
.fullwidth-card { max-width: 1300px; width: 95vw; margin: 0 auto; }

@media (max-width: 900px) {
	.mini-cal-grid { grid-template-columns: repeat(7, minmax(120px, 1fr)); gap: 8px; }
	.mini-cal-cell { min-height: 90px; padding: 8px; }
}

/* Mobile navbar adjustments */
@media (max-width: 768px) {
	.app-nav { padding-top: 0.35rem; padding-bottom: 0.35rem; }
	.app-brand { font-size: 0.98rem; gap: .4rem; }
	.brand-dot { width: 8px; height: 8px; }
	.navbar .nav-link, .navbar .btn { padding: .35rem .5rem; }
	.chip { padding: .25rem .45rem; font-size: .82rem; }

	/* Make collapsed nav stack cleanly and full-width */
	.navbar-collapse { background: transparent; }
			/* Stack collapsed nav items vertically for mobile while preserving Bootstrap collapse animation */
			.navbar-collapse .navbar-nav { display:flex; flex-direction:column; gap: .5rem; padding: .5rem 0.25rem; }
			.navbar-collapse .nav-item { width: 100%; }
			.navbar-collapse .nav-link, .navbar-collapse .btn { width: 100%; text-align: left; }

	/* Dropdowns should be full-width inside collapse */
	.navbar-collapse .dropdown-menu { position: static !important; transform: none !important; float: none !important; width: 100% !important; box-shadow: none; border-radius: 12px; margin: .25rem 0 0 0; }

	/* Toggler should be visible and on the right */
	.navbar-toggler { margin-left: auto; }
}

	/* Make toggler icon visible on dark backgrounds: explicit white SVG */
	.navbar-toggler {
		background: rgba(255,255,255,0.03);
		border: 1px solid rgba(255,255,255,0.08);
	}
	.navbar-toggler-icon {
		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,0.95)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
	}

	/* Make toggler circular and add hover/focus states */
	.navbar-toggler { border-radius: 10px; padding: .35rem .5rem; }
	.navbar-toggler:hover, .navbar-toggler:focus { background: rgba(255,255,255,0.06); transform: translateY(-1px); transition: transform .12s ease, background .12s ease; }

	/* Ensure inline SVG inside toggler scales and remains visible */
	.navbar-toggler-icon svg { display:block; width:22px; height:16px; }
	.navbar-toggler-icon svg rect { fill: white; }