/*
 * WhySharedMail webmail theme — sits on top of Roundcube Elastic.
 * Edit the colours here; everything below uses these tokens.
 */
:root {
    --w-bg: #fafafa;
    --w-surface: #ffffff;
    --w-line: #ebebeb;
    --w-line-strong: #d9d9d9;
    --w-ink: #0a0a0a;
    --w-ink-2: #3f3f46;
    --w-muted: #71717a;
    --w-hover: #f4f4f5;
    --w-accent: #2f5bea;
    --w-accent-ink: #1d3fb5;
    --w-accent-soft: #eef2ff;
    --w-unread: #0a0a0a;
    --w-radius: 10px;
    --w-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
    --w-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Base ---------- */
html, body, input, select, textarea, button, .btn, .form-control, .popover, .ui-dialog, .listing, table {
    font-family: var(--w-font) !important;
}
body { background: var(--w-bg); color: var(--w-ink); font-size: 14px; -webkit-font-smoothing: antialiased; }
a { color: var(--w-accent); }
#taskmenu a.theme, #taskmenu a.about { display: none !important; }

/* Panel headers: tall, white, hairline border */
#layout-sidebar > .header, #layout-list > .header, #layout-content > .header {
    background: var(--w-surface) !important;
    border-bottom: 1px solid var(--w-line) !important;
    min-height: 56px; height: 56px; line-height: 56px;
}
.header-title { font-weight: 600; font-size: 15px; color: var(--w-ink); letter-spacing: -.01em; }

/* ---------- Left rail (app switcher, like Gmail's rail) ---------- */
#layout-menu {
    background: var(--w-bg) !important;
    border-right: 1px solid var(--w-line) !important;
}
#layout-menu .popover-header { background: transparent !important; }
#layout-menu #logo { max-height: 32px; margin: 14px auto 6px; }
#taskmenu a {
    color: var(--w-ink-2) !important;
    border-radius: 12px; margin: 2px 8px; font-size: 11.5px; font-weight: 500;
    background: transparent !important; transition: background .15s;
}
#taskmenu a:before { color: var(--w-ink-2) !important; }
#taskmenu a:hover { background: var(--w-hover) !important; }
#taskmenu a.selected { background: var(--w-accent-soft) !important; color: var(--w-accent-ink) !important; }
#taskmenu a.selected:before { color: var(--w-accent) !important; }
#taskmenu a.wsm-dashboard:before { content: "\f3fd"; }
/* Compose: Gmail-style pill */
#taskmenu a.compose {
    background: var(--w-accent) !important; color: #fff !important;
    border-radius: 16px; margin: 8px 10px 14px; box-shadow: 0 4px 14px rgba(47,91,234,.35);
}
#taskmenu a.compose:before { color: #fff !important; }
#taskmenu a.compose:hover { background: var(--w-accent-ink) !important; }
#layout-menu .special-buttons a { opacity: .85; }

/* ---------- Folder sidebar ---------- */
#layout-sidebar { background: var(--w-bg) !important; border-right: 1px solid var(--w-line) !important; }
#layout-sidebar > .header { background: var(--w-bg) !important; border-bottom: 0 !important; }
#layout-sidebar .header-title.username { font-size: 13px; color: var(--w-muted); font-weight: 500; }
#folderlist-content { padding: 4px 8px 0 0; }
#mailboxlist li a, .treelist li a, #settings-menu li a, #directorylist li a {
    border-radius: 0 999px 999px 0 !important;
    padding-left: 22px; color: var(--w-ink-2) !important; font-weight: 500;
    border: 0 !important; height: 34px; line-height: 34px;
}
#mailboxlist li a:hover, .treelist li a:hover, #settings-menu li a:hover, #directorylist li a:hover {
    background: var(--w-hover) !important;
}
#mailboxlist li.selected > a, .treelist li.selected > a, #settings-menu li.selected > a, #directorylist li.selected > a,
.listing li.selected > a {
    background: var(--w-accent-soft) !important; color: var(--w-accent-ink) !important; font-weight: 600;
}
#mailboxlist li.selected > a:before, .treelist li.selected > a:before { color: var(--w-accent) !important; }
#mailboxlist li a:before { color: var(--w-muted); }
#mailboxlist .unreadcount, .listing .unreadcount {
    background: transparent !important; color: var(--w-ink) !important; font-weight: 700; font-size: 12px; padding: 0;
}
#mailboxlist li.selected > a .unreadcount { color: var(--w-accent-ink) !important; }
.listing li { border: 0 !important; }
#quotadisplay { margin: 10px 16px; color: var(--w-muted); font-size: 12px; }
#quotadisplay .bar { border-radius: 99px; }

/* ---------- Message list ---------- */
#layout-list { background: var(--w-surface) !important; border-right: 1px solid var(--w-line) !important; }
#messagelist-header .searchbar, .searchbar {
    background: var(--w-hover) !important; border: 1px solid transparent !important;
    border-radius: 999px !important; margin: 0 6px; transition: background .15s, box-shadow .15s;
}
.searchbar:focus-within { background: var(--w-surface) !important; border-color: var(--w-line-strong) !important; box-shadow: var(--w-shadow); }
.searchbar input { background: transparent !important; border: 0 !important; box-shadow: none !important; }

table.messagelist { background: var(--w-surface); }
table.messagelist tr td { border-bottom: 1px solid #f1f1f1 !important; padding-top: 10px; padding-bottom: 10px; color: var(--w-ink-2); }
table.messagelist tr:hover td { background: #f8f9fb; }
table.messagelist tr:hover { box-shadow: inset 2px 0 0 var(--w-line-strong); }
table.messagelist tr.unread td { background: var(--w-surface); }
table.messagelist tr.unread td .subject a, table.messagelist tr.unread td .fromto, table.messagelist tr.unread td span.subject,
table.messagelist tr.unread td.subject span.fromto { color: var(--w-unread) !important; font-weight: 700 !important; }
table.messagelist tr.unread { box-shadow: inset 3px 0 0 var(--w-accent); }
table.messagelist tr:not(.unread) td .subject a, table.messagelist tr:not(.unread) td span.subject a { color: var(--w-muted) !important; }
table.messagelist tr.selected td, table.messagelist tr.selected:hover td { background: var(--w-accent-soft) !important; color: var(--w-ink) !important; }
table.messagelist tr.focused > td { outline: none; }
table.messagelist td.subject span.date, table.messagelist span.date { color: var(--w-muted); font-size: 12px; font-weight: 500; }
table.messagelist tr.unread td.subject span.date { color: var(--w-ink); font-weight: 600; }
table.messagelist td.subject .fromto { font-size: 14px; }
table.messagelist td.subject span.subject { font-size: 13.5px; }
table.messagelist tr.flagged td span.flag span:before, table.messagelist span.flagged:before { color: #f59e0b !important; }

/* ---------- Reading pane ---------- */
#layout-content { background: var(--w-surface) !important; }
#layout-content .iframe-wrapper { background: var(--w-surface); }
#message-header .subject, .message-partheaders .subject, h2.subject {
    font-size: 22px !important; font-weight: 600 !important; letter-spacing: -.02em; color: var(--w-ink) !important;
}
#message-header .header-headers, #message-header .header { color: var(--w-ink-2); }
#message-header img.contactphoto { border-radius: 50%; }
.message-htmlpart, .message-part { font-size: 14.5px; line-height: 1.6; }
.message-partheaders, #message-objects .notice { border-radius: var(--w-radius); }

/* ---------- Toolbars ---------- */
.toolbar a.button, .toolbar button, .menu.toolbar a {
    color: var(--w-ink-2) !important; border-radius: 8px; font-weight: 500;
}
.toolbar a.button:hover:not(.disabled), .toolbar a.button.active:hover, .menu.toolbar a:hover:not(.disabled) {
    background: var(--w-hover) !important; color: var(--w-ink) !important;
}
.toolbar a.button.disabled { opacity: .35; }
.toolbar a.button:before { color: inherit !important; }

/* ---------- Buttons & inputs (Vercel-like) ---------- */
.btn, button.btn, input.btn, .button {
    border-radius: 8px !important; font-weight: 500 !important; box-shadow: none !important;
    transition: background .15s, border-color .15s, color .15s;
}
.btn-primary, .btn.btn-primary, .mainaction, button.mainaction, input.mainaction, .btn.mainaction {
    background: var(--w-ink) !important; border-color: var(--w-ink) !important; color: #fff !important;
}
.btn-primary:hover, .mainaction:hover, .btn.mainaction:hover { background: #262626 !important; border-color: #262626 !important; }
.btn-secondary, .btn.btn-secondary, .btn.cancel {
    background: var(--w-surface) !important; color: var(--w-ink) !important; border: 1px solid var(--w-line-strong) !important;
}
.btn-secondary:hover, .btn.cancel:hover { background: var(--w-hover) !important; }
.form-control, .custom-select, input[type=text], input[type=email], input[type=password], input[type=search], textarea, select {
    border-radius: 8px !important; border-color: var(--w-line-strong) !important; color: var(--w-ink);
}
.form-control:focus, .custom-select:focus, input:focus, textarea:focus, select:focus {
    border-color: var(--w-accent) !important; box-shadow: 0 0 0 3px rgba(47,91,234,.15) !important;
}
.input-group-text { background: var(--w-bg) !important; border-color: var(--w-line-strong) !important; color: var(--w-muted); }

/* ---------- Menus, dialogs, toasts ---------- */
.popover, .ui-dialog, .ui-dialog .ui-dialog-content, .popupmenu, .ui-menu {
    border: 1px solid var(--w-line) !important; border-radius: 12px !important; box-shadow: var(--w-shadow) !important;
}
.ui-dialog .ui-dialog-titlebar { background: var(--w-surface) !important; border-bottom: 1px solid var(--w-line) !important; }
.ui-dialog .ui-dialog-title { font-weight: 600; }
.ui-dialog .ui-dialog-buttonpane { background: var(--w-bg) !important; border-top: 1px solid var(--w-line) !important; }
.popover .listing li a:hover, .popupmenu li a:hover { background: var(--w-hover) !important; border-radius: 6px; }
#messagestack div { border-radius: 10px !important; box-shadow: var(--w-shadow); font-weight: 500; }

/* ---------- Compose ---------- */
#compose-content, #compose-headers, .compose-headers { background: var(--w-surface); }
#compose-subject, #_subject { font-size: 16px; font-weight: 500; }
.recipient-input { border-radius: 8px !important; }
.recipient-input li.recipient { background: var(--w-accent-soft) !important; color: var(--w-accent-ink); border: 0 !important; border-radius: 999px !important; }
.formbuttons .btn.send, #compose-content .formbuttons button.send { background: var(--w-accent) !important; border-color: var(--w-accent) !important; }

/* ---------- Settings & contacts tables ---------- */
.propform fieldset legend, .formcontent legend { font-weight: 600; color: var(--w-ink); }
table.records-table tr:hover td { background: #f8f9fb; }
table.records-table tr.selected td { background: var(--w-accent-soft) !important; color: var(--w-ink) !important; }
.records-table td { border-bottom: 1px solid #f1f1f1 !important; }

/* ---------- Login: split screen ---------- */
body.task-login { background: var(--w-surface) !important; }
body.task-login #layout { display: flex; min-height: 100vh; }
body.task-login #wsm-hero {
    flex: 1 1 50%; position: relative; overflow: hidden; color: #fff; display: flex;
    background:
        radial-gradient(60% 50% at 20% 10%, rgba(47,91,234,.55), transparent 70%),
        radial-gradient(50% 50% at 90% 90%, rgba(124,58,237,.35), transparent 70%),
        #07090f;
}
body.task-login #wsm-hero:before {
    content: ""; position: absolute; inset: 0; opacity: .18;
    background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.wsm-hero-inner { position: relative; display: flex; flex-direction: column; padding: 48px 56px; width: 100%; max-width: 620px; }
.wsm-hero-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
.wsm-hero-brand img { border-radius: 8px; }
#wsm-hero h2 { margin: auto 0 28px; font-size: 44px; line-height: 1.08; font-weight: 700; letter-spacing: -.035em; color: #fff; }
#wsm-hero h2 span { color: #a5b4fc; }
#wsm-hero ul { list-style: none; padding: 0; margin: 0 0 auto; display: grid; gap: 12px; color: #d4d4d8; font-size: 15px; }
#wsm-hero li { display: flex; gap: 10px; align-items: center; }
#wsm-hero li:before { content: "✓"; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(165,180,252,.18); color: #c7d2fe; font-size: 12px; }
.wsm-hero-foot { color: #71717a; font-size: 13px; margin: 32px 0 0; }

body.task-login #layout-content {
    flex: 1 1 50%; display: flex !important; flex-direction: column; align-items: center; justify-content: center;
    background: var(--w-surface) !important; padding: 32px 24px; position: static; width: auto;
}
body.task-login #layout-content > #logo { display: none; }
body.task-login #login-form {
    width: 100%; max-width: 380px; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0;
}
.wsm-login-head { margin-bottom: 28px; text-align: left; }
.wsm-login-head h1 { font-size: 30px; font-weight: 700; letter-spacing: -.03em; color: var(--w-ink); margin: 0 0 6px; }
.wsm-login-head p { color: var(--w-muted); margin: 0; font-size: 15px; }
body.task-login #login-form table, body.task-login #login-form tbody, body.task-login #login-form tr, body.task-login #login-form td { display: block; width: 100%; padding: 0; border: 0; }
body.task-login #login-form td.title { display: none; }
body.task-login #login-form tr { margin-bottom: 12px; }
body.task-login #login-form .input-group-prepend, body.task-login #login-form .input-group-text { display: none !important; }
body.task-login #login-form input.form-control {
    height: 46px; font-size: 15px; padding: 0 14px; border-radius: 10px !important; background: var(--w-surface); border: 1px solid var(--w-line-strong) !important;
}
body.task-login #login-form .formbuttons { margin-top: 8px; }
body.task-login #login-form button.mainaction, body.task-login #login-form #rcmloginsubmit {
    width: 100%; height: 46px; font-size: 15px; font-weight: 600 !important; text-transform: none; letter-spacing: 0;
    border-radius: 10px !important; background: var(--w-ink) !important; border-color: var(--w-ink) !important;
}
body.task-login #login-form #rcmloginsubmit:hover { background: #262626 !important; }
.wsm-login-foot { color: var(--w-muted); font-size: 13px; margin: 22px 0 0; text-align: left; line-height: 1.5; }
.wsm-login-foot a { color: var(--w-ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
body.task-login #login-footer { color: #a1a1aa; font-size: 12.5px; text-align: left; margin-top: 40px; }
body.task-login #login-footer a { color: var(--w-muted); }
body.task-login #message, body.task-login #messagestack { top: 16px; }

@media (max-width: 900px) {
    body.task-login #wsm-hero { display: none; }
    body.task-login #layout-content { align-items: stretch; }
    body.task-login #login-form { margin: 0 auto; }
}

/* ---------- Phones ---------- */
@media (max-width: 480px) {
    #layout-sidebar > .header, #layout-list > .header, #layout-content > .header { height: 52px; min-height: 52px; line-height: 52px; }
    table.messagelist tr td { padding-top: 12px; padding-bottom: 12px; }
}

/* Login inputs: full width */
body.task-login #login-form .input-group { display: flex; width: 100%; flex-wrap: nowrap; }
body.task-login #login-form input.form-control { width: 100% !important; flex: 1 1 auto; }