/* Simple Board Management - front-end portal styles
   Self-contained: does not rely on the active theme's CSS. */

:root {
	--sbm-primary: #1D9E75;
	--sbm-primary-dark: #0F6E56;
	--sbm-bg: #F7F7F5;
	--sbm-surface: #FFFFFF;
	--sbm-border: #E3E2DC;
	--sbm-text: #2C2C2A;
	--sbm-text-muted: #6B6A64;
	--sbm-danger: #C0392B;
	--sbm-radius: 10px;
	--sbm-radius-lg: 16px;
	--sbm-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.04);
	--sbm-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
	box-sizing: border-box;
}

html, body {
	margin: 0;
	padding: 0;
}

.sbm-body {
	font-family: var(--sbm-font);
	background: var(--sbm-bg);
	color: var(--sbm-text);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.sbm-shell {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* Top bar */
.sbm-topbar {
	background: var(--sbm-surface);
	border-bottom: 1px solid var(--sbm-border);
}

.sbm-topbar-inner {
	max-width: 1080px;
	margin: 0 auto;
	padding: 16px 24px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.sbm-topbar-home-link {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: inherit;
}

.sbm-topbar-home-link:hover .sbm-org-name,
.sbm-topbar-home-link:hover .sbm-app-name {
	color: var(--sbm-primary);
}

.sbm-logo {
	height: 32px;
	width: auto;
}

.sbm-org-name {
	font-weight: 600;
	font-size: 16px;
}

.sbm-app-name {
	font-size: 13px;
	color: var(--sbm-text-muted);
	padding-left: 12px;
	border-left: 1px solid var(--sbm-border);
}

.sbm-version-badge {
	margin-left: auto;
	font-size: 11px;
	color: var(--sbm-text-muted);
	white-space: nowrap;
	align-self: flex-start;
}

/* Status bar: "Logged in as: X ... Log out", right-justified, sits
   between the top banner and the main nav. */
.sbm-status-bar {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 20px;
	max-width: 1080px;
	margin: 0 auto;
	padding: 10px 24px;
	font-size: 13px;
	color: var(--sbm-text-muted);
}

.sbm-status-text strong {
	color: var(--sbm-text);
	font-weight: 600;
}

.sbm-status-logout {
	color: var(--sbm-primary);
	font-weight: 600;
	text-decoration: none;
}

.sbm-status-logout:hover {
	text-decoration: underline;
}

.sbm-status-settings-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	color: var(--sbm-text-muted);
	border-radius: 4px;
}

.sbm-status-settings-link:hover {
	background: var(--sbm-surface);
	color: var(--sbm-primary);
}

/* Nav */
.sbm-nav {
	display: flex;
	gap: 4px;
	max-width: 1080px;
	margin: 0 auto 20px;
	padding: 0 24px;
	flex-wrap: wrap;
}

.sbm-nav-link {
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	color: var(--sbm-text-muted);
	padding: 8px 14px;
	border-radius: var(--sbm-radius);
}

.sbm-nav-link:hover {
	background: var(--sbm-surface);
	color: var(--sbm-text);
}

/* Main content area */
.sbm-main {
	flex: 1;
	padding: 24px;
}

.sbm-center-card {
	min-height: calc(100vh - 220px);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Cards */
.sbm-card {
	background: var(--sbm-surface);
	border: 1px solid var(--sbm-border);
	border-radius: var(--sbm-radius-lg);
	box-shadow: var(--sbm-shadow);
	padding: 32px;
}

.sbm-card-narrow {
	width: 100%;
	max-width: 420px;
}

.sbm-card-center {
	text-align: center;
}

.sbm-h1 {
	font-size: 22px;
	font-weight: 600;
	margin: 0 0 8px;
}

.sbm-muted {
	color: var(--sbm-text-muted);
	font-size: 14px;
	margin: 0 0 24px;
}

.sbm-hint {
	color: var(--sbm-text-muted);
	font-size: 12px;
	margin: 12px 0 0;
}

/* Notices */
.sbm-notice {
	font-size: 14px;
	padding: 12px 14px;
	border-radius: var(--sbm-radius);
	margin-bottom: 20px;
	line-height: 1.5;
}

.sbm-notice-success {
	background: #E1F5EE;
	color: #085041;
	border: 1px solid #9FE1CB;
}

.sbm-notice-error {
	background: #FCEBEB;
	color: #791F1F;
	border: 1px solid #F7C1C1;
}

/* Page container for non-centered content (members list, profile) */
.sbm-page {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 24px;
}

.sbm-page-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.sbm-drive-admin-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--sbm-text-muted);
	text-decoration: none;
	white-space: nowrap;
}

.sbm-drive-admin-link img {
	width: 25px;
	height: auto;
	display: block;
}

.sbm-drive-admin-link:hover {
	color: var(--sbm-primary);
	text-decoration: underline;
}

/* "Remember this browser?" banner, shown once right after a fresh
   magic-link sign-in. */
.sbm-remember-banner {
	background: var(--sbm-surface);
	border: 1px solid var(--sbm-border);
	border-left: 3px solid var(--sbm-primary);
	border-radius: var(--sbm-radius);
	padding: 14px 18px;
	margin-bottom: 20px;
}

.sbm-remember-banner-main {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.sbm-remember-banner-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 14px;
	font-weight: 600;
}

.sbm-remember-banner-text .sbm-hint {
	font-weight: normal;
	margin: 0;
}

.sbm-remember-banner-actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-shrink: 0;
}

.sbm-remember-banner-dismiss {
	font-size: 13px;
	font-weight: 600;
	color: var(--sbm-text-muted);
	text-decoration: none;
}

.sbm-remember-banner-dismiss:hover {
	text-decoration: underline;
}

/* Tables */
.sbm-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--sbm-surface);
	border: 1px solid var(--sbm-border);
	border-radius: var(--sbm-radius-lg);
	overflow: hidden;
}

.sbm-table th,
.sbm-table td {
	text-align: left;
	padding: 12px 16px;
	font-size: 14px;
	border-bottom: 1px solid var(--sbm-border);
}

.sbm-table th {
	font-weight: 600;
	color: var(--sbm-text-muted);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	background: var(--sbm-bg);
}

.sbm-table tr:last-child td {
	border-bottom: none;
}

.sbm-table-actions {
	display: flex;
	gap: 12px;
	white-space: nowrap;
}

.sbm-table-actions a {
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	color: var(--sbm-primary);
}

.sbm-table-actions .sbm-link-danger {
	color: var(--sbm-danger);
}

/* Badges */
.sbm-badge {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--sbm-bg);
	color: var(--sbm-text-muted);
	border: 1px solid var(--sbm-border);
}

.sbm-badge-active {
	background: #E1F5EE;
	color: #085041;
	border-color: #9FE1CB;
}

.sbm-badge-invited {
	background: #FAEEDA;
	color: #633806;
	border-color: #FAC775;
}

.sbm-badge-disabled {
	background: #F1EFE8;
	color: #5F5E5A;
	border-color: #D3D1C7;
}

/* Selects and checkboxes, to match .sbm-input styling */
.sbm-select {
	font-family: var(--sbm-font);
	font-size: 15px;
	padding: 10px 12px;
	border: 1px solid var(--sbm-border);
	border-radius: var(--sbm-radius);
	background: var(--sbm-surface);
	color: var(--sbm-text);
	width: 100%;
}

.sbm-checkbox-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	margin: 4px 0;
}

.sbm-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

@media (max-width: 560px) {
	.sbm-form-row {
		grid-template-columns: 1fr;
	}
}

/* RSVP buttons */
.sbm-rsvp-form {
	margin: 0;
}

.sbm-rsvp-buttons {
	display: flex;
	gap: 8px;
}

.sbm-rsvp-btn {
	font-family: var(--sbm-font);
	font-size: 13px;
	font-weight: 600;
	padding: 6px 16px;
	border-radius: 999px;
	border: 1px solid var(--sbm-border);
	background: var(--sbm-surface);
	color: var(--sbm-text-muted);
	cursor: pointer;
}

.sbm-rsvp-btn:hover {
	border-color: var(--sbm-primary);
	color: var(--sbm-text);
}

.sbm-rsvp-btn-active {
	background: var(--sbm-primary);
	border-color: var(--sbm-primary);
	color: #fff;
}

.sbm-ics-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	font-weight: 600;
	color: var(--sbm-primary);
	text-decoration: none;
}

.sbm-ics-link:hover {
	text-decoration: underline;
}

.sbm-calendar-links {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin: 4px 0 12px;
}

.sbm-calendar-links-label {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	color: var(--sbm-text-muted);
}

.sbm-calendar-links-sep {
	color: var(--sbm-border);
	font-size: 13px;
}

/* Repeatable file name/URL rows on the event form */
.sbm-attachment-row {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	gap: 8px;
	align-items: center;
	margin-bottom: 8px;
}

@media (max-width: 560px) {
	.sbm-attachment-row {
		grid-template-columns: 1fr;
	}
}

.sbm-attachment-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: none;
	border: 1px solid var(--sbm-border);
	border-radius: var(--sbm-radius);
	color: var(--sbm-text-muted);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.sbm-attachment-remove:hover {
	border-color: var(--sbm-danger);
	color: var(--sbm-danger);
}

/* Files attached to an event, shown on the event card */
.sbm-event-files {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin: 4px 0 12px;
	font-size: 13px;
}

.sbm-event-files a {
	color: var(--sbm-primary);
	font-weight: 600;
	text-decoration: none;
}

.sbm-event-files a:hover {
	text-decoration: underline;
}

.sbm-event-file {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

/* .sbm-event-files a.sbm-event-file-download (class+type+class) has
   higher specificity than .sbm-event-files a (class+type) alone, so this
   reliably overrides the general link color without needing !important. */
.sbm-event-files a.sbm-event-file-download {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--sbm-text-muted);
	font-weight: normal;
}

.sbm-event-files a.sbm-event-file-download:hover {
	color: var(--sbm-primary);
	text-decoration: none;
}

/* Avatar / photo */
.sbm-avatar-row {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 16px 0;
}

.sbm-avatar-preview {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--sbm-bg);
	border: 1px solid var(--sbm-border);
	flex-shrink: 0;
}

.sbm-avatar-placeholder {
	background: var(--sbm-bg);
}

.sbm-avatar-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Crop modal */
.sbm-crop-modal {
	position: fixed;
	inset: 0;
	background: rgba(44, 44, 42, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	padding: 20px;
}

/* Higher specificity than .sbm-crop-modal alone (one class + one attribute
   selector vs one class) so this reliably wins regardless of source order,
   making the "hidden" attribute actually hide the modal. Without this,
   [hidden] and .sbm-crop-modal{display:flex} are equal-specificity rules
   and the later one (ours) wins, leaving the modal visible at all times. */
.sbm-crop-modal[hidden] {
	display: none;
}

.sbm-crop-dialog {
	background: var(--sbm-surface);
	border-radius: var(--sbm-radius-lg);
	padding: 24px;
	width: 100%;
	max-width: 380px;
	box-shadow: var(--sbm-shadow);
}

.sbm-crop-canvas {
	display: block;
	width: 100%;
	max-width: 320px;
	aspect-ratio: 1 / 1;
	margin: 0 auto 16px;
	border-radius: var(--sbm-radius);
	background: var(--sbm-bg);
	border: 1px solid var(--sbm-border);
	touch-action: none;
	cursor: grab;
}

.sbm-crop-canvas:active {
	cursor: grabbing;
}

.sbm-crop-zoom {
	width: 100%;
	margin: 4px 0 12px;
}

.sbm-crop-dialog-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 16px;
}

/* Member photo circle + clickable triggers on the members list */
.sbm-member-photo {
	display: block;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--sbm-bg);
	border: 1px solid var(--sbm-border);
}

.sbm-member-photo-placeholder {
	background: var(--sbm-bg);
}

.sbm-member-trigger {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.sbm-member-photo-trigger:hover .sbm-member-photo {
	border-color: var(--sbm-primary);
}

.sbm-member-text-trigger:hover {
	color: var(--sbm-primary);
	text-decoration: underline;
}

/* Profile card overlay */
.sbm-profile-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

/* Higher specificity than .sbm-profile-modal alone (class + attribute vs
   just class), so this reliably beats it regardless of source order and
   the "hidden" attribute actually hides the modal — see the equivalent
   note on .sbm-crop-modal[hidden] above for why this matters. */
.sbm-profile-modal[hidden] {
	display: none;
}

.sbm-profile-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(44, 44, 42, 0.55);
}

.sbm-profile-modal-content {
	position: relative;
}

.sbm-profile-card {
	position: relative;
	background: var(--sbm-surface);
	border-radius: var(--sbm-radius-lg);
	box-shadow: var(--sbm-shadow);
	padding: 32px;
	width: 100%;
	max-width: 340px;
	text-align: center;
}

.sbm-profile-card-photo {
	display: block;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--sbm-bg);
	border: 1px solid var(--sbm-border);
	margin: 0 auto 16px;
}

.sbm-profile-card-name {
	font-size: 19px;
	font-weight: 600;
	margin: 0 0 8px;
}

.sbm-profile-card-line {
	margin: 8px 0 0;
	font-size: 14px;
}

.sbm-profile-card-line a {
	color: var(--sbm-primary);
	text-decoration: none;
}

.sbm-profile-card-line a:hover {
	text-decoration: underline;
}

/* Copy-email icon button next to each email address on the members list */
.sbm-copy-email-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-left: 4px;
	padding: 0;
	vertical-align: middle;
	background: none;
	border: none;
	border-radius: 4px;
	color: var(--sbm-text-muted);
	cursor: pointer;
}

.sbm-copy-email-btn:hover {
	background: var(--sbm-bg);
	color: var(--sbm-primary);
}

.sbm-copy-email-btn::after {
	content: 'Copied!';
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(-4px);
	background: var(--sbm-text);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 4px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.sbm-copy-email-btn.sbm-copy-done {
	color: var(--sbm-primary);
}

.sbm-copy-email-btn.sbm-copy-done::after {
	opacity: 1;
}

/* Forms */
.sbm-form {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sbm-label {
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 2px;
}

.sbm-input {
	font-family: var(--sbm-font);
	font-size: 15px;
	padding: 10px 12px;
	border: 1px solid var(--sbm-border);
	border-radius: var(--sbm-radius);
	background: var(--sbm-bg);
	color: var(--sbm-text);
	width: 100%;
}

.sbm-input:focus {
	outline: none;
	border-color: var(--sbm-primary);
	box-shadow: 0 0 0 3px rgba(29, 158, 117, 0.15);
}

/* Buttons */
.sbm-button {
	display: inline-block;
	font-family: var(--sbm-font);
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	padding: 10px 18px;
	border-radius: var(--sbm-radius);
	border: 1px solid transparent;
	cursor: pointer;
	margin-top: 8px;
}

.sbm-button-primary {
	background: var(--sbm-primary);
	color: #fff;
}

.sbm-button-primary:hover:not(:disabled) {
	background: var(--sbm-primary-dark);
}

.sbm-button-primary:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.sbm-button-secondary {
	background: transparent;
	color: var(--sbm-primary);
	border-color: var(--sbm-border);
}

.sbm-button-secondary:hover {
	border-color: var(--sbm-primary);
}

/* Footer */
.sbm-footer {
	padding: 16px 24px;
	text-align: center;
	font-size: 12px;
	color: var(--sbm-text-muted);
}

.sbm-footer-link {
	color: var(--sbm-text-muted);
	text-decoration: none;
}

.sbm-footer-link:hover {
	text-decoration: underline;
	color: var(--sbm-primary);
}

/* Public directory shortcode (renders inside the active theme, so styles
   are scoped and deliberately minimal/neutral rather than opinionated). */
.sbm-directory {
	display: grid;
	grid-template-columns: repeat(5, 176px);
	gap: 24px;
	justify-content: center;
}

/* Fixed-width columns (rather than the previous 1fr auto-fill) are what
   make "alignment" meaningful at all: a row that doesn't fill the full
   container width can then be positioned via justify-content instead of
   its columns simply stretching to fill the space either way. */
.sbm-directory-align-left {
	justify-content: start;
}

.sbm-directory-align-right {
	justify-content: end;
}

.sbm-directory-align-center {
	justify-content: center;
}

@media (max-width: 980px) {
	.sbm-directory {
		grid-template-columns: repeat(3, 176px);
	}
}

@media (max-width: 620px) {
	.sbm-directory {
		grid-template-columns: repeat(2, 160px);
	}
}

@media (max-width: 400px) {
	.sbm-directory,
	.sbm-directory-align-left,
	.sbm-directory-align-right,
	.sbm-directory-align-center {
		grid-template-columns: 1fr;
		justify-content: stretch;
	}
}

.sbm-directory-member {
	text-align: center;
}

.sbm-directory-photo {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto 8px;
	display: block;
	background: var(--sbm-bg);
}

.sbm-directory-name {
	font-weight: 600;
	font-size: 15px;
}

.sbm-directory-meta {
	font-size: 13px;
	color: var(--sbm-text-muted);
}

/* Calendar page */
.sbm-calendar-view-toggle {
	display: flex;
	gap: 4px;
}

.sbm-button-active {
	background: var(--sbm-primary);
	color: #fff;
	border-color: var(--sbm-primary);
}

.sbm-calendar-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 16px;
}

.sbm-calendar-nav-center {
	display: flex;
	align-items: center;
	gap: 12px;
}

.sbm-calendar-label {
	font-size: 16px;
	font-weight: 600;
	min-width: 160px;
	text-align: center;
}

.sbm-calendar {
	background: var(--sbm-surface);
	border: 1px solid var(--sbm-border);
	border-radius: var(--sbm-radius-lg);
	box-shadow: var(--sbm-shadow);
	overflow: hidden;
}

.sbm-calendar-weekday-row,
.sbm-calendar-week {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
}

.sbm-calendar-weekday-row {
	border-bottom: 1px solid var(--sbm-border);
	background: var(--sbm-bg);
}

.sbm-calendar-weekday {
	padding: 8px 6px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--sbm-text-muted);
	text-align: center;
}

.sbm-calendar-week {
	border-bottom: 1px solid var(--sbm-border);
}

.sbm-calendar-week:last-child {
	border-bottom: none;
}

.sbm-calendar-day {
	min-height: 100px;
	padding: 6px;
	border-right: 1px solid var(--sbm-border);
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.sbm-calendar-view-week .sbm-calendar-day {
	min-height: 220px;
}

.sbm-calendar-day:last-child {
	border-right: none;
}

.sbm-calendar-day-other-month {
	background: var(--sbm-bg);
}

.sbm-calendar-day-other-month .sbm-calendar-day-number {
	color: var(--sbm-text-muted);
}

.sbm-calendar-day-number {
	font-size: 13px;
	font-weight: 600;
}

.sbm-calendar-day-today .sbm-calendar-day-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--sbm-primary);
	color: #fff;
}

.sbm-calendar-day-mobile-label {
	display: none;
}

.sbm-calendar-day-events {
	display: flex;
	flex-direction: column;
	gap: 3px;
	overflow: hidden;
}

.sbm-calendar-event {
	display: block;
	font-size: 12px;
	line-height: 1.3;
	padding: 3px 6px;
	border-radius: 6px;
	background: rgba(29, 158, 117, 0.12);
	color: var(--sbm-text);
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sbm-calendar-event:hover {
	background: rgba(29, 158, 117, 0.22);
}

.sbm-calendar-event-time {
	font-weight: 600;
	color: var(--sbm-primary-dark);
	margin-right: 4px;
}

.sbm-calendar-event-more {
	font-size: 12px;
	color: var(--sbm-text-muted);
	text-decoration: none;
	padding: 2px 6px;
}

.sbm-calendar-event-more:hover {
	text-decoration: underline;
	color: var(--sbm-primary);
}

/* Below this width, the 7-column grid stops working as a grid at all —
   each day switches to a stacked full-width row instead, with its weekday
   name shown inline next to the date since the column header row is
   hidden. Month view can still get long this way, but it stays readable
   and scrollable, which a cramped 7-up grid at this width would not. */
@media (max-width: 640px) {
	.sbm-calendar-weekday-row {
		display: none;
	}

	.sbm-calendar-week {
		display: block;
		border-bottom: none;
	}

	.sbm-calendar-day {
		display: block;
		min-height: 0;
		border-right: none;
		border-bottom: 1px solid var(--sbm-border);
		padding: 8px 10px;
	}

	.sbm-calendar-view-week .sbm-calendar-day {
		min-height: 0;
	}

	.sbm-calendar-day-mobile-label {
		display: inline;
		color: var(--sbm-text-muted);
		font-weight: 600;
	}

	.sbm-calendar-day-events {
		margin-top: 4px;
	}

	.sbm-calendar-event {
		white-space: normal;
	}

	.sbm-calendar-nav {
		flex-wrap: wrap;
	}

	.sbm-calendar-label {
		min-width: 0;
	}
}