body { font-family: Arial, Helvetica, sans-serif; background:#f7f7f7; }
.wrap { max-width:900px; margin:24px auto; background:#fff; padding:20px; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,0.06);} 
label { display:block; margin-bottom:8px; }
input { padding:6px 8px; width:100%; box-sizing:border-box; margin-top:4px; }
button { padding:8px 12px; margin-top:8px; }
#list li { list-style:none; margin:8px 0; padding:8px; border-radius:6px; color:#fff; }

/* validation styles */
.input-error { border: 2px solid #b00020; box-shadow: 0 0 0 3px rgba(176,0,32,0.06); }
.error-list { color:#b00020; }
.success-message { color:#0b6623; margin-bottom:8px; }
.field-error { margin-top:4px; font-size:0.9em; color:#b00020; }

/* Modern centered login styles */
.login-page { display:flex; align-items:center; justify-content:center; min-height:100vh; background: linear-gradient(135deg,#eef2ff,#f7f7ff); }
.login-card { width:100%; max-width:420px; background:#ffffff; padding:28px; border-radius:12px; box-shadow:0 8px 30px rgba(15,23,42,0.08); }
.login-card h1 { margin:0 0 12px; font-size:20px; color:#0f172a; }
.login-card p.lead { margin:0 0 18px; color:#475569; }
.login-card label { font-size:13px; color:#0f172a; margin-bottom:6px; }
.login-card input { border:1px solid #e6e9ee; border-radius:8px; padding:10px 12px; }
.login-card button { width:100%; background:#0f62fe; color:#fff; border:none; border-radius:8px; padding:10px 12px; font-weight:600; }
.login-small { text-align:center; margin-top:12px; color:#64748b; font-size:13px; }

/* make .wrap behave normally for other pages */
.calendar-wrap { max-width:900px; margin:24px auto; }

/* Calendar layout */
.cal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.cal-header h1 { margin:0; font-size:20px; }
.cal-controls { display:flex; gap:8px; align-items:center; }
.cal-controls button { background:transparent; border:1px solid #e6e9ee; padding:8px 10px; border-radius:8px; cursor:pointer; }
.cal-controls .logout { background:#fff; color:#111; }
.month-label { font-weight:600; min-width:160px; text-align:center; }

/* Selected date indicator in header */
.selected-indicator {
	font-size:13px; color:#0f172a; background:#eef6ff; border:1px solid rgba(15,99,255,0.12); padding:6px 8px; border-radius:8px; margin-left:6px;
}

.cal-main { display:flex; gap:16px; }
.cal-grid { flex:1; display:grid; grid-template-columns: repeat(7, 1fr); gap:8px; /* set a stable row height so the calendar doesn't stretch vertically */
	grid-auto-rows: 140px;
}
.cal-grid .day { background:#fff; border-radius:10px; padding:10px; min-height:0; box-shadow:0 2px 10px rgba(2,6,23,0.04); cursor:pointer; position:relative; display:flex; flex-direction:column; }
.cal-grid .day .day-number { font-weight:600; color:#0f172a; }
.cal-grid .day.other { opacity:0.4; }
.cal-grid .day .events { margin-top:8px; display:flex; flex-direction:column; gap:6px; overflow:auto; /* make events scrollable to avoid stretching the cell */
	flex:1; min-height:0;
}
.cal-grid .event-pill { display:inline-flex; gap:8px; align-items:center; padding:6px 8px; border-radius:8px; color:#000; font-size:13px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-grid .event-dot { width:10px; height:10px; border-radius:50%; box-shadow:0 1px 0 rgba(255,255,255,0.15) inset; }

/* When calendar is in full-view (sidebar hidden), show compact event titles inside day cells */
.calendar-wrap.full-view .cal-grid .event-pill {
	font-size:11px;
	padding:4px 6px;
	border-radius:6px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	height:20px;
	align-items:center;
	color: #000;
}
.calendar-wrap.full-view .cal-grid .event-pill span { display:inline-block; vertical-align:middle; max-width: calc(100% - 18px); }

/* Drag & drop visuals */
.cal-grid .day.drag-over { box-shadow: 0 0 0 3px rgba(15,99,255,0.12); transform: translateY(-2px); }
.cal-grid .event-pill[draggable="true"] { cursor: grab; }
.cal-grid .event-pill[draggable="true"]:active { cursor: grabbing; }

/* Highlight for the selected day when user clicks a cell */
.cal-grid .day.selected {
	background: #e9f2ff; /* light blue */
	box-shadow: 0 8px 24px rgba(15,99,255,0.06);
	border: 1px solid rgba(15,99,255,0.12);
}
.cal-grid .day.selected .day-number { color: #0f62fe; }

.cal-side { width:360px; background:#fff; border-radius:12px; padding:12px; box-shadow:0 6px 30px rgba(2,6,23,0.06); position:relative; }
.day-detail-header { display:flex; justify-content:space-between; align-items:center; }
.day-detail-header h2 { margin:0; font-size:16px; }
.day-detail-header button { background:transparent; border:none; font-size:22px; cursor:pointer; }
.day-add { margin-top:12px; }
.day-add form label { display:block; margin-bottom:8px; }

/* small screens: stack */
@media (max-width:900px) {
	.cal-main { flex-direction:column; }
	.cal-side { width:100%; }
	.cal-grid { grid-auto-rows: 100px; }
	.cal-grid .day { min-height:80px; }
}

/* Mobile overlay behavior for side panel and FAB */
@media (max-width:900px) {
	.cal-side {
		position: fixed;
		right: 12px;
		bottom: 12px;
		left: 12px;
		width: auto;
		max-width: 640px;
		max-height: 86vh;
		border-radius: 12px;
		padding: 12px;
		transform: translateY(110%);
		transition: transform 220ms ease, box-shadow 220ms ease;
		z-index: 1200;
		overflow: auto;
	}
	.cal-side[aria-hidden="false"] {
		transform: translateY(0);
		box-shadow: 0 18px 50px rgba(2,6,23,0.18);
	}
	/* dim background when open */
	body.mobile-side-open::after {
		content: '';
		position: fixed;
		left:0; right:0; top:0; bottom:0;
		background: rgba(2,6,23,0.35);
		z-index: 1100;
	}

	/* Floating action button */
	.fab {
		position: fixed;
		right: 18px;
		bottom: 18px;
		width: 56px;
		height: 56px;
		border-radius: 50%;
		background: #0f62fe;
		color: #fff;
		display:flex; align-items:center; justify-content:center;
		box-shadow: 0 10px 30px rgba(15,99,254,0.18);
		z-index:1300;
		border:none; cursor:pointer; font-size:22px;
	}
	.fab:active { transform: translateY(1px); }
}

	/* Mobile full-screen modal */
		.mobile-modal { position: fixed; left:0; right:0; top:0; bottom:0; display:flex; align-items:flex-end; justify-content:center; z-index:1400; visibility:hidden; }
		.mobile-modal[aria-hidden="false"] { visibility:visible; }

	/* Password modal should work on desktop too (not only mobile). Use a dedicated class so it can be shown everywhere */
	.password-modal { position: fixed; left:0; right:0; top:0; bottom:0; display:flex; align-items:center; justify-content:center; z-index:1600; visibility:hidden; }
	.password-modal[aria-hidden="false"] { visibility:visible; }
	.password-modal .mobile-modal-inner { width: 100%; max-width: 480px; max-height: 90vh; border-radius:12px; }

	/* desktop-only helper: hide on small screens */
	.desktop-only { display:block; }
	@media (max-width:900px) {
	  .desktop-only { display:none; }
	}
	.mobile-modal-inner { background:#fff; width:100%; max-height:100%; border-top-left-radius:12px; border-top-right-radius:12px; padding:16px; box-shadow:0 -6px 40px rgba(2,6,23,0.12); overflow:auto; }
	.mobile-close { position:absolute; right:16px; top:12px; background:transparent; border:none; font-size:22px; color:#111; }
	.mobile-modal form label { display:block; margin-bottom:10px; }

	@media (min-width:901px) {
		/* hide modal and mobile FAB on desktop */
		.mobile-modal, .fab { display:none; }
	}

	/* On desktop: when the side panel is hidden via aria-hidden, remove it from layout
	   so the calendar grid expands to use the full width. Mobile uses transform animation
	   for the same element, so only apply this on larger screens. */
	@media (min-width:901px) {
	  .cal-side[aria-hidden="true"] { display: none; }
	}

/* Tooltip for full day list */
.day-tooltip { position:absolute; z-index:2000; background:#fff; border:1px solid #e6e9ee; box-shadow:0 8px 30px rgba(2,6,23,0.08); border-radius:8px; padding:10px; width:260px; font-size:13px; }
.day-tooltip h4 { margin:0 0 8px; font-size:14px; }
.day-tooltip .tt-item { padding:6px 8px; border-radius:6px; margin-bottom:6px; display:flex; justify-content:space-between; align-items:center; }
.day-tooltip .tt-item:last-child { margin-bottom:0; }

/* Slot finder styles */
.service-finder { margin-top:14px; border-top:1px dashed #e6e9ee; padding-top:12px; }
.service-finder .service { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.service-finder .service label { flex:1; }
.service-slot { padding:6px 8px; border-radius:8px; background:#f1f5f9; margin-bottom:6px; cursor:pointer; }
.service-slot:hover { background:#e2e8f0; }

/* Button hover / focus styles */
.login-card button:hover { filter:brightness(0.95); transform:translateY(-1px); transition: all 120ms ease; }
.login-card button:active { transform:translateY(0); }

/* Input focus */
.login-card input:focus { outline: none; box-shadow: 0 4px 14px rgba(15,99,255,0.12); border-color: #0f62fe; }

/* Password toggle */
.pw-wrap { position:relative; }
.pw-toggle { position:absolute; right:8px; top:50%; transform:translateY(-50%); background:transparent; border:none; color:#0f62fe; cursor:pointer; padding:6px; font-size:13px; }
.pw-toggle:focus { outline: none; text-decoration:underline; }

/* subtle focus visible for accessibility */
.login-card input:focus-visible { outline: 3px solid rgba(15,99,255,0.12); }