/* TopSky Mail - branding 1:1 z www.topsky.app (dark "Aviation" theme).
   Tokeny z repo topsky: bg #050a12, tekst #f5f7fa, dim #9fb0c2, linia rgba(255,255,255,.12),
   pole #0e1626, azure #0a78c4 / #2aa2f0, link/focus #5dc1f0, font Onest (self-hosted). */

@font-face{font-family:Onest;font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/onest-latin-ext.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c4,u+2113,u+2c60-2c7f,u+a720-a7ff}
@font-face{font-family:Onest;font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/onest-latin.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}

:root{
  --ts-bg:#050a12; --ts-text:#f5f7fa; --ts-dim:#9fb0c2; --ts-mute:#8497ad;
  --ts-line:rgba(255,255,255,.12); --ts-line-soft:rgba(255,255,255,.07);
  --ts-field:#0e1626; --ts-panel:#0a1220; --ts-panel-2:#0e1828;
  --ts-azure:#0a78c4; --ts-azure-hi:#2aa2f0; --ts-link:#5dc1f0;
  --ts-sel:rgba(42,162,240,.16);
  --ts-font:Onest,system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---------- font ---------- */
html, body, input, button, select, textarea, .btn, .form-control,
.ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family:var(--ts-font) !important; }

/* ---------- aurora (tlo jak na stronie) ---------- */
html.dark-mode body{ background-color:var(--ts-bg); color:var(--ts-text); }
html.dark-mode body::before{
  content:""; position:fixed; inset:-20%; z-index:-1; pointer-events:none; filter:blur(80px);
  background:
    radial-gradient(50% 45% at 25% 30%,rgba(31,150,230,.34),transparent 70%),
    radial-gradient(45% 40% at 78% 72%,rgba(124,92,255,.2),transparent 70%),
    radial-gradient(40% 35% at 60% 20%,rgba(93,193,240,.14),transparent 70%);
}
html.dark-mode #layout{ background:transparent; }

/* ================= LOGOWANIE ================= */
body.task-login #layout-content{
  background:transparent !important; min-height:100vh; display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:24px 16px; margin:0; gap:0;
}
body.task-login .ts-back{
  display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--ts-dim); text-decoration:none; margin-bottom:16px;
}
body.task-login .ts-back:hover{ color:var(--ts-text); }
body.task-login img#logo{ display:block; position:static; top:auto; left:auto; width:256px; max-width:78%; height:auto; margin:0 auto 32px; opacity:1 !important; }

body.task-login #login-form{
  position:relative; top:auto; left:auto; inset:auto; isolation:isolate; width:100%; max-width:440px; margin:0; padding:40px; text-align:left;
  color:var(--ts-text); border-radius:28px;
  background:
    radial-gradient(100% 40% at 50% -6%,rgba(255,255,255,.34),transparent 60%),
    linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.05) 30%,rgba(255,255,255,.04) 70%,rgba(255,255,255,.07));
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5),inset 1px 0 0 rgba(255,255,255,.16),inset -1px 0 0 rgba(255,255,255,.1),
    inset 0 -1px 0 rgba(255,255,255,.12),inset 0 -40px 80px -50px rgba(0,0,0,.7),inset 0 0 80px rgba(255,255,255,.04),
    0 -1px 0 rgba(255,255,255,.08),0 40px 90px -30px rgba(0,0,0,.8);
  -webkit-backdrop-filter:blur(40px) saturate(200%) brightness(1.08); backdrop-filter:blur(40px) saturate(200%) brightness(1.08);
}
@media (max-width:640px){ body.task-login #login-form{ padding:36px 28px; } }

body.task-login .ts-auth-head{ text-align:center; margin-bottom:24px; }
body.task-login .ts-auth-head h1{ margin:0; font-size:24px; line-height:32px; font-weight:700; color:var(--ts-text); }
body.task-login .ts-auth-head p{ margin:4px 0 0; font-size:14px; line-height:20px; color:var(--ts-dim); }

body.task-login #login-form table, body.task-login #login-form tbody, body.task-login #login-form tr{ display:block; width:100%; }
body.task-login #login-form tr.form-group{ margin:0 0 16px; }
body.task-login #login-form td.title{ display:block !important; padding:0 0 6px; }
body.task-login #login-form td.title label{ margin:0; font-size:14px; line-height:20px; font-weight:500; color:var(--ts-dim); }
body.task-login #login-form td.input{ display:block; padding:0; width:100%; }
body.task-login #login-form .input-group-prepend{ display:none; }
body.task-login #login-form .form-control, body.task-login #login-form .input-group-lg > .form-control{
  display:block; width:100%; height:42px; padding:10px 12px; font-size:14px; line-height:20px;
  color:var(--ts-text); background:var(--ts-field); border:1px solid var(--ts-line); border-radius:12px !important;
  box-shadow:none; transition:border-color .15s,box-shadow .15s;
}
body.task-login #login-form .form-control::placeholder{ color:var(--ts-mute); opacity:1; }
body.task-login #login-form .form-control:-webkit-autofill{ -webkit-text-fill-color:var(--ts-text); box-shadow:0 0 0 100px var(--ts-field) inset; caret-color:var(--ts-text); }

/* focus: obrys marki jak na stronie (ring 2px + offset w kolorze tla) */
.form-control:focus, body.task-login #login-form .form-control:focus{
  border-color:var(--ts-link) !important; outline:none !important;
  box-shadow:0 0 0 2px #050a12,0 0 0 4px var(--ts-link) !important;
}

body.task-login #login-form .formbuttons{ margin:24px 0 0; }
body.task-login #login-form #rcmloginsubmit{ text-transform:none !important; letter-spacing:0; }
body.task-login #login-footer{ display:none; }

/* przycisk glowny - jak brand_btnPrimary na stronie; tlo #0a78c4 daje kontrast bialego tekstu >= 4.5:1 */
.btn.btn-primary, button.btn-primary, .btn.mainaction, button.mainaction, a.btn-primary, .ui-dialog .ui-button.mainaction,
body.task-login #login-form #rcmloginsubmit{
  background:linear-gradient(180deg,#0e7fcc,#0a78c4) !important; border:0 !important; color:#fff !important; font-weight:600 !important;
  height:40px; border-radius:12px !important; text-shadow:0 1px 2px rgba(0,0,0,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 1px rgba(10,120,196,.6),0 18px 44px -12px rgba(31,150,230,.95) !important;
  transition:transform .2s;
}
.btn.btn-primary:hover, .btn.mainaction:hover, button.mainaction:hover, body.task-login #login-form #rcmloginsubmit:hover{ transform:translateY(-1px); color:#fff !important; background:linear-gradient(180deg,#0e7fcc,#0a78c4) !important; }
.btn.btn-primary:focus-visible, .btn.mainaction:focus-visible, button.mainaction:focus-visible{ outline:none; box-shadow:0 0 0 2px #050a12,0 0 0 4px var(--ts-link) !important; }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }

/* ================= WNETRZE (Elastic dark -> paleta TopSky) ================= */
html.dark-mode a{ color:var(--ts-link); }
html.dark-mode a:hover{ color:#8bd4f6; }

/* lewy pasek: logo + menu */
html.dark-mode #layout-menu{ background:linear-gradient(180deg,#08111f,#050a12) !important; border-right:1px solid var(--ts-line-soft); }
html.dark-mode #layout-menu .popover-header{ background:transparent !important; }
html.dark-mode #layout-menu .popover-header img#logo{ display:block; width:auto; max-width:40px; max-height:40px; margin:8px auto 0; opacity:1; }
html.dark-mode #layout-menu a{ color:var(--ts-dim); }
html.dark-mode #layout-menu a:hover{ color:var(--ts-text); background:rgba(255,255,255,.05); }
html.dark-mode #layout-menu a.selected{ color:var(--ts-text) !important; background:var(--ts-sel) !important; box-shadow:inset 3px 0 0 var(--ts-azure-hi); }
html.dark-mode #layout-menu a.compose{ color:var(--ts-link); }
html.dark-mode #layout-menu a.logout, html.dark-mode #layout-menu a.logout span{ color:#ff7a78; }
html.dark-mode #taskmenu a.theme{ display:none !important; } /* motyw wymuszony: ciemny jak strona */

/* panele */
html.dark-mode #layout-sidebar, html.dark-mode #layout-list, html.dark-mode #layout-content{ background:rgba(10,18,32,.72); border-color:var(--ts-line-soft); }
html.dark-mode #layout > div > .header, html.dark-mode #layout > div > .footer{ background:rgba(255,255,255,.025); border-color:var(--ts-line-soft); color:var(--ts-text); }
html.dark-mode .searchbar{ border-color:var(--ts-line-soft); }

/* listy */
html.dark-mode .listing li > a, html.dark-mode table.listing td, html.dark-mode .messagelist td{ border-color:var(--ts-line-soft); }
html.dark-mode .messagelist tr.selected td, html.dark-mode .listing li.selected > a, html.dark-mode ul.treelist li.mailbox.selected > a,
html.dark-mode #folderlist-content li.mailbox.selected > a, html.dark-mode .folderlist li.selected > a{ background-color:var(--ts-sel) !important; color:var(--ts-text); }
html.dark-mode .messagelist tr.focused td:first-child, html.dark-mode .listing li.focused > a{ box-shadow:inset 3px 0 0 var(--ts-azure-hi); }
html.dark-mode .messagelist tr.focused td:not(:first-child){ box-shadow:none; }
html.dark-mode .messagelist tr.selected, html.dark-mode .messagelist tr.selected td{ background-color:var(--ts-sel) !important; }
html.dark-mode .messagelist tr.unread td.subject a, html.dark-mode .unread > td.subject a{ font-weight:700; color:var(--ts-text); }
html.dark-mode .listing li:hover > a, html.dark-mode .messagelist tr:hover td{ background-color:rgba(255,255,255,.04); }

html.dark-mode #layout-sidebar .treelist li.selected, html.dark-mode #layout-sidebar .listing li.selected, html.dark-mode #folderlist-content li.selected{ background:var(--ts-sel) !important; }
html.dark-mode #layout-sidebar .treelist li.selected > a{ background:transparent !important; box-shadow:inset 3px 0 0 var(--ts-azure-hi); }

/* badge licznika nieprzeczytanych */
html.dark-mode .unreadcount, html.dark-mode .badge-secondary, html.dark-mode span.unreadcount{ background:var(--ts-azure) !important; color:#fff !important; }

/* toolbar, ikony */
html.dark-mode .toolbar a.button, html.dark-mode .header a.button{ color:var(--ts-dim); }
html.dark-mode .toolbar a.button:not(.disabled):hover, html.dark-mode .header a.button:not(.disabled):hover{ color:var(--ts-text); background:rgba(255,255,255,.06); }
html.dark-mode .toolbar a.button.disabled, html.dark-mode .toolbar a.button.disabled span{ color:var(--ts-mute); opacity:.75; }

html.dark-mode .searchbar input, html.dark-mode .searchbar input:focus{ background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0; }

html.dark-mode .recipient-input input, html.dark-mode .recipient-input input:focus, html.dark-mode ul.recipient-input input{ background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0; }
html.dark-mode .recipient-input:focus-within, html.dark-mode ul.recipient-input:focus-within{ border-color:var(--ts-link) !important; box-shadow:0 0 0 2px #050a12,0 0 0 4px var(--ts-link); }

/* pola, menu, popupy: nieprzezroczyste */
html.dark-mode .form-control, html.dark-mode select, html.dark-mode input[type=text], html.dark-mode input[type=search], html.dark-mode textarea{
  background-color:var(--ts-field); color:var(--ts-text); border:1px solid var(--ts-line); border-radius:12px;
}
html.dark-mode .form-control::placeholder{ color:var(--ts-mute); }
html.dark-mode .popover, html.dark-mode .popupmenu, html.dark-mode .ui-dialog, html.dark-mode .ui-widget-content, html.dark-mode .menu.popupmenu, html.dark-mode .popover-body{
  background-color:#0c1626 !important; border:1px solid rgba(255,255,255,.16) !important; color:var(--ts-text);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.85);
}
html.dark-mode .popupmenu a, html.dark-mode .popover a:not(.btn){ color:var(--ts-text); }
html.dark-mode .popupmenu a:hover, html.dark-mode .popover a:not(.btn):hover{ background:var(--ts-sel); color:#fff; }
html.dark-mode .form-check-input:checked, html.dark-mode .custom-control-input:checked ~ .custom-control-label::before{ background-color:var(--ts-azure) !important; border-color:var(--ts-azure) !important; }

/* focus klawiatury - widoczny wszedzie */
html.dark-mode a:focus-visible, html.dark-mode button:focus-visible, html.dark-mode li:focus-visible, html.dark-mode [tabindex]:focus-visible{ outline:2px solid var(--ts-link); outline-offset:2px; }

/* telefon */
@media (max-width:480px){
  body.task-login #layout-content{ padding:20px 12px; }
  body.task-login img#logo{ width:220px; }
}

/* ikona klucza dla "Zmień hasło" (menu zadań + ustawienia) */
.menu a.ts-password:before, .listing.iconized a.ts-password:before, #settings-menu a.ts-password:before{ content:"\f084"; }
html:not(.layout-phone) #taskmenu a.ts-password span.inner{ white-space:normal; display:block; line-height:1.15; }
html.dark-mode.layout-phone #layout-menu .popover-header img#logo{ max-width:150px; max-height:none; margin:20px 16px; }

html.dark-mode ul.recipient-input{ background:var(--ts-field) !important; border:1px solid var(--ts-line) !important; border-radius:12px 0 0 12px; }
html.dark-mode ul.recipient-input.focus{ border-color:var(--ts-link) !important; box-shadow:0 0 0 2px #050a12,0 0 0 4px var(--ts-link) !important; }
html.dark-mode .recipient-input input, html.dark-mode .recipient-input input:focus{ outline:none !important; }
html.dark-mode .form-control:disabled, html.dark-mode .form-control[readonly]{ background:var(--ts-panel-2); }
body.task-login #login-form #rcmloginsubmit:focus-visible{ outline:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 2px #050a12,0 0 0 4px var(--ts-link) !important; }