/* Inherit all elastic styles, then apply minimal Gmail-inspired tweaks.
   Rule of thumb: NEVER touch margins/padding/width/height on layout
   containers - elastic positions them absolutely. Colors and radii only. */
@import url("../../elastic/styles/styles.min.css");

:root {
	--gm-accent: #1a73e8;
	--gm-accent-hover: #1765cc;
	--gm-accent-soft: #e8f0fe;
	--gm-selected: #c2e7ff;
	--gm-hover: #f1f3f4;
	--gm-red: #d93025;
	--gm-red-soft: #fce8e6;
	--gm-border: #e8eaed;
	--gm-text: #202124;
	--gm-text-muted: #5f6368;
	--gm-font: "Google Sans", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

body, html, input, textarea, select, button {
	font-family: var(--gm-font);
	-webkit-font-smoothing: antialiased;
}

/* --- Primary / action buttons: Gmail-style pills --- */
.btn-primary, button.primary, a.button.primary,
.formbuttons button.mainaction, button.btn.primary {
	background: var(--gm-accent);
	border-color: var(--gm-accent);
	color: #fff;
	border-radius: 24px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
}

.btn-primary:hover, button.primary:hover, a.button.primary:hover,
button.btn.primary:hover {
	background: var(--gm-accent-hover);
	border-color: var(--gm-accent-hover);
}

.btn:not(.btn-link), button.btn:not(.btn-link) {
	font-family: var(--gm-font);
}

/* --- Message list row hover/selection (no height changes) --- */
#messagelist tbody tr:hover,
.messagelist tbody tr:hover,
.listing tbody tr:hover {
	background-color: var(--gm-hover);
}

#messagelist tbody tr.selected,
.messagelist tbody tr.selected,
.listing tbody tr.selected {
	background-color: var(--gm-selected) !important;
}

#messagelist tbody tr.unread,
.messagelist tbody tr.unread {
	font-weight: 600;
}

/* --- Folder list hover/selection --- */
#mailboxlist li a:hover,
.treelist li a:hover {
	background-color: var(--gm-hover);
}

#mailboxlist li.selected > a,
.treelist li.selected > a {
	background-color: var(--gm-red-soft);
	color: var(--gm-red);
	font-weight: 600;
}

/* --- Task menu (left sidebar) selected state --- */
#taskmenu a.selected,
#taskmenu a.active,
.taskmenu a.selected {
	color: var(--gm-red);
}

/* --- Search bar rounding only --- */
#quicksearchbar,
.searchbar input,
form.searchbar {
	border-radius: 20px;
}

/* --- Input focus ring, Gmail style --- */
input[type="text"]:focus, input[type="email"]:focus,
input[type="password"]:focus, input[type="search"]:focus,
textarea:focus, select:focus {
	border-color: var(--gm-accent);
	box-shadow: 0 0 0 1px var(--gm-accent);
	outline: none;
}

/* --- Scrollbars --- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
	background: #dadce0;
	border-radius: 10px;
	border: 2px solid transparent;
	background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: #bdc1c6; background-clip: padding-box; }

/* --- Link color --- */
a { color: var(--gm-accent); }
a:hover { color: var(--gm-accent-hover); }

/* --- Dark mode adjustments --- */
@media (prefers-color-scheme: dark) {
	:root {
		--gm-accent: #8ab4f8;
		--gm-accent-hover: #aecbfa;
		--gm-accent-soft: #1f2b3d;
		--gm-selected: #1f4068;
		--gm-hover: #303134;
		--gm-red: #f28b82;
		--gm-red-soft: #3c1f1c;
		--gm-border: #3c4043;
		--gm-text: #e8eaed;
		--gm-text-muted: #9aa0a6;
	}
}