/* Karavango skin — Gmail-style layout on top of Roundcube Elastic.
   Loaded after elastic's styles.css; desktop rules are scoped to html.layout-large. */

@font-face {
	font-family: 'KM Cormorant';
	src: url(../fonts/cormorant-normal-latin.woff2) format('woff2');
	font-weight: 300 700;
	font-display: swap;
}

:root {
	--km-bg: #f6f8fc;
	--km-surface: #fff;
	--km-ink: #1f1f1f;
	--km-ink-2: #444746;
	--km-line: #e5e9ef;
	--km-row-read: #f2f6fc;
	--km-hover: rgba(68, 71, 70, .08);
	--km-active: #d3e3fd;
	--km-active-ink: #041e49;
	--km-compose: #c2e7ff;
	--km-compose-ink: #001d35;
	--km-search: #e9eef6;
	--km-primary: #0b57d0;
	--km-ember: #e08a4a;
	--km-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

/* ---------- palette, every screen size ---------- */

body, .ui-widget { color: var(--km-ink); }
a, .btn-link { color: var(--km-primary); }
::selection { background: var(--km-active); color: var(--km-active-ink); }
.btn-primary, .btn-primary:not(:disabled):not(.disabled):active, .ui-dialog .btn-primary {
	background: var(--km-primary); border-color: var(--km-primary); border-radius: 20px; padding-left: 1.25rem; padding-right: 1.25rem;
}
.btn-primary:hover, .btn-primary:focus { background: #0842a0; border-color: #0842a0; box-shadow: var(--km-shadow); }
.btn-secondary { border-radius: 20px; }
:focus-visible { outline: 2px solid var(--km-primary); outline-offset: 1px; }
.km-wordmark { font: 500 26px/1 'KM Cormorant', Georgia, serif; color: var(--km-ink); letter-spacing: -.01em; white-space: nowrap; }
.km-account, .km-compose, .km-back, .km-wordmark { display: none; }
html.layout-large .km-wordmark { display: block; }
#taskmenu a.theme { display: none; }

/* ---------- login ---------- */

body.task-login { background: var(--km-bg); }
body.task-login #layout { background: var(--km-bg); }
body.task-login #layout-content { background: transparent; }
body.task-login #logo { width: 64px; height: 64px; margin-bottom: 1.5rem; }
body.task-login #login-form {
	background: var(--km-surface); border-radius: 28px; padding: 2.5rem 2.5rem 2rem; box-shadow: var(--km-shadow);
	max-width: 26rem; width: 100%;
}
body.task-login #login-form::before {
	content: "Karavango"; display: block; text-align: center; margin: 0 0 1.5rem;
	font: 500 2.25rem/1 'KM Cormorant', Georgia, serif; color: var(--km-ink);
}
body.task-login #login-form .form-control, body.task-login #login-form .input-group-text { height: 3rem; }
body.task-login #login-form .btn-primary { height: 3rem; font-weight: 500; }
body.task-login #login-footer { color: var(--km-ink-2); }

/* ---------- desktop shell ---------- */

html.layout-large:not(.iframe) body:not(.task-login) { background: var(--km-bg); }
html.layout-large:not(.iframe) body:not(.task-login) #layout { background: var(--km-bg); padding-top: 64px; }

/* top bar: logo + wordmark */
html.layout-large #layout-menu { width: 72px; min-width: 72px; background: transparent; border: 0; }
html.layout-large #layout-menu .popover-header {
	display: flex !important; position: fixed; top: 0; left: 0; height: 64px; width: 256px; padding: 0 0 0 18px; gap: 12px;
	align-items: center; background: transparent; border: 0; z-index: 20;
}
html.layout-large #layout-menu .popover-header #logo { width: 36px; height: 36px; margin: 0; padding: 0; }
html.layout-large #layout-menu .popover-header .cancel { display: none; }

/* top bar: account */
html.layout-large .km-account {
	display: flex; position: fixed; top: 0; right: 20px; height: 64px; align-items: center; gap: 12px; z-index: 20;
	font-size: 14px; color: var(--km-ink-2);
}
html.layout-large .km-avatar {
	width: 32px; height: 32px; border-radius: 50%; background: var(--km-ember); color: #fff; font-weight: 500;
	display: flex; align-items: center; justify-content: center;
}

/* app rail */
html.layout-large #taskmenu { background: transparent; padding-top: 4px; }
html.layout-large #taskmenu .action-buttons { display: none; }
html.layout-large #taskmenu a {
	color: var(--km-ink-2); background: transparent !important; height: auto; padding: 6px 0 10px; font-size: 12px; line-height: 16px;
}
html.layout-large #taskmenu a::before {
	display: block; float: none; width: 56px; height: 32px; line-height: 32px; margin: 0 auto 4px; border-radius: 16px;
	font-size: 18px; text-align: center; transition: background-color .15s;
}
html.layout-large #taskmenu a:hover::before { background: var(--km-hover); }
html.layout-large #taskmenu a.selected { color: var(--km-active-ink); font-weight: 700; }
html.layout-large #taskmenu a.selected::before { background: var(--km-active); }
html.layout-large #taskmenu a.logout { color: var(--km-ink-2); }
html.layout-large #taskmenu a .inner { overflow: hidden; text-overflow: ellipsis; padding: 0 4px; }

/* columns become cards */
html.layout-large:not(.iframe) body:not(.task-login) #layout > .listbox,
html.layout-large:not(.iframe) body:not(.task-login) #layout > #layout-content {
	background: var(--km-surface); border: 0; border-radius: 16px; margin: 0 16px 16px 0; overflow: hidden;
}
html.layout-large:not(.iframe) #layout > div > .header { background: var(--km-surface); border-bottom: 1px solid var(--km-line); }
html.layout-large:not(.iframe) #layout > div > .footer { background: var(--km-surface); border-top: 1px solid var(--km-line); }
html.layout-large .column-resizer { display: none; }

/* sidebar */
html.layout-large:not(.iframe) #layout > #layout-sidebar {
	width: 256px; min-width: 256px; max-width: 256px; background: transparent; border-radius: 0; margin: 0;
}
html.layout-large #layout-sidebar > .header { display: none; }
html.layout-large:not(.iframe) #layout > #layout-sidebar > .footer { background: transparent; border: 0; }
html.layout-large #layout-sidebar .scroller { background: transparent; }
html.layout-large .km-compose {
	display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; flex: 0 0 auto;
	height: 56px; padding: 0 24px 0 16px; margin: 8px 0 16px 8px; border-radius: 16px;
	background: var(--km-compose); color: var(--km-compose-ink); font-size: 14px; font-weight: 500; text-decoration: none;
	transition: box-shadow .15s;
}
html.layout-large .km-compose:hover { box-shadow: var(--km-shadow); color: var(--km-compose-ink); text-decoration: none; }
html.layout-large .km-compose::before {
	content: ""; width: 24px; height: 24px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23001d35' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16v4z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* folder list */
html.layout-large .folderlist, html.layout-large .folderlist li, html.layout-large .folderlist li ul { background: transparent; border: 0; }
html.layout-large .folderlist li > a, html.layout-large .folderlist li > div > a {
	height: 32px; line-height: 32px; margin-right: 16px; padding-left: 26px; border-radius: 0 16px 16px 0;
	color: var(--km-ink); font-size: 14px; font-weight: 400; background: transparent; border: 0;
}
html.layout-large .folderlist li > a::before { color: var(--km-ink-2); font-size: 16px; width: 20px; margin-right: 18px; }
html.layout-large .folderlist li > a:hover { background: var(--km-hover); }
html.layout-large .folderlist li.selected > a { background: var(--km-active); color: var(--km-active-ink); font-weight: 700; }
html.layout-large .folderlist li.selected > a::before { color: var(--km-active-ink); }
html.layout-large .folderlist li.unread > a { font-weight: 700; }
html.layout-large .folderlist li .unreadcount {
	background: transparent; color: inherit; font-size: 12px; font-weight: 700; min-width: 0; padding: 0; margin-right: 12px;
}

/* header toolbars: icon buttons without captions */
html.layout-large:not(.iframe) #layout > div > .header { height: 48px; min-height: 48px; padding: 0 8px; align-items: center; }
html.layout-large:not(.iframe) #layout .header .toolbar { align-items: center; }
html.layout-large:not(.iframe) #layout .header .toolbar a,
html.layout-large:not(.iframe) #layout .header a.toolbar-button {
	width: 40px; min-width: 40px; height: 40px; padding: 0; margin: 0 2px; border-radius: 50%; color: var(--km-ink-2);
	display: flex; align-items: center; justify-content: center; position: relative;
}
html.layout-large:not(.iframe) #layout .header .toolbar a .inner,
html.layout-large:not(.iframe) #layout .header a.toolbar-button .inner { display: none; }
html.layout-large:not(.iframe) #layout .header .toolbar a::before,
html.layout-large:not(.iframe) #layout .header a.toolbar-button::before { margin: 0; float: none; font-size: 17px; height: auto; line-height: 1; }
html.layout-large:not(.iframe) #layout .header .toolbar a:not(.disabled):hover,
html.layout-large:not(.iframe) #layout .header a.toolbar-button:hover { background: var(--km-hover); }
html.layout-large:not(.iframe) #layout .header .toolbar a.disabled { opacity: .38; }
html.layout-large:not(.iframe) #layout .header .toolbar .dropbutton { display: flex; align-items: center; }
html.layout-large:not(.iframe) #layout .header .toolbar .dropbutton a.dropdown { width: 18px; min-width: 18px; margin-left: -6px; }

/* ---------- mail: list instead of three panes ---------- */

html.layout-large body.task-mail.action-none #layout > #layout-list {
	flex: 1 1 auto; width: auto; min-width: 0; max-width: none;
}
html.layout-large body.task-mail.action-none #layout > #layout-content { display: none; }
html.layout-large.km-reading body.task-mail.action-none #layout > #layout-list {
	flex: 0 0 0; width: 0; min-width: 0; margin: 0; overflow: visible; background: transparent;
}
html.layout-large.km-reading body.task-mail.action-none #layout-list > *:not(.searchbar):not(#searchmenu) { display: none !important; }
html.layout-large.km-reading body.task-mail.action-none #layout > #layout-content { display: flex; flex: 1 1 auto; }
html.layout-large body.task-mail.action-none #layout-list > .header .header-title { display: none; }
html.layout-large body.task-mail.action-none #layout-list > .header .toolbar { margin-left: 0; flex: 1; justify-content: flex-start; }

html.layout-large .km-back { display: flex; width: 40px; height: 40px; border-radius: 50%; align-items: center; justify-content: center; margin-right: 8px; }
html.layout-large .km-back:hover { background: var(--km-hover); }
html.layout-large .km-back::before {
	content: ""; width: 20px; height: 20px; margin: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23444746' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H5'/%3E%3Cpath d='M11 6l-6 6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;
}
html.layout-large body.task-mail.action-none #layout-content > .header .toolbar { margin: 0; flex: 1; justify-content: flex-start; }

/* search pill in the top bar */
html.layout-large body.task-mail.action-none #layout-list > .searchbar {
	position: fixed; top: 8px; left: 272px; width: min(720px, calc(100vw - 272px - 300px)); height: 48px; z-index: 21;
	background: var(--km-search); border: 0; border-radius: 24px; padding: 0 8px 0 4px; align-items: center;
	transition: background-color .15s, box-shadow .15s;
}
html.layout-large body.task-mail.action-none #layout-list > .searchbar:focus-within { background: var(--km-surface); box-shadow: var(--km-shadow); }
html.layout-large body.task-mail.action-none #layout-list > .searchbar input {
	background: transparent; height: 48px; font-size: 16px; color: var(--km-ink);
}
html.layout-large body.task-mail.action-none #layout-list > .searchbar a.button { color: var(--km-ink-2); }
html.layout-large body.task-mail.action-none #searchmenu:not(.hidden) {
	position: fixed; top: 60px; left: 272px; width: min(720px, calc(100vw - 272px - 300px)); max-height: 70vh; z-index: 21;
	background: var(--km-surface); border-radius: 16px; box-shadow: var(--km-shadow); border: 0;
}

/* message rows: one line each */
html.layout-large body.task-mail.action-none table.messagelist,
html.layout-large body.task-mail.action-none table.messagelist tbody { display: block; width: 100%; }
html.layout-large body.task-mail.action-none table.messagelist thead,
html.layout-large body.task-mail.action-none table.messagelist.fixedcopy { display: none; }
html.layout-large body.task-mail.action-none .messagelist tr.message {
	display: flex; align-items: center; height: 40px; position: relative; cursor: pointer;
	background: var(--km-row-read); border: 0; box-shadow: inset 0 -1px 0 var(--km-line);
}
html.layout-large body.task-mail.action-none .messagelist tr.message.unread { background: var(--km-surface); }
html.layout-large body.task-mail.action-none .messagelist tr.message:hover { box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, var(--km-shadow); z-index: 1; }
html.layout-large body.task-mail.action-none .messagelist tr.message.selected,
html.layout-large body.task-mail.action-none .messagelist tr.message.selected.unread { background: #c2dbff; }
html.layout-large body.task-mail.action-none .messagelist tr.message td {
	display: flex; align-items: center; height: 40px; padding: 0; border: 0; background: transparent !important; position: static;
}
html.layout-large body.task-mail.action-none .messagelist td.selection { order: 0; flex: 0 0 44px; justify-content: flex-end; padding-right: 6px; }
html.layout-large body.task-mail.action-none .messagelist td.selection input { margin: 0; width: 16px; height: 16px; accent-color: var(--km-primary); }
html.layout-large body.task-mail.action-none .messagelist td.flags { order: 1; flex: 0 0 36px; width: auto; justify-content: center; }
html.layout-large body.task-mail.action-none .messagelist td.flags .flag { position: static; margin: 0; }
html.layout-large body.task-mail.action-none .messagelist td.flags .attachment { display: none; }
html.layout-large body.task-mail.action-none .messagelist td.subject { order: 2; flex: 1 1 auto; min-width: 0; margin: 0; gap: 0; }
html.layout-large body.task-mail.action-none .messagelist td.subject > span {
	display: block; position: static; margin: 0; padding: 0; height: auto; line-height: 20px; font-size: 14px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--km-ink); float: none; width: auto; max-width: none;
}
html.layout-large body.task-mail.action-none .messagelist td.subject > .fromto { order: 1; flex: 0 0 200px; padding-right: 24px; }
html.layout-large body.task-mail.action-none .messagelist td.subject > .subject { order: 2; flex: 1 1 auto; min-width: 0; }
html.layout-large body.task-mail.action-none .messagelist td.subject > .date { order: 3; flex: 0 0 auto; padding: 0 16px 0 12px; font-size: 12px; color: var(--km-ink-2); }
html.layout-large body.task-mail.action-none .messagelist td.subject > .size { display: none; }
html.layout-large body.task-mail.action-none .messagelist td.subject .msgicon { display: none; }
html.layout-large body.task-mail.action-none .messagelist td.subject .subject a { color: inherit; font-weight: 400; text-decoration: none; }
html.layout-large body.task-mail.action-none .messagelist td.subject .fromto,
html.layout-large body.task-mail.action-none .messagelist td.subject .fromto * { font-weight: 400; color: var(--km-ink); }
html.layout-large body.task-mail.action-none .messagelist tr.unread td.subject .fromto,
html.layout-large body.task-mail.action-none .messagelist tr.unread td.subject .fromto *,
html.layout-large body.task-mail.action-none .messagelist tr.unread td.subject .subject a,
html.layout-large body.task-mail.action-none .messagelist tr.unread td.subject > .date { font-weight: 700; color: var(--km-ink); }
html.layout-large body.task-mail.action-none #layout-list > .footer { height: 44px; min-height: 44px; border-top: 0; color: var(--km-ink-2); font-size: 12px; }

/* ---------- message view (inside the frame) ---------- */

html.iframe body.task-mail #message-header { padding: 20px 24px 12px 72px; }
html.iframe body.task-mail #message-header h2.subject { font-size: 22px; line-height: 28px; font-weight: 400; color: var(--km-ink); }
html.iframe body.task-mail #messagebody { padding-left: 72px; padding-right: 24px; }

/* ---------- pass 2: elastic overrides that need more weight ---------- */

html.layout-large #layout-menu .popover-header,
html.layout-large #taskmenu .special-buttons { background: transparent !important; }
html.layout-large #taskmenu .special-buttons a { color: var(--km-ink-2); }

html.layout-large:not(.iframe) #layout .header ul.toolbar {
	display: flex !important; align-items: center; height: 40px; margin: 0; padding: 0; list-style: none; overflow: visible; border: 0;
}
html.layout-large:not(.iframe) #layout .header ul.toolbar > li { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; height: 40px; }
html.layout-large:not(.iframe) #layout .header .toolbar a .inner,
html.layout-large:not(.iframe) #layout .header a.toolbar-button .inner { display: none !important; }
html.layout-large body.task-mail.action-none #layout-list > .header ul.toolbar,
html.layout-large body.task-mail.action-none #layout-content > .header ul.toolbar { flex: 1 1 auto; justify-content: flex-start; }

html.layout-large body.task-mail.action-none .messagelist td.subject { flex-wrap: nowrap; }

/* stars */
html.layout-large body.task-mail.action-none .messagelist td.flags .flag { visibility: visible; display: flex; height: 40px; align-items: center; }
html.layout-large body.task-mail.action-none .messagelist td.flags .flag span {
	display: block; width: 20px; height: 20px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c4c7c5' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 3.6l2.6 5.3 5.8.8-4.2 4.1 1 5.8L12 16.9l-5.2 2.7 1-5.8-4.2-4.1 5.8-.8z'/%3E%3C/svg%3E") center/contain no-repeat;
}
html.layout-large body.task-mail.action-none .messagelist td.flags .flag span:hover { filter: brightness(.7); }
html.layout-large body.task-mail.action-none .messagelist td.flags .flag span.flagged {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f4b400' stroke='%23f4b400' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 3.6l2.6 5.3 5.8.8-4.2 4.1 1 5.8L12 16.9l-5.2 2.7 1-5.8-4.2-4.1 5.8-.8z'/%3E%3C/svg%3E");
}
html.layout-large body.task-mail.action-none .messagelist td.flags .flag span::before { display: none !important; }
html.layout-large body.task-mail.action-none .messagelist tr.flagged td.subject span,
html.layout-large body.task-mail.action-none .messagelist tr.flagged td.subject span.subject a { color: var(--km-ink); }

/* pager */
html.layout-large body.task-mail.action-none #layout-list > .footer { justify-content: flex-end; gap: 4px; padding: 0 16px; }
html.layout-large body.task-mail.action-none #layout-list > .footer > * { flex: 0 0 auto; }
html.layout-large body.task-mail.action-none #layout-list > .footer a { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--km-ink-2); }
html.layout-large body.task-mail.action-none #layout-list > .footer a:not(.disabled):hover { background: var(--km-hover); }
html.layout-large body.task-mail.action-none #layout-list > .footer .pagenav-text { order: -1; margin-right: 8px; }

/* ---------- pass 3 ---------- */
html.layout-large:not(.iframe) #layout .header ul.toolbar,
html.layout-large:not(.iframe) #layout .header ul.toolbar > li { background: transparent; box-shadow: none; border: 0; }
html.layout-large #taskmenu a::before { width: 52px; }
html.layout-large body.task-mail.action-none #layout-list > .footer { align-items: center; }
html.layout-large body.task-mail.action-none #layout-list > .footer > * { margin: 0 !important; align-self: center; }
html.layout-large body.task-mail.action-none #layout-list > .footer a { padding: 0; line-height: 1; }
html.layout-large body.task-mail.action-none #layout-list > .footer a::before { margin: 0; float: none; line-height: 1; height: auto; }
html.layout-large body.task-mail.action-none #layout-list > .footer input { height: 28px; width: 40px; border-radius: 14px; text-align: center; }