/**
 * Sivustamo Oy - Roundcube Webmail Custom Theme v2
 * Siistimpi versio: solid värit navigaatiossa, gradient vain aksentteina
 *
 * Brand Colors:
 *   Primary Blue:  #1640D6
 *   Accent Pink:   #ED5AB3
 *   Dark:          #101010
 *   Gray:          #444444
 *   Light BG:      #F5F5F5
 *   White:         #FFFFFF
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Urbanist:wght@700;800&display=swap');

/* ============================================
   CSS Variables
   ============================================ */
:root {
    --sv-primary: #1640D6;
    --sv-primary-dark: #1236B0;
    --sv-primary-hover: #1A4AE8;
    --sv-primary-bg: #EEF1FB;
    --sv-accent: #ED5AB3;
    --sv-dark: #101010;
    --sv-gray: #444444;
    --sv-gray-light: #888888;
    --sv-border: #E5E7EB;
    --sv-light-bg: #F5F5F5;
    --sv-white: #FFFFFF;
    --sv-gradient: linear-gradient(135deg, #1640D6 0%, #6B2FD6 50%, #ED5AB3 100%);
    --sv-gradient-h: linear-gradient(90deg, #1640D6 0%, #ED5AB3 100%);
}

/* ============================================
   Global Typography
   ============================================ */
body,
#layout,
.ui-widget {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.header-title,
.formcontainer .formheader {
    font-family: 'Urbanist', 'Inter', sans-serif !important;
    font-weight: 800 !important;
}

/* ============================================
   LOGIN PAGE
   Gradient-tausta vain täällä
   ============================================ */
html.login-page,
body.login-page,
#layout.login-page {
    background: var(--sv-gradient) !important;
}

#login-form {
    background: var(--sv-white);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(22, 64, 214, 0.15);
    overflow: hidden;
}

/* Ohut gradient-raita login-boksin yläreunassa */
#login-form::before {
    content: '';
    display: block;
    height: 4px;
    background: var(--sv-gradient-h);
}

#login-form .box-inner {
    padding: 2rem;
}

/* Login-painike: gradient */
#login-form #rcmloginsubmit,
#login-form .mainaction {
    background: var(--sv-gradient-h) !important;
    border: none !important;
    color: var(--sv-white) !important;
    border-radius: 8px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    padding: 0.6rem 1.5rem !important;
    transition: all 0.2s ease !important;
}

#login-form #rcmloginsubmit:hover,
#login-form .mainaction:hover {
    opacity: 0.9 !important;
    box-shadow: 0 4px 16px rgba(22, 64, 214, 0.3) !important;
}

/* Login input-kentät */
#login-form input[type="text"],
#login-form input[type="password"],
#login-form .custom-select {
    border-radius: 8px !important;
    border: 1.5px solid #ddd !important;
    font-family: 'Inter', sans-serif !important;
}

#login-form input[type="text"]:focus,
#login-form input[type="password"]:focus {
    border-color: var(--sv-primary) !important;
    box-shadow: 0 0 0 3px rgba(22, 64, 214, 0.12) !important;
}

/* ============================================
   TASK MENU (vasen sivupalkki)
   Solid tummansininen - EI gradienttia
   ============================================ */
#layout > .menu,
.toolbar.menu,
#taskmenu {
/*    background-color: var(--sv-primary) !important;*/
    background-image: none !important;
}

/* Valikkonapit */
#taskmenu a,
#taskmenu a.button {
    color: rgba(255, 255, 255, 0.75) !important;
    transition: all 0.15s ease !important;
}

#taskmenu a:hover,
#taskmenu a.button:hover {
    color: var(--sv-white) !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
}

#taskmenu a.button.selected {
    color: var(--sv-white) !important;
    background-color: rgba(255, 255, 255, 0.18) !important;
}

/* Taskmenu-ikonit */
#taskmenu a::before {
    color: inherit !important;
}

/* ============================================
   TOOLBAR (yläpalkki - sinisellä taustalla)
   Napit valkoisina
   ============================================ */

/* Toolbar-napit: valkoinen teksti/ikonit sinisellä taustalla */
.toolbar a.button,
.toolbar .button,
.content-header a.button,
#layout > .content > .header a.button,
.header a.button {
 /*   color: rgba(255, 255, 255, 0.85) !important;*/
    border-radius: 6px !important;
    transition: all 0.15s ease !important;
}

.toolbar a.button:hover,
.toolbar .button:hover,
.content-header a.button:hover,
#layout > .content > .header a.button:hover,
.header a.button:hover {
    color: var(--sv-white) !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
}

.toolbar a.button.disabled,
.toolbar .button.disabled {
    color: rgba(255, 255, 255, 0.35) !important;
    background: none !important;
}

/* Toolbar-ikonit (::before pseudo-element) */
.toolbar a.button::before,
.header a.button::before {
    color: inherit !important;
}

/* Header-otsikko 
html:not(.dark-mode) .header-title,
html:not(.dark-mode) #layout > .content > .header > .header-title {
    color: var(--sv-white) !important;
}
*/

/* ============================================
   SIDEBAR (kansiolista)
   ============================================ */
html:not(.dark-mode) #layout-sidebar,
html:not(.dark-mode) #layout > .sidebar {
    background-color: var(--sv-white) !important;
    border-right: 1px solid var(--sv-border) !important;
}

/* Sidebar header */
html:not(.dark-mode) .sidebar .header,
html:not(.dark-mode) #layout > .sidebar .header {
    background-color: var(--sv-white) !important;
    border-bottom: 1px solid var(--sv-border) !important;
}

/* Kansiolistan kohteet */
html:not(.dark-mode) #mailboxlist li a {
    color: var(--sv-gray) !important;
}

html:not(.dark-mode) #mailboxlist li a:hover {
    background-color: var(--sv-primary-bg) !important;
    color: var(--sv-primary) !important;
}

html:not(.dark-mode) #mailboxlist li a.focused,
html:not(.dark-mode) #mailboxlist li.selected > a {
    background-color: var(--sv-primary-bg) !important;
    color: var(--sv-primary) !important;
    font-weight: 600 !important;
}

/* Lukemattomat-badge: pinkki aksentti */
#mailboxlist .unreadcount {
    background-color: var(--sv-accent) !important;
    color: var(--sv-white) !important;
    border-radius: 12px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    min-width: 20px;
    text-align: center;
}

/* ============================================
   MESSAGE LIST
   ============================================ */
html:not(.dark-mode) #messagelist {
    background-color: var(--sv-white) !important;
}

html:not(.dark-mode) #messagelist tr {
    border-bottom: 1px solid #F0F0F0 !important;
}

html:not(.dark-mode) #messagelist tr.selected td {
    background-color: var(--sv-primary-bg) !important;
}

html:not(.dark-mode) #messagelist tr:hover td {
    background-color: #FAFAFA !important;
}

#messagelist tr.unread td.subject span {
    font-weight: 700 !important;
    color: var(--sv-dark) !important;
}

/* ============================================
   BUTTONS (Global)
   Gradient vain pääpainikkeissa
   ============================================ */
.btn-primary,
a.btn-primary,
button.btn-primary,
input.btn-primary {
    background: var(--sv-gradient-h) !important;
    border: none !important;
    color: var(--sv-white) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover {
    opacity: 0.9 !important;
    box-shadow: 0 4px 12px rgba(22, 64, 214, 0.25) !important;
}

.btn-primary:active,
.btn-primary:focus {
    opacity: 0.85 !important;
    box-shadow: 0 0 0 3px rgba(22, 64, 214, 0.15) !important;
}

.btn-secondary {
    border-radius: 8px !important;
    font-weight: 500 !important;
}

/* ============================================
   LINKS
   ============================================ */
html:not(.dark-mode) a {
    color: var(--sv-primary) !important;
}

html:not(.dark-mode) a:hover {
    color: var(--sv-primary-dark) !important;
}

/* ============================================
   COMPOSE
   ============================================ */
#composebody,
.mce-content-body {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
/*    color: var(--sv-dark) !important;*/
}

/* ============================================
   SEARCH BAR
   ============================================ */
.searchbar input,
#quicksearchbar input {
    border-radius: 20px !important;
    border: 1.5px solid var(--sv-border) !important;
    font-family: 'Inter', sans-serif !important;
}

.searchbar input:focus,
#quicksearchbar input:focus {
    border-color: var(--sv-primary) !important;
    box-shadow: 0 0 0 3px rgba(22, 64, 214, 0.1) !important;
}

/* ============================================
   CHECKBOXES
   ============================================ */
.custom-control-input:checked ~ .custom-control-label::before,
input[type="checkbox"]:checked {
    background-color: var(--sv-primary) !important;
    border-color: var(--sv-primary) !important;
}

/* ============================================
   DIALOGS / POPUPS
   Gradient-otsikkopalkki dialogeissa
   ============================================ */
.ui-dialog .ui-dialog-titlebar {
    background: var(--sv-gradient-h) !important;
    color: var(--sv-white) !important;
    font-family: 'Urbanist', sans-serif !important;
    font-weight: 800 !important;
}

.popupmenu,
.popover {
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}

/* ============================================
   FORM ELEMENTS
   ============================================ */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="number"],
select,
textarea,
.custom-select {
    border-radius: 6px !important;
    font-family: 'Inter', sans-serif !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
    border-color: var(--sv-primary) !important;
    box-shadow: 0 0 0 3px rgba(22, 64, 214, 0.1) !important;
}

/* ============================================
   QUOTA METER - gradient-aksentti
   ============================================ */
.quotadisplay .bar,
.ui-progressbar .ui-progressbar-value {
    background: var(--sv-gradient-h) !important;
    border-radius: 4px !important;
}

/* ============================================
   BADGES / TAGS
   ============================================ */
.badge-primary {
    background-color: var(--sv-primary) !important;
}

/* ============================================
   SCROLLBAR (Webkit) - light mode only
   ============================================ */
html:not(.dark-mode) ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html:not(.dark-mode) ::-webkit-scrollbar-track {
    background: var(--sv-light-bg);
}

html:not(.dark-mode) ::-webkit-scrollbar-thumb {
    background-color: #C4C4C4;
    border-radius: 4px;
}

html:not(.dark-mode) ::-webkit-scrollbar-thumb:hover {
    background-color: var(--sv-gray-light);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    #taskmenu {
        background-color: var(--sv-primary) !important;
        background-image: none !important;
    }

    #layout > .menu a.task-button {
        color: var(--sv-white) !important;
    }
}

/* ============================================
   DARK MODE
   Roundcube Elastic käyttää .dark-mode luokkaa
   ja/tai prefers-color-scheme: dark
   ============================================ */

/* Dark mode via class (Elastic's toggle) */
html.dark-mode body,
html.dark-mode #layout,
html.dark-mode .ui-widget {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* --- Sidebar / Kansiolista --- */
html.dark-mode #layout-sidebar,
html.dark-mode #layout > .sidebar {
    background-color: #1e1e1e !important;
    border-right-color: #333 !important;
}

html.dark-mode .sidebar .header,
html.dark-mode #layout > .sidebar .header {
    background-color: #1e1e1e !important;
    border-bottom-color: #333 !important;
}

html.dark-mode #mailboxlist li a {
    color: #ccc !important;
}

html.dark-mode #mailboxlist li a:hover {
    background-color: rgba(22, 64, 214, 0.2) !important;
    color: #fff !important;
}

html.dark-mode #mailboxlist li a.focused,
html.dark-mode #mailboxlist li.selected > a {
    background-color: rgba(22, 64, 214, 0.25) !important;
    color: #fff !important;
}

/* --- Viestilista --- */
html.dark-mode #messagelist {
    background-color: #1e1e1e !important;
}

html.dark-mode #messagelist tr {
    border-bottom-color: #333 !important;
}

html.dark-mode #messagelist tr td {
    color: #ccc !important;
}

html.dark-mode #messagelist tr:hover td {
    background-color: #2a2a2a !important;
}

html.dark-mode #messagelist tr.selected td {
    background-color: rgba(22, 64, 214, 0.2) !important;
}

html.dark-mode #messagelist tr.unread td.subject span {
    color: #fff !important;
}

/* --- Hakukenttä --- */
html.dark-mode .searchbar input,
html.dark-mode #quicksearchbar input {
    background-color: #2a2a2a !important;
    border-color: #444 !important;
    color: #eee !important;
}

html.dark-mode .searchbar input:focus,
html.dark-mode #quicksearchbar input:focus {
    border-color: var(--sv-primary) !important;
    box-shadow: 0 0 0 3px rgba(22, 64, 214, 0.2) !important;
}

/* --- Content / lukupaneeli --- */
html.dark-mode #layout > .content > .header,
html.dark-mode .header.content-header,
html.dark-mode #layout .content .header {
    border-bottom-color: #333 !important;
}

html.dark-mode .header-title,
html.dark-mode #layout > .content > .header > .header-title {
    color: #eee !important;
}

/* --- Lomake-elementit --- */
html.dark-mode input[type="text"],
html.dark-mode input[type="password"],
html.dark-mode input[type="email"],
html.dark-mode input[type="url"],
html.dark-mode input[type="search"],
html.dark-mode input[type="tel"],
html.dark-mode input[type="number"],
html.dark-mode select,
html.dark-mode textarea,
html.dark-mode .custom-select {
    background-color: #2a2a2a !important;
    border-color: #444 !important;
    color: #eee !important;
}

html.dark-mode input:focus,
html.dark-mode select:focus,
html.dark-mode textarea:focus {
    border-color: var(--sv-primary) !important;
    box-shadow: 0 0 0 3px rgba(22, 64, 214, 0.2) !important;
}

/* --- Linkit --- 
html.dark-mode a {
    color: #6B8AEE !important;
}
*/
html.dark-mode a:hover {
    color: #8BA4F5 !important;
}

/* --- Dialogit --- */
html.dark-mode .popupmenu,
html.dark-mode .popover {
    background-color: #2a2a2a !important;
    border-color: #444 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

/* --- Scrollbar dark --- */
html.dark-mode ::-webkit-scrollbar-track {
    background: #1e1e1e;
}

html.dark-mode ::-webkit-scrollbar-thumb {
    background-color: #555;
}

html.dark-mode ::-webkit-scrollbar-thumb:hover {
    background-color: #777;
}

/* --- Badge - pinkki näkyy hyvin myös darkissa --- */
html.dark-mode #mailboxlist .unreadcount {
    background-color: var(--sv-accent) !important;
    color: var(--sv-white) !important;
}

/* Myös prefers-color-scheme varalta */
@media (prefers-color-scheme: dark) {
    #mailboxlist li a {
        color: #ccc !important;
    }
    #mailboxlist li a:hover {
        color: #fff !important;
    }
    #mailboxlist li.selected > a {
        color: #fff !important;
    }
}

/* ============================================
   PRINT
   ============================================ */
@media print {
    #taskmenu,
    .toolbar,
    #layout-sidebar {
        display: none !important;
    }

    body {
        font-family: 'Inter', sans-serif !important;
        color: #000 !important;
    }
}