/* Amelia-TutorLMS Bridge - frontend styles
   Matches the site's existing card language (blue accent #183FE1, soft
   rounded white cards) already used on the My Sessions page. */

.atb-panel {
	background: #fff;
	border: 1px solid #eef0f4;
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba( 15, 23, 42, 0.05 );
	padding: 20px;
	margin-bottom: 24px;
}

/* Fix Tutor's dashboard-bar breakpoint gap
   -----------------------------------------
   Out of the box, Tutor LMS hides its dashboard's desktop sidebar at
   <=768px but doesn't reveal its own mobile bottom bar until <=576px -
   which leaves the 577-768px range (large phones landscape, small tablets)
   with NO navigation at all: no sidebar, no bottom bar. This shows Tutor's
   bar from <=768px down, matching exactly where the sidebar disappears, so
   there's always navigation. All of Tutor's bar layout rules (the flex
   row, item spacing, icons) are global rather than tied to its 576px
   breakpoint, so simply making the bar visible across this range lays it
   out correctly - no other rules need copying. The :not(.atb-tutor-style-
   bar) keeps this from touching this plugin's own standalone [atb_nav_bar]
   (which shares the tutor-dashboard-nav-mobile class but manages its own
   <=1024px visibility). Doesn't edit any Tutor file - just an override
   loaded on the dashboard alongside our other styles. */
@media ( max-width: 768px ) {
	.tutor-dashboard-nav-mobile:not( .atb-tutor-style-bar ) {
		display: block !important;
	}
}

/* Empty state (shared look with the My Sessions page card) */
.atb-empty-sessions {
	max-width: 440px;
	margin: 24px auto;
	padding: clamp( 32px, 8vw, 60px ) clamp( 20px, 6vw, 32px );
	text-align: center;
	background: #fff;
	border: 1px solid #eef0f4;
	border-radius: 18px;
	box-shadow: 0 4px 20px rgba( 15, 23, 42, 0.05 );
}

.atb-empty-sessions--inline {
	margin: 16px 0 0;
	max-width: 100%;
	padding: 28px 20px;
}

.atb-empty-icon {
	width: 72px;
	height: 72px;
	margin: 0 auto 20px;
	border-radius: 50%;
	background: var(--atb-accent-soft,#eef2ff);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
}

.atb-empty-title {
	margin: 0 0 10px;
	font-size: clamp( 18px, 4vw, 22px );
	font-weight: 700;
	color: var(--atb-accent,#183fe1);
}

.atb-empty-text {
	margin: 0 0 28px;
	font-size: 14px;
	line-height: 1.6;
	color: #6b7280;
}

.atb-empty-sessions--inline .atb-empty-text {
	margin: 0;
}

.atb-empty-btn {
	display: inline-block;
	width: auto;
	padding: 13px 32px;
	background: var(--atb-accent,#183fe1);
	color: #fff !important;
	border-radius: 10px;
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	transition: background 0.2s ease, transform 0.2s ease;
}

.atb-empty-btn:hover {
	background: var(--atb-accent-dark,#122fb3);
	transform: translateY( -1px );
}

/* Calendar tab */
.atb-cal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.atb-cal-title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: #1f2937;
}

.atb-cal-nav {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--atb-accent-soft,#eef2ff);
	color: var(--atb-accent,#183fe1);
	text-decoration: none;
	font-weight: 700;
	font-size: 16px;
}

.atb-cal-nav:hover {
	background: var(--atb-accent-soft,#dbe4ff);
}

.atb-cal-grid {
	display: grid;
	grid-template-columns: repeat( 7, 1fr );
	gap: 4px;
	margin-bottom: 4px;
}

.atb-cal-label {
	text-align: center;
	font-size: 11px;
	font-weight: 700;
	color: #9aa2b1;
	text-transform: uppercase;
	padding: 6px 0;
}

.atb-cal-cell {
	position: relative;
	aspect-ratio: 1 / 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	font-size: 13px;
	color: #374151;
}

.atb-cal-cell--empty {
	visibility: hidden;
}

.atb-cal-cell.is-today .atb-cal-daynum {
	background: var(--atb-accent-soft,#eef2ff);
	color: var(--atb-accent,#183fe1);
	font-weight: 700;
}

.atb-cal-daynum {
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.atb-cal-cell.has-session .atb-cal-daynum {
	font-weight: 700;
	color: var(--atb-accent,#183fe1);
}

.atb-cal-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--atb-accent,#183fe1);
	margin-top: 2px;
}

.atb-cal-list {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid #eef0f4;
}

.atb-cal-list-heading {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 700;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.atb-cal-list-item {
	padding: 12px 14px;
	border-radius: 12px;
	background: #f8fafc;
	margin-bottom: 8px;
}

.atb-cal-list-date {
	font-size: 12px;
	font-weight: 600;
	color: var(--atb-accent,#183fe1);
	margin-bottom: 2px;
}

.atb-cal-list-title {
	font-size: 14px;
	font-weight: 700;
	color: #1f2937;
}

.atb-cal-list-provider {
	font-size: 12.5px;
	color: #6b7280;
	margin-top: 2px;
}

/* Dashboard home card */
.atb-home-card {
	display: flex;
	align-items: center;
	gap: 16px;
	background: #fff;
	border: 1px solid #eef0f4;
	border-radius: 16px;
	box-shadow: 0 4px 20px rgba( 15, 23, 42, 0.05 );
	padding: 18px 20px;
	margin-bottom: 24px;
}

.atb-home-card-icon {
	width: 48px;
	height: 48px;
	min-width: 48px;
	border-radius: 50%;
	background: var(--atb-accent-soft,#eef2ff);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
}

.atb-home-card-body {
	flex: 1;
	min-width: 0;
}

.atb-home-card-label {
	font-size: 12px;
	font-weight: 700;
	color: #9aa2b1;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin-bottom: 2px;
}

.atb-home-card-title {
	font-size: 15px;
	font-weight: 700;
	color: #1f2937;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.atb-home-card-date {
	font-size: 13px;
	color: #6b7280;
	margin-top: 2px;
}

.atb-home-card-btn {
	flex-shrink: 0;
	padding: 10px 18px;
	background: var(--atb-accent,#183fe1);
	color: #fff !important;
	border-radius: 10px;
	text-decoration: none;
	font-weight: 600;
	font-size: 13.5px;
	white-space: nowrap;
	transition: background 0.2s ease;
}

.atb-home-card-btn:hover {
	background: var(--atb-accent-dark,#122fb3);
}

/* Mobile */
@media ( max-width: 480px ) {
	.atb-panel {
		padding: 14px;
		border-radius: 14px;
	}

	.atb-empty-sessions {
		max-width: calc( 100% - 24px );
		margin: 20px auto;
		padding: 32px 20px;
		border-radius: 16px;
	}

	.atb-empty-icon {
		width: 56px;
		height: 56px;
		font-size: 26px;
		margin: 0 auto 14px;
	}

	.atb-empty-title {
		font-size: 17px;
	}

	.atb-empty-text {
		font-size: 13.5px;
	}

	.atb-empty-btn {
		display: block;
		width: 100%;
		padding: 13px 16px;
	}

	.atb-cal-daynum {
		width: 22px;
		height: 22px;
		font-size: 12px;
	}

	.atb-home-card {
		flex-wrap: wrap;
		padding: 14px 16px;
	}

	.atb-home-card-btn {
		width: 100%;
		text-align: center;
		margin-top: 4px;
	}
}

/* Mobile bar itself uses Tutor LMS's own native CSS classes
   (tutor-dashboard-nav-mobile etc.) and is styled by Tutor's own
   tutor-dashboard.min.css - intentionally not redefined here, so it looks
   pixel-identical to Tutor's default design everywhere it appears. */

/* Small on-panel heading, e.g. "Private Sessions Calendar" */
.atb-panel-title {
	margin: 0 0 16px;
	font-size: 16px;
	font-weight: 700;
	color: #1f2937;
}

/* Link from the Sessions Calendar tab back to My Sessions */
.atb-cal-viewall {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 16px;
	font-size: 13px;
	font-weight: 600;
	color: var(--atb-accent,#183fe1);
	text-decoration: none;
}

.atb-cal-viewall:hover {
	text-decoration: underline;
}

/* ------------------------------------------------------------------ *
 *  Keep TranslatePress's floating language switcher off the mobile bar
 *
 *  The switcher is position:fixed at bottom:0 with z-index:99999, which
 *  is above the mobile nav bar's 9999 - so it sits on top of the bar's
 *  last item and hides it. It collides in BOTH languages (over
 *  "الرئيسية" in Arabic, over "Explore" in English), because the pill's
 *  own position never changes with direction.
 *
 *  The same rule is also emitted inline with the [atb_nav_bar] shortcode
 *  bar (see nav_bar_inline_css()), because that bar can appear on pages
 *  where this stylesheet isn't loaded. Here it covers Tutor's own
 *  dashboard bar, which comes from the template override instead and so
 *  never sees that inline block.
 *
 *  :has() scopes it to pages that really do have a bar, so everywhere
 *  else the pill stays exactly where TranslatePress placed it.
 * ------------------------------------------------------------------ */
@media ( max-width: 1024px ) {
	body:has( .tutor-dashboard-nav-mobile ) .trp-floating-switcher.trp-switcher-position-bottom {
		bottom: calc( 84px + env( safe-area-inset-bottom, 0px ) ) !important;
	}
}