/* ============================================================
   NICH TEC Webmail — Skin v5
   IMPORTANT: Import Elastic's full CSS first so its layout
   engine stays intact. Our rules only override visuals.
   ============================================================ */

/* Load Elastic's entire CSS — must be first */
@import url('../../elastic/styles/styles.css');

/* Load Elastic's print styles */
@import url('../../elastic/styles/print.css');

/* Inter font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --blue:        #0057FF;
  --blue-dark:   #0046cc;
  --blue-light:  #eef3ff;
  --blue-glow:   rgba(0,87,255,.16);

  --s-bg:        #0d1b2a;
  --s-surface:   #152236;
  --s-hover:     #1e3248;
  --s-active:    rgba(0,87,255,.18);
  --s-border:    rgba(255,255,255,.07);
  --s-text:      #8fa3bc;
  --s-text-hi:   #e2eaf4;

  --bg:          #ffffff;
  --bg-subtle:   #f4f7fb;
  --bg-hover:    #edf1f8;
  --bg-sel:      #e8effe;
  --border:      #dde3ed;
  --border-soft: #edf1f7;

  --t1: #0d1b2a;
  --t2: #374558;
  --t3: #64748b;
  --t4: #94a3b8;

  --green:  #16a34a;
  --red:    #dc2626;
  --orange: #d97706;

  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-pill: 100px;

  --sh-md: 0 4px 16px rgba(0,0,0,.10);
  --sh-lg: 0 12px 32px rgba(0,0,0,.14);
  --sh-xl: 0 24px 56px rgba(0,0,0,.18);

  --t: .14s ease;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Typography base ───────────────────────────────────────── */
html { font-size: 14px !important; }

body,
button, input, select, textarea, optgroup {
  font-family: var(--font) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

a { color: var(--blue) !important; }
a:hover { color: var(--blue-dark) !important; }

/* ── Layout background ─────────────────────────────────────── */
#layout { background: var(--s-bg) !important; }

/* ── Task menu (leftmost icon rail) ────────────────────────── */
#layout-menu {
  background: var(--s-bg) !important;
  border-right: 1px solid var(--s-border) !important;
}

#layout-menu .popover-header {
  background: var(--s-bg) !important;
  border-bottom: 1px solid var(--s-border) !important;
}

#taskmenu {
  background: var(--s-bg) !important;
}

#taskmenu a {
  color: var(--s-text) !important;
  border-radius: var(--r-md) !important;
  transition: background var(--t), color var(--t) !important;
}

#taskmenu a:hover {
  background: var(--s-hover) !important;
  color: var(--s-text-hi) !important;
}

#taskmenu a.selected {
  background: var(--s-active) !important;
  color: #93c5fd !important;
}

#taskmenu a.logout { color: var(--red) !important; opacity: .75 !important; }
#taskmenu a.logout:hover { opacity: 1 !important; }

/* ── Sidebar (folder list panel) ───────────────────────────── */
#layout-sidebar {
  background: var(--s-surface) !important;
  border-right: 1px solid var(--s-border) !important;
}

#layout-sidebar > .header {
  background: var(--s-surface) !important;
  border-bottom: 1px solid var(--s-border) !important;
}

#layout-sidebar > .header .header-title {
  color: var(--s-text-hi) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

#layout-sidebar > .header a.button {
  color: var(--s-text) !important;
  border-radius: var(--r-md) !important;
  transition: all var(--t) !important;
}

#layout-sidebar > .header a.button:hover {
  background: var(--s-hover) !important;
  color: var(--s-text-hi) !important;
}

#layout-sidebar > .footer {
  background: var(--s-surface) !important;
  border-top: 1px solid var(--s-border) !important;
  color: var(--s-text) !important;
  font-size: 11px !important;
}

/* ── Compose button ────────────────────────────────────────── */
#layout-sidebar a.compose,
#layout-sidebar button.compose,
a.compose, button.compose {
  background: var(--blue) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-md) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  transition: all var(--t) !important;
  box-shadow: 0 2px 10px rgba(0,87,255,.28) !important;
}

#layout-sidebar a.compose:hover,
#layout-sidebar button.compose:hover,
a.compose:hover, button.compose:hover {
  background: var(--blue-dark) !important;
  color: #fff !important;
  box-shadow: 0 4px 18px rgba(0,87,255,.38) !important;
  transform: translateY(-1px) !important;
}

/* ── Folder list (mailboxlist) ─────────────────────────────── */
ul#mailboxlist,
#folderlist {
  background: var(--s-surface) !important;
}

ul#mailboxlist li a,
#folderlist li a {
  color: var(--s-text) !important;
  border-radius: var(--r-sm) !important;
  font-size: 13.5px !important;
  transition: background var(--t), color var(--t) !important;
}

ul#mailboxlist li a:hover,
#folderlist li a:hover {
  background: var(--s-hover) !important;
  color: var(--s-text-hi) !important;
}

ul#mailboxlist li.selected > a,
ul#mailboxlist li.focused > a,
#folderlist li.selected > a {
  background: var(--s-active) !important;
  color: #93c5fd !important;
  font-weight: 500 !important;
}

ul#mailboxlist li.inbox > a {
  color: var(--s-text-hi) !important;
  font-weight: 500 !important;
}

/* Folder sub-items indent */
ul#mailboxlist ul li a {
  padding-left: 28px !important;
  font-size: 13px !important;
}

/* Unread count badge */
.unreadcount {
  background: var(--blue) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  border-radius: var(--r-pill) !important;
  padding: 2px 6px !important;
  min-width: 18px !important;
  text-align: center !important;
  line-height: 1.4 !important;
}

/* Quota / disk usage bar */
.quotadisplay { color: var(--s-text) !important; font-size: 11px !important; }
.quotadisplay .bar { background: rgba(255,255,255,.1) !important; border-radius: 10px !important; height: 3px !important; }
.quotadisplay .bar > div { background: var(--blue) !important; border-radius: 10px !important; }

/* Sidebar scrollbar */
#layout-sidebar ::-webkit-scrollbar { width: 4px !important; }
#layout-sidebar ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12) !important; border-radius: 10px !important; }

/* ── List panel (message list) ─────────────────────────────── */
#layout-list {
  background: var(--bg-subtle) !important;
  border-right: 1px solid var(--border) !important;
}

#layout-list > .header {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
}

#layout-list > .header .header-title {
  color: var(--t1) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

#layout-list > .header a.button {
  color: var(--t3) !important;
  border-radius: var(--r-sm) !important;
  transition: all var(--t) !important;
}

#layout-list > .header a.button:hover {
  background: var(--bg-hover) !important;
  color: var(--t1) !important;
}

#layout-list > .footer {
  background: var(--bg) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--t3) !important;
  font-size: 12px !important;
}

/* Search form */
#searchform input,
.searchbar input {
  background: var(--bg-subtle) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-pill) !important;
  color: var(--t1) !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  transition: all var(--t) !important;
}

#searchform input:focus,
.searchbar input:focus {
  background: var(--bg) !important;
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px var(--blue-glow) !important;
  outline: none !important;
}

/* ── Message list table ────────────────────────────────────── */
table#messagelist {
  background: var(--bg-subtle) !important;
}

table#messagelist thead th {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--t3) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  font-family: var(--font) !important;
}

table#messagelist thead th a {
  color: var(--t3) !important;
}

/* Message rows — default */
table#messagelist tbody tr {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border-soft) !important;
  transition: background var(--t) !important;
  cursor: pointer !important;
}

table#messagelist tbody tr:hover {
  background: var(--bg-hover) !important;
}

/* Selected row */
table#messagelist tbody tr.focused,
table#messagelist tbody tr.selected {
  background: var(--bg-sel) !important;
}

/* Blue left bar on selected */
table#messagelist tbody tr.focused td:first-child,
table#messagelist tbody tr.selected td:first-child {
  box-shadow: inset 3px 0 0 var(--blue) !important;
}

/* Unread rows */
table#messagelist tbody tr.unread {
  background: #fafbff !important;
}

table#messagelist tbody tr.unread td.from,
table#messagelist tbody tr.unread td.to,
table#messagelist tbody tr.unread td.subject,
table#messagelist tbody tr.unread .subject {
  font-weight: 600 !important;
  color: var(--t1) !important;
}

/* All cells */
table#messagelist td {
  border: none !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  color: var(--t2) !important;
  vertical-align: middle !important;
  padding: 10px 12px !important;
}

/* Sender */
table#messagelist td.from,
table#messagelist td.to {
  font-weight: 500 !important;
  color: var(--t1) !important;
}

/* Subject */
table#messagelist td.subject { color: var(--t2) !important; }

/* Date */
table#messagelist td.date {
  color: var(--t3) !important;
  font-size: 11.5px !important;
  text-align: right !important;
  white-space: nowrap !important;
}

/* Size */
table#messagelist td.size {
  color: var(--t4) !important;
  font-size: 11px !important;
  text-align: right !important;
}

/* Icons column */
table#messagelist td.icon,
table#messagelist td.flags {
  color: var(--t4) !important;
}

/* Flagged star */
table#messagelist tr.flagged td.icon.flags a,
table#messagelist .icon.flag.enabled {
  color: var(--orange) !important;
}

/* ── Content panel (reading pane) ──────────────────────────── */
#layout-content {
  background: var(--bg) !important;
}

#layout-content > .header {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
}

#layout-content > .header a.button {
  color: var(--t3) !important;
  border-radius: var(--r-sm) !important;
  transition: all var(--t) !important;
}

#layout-content > .header a.button:hover {
  background: var(--bg-hover) !important;
  color: var(--t1) !important;
}

#layout-content > .footer {
  background: var(--bg-subtle) !important;
  border-top: 1px solid var(--border) !important;
}

/* Message subject heading */
.subject.header-title,
#messagecontent .message-header .subject,
h2.subject {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--t1) !important;
  font-family: var(--font) !important;
  line-height: 1.35 !important;
}

/* Message header table (From / To / Date) */
.message-header,
#message-header {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border-soft) !important;
}

.message-header table td,
.message-header .header td {
  font-family: var(--font) !important;
  font-size: 13px !important;
  color: var(--t2) !important;
  border: none !important;
  padding: 3px 8px 3px 0 !important;
  vertical-align: top !important;
}

.message-header .header-title,
.message-header td.title {
  color: var(--t3) !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  padding-right: 16px !important;
}

/* Message body */
.message-text, #messagebody,
div.message-content, .rcmBody {
  font-family: var(--font) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: var(--t2) !important;
  background: var(--bg) !important;
}

/* Attachments */
.attachments-list li,
.attachmentslist li {
  background: var(--bg-subtle) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--font) !important;
  font-size: 12.5px !important;
  color: var(--t2) !important;
  transition: background var(--t) !important;
}

.attachments-list li:hover,
.attachmentslist li:hover { background: var(--bg-hover) !important; }

.attachments-list a,
.attachmentslist a { color: var(--blue) !important; font-weight: 500 !important; }

/* ── Toolbar buttons ────────────────────────────────────────── */
.toolbar a.button,
.toolbar button,
#toolbar a.button,
#toolbar button {
  color: var(--t3) !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: all var(--t) !important;
  border: 1px solid transparent !important;
}

.toolbar a.button:hover,
.toolbar button:hover,
#toolbar button:hover {
  background: var(--bg-hover) !important;
  border-color: var(--border) !important;
  color: var(--t1) !important;
}

/* Reply / Forward */
.toolbar button.reply,
.toolbar button.reply-all,
.toolbar a.reply,
.toolbar button.forward {
  color: var(--blue) !important;
}

.toolbar button.reply:hover,
.toolbar button.forward:hover {
  background: var(--blue-light) !important;
}

/* Delete */
.toolbar button.delete,
.toolbar a.delete { color: var(--red) !important; }

.toolbar button.delete:hover,
.toolbar a.delete:hover { background: #fef2f2 !important; }

/* Send */
.toolbar button.send,
button.send {
  background: var(--blue) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-pill) !important;
  font-weight: 600 !important;
  font-family: var(--font) !important;
  box-shadow: 0 2px 10px rgba(0,87,255,.25) !important;
  transition: all var(--t) !important;
}

.toolbar button.send:hover,
button.send:hover {
  background: var(--blue-dark) !important;
  box-shadow: 0 4px 18px rgba(0,87,255,.35) !important;
  transform: translateY(-1px) !important;
}

/* Disabled */
.toolbar button:disabled,
.toolbar a.button.disabled {
  opacity: .38 !important;
  pointer-events: none !important;
}

/* ── Compose panel ──────────────────────────────────────────── */
#compose-headers {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
}

#compose-headers tr {
  border-bottom: 1px solid var(--border-soft) !important;
}

#compose-headers td {
  font-family: var(--font) !important;
  border: none !important;
}

#compose-headers label,
#compose-headers .compose-header {
  color: var(--t3) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
}

#compose-headers input[type="text"],
.compose-header-row input {
  border: none !important;
  outline: none !important;
  font-family: var(--font) !important;
  font-size: 14px !important;
  color: var(--t1) !important;
  background: transparent !important;
}

/* ── Generic inputs ─────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea, select {
  font-family: var(--font) !important;
  font-size: 14px !important;
  color: var(--t1) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  background: var(--bg) !important;
  transition: border-color var(--t), box-shadow var(--t) !important;
  outline: none !important;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px var(--blue-glow) !important;
}

/* ── Buttons — generic ──────────────────────────────────────── */
button.mainaction,
input[type="submit"].mainaction {
  background: var(--blue) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-pill) !important;
  font-family: var(--font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  box-shadow: 0 2px 10px rgba(0,87,255,.25) !important;
  transition: all var(--t) !important;
}

button.mainaction:hover { background: var(--blue-dark) !important; transform: translateY(-1px) !important; }

button.cancel {
  background: transparent !important;
  color: var(--t3) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-pill) !important;
  font-family: var(--font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all var(--t) !important;
}

button.cancel:hover { background: var(--bg-hover) !important; color: var(--t1) !important; }

/* ── Popup / context menus ──────────────────────────────────── */
.popupmenu, ul.popupmenu, .dropdown-menu {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-lg) !important;
  overflow: hidden !important;
}

.popupmenu li a, .popupmenu li button {
  font-family: var(--font) !important;
  font-size: 13.5px !important;
  color: var(--t2) !important;
  border-radius: var(--r-sm) !important;
  transition: all var(--t) !important;
}

.popupmenu li a:hover, .popupmenu li button:hover {
  background: var(--bg-subtle) !important;
  color: var(--t1) !important;
}

.popupmenu li.selected a {
  background: var(--blue-light) !important;
  color: var(--blue) !important;
}

.popupmenu li hr { border-color: var(--border-soft) !important; }

/* ── Dialogs ────────────────────────────────────────────────── */
.ui-dialog {
  background: var(--bg) !important;
  border: none !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--sh-xl) !important;
  font-family: var(--font) !important;
}

.ui-dialog .ui-dialog-titlebar {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
}

.ui-dialog .ui-dialog-title {
  font-family: var(--font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--t1) !important;
}

.ui-dialog .ui-dialog-content {
  background: var(--bg) !important;
  font-family: var(--font) !important;
  color: var(--t2) !important;
}

.ui-dialog .ui-dialog-buttonpane {
  background: var(--bg-subtle) !important;
  border-top: 1px solid var(--border) !important;
}

.ui-widget-overlay {
  background: rgba(13,27,42,.5) !important;
  backdrop-filter: blur(4px) !important;
}

/* ── Notifications ──────────────────────────────────────────── */
#notifications .notification,
.ui-notify-message {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-lg) !important;
  font-family: var(--font) !important;
  font-size: 13.5px !important;
  color: var(--t2) !important;
}

#notifications .notification.confirmation { border-left: 3px solid var(--green) !important; }
#notifications .notification.error        { border-left: 3px solid var(--red) !important; }
#notifications .notification.warning      { border-left: 3px solid var(--orange) !important; }
#notifications .notification.loading      { border-left: 3px solid var(--blue) !important; }

/* ── Settings ───────────────────────────────────────────────── */
#settings-sections li a,
.settingslist li a {
  font-family: var(--font) !important;
  font-size: 13.5px !important;
  color: var(--t2) !important;
  transition: all var(--t) !important;
}

#settings-sections li a:hover { background: var(--bg-hover) !important; color: var(--t1) !important; }

#settings-sections li.selected a,
.settingslist li.selected a {
  background: var(--blue-light) !important;
  color: var(--blue) !important;
  font-weight: 600 !important;
  border-left: 3px solid var(--blue) !important;
}

/* ── Scrollbars ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── Login page ─────────────────────────────────────────────── */
body.task-login {
  background: linear-gradient(160deg, #0a1628 0%, #0d2244 50%, #0a1628 100%) !important;
  position: relative !important;
}

/* Glow orbs */
body.task-login::before,
body.task-login::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

body.task-login::before {
  width: 700px;
  height: 700px;
  top: -200px;
  right: -200px;
  background: radial-gradient(circle, rgba(0,87,255,.1) 0%, transparent 65%);
}

body.task-login::after {
  width: 600px;
  height: 600px;
  bottom: -200px;
  left: -200px;
  background: radial-gradient(circle, rgba(0,87,255,.07) 0%, transparent 65%);
}

/* Elastic puts the login form in #layout-content when task=login */
body.task-login #layout-content,
body.task-login .login-form,
#login .contentbox,
.formcontainer {
  background: #fff !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--sh-xl) !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Login inputs */
body.task-login input[type="text"],
body.task-login input[type="email"],
body.task-login input[type="password"] {
  background: var(--bg-subtle) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  font-family: var(--font) !important;
  font-size: 14px !important;
  color: var(--t1) !important;
  padding: 11px 14px !important;
  width: 100% !important;
  transition: all var(--t) !important;
  outline: none !important;
  -webkit-appearance: none !important;
}

body.task-login input:focus {
  background: var(--bg) !important;
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px var(--blue-glow) !important;
}

body.task-login label {
  font-family: var(--font) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--t2) !important;
  display: block !important;
  margin-bottom: 6px !important;
}

/* Login submit button */
body.task-login button[type="submit"],
body.task-login input[type="submit"],
#rcmloginsubmit {
  width: 100% !important;
  padding: 12px !important;
  background: var(--blue) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-md) !important;
  font-family: var(--font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 18px rgba(0,87,255,.3) !important;
  transition: all var(--t) !important;
}

body.task-login button[type="submit"]:hover,
body.task-login input[type="submit"]:hover {
  background: var(--blue-dark) !important;
  box-shadow: 0 6px 24px rgba(0,87,255,.42) !important;
  transform: translateY(-1px) !important;
}

/* Login error */
body.task-login .message.error,
body.task-login .login-error {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  border-radius: var(--r-sm) !important;
  color: var(--red) !important;
  font-size: 13px !important;
  padding: 10px 14px !important;
  font-family: var(--font) !important;
}

/* Login page product name */
body.task-login #login-title,
body.task-login h1,
body.task-login .login-title {
  font-family: var(--font) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--t1) !important;
  letter-spacing: -.02em !important;
  text-align: center !important;
}

/* Footer / copyright on login */
body.task-login .login-footer,
body.task-login #login .copyright,
body.task-login .copyright {
  font-family: var(--font) !important;
  font-size: 11.5px !important;
  color: var(--t4) !important;
  text-align: center !important;
}

/* ── Focus ring ─────────────────────────────────────────────── */
*:focus { outline: none !important; }
*:focus-visible {
  outline: 2px solid var(--blue) !important;
  outline-offset: 2px !important;
}