@font-face {
    font-family: Archivo;
    src: url('../fonts/archivo.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
}
@font-face {
    font-family: 'Instrument Sans';
    src: url('../fonts/instrument-sans.woff2') format('woff2');
    font-weight: 400 700;
    font-display: swap;
}
:root {
    --hk-forest: #0f3520;
    --hk-deep: #071f13;
    --hk-green: #427f30;
    --hk-hover: #3c742c;
    --hk-cream: #edeae3;
    --hk-paper: #f6f6f3;
    --hk-sand: #d5d2c8;
    --hk-line: #b3bcb8;
    --hk-ink: #0d2d1b;
    --hk-muted: #48584f;
    --primary: #427f30;
}
body, button, input, select, textarea, .popover, .ui-widget {
    font-family: 'Instrument Sans', sans-serif;
}
body { color: var(--hk-ink); background: var(--hk-paper); }
a { color: var(--hk-hover); }
a:hover { color: var(--hk-forest); }
.btn-link { color: var(--hk-hover); }
.btn-link:hover { color: var(--hk-forest); }
.recipient-input.focus, .multi-input > .content.focused {
    border-color: var(--hk-green); box-shadow: 0 0 0 3px rgb(66 127 48 / 18%);
}
h1, h2, h3, .header, .btn, #taskmenu, .listing {
    font-family: Archivo, sans-serif;
}
.btn { border-radius: 2px; }
.btn-primary, .btn-primary.disabled, .btn-primary:disabled {
    background-color: var(--hk-green); border-color: var(--hk-green);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--hk-forest); border-color: var(--hk-forest);
}
.btn-primary:focus, .form-control:focus, .custom-select:focus {
    box-shadow: 0 0 0 3px rgb(66 127 48 / 18%); border-color: var(--hk-green);
}
.form-control, .custom-select, .input-group-text {
    border-color: var(--hk-line); border-radius: 2px;
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--hk-green); border-color: var(--hk-green);
}
#layout > div { border-color: var(--hk-line); }
#layout-menu { background: var(--hk-forest); }
#layout-menu .popover-header, #layout-menu #taskmenu,
#layout-menu #taskmenu .special-buttons { background: var(--hk-forest); border-color: #164a2e; }
#layout-menu #logo { width: 64px; height: 48px; max-width: 100%; object-fit: contain; }
#taskmenu a { color: var(--hk-cream); }
#taskmenu a:hover, #taskmenu a.selected { background: #164a2e; color: #fff; }
#taskmenu a.selected { box-shadow: inset 3px 0 #71c15c; }
#taskmenu a.compose { background: var(--hk-green); color: white; }
#taskmenu a.compose:hover { background: var(--hk-hover); }
#taskmenu a.logout { color: var(--hk-cream) !important; }
#layout-sidebar, #layout-sidebar > .scroller { background: var(--hk-cream); }
#layout-list, #layout-content { background: var(--hk-paper); }
#layout-sidebar > .header, #layout-list > .header, #layout-content > .header,
#layout-sidebar > .footer, #layout-list > .footer, #layout-content > .footer,
.menu, .toolbar, .searchbar, .searchfilter {
    background-color: var(--hk-cream); border-color: var(--hk-line); color: var(--hk-forest);
}
.header a, .toolbar a, .toolbar a.button, .menu a, .header .header-title {
    color: var(--hk-forest);
}
#layout > div > .header, #layout > div > .footer { background-color: var(--hk-cream); border-color: var(--hk-line); }
.folderlist li.mailbox.selected > a { background-color: #c3dbbc; color: var(--hk-forest); }
.listing li, .listing tbody td { border-color: #deded5; }
.listing li a { color: var(--hk-ink); }
.listing li.selected > a, .listing li.selected, .listing tr.selected td {
    background-color: #c3dbbc; color: var(--hk-forest);
}
.listing li > a:hover, .listing tr:hover td { background-color: #e0e8da; }
.listing li.selected > a:hover, .listing tr.selected:hover td { background-color: #c3dbbc; }
.listing li.selected > a:before, .listing li.selected > a .inner,
.listing tr.selected .subject a { color: var(--hk-forest); }
.folderlist li.mailbox .unreadcount { background: var(--hk-green); color: white; }
.messagelist tr.unread td.subject { color: var(--hk-forest); }
.messagelist td.subject span.fromto { color: var(--hk-muted); }
.messagelist td.subject span.subject a { color: var(--hk-ink); }
.messagelist .flagged td.subject span.subject a { color: #9a5b20; }
.nav-tabs { border-color: var(--hk-line); }
.nav-tabs .nav-link.active { color: var(--hk-forest); border-top-color: var(--hk-green); }
.ui-dialog, .popover, .popover-body { background: var(--hk-paper); color: var(--hk-ink); }
.ui-dialog .ui-dialog-titlebar, .popover-header { background: var(--hk-cream); color: var(--hk-forest); }
.ui-dialog .ui-dialog-buttonpane { border-color: var(--hk-line); background: var(--hk-cream); }
.menu li a:hover, .menu li a:focus { background-color: #c3dbbc; color: var(--hk-forest); }
.quota-widget .value { background-color: var(--hk-green); }
#message-header, #message-content, .message-part { background-color: white; }
.task-login #layout { display: block; }
.task-login #layout-content {
    display: grid; grid-template-columns: 55% 45%; width: 100%; max-width: none;
    height: 100%; min-height: 640px; margin: 0; padding: 0; overflow: auto;
    background: var(--hk-cream); text-align: left;
}
.hk-brand {
    position: relative; display: flex; flex-direction: column; justify-content: space-between;
    padding: 56px 64px; overflow: hidden; color: var(--hk-cream);
    background: linear-gradient(110deg, rgb(15 53 32 / 94%), rgb(15 53 32 / 68%)), url('../images/team.webp') 64% center / cover;
}
.hk-brand::after {
    content: ''; position: absolute; bottom: -1px; right: -1px; width: 120px; height: 130px;
    background: var(--hk-cream); clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.hk-brand-logo { width: 142px; height: auto; }
.hk-brand-copy { margin: 64px 0; }
.hk-eyebrow { font: 500 11px Archivo, sans-serif; letter-spacing: .24em; text-transform: uppercase; }
.hk-brand .hk-eyebrow { color: #b9d9ad; }
.hk-brand h1 { font: 600 clamp(32px, 3.8vw, 60px)/1.12 Archivo, sans-serif; letter-spacing: -.04em; margin: 24px 0 30px; }
.hk-tagline { width: 195px; height: auto; }
.hk-brand-footer { font: 400 10px Archivo, sans-serif; letter-spacing: .2em; color: #d5d2c8; }
.hk-login { position: relative; display: flex; align-items: center; justify-content: center; padding: 60px 48px 90px; }
.hk-login-inner { width: 100%; max-width: 360px; }
.task-login #logo { display: block; position: static; width: 112px; height: auto; max-height: none; margin: 0 0 42px; }
.hk-login .hk-eyebrow { color: var(--hk-hover); margin-bottom: 14px; }
.hk-login h2 { color: var(--hk-forest); font-size: 36px; font-weight: 600; letter-spacing: -.045em; margin-bottom: 12px; }
.hk-login-intro { color: var(--hk-muted); line-height: 1.6; margin-bottom: 30px; }
.task-login #login-form { position: static; width: 100%; max-width: none; margin: 0; }
.task-login .form-control { min-height: 50px; background-color: var(--hk-paper); }
.task-login .input-group-text { background: var(--hk-paper); color: var(--hk-muted); }
.task-login .btn { min-height: 50px; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; font-weight: 600; }
.task-login #login-footer { margin: 0; }
.hk-login-note { font-size: 12px; color: var(--hk-muted); margin-top: 22px; line-height: 1.6; }
.hk-login-footer { position: absolute; bottom: 30px; font: 600 11px Archivo, sans-serif; letter-spacing: .13em; color: var(--hk-forest); }
.hk-login-footer span { font-weight: 400; margin-left: 8px; color: var(--hk-muted); }
@media (max-width: 900px) {
    .hk-brand { padding: 40px 32px; }
    .hk-login { padding-left: 30px; padding-right: 30px; }
}
@media (max-width: 600px) {
    .task-login #layout-content { grid-template-columns: 1fr; min-height: 100%; height: auto; }
    .hk-brand { display: none; }
    .hk-login { min-height: 100vh; min-height: 100dvh; padding: 36px 28px 86px; border-top: 6px solid var(--hk-forest); }
    .task-login #logo { width: 118px; margin-bottom: 34px; }
    .hk-login h2 { font-size: 32px; }
}
@media print {
    body { color: #000; background: #fff; }
}