/* Spright Skin — CSS overrides for Roundcube Elastic
 * Brand: Dark Teal #0A332B, Seafoam #1C7060, Lawn #01D860, Volt #BEF51D
 * Fonts: Rubik (headlines), Noto Sans (body)
 *
 * IMPORTANT: This file shadows elastic's /styles/styles.css in the child-skin
 * resolution order.  We must @import the parent first so the base layout loads.
 */

/* ── Load Elastic base styles (parent skin) ── */
@import url('/skins/elastic/styles/styles.min.css');

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&family=Noto+Sans:wght@400;500;600;700&display=swap');

/* ── Global font override ── */
body, .ui, .propform, .formcontent, .listing, input, select, textarea, button, .btn {
    font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

h1, h2, h3, h4, h5, h6, .voice,
#layout-menu .menu li a,
.header-title,
.ui-dialog .ui-dialog-title,
#login-form .input-group label,
.formcontent .row .col-form-label {
    font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}


/* ══════════════════════════════════
   LOGIN PAGE
   ══════════════════════════════════ */

/* Full-page dark teal background */
#login-form {
    background: #0A332B !important;
    color: #fff !important;
}

body.task-login #layout-content {
    background: #0A332B !important;
}

body.task-login {
    background: #0A332B !important;
}

body.task-login #logo {
    max-width: 200px;
    margin-bottom: 1.5rem;
}

/* Login form inputs */
body.task-login .input-group {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
}

body.task-login .input-group .form-control {
    background: transparent !important;
    color: #fff !important;
    border: none !important;
}

body.task-login .input-group .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

body.task-login .input-group .icon,
body.task-login .input-group .input-group-text,
body.task-login .input-group .icon:before {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Login button */
body.task-login .btn-primary,
body.task-login #rcmloginsubmit {
    background: #01D860 !important;
    border-color: #01D860 !important;
    color: #0A332B !important;
    font-family: 'Rubik', sans-serif !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    text-transform: none;
    letter-spacing: 0;
}

body.task-login .btn-primary:hover,
body.task-login #rcmloginsubmit:hover {
    background: #00c050 !important;
    border-color: #00c050 !important;
}

/* Login footer */
#login-footer {
    color: rgba(255, 255, 255, 0.4) !important;
}

#login-footer a {
    color: #01D860 !important;
}


/* ══════════════════════════════════
   TASK MENU (left sidebar nav)
   ══════════════════════════════════ */

#layout-menu {
    background: #0A332B !important;
}

#layout-menu .menu li a {
    color: rgba(255, 255, 255, 0.75) !important;
}

#layout-menu .menu li a:hover,
#layout-menu .menu li a.active,
#layout-menu .menu li.selected a {
    color: #fff !important;
    background: #1C7060 !important;
}

/* Action button (compose) in task menu */
#layout-menu .menu li a.compose,
#layout-menu .menu li.button-compose a {
    color: #0A332B !important;
    background: #01D860 !important;
}

#layout-menu .menu li a.compose:hover,
#layout-menu .menu li.button-compose a:hover {
    background: #00c050 !important;
}

/* Special action button */
.toolbar .button.compose,
a.button.compose {
    background: #01D860 !important;
    color: #0A332B !important;
}


/* ══════════════════════════════════
   TOOLBAR / HEADER
   ══════════════════════════════════ */

.header,
#layout-sidebar .header,
#layout-list .header,
#layout-content .header,
.layout-header {
    background: #f8faf9 !important;
    border-color: #e0e8e5 !important;
}

.toolbar a.button:hover,
.toolbar a.button.active {
    background: rgba(1, 216, 96, 0.1) !important;
    color: #1C7060 !important;
}


/* ══════════════════════════════════
   PRIMARY COLOR OVERRIDES (blue → green)
   ══════════════════════════════════ */

/* Buttons */
.btn-primary,
button.btn-primary,
input.btn-primary {
    background: #01D860 !important;
    border-color: #01D860 !important;
    color: #0A332B !important;
    font-weight: 600 !important;
}

.btn-primary:hover,
button.btn-primary:hover {
    background: #00c050 !important;
    border-color: #00c050 !important;
    color: #0A332B !important;
}

.btn-primary:focus,
button.btn-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(1, 216, 96, 0.35) !important;
}

/* Links */
a, .rcmContactAddress a {
    color: #1C7060 !important;
}

a:hover {
    color: #0A332B !important;
}

/* Focus rings */
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: #01D860 !important;
    box-shadow: 0 0 0 0.2rem rgba(1, 216, 96, 0.2) !important;
}


/* ══════════════════════════════════
   LISTINGS / MESSAGES
   ══════════════════════════════════ */

/* Selected row */
.listing li.selected,
.listing tr.selected td,
table.listing tr.selected td,
.listing li.selected a {
    background-color: rgba(1, 216, 96, 0.08) !important;
}

/* Focus indicator */
.listing li.focused,
.listing tr.focused td {
    box-shadow: inset 3px 0 0 #01D860 !important;
}

/* Unread badge */
.unreadcount,
.badge,
.listing .unreadcount {
    background: #01D860 !important;
    color: #0A332B !important;
    font-weight: 600 !important;
}

/* List badge backgrounds */
span.unreadcount {
    background: #01D860 !important;
    color: #0A332B !important;
}

/* Recent message indicator */
.messagelist tr.unread td.subject span.date {
    color: #1C7060 !important;
}


/* ══════════════════════════════════
   CHECKBOXES / RADIO / TOGGLES
   ══════════════════════════════════ */

.custom-switch .custom-control-input:checked ~ .custom-control-label::before,
.custom-control-input:checked ~ .custom-control-label::before,
input[type="checkbox"]:checked + label:before {
    background-color: #01D860 !important;
    border-color: #01D860 !important;
}


/* ══════════════════════════════════
   MENUS / POPOVERS
   ══════════════════════════════════ */

.popover .menu li a:hover,
.popover .menu li.active a,
.popover .listing li:hover,
.menu a.active,
.menu a:hover {
    background: #01D860 !important;
    color: #0A332B !important;
}

/* Mobile header popover */
.popover .popover-header {
    background: #0A332B !important;
    color: #fff !important;
}


/* ══════════════════════════════════
   ALERTS / MESSAGES
   ══════════════════════════════════ */

.ui.alert.information,
.ui.alert.loading {
    background: rgba(1, 216, 96, 0.1) !important;
    border-color: #01D860 !important;
    color: #0A332B !important;
}

.ui.alert.information > i.icon:before {
    color: #01D860 !important;
}


/* ══════════════════════════════════
   QUOTA
   ══════════════════════════════════ */

.quota-widget .bar {
    background: #01D860 !important;
}


/* ══════════════════════════════════
   DATEPICKER
   ══════════════════════════════════ */

.ui-datepicker .ui-state-active {
    background: #01D860 !important;
    color: #0A332B !important;
}

.ui-datepicker .ui-state-highlight {
    background: rgba(1, 216, 96, 0.2) !important;
}


/* ══════════════════════════════════
   FLOATING ACTION BUTTON (mobile)
   ══════════════════════════════════ */

.floating-action-buttons a.button {
    background: #01D860 !important;
    color: #0A332B !important;
}

.floating-action-buttons a.button:hover {
    background: #00c050 !important;
}


/* ══════════════════════════════════
   SCROLLBAR
   ══════════════════════════════════ */

::-webkit-scrollbar-thumb {
    background: #1C7060 !important;
}

::-webkit-scrollbar-thumb:hover {
    background: #0A332B !important;
}


/* ══════════════════════════════════
   SPINNER
   ══════════════════════════════════ */

.spinner-border,
.loading:after {
    border-color: rgba(1, 216, 96, 0.2) !important;
    border-top-color: #01D860 !important;
}


/* ══════════════════════════════════
   DARK MODE
   ══════════════════════════════════ */

@media (prefers-color-scheme: dark) {
    body.task-login,
    body.task-login #layout-content,
    #login-form {
        background: #061f1a !important;
    }

    #layout-menu {
        background: #061f1a !important;
    }

    #layout-menu .menu li a:hover,
    #layout-menu .menu li a.active,
    #layout-menu .menu li.selected a {
        background: #0A332B !important;
    }

    .btn-primary {
        background: #01D860 !important;
        border-color: #01D860 !important;
        color: #0A332B !important;
    }

    a {
        color: #01D860 !important;
    }

    a:hover {
        color: #BEF51D !important;
    }

    .listing li.selected,
    .listing tr.selected td {
        background-color: rgba(1, 216, 96, 0.12) !important;
    }

    .unreadcount, .badge {
        background: #01D860 !important;
        color: #0A332B !important;
    }

    .popover .menu li a:hover,
    .menu a:hover {
        background: #01D860 !important;
        color: #0A332B !important;
    }
}


/* ══════════════════════════════════
   MISC REFINEMENTS
   ══════════════════════════════════ */

/* Border radius on inputs */
.form-control, .input-group {
    border-radius: 6px !important;
}

/* Softer table borders */
.listing td {
    border-color: #e8ede9 !important;
}

/* Logo in main UI (not login) */
#logo {
    max-height: 32px;
}

/* Product name text */
#product-name {
    font-family: 'Rubik', sans-serif !important;
    font-weight: 600 !important;
}