/**
 * Cloudesta skin for Roundcube — Gmail-style layout on the Elastic base,
 * recolored to Cloudesta's brand.
 *
 * Compile with (run in the Roundcube root directory):
 *     bin/updatecss.sh --dir skins/cloudesta
 *
 * In LESS, the LAST definition of a variable wins, so importing Elastic
 * first and our brand file second cleanly recolors the whole UI.
 */

/* 1) Pull in the full Elastic stylesheet */
@import "../../elastic/styles/styles.less";

/* 2) Override Elastic's colors with the Cloudesta brand */
@import "_brand.less";

/* 3) Gmail-feel layout polish (cosmetic, safe to tune) ----------------- */

:root {
    --cloudesta-radius: 12px;
}

/* Slightly tighter, Gmail-like base text size */
html { font-size: 14px; }

/* Airy, rounded message rows with subtle brand-tinted hover/selection */
#messagelist tr,
.messagelist tbody tr {
    border-radius: var(--cloudesta-radius);
}
#messagelist tr:hover,
.messagelist tbody tr:hover {
    background-color: fade(@brand, 6%);
}
#messagelist tr.selected,
.messagelist tbody tr.selected,
.messagelist tbody tr.focused {
    background-color: fade(@brand, 12%);
}

/* Gmail-style pill Compose button */
.menu a.compose,
a.button.compose,
.toolbar a.compose,
.compose-button {
    border-radius: 999px;
}

/* Cleaner panels: white lists, softer borders, card-like reading pane */
.boxlistcontent,
.messagelist          { background: #fff; }
.layout > div         { border-color: @color-border; }
#messagecontframe,
.messageview          { border-radius: var(--cloudesta-radius); }

/* Rounded search box, like Gmail's pill search */
.searchbar,
.searchfilterbar input,
form.searchbox input  { border-radius: 999px; }