/* ============================================================================
   HLL Driver Licence — THE NOTIFICATIONS FEED.

   um-notifications ships a white panel. Read from the add-on's own stylesheet:

       .um-notification-live-feed { position:fixed; z-index:556665;
                                    background:#fff; width:400px; ... }
       .um-notification.unread    { background:#f9f9f9;
                                    border-left:3px solid #6cb9db }
       .um-notification.read      { background:0 0; padding-left:13px }
       .um-notifications-filter.active { background:#44b0ec; border-color:#44b0ec }

   A white sheet over a #23282e site, with a blue accent that belongs to neither.

   WHY THIS IS ITS OWN FILE. The feed and its bell are position:fixed and
   appended to the body, so they can appear on any page — not only the ones
   carrying a UM shortcode. tabs.css is only enqueued on those, so styling the
   feed there would leave it white everywhere else. This sheet is small and
   loads site-wide, behind its own switch under Users → Driver Licences.

   Every selector here belongs to um-notifications. Nothing else is touched.
   ============================================================================ */

html body .um-notification-live-feed {
	width: min(400px, calc(100vw - 16px)) !important;
	background: #23282e !important;
	border-left: 1px solid rgba(255, 255, 255, .09) !important;
	box-shadow: -24px 0 60px -20px rgba(0, 0, 0, .85) !important;
	color: #eef2f7 !important;
	scrollbar-width: thin;
}

html body .um-notification-live-feed::-webkit-scrollbar {
	width: 6px;
}

html body .um-notification-live-feed::-webkit-scrollbar-thumb {
	border-radius: 3px;
	background: rgba(255, 255, 255, .2);
}

html body .um-notification-live-feed-inner {
	background: transparent !important;
}

/* ------------------------------------------------------------- the head --- */

html body .um-notification-header {
	position: sticky !important;
	top: 0 !important;
	z-index: 2 !important;
	padding: 14px 16px !important;
	border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
	background: #262c33 !important;
	color: #eef2f7 !important;
}

html body .um-notification-header a,
html body .um-notification-header-row a {
	color: #eef2f7 !important;
	text-shadow: none !important;
}

html body .um-notification-i-close {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 34px !important;
	height: 34px !important;
	border-radius: 9px !important;
	background: rgba(255, 255, 255, .05) !important;
	color: #98a4b2 !important;
	font-size: 17px !important;
}

html body .um-notification-i-close:hover {
	background: rgba(255, 255, 255, .1) !important;
	color: #eef2f7 !important;
}

/* The filter pills, in the site's own shape rather than the add-on's blue. */
html body .um-notifications-filter {
	border: 1px solid rgba(255, 255, 255, .12) !important;
	border-radius: 999px !important;
	background: rgba(255, 255, 255, .04) !important;
	color: #c3cdd9 !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	text-shadow: none !important;
}

html body .um-notifications-filter.active {
	border-color: transparent !important;
	background: #ff7d21 !important;
	color: #23282e !important;
}

/* ------------------------------------------------------------ the rows --- */

html body .um-notification {
	gap: 12px !important;
	padding: 13px 16px !important;
	border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
	font-size: 13.5px !important;
	line-height: 1.45 !important;
	color: #eef2f7 !important;
	text-shadow: none !important;
	transition: background-color .14s;
}

html body .um-notification.read {
	background: transparent !important;
	padding-left: 16px !important;
}

/* Unread earns the accent and a little weight — the only two things a list
   like this needs to say. */
html body .um-notification.unread {
	border-left: 3px solid #ff7d21 !important;
	padding-left: 13px !important;
	background: rgba(255, 125, 33, .07) !important;
}

html body .um-notification.read:hover,
html body .um-notification:hover {
	background: rgba(255, 255, 255, .05) !important;
}

html body .um-notification a {
	color: #eef2f7 !important;
	text-decoration: none !important;
	text-shadow: none !important;
}

html body .um-notification strong,
html body .um-notification b {
	color: #ffffff !important;
	font-weight: 800 !important;
}

html body .um-notification span.b1 {
	color: #c3cdd9 !important;
}

html body .um-notification span.b2 {
	color: #98a4b2 !important;
	font-size: 12px !important;
}

html body .um-notification-photo,
html body .um-notification img {
	width: 40px !important;
	height: 40px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	background: #2a3037 !important;
}

html body .um-notification-actions-a {
	color: #98a4b2 !important;
}

html body .um-notification-actions-a:hover {
	color: #ff7d21 !important;
}

/* The little menu each row can open. */
html body .um-new-dropdown {
	border: 1px solid rgba(255, 255, 255, .12) !important;
	border-radius: 12px !important;
	background: #2a3037 !important;
	box-shadow: 0 20px 44px -22px rgba(0, 0, 0, .9) !important;
	overflow: hidden !important;
}

html body .um-new-dropdown ul li a {
	color: #c3cdd9 !important;
	background: transparent !important;
	text-shadow: none !important;
}

html body .um-new-dropdown ul li a:hover {
	background: rgba(255, 125, 33, .12) !important;
	color: #eef2f7 !important;
}

/* ---------------------------------------------------------- Load more --- */

/* The green one. It is the only action in the panel, so it gets the brand
   colour and dark text — 5.75:1, the same treatment as every other primary
   button on the site. */
html body .um-load-more-notifications,
html body a.um-load-more-notifications {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	min-height: 46px !important;
	margin: 12px 16px 16px !important;
	padding: 0 20px !important;
	border: 0 !important;
	border-radius: 11px !important;
	background: #ff7d21 !important;
	background-image: none !important;
	color: #23282e !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	text-align: center !important;
	text-decoration: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
}

html body .um-load-more-notifications:hover,
html body a.um-load-more-notifications:hover {
	background: #ff9147 !important;
	color: #23282e !important;
}

/* ------------------------------------------------------- empty and busy --- */

html body .um-notifications-none {
	color: #98a4b2 !important;
	text-shadow: none !important;
}

html body .um-notifications-none i:before {
	color: rgba(255, 255, 255, .16) !important;
}

html body .um-ajax-loading-wrap {
	background: transparent !important;
}

/* On a phone the panel is the screen, not a 400px column beside it. */
@media (max-width: 460px) {
	html body .um-notification-live-feed {
		width: 100vw !important;
		max-width: 100vw !important;
		border-left: 0 !important;
	}
}

/* ============================================================================
   2.14.1 — the panel, properly laid out.

   Read from the add-on's own templates rather than inferred:

     .um-notification.{status}
       .um-notification-link          the tappable region
         img.um-notification-photo
         .um-notification-content
           .um-notification-content-string    the sentence
           span.b2                            the type icon and the time
       .um-notifications-buttons
         .um-notification-actions > a.um-notification-actions-a

     .um-notification-header
       .um-notification-header-row    h4 + close
       .um-notification-header-row    .um-notifications-filters + options "…"

   Two things the first pass left wrong: the header's rows were never laid out,
   so the options "…" floated over the title, and the site's global
   text-shadow was still putting a white halo behind everything in the panel.
   ============================================================================ */

/* Nothing in this panel glows. */
html body .um-notification-live-feed,
html body .um-notification-live-feed * {
	text-shadow: none !important;
}

/* ------------------------------------------------------------- the head --- */

html body .um-notification-header {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 12px !important;
	padding: 14px 16px !important;
}

html body .um-notification-header-row {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 10px !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

html body .um-notification-header h4 {
	margin: 0 !important;
	padding: 0 !important;
	color: #ffffff !important;
	font-size: 17px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	letter-spacing: -.01em !important;
}

html body .um-notifications-filters {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
}

html body .um-notifications-filter {
	display: inline-flex !important;
	align-items: center !important;
	min-height: 32px !important;
	padding: 0 14px !important;
	margin: 0 !important;
}

/* The options trigger belongs beside the filters, not over the title. */
html body .um-notifications-options-a {
	position: static !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: none !important;
	width: 34px !important;
	height: 34px !important;
	margin: 0 !important;
	border-radius: 9px !important;
	background: rgba(255, 255, 255, .05) !important;
	color: #98a4b2 !important;
	font-size: 15px !important;
	text-decoration: none !important;
}

html body .um-notifications-options-a:hover {
	background: rgba(255, 255, 255, .1) !important;
	color: #eef2f7 !important;
}

/* ------------------------------------------------------------ the rows --- */

html body .um-notification {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 12px 14px !important;
}

html body .um-notification-link {
	display: grid !important;
	grid-template-columns: 44px minmax(0, 1fr) !important;
	align-items: center !important;
	gap: 12px !important;
	min-width: 0 !important;
	cursor: pointer;
}

html body .um-notification-photo {
	width: 44px !important;
	height: 44px !important;
	border: 1px solid rgba(255, 255, 255, .12) !important;
	box-sizing: border-box !important;
}

html body .um-notification-content {
	display: flex !important;
	flex-direction: column !important;
	gap: 3px !important;
	min-width: 0 !important;
}

html body .um-notification-content-string {
	color: #dbe3ec !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
}

html body .um-notification-content-string a,
html body .um-notification-content-string strong,
html body .um-notification-content-string b {
	color: #ffffff !important;
	font-weight: 800 !important;
	text-decoration: none !important;
}

/* The type icon and the time read as one quiet line. */
html body .um-notification span.b2 {
	display: flex !important;
	align-items: center !important;
	gap: 7px !important;
	color: #8b97a6 !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
}

/* The add-on colours these per type — blue, green, pink — which reads as
   decoration on a dark panel when the sentence already says what happened.
   One tone; delete this rule to have the colours back. */
html body .um-notification span.b2 i,
html body .um-notification span.b2 i:before,
html body .um-notification span.b2 img {
	color: #8b97a6 !important;
	font-size: 13px !important;
	width: auto !important;
	height: auto !important;
	max-height: 14px !important;
	opacity: .95 !important;
}

/* Its own menu, at the end of the row. */
html body .um-notifications-buttons {
	display: flex !important;
	align-items: center !important;
	flex: none !important;
}

html body .um-notification-actions-a {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 32px !important;
	height: 32px !important;
	border-radius: 8px !important;
	font-size: 14px !important;
	text-decoration: none !important;
}

html body .um-notification-actions-a:hover {
	background: rgba(255, 255, 255, .08) !important;
}

/* Unread: a bar, a whisper of tint, and a brighter sentence. Nothing louder. */
html body .um-notification.unread {
	background: rgba(255, 125, 33, .055) !important;
	padding-left: 11px !important;
}

html body .um-notification.unread .um-notification-content-string {
	color: #eef2f7 !important;
}

/* ------------------------------------------------------- foot and states --- */

html body .um-load-more-notifications {
	margin: 14px 16px 18px !important;
	min-height: 48px !important;
	cursor: pointer;
}

html body .um-load-more-notifications span {
	color: inherit !important;
	font: inherit !important;
}

html body .um-notifications-none {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	position: static !important;
	height: auto !important;
	padding: 48px 16px !important;
	font-size: 14px !important;
}

html body .um-notifications-none i:before {
	font-size: 40px !important;
	height: auto !important;
}

html body .um-ajax-loading {
	border-top-color: #ff7d21 !important;
}