/* =====================================================================
   ZWORKS-arculat — „ZilaMail by ZWORKS, powered by Roundcube"

   A színek a ~/dev/zila-ui design-tokenjeiből valók, nem találgatásból:
     --z-zw #f5c518 (ZW-védjegy, MINDIG sárga)  ·  --z-zw-t #141414
     accent rgb(29,158,117) smaragd
     sötét: bg #060709 · panel #14181f · vonal #2d3541 · szöveg #e8eaee · halk #a6adba
     sarok: 14px

   ⭐ SÖTÉT MÓD: `html.dark-mode` — ezt az Elastic maga teszi ki (colorMode süti).
      NEM `@media (prefers-color-scheme)`: az hazudik, ha a felhasználónak
      explicit `colorMode=light` sütije van, miközben a böngészője sötétet jelez.
   ===================================================================== */

:root {
    --zw-sarga:   #f5c518;
    --zw-sarga-t: #141414;
    --zw-acc:     rgb(29, 158, 117);
    --zw-acc-dk:  rgb(21, 128, 96);
    --zw-sarok:   14px;
}

/* --------------------------------------------------------------------
   1. BEJELENTKEZŐ KÉPERNYŐ
   -------------------------------------------------------------------- */

body.task-login #layout-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

body.task-login img#logo.zw-logo {
    width: 76px;
    height: 76px;
    max-height: none;
    margin: 0 0 14px;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .35));
}

/* --- védjegy: Zila + Mail(sárga) + „by ZWORKS" --- */
.zw-vedjegy {
    text-align: center;
    margin: 0 0 26px;
    line-height: 1.15;
}

.zw-nev {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: .4px;
}

.zw-nev .zw-kiem {
    color: var(--zw-sarga);
}

.zw-alcim {
    margin-top: 7px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 2.6px;      /* a ZBrand.jsx „nagy" változatának értéke */
    text-transform: uppercase;
    opacity: .55;
}

.zw-lablec {
    margin-top: 22px;
    text-align: center;
    font-size: 11px;
    letter-spacing: .3px;
    opacity: .38;
}

/* --- az űrlap: ZWORKS-sarok és -accent --- */
body.task-login #login-form input.form-control {
    border-radius: var(--zw-sarok);
}

body.task-login #login-form input.form-control:focus {
    border-color: var(--zw-acc);
    box-shadow: 0 0 0 3px rgba(29, 158, 117, .22);
}

body.task-login #login-form .formbuttons button,
body.task-login #login-form button.btn-primary,
body.task-login #login-form button[type="submit"] {
    background: var(--zw-acc) !important;
    border-color: var(--zw-acc) !important;
    color: #fff !important;
    border-radius: var(--zw-sarok);
    font-weight: 700;
    letter-spacing: .6px;
}

body.task-login #login-form .formbuttons button:hover,
body.task-login #login-form button[type="submit"]:hover {
    background: var(--zw-acc-dk) !important;
    border-color: var(--zw-acc-dk) !important;
}

/* a Roundcube „ZilaMail" felirata a gomb alatt: a saját védjegyünk váltja ki */
body.task-login #layout-content > .product-name,
body.task-login .product-name {
    display: none;
}

/* sötét mód — az Elastic saját jelére kötve */
html.dark-mode body.task-login {
    background: #060709;
}

html.dark-mode body.task-login #layout-content {
    background: transparent;
}

/* --------------------------------------------------------------------
   2. A FELÜLET TÖBBI RÉSZE — visszafogott márka-jelenlét
   -------------------------------------------------------------------- */

/* a bal oldali task-sáv alján a ZW-jel, halkan */
#taskmenu::after {
    content: "ZW";
    display: block;
    margin: 10px auto 12px;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--zw-sarga);
    color: var(--zw-sarga-t);
    font-size: 9px;
    font-weight: 800;
    line-height: 22px;
    text-align: center;
    letter-spacing: -.3px;
    opacity: .8;
}

/* =====================================================================
   3. A GYÁRI VÍZJEL HELYÉRE ZILAMAIL
   Az üres levél-panelen az Elastic a saját nagy logóját teszi ki.
   Lecseréljük a ház védjegyére, visszafogottan.
   ===================================================================== */

/* el a gyári vízjellel — több helyen is megjelenhet */
#layout-content .watermark,
#messagecontframe + .watermark,
.watermark img,
img.watermark,
#layout-content > .content > img {
    display: none !important;
}

#layout-content .watermark,
body.task-mail #layout-content .content:empty {
    background-image: none !important;
}

/* saját vízjel: ZW-jel + ZilaMail, halkan középen */
body.task-mail #layout-content .watermark::before {
    content: "";
    display: block;
    width: 72px;
    height: 72px;
    margin: 0 auto 14px;
    border-radius: 20px;
    background: var(--zw-sarga);
    opacity: .16;
}

body.task-mail #layout-content .watermark::after {
    content: "ZilaMail";
    display: block;
    text-align: center;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .5px;
    opacity: .22;
}

body.task-mail #layout-content .watermark {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* =====================================================================
   4. A BAL SÁV ZW-JELE — NAGYOBB, FELÜL
   ===================================================================== */
#taskmenu::after {
    content: none !important;      /* a korábbi kicsi, alul lévő jel törölve */
}

#layout-menu img#logo,
#taskmenu img#logo {
    width: 42px !important;
    height: 42px !important;
    margin: 12px auto 10px !important;
    display: block !important;
    padding: 0 !important;
}