@charset "UTF-8";

/**
 * Nova — skin dla Roundcube inspirowany Outlookiem
 *
 * Warstwa wyglądu nakładana na skin "Elastic". Język wizualny:
 * płaskie, stykające się panele oddzielone cienką linią, prostokątne
 * zaokrąglenia (4–8 px), niebieski akcent, wskaźnik po lewej stronie
 * zaznaczonych i nieprzeczytanych elementów, gęsta ale oddychająca lista.
 *
 * Struktura:
 *   01. Tokeny / paleta
 *   02. Baza, typografia, scrollbary
 *   03. Powłoka aplikacji (layout, panele)
 *   04. Pasek zadań (lewa szyna)
 *   05. Sidebar + lista folderów
 *   06. Nagłówki, paski poleceń, przyciski
 *   07. Wyszukiwarka
 *   08. Lista wiadomości
 *   09. Podgląd wiadomości
 *   10. Kompozytor
 *   11. Listy (kontakty, ustawienia)
 *   12. Formularze
 *   13. Popovery, menu, dialogi
 *   14. Ekran logowania
 *   15. Drobiazgi (badge, tagi, quota, watermark)
 *   16. Tryb ciemny
 *   17. RWD i animacje
 */

/* Baza Elastic. UWAGA: w paczkach Roundcube katalog skins/elastic/styles/
   zawiera wyłącznie skompilowane pliki *.min.css (źródła to *.less) — plik
   "styles.css" tam nie istnieje. Roundcube podmienia .css -> .min.css we
   własnym kodzie PHP, ale przeglądarka rozwiązuje @import dosłownie, więc
   import musi wskazywać wprost na wersję .min. */
@import url("../../elastic/styles/styles.min.css");

/* ==========================================================================
   01. Tokeny / paleta
   ========================================================================== */

:root {
    /* Akcent — niebieski w duchu Fluent/Outlooka */
    --nv-accent:          #0f6cbd;
    --nv-accent-strong:   #115ea3;
    --nv-accent-soft:     rgba(15, 108, 189, .10);
    --nv-accent-softer:   rgba(15, 108, 189, .055);
    --nv-accent-ring:     rgba(15, 108, 189, .25);
    --nv-accent-2:        #2899f5;
    --nv-gradient:        linear-gradient(135deg, #0f6cbd 0%, #2899f5 100%);

    /* Tło i tekst wypełnionych kontrolek (przycisk główny, FAB, „Utwórz”).
       W trybie ciemnym zostaje głęboki błękit — jasny akcent tekstowy dałby
       na wypełnieniu zbyt mały kontrast. */
    --nv-accent-fill:     #0f6cbd;
    --nv-on-accent:       #ffffff;

    /* Tła i powierzchnie */
    --nv-bg:              #f0f0f0;
    --nv-surface:         #ffffff;
    --nv-surface-2:       #fafafa;
    --nv-surface-3:       #f0f0f0;
    --nv-hover:           rgba(0, 0, 0, .045);
    --nv-active:          rgba(0, 0, 0, .075);

    /* Tekst */
    --nv-text:            #242424;
    --nv-text-2:          #5a5a5a;
    --nv-text-3:          #8a8a8a;

    /* Obrysy */
    --nv-border:          #e1e1e1;
    --nv-border-soft:     #ededed;

    /* Semantyka */
    --nv-danger:          #c4314b;
    --nv-success:         #107c41;
    --nv-warning:         #f7a600;
    --nv-flag:            #c4314b;

    /* Promienie — Outlook jest prostokątny, nie „pigułkowy” */
    --nv-r-xs:  3px;
    --nv-r-sm:  4px;
    --nv-r-md:  6px;
    --nv-r-lg:  8px;
    --nv-r-xl:  12px;
    --nv-r-pill: 999px;

    /* Cienie — używane oszczędnie: menu, dialogi, logowanie */
    --nv-shadow-xs: 0 1px 2px rgba(0, 0, 0, .06);
    --nv-shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
    --nv-shadow-md: 0 4px 12px rgba(0, 0, 0, .10);
    --nv-shadow-lg: 0 8px 28px rgba(0, 0, 0, .16), 0 2px 6px rgba(0, 0, 0, .08);
    --nv-shadow-accent: none;

    /* Typografia */
    --nv-font: "Segoe UI Variable Text", "Segoe UI", Inter, -apple-system,
               BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    --nv-font-mono: "Cascadia Code", "JetBrains Mono", Consolas, "SF Mono", ui-monospace, monospace;

    /* Metryka.
       --nv-gutter / --nv-panel-radius / --nv-panel-shadow sterują tym, czy
       panele stykają się (domyślnie, jak w Outlooku), czy unoszą jako karty. */
    --nv-gutter: 0px;
    --nv-panel-radius: 0px;
    --nv-panel-shadow: none;
    --nv-rail-indicator: 3px;
    --nv-speed: 120ms;
    --nv-ease: cubic-bezier(.33, 0, .2, 1);
}

/* ==========================================================================
   02. Baza, typografia, scrollbary
   ========================================================================== */

html,
body {
    font-family: var(--nv-font);
    font-size: 14px;
    line-height: 1.45;
    color: var(--nv-text);
    background: var(--nv-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body,
#layout,
.scroller {
    background-color: transparent;
}

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

h1, h2, h3, h4 { letter-spacing: -.005em; }

pre, code, kbd, samp, .text-mono { font-family: var(--nv-font-mono); }

::selection { background: var(--nv-accent-soft); }

/* Scrollbary — cienkie, bez toru */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, .28) transparent;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .24);
    border: 3px solid transparent;
    border-radius: var(--nv-r-pill);
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, .42); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* Widoczny, spójny focus dla klawiatury */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--nv-accent);
    outline-offset: -1px;
    border-radius: var(--nv-r-sm);
}

/* ==========================================================================
   03. Powłoka aplikacji — stykające się panele
   ========================================================================== */

#layout {
    background: var(--nv-bg);
    padding: var(--nv-gutter);
    gap: var(--nv-gutter);
    box-sizing: border-box;
}

#layout > #layout-menu,
#layout > #layout-sidebar,
#layout > #layout-list,
#layout > #layout-content {
    border-radius: var(--nv-panel-radius);
    box-shadow: var(--nv-panel-shadow);
}

#layout > #layout-menu {
    background: var(--nv-surface-2);
    border-right: 1px solid var(--nv-border);
}

#layout > #layout-sidebar {
    background: var(--nv-surface-2);
    border-right: 1px solid var(--nv-border);
}

#layout > #layout-list {
    background: var(--nv-surface);
    border-right: 1px solid var(--nv-border);
}

#layout > #layout-content {
    background: var(--nv-surface);
}

/* Uchwyt zmiany szerokości kolumn */
.column-resizer:hover { background: var(--nv-accent-soft); }

/* ==========================================================================
   04. Pasek zadań (lewa szyna)
   ========================================================================== */

#layout-menu .popover-header { display: none; }

#taskmenu {
    background: transparent;
    padding: 0 0 4px;
}

#taskmenu a {
    position: relative;
    color: var(--nv-text-2);
    border: 0;
    border-radius: var(--nv-r-sm);
    margin: 1px 6px;
    padding: 7px 2px;
    font-size: 10.5px;
    font-weight: 600;
    transition: background var(--nv-speed) var(--nv-ease),
                color var(--nv-speed) var(--nv-ease);
}

#taskmenu a:before {
    font-size: 1.3em;
    line-height: 1.15;
}

#taskmenu a:hover {
    background: var(--nv-hover);
    color: var(--nv-text);
}

/* Zaznaczony moduł: wypełnienie + belka akcentu przy lewej krawędzi.
   Belka jako inset box-shadow, bo Elastic tnie zawartość kafelka
   (overflow: hidden) i element pseudo-:after byłby niewidoczny. */
#taskmenu a.selected,
#taskmenu a.selected:hover,
#taskmenu a:focus {
    background: var(--nv-accent-soft);
    color: var(--nv-accent);
    box-shadow: inset var(--nv-rail-indicator) 0 0 var(--nv-accent);
}

#taskmenu a.selected:before { color: var(--nv-accent); }

/* Przycisk główny „Utwórz” — jedyny wypełniony przycisk w szynie.
   Elastic maluje .action-buttons ciemnym tłem; nadpisujemy je w całości. */
#taskmenu .action-buttons {
    display: block;
    background: transparent;
    padding: 8px 0 6px;
}

#taskmenu .action-buttons a.compose,
#taskmenu .action-buttons a.compose:focus {
    background: var(--nv-accent-fill);
    color: var(--nv-on-accent);
    border-radius: var(--nv-r-md);
    margin: 0 6px;
    padding: 9px 2px;
    box-shadow: none;
}

#taskmenu .action-buttons a.compose:before,
#taskmenu .action-buttons a.compose:hover:before { color: var(--nv-on-accent); }

#taskmenu .action-buttons a.compose:hover {
    background: var(--nv-accent-strong);
    color: var(--nv-on-accent);
}

/* Dolna grupa: tryb ciemny / o programie / wyloguj.
   Elastic ustawia tu ciemne tło paska zadań — zdejmujemy je. */
#taskmenu .special-buttons {
    background: transparent;
    width: 100%;
    padding: 5px 0 4px;
    border-top: 1px solid var(--nv-border);
}

#taskmenu .special-buttons a { color: var(--nv-text-3); }
#taskmenu .special-buttons a:hover { color: var(--nv-text); }

#taskmenu a.logout { color: var(--nv-text-3) !important; }
#taskmenu a.logout:hover { color: var(--nv-danger) !important; }

/* ==========================================================================
   05. Sidebar i lista folderów
   ========================================================================== */

#layout-sidebar .scroller { padding: 4px 6px 8px; }

#layout-sidebar > .header,
#layout-sidebar > .footer {
    background: var(--nv-surface-2);
}

.listing li,
.listing tr { border: 0; }

/* Uwaga: nie ustawiamy tu padding-left — Elastic buduje z niego wcięcia
   kolejnych poziomów drzewa folderów (ul.treelist li a). Nadpisanie go
   spłaszczyłoby hierarchię. */
#mailboxlist li > a,
#folderlist-content .listing li > a,
#layout-sidebar .listing li > a {
    padding-right: 10px;
    margin: 1px 0;
    line-height: 32px;
    border-radius: var(--nv-r-sm);
    border-left: 0;
    color: var(--nv-text);
    font-weight: 400;
    transition: background var(--nv-speed) var(--nv-ease),
                color var(--nv-speed) var(--nv-ease);
}

#layout-sidebar .listing li > a:hover {
    background: var(--nv-hover);
    color: var(--nv-text);
}

#layout-sidebar .listing li.selected > a,
#layout-sidebar .listing li.selected > a:hover,
#mailboxlist li.selected > a {
    background: var(--nv-accent-soft);
    color: var(--nv-accent);
    font-weight: 600;
    box-shadow: inset var(--nv-rail-indicator) 0 0 var(--nv-accent);
}

#layout-sidebar .listing li > a:before,
#mailboxlist li > a:before { color: var(--nv-text-3); }

#layout-sidebar .listing li.selected > a:before,
#mailboxlist li.selected > a:before { color: var(--nv-accent); }

/* Foldery z nieprzeczytanymi */
#mailboxlist li.unread > a { color: var(--nv-text); font-weight: 600; }

/* Licznik nieprzeczytanych — sama liczba w kolorze akcentu, bez plakietki */
.listing li > a .unreadcount,
#mailboxlist .unreadcount,
#mailboxlist li.recent > a > .unreadcount {
    background: transparent;
    color: var(--nv-accent);
    border-radius: 0;
    font-size: 12px;
    font-weight: 600;
    min-width: 0;
    padding: 0 4px;
    box-shadow: none;
}

/* Zagnieżdżone foldery — subtelna prowadnica */
#mailboxlist ul { position: relative; }
#mailboxlist ul:before {
    content: "";
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: 18px;
    width: 1px;
    background: var(--nv-border);
}

/* Widżet zajętości skrzynki w stopce sidebaru */
#layout-sidebar > .footer { border-top: 1px solid var(--nv-border); }

/* ==========================================================================
   06. Nagłówki, paski poleceń, przyciski
   ========================================================================== */

#layout > div > .header {
    background: var(--nv-surface);
    border-bottom: 1px solid var(--nv-border);
    font-weight: 600;
}

/* Niższy, „poleceniowy” pasek nagłówka — tylko od tabletu w górę.
   Na wąskich ekranach zostawiamy metrykę Elastica (większe pola dotykowe). */
@media screen and (min-width: 768px) {
    #layout > div > .header {
        height: 48px;
        min-height: 48px;
        line-height: 48px;
    }
}

#layout > div > .footer,
#layout > div > .footer.toolbar,
.toolbar {
    background: var(--nv-surface);
    border-color: var(--nv-border);
}

/* Tytuły paneli wyrównane do lewej, nie wyśrodkowane */
#layout > div > .header .header-title {
    flex: 1;
    text-align: left;
    margin: 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--nv-text);
}

#layout-sidebar > .header .header-title.username {
    font-size: 13.5px;
    color: var(--nv-text);
}

/* Przyciski paska poleceń */
.header a.button,
.toolbar a.button,
.toolbar > a,
.header > a.button {
    color: var(--nv-text-2);
    border: 0;
    border-radius: var(--nv-r-sm);
    transition: background var(--nv-speed) var(--nv-ease),
                color var(--nv-speed) var(--nv-ease);
}

.header a.button:hover,
.toolbar a.button:hover,
.toolbar > a:hover {
    background: var(--nv-hover);
    color: var(--nv-text);
}

.header a.button:active,
.toolbar a.button:active { background: var(--nv-active); }

.header a.button.disabled,
.toolbar a.button.disabled,
.toolbar > a.disabled {
    color: var(--nv-text-3);
    opacity: .45;
}

/* Akcje główne w paskach poleceń dostają kolor akcentu */
.header a.button.create,
.header a.button.compose,
.toolbar a.button.create,
.toolbar a.button.compose,
.toolbar > a.create:before,
.toolbar > a.compose:before {
    color: var(--nv-accent);
}

/* Bootstrapowe przyciski Elastic */
.btn,
button.btn,
input.btn {
    border-radius: var(--nv-r-sm);
    font-weight: 600;
    padding: 7px 16px;
    border: 1px solid transparent;
    box-shadow: none;
    transition: background var(--nv-speed) var(--nv-ease),
                border-color var(--nv-speed) var(--nv-ease);
}

.btn-primary,
button.btn-primary,
input.btn-primary,
.btn.mainaction {
    background: var(--nv-accent-fill);
    border-color: var(--nv-accent-fill);
    color: var(--nv-on-accent);
    box-shadow: none;
}

.btn-primary:hover,
.btn.mainaction:hover {
    background: var(--nv-accent-strong);
    border-color: var(--nv-accent-strong);
    color: var(--nv-on-accent);
}

.btn-secondary,
button.btn-secondary,
input.btn-secondary {
    background: var(--nv-surface);
    border-color: var(--nv-border);
    color: var(--nv-text);
}

.btn-secondary:hover {
    background: var(--nv-surface-3);
    border-color: var(--nv-border);
    color: var(--nv-text);
}

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

/* Pływający przycisk akcji (mobile) */
.floating-action-buttons a.button,
.floating-action-buttons > a {
    background: var(--nv-accent-fill);
    color: var(--nv-on-accent);
    border-radius: var(--nv-r-lg);
    box-shadow: var(--nv-shadow-md);
}

/* ==========================================================================
   07. Wyszukiwarka
   ========================================================================== */

.searchbar,
#quicksearchbar {
    background: var(--nv-surface);
    border: 0;
    border-bottom: 1px solid var(--nv-border);
    border-radius: 0;
    padding: 6px 8px;
}

.searchbar > input,
.searchbar input[type="text"],
#quicksearchbox,
#rcmqsearchbox {
    background: var(--nv-surface-3);
    border: 1px solid transparent;
    border-radius: var(--nv-r-sm);
    box-shadow: none;
    padding: 5px 10px;
    font-size: 13.5px;
    color: var(--nv-text);
    transition: background var(--nv-speed) var(--nv-ease),
                border-color var(--nv-speed) var(--nv-ease),
                box-shadow var(--nv-speed) var(--nv-ease);
}

.searchbar > input:focus,
#quicksearchbox:focus,
#rcmqsearchbox:focus {
    background: var(--nv-surface);
    border-color: var(--nv-accent);
    box-shadow: 0 0 0 2px var(--nv-accent-ring);
    outline: none;
}

.searchbar input::placeholder { color: var(--nv-text-3); }

.searchbar a.button,
.searchbar > a {
    border-radius: var(--nv-r-sm);
    color: var(--nv-text-2);
}

.searchbar .searchoptions,
#searchmenulink { color: var(--nv-text-2); }

/* ==========================================================================
   08. Lista wiadomości
   ========================================================================== */

#messagelist,
table.messagelist {
    border-collapse: collapse;
    border-spacing: 0;
}

table.messagelist tbody tr,
#messagelist tbody tr {
    background: transparent;
    border: 0;
    transition: background var(--nv-speed) var(--nv-ease);
}

table.messagelist tbody tr > td,
#messagelist tbody tr > td {
    border: 0;
    border-bottom: 1px solid var(--nv-border-soft);
    border-radius: 0;
    background: transparent;
    color: var(--nv-text-2);
    padding-top: 5px;
    padding-bottom: 7px;
}

table.messagelist tbody tr:hover > td,
#messagelist tbody tr:hover > td {
    background: var(--nv-hover);
}

/* Nieprzeczytane — belka akcentu przy lewej krawędzi wiersza */
table.messagelist tbody tr.unread > td:first-child,
#messagelist tbody tr.unread > td:first-child {
    box-shadow: inset var(--nv-rail-indicator) 0 0 var(--nv-accent);
}

/* Zaznaczenie */
table.messagelist tbody tr.selected > td,
#messagelist tbody tr.selected > td,
table.messagelist tbody tr.focused > td {
    background: var(--nv-accent-soft);
    color: var(--nv-text);
}

table.messagelist tbody tr.selected > td:first-child,
#messagelist tbody tr.selected > td:first-child {
    box-shadow: inset var(--nv-rail-indicator) 0 0 var(--nv-accent);
}

/* Układ wiersza: kropka statusu na początku, data przy prawej krawędzi */
.messagelist td.subject > span.status { order: -1; }

.messagelist td.subject > span.fromto {
    padding-left: 0;
    padding-right: .5rem;
    color: var(--nv-text);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.9em;
}

.messagelist td.subject > span.date,
.messagelist td.subject > span.size {
    color: var(--nv-text-3);
    font-size: 11.5px;
    line-height: 1.9em;
    font-variant-numeric: tabular-nums;
}

.messagelist td.subject > span.subject {
    color: var(--nv-text-2);
    font-size: 13px;
    line-height: 1.45em;
}

.messagelist td.subject > span.subject a { color: inherit; }

/* Oflagowana wiadomość: Elastic barwi cały wiersz na czerwono — u nas
   wyróżnia ją sama ikona flagi, jak w Outlooku. Reguła musi stać przed
   regułami dla nieprzeczytanych, żeby te miały pierwszeństwo. */
.messagelist tr.flagged > td { color: var(--nv-text-2); }
.messagelist tr.flagged td.subject > span.fromto { color: var(--nv-text); }
.messagelist tr.flagged td.subject > span.subject,
.messagelist tr.flagged td.subject > span.subject a { color: var(--nv-text-2); }
.messagelist tr.flagged td.subject > span.date { color: var(--nv-text-3); }

/* Nieprzeczytana: nadawca pogrubiony, temat w kolorze akcentu */
.messagelist tr.unread td.subject > span.fromto { font-weight: 700; }

.messagelist tr.unread td.subject > span.subject,
.messagelist tr.unread td.subject > span.subject a {
    color: var(--nv-accent);
    font-weight: 600;
}

/* Kropka statusu */
.messagelist td.subject span.msgicon.status { color: var(--nv-text-3); }
.messagelist td.subject span.msgicon.status.unread:before { color: var(--nv-accent); }

/* Flagi, załączniki, wątki */
.messagelist td.flags span.flag { color: var(--nv-text-3); }
.messagelist tr.flagged td.flags span.flag:before,
.messagelist span.flagged:before { color: var(--nv-flag); }
.messagelist td.flags span.attachment:before { color: var(--nv-text-3); }
.messagelist tr.thread td.threads div:before { color: var(--nv-text-3); }

/* Puste widoki */
.boxtitle,
.no-messages,
#messagelist tbody tr.message.no-results td {
    color: var(--nv-text-3);
}

/* ==========================================================================
   09. Podgląd wiadomości
   ========================================================================== */

#messageheader,
.message-part,
#messagebody,
#messagecontframe {
    background: var(--nv-surface);
}

#messageheader {
    border-bottom: 1px solid var(--nv-border);
    padding: 16px 24px;
}

#messageheader .subject,
#messageheader h2.subject {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--nv-text);
    margin-bottom: 8px;
}

#messageheader .header-links a,
#messageheader .header-summary { color: var(--nv-text-2); }

#messageheader .rcmContactAddress,
.rcmContactAddress { color: var(--nv-text-2); }
.rcmContactAddress:hover { color: var(--nv-accent); }

/* Awatar nadawcy */
#messageheader .contact-header .image,
#messageheader img.contactphoto,
.contactphoto {
    border-radius: var(--nv-r-pill);
    background: var(--nv-accent);
    box-shadow: none;
}

/* Treść wiadomości */
#messagebody,
.message-htmlpart,
.message-part {
    font-size: 14px;
    line-height: 1.6;
    color: var(--nv-text);
    padding: 16px 24px;
}

/* Elastic obrysowuje cytaty z lewej i z prawej (kolor zależny od poziomu
   zagnieżdżenia). Zostawiamy pojedynczą belkę po lewej. */
.message-part blockquote,
.message-htmlpart blockquote,
#messagebody blockquote {
    border: 0;
    border-left: 3px solid var(--nv-border);
    background: transparent;
    border-radius: 0;
    padding: 4px 0 4px 14px;
    margin: 10px 0;
    color: var(--nv-text-2);
}

/* Załączniki jako kafelki */
#attachment-list li,
.attachmentslist li {
    background: var(--nv-surface);
    border: 1px solid var(--nv-border);
    border-radius: var(--nv-r-sm);
    margin: 4px 6px 4px 0;
    padding: 7px 12px;
    transition: border-color var(--nv-speed) var(--nv-ease),
                background var(--nv-speed) var(--nv-ease);
}

#attachment-list li:hover,
.attachmentslist li:hover {
    border-color: var(--nv-accent);
    background: var(--nv-accent-softer);
}

/* Paski ostrzeżeń (obrazki zewnętrzne, spam, podpis) */
.ui.alert,
#remote-objects-message,
.messageerror,
.notice {
    border-radius: var(--nv-r-sm);
    border: 1px solid var(--nv-border);
    box-shadow: none;
}

.ui.alert.alert-warning { border-left: 3px solid var(--nv-warning); }
.ui.alert.alert-danger  { border-left: 3px solid var(--nv-danger); }
.ui.alert.alert-success { border-left: 3px solid var(--nv-success); }
.ui.alert.alert-info    { border-left: 3px solid var(--nv-accent); }

/* ==========================================================================
   10. Kompozytor
   ========================================================================== */

#compose-content,
#composeheaders,
#composebody,
#compose-attachments {
    background: var(--nv-surface);
}

#composeheaders td.title,
.compose-headers td.title { color: var(--nv-text-2); font-weight: 600; }

#composeheaders .form-control,
#composeheaders input,
.compose-headers input {
    border-radius: var(--nv-r-sm);
}

.editor-toolbar,
.tox .tox-toolbar,
.tox-toolbar__primary {
    background: var(--nv-surface-2);
    border-radius: var(--nv-r-sm);
}

.tox.tox-tinymce {
    border: 1px solid var(--nv-border);
    border-radius: var(--nv-r-sm);
}

/* Odbiorcy jako pigułki */
.recipient-input .recipient,
.compose-headers .recipient {
    background: var(--nv-accent-soft);
    color: var(--nv-accent-strong);
    border: 0;
    border-radius: var(--nv-r-pill);
    padding: 2px 10px;
    font-weight: 600;
}

/* ==========================================================================
   11. Listy: kontakty, ustawienia, foldery
   ========================================================================== */

table.listing tbody tr,
.listing tbody tr {
    border: 0;
    transition: background var(--nv-speed) var(--nv-ease);
}

table.listing tbody tr > td,
.listing tbody tr > td {
    border: 0;
    border-bottom: 1px solid var(--nv-border-soft);
}

table.listing tbody tr:hover > td { background: var(--nv-hover); }

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

table.listing tbody tr.selected > td:first-child {
    box-shadow: inset var(--nv-rail-indicator) 0 0 var(--nv-accent);
}

/* Nagłówki grup i sekcji */
.listing thead td,
.listing thead th,
.listing li.separator {
    color: var(--nv-text-3);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: transparent;
}

/* Kafelki ustawień */
#settings-sections .listing li > a,
#sections-table tbody tr > td {
    border-radius: var(--nv-r-sm);
}

/* ==========================================================================
   12. Formularze
   ========================================================================== */

input.form-control,
select.form-control,
textarea.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
select,
textarea {
    background: var(--nv-surface);
    border: 1px solid var(--nv-border);
    border-radius: var(--nv-r-sm);
    color: var(--nv-text);
    padding: 8px 11px;
    font-family: inherit;
    font-size: 14px;
    box-shadow: none;
    transition: border-color var(--nv-speed) var(--nv-ease),
                box-shadow var(--nv-speed) var(--nv-ease);
}

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

input::placeholder,
textarea::placeholder { color: var(--nv-text-3); }

.input-group > .input-group-append > .btn,
.input-group > .input-group-prepend > .btn {
    border-radius: var(--nv-r-sm);
}

/* Przełączniki i checkboxy */
.custom-switch .custom-control-label:before,
.custom-control-label:before {
    border-color: var(--nv-border);
    background: var(--nv-surface-3);
}

.custom-control-input:checked ~ .custom-control-label:before {
    background: var(--nv-accent);
    border-color: var(--nv-accent);
}

.custom-control-input:focus ~ .custom-control-label:before {
    box-shadow: 0 0 0 2px var(--nv-accent-ring);
}

/* Tabele właściwości w ustawieniach */
table.propform td.title,
.propform label { color: var(--nv-text-2); font-weight: 600; }

fieldset legend {
    color: var(--nv-text);
    font-weight: 600;
    font-size: 14.5px;
}

/* ==========================================================================
   13. Popovery, menu kontekstowe, dialogi
   ========================================================================== */

.popover,
#rcmContextMenu,
.popupmenu {
    background: var(--nv-surface);
    border: 1px solid var(--nv-border);
    border-radius: var(--nv-r-md);
    box-shadow: var(--nv-shadow-lg);
    overflow: hidden;
    padding: 4px;
}

.popover .popover-header {
    background: transparent;
    border-bottom: 1px solid var(--nv-border-soft);
    color: var(--nv-text-3);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.popover .listing li > a,
ul.toolbarmenu li > a,
.popupmenu li > a {
    border-radius: var(--nv-r-sm);
    color: var(--nv-text);
    padding: 7px 12px;
    font-weight: 400;
}

.popover .listing li > a:hover,
ul.toolbarmenu li > a:hover,
.popupmenu li > a:hover {
    background: var(--nv-hover);
    color: var(--nv-text);
}

ul.toolbarmenu li > a.disabled { color: var(--nv-text-3); }

/* Dialogi */
.ui-dialog {
    border: 0;
    border-radius: var(--nv-r-lg);
    box-shadow: var(--nv-shadow-lg);
    overflow: hidden;
    background: var(--nv-surface);
}

.ui-dialog .ui-dialog-titlebar {
    background: var(--nv-surface);
    border-bottom: 1px solid var(--nv-border);
    color: var(--nv-text);
    font-weight: 600;
    font-size: 15px;
    padding: 14px 20px;
}

.ui-dialog .ui-dialog-content { background: var(--nv-surface); color: var(--nv-text); }

.ui-dialog .ui-dialog-buttonpane {
    background: var(--nv-surface-2);
    border-top: 1px solid var(--nv-border);
}

.ui-widget-overlay {
    background: rgba(0, 0, 0, .35);
    opacity: 1;
}

/* Powiadomienia */
#messagestack div,
.toast {
    border-radius: var(--nv-r-sm);
    box-shadow: var(--nv-shadow-md);
    font-weight: 600;
    border: 0;
}

#messagestack div.confirmation { background: var(--nv-success); }
#messagestack div.error { background: var(--nv-danger); }
#messagestack div.warning { background: var(--nv-warning); color: #3a2a00; }
#messagestack div.loading { background: var(--nv-text); }

/* ==========================================================================
   14. Ekran logowania
   ========================================================================== */

body.task-login,
body.task-login #layout,
body.task-login #layout-content {
    background: var(--nv-bg);
}

body.task-login #layout,
body.task-login #layout-content {
    background-image:
        radial-gradient(46rem 30rem at 12% 8%, rgba(15, 108, 189, .14), transparent 60%),
        radial-gradient(38rem 26rem at 88% 92%, rgba(40, 153, 245, .12), transparent 60%);
    background-repeat: no-repeat;
}

#login-form {
    position: relative;
    z-index: 1;
}

#login-form .box-inner {
    background: var(--nv-surface);
    border: 1px solid var(--nv-border);
    border-radius: var(--nv-r-xl);
    box-shadow: var(--nv-shadow-lg);
    padding: 32px 32px 28px;
    max-width: 400px;
    width: 100%;
}

#login-form .box-inner img.logo,
#login-form img.logo {
    max-height: 52px;
    margin-bottom: 22px;
}

#login-form .input-group { margin-bottom: 12px; }

#login-form input.form-control {
    padding: 11px 14px;
    font-size: 15px;
}

#login-form .btn-primary,
#login-form input[type="submit"] {
    width: 100%;
    padding: 11px 18px;
    font-size: 15px;
    border-radius: var(--nv-r-sm);
    margin-top: 6px;
}

#login-form .box-inner .input-group-prepend .input-group-text {
    background: var(--nv-surface-3);
    border-color: var(--nv-border);
    border-radius: var(--nv-r-sm) 0 0 var(--nv-r-sm);
    color: var(--nv-text-3);
}

#login-footer,
#login-form + .footer { color: var(--nv-text-3); }

/* ==========================================================================
   15. Drobiazgi
   ========================================================================== */

/* Pusty stan / znak wodny */
.watermark,
#messagecontframe.watermark {
    background-color: var(--nv-surface);
    opacity: .5;
}

/* Quota */
#quotadisplay { color: var(--nv-text-2); }
.quota_bg { background: var(--nv-surface-3); border-radius: var(--nv-r-pill); }
.quota_text { border-radius: var(--nv-r-pill); }
.quota_high { background: var(--nv-danger); }
.quota_mid  { background: var(--nv-warning); }
.quota_low  { background: var(--nv-success); }

/* Etykiety / tagi wiadomości */
.tagbox,
span.tag,
.message-tag {
    border-radius: var(--nv-r-sm);
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 600;
    background: var(--nv-accent-soft);
    color: var(--nv-accent-strong);
}

/* Paginacja / licznik listy */
.pagenav,
.pagenav .countdisplay { color: var(--nv-text-2); font-variant-numeric: tabular-nums; }

/* Separatory */
hr { border: 0; border-top: 1px solid var(--nv-border-soft); }

/* Loader */
#rcmloading,
.ui-loader { border-radius: var(--nv-r-sm); box-shadow: var(--nv-shadow-md); }

/* ==========================================================================
   16. Tryb ciemny

   Roundcube dodaje klasę "dark-mode" do <html>; część wersji i wtyczek
   ustawia ją na <body>. Tokeny definiujemy raz, dla obu wariantów.
   ========================================================================== */

html.dark-mode,
body.dark-mode,
.dark-mode #layout {
    --nv-accent:        #479ef5;
    --nv-accent-strong: #62abf5;
    --nv-accent-soft:   rgba(71, 158, 245, .16);
    --nv-accent-softer: rgba(71, 158, 245, .08);
    --nv-accent-ring:   rgba(71, 158, 245, .32);
    --nv-accent-2:      #62abf5;
    --nv-gradient:      linear-gradient(135deg, #0f6cbd 0%, #479ef5 100%);
    --nv-accent-fill:   #0f6cbd;
    --nv-on-accent:     #ffffff;

    --nv-bg:            #141414;
    --nv-surface:       #1f1f1f;
    --nv-surface-2:     #1a1a1a;
    --nv-surface-3:     #2b2b2b;
    --nv-hover:         rgba(255, 255, 255, .06);
    --nv-active:        rgba(255, 255, 255, .1);

    --nv-text:          #f0f0f0;
    --nv-text-2:        #adadad;
    --nv-text-3:        #808080;

    --nv-border:        #363636;
    --nv-border-soft:   #2b2b2b;

    --nv-danger:        #e37d80;
    --nv-success:       #54b054;
    --nv-warning:       #f7a600;
    --nv-flag:          #e37d80;

    --nv-shadow-xs: 0 1px 2px rgba(0, 0, 0, .5);
    --nv-shadow-sm: 0 1px 3px rgba(0, 0, 0, .55);
    --nv-shadow-md: 0 4px 12px rgba(0, 0, 0, .6);
    --nv-shadow-lg: 0 8px 28px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .5);
    --nv-shadow-accent: none;
}

html.dark-mode,
html.dark-mode body {
    background: var(--nv-bg);
    color: var(--nv-text);
}

/* Korekty specyficzności.
   Elastic ma własny, kompletny zestaw reguł „html.dark-mode ...”, który bije
   reguły Novy pisane bez tej klasy. Powtarzamy więc tylko te miejsca, w
   których Elastic przebija Novę — wartości nadal pochodzą z tokenów, więc
   paleta pozostaje w jednym miejscu. */

html.dark-mode #layout > div > .header,
html.dark-mode #layout > div > .footer {
    background-color: var(--nv-surface);
    border-color: var(--nv-border);
}

html.dark-mode #layout-sidebar > .header,
html.dark-mode #layout-sidebar > .footer {
    background-color: var(--nv-surface-2);
}

html.dark-mode .searchbar {
    background-color: var(--nv-surface);
    border-bottom-color: var(--nv-border);
}

html.dark-mode #taskmenu a:hover,
html.dark-mode .header a.button.icon:not(.disabled):hover,
html.dark-mode .header a.button.icon:not(.disabled):focus,
html.dark-mode .popupmenu .listing li > a:not(.disabled):hover {
    background-color: var(--nv-hover);
    color: var(--nv-text);
}

html.dark-mode #taskmenu a.selected,
html.dark-mode #taskmenu a.selected:hover {
    background-color: var(--nv-accent-soft);
    color: var(--nv-accent);
}

html.dark-mode #taskmenu .action-buttons a.compose {
    background-color: var(--nv-accent-fill);
    color: var(--nv-on-accent);
}

html.dark-mode #taskmenu .action-buttons a.compose:hover {
    background-color: var(--nv-accent-strong);
}

html.dark-mode .messagelist tr:not(.flagged):not(.deleted) td.subject span.fromto {
    color: var(--nv-text);
}

html.dark-mode .messagelist tr:not(.flagged):not(.deleted) td.subject span.date,
html.dark-mode .messagelist tr:not(.flagged):not(.deleted) td.subject span.size {
    color: var(--nv-text-3);
}

html.dark-mode .messagelist tr:not(.flagged):not(.deleted) td.subject span.msgicon.status.unread:before {
    color: var(--nv-accent);
}

html.dark-mode .attachmentslist,
html.dark-mode #attachment-list {
    background-color: transparent;
}

html.dark-mode * {
    scrollbar-color: rgba(255, 255, 255, .28) transparent;
}

html.dark-mode ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .22);
    background-clip: content-box;
}

html.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, .42);
    background-clip: content-box;
}

html.dark-mode .ui-widget-overlay { background: rgba(0, 0, 0, .6); }

html.dark-mode #messagestack div.warning { color: #211800; }

html.dark-mode body.task-login #layout,
html.dark-mode body.task-login #layout-content {
    background-image:
        radial-gradient(46rem 30rem at 12% 8%, rgba(15, 108, 189, .30), transparent 60%),
        radial-gradient(38rem 26rem at 88% 92%, rgba(71, 158, 245, .18), transparent 60%);
    background-repeat: no-repeat;
}

/* Treść HTML wiadomości zostaje na jasnym tle — maile rzadko mają własny
   wariant ciemny, a inwersja psuje ich układ. */
html.dark-mode #messagecontframe { background: #ffffff; }

/* ==========================================================================
   17. RWD i animacje
   ========================================================================== */

@media screen and (max-width: 767px) {
    #taskmenu a { margin: 0; }
    #taskmenu a.selected { box-shadow: none; }
    #taskmenu .action-buttons a.compose { margin: 0; border-radius: 0; }
    #taskmenu .special-buttons { border-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *:before,
    *:after {
        animation-duration: .001ms;
        animation-iteration-count: 1;
        transition-duration: .001ms;
    }
}

/* Wydruk */
@media print {
    body, #layout, #layout-content, #messagebody { background: #fff; }
    #layout-menu, #layout-sidebar, #layout-list, .toolbar, .header .buttons { display: none; }
}