/* ============= Levitsky Concept — фирменная тема почты (v3) ============= */
@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700&display=swap');
:root{
  --lc-red:#F23645; --lc-red-600:#C40D1A; --lc-violet:#7C3AED;
  --lc-ink:#1A1726; --lc-ink-2:#14111d; --lc-ink-soft:#241f33;
  --lc-paper:#F4F2FA; --lc-surface:#fff; --lc-surface-2:#f6f5fb; --lc-line:#eae7f3;
  --lc-text:#2a2636; --lc-muted:#6b6580;
  --lc-radius:14px; --lc-radius-sm:10px;
  --lc-shadow:0 10px 30px -14px rgba(26,23,38,.22); --lc-shadow-sm:0 2px 10px -5px rgba(26,23,38,.16);
  --lc-font:'Golos Text','Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
html,body,.listing,.messagelist,input,select,textarea,button,.btn,.form-control,.menu,a{font-family:var(--lc-font)!important;-webkit-font-smoothing:antialiased;}
/* transitions ONLY on interactive elements (no background flash on load) */
a,button,.btn,.button,.toolbar a.button,.listing li a,.messagelist tr,input,select,textarea,.form-control,.popupmenu li a{
  transition:background-color .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}

/* ---------------- LOGIN ---------------- */
body.task-login,body.task-login #layout{
  background:
    radial-gradient(1200px 620px at 15% -15%,rgba(242,54,69,.28),transparent 55%),
    radial-gradient(1000px 560px at 108% 115%,rgba(124,58,237,.26),transparent 52%),
    var(--lc-ink-2)!important;
}
body.task-login #layout>.content,body.task-login .content{background:transparent!important;}
body.task-login #login-form{
  background:linear-gradient(180deg,rgba(36,31,51,.86),rgba(26,23,38,.82))!important;
  border:1px solid rgba(255,255,255,.08)!important;border-radius:22px!important;
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  box-shadow:0 40px 110px -34px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.05)!important;
  padding:30px 26px 26px!important;color:var(--lc-paper);
}
body.task-login #logo{display:block;margin:8px auto 14px;max-height:66px!important;width:auto;filter:drop-shadow(0 10px 26px rgba(242,54,69,.45));}
body.task-login #login-form:before{content:"Levitsky Concept";display:block;text-align:center;letter-spacing:.32em;text-transform:uppercase;font-size:11px;font-weight:700;color:var(--lc-red);margin-bottom:22px;}
/* input groups: seamless dark, icon inside */
body.task-login table.propform,body.task-login td.input{display:block!important;width:100%!important;}
body.task-login .input-group{display:flex!important;align-items:stretch;margin-bottom:14px;border-radius:12px!important;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:rgba(20,17,29,.75);}
body.task-login .input-group-text{background:transparent!important;border:none!important;color:rgba(244,242,250,.55)!important;display:flex;align-items:center;padding:0 12px!important;}
body.task-login .input-group .form-control{background:transparent!important;border:none!important;color:var(--lc-paper)!important;height:46px;box-shadow:none!important;flex:1;}
body.task-login .input-group:focus-within{border-color:var(--lc-red)!important;box-shadow:0 0 0 3px rgba(242,54,69,.22);}
body.task-login input::placeholder{color:rgba(244,242,250,.4)!important;}
body.task-login .formbuttons,body.task-login .formbuttons .btn{margin-top:6px;}
body.task-login button.btn,body.task-login .btn-primary{
  width:100%;height:48px!important;border-radius:12px!important;font-weight:700!important;letter-spacing:.02em;
  background:linear-gradient(135deg,var(--lc-red),var(--lc-red-600))!important;border:none!important;color:#fff!important;
  box-shadow:0 14px 30px -12px rgba(242,54,69,.7)!important;
}
body.task-login button.btn:hover{filter:brightness(1.06);transform:translateY(-1px);}
body.task-login label{color:rgba(244,242,250,.7)!important;}

/* ---------------- SIDEBAR (task menu) ---------------- */
#layout-menu,#taskmenu{background:var(--lc-ink)!important;border:none!important;}
#taskmenu a,#layout-menu a{color:rgba(244,242,250,.82)!important;border-radius:12px!important;margin:3px 10px;font-weight:500;}
#taskmenu a .inner{color:inherit!important;}
#taskmenu a:hover{background:rgba(255,255,255,.07)!important;color:#fff!important;}
#taskmenu a.selected,#taskmenu a.mail.selected{background:rgba(255,255,255,.10)!important;color:#fff!important;}
#taskmenu a.selected .inner{color:#fff!important;}
/* Compose = primary red pill */
#taskmenu a.compose{background:linear-gradient(135deg,var(--lc-red),var(--lc-red-600))!important;color:#fff!important;box-shadow:0 10px 24px -10px rgba(242,54,69,.7);margin:8px 10px 10px;}
#taskmenu a.compose .inner{color:#fff!important;}
#taskmenu a.compose:hover{filter:brightness(1.06);}
/* bottom block: dark mode / about / logout — spaced, divided, rounded */
#taskmenu .special-buttons{margin-top:auto;padding-top:10px;border-top:1px solid rgba(255,255,255,.08);}
#taskmenu .special-buttons a{color:rgba(244,242,250,.7)!important;}
#taskmenu .special-buttons a:hover{background:rgba(255,255,255,.07)!important;color:#fff!important;}
#taskmenu a.logout,#taskmenu .special-buttons a.logout{color:var(--lc-red)!important;}
#taskmenu a.logout:hover{background:rgba(242,54,69,.14)!important;color:var(--lc-red)!important;}

/* ---------------- TOOLBARS (readable!) ---------------- */
.toolbar{background:var(--lc-surface)!important;border-bottom:1px solid var(--lc-line)!important;}
.toolbar a.button{color:var(--lc-text)!important;border-radius:10px!important;font-weight:500;}
.toolbar a.button .inner{color:var(--lc-text)!important;}
.toolbar a.button:not(.disabled):hover{background:var(--lc-surface-2)!important;color:var(--lc-red)!important;}
.toolbar a.button:not(.disabled):hover .inner{color:var(--lc-red)!important;}
.toolbar a.button.disabled,.toolbar a.button.disabled .inner{color:#b7b3c4!important;opacity:1!important;}
.toolbar a.button.selected,.toolbar a.button.selected .inner{color:var(--lc-red)!important;}

/* layout surfaces */
#layout-sidebar,#layout-list,#layout-content{background:var(--lc-surface)!important;border:none!important;}
.boxtitle,.header{background:var(--lc-surface)!important;border-bottom:1px solid var(--lc-line)!important;color:var(--lc-text)!important;}

/* ---------------- LISTS ---------------- */
.messagelist tr{border-bottom:1px solid var(--lc-line)!important;}
.messagelist tr:hover td{background:var(--lc-surface-2)!important;}
.messagelist tr td{padding-top:10px!important;padding-bottom:10px!important;color:var(--lc-text);}
.messagelist tr.unread td.subject{font-weight:700!important;}
.messagelist tr.selected td,.listing tr.selected td{background:linear-gradient(135deg,rgba(242,54,69,.12),rgba(124,58,237,.10))!important;color:var(--lc-ink)!important;box-shadow:inset 3px 0 0 var(--lc-red);}
.messagelist tr.selected td *{color:var(--lc-ink)!important;}
/* folder list selected (Inbox) — softer than the harsh red border */
#layout-sidebar .listing li.selected>a,.folderlist li.selected>a{background:linear-gradient(135deg,rgba(242,54,69,.12),rgba(124,58,237,.10))!important;color:var(--lc-ink)!important;border:none!important;box-shadow:inset 3px 0 0 var(--lc-red);border-radius:10px;}
#layout-sidebar .listing li>a{border-radius:10px;margin:2px 6px;}
.unreadcount,.count.unread,span.unreadcount{background:var(--lc-red)!important;color:#fff!important;border-radius:999px!important;padding:1px 8px!important;font-weight:600;font-size:11px;}

/* ---------------- BUTTONS / INPUTS (app) ---------------- */
.btn-primary,button.btn.btn-primary,.button.mainaction,input.button.mainaction{
  background:linear-gradient(135deg,var(--lc-red),var(--lc-red-600))!important;border:none!important;color:#fff!important;
  border-radius:999px!important;padding:8px 20px!important;font-weight:600!important;box-shadow:0 10px 22px -12px rgba(242,54,69,.6);
}
.btn-primary:hover,button.btn.btn-primary:hover{filter:brightness(1.05);transform:translateY(-1px);}
input.form-control,select,textarea{border-radius:var(--lc-radius-sm)!important;border:1px solid var(--lc-line)!important;color:var(--lc-text);}
input.form-control:focus,textarea:focus,select:focus{border-color:var(--lc-red)!important;box-shadow:0 0 0 3px rgba(242,54,69,.16)!important;}
input[type=checkbox]:checked,input[type=radio]:checked{accent-color:var(--lc-red);}

/* ---------------- POPUPS / DIALOGS ---------------- */
.popupmenu,.popover,.ui-dialog,.ui-menu,.contextmenu{border-radius:var(--lc-radius)!important;border:1px solid var(--lc-line)!important;box-shadow:var(--lc-shadow)!important;overflow:hidden;}
.popupmenu li a:hover,.ui-menu-item:hover{background:var(--lc-surface-2)!important;color:var(--lc-red)!important;}
a{color:var(--lc-red-600);} a:hover{color:var(--lc-red);}

/* ---------------- v3.1 fixes (from screenshot review) ---------------- */
/* login: fill whole viewport with dark */
html:has(.task-login){background:var(--lc-ink-2)!important;}
body.task-login,body.task-login #layout{min-height:100vh!important;}
body.task-login #login-form:focus-within,body.task-login .input-group:focus-within{box-shadow:0 0 0 3px rgba(242,54,69,.18);}
/* clean folder selection — no harsh box border, keep subtle bg + left bar */
#layout-sidebar .listing li.selected,#layout-sidebar .listing li.selected>a,
.folderlist li.selected,.folderlist li.selected>a,ul.listing li.selected>a{
  border:none!important;outline:none!important;
}
#layout-sidebar .listing li.selected>a,.folderlist li.selected>a{
  background:rgba(242,54,69,.10)!important;box-shadow:inset 3px 0 0 var(--lc-red)!important;
  color:var(--lc-ink)!important;font-weight:600;border-radius:10px!important;
}
/* compose pill: keep text inside */
#taskmenu a.compose{padding-left:6px!important;padding-right:6px!important;}
#taskmenu a.compose .inner{font-size:12px;}
/* toolbar disabled a touch more visible but clearly secondary */
.toolbar a.button.disabled,.toolbar a.button.disabled .inner{color:#c2bed0!important;}

/* ---------------- v3.2 — bulletproof full-screen login bg ---------------- */
body.task-login{background:transparent!important;}
body.task-login::before{
  content:'';position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(1200px 640px at 15% -15%,rgba(242,54,69,.30),transparent 55%),
    radial-gradient(1000px 560px at 108% 115%,rgba(124,58,237,.28),transparent 52%),
    var(--lc-ink-2);
}
body.task-login #layout,body.task-login #layout>.content,body.task-login .content,body.task-login .box,body.task-login .box-inner{background:transparent!important;box-shadow:none!important;}
body.task-login input::placeholder{color:rgba(244,242,250,.5)!important;}
body.task-login .input-group .form-control{height:48px;font-size:15px;}

/* ---------------- v3.3 — the actual culprit: #layout-content white on login ---------------- */
body.task-login #layout-content,
body.task-login #layout-sidebar,
body.task-login #layout-list,
body.task-login #layout-menu,
body.task-login #layout-content.selected,
body.task-login #layout > div{background:transparent!important;box-shadow:none!important;border:none!important;}

/* ---------------- v3.4 — micro polish ---------------- */
body.task-login input::placeholder{color:rgba(244,242,250,.55)!important;opacity:1!important;}
body.task-login .input-group{border-color:rgba(255,255,255,.14)!important;}
/* softer autofocus glow */
body.task-login .input-group:focus-within{box-shadow:0 0 0 3px rgba(242,54,69,.16)!important;border-color:rgba(242,54,69,.7)!important;}
/* compose label fits narrow sidebar */
#taskmenu a.compose{padding:9px 4px!important;}
#taskmenu a.compose .inner{font-size:11px!important;letter-spacing:0!important;}

/* ============ v3.5 — FIX: login inputs full-width & typable (icon as overlay) ============ */
body.task-login table.propform,body.task-login table.propform tbody,
body.task-login table.propform tr,body.task-login td.input,body.task-login .input-group{
  display:block!important;width:100%!important;position:relative!important;
  background:transparent!important;border:none!important;overflow:visible!important;box-shadow:none!important;
}
body.task-login td.input,body.task-login .input-group{margin-bottom:14px!important;}
body.task-login .input-group-prepend{
  position:absolute!important;left:13px;top:50%;transform:translateY(-50%);
  z-index:2;pointer-events:none;background:transparent!important;border:none!important;margin:0!important;
}
body.task-login .input-group-text{background:transparent!important;border:none!important;color:rgba(244,242,250,.5)!important;padding:0!important;font-size:15px;}
body.task-login input.form-control{
  display:block!important;width:100%!important;box-sizing:border-box!important;
  height:50px!important;padding:0 16px 0 42px!important;
  background:rgba(20,17,29,.75)!important;border:1px solid rgba(255,255,255,.14)!important;
  border-radius:12px!important;color:var(--lc-paper)!important;font-size:15px;
}
body.task-login input.form-control:focus{border-color:rgba(242,54,69,.75)!important;box-shadow:0 0 0 3px rgba(242,54,69,.16)!important;}
body.task-login input.form-control::placeholder{color:rgba(244,242,250,.5)!important;opacity:1!important;}