/* ============================================================
   FACTORY SUN - Roundcube skin overlay (Elastic)
   Marka: ciemne, cieple, gold-foil premium + zdjecie modelki
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Montserrat:wght@300;400;500;600;700&family=Pacifico&display=swap');

:root {
  --fs-gold-deep:#8A5E12; --fs-gold:#C9962E; --fs-gold-mid:#D9AE45;
  --fs-gold-bright:#F4D88A; --fs-gold-pale:#FBEFC4;
  --fs-foil:linear-gradient(135deg,#8A5E12 0%,#C9962E 18%,#F4D88A 38%,#FBEFC4 50%,#E7BE55 62%,#C9962E 80%,#8A5E12 100%);
  --fs-ink:#0B0806; --fs-charcoal:#161009; --fs-espresso:#241914;
  --fs-fg1:#F6ECDA; --fs-fg2:#C9B79C; --fs-fg3:#8A7560;
  --fs-hair:rgba(244,216,138,.28);
  --fs-sans:'Montserrat','Helvetica Neue',Arial,sans-serif;
  --fs-serif:'Cormorant Garamond','Times New Roman',serif;
}

/* =================== EKRAN LOGOWANIA =================== */
body.task-login {
  font-family:var(--fs-sans); color:var(--fs-fg1);
  background:linear-gradient(180deg, rgba(8,5,3,.42) 0%, rgba(8,5,3,.70) 55%, rgba(8,5,3,.92) 100%), url('model.jpg') center top/cover fixed no-repeat !important;
}
body.task-login #layout,
body.task-login #layout-content { background:transparent !important; }
body.task-login #layout-content {
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  min-height:100vh; padding:24px; box-sizing:border-box;
}
body.task-login #logo {
  content:url('logo.png');
  height:80px; width:auto; margin:0 auto 4px; display:block;
  filter:drop-shadow(0 6px 20px rgba(0,0,0,.7));
}
body.task-login #login-form::before {
  content:"Poczta"; display:block; text-align:center;
  font-family:var(--fs-serif); font-style:italic; font-weight:600;
  font-size:30px; letter-spacing:.02em; color:var(--fs-fg1); margin-bottom:4px;
}
body.task-login #login-form {
  background:rgba(11,8,6,.66); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--fs-hair); border-radius:22px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.8), 0 8px 24px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,236,180,.10);
  padding:30px 30px 26px; width:100%; max-width:380px; margin:14px auto 0; box-sizing:border-box;
}
body.task-login #login-form table,
body.task-login #login-form tbody,
body.task-login #login-form tr,
body.task-login #login-form td { display:block; width:100%; padding:0; }
body.task-login #login-form td.title { margin-top:15px; }
body.task-login #login-form td.title label {
  font-family:var(--fs-sans); font-weight:600; font-size:11px;
  letter-spacing:.26em; text-transform:uppercase; color:var(--fs-fg3);
  display:block; margin-bottom:7px;
}
body.task-login #login-form input.form-control {
  width:100%; box-sizing:border-box;
  background:rgba(36,25,20,.65); border:1px solid rgba(201,150,46,.30);
  border-radius:9px; color:var(--fs-fg1); font-family:var(--fs-sans);
  font-size:15px; padding:12px 14px;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
body.task-login #login-form input.form-control::placeholder { color:var(--fs-fg3); }
body.task-login #login-form input.form-control:focus {
  outline:none; border-color:var(--fs-gold-bright);
  box-shadow:0 0 0 3px rgba(244,216,138,.18); background:rgba(36,25,20,.92);
}
body.task-login #login-form .formbuttons { margin-top:24px; }
body.task-login #login-form #rcmloginsubmit {
  width:100%; border:0; border-radius:999px; padding:14px 30px;
  font-family:var(--fs-sans); font-weight:700; font-size:13px;
  letter-spacing:.10em; text-transform:uppercase; color:#000; cursor:pointer;
  background:var(--fs-foil); background-size:180% 180%;
  box-shadow:0 8px 26px -10px rgba(201,150,46,.6), inset 0 1px 0 rgba(255,236,180,.18);
  transition:transform .2s ease, box-shadow .25s ease, background-position .45s ease;
}
body.task-login #login-form #rcmloginsubmit:hover {
  transform:translateY(-1px); background-position:100% 0;
  box-shadow:0 12px 34px -8px rgba(244,216,138,.7), inset 0 1px 0 rgba(255,236,180,.18);
}
body.task-login #login-footer {
  text-align:center; margin-top:18px; color:var(--fs-fg2);
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
}

/* =================== INTERFEJS = TRYB CIEMNY + ZDJECIE =================== */
/* zdjecie modelki w tle calej apki (przyciemnione) */
html.dark-mode body {
  font-family:var(--fs-sans);
  background:linear-gradient(180deg, rgba(8,5,3,.50), rgba(8,5,3,.74)), url('model.jpg') center/cover fixed no-repeat !important;
}
html.dark-mode #layout { background:transparent !important; }

/* panele = ciemne szklo (zdjecie przebija), tekst czytelny */
html.dark-mode #layout-sidebar,
html.dark-mode #layout-list,
html.dark-mode .listing,
html.dark-mode #messagelist,
html.dark-mode .messagelist {
  background-color:rgba(11,8,6,.74) !important;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
/* prawy panel (podglad wiadomosci / pusty) = mocniej widac zdjecie */
html.dark-mode #layout-content,
html.dark-mode .contentframe,
html.dark-mode .watermark { background-color:rgba(11,8,6,.32) !important; }
html.dark-mode .scroller { background:transparent !important; }

/* lewy pasek zadan */
html.dark-mode #layout-menu,
html.dark-mode #taskmenu {
  background-color:rgba(16,10,6,.88) !important;
  border-right:1px solid var(--fs-hair) !important;
}
html.dark-mode #layout-menu a.button { color:var(--fs-fg2) !important; }
html.dark-mode #layout-menu a.button.selected,
html.dark-mode #layout-menu a.button:hover { color:var(--fs-gold-bright) !important; }
html.dark-mode #layout-menu a.button.selected {
  background:rgba(201,150,46,.12) !important;
  box-shadow:inset 3px 0 0 var(--fs-gold) !important;
}

/* PASKI U GORY (toolbary) -> ciemne szklo marki */
html.dark-mode .header,
html.dark-mode #layout-list > .header,
html.dark-mode #layout-content > .header,
html.dark-mode #layout-sidebar > .header,
html.dark-mode .toolbar,
html.dark-mode .menu.toolbar,
html.dark-mode .boxtitle,
html.dark-mode .formcontainer > .header {
  background:rgba(22,15,9,.80) !important;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--fs-hair) !important;
  color:var(--fs-fg1) !important;
}
html.dark-mode .header .header-title,
html.dark-mode .boxtitle { color:var(--fs-fg1) !important; }
html.dark-mode .toolbar a.button,
html.dark-mode .header a.button { color:var(--fs-fg2) !important; }
html.dark-mode .toolbar a.button:hover,
html.dark-mode .header a.button:hover { color:var(--fs-gold-bright) !important; }

/* pole wyszukiwania + inputy */
html.dark-mode .searchbar,
html.dark-mode .searchbar input,
html.dark-mode .ui.input,
html.dark-mode input.form-control,
html.dark-mode textarea.form-control,
html.dark-mode select.form-control {
  background-color:rgba(28,20,13,.85) !important;
  color:var(--fs-fg1) !important;
  border-color:var(--fs-hair) !important;
}

/* przycisk UTWORZ / glowne akcje -> zlota folia */
.button.create, a.button.create,
html.dark-mode .button.create,
html.dark-mode a.compose,
html.dark-mode #layout-menu a.compose,
.button.mainaction, button.mainaction,
.btn-primary, button.submit.mainaction {
  background-image:var(--fs-foil) !important;
  background-color:#C9962E !important;
  color:#1a1208 !important;
  border-color:transparent !important;
  text-shadow:none !important;
}

/* zaznaczony / najechany wiersz listy */
html.dark-mode .listing tr.selected td,
html.dark-mode .listing li.selected,
html.dark-mode #messagelist tr.selected td {
  background:rgba(201,150,46,.16) !important;
  box-shadow:inset 3px 0 0 var(--fs-gold) !important;
}
html.dark-mode .listing tr:hover td,
html.dark-mode .listing li:hover { background:rgba(201,150,46,.06) !important; }

/* linki UI */
html.dark-mode a { color:var(--fs-gold); }
html.dark-mode a:hover { color:var(--fs-gold-bright); }

/* separatory na zloty hairline */
html.dark-mode .listing td,
html.dark-mode .boxlistcontent { border-color:rgba(244,216,138,.10) !important; }