/* ============================
Nikkeys Roundcube Skin — custom.css (BELOW‑LOGO FIX)
Path: /public_html/mailapp/skins/nikkeys/styles/custom.css
============================= */
html,body{height:100%}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; position:relative}


/* Hide the default big title */
.voice{display:none}


/* Center the login card a bit higher on the page */
body.task-login #layout{
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:clamp(48px, 14vh, 120px) 16px 40px; /* top | sides | bottom */
  background:transparent !important;
}
body.task-login #layout>div{ background:transparent !important; }

/* ===== BACKGROUND (full wallpaper + subtle dark overlay) ===== */
/* Upload your image to: /skins/nikkeys/images/bg-orange.webp */
body.task-login{
  background:
    linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0)),
    url('/skins/nikkeys/images/bg-orange6.webp') center/cover no-repeat;
}
/* Slightly stronger overlay on small screens for contrast */
@media (max-width: 768px){
  body.task-login{
    background:
      linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0)),
      url('/skins/nikkeys/images/bg-orange6.webp') center/cover no-repeat;
  }
}

/* ===== LOGIN CARD ===== */
body.task-login .box,
body.task-login .boxcontent{
  background: rgba(17,20,24,.92) !important; /* keeps form readable on bright bg */
  /* backdrop-filter: blur(2px);  optional: glassy look if you want */
  border: 1px solid #1f2733 !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.35) !important;
  max-width: 480px;
  width: 100%;
  padding-bottom: 6px !important;
}



/* Ensure order: logo -> headline -> form (works across browsers) */
#logo,.logo{display:block; margin:0 auto 6px; max-height:54px; clear:both}
.nk-head-below-logo{display:block; clear:both; text-align:center; margin:6px 0 12px}
.nk-head-below-logo h1{margin:0 0 3px; color:#e7eee9; font-weight:800; font-size:20px}
.nk-head-below-logo p{margin:0; color:#9aa6b2; font-size:13px}


/* Inputs with seamless icon addon */
.input-group .input-group-addon{background:#0e141a !important; color:#9aa6b2 !important; border:1px solid #1f2733 !important; border-right:0 !important; border-radius:12px 0 0 12px !important}
.input-group input{background:#0e141a !important; color:#e5e7eb !important; border:2px solid #c2c2dd !important; border-left:0 !important; border-radius:0 12px 12px 0 !important; padding:12px 14px !important}
.input-group input:focus{border-color:#c2c2dd !important; box-shadow:0 0 0 3px rgba(0,200,83,.18) !important}


/* Buttons */
.button,button,input.button{border-radius:12px !important; padding:12px 16px !important; font-weight:700 !important}
.button.mainaction,input.button.mainaction{background:#f18100 !important; color:#03170f !important; border:0 !important}
.button.mainaction:hover{filter:brightness(1.05)}
.button.mainaction:active{transform:translateY(1px)}


/* Footer */
body.task-login .boxfooter{color:#7a8794 !important; text-align:center}
body.task-login .boxfooter a{text-decoration:none}


/* Spacing tweak */
body.task-login .boxcontent .propform .row{margin-bottom:12px}


/* ===== Inbox polish (optional) ===== */
.toolbar .btn,.toolbar a.button{border-radius:10px !important}
.toolbar .btn.mainaction,.toolbar a.button.mainaction{background:#00c853 !important; color:#03170f !important}
#messagelist tbody tr.selected,#messagelist tbody tr.focused{background:rgba(0,200,83,.10) !important}
#messagelist tbody tr.unread .subject{font-weight:700}

/* Force logo -> headline order in all browsers */
.nk-stack{display:flex; flex-direction:column; align-items:center; gap:6px}

/* Kill any floats/absolute that might reorder the logo */
#logo, .logo{
  display:block !important;
  float:none !important;
  position:static !important;
  margin:0 auto 6px !important;
  max-height:54px !important;
  clear:both !important;
  order:1 !important;        /* if inside flex, keep first */
}

/* Headline must come after logo */
.nk-head-below-logo{
  display:block !important;
  text-align:center !important;
  margin:6px 0 12px !important;
  clear:both !important;
  order:2 !important;        /* if inside flex, keep second */
}
.nk-head-below-logo h1{margin:0 0 3px; color:#e7eee9; font-weight:800; font-size:20px}
.nk-head-below-logo p{margin:0; color:#9aa6b2; font-size:16px}

/* Hide the old big title */
.voice{display:none !important}

/* === Nikkeys fixes: logo size, spacing, true centering === */

/* Make the logo larger and tighten spacing under it */
#logo, .logo{
  display:block !important;
  margin:0 auto 8px !important;
  max-height:80px !important;   /* was 54px */
}

/* Welcome text just under the logo */
.nk-head-below-logo{
  display:block !important;
  text-align:center !important;
  margin:4px 0 10px !important;  /* tighter */
}
.nk-head-below-logo h1{ margin:0 0 4px; font-weight:800; font-size:32px; color:#e7eee9; }
.nk-head-below-logo p{  margin:0;       font-size:16px;  color:#9aa6b2; }

/* Treat the whole stack (logo + headline + form) as ONE centered unit */
body.task-login #layout{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:40px 16px;
}
#layout-content.selected.no-navbar{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;                 /* space between headline and form */
}

/* Keep the form near the headline, not pushed down */
#layout-content .propform{
  width:100%;
  max-width:480px;
  margin:0 !important;      /* kill any theme margin that adds a big gap */
}

/* Input rows spacing */
#layout-content .propform .row{ margin-bottom:22px; }

/* Leave your existing input/button styles as-is */

/* === Move login stack higher on the page === */
body.task-login #layout{
  min-height:100vh;
  display:flex;
  align-items:flex-start !important;   /* top-align vertically */
  justify-content:center !important;   /* center horizontally */
  padding-top:clamp(60px, 18vh, 160px) !important;  /* responsive top offset */
  padding-bottom:40px !important;
}

/* Ensure no extra margins are pulling it down */
#layout-content.selected.no-navbar,
.nk-login-wrap,
body.task-login .box,
body.task-login .boxcontent{
  margin-top:0 !important;
}

/* === Nikkeys: logo size + tighter spacing (does NOT affect inputs) === */
#logo, .logo{
  max-height:72px !important;   /* was 80px – smaller, but still bigger than before */
  width:auto !important;
  display:block !important;
  margin:0 auto 6px !important; /* small space below logo */
}

/* tighten subtitle-to-form gap */
.nk-head-below-logo{ margin:2px 0 6px !important; }
.nk-head-below-logo h1{ margin:0 0 2px !important; }
.nk-head-below-logo p{  margin:0 !important; }

/* keep the form snug under the subtitle */
#layout-content .propform{
  max-width:480px;
  width:100%;
  margin-top:6px !important;    /* was larger; reduce vertical gap */
}

/* keep overall stack a bit higher but not too high */
body.task-login #layout{
  padding-top:clamp(48px, 14vh, 120px) !important;  /* was 18vh */
}

/* === Nikkeys: Bigger logo (independent of inputs) + tighter gap === */

/* Force the actual rendered height (beats any older rules/attributes) */
#layout-content #logo,
#layout-content .logo{
  height:96px !important;      /* tweak 70–86px to taste */
  width:auto !important;
  max-height:none !important;
  display:block !important;
  margin:0 auto 19px !important; /* tiny space under the logo */
}

/* Tighten the subtitle-to-form spacing */
.nk-head-below-logo{ margin:0 0 4px !important; }
.nk-head-below-logo h1{ margin:0 0 20px !important; }
.nk-head-below-logo p{  margin:0 !important; }

/* Pull the form up a bit */
#layout-content .propform{
  margin-top:-110px !important;   /* if still too wide, change to 0 or -4px */
  max-width:380px; width:100%;
}

/* Keep overall placement where you liked it previously */
body.task-login #layout{
  padding-top:clamp(48px, 14vh, 120px) !important;
}

/* Heading font upgrade (safe override) */
.nk-head-below-logo h1{
  font-family: 'Outfit', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(26px, 3.1vw, 40px) !important;  /* responsive, won’t break layout */
  line-height: 1.1 !important;
  letter-spacing: .2px !important;
  color: #e7eee9 !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.45);         /* subtle lift on dark bg */
}

/* === Nikkeys: scale the whole login stack (logo -> footer) === */
body.task-login .nk-login-wrap{
  transform-origin: top center;
  will-change: transform;
}

/* Desktop XL */
@media (min-width: 1280px){
  body.task-login .nk-login-wrap{ transform: scale(1.18); }
}

/* Desktop / large tablets */
@media (min-width: 992px) and (max-width: 1279px){
  body.task-login .nk-login-wrap{ transform: scale(1.14); }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 991px){
  body.task-login .nk-login-wrap{ transform: scale(1.10); }
}

/* Phones (keep gentle so it doesn’t overflow) */
@media (max-width: 767px){
  body.task-login .nk-login-wrap{ transform: scale(1.04); }
}