@import "tokens.css";

html body {
    background: var(--ug-background);
    color: var(--ug-text);
    font-family: var(--ug-font);
}

html body :is(button, input, select, textarea) { font-family: inherit; }
html body :is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--ug-accent);
    outline-offset: 2px;
}

html body a { color: var(--ug-accent); }
html body button[hidden], #ug-shell-tools[hidden] { display: none; }

html body :is(.form-control, .custom-select, .input-group-text, .tox .tox-textfield) {
    color: var(--ug-text);
    background-color: var(--ug-surface);
    border-color: var(--ug-control);
    border-radius: var(--ug-radius);
}

html body :is(.form-control, .custom-select):focus {
    color: var(--ug-text);
    background-color: var(--ug-panel);
    border-color: var(--ug-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ug-accent) 25%, transparent);
}

html body .form-control::placeholder { color: var(--ug-muted); }

html body :is(.btn-primary, .button.mainaction, .btn.btn-primary.disabled) {
    color: var(--ug-on-gold);
    background: var(--ug-gold);
    border: 1px solid var(--ug-gold);
    border-radius: var(--ug-radius);
    font-weight: 750;
}

html body :is(.btn-primary, .button.mainaction):active { background: var(--ug-gold-light); }
html body :is(.btn-secondary, .btn-light, .button:not(.mainaction)) { border-radius: var(--ug-radius); }
html body :is(.btn-secondary, .btn-light) {
    background: var(--ug-panel);
    border-color: var(--ug-line);
    color: var(--ug-text);
}

html body :is(#layout-menu, #layout-sidebar, #layout-list, #layout-content, #layout-sidebar .scroller) {
    color: var(--ug-text);
    background: var(--ug-surface);
    border-color: var(--ug-line);
}

html body :is(#layout-menu, #layout-sidebar, #layout-menu .popover-header) { background: var(--ug-background); }
html body :is(#layout-list, #layout-sidebar) > .header,
html body #layout-content > .header {
    color: var(--ug-text);
    background: var(--ug-panel);
    border-color: var(--ug-line);
    font-weight: 750;
}

html body :is(#layout-sidebar, #layout-list, #layout-content) .footer {
    color: var(--ug-muted);
    background: var(--ug-surface);
    border-color: var(--ug-line);
}

html body #taskmenu a {
    color: var(--ug-muted);
    border-radius: var(--ug-radius);
}
html body #taskmenu a.selected { color: var(--ug-accent); background: var(--ug-selected); }
html body #taskmenu a.compose { color: var(--ug-on-gold); background: var(--ug-gold); }
html body #taskmenu a.theme { display: none; }
html.dark-mode body #taskmenu .action-buttons a.compose { color: var(--ug-on-gold); }
html.dark-mode body #taskmenu a.selected:not(.compose),
html.dark-mode body #mailboxlist li.selected > a { color: var(--ug-accent); background: var(--ug-selected); }
html.dark-mode body #layout-menu #logo { filter: none; opacity: 1; }
html body #layout-menu #logo { width: 34px; height: 34px; object-fit: contain; }
html body #taskmenu a .inner { font-size: .72rem; }
html body .floating-action-buttons a.button {
    color: var(--ug-on-gold);
    background: var(--ug-gold);
    border-radius: var(--ug-card-radius);
}
html body .floating-action-buttons a.button:active { background: var(--ug-gold-light); }

html body :is(#taskmenu, .toolbar) a:is(.mail, .compose, .contacts, .settings, .logout,
    .archive, .delete, .reply, .reply-all, .forward, .attach, .send, .back, .more)::before {
    content: "" !important;
    width: 1.12em;
    height: 1.12em;
    min-width: 1.12em;
    background: currentColor;
    mask: var(--ug-icon) center / contain no-repeat;
    vertical-align: -.14em;
}
#taskmenu .mail { --ug-icon: url("../icons/inbox.svg"); }
#taskmenu .compose { --ug-icon: url("../icons/pencil.svg"); }
#taskmenu .contacts { --ug-icon: url("../icons/contacts.svg"); }
#taskmenu .settings { --ug-icon: url("../icons/settings.svg"); }
#taskmenu .logout { --ug-icon: url("../icons/logout.svg"); }
.toolbar .archive { --ug-icon: url("../icons/archive.svg"); }
.toolbar .delete { --ug-icon: url("../icons/trash.svg"); }
.toolbar .reply { --ug-icon: url("../icons/reply.svg"); }
.toolbar .reply-all { --ug-icon: url("../icons/reply-all.svg"); }
.toolbar .forward { --ug-icon: url("../icons/forward.svg"); }
.toolbar .attach { --ug-icon: url("../icons/paperclip.svg"); }
.toolbar .send { --ug-icon: url("../icons/send.svg"); }
.toolbar .back { --ug-icon: url("../icons/chevron-left.svg"); }
.toolbar .more { --ug-icon: url("../icons/more.svg"); }
html body .searchbar a.options::before {
    content: "" !important;
    width: 16px;
    height: 16px;
    background: currentColor;
    mask: url("../icons/search.svg") center / contain no-repeat;
}
html body #mailboxlist li.mailbox:not(.inbox, .drafts, .sent, .junk, .trash, .archive) > a::before {
    content: "" !important;
    width: 16px;
    height: 16px;
    background: currentColor;
    mask: url("../icons/folder.svg") center / contain no-repeat;
}

.ug-shell-brand { display: none; }
.ug-mode { display: inline-flex; margin: 0; min-width: 0; }
.ug-mode .custom-select { width: auto; min-height: 36px; padding-right: 24px; }
#ug-shell-tools { padding: var(--ug-2); margin-top: auto; text-align: center; }
#ug-shell-tools .custom-select { font-size: .74rem; max-width: 100%; padding-left: 5px; }

html body :is(.toolbar, .menu, .listing, .list-group) :is(a, .listitem) { color: var(--ug-text); }
html body :is(.listing, .listing tbody, .messagelist tbody) tr { border-color: var(--ug-line); }
html body :is(.listing, .messagelist) :is(td, th, li) { border-color: var(--ug-line); }
html body :is(.listing, .messagelist) :is(.selected, .focused) {
    color: var(--ug-text);
    background: var(--ug-selected);
}
html body .listing li.selected > a,
html body .listing tr.selected > td { color: var(--ug-text); background: var(--ug-selected); }
html body #mailboxlist li.selected > a { box-shadow: inset 3px 0 var(--ug-accent); }
html body #mailboxlist li a :is(.unreadcount, .unread) { color: var(--ug-accent); }
html body .messagelist tr.unread:not(.selected) { background: var(--ug-unread); }
html body .messagelist tr.unread .subject > a { font-weight: 800; }
html body .messagelist :is(.date, .size, .fromto) { color: var(--ug-muted); }
html body .messagelist .subject a { color: var(--ug-text); }
html body :is(.searchbar, .searchbar a, .searchbar input, .searchbar .form-control) {
    background-color: var(--ug-surface);
    color: var(--ug-text);
    border-color: var(--ug-line);
}
html body :is(.searchbar, #messagelist, #mailboxlist) { font-variant-numeric: tabular-nums; }

html body :is(.popover, .dropdown-menu, .popupmenu, .ui-dialog, .modal-content, .toast, .tox .tox-menu) {
    background: var(--ug-panel);
    color: var(--ug-text);
    border-color: var(--ug-line);
    border-radius: var(--ug-card-radius);
    box-shadow: var(--ug-shadow);
}
html body :is(.ui-dialog-titlebar, .ui-dialog-buttonpane, .modal-header, .modal-footer) {
    background: var(--ug-panel);
    color: var(--ug-text);
    border-color: var(--ug-line);
}
html body .dropdown-item { color: var(--ug-text); }
html body .dropdown-item:focus { background: var(--ug-selected); }
html body :is(.formcontent, .propform, fieldset, .form-group, .card, .contentbox) {
    color: var(--ug-text);
    border-color: var(--ug-line);
}
html body :is(.form-text, .text-muted, .message-partheaders, .message-date, .empty) { color: var(--ug-muted) !important; }
html body :is(.alert-warning, .toast.warning, .warning) { --ug-message-accent: var(--ug-accent); }
html body :is(.alert-danger, .toast.error, .error) { --ug-message-accent: var(--ug-error); }
html body :is(.alert-success, .toast.confirmation) { --ug-message-accent: var(--ug-success); }
html body :is(.alert, .toast, .boxwarning, .boxerror, .boxinformation) {
    color: var(--ug-text);
    background: var(--ug-panel);
    border-color: var(--ug-line);
    border-inline-start: 3px solid var(--ug-message-accent, var(--ug-accent));
}

html body :is(#message-header, #message-header .header, .message-headers, #composeheaders) {
    color: var(--ug-text);
    background: var(--ug-panel);
    border-color: var(--ug-line);
}
html body #message-header { padding-inline: clamp(var(--ug-3), 3vw, var(--ug-6)); }
html body #message-header :is(h2, h3, .subject) { overflow-wrap: anywhere; }
html body :is(#attachment-list, #attachment-list li, .attachmentslist, #compose-attachments) {
    color: var(--ug-text);
    border-color: var(--ug-line);
}
html body :is(#messagebody, .message-part, .compose-attachment) { overflow-wrap: anywhere; }
html body #messagebody { max-width: 100%; overflow-x: auto; }
html body :is(.tox .tox-toolbar, .tox .tox-toolbar__primary, .tox .tox-statusbar, .tox .tox-editor-header) {
    color: var(--ug-text);
    background: var(--ug-panel);
    border-color: var(--ug-line);
}
html body .tox .tox-tbtn { color: var(--ug-text); }
html body .tox .tox-tbtn svg { fill: currentColor; }
html body .tox .tox-tbtn--enabled { background: var(--ug-selected); }

html body.task-login #layout { min-height: 100svh; height: auto; }
html body.task-login .ug-login {
    min-height: 100svh;
    width: 100%;
    display: grid !important;
    grid-template-columns: minmax(0, 1.12fr) minmax(380px, .88fr);
    padding: 0;
    position: static;
    flex: 1;
    overflow: visible;
    text-align: start;
}
html body.task-login #layout-content.ug-login { text-align: start; }
.ug-login-visual {
    min-height: 100%;
    background: linear-gradient(180deg, #090b1660, transparent 38%, #090b1680),
        url("../images/gateway.webp") center 44% / cover;
    border-inline-end: 1px solid var(--ug-line);
}
.ug-login-side {
    min-width: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: clamp(20px, 4vh, 44px);
    padding: clamp(24px, 5vw, 72px);
    padding-top: max(clamp(24px, 5vw, 72px), env(safe-area-inset-top));
    padding-bottom: max(clamp(24px, 5vw, 72px), env(safe-area-inset-bottom));
    background: radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--ug-accent) 9%, transparent), transparent 55%),
        var(--ug-background);
}
.ug-login-brand {
    display: flex;
    align-items: center;
    gap: var(--ug-3);
    font: 600 1.3rem/1 var(--ug-display);
    letter-spacing: .035em;
}
.ug-login-brand img { object-fit: contain; }
.ug-brand-accent { color: var(--ug-accent); }
.ug-brand-sub { color: var(--ug-muted); font: 650 .64rem/1 var(--ug-font); letter-spacing: .18em; margin-left: .5em; }
.ug-login-card {
    align-self: center;
    width: min(100%, 440px);
    margin-inline: auto;
    padding: clamp(20px, 3.2vw, 40px);
    background: var(--ug-surface);
    border: 1px solid var(--ug-line);
    border-top: 2px solid var(--ug-gold);
    border-radius: var(--ug-card-radius);
    box-shadow: var(--ug-shadow);
    animation: ug-enter 220ms var(--ug-ease) both;
}
.ug-login-card h1 { margin: 0 0 var(--ug-2); font: 600 clamp(1.55rem, 3vw, 2rem)/1.15 var(--ug-display); }
.ug-login-card p { color: var(--ug-muted); margin: 0 0 var(--ug-5); line-height: 1.6; }
html body.task-login #login-form { width: auto; max-width: none; margin: 0; top: auto; position: static; }
html body.task-login #login-form table,
html body.task-login #login-form :is(tbody, tr, td) { display: block; width: 100%; text-align: start; padding: 0; }
html body.task-login #login-form td.title { display: block; }
html body.task-login #login-form td.title label { display: inline-block; }
html body.task-login #login-form label {
    position: static;
    clip: auto;
    clip-path: none;
    width: auto;
    height: auto;
    margin: 0 0 var(--ug-2);
    color: var(--ug-text);
    font-size: .88rem;
    font-weight: 750;
}
html body.task-login #login-form td.input { margin-bottom: var(--ug-4); }
html body.task-login #login-form input {
    min-height: 46px;
    font-size: 1rem;
    padding-inline: var(--ug-3);
}
html body.task-login #login-form .input-group { display: block; }
html body.task-login #login-form .input-group :is(.input-group-prepend, .input-group-text) { display: none; }
html body.task-login #login-form .input-group .form-control { width: 100%; border-radius: var(--ug-radius); }
html.dark-mode body.task-login #login-form .form-control { border-color: var(--ug-control); }
html.dark-mode body.task-login #login-form .form-control:focus { border-color: var(--ug-gold); }
.ug-password-field { position: relative; }
html body.task-login #rcmloginpwd { padding-inline-end: 50px; }
.ug-password {
    position: absolute;
    inset-inline-end: 2px;
    top: 2px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--ug-muted);
    border-radius: var(--ug-radius);
}
html.dark-mode body.task-login .ug-password { background: transparent; color: var(--ug-muted); }
html.dark-mode body.task-login .ug-password:active { background: var(--ug-hover); }
.ug-password:active { background: var(--ug-hover); color: var(--ug-accent); }
.ug-icon { width: 19px; height: 19px; display: inline-block; background: currentColor; mask: var(--ug-icon) center / contain no-repeat; }
[data-icon="eye"] { --ug-icon: url("../icons/eye.svg"); }
[data-icon="eye-off"] { --ug-icon: url("../icons/eye-off.svg"); }
html body.task-login #rcmloginsubmit { width: 100%; min-height: 46px; margin-top: var(--ug-2); }
html body.task-login #login-footer:empty { display: none; }
.ug-login-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--ug-3); font-size: .78rem; color: var(--ug-muted); }

@media (hover: hover) and (pointer: fine) {
    html body :is(.btn-primary, .button.mainaction, #taskmenu a.compose):hover { background: var(--ug-gold-light); color: var(--ug-on-gold); }
    html body :is(.listing li > a, .toolbar a, .dropdown-item, #taskmenu a:not(.compose)):hover { background-color: var(--ug-hover); color: var(--ug-text); }
    .ug-password:hover { color: var(--ug-accent); background: var(--ug-hover); }
}

@media (max-width: 767px) {
    html body.task-login .ug-login { grid-template-columns: 1fr; grid-template-rows: minmax(140px, 26svh) 1fr; }
    .ug-login-visual { background-position: center 43%; border-inline-end: 0; border-bottom: 1px solid var(--ug-line); }
    .ug-login-side { padding-inline: max(var(--ug-4), env(safe-area-inset-left)); gap: var(--ug-5); }
    html body :is(.header, .toolbar) :is(a.button, button), .ug-mode .custom-select { min-height: 44px; }
    html body :is(input.form-control, textarea.form-control, select.form-control) { font-size: 16px; }
    html body :is(#layout-sidebar, #layout-list, #layout-content) { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) { .ug-login-card { animation: none; } }
@keyframes ug-enter { from { opacity: .65; transform: translateY(5px); } to { opacity: 1; transform: none; } }

@media print {
    html body { color: #000; background: #fff; }
    #ug-shell-tools { display: none; }
}