/* ==========================================================================
   Calendar and Notes, wearing the dashboard's look (jocor_hero 2.16.0)

   One file, loaded after header.css on every page, and every rule is scoped to
   the two apps' own root (#content.app-calendar, #content.app-notes, the class
   each app puts on #content). Nothing here moves a control or changes a
   layout; it changes colour, type and edges so the two apps read like the
   cards. To take it off: delete the Util::addStyle line for 'apps-skin' in
   lib/AppInfo/Application.php (or this file).

   Tokens are the dashboard's (--jg-*, set in header.css and dash.css).
   ========================================================================== */

/* ---- Calendar: the month, the week, the day -------------------------------- */
#content.app-calendar {
	--jc-line: rgba(150, 180, 255, .13);
	--jc-today: rgba(77, 141, 255, .16);
	--jc-sel: #2459c9;
}
#content.app-calendar .fc-theme-standard td,
#content.app-calendar .fc-theme-standard th,
#content.app-calendar .fc-theme-standard .fc-scrollgrid {
	border-color: var(--jc-line);
}
#content.app-calendar .fc .fc-col-header-cell-cushion {
	padding: 8px 4px;
	font: 500 12.5px/1.2 var(--jg-font, 'Geist', system-ui, sans-serif);
	color: var(--jg-ink-2);
	text-decoration: none;
}
#content.app-calendar .fc .fc-daygrid-day-number {
	padding: 6px 8px;
	font: 500 13.5px/1 var(--jg-font, 'Geist', system-ui, sans-serif);
	font-variant-numeric: tabular-nums;
	color: var(--jg-ink);
	text-decoration: none;
}
#content.app-calendar .fc .fc-day-other .fc-daygrid-day-number { color: #8793b1; }
/* Today: a blue wash, a blue number (Nextcloud's own is teal). */
#content.app-calendar .fc .fc-day-today { background: var(--jc-today) !important; }
#content.app-calendar .fc .fc-day-today .fc-daygrid-day-number {
	margin: 4px;
	padding: 5px 8px;
	border-radius: 999px;
	background: var(--jc-sel);
	color: #fff;
	font-weight: 700;
}
#content.app-calendar .fc .fc-timegrid-slot-label-cushion,
#content.app-calendar .fc .fc-timegrid-axis-cushion { color: var(--jg-ink-2); font-size: 12px; }
#content.app-calendar .fc .fc-timegrid-now-indicator-line { border-color: var(--jg-blue); }
#content.app-calendar .fc .fc-timegrid-now-indicator-arrow { border-color: var(--jg-blue); border-top-color: transparent; border-bottom-color: transparent; }
/* Events: a quieter chip, the calendar's colour kept. */
#content.app-calendar .fc .fc-daygrid-event,
#content.app-calendar .fc .fc-timegrid-event,
#content.app-calendar .fc .fc-event { border-radius: 6px; font-size: 12.5px; }
#content.app-calendar .fc .fc-daygrid-dot-event:hover { background: rgba(77, 141, 255, .14); }
#content.app-calendar .fc .fc-more-link { color: #9dbcff; font-weight: 500; }
#content.app-calendar .fc-list-day-cushion { background: var(--jc-today); }
#content.app-calendar .fc .fc-list-event:hover td { background: rgba(77, 141, 255, .1); }
/* The left column: calendar names read as a list, not as form labels. */
#content.app-calendar .app-navigation-caption { color: var(--jg-ink-2); font-weight: 600; }

/* ---- Notes: the list and the page --------------------------------------------- */
#content.app-notes .list-item__wrapper { margin: 2px 6px; }
#content.app-notes .list-item__wrapper .list-item { border-radius: 10px; }
#content.app-notes .list-item__anchor:hover { background: rgba(77, 141, 255, .1); }
#content.app-notes .list-item__wrapper--active .list-item {
	background: rgba(77, 141, 255, .18);
	box-shadow: inset 3px 0 0 var(--jg-blue);
}
#content.app-notes .list-item-content__name { font-weight: 600; }
/* The category as a small label, not loose text on the right. */
#content.app-notes .list-item-content__subname {
	flex: 0 0 auto;
	width: auto;
	min-width: 0;
	max-width: 45%;
	margin-inline-start: auto;
	padding: 0 8px;
	border-radius: 999px;
	background: rgba(77, 141, 255, .16);
	color: #cfe0ff;
	font-size: 12px;
	line-height: 1.6;
}
/* The note: a reading width, a reading size, the dashboard's serif for the title. */
#content.app-notes .text-editor__content { max-width: min(46rem, 100% - 32px) !important; }
#content.app-notes .text-editor .ProseMirror {
	font-size: 16px;
	line-height: 1.7;
	color: var(--jg-ink);
}
#content.app-notes .text-editor .ProseMirror h1 {
	margin: .2em 0 .5em;
	font: 500 36px/1.12 var(--jd-serif, 'Cormorant Garamond', Georgia, serif);
	letter-spacing: -.005em;
}
#content.app-notes .text-editor .ProseMirror h2 { margin: 1.3em 0 .4em; font: 600 21px/1.3 var(--jg-font, 'Geist', system-ui, sans-serif); }
#content.app-notes .text-editor .ProseMirror h3 { margin: 1.1em 0 .3em; font: 600 17px/1.35 var(--jg-font, 'Geist', system-ui, sans-serif); }
#content.app-notes .text-editor .ProseMirror p { margin-block: 0 .75em; }
#content.app-notes .text-editor .ProseMirror a { color: #9dbcff; text-underline-offset: 3px; }
#content.app-notes .text-editor .ProseMirror blockquote { padding-left: 14px; border-left: 2px solid var(--jg-edge); color: var(--jg-ink-2); }
#content.app-notes .text-editor .ProseMirror code { padding: 1px 5px; border-radius: 5px; background: rgba(255, 255, 255, .08); }
#content.app-notes .text-editor .ProseMirror pre { border-radius: 10px; background: rgba(255, 255, 255, .06); }
#content.app-notes .text-editor .ProseMirror hr { border-color: var(--jg-edge); }

@media (max-width: 600px) {
	#content.app-notes .text-editor .ProseMirror h1 { font-size: 30px; }
}