/* Lira Holistic brand on top of Roundcube elastic: beige #bc9f87, deep #8a6c55, page #f9f7f6, Jost */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600&display=swap');

:root { --lira: #bc9f87; --lira-deep: #8a6c55; --lira-bg: #f9f7f6; --lira-select: #f1e9e2; }

body, input, select, textarea, button, .btn, .popover, .dropdown-menu, .ui-dialog, .toolbar a {
  font-family: 'Jost', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Login screen */
html:not(.dark-mode) body.task-login, html:not(.dark-mode) body.task-login #layout-content { background: var(--lira-bg); }
#rcmloginsubmit { text-transform: uppercase; letter-spacing: .1em; border-radius: 8px; font-weight: 500; }
#login-footer { color: var(--lira-deep); }

/* Primary buttons (blue → beige) */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:disabled, .btn-primary.disabled {
  background-color: var(--lira) !important; border-color: var(--lira) !important; color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active:focus {
  background-color: var(--lira-deep) !important; border-color: var(--lira-deep) !important;
  box-shadow: 0 0 0 .2rem rgba(188,159,135,.35) !important;
}

/* Inputs and links */
.form-control:focus, .custom-select:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--lira) !important; box-shadow: 0 0 0 .2rem rgba(188,159,135,.25) !important;
}
a, a:hover, .link, .btn-link { color: var(--lira-deep); }
html.dark-mode a, html.dark-mode .link { color: var(--lira); }

/* Left menu, selected rows, counters */
#layout-menu .menu a.selected, #layout-menu .menu a:hover, #layout-menu .menu a:focus { color: var(--lira) !important; }
.listing li.selected, .listing li.selected > a, .listing li.selected > div,
.records-table tr.selected td, .records-table tr.selected:hover td {
  background-color: var(--lira-select) !important;
}
html.dark-mode .listing li.selected, html.dark-mode .listing li.selected > a,
html.dark-mode .records-table tr.selected td { background-color: #4a4038 !important; }
.listing li.focused, .records-table tr.focused td { outline-color: var(--lira) !important; }
.unreadcount, .counter, .badge-primary, .listing li .unreadcount { background-color: var(--lira) !important; color: #fff !important; }
.records-table tr.unread td.subject .subject a { color: inherit; }
.toolbar a.selected, .toolbar a:hover, .header a.button:hover { color: var(--lira-deep); }
input[type=checkbox].custom-control-input:checked ~ .custom-control-label::before,
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--lira) !important; border-color: var(--lira) !important;
}

/* Leftovers of the elastic blue (#37beff / dark #006a9d) */
a.compose, a.compose .inner, #layout-menu a.compose, #layout-menu a.compose:before { color: var(--lira) !important; border-color: var(--lira) !important; outline-color: var(--lira) !important; }
.floating-action-buttons a.button, .floating-action-buttons a.button:hover { background-color: var(--lira-deep) !important; color: #fff !important; }
#folderlist-content li.selected, #folderlist-content li.selected > a, .listing li.mailbox.selected, .listing li.mailbox.selected > a,
.treelist li.selected > a, #settings-menu li.selected > a, #layout-menu .menu li.selected > a { color: var(--lira) !important; outline-color: var(--lira) !important; }
.quota-widget .bar .value, .quota-widget .value, .progress-bar { background-color: var(--lira) !important; }

/* Menu header (phone/tablet popover): small mark + LIRA.HOLISTIC wordmark, soft close button */
#layout-menu.popover .popover-header { padding: 0 6px 0 18px; gap: 12px; }
#layout-menu.popover #logo { height: 34px; max-height: 34px; width: auto; padding: 0; }
#layout-menu.popover .popover-header::after {
  content: "LIRA.HOLISTIC"; order: 1;
  font: 500 12px/1 'Jost', sans-serif; letter-spacing: .28em; color: var(--lira);
}
#layout-menu.popover .popover-header .cancel { order: 2; margin-left: auto; color: #b9b1a9 !important; }
/* Desktop sidebar: just the mark, centred with some air */
#layout-menu:not(.popover) #logo { max-height: 42px; width: auto; padding: 4px 0; margin: 0 auto; }