/* Native MyBB calendar data and navigation, in the V3 page language. */
#content .cityrp-calendar { margin: 0 auto 36px; max-width: 1120px; min-width: 0; }
#content .cityrp-calendar-hero {
	background: linear-gradient(105deg, #14263c, #102035 68%, #17345d);
	border: 1px solid #355583; border-left: 5px solid #4678ff; padding: 22px 26px;
}
#content .cityrp-calendar-hero h1 { color: #fff; font-size: clamp(21px, 2.4vw, 28px); line-height: 1.2; margin: 0 0 6px; }
#content .cityrp-calendar-hero p { color: #b8c4d6; font-size: 13px; line-height: 1.5; margin: 0; }
#content .cityrp-calendar-panel { background: #141820; border: 1px solid #303b50; margin-top: 16px; min-width: 0; }
#content .cityrp-calendar-toolbar { align-items: center; background: #202b3b; border-bottom: 1px solid #3a4961; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; padding: 14px 18px; }
#content .cityrp-calendar-toolbar h2 { color: #fff; font-size: 18px; margin: 0; }
#content .cityrp-calendar-nav { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
#content .cityrp-calendar-nav a {
	background: #1c2634; border: 1px solid #485873; color: #d6dfea;
	display: inline-flex; font-size: 12px; padding: 8px 10px; text-decoration: none;
}
#content .cityrp-calendar-nav a:hover { border-color: #709aff; color: #fff; }
#content .cityrp-calendar-nav > span { color: #8a919e; }
#content .cityrp-calendar-scroll-hint { color: #aab2c0; display: none; font-size: 11px; margin: 0; padding: 8px 14px; }
#content .cityrp-calendar-grid { overflow-x: auto; }
#content .cityrp-calendar-grid table { border: 0; border-collapse: separate; border-spacing: 2px; margin: 0; min-width: 840px; table-layout: fixed; width: 100%; }
#content .cityrp-calendar-grid thead td.tcat {
	background: #202b3b; border: 0; color: #b8c4d6; font-size: 11px; font-weight: 700; padding: 12px 6px;
}
#content .cityrp-calendar-grid tbody td {
	background: #181c24; border: 1px solid #303b50; color: #cdd5e2;
	font-size: 12px; min-width: 0; overflow-wrap: anywhere; padding: 8px; vertical-align: top;
}
#content .cityrp-calendar-grid tbody td.trow2 { background: #1d2530; }
#content .cityrp-calendar-grid tbody td.trow_sep, #content .cityrp-calendar-grid tbody td.calendar_daybit_today {
	background: #1c3154; border-color: #4678ff;
}
#content .cityrp-calendar-grid tbody td.calendar_daybit_external { background: #10151d; color: #8a919e; }
#content .cityrp-calendar-grid tbody td.tcat { background: #202b3b; text-align: center; vertical-align: middle; width: 28px; }
#content .cityrp-calendar-grid tbody td .float_right { font-size: 12px; font-weight: 700; }
#content .cityrp-calendar-grid tbody td a { color: #91b7ff; }
#content .cityrp-calendar-grid tbody td .clear { clear: both; padding-top: 7px; }
#content .cityrp-calendar-grid tbody td .clear a { font-size: 11px; line-height: 1.35; }
#content .cityrp-calendar-jump { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; padding: 16px 18px; }
#content .cityrp-calendar-jump-controls { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
#content .cityrp-calendar-jump label { color: #b8c4d6; font-size: 11px; font-weight: 700; }
#content .cityrp-calendar-jump a { color: #91b7ff; font-size: 12px; }
#content .cityrp-calendar select, #content .cityrp-calendar input.textbox, #content select {
	background: #242c3b; border: 1px solid #485873; border-radius: 0;
	box-sizing: border-box; color: #f6f8fc; font-size: 13px; min-height: 42px; padding: 9px 12px;
}
#content .cityrp-calendar select:focus, #content .cityrp-calendar input:focus { border-color: #58a6ff; outline: 2px solid rgba(70, 120, 255, .35); }
#content .cityrp-calendar input.button, #content .cityrp-calendar button, #content form[action="calendar.php"] input.button {
	background: #315bc4; border: 1px solid #709aff; border-radius: 0; color: #fff;
	cursor: pointer; font-size: 13px; font-weight: 700; min-height: 42px; padding: 9px 16px;
}
#content .cityrp-calendar input.button:hover, #content form[action="calendar.php"] input.button:hover { background: #4678ff; }
/* MyBB's week/day/event views use native templates; style their existing tables too. */
#content .tborder { background: #141820; border: 1px solid #303b50; border-radius: 0; }
#content .tborder .thead { background: #202b3b; border-radius: 0; color: #fff; }
#content .tborder .tcat { background: #202b3b; color: #b8c4d6; }
#content .tborder .trow1 { background: #181c24; color: #d6dfea; }
#content .tborder .trow2 { background: #1d2530; color: #d6dfea; }
#content .tborder .trow_sep { background: #1c3154; color: #fff; }
#content .tborder a { color: #91b7ff; }
@media (max-width: 900px) {
	#content .cityrp-calendar-scroll-hint { display: block; }
}
@media (max-width: 560px) {
	#content .cityrp-calendar-hero { padding: 17px; }
	#content .cityrp-calendar-toolbar { align-items: flex-start; flex-direction: column; }
	#content .cityrp-calendar-jump { align-items: flex-start; flex-direction: column; }
	#content .cityrp-calendar select { font-size: 16px; max-width: 100%; }
}
/* Weekly overview: two-column layout, but days remain readable cards on narrow screens. */
#content .cityrp-calendar-week-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(200px, 240px);
	gap: 18px;
	padding: 18px;
}
#content .cityrp-calendar-week-months,
#content .cityrp-calendar-week-month,
#content .cityrp-calendar-week-mini { min-width: 0; }
#content .cityrp-calendar-week-month + .cityrp-calendar-week-month { margin-top: 20px; }
#content .cityrp-calendar-week-month h3 {
	background: #202b3b; border-left: 4px solid #4678ff; color: #fff;
	font-size: 15px; margin: 0 0 10px; padding: 10px 14px;
}
#content .cityrp-calendar-week-days {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
#content .cityrp-calendar-week-day {
	background: #181c24; border: 1px solid #303b50; min-width: 0; overflow-wrap: anywhere;
}
#content .cityrp-calendar-week-day.trow_shaded {
	background: #1c3154; border-color: #4678ff;
}
#content .cityrp-calendar-week-day-header {
	background: #202b3b; border-bottom: 1px solid #3a4961; padding: 10px 12px;
}
#content .cityrp-calendar-week-day.trow_shaded .cityrp-calendar-week-day-header { background: #284372; }
#content .cityrp-calendar-week-day-header a { color: #f6f8fc; display: flex; font-size: 13px; font-weight: 700; justify-content: space-between; text-decoration: none; }
#content .cityrp-calendar-week-day-header a:hover { color: #91b7ff; }
#content .cityrp-calendar-week-date { color: #b8c4d6; font-size: 18px; line-height: 1; margin-left: 8px; }
#content .cityrp-calendar-week-day-content { color: #cdd5e2; font-size: 12px; min-height: 30px; padding: 10px 12px; }
#content .cityrp-calendar-week-event,
#content .cityrp-calendar-week-birthday { line-height: 1.5; overflow-wrap: anywhere; }
#content .cityrp-calendar-week-event + .cityrp-calendar-week-event,
#content .cityrp-calendar-week-birthday + .cityrp-calendar-week-event { margin-top: 7px; }
#content .cityrp-calendar-week-event a,
#content .cityrp-calendar-week-birthday a { color: #91b7ff; }
#content .cityrp-calendar-week-event a.trow_shaded { color: #ffb2b7; }
#content .cityrp-calendar-week-event .smalltext { color: #b8c4d6; }
#content .cityrp-calendar-week-mini > table.tborder {
	box-sizing: border-box; table-layout: fixed; width: 100% !important; margin: 0 0 12px;
}
#content .cityrp-calendar-week-mini > br { display: none; }
#content .cityrp-calendar-week-mini td { padding: 6px 2px; text-align: center; font-size: 11px; }
#content .cityrp-calendar-week-mini td.thead { text-align: left; padding: 9px; }
#content .cityrp-calendar-week-mini td.thead a,
#content .cityrp-calendar-week-mini td.tcat a,
#content .cityrp-calendar-week-mini td.trow1 a,
#content .cityrp-calendar-week-mini td.trow2 a,
#content .cityrp-calendar-week-mini td.trow_sep a { color: #91b7ff; }
#content .cityrp-calendar-week-calendar-jump { color: #b8c4d6; }
#content .cityrp-calendar-week-calendar-jump > br { display: none; }
#content .cityrp-calendar-week-calendar-jump select { margin: 0 8px; }
@media (max-width: 800px) {
	#content .cityrp-calendar-week-layout { grid-template-columns: minmax(0, 1fr); }
	#content .cityrp-calendar-week-mini { max-width: 260px; }
}
@media (max-width: 640px) {
	#content .cityrp-calendar-week-layout { padding: 12px; }
	#content .cityrp-calendar-week-days { grid-template-columns: minmax(0, 1fr); }
	#content .cityrp-calendar-week-calendar-jump { width: 100%; }
	#content .cityrp-calendar-week-calendar-jump select { margin: 6px 8px 6px 0; max-width: 100%; }
}