/**
 * isuccess_ui - visual layer on top of the Elastic skin.
 *
 * Loaded after skins/elastic/styles/styles.min.css, so plain overrides win.
 * Only colour, type, spacing and depth are touched; the skin's layout
 * geometry (column positioning, responsive breakpoints) is left alone so
 * Elastic keeps working on phone/tablet/desktop.
 *
 * Section 9 styles the password show/hide control added by isuccess_ui.js.
 */

/* ------------------------------------------------------------------ *
 * 1. Design tokens
 * ------------------------------------------------------------------ */

:root {
    --is-accent:        #2563eb;
    --is-accent-strong: #1d4ed8;
    --is-accent-soft:   #eef4ff;
    --is-accent-ring:   rgba(37, 99, 235, .22);

    --is-canvas:   #eef1f6;
    --is-surface:  #ffffff;
    --is-raised:   #f8fafc;
    --is-border:   #e2e8f0;
    --is-border-strong: #cbd5e1;

    --is-text:     #0f172a;
    --is-muted:    #64748b;
    --is-faint:    #94a3b8;

    --is-rail:       #111827;
    --is-rail-hover: #1f2937;
    --is-rail-text:  #cbd5e1;

    --is-success: #15803d;
    --is-danger:  #dc2626;
    --is-warning: #b45309;

    --is-r-sm: 6px;
    --is-r-md: 9px;
    --is-r-lg: 14px;

    --is-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --is-shadow-md: 0 4px 12px rgba(15, 23, 42, .08);
    --is-shadow-lg: 0 18px 44px rgba(15, 23, 42, .16);

    --is-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

html.dark-mode {
    --is-accent:        #60a5fa;
    --is-accent-strong: #93c5fd;
    --is-accent-soft:   #16233c;
    --is-accent-ring:   rgba(96, 165, 250, .28);

    --is-canvas:  #0b1220;
    --is-surface: #111827;
    --is-raised:  #172033;
    --is-border:  #1f2937;
    --is-border-strong: #334155;

    --is-text:  #e5e7eb;
    --is-muted: #94a3b8;
    --is-faint: #64748b;

    --is-rail:       #0a0f1a;
    --is-rail-hover: #1a2333;
    --is-rail-text:  #cbd5e1;

    --is-success: #4ade80;
    --is-danger:  #f87171;
    --is-warning: #fbbf24;

    --is-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --is-shadow-md: 0 4px 14px rgba(0, 0, 0, .45);
    --is-shadow-lg: 0 18px 44px rgba(0, 0, 0, .6);
}

/* ------------------------------------------------------------------ *
 * 2. Base
 * ------------------------------------------------------------------ */

body,
input, select, textarea, button {
    font-family: var(--is-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background: var(--is-canvas);
    color: var(--is-text);
    font-size: 14px;
    line-height: 1.5;
}

a { color: var(--is-accent); }
a:hover { color: var(--is-accent-strong); }

::selection {
    background: var(--is-accent);
    color: #fff;
}

/* Scrollbars that do not fight the rest of the chrome */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--is-border-strong) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--is-border-strong);
    border: 2px solid transparent;
    border-radius: 8px;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--is-faint); background-clip: content-box; }

/* ------------------------------------------------------------------ *
 * 3. Panes
 * ------------------------------------------------------------------ */

/* Note: do NOT use `#layout > div` here. That selector (1 id + 1 element)
   outranks `#layout-menu` (1 id), so it would repaint the dark task rail
   white. Target each pane by its own id instead. */
#layout-list,
#layout-content { background: var(--is-surface); }
#layout-sidebar { background: var(--is-raised); }

#layout-sidebar,
#layout-list {
    border-right: 1px solid var(--is-border);
}

/* Pane headers: quieter surface, stronger title */
#layout > div > .header {
    background: var(--is-surface);
    border-bottom: 1px solid var(--is-border);
    box-shadow: none;
}

#layout > div > .header .header-title,
.header > .header-title {
    color: var(--is-text);
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -.01em;
}

.footer.toolbar {
    background: var(--is-surface);
    border-top: 1px solid var(--is-border);
}

/* ------------------------------------------------------------------ *
 * 4. Task rail
 * ------------------------------------------------------------------ */

/* Scoped to >=481px on purpose. Below that Elastic turns #layout-menu into a
   light slide-out popover with dark text and only paints it dark above this
   breakpoint, so recolouring it unconditionally makes the phone menu
   unreadable. No margins either: the rail is 42px wide on small screens. */
@media screen and (min-width: 481px) {
    #layout-menu,
    #taskmenu {
        background: var(--is-rail);
    }

    #taskmenu a {
        color: var(--is-rail-text);
        transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
    }

    #taskmenu a:hover {
        background: var(--is-rail-hover);
        color: #fff;
    }

    #taskmenu a.selected,
    #taskmenu a.selected:hover {
        background: var(--is-rail-hover);
        color: #fff;
        box-shadow: inset 3px 0 0 var(--is-accent);
    }

    #taskmenu a.logout:hover {
        background: rgba(220, 38, 38, .18);
        color: #fecaca;
    }
}

/* ------------------------------------------------------------------ *
 * 5. Lists
 * ------------------------------------------------------------------ */

.listing li,
.listing tr {
    border-color: var(--is-border);
}

.listing li > a,
.listing tr > td {
    color: var(--is-text);
}

.listing li:hover,
.listing tbody tr:hover {
    background: var(--is-raised);
}

.listing li.selected,
.listing tr.selected td,
.listing tbody tr.selected td {
    background: var(--is-accent-soft);
    color: var(--is-text);
}

/* Accent bar on the active row */
.messagelist tbody tr.selected > td:first-child,
.listing li.selected > a {
    box-shadow: inset 3px 0 0 var(--is-accent);
}

/* Unread: weight + colour, not just weight */
.messagelist tr.unread td.subject span.subject,
.messagelist tr.unread td.subject a {
    font-weight: 680;
    color: var(--is-text);
}

.messagelist tr td.subject span.date,
.messagelist tr td.subject span.fromto {
    color: var(--is-muted);
}

.messagelist tr.unread td.subject span.date {
    color: var(--is-accent);
    font-weight: 600;
}

.messagelist tr.flagged td.subject span.subject,
.messagelist tr.flagged td.subject a {
    color: var(--is-danger);
}

/* Folder unread counters */
.listing .unreadcount {
    background: var(--is-accent);
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 650;
    padding: 1px 7px;
}

/* ------------------------------------------------------------------ *
 * 6. Buttons
 * ------------------------------------------------------------------ */

.btn,
a.button,
button.btn {
    border-radius: var(--is-r-sm);
    font-weight: 600;
    letter-spacing: .005em;
    transition: background-color .15s ease, border-color .15s ease,
                color .15s ease, box-shadow .15s ease;
}

.btn-primary,
.btn.mainaction,
button.btn.mainaction {
    background: var(--is-accent);
    border-color: var(--is-accent);
    color: #fff;
    box-shadow: var(--is-shadow-sm);
}

.btn-primary:hover,
.btn.mainaction:hover,
button.btn.mainaction:hover {
    background: var(--is-accent-strong);
    border-color: var(--is-accent-strong);
    color: #fff;
}

.btn-secondary {
    background: var(--is-surface);
    border-color: var(--is-border-strong);
    color: var(--is-text);
}

.btn-secondary:hover {
    background: var(--is-raised);
    border-color: var(--is-faint);
    color: var(--is-text);
}

.btn-danger {
    background: var(--is-danger);
    border-color: var(--is-danger);
    color: #fff;
}

.btn:focus-visible,
a.button:focus-visible,
button.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--is-accent-ring);
}

/* Toolbar icon buttons */
.toolbar a.button:hover,
.toolbar button.button:hover {
    background: var(--is-raised);
    border-radius: var(--is-r-sm);
    color: var(--is-accent);
}

/* ------------------------------------------------------------------ *
 * 7. Forms
 * ------------------------------------------------------------------ */

input.form-control,
select.form-control,
textarea.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
    background: var(--is-surface);
    border: 1px solid var(--is-border-strong);
    border-radius: var(--is-r-sm);
    color: var(--is-text);
    transition: border-color .15s ease, box-shadow .15s ease;
}
/* Padding is deliberately not set here: Elastic gives .form-control a fixed
   height, so extra vertical padding clips the text. It is only widened where
   this file also controls the height (login form, password fields). */

input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    border-color: var(--is-accent);
    box-shadow: 0 0 0 3px var(--is-accent-ring);
    outline: none;
}

input::placeholder,
textarea::placeholder {
    color: var(--is-faint);
}

.propform td.title,
.propform th.title,
table.propform td:first-child {
    color: var(--is-muted);
    font-weight: 600;
}

.hint,
.proplist .hint,
#ruleslist {
    color: var(--is-muted);
    font-size: 12.5px;
}

/* ------------------------------------------------------------------ *
 * 8. Login screen
 * ------------------------------------------------------------------ */

#layout-content.no-navbar {
    background:
        radial-gradient(1100px 520px at 12% -12%, rgba(37, 99, 235, .16), transparent 62%),
        radial-gradient(900px 460px at 92% 108%, rgba(37, 99, 235, .10), transparent 60%),
        var(--is-canvas);
}

#login-form {
    background: var(--is-surface);
    border: 1px solid var(--is-border);
    border-radius: var(--is-r-lg);
    box-shadow: var(--is-shadow-lg);
    padding: 30px 30px 24px;
    max-width: 400px;
}

#login-form .form-control {
    height: auto;
}

#login-form #rcmloginsubmit,
#login-form .btn.mainaction {
    width: 100%;
    padding: 10px 16px;
    font-size: 14.5px;
    border-radius: var(--is-r-sm);
}

#logo {
    max-height: 56px;
    margin-bottom: 22px;
}

#login-footer {
    color: var(--is-muted);
    font-size: 12.5px;
    margin-top: 18px;
}

/* ------------------------------------------------------------------ *
 * 9. Password field: show/hide toggle, Caps Lock, match indicator
 *    (markup created by isuccess_ui.js)
 * ------------------------------------------------------------------ */

.isui-pw {
    position: relative;
    display: block;
    width: 100%;
}

.isui-pw > input[type="password"],
.isui-pw > input[type="text"] {
    width: 100%;
    padding-right: 42px;
}

.isui-pw-toggle {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--is-r-sm);
    background: transparent;
    color: var(--is-muted);
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}

.isui-pw-toggle:hover {
    color: var(--is-accent);
    background: var(--is-accent-soft);
}

.isui-pw-toggle:focus-visible {
    outline: none;
    color: var(--is-accent);
    box-shadow: 0 0 0 3px var(--is-accent-ring);
}

/* Caps Lock warning. Sibling of .isui-pw, not a child, so it cannot shift
   the vertically centred toggle button. */
.isui-caps {
    display: none;
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--is-warning);
}

.isui-caps::before {
    content: "\26A0";
    margin-right: 5px;
}

.isui-caps.is-on {
    display: block;
}

/* New password vs confirmation */
.isui-match {
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 600;
    min-height: 1em;
}

.isui-match.is-ok    { color: var(--is-success); }
.isui-match.is-bad   { color: var(--is-danger); }
.isui-match.is-ok::before  { content: "\2713"; margin-right: 5px; }
.isui-match.is-bad::before { content: "\2715"; margin-right: 5px; }

/* Password policy list on the change-password form */
#ruleslist {
    margin-top: 10px;
    padding: 10px 14px;
    background: var(--is-raised);
    border: 1px solid var(--is-border);
    border-left: 3px solid var(--is-accent);
    border-radius: var(--is-r-sm);
    list-style: none;
}

#ruleslist li { margin: 2px 0; }

/* ------------------------------------------------------------------ *
 * 10. Message view, dialogs, notifications
 * ------------------------------------------------------------------ */

#message-header,
.message-part,
.message-htmlpart {
    color: var(--is-text);
}

#message-header {
    background: var(--is-surface);
    border-bottom: 1px solid var(--is-border);
}

#message-header .subject {
    font-size: 18px;
    font-weight: 680;
    letter-spacing: -.015em;
    color: var(--is-text);
}

.ui-dialog,
.popupmenu,
.popover {
    border: 1px solid var(--is-border);
    border-radius: var(--is-r-md);
    box-shadow: var(--is-shadow-lg);
    background: var(--is-surface);
}

.ui-dialog .ui-dialog-titlebar {
    background: var(--is-surface);
    border-bottom: 1px solid var(--is-border);
    color: var(--is-text);
    font-weight: 650;
}

#messagestack > div {
    border-radius: var(--is-r-md);
    box-shadow: var(--is-shadow-md);
    font-weight: 550;
}

#messagestack > div.confirmation { background: var(--is-success); }
#messagestack > div.error        { background: var(--is-danger); }
#messagestack > div.warning      { background: var(--is-warning); }