/* Gladiator Webmail - app UI, Catppuccin Latte palette */

#layout-menu {
	background: #dce0e8 !important; /* Crust */
}

#layout-sidebar {
	box-shadow: 2px 0 8px rgba(76, 79, 105, 0.06);
	background-color: #eff1f5 !important; /* Base */
}

#layout-list {
	box-shadow: 2px 0 8px rgba(76, 79, 105, 0.06);
	background-color: #eff1f5 !important; /* Base */
}

#layout-content {
	background-color: #eff1f5 !important; /* Base */
}

/* Folder list */
#mailboxlist li {
	margin: 2px 6px;
	border-radius: 8px;
	overflow: hidden;
}

#mailboxlist li > a,
#mailboxlist li > span.listing {
	border-radius: 8px;
	color: #4c4f69 !important; /* Text */
}

#mailboxlist li.selected > a,
#mailboxlist li.selected {
	border-radius: 8px;
	background-color: #dce0f5 !important;
	box-shadow: inset 3px 0 0 #1e66f5; /* Blue */
	color: #1e66f5 !important;
}

#mailboxlist li:hover > a {
	background-color: #e6e9ef !important; /* Mantle */
	border-radius: 8px;
}

/* Message list rows */
#messagelist tbody tr {
	border-radius: 8px;
	background-color: #eff1f5;
}

#messagelist tbody tr td {
	border-top: none !important;
	color: #4c4f69 !important; /* Text */
}

#messagelist tbody tr:hover {
	background-color: #e6e9ef !important; /* Mantle */
}

#messagelist tbody tr.selected,
#messagelist tbody tr.focused {
	background-color: #dce0f5 !important;
	box-shadow: inset 3px 0 0 #1e66f5; /* Blue */
}

#messagelist tbody tr.unread .subject,
#messagelist tbody tr.unread .fromto {
	font-weight: 600;
	color: #1e1e2e !important;
}

/* Toolbar */
#layout-topbar,
.toolbar-container {
	background-color: #e6e9ef !important; /* Mantle */
}

.toolbar .button,
.toolbar-list .button {
	border-radius: 8px;
	color: #4c4f69 !important;
}

.toolbar .button:hover,
.toolbar-list .button:hover {
	background-color: #dce0e8 !important;
}

/* Primary buttons across the app */
.button.mainaction,
button.mainaction,
.formbuttons button.mainaction {
	background-color: #1e66f5 !important;
	color: #eff1f5 !important;
	border-radius: 8px !important;
	border: none !important;
}

.button.mainaction:hover,
button.mainaction:hover {
	background-color: #0a55e0 !important;
}

/* Taskmenu: Catppuccin Latte accents */
#taskmenu {
	background: #dce0e8 !important; /* Crust, redundant safety */
}

#taskmenu a {
	color: #4c4f69 !important; /* Text */
}

#taskmenu a.selected,
#taskmenu a.selected:hover,
#taskmenu a:hover,
#taskmenu a:focus {
	background-color: #ccd0da !important; /* Surface0 */
	color: #1e66f5 !important;
}

#taskmenu a.compose:before,
#taskmenu a.mail:before,
#taskmenu a.contacts:before,
#taskmenu a.settings:before,
#taskmenu a.theme:before,
#taskmenu a.about:before {
	font-family: unset !important;
	content: "" !important;
	background-color: #1e66f5 !important; /* Blue */
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

#taskmenu a.compose:before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7'/%3E%3Cpath d='M18.5 2.5a2.12 2.12 0 013 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7'/%3E%3Cpath d='M18.5 2.5a2.12 2.12 0 013 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E");
}

#taskmenu a.mail:before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M22 6l-10 7L2 6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M22 6l-10 7L2 6'/%3E%3C/svg%3E");
}

#taskmenu a.contacts:before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 00-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 010 7.75'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 00-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 010 7.75'/%3E%3C/svg%3E");
}

#taskmenu a.settings:before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06A1.65 1.65 0 004.6 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06A1.65 1.65 0 009 4.6a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06A1.65 1.65 0 004.6 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06A1.65 1.65 0 009 4.6a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z'/%3E%3C/svg%3E");
}

#taskmenu a.theme:before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z'/%3E%3C/svg%3E");
}

#taskmenu a.about:before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 015.83 1c0 2-3 2-3 5'/%3E%3Cline x1='12' y1='17.5' x2='12' y2='17.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 015.83 1c0 2-3 2-3 5'/%3E%3Cline x1='12' y1='17.5' x2='12' y2='17.5'/%3E%3C/svg%3E");
}

#taskmenu a.logout:before {
	font-family: unset !important;
	content: "" !important;
	background-color: #d20f39 !important; /* Red */
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M18.36 6.64a9 9 0 11-12.73 0'/%3E%3Cline x1='12' y1='2' x2='12' y2='12'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M18.36 6.64a9 9 0 11-12.73 0'/%3E%3Cline x1='12' y1='2' x2='12' y2='12'/%3E%3C/svg%3E");
}

#taskmenu a.logout,
#taskmenu a.logout:hover {
	color: #d20f39 !important; /* Red */
}

/* Scrollbar accent */
#layout-sidebar ::-webkit-scrollbar-thumb,
#layout-list ::-webkit-scrollbar-thumb {
	background-color: #bcc0cc; /* Surface1 */
	border-radius: 8px;
}
