/**
 * PlusKode Webmail - global modern UI overrides
 * Loaded on every page (after styles.css) via includes/layout.html.
 * Non-destructive: tweaks accent color, typography, radius and shadows.
 */

:root {
	--pk-primary: #2563eb;
	--pk-primary-dark: #1d4ed8;
	--pk-primary-light: #3b82f6;
	--pk-radius: 10px;
}

/* ---- Typography ---- */
body,
button,
input,
select,
textarea,
.form-control,
.listing,
.menu a {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto,
		"Helvetica Neue", Arial, sans-serif !important;
}

/* ---- Left task menu: modern navy ---- */
#layout-menu,
#layout-menu #taskmenu {
	background: #0f1b33 !important;
	background: linear-gradient(180deg, #16264a 0%, #0e1830 100%) !important;
}

#layout-menu a.button.compose,
#taskmenu a.compose {
	color: #fff !important;
	background: linear-gradient(135deg, var(--pk-primary-light), var(--pk-primary)) !important;
	border-radius: 12px !important;
	margin: .35rem auto !important;
}

#taskmenu a.button:hover {
	background-color: rgba(255, 255, 255, 0.12) !important;
}

#taskmenu a.button.selected {
	background-color: rgba(255, 255, 255, 0.16) !important;
}

/* ---- Links ---- */
a,
.boxcontent a {
	color: var(--pk-primary);
}

a:hover {
	color: var(--pk-primary-dark);
}

/* ---- Primary buttons ---- */
.btn-primary,
button.btn-primary,
input.btn-primary,
a.btn-primary,
.formbuttons .btn.btn-primary,
button.btn.btn-primary {
	background: linear-gradient(135deg, var(--pk-primary-light) 0%, var(--pk-primary) 100%) !important;
	border-color: var(--pk-primary) !important;
	border-radius: var(--pk-radius) !important;
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.28) !important;
	transition: filter .15s ease, box-shadow .2s ease, transform .12s ease;
}

.btn-primary:hover,
button.btn-primary:hover,
.formbuttons .btn.btn-primary:hover {
	filter: brightness(1.06);
	box-shadow: 0 6px 16px rgba(37, 99, 235, 0.38) !important;
}

.btn,
.button {
	border-radius: var(--pk-radius) !important;
}

/* ---- Inputs ---- */
.form-control,
input.form-control,
select.form-control,
textarea.form-control,
.ui-input {
	border-radius: 8px !important;
}

.form-control:focus {
	border-color: var(--pk-primary) !important;
	box-shadow: 0 0 0 .18rem rgba(37, 99, 235, 0.22) !important;
}

/* ---- Popovers, dialogs, menus ---- */
.popupmenu,
.popover,
.ui-dialog,
.ui-dialog .ui-dialog-content,
.menu.popupmenu {
	border-radius: 14px !important;
	overflow: hidden;
}

.ui-dialog {
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28) !important;
}

/* ---- Selected list row accent ---- */
.listing tr.selected > td,
.listing li.selected,
.listing li.selected > a {
	box-shadow: inset 3px 0 0 var(--pk-primary);
}

/* ---- Badges / counters ---- */
.listing .unreadcount,
span.badge,
.folderlist .unreadcount {
	background-color: var(--pk-primary) !important;
}

/* ---- Toolbar bottom border accent ---- */
.toolbar {
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.06);
}

/* =====================================================================
   Per-page modern polish (applies across all tasks/pages)
   ===================================================================== */

/* ---- Column headers: softer, subtle shadow instead of hard border ---- */
#layout > div > .header {
	border-bottom: 0 !important;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
}

html.dark-mode #layout > div > .header {
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ---- Search bar: modern rounded pill ---- */
.searchbar {
	padding: .35rem .5rem !important;
}

.searchbar form {
	border-radius: 999px !important;
	background: rgba(127, 127, 127, 0.12) !important;
	border: 1px solid transparent !important;
	overflow: hidden;
	transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.searchbar form:focus-within {
	background: rgba(127, 127, 127, 0.06) !important;
	border-color: var(--pk-primary) !important;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
}

.searchbar input,
.searchbar .searchfield {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* ---- List rows: breathing room + smooth hover ---- */
.listing tbody tr:not(.selected):hover > td,
.listing li:not(.selected):hover > a {
	background-color: rgba(127, 127, 127, 0.08) !important;
}

.listing.messagelist tbody tr > td {
	padding-top: .25rem !important;
	padding-bottom: .25rem !important;
}

/* Stronger, rounded selection accent */
.listing tr.selected > td,
.listing li.selected,
.listing li.selected > a {
	box-shadow: inset 3px 0 0 var(--pk-primary) !important;
}

/* ---- Sidebar / folder list: rounded pill items ---- */
.folderlist li a,
.listing.iconized li a,
#settings-menu li a,
.treelist li a {
	border-radius: 10px !important;
	margin: 2px 6px !important;
	width: auto !important;
	padding-left: .6rem !important;
	transition: background .15s ease;
}

.folderlist li.selected > a,
.listing.iconized li.selected > a,
.treelist li.selected > a {
	background-color: rgba(37, 99, 235, 0.14) !important;
	color: var(--pk-primary) !important;
	font-weight: 600;
}

.folderlist li:not(.selected) > a:hover,
.listing.iconized li:not(.selected) > a:hover {
	background-color: rgba(127, 127, 127, 0.10) !important;
}

/* ---- Modern thin scrollbars ---- */
*::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

*::-webkit-scrollbar-thumb {
	background: rgba(127, 127, 127, 0.35);
	border-radius: 8px;
	border: 2px solid transparent;
	background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
	background: rgba(127, 127, 127, 0.55);
	background-clip: content-box;
}

*::-webkit-scrollbar-track {
	background: transparent;
}

/* ---- Avatar / contact photo: circular in message view ---- */
#message-header .contactphoto,
.contactphoto,
#contacthead .contactphoto {
	border-radius: 50% !important;
	object-fit: cover;
	background-color: rgba(127, 127, 127, 0.12);
}

/* =====================================================================
   Message list + reading pane (details) refinements
   ===================================================================== */

/* Unread indicator dot -> brand blue */
.messagelist td.subject span.msgicon.status.unread:before,
.messagelist tr.unread td.subject span.msgicon.status.unread:before {
	color: var(--pk-primary) !important;
}

/* Unread subject a touch stronger */
.messagelist tr.unread td.subject span.subject {
	font-weight: 700 !important;
}

/* Selected message row: cleaner brand-tinted highlight */
.messagelist tr.selected > td,
.contactlist tr.selected > td,
.contactlist li.selected {
	background-color: rgba(37, 99, 235, 0.12) !important;
	color: inherit !important;
}

html.dark-mode .messagelist tr.selected > td,
html.dark-mode .contactlist tr.selected > td {
	background-color: rgba(56, 132, 255, 0.20) !important;
}

/* ---- Reading pane / message header as a clean card ---- */
#message-header {
	padding: 1rem 1.25rem !important;
	border-radius: 14px !important;
	background: rgba(127, 127, 127, 0.05) !important;
	margin: .5rem .75rem !important;
	box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.12);
}

#message-header h2.subject {
	font-size: 1.3rem !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	margin-bottom: .6rem !important;
}

#message-header .contactphoto {
	width: 44px !important;
	height: 44px !important;
}

/* Header action links spacing */
#message-header .message-links a,
#message-header .header-links a {
	margin-right: .9rem;
}

/* ---- Toolbar icon buttons: rounded hover ---- */
.toolbar a.button:hover,
.header a.button:hover {
	background-color: rgba(127, 127, 127, 0.12) !important;
	border-radius: 10px !important;
}