/*
when.css
*/

/*
	CSS Variables to be used elsewhere
*/

:root{
--font-base:clamp(
	15px,
	0.42vw + 1.42vh,
	22px
	);
--font-title:1.35rem;
--font-section:1.05rem;
--font-body:1rem;
--font-meta:0.88rem;
--font-utility:0.74rem;
--available-bg:#ffffff;
--conflict-bg:#d7d7d7;
--selected-bg:#8db9ff;
--today-border:#2f80ff;
--blue-dot:#2f80ff;
--panel-bg:rgba(242,242,242,0.5);
--border-color:#bdbdbd;
--text-color:#222;
--year-fast-bg:#000000;
--year-fast-fg:#ffffff;
--year-normal-fg:#222;
--ui-font-size:16px;
--details-font-scale:1rem;
--utility-button-font:15px;

	/* -------------------------------------------------- */
	/* Z-INDEX                                            */
	/* -------------------------------------------------- */
	--z-base:1;
	--z-details:1000;
	--z-tooltip:2000;
	--z-lightbox:4000;
	--z-modal:5000;
	/* -------------------------------------------------- */
	/* TYPOGRAPHY                                         */
	/* -------------------------------------------------- */
	--font-xs:.78rem;
	--font-sm:.92rem;
	--font-md:1rem;
	--font-lg:1.14rem;
	--font-xl:1.45rem;
	/* -------------------------------------------------- */
	/* LAYOUT                                             */
	/* -------------------------------------------------- */
	--details-width:48%;
	--toolbar-height:2.3rem;
	--tab-height:2.2rem;
	--header-height:2.4rem;
	/* -------------------------------------------------- */
	/* MORE MENU                                          */
	/* -------------------------------------------------- */
	--more-timeout:5000ms;

}

*{box-sizing:border-box;}

#app {
    height: var(--app-height);
	display:flex;
	width:100%;
	overflow-y: hidden;
}

html{
	min-height:100dvh;
	font-size:16px;

	margin:0;
	padding:0;
	width:100%;
	height:100%;
	overflow: hidden;
	overscroll-behavior-y:auto;
	font-family:Arial,Helvetica,sans-serif;
}
body{
	min-height:-webkit-fill-available;
	font-size:var(--font-base);

	margin:0;
	padding:0;
	width:100%;
	height:100%;
	overflow: hidden;
	overscroll-behavior-y:auto;
	font-family:Arial,Helvetica,sans-serif;
	background:#ececec;

	color:var(--text-color);
}


/* ========================================================================= */
/* CALENDAR PANE                                                             */
/* ========================================================================= */
#calendarPane{
	flex:1;
	min-width:0;
	min-height:0;
	overflow-y:auto;
	overflow-x:hidden;
	padding:8px;
	background-color:var(--panel-bg);
}
/* ========================================================================= */
/* GRID                                                                      */
/* ========================================================================= */
#yearGrid{
	display:grid;
	gap:14px;
}
@media (min-width:1700px){
	#yearGrid{
		grid-template-columns:repeat(3,1fr);
	}
}
@media (min-width:1100px) and (max-width:1699px){
	#yearGrid{
		grid-template-columns:repeat(2,1fr);
	}
}
@media (max-width:1099px){
	#yearGrid{
		grid-template-columns:1fr;
	}
}
#yearGrid.dashGrid{
	display:grid;
	gap:10px;
	grid-template-columns:
		repeat(
			auto-fit,
			minmax(260px,1fr)
		);
}
/* ========================================================================= */
/* DETAILS                                                                   */
/* ========================================================================= */
.detailsHeader{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:10px;
	font-size:var(--font-title);
	margin-bottom:10px;
}
.detailsLabel{
	font-weight:bold;
	margin-bottom:4px;
	font-size:.95em
}
.constraintItem{
	border-top:1px solid #ddd;
	margin-top:10px;
	padding-top:10px;
}
.constraintMeta{
	font-size:.82em;
	color:#555;
	margin-top:4px;
}
/* ========================================================================= */
/* STATUS BANNER                                                             */
/* ========================================================================= */
.statusBanner{
	padding:12px;
	border-radius:6px;
	margin-bottom:12px;
	font-weight:bold;
}
.statusAvailable{
	background:white;
	border:1px solid #aaa;
}
.statusConflict{
	background:#d7d7d7;
	border:1px solid #888;
}

/* ========================================================================= */
/* DETAILS PANE                                                              */
/* ========================================================================= */
#calenPane{
	display:flex;
	position:relative;
	font-size:1em;
	flex-direction:column;
	flex-shrink:0;
	overflow:hidden;
	min-height:0;
	background-color:var(--panel-bg);
	padding-left:15px;
/*	z-index: 1000;	*/
}
#detailsPane{
	display:flex;
	position:relative;
	font-size:1em;
	flex-direction:column;
	flex-shrink:0;
	overflow-x:hidden;
	min-height:0;
	background-color:var(--panel-bg);
	padding-left:15px;
/*	z-index: 1000;	*/
}
#detailsPaneInner{
	flex:1;
	position:relative;
	top:0;
	left:0;
	right:0;
	bottom:0;
	display:flex;
	flex-direction:column;
	min-height:0;
	overflow-y:hidden;
}
#detailsHandle{
	position:absolute;
	left:0px;
	border-left:2px solid #777;
	top:0;
	width:24px;
	height:100%;
	z-index:3000;
	cursor:col-resize;
	display:flex;
	align-items:center;
	justify-content:center;
	touch-action:none;
	user-select:none;
}
#detailsHandleBar{
	position:absolute;
	left:2px;
	top:50%;
	width:8px;
	height:42px;
	transform:translateY(-50%);
	border-radius:999px;
	background:#5f5f5f;
	opacity:.92;
	overflow:hidden;
	transition:
		background-color 120ms ease,
		transform 120ms ease,
		opacity 120ms ease,
		box-shadow 120ms ease;
}
#detailsHandleBar::before{
	content:"";
	position:absolute;
	inset:0;
	background:
		repeating-linear-gradient(
			135deg,
			transparent 0px,
			transparent 11px,
			rgba(255,255,255,.88) 11px,
			rgba(255,255,255,.88) 18px
		);
}
body.portrait #detailsHandle{
	top:0px;
	left:0;
	width:100%;
	height:30px;
	cursor:ns-resize;
	border-top:2px solid black;
	background-color: rgba(0,0,0,0.2);
	
}
body.portrait #detailsHandleBar{
	width:42px;
	height:8px;
	left:50%;
	top:7px;
	transform:translateX(-50%);
}
body.landscape #detailsHandle,
body.wide #detailsHandle,
body.ultrawide #detailsHandle{
	left:0px;
	top:0;
	width:15px;
	height:100%;
	background-color:rgba(0,0,0,0.2);
	border-left:2px solid black;
}
body.sheetDragging #detailsHandleBar{
	box-shadow:
		0 0 0 2px rgba(80,140,255,.22);
	scale:1.08;
}
body.wsDisconnected #detailsPane{
	border-top-color:#cc4444;
}
body.sheetDragging{
	user-select:none;
	cursor:grabbing;
}
#detailsContent{
	display:flex;
	flex-direction:column;
	gap:12px;
}

/* ========================================================================= */
/* DETAILS CONTENT                                                           */
/* ========================================================================= */
@media (max-width:420px){
	.eventRowInner{
		flex-direction:column;
		align-items:flex-start;
		gap:2px;
	}
	.eventTitle{width:100%;	}
	.eventDates{padding-left:2px;}
}

.detailsZoomControls button{
	display:flex;
	align-items:center;
	gap:.28em;
	flex-shrink:0;

	font-size:var(--font-utility);
	padding:.16em .38em;
	color:var(--panel-bg);
	background-color:#555;
	border:none;
	border-radius:.32em;
	min-height:1.45em;
	min-width:1.65em;
	line-height:1;
	cursor:pointer;
}
.detailsZoomControls button:hover{background-color:#666;}
.detailsZoomControls button:active{background-color:#777;}
.detailsTab,
#clearEventSelection,
#createEventButton{
	font-size:1rem;
}
.detailsBlock{
	background:white;
	border:1px solid #ccc;
	border-radius:6px;
	padding:10px;
	margin-bottom:12px;
}

.monthTitle,
.detailsBlock h2{
	font-size:var(--font-section);
}
.detailsBlock,
.dayCell,
.eventTitle{
	font-size:var(--font-body);
}

.detailsZoomControls button{
	font-size:var(--font-utility);
}
@keyframes modalEditorIn{
	from{
		opacity:0;
		transform:
			translateY(18px)
			scale(.96);
	}
	to{
		opacity:1;
		transform:
			translateY(0)
			scale(1);
	}
}

body.portrait .dashboard-card h2{
	font-size:1.5rem;
}

body.landscape .dashboard-card h2{
	font-size:1.25rem;
}

body.portrait .dashboard-card{
	font-size:1.15rem;
}

body.landscape .dashboard-card{
	font-size:0.95rem;
}
body.portrait .subjectTitle{
	font-size:1.7rem;
}

body.portrait .subjectLink{
	font-size:1.15rem;
}
body.portrait .dashboard-grid{
/*	grid-template-columns:1fr 1fr; */
	grid-template-columns:
		repeat(
			auto-fit,
			minmax(260px,1fr)
		);
}

body.landscape .dashboard-grid{
	grid-template-columns:1fr 1fr 1fr;
}