/* KWD Webmail Theme - Modern Light */
:root {
  --kwd-bg: #f4f9ff;
  --kwd-bg-soft: #eef5ff;
  --kwd-card: #ffffff;
  --kwd-line: #d8e5f2;
  --kwd-text: #1d2d44;
  --kwd-muted: #5f7691;
  --kwd-accent: #1f87ea;
  --kwd-accent-2: #156fc8;
  --kwd-success: #1d9a5f;
  --kwd-danger: #d74f4f;
  --kwd-shadow: 0 10px 34px rgba(19, 57, 98, 0.08);
}

html, body {
  background: radial-gradient(1100px 620px at -18% -18%, #dcf0ff 0%, transparent 52%),
              radial-gradient(900px 540px at 115% -20%, #e9fff4 0%, transparent 50%),
              linear-gradient(180deg, #f9fcff 0%, #f3f8ff 50%, #edf4ff 100%) !important;
  color: var(--kwd-text) !important;
  direction: rtl !important;
  text-align: right !important;
  font-family: "Tajawal", "Segoe UI", sans-serif !important;
}

body.task-login #logo {
  width: min(180px, 60vw) !important;
  height: auto !important;
  margin: 0 auto 24px !important;
  display: block !important;
  position: relative !important;
  top: 0 !important;
  background: linear-gradient(135deg, #1a7de6 0%, #0f5fc0 100%) !important;
  border-radius: 18px !important;
  padding: 10px 28px !important;
  box-shadow: 0 6px 20px rgba(18, 80, 185, 0.25) !important;
}

/* Stack logo above form, both centered */
body.task-login #layout-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  direction: ltr !important;
}
body.task-login #login-form {
  display: block !important;
  text-align: right !important;  /* labels/inputs inside form keep RTL */
  direction: rtl !important;
  width: min(360px, 94vw) !important;
  position: relative !important;
  top: 0 !important;
}

/* Labels above inputs in login form */
body.task-login #login-form table,
body.task-login #login-form tbody {
  display: block !important;
  width: 100% !important;
}
body.task-login #login-form tr.form-group {
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: 14px !important;
}
/* td.title: icon beside label in same row */
body.task-login #login-form td.title {
  display: flex !important;
  align-items: center !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  width: 100% !important;
  padding: 0 0 8px !important;
  border: none !important;
  background: none !important;
  direction: rtl !important;
}
body.task-login #login-form td.title label {
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--kwd-text) !important;
}
/* Icon moved to td.title by JS — show it, strip Bootstrap gray box */
body.task-login #login-form td.title .input-group-prepend {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  order: -1 !important;  /* RTL flex: order -1 = rightmost (start of RTL axis) */
}
body.task-login #login-form td.title i.input-group-text {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  font-size: 16px !important;
  font-family: "Icons" !important;
  font-weight: 900 !important;
  color: var(--kwd-accent) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
/* Restore icon content — moved out of .input-group so original rule no longer applies */
body.task-login #login-form td.title i.icon.user::before {
  content: "\f007" !important;
  font-family: "Icons" !important;
  font-weight: 900 !important;
  color: var(--kwd-accent) !important;
}
body.task-login #login-form td.title i.icon.pass::before {
  content: "\f023" !important;
  font-family: "Icons" !important;
  font-weight: 900 !important;
  color: var(--kwd-accent) !important;
}
body.task-login #login-form td.input {
  width: 100% !important;
  padding: 0 !important;
  display: block !important;
}
/* Fix Bootstrap .input-group > .form-control { width: 1% } override */
body.task-login #login-form td.input > .form-control {
  width: 100% !important;
  min-width: 0 !important;
  flex: unset !important;
}
/* Any prepend remaining in td.input (fallback if JS didn't move it) */
body.task-login #login-form td.input .input-group-prepend {
  display: none !important;
}
/* Username wrapper: border is on the div, not the input */
body.task-login #login-form td.input > div:focus-within {
  border-color: var(--kwd-accent) !important;
  box-shadow: 0 0 0 3px rgba(31, 135, 234, 0.18) !important;
  outline: none !important;
}
/* Password input: clear visible border */
body.task-login #login-form #rcmloginpwd {
  border: 2px solid #c4daf5 !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  background: #fff !important;
  display: block !important;
  width: 100% !important;
}
body.task-login #login-form #rcmloginpwd:focus {
  border-color: var(--kwd-accent) !important;
  box-shadow: 0 0 0 3px rgba(31, 135, 234, 0.18) !important;
  outline: none !important;
}
/* Hide placeholder — label+icon visible above input */
body.task-login #rcmloginuser::placeholder,
body.task-login #rcmloginpwd::placeholder,
body.task-login #rcmloginuser::-webkit-input-placeholder,
body.task-login #rcmloginpwd::-webkit-input-placeholder {
  color: transparent !important;
  opacity: 0 !important;
}

#layout {
  direction: rtl !important;
  flex-direction: row-reverse !important;
}

#layout > #layout-menu { order: 4 !important; }
#layout > #layout-sidebar { order: 3 !important; }
#layout > #layout-list { order: 2 !important; }
#layout > #layout-content { order: 1 !important; }

/* Flip directional icons for RTL (back arrow, prev/next page) */
.back-list-button::before,
.prev-page::before,
.next-page::before {
  transform: scaleX(-1);
  display: inline-block;
}

#layout-sidebar,
#layout-list {
  border-right: 0 !important;
  border-left: 1px solid var(--kwd-line) !important;
}

body,
#layout,
#layout-menu,
#layout-sidebar,
#layout-list,
#layout-content,
#messagestack,
.box,
.boxcontent,
.records-table,
#folderlist-content,
#messagelist,
.listing,
#quicksearchbar,
#messageheader,
#mainscreen,
#taskbar,
#taskmenu,
#toolbar-menu,
#mailview-top,
.header,
#layout > div,
.popupmenu,
.ui-dialog,
.compose-headers {
  background-color: transparent !important;
}

#layout > #layout-sidebar,
#layout > #layout-list,
#layout > #layout-content,
#mailview-top,
#messagelist,
#folderlist-content,
.records-table,
.box,
.ui-dialog,
.popupmenu {
  background: var(--kwd-card) !important;
  border: 1px solid var(--kwd-line) !important;
  box-shadow: var(--kwd-shadow);
  border-radius: 14px !important;
}

/* Sidebar nav column — unified blue panel */
#layout > #layout-menu {
  background: linear-gradient(180deg, #1a7de6 0%, #0f5fc0 100%) !important;
  border: none !important;
  box-shadow: 0 6px 28px rgba(18, 80, 185, 0.28) !important;
  border-radius: 16px !important;
}

#layout {
  gap: 12px;
  padding: 12px;
  box-sizing: border-box;
}

#layout-menu {
  min-width: 84px;
  position: relative !important; /* contain absolutely-positioned .special-buttons */
}

#taskmenu a,
#taskmenu .button,
#taskbar a,
.button,
.toolbar a,
a.button,
input.button,
.btn,
button,
.formbuttons input,
.formbuttons button {
  border-radius: 10px !important;
  border: 1px solid #cbe0f5 !important;
  background: #f7fbff !important;
  color: var(--kwd-text) !important;
  transition: all .18s ease;
}

#taskmenu a.selected,
#taskmenu .selected,
#taskbar a.selected,
.button.mainaction,
.formbuttons input.mainaction,
.formbuttons button.mainaction {
  background: linear-gradient(135deg, var(--kwd-accent) 0%, var(--kwd-accent-2) 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

#taskmenu a:hover,
#taskbar a:hover,
.button:hover,
a.button:hover,
input.button:hover,
button:hover {
  transform: translateY(-1px);
  background: #edf5ff !important;
  border-color: #b9d6f4 !important;
}

#taskmenu a.selected:hover,
#taskbar a.selected:hover,
.button.mainaction:hover,
.formbuttons input.mainaction:hover,
.formbuttons button.mainaction:hover {
  background: linear-gradient(135deg, #2b95f8 0%, #1b7cdd 100%) !important;
}

#folderlist li,
#messagelist tbody tr,
.records-table tbody tr,
.listing tbody tr {
  border-bottom: 1px solid #e8f0fa !important;
}

#folderlist li a,
#messagelist td,
.records-table td,
.records-table th,
.listing td,
.listing th,
.header,
label,
select,
input,
textarea,
p,
span,
div {
  color: var(--kwd-text) !important;
  text-align: right !important;
}

input,
textarea,
select,
#quicksearchbox,
.searchbox input,
.form-control {
  background: #ffffff !important;
  border: 1px solid #cfe0f2 !important;
  border-radius: 10px !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  font-weight: 500 !important;
  font-family: "Segoe UI", "Roboto", "Tajawal", sans-serif !important;
}

input:focus,
textarea:focus,
select:focus,
#quicksearchbox:focus,
.searchbox input:focus {
  border-color: var(--kwd-accent) !important;
  box-shadow: none !important;
  outline: 0 !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

/* Fix browser autofill blue background washing out text */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--kwd-text) !important;
  -webkit-box-shadow: 0 0 0 30px #f8fbff inset !important;
  box-shadow: 0 0 0 30px #f8fbff inset !important;
  transition: background-color 9999s ease-in-out 0s;
}

#messagelist tbody tr.selected,
#folderlist li.selected,
#folderlist li.selected > a,
.records-table tr.selected,
.listing tbody tr.selected {
  background: #e8f3ff !important;
}

#messagelist tbody tr.unread td.subject,
#messagelist tbody tr.unread td,
.unread,
.unread a {
  font-weight: 700 !important;
}

#layout-content .header,
.box .boxtitle,
.ui-dialog-titlebar,
.popupmenu .title {
  background: #f1f7ff !important;
  border-bottom: 1px solid #d7e7f7 !important;
  color: #1f314a !important;
  border-radius: 12px 12px 0 0 !important;
}

#messagestack .notice,
#messagestack .confirmation,
#messagestack .warning,
#messagestack .error,
#messagestack .success {
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(16, 41, 73, 0.16);
  font-weight: 600 !important;
  font-size: 0.98rem !important;
  padding: 14px 16px !important;
}

#messagestack .notice,
#messagestack .loading {
  background: linear-gradient(135deg, #1f87ea 0%, #156fc8 100%) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: 0 12px 32px rgba(31, 135, 234, 0.32) !important;
}

#messagestack .confirmation,
#messagestack .success {
  background: #eafaf1 !important;
  border: 1px solid #bdebcf !important;
  color: var(--kwd-success) !important;
}

#messagestack .error {
  background: #ffeef0 !important;
  border: 1px solid #fac6cd !important;
  color: var(--kwd-danger) !important;
}

a,
a:visited {
  color: #1978d6 !important;
}

a:hover {
  color: #0f5fab !important;
}

#layout-sidebar,
#layout-list,
#layout-content {
  min-height: calc(100vh - 24px);
}

#taskmenu,
#taskbar,
.toolbar {
  gap: 6px;
}

#layout-content iframe {
  background: #ffffff !important;
}

@media (max-width: 900px) {
  #layout {
    padding: 8px;
    gap: 8px;
  }

  body.task-login #logo {
    width: min(200px, 74vw) !important;
  }

  #layout > #layout-menu,
  #layout > #layout-sidebar,
  #layout > #layout-list,
  #layout > #layout-content {
    border-radius: 12px !important;
  }
}

/* ── Phone ≤ 600 px ─────────────────────────────────────────────── */
@media (max-width: 600px) {
  html, body {
    font-size: 15px !important;
  }

  #layout {
    padding: 6px !important;
    gap: 6px !important;
  }

  /* Login form: full-width card, comfortable touch targets */
  body.task-login #login-form {
    width: min(340px, 94vw) !important;
    padding: 20px 16px !important;
    box-sizing: border-box !important;
  }

  body.task-login .input-group,
  body.task-login .row {
    margin-bottom: 12px !important;
  }

  body.task-login input[type="text"],
  body.task-login input[type="password"],
  body.task-login input[type="email"] {
    height: 48px !important;
    font-size: 16px !important;   /* prevents iOS zoom-on-focus */
    padding: 0 12px !important;
    border-radius: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  body.task-login .formbuttons input,
  body.task-login .formbuttons button,
  body.task-login input[type="submit"] {
    height: 48px !important;
    font-size: 16px !important;
    border-radius: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Toolbar buttons — larger tap area */
  .button,
  a.button,
  button,
  .toolbar a,
  #taskmenu a {
    min-height: 40px !important;
    font-size: 13px !important;
    padding: 6px 10px !important;
  }

  /* Message list rows */
  #messagelist td {
    padding: 10px 8px !important;
    font-size: 13px !important;
  }

  /* Compose/read panels */
  #layout-content,
  #layout-sidebar,
  #layout-list {
    min-height: unset !important;
    border-radius: 10px !important;
  }

  /* Pop-up dialogs */
  .ui-dialog {
    width: 96vw !important;
    left: 2vw !important;
    right: 2vw !important;
    box-sizing: border-box !important;
  }

  /* Notification toasts */
  #messagestack {
    left: 8px !important;
    right: 8px !important;
    bottom: 12px !important;
    width: auto !important;
  }

  #messagestack .notice,
  #messagestack .error,
  #messagestack .success,
  #messagestack .warning {
    font-size: 14px !important;
    padding: 12px 14px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   BEAUTIFUL POST-LOGIN REDESIGN
   ═══════════════════════════════════════════════════════════════ */

/* ── Global page chrome ────────────────────────────────────────── */
html:not(.task-login) body,
body:not(.task-login) {
  background:
    radial-gradient(900px 500px at 105% 0%, #e4f2ff 0%, transparent 60%),
    radial-gradient(700px 400px at -10% 100%, #e8f8f0 0%, transparent 55%),
    linear-gradient(160deg, #f0f7ff 0%, #f7fbff 60%, #eef8f5 100%) !important;
}

/* ── Task menu (main navigation sidebar / top bar) ─────────────── */
/* Logo area: transparent so unified blue from #layout-menu shows through */
#layout-menu .popover-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.2) !important;
  padding: 6px 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Override skin max-width/max-height so logo can fill the space */
#layout-menu .popover-header img {
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
}

/* Logo area: white text on unified blue background */
#layout-menu #logo {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  padding: 2px 4px !important;
  border-bottom: none !important;
  margin-bottom: 0 !important;
  box-sizing: border-box !important;
}

#taskmenu {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 4px 4px 8px !important;
}

#taskmenu a,
#taskmenu .button {
  background: transparent !important;
  border: none !important;
  color: rgba(255, 255, 255, 0.82) !important;
  border-radius: 10px !important;
  transition: all 0.17s ease !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 8px 6px !important;
  gap: 3px !important;
}

#taskmenu a .label,
#taskmenu .button .label {
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 11px !important;
}

#taskmenu a.selected,
#taskmenu .button.selected,
#taskmenu a:not(.special).active {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

#taskmenu a.selected .label,
#taskmenu .button.selected .label {
  color: #ffffff !important;
}

#taskmenu a:hover,
#taskmenu .button:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  transform: none !important;
}

/* Special buttons (dark mode, about, logout) — keep inside taskmenu card */
#taskmenu .special-buttons {
  position: static !important;
  display: block !important;
  background: transparent !important;
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  margin-top: 6px !important;
  padding-top: 4px !important;
}

#taskmenu .special-buttons a,
#taskmenu a.about,
#taskmenu a.logout {
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: 11px !important;
}

#taskmenu a.logout:hover {
  background: rgba(255, 60, 60, 0.25) !important;
  color: #ffcccc !important;
}

/* Fix elastic-skin's negative margin trick which breaks in RTL */
#layout > div > .header .header-title {
  margin: 0 !important;
  text-align: right !important;
  padding-right: 8px !important;
}

/* ── Folder sidebar ─────────────────────────────────────────────── */
#layout-sidebar {
  background: #ffffff !important;
  border: 1px solid #dce9f7 !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(18, 80, 170, 0.06) !important;
  overflow: hidden !important;
}

/* Sidebar header (account name) — desktop only; mobile overrides below */
@media (min-width: 768px) {
  #layout-sidebar .header {
    background: linear-gradient(135deg, #f0f8ff 0%, #e8f3ff 100%) !important;
    border-bottom: 1px solid #d4e8f8 !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 0 16px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    color: #1a3a5c !important;
  }
}

/* Folder list items */
#folderlist li,
.folderlist li {
  border-bottom: none !important;
  padding: 1px 8px !important;
}

#folderlist li a,
.folderlist li a {
  display: flex !important;
  align-items: center !important;
  padding: 9px 10px !important;
  border-radius: 10px !important;
  color: #2a3f58 !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  transition: all 0.15s ease !important;
  gap: 8px !important;
  text-align: right !important;
  direction: rtl !important;
}

#folderlist li a:hover,
.folderlist li a:hover {
  background: #f0f7ff !important;
  color: #1f87ea !important;
}

#folderlist li.selected > a,
#folderlist li.selected > a:hover,
.folderlist li.selected > a {
  background: linear-gradient(135deg, #e8f3ff 0%, #d8ecff 100%) !important;
  color: #1560c4 !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(21, 96, 196, 0.1) !important;
}

/* Unread count badges */
#folderlist .unread-count,
#folderlist .badge {
  background: var(--kwd-accent) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  min-width: 20px !important;
  padding: 2px 6px !important;
  margin-right: auto !important;
}

/* ── Message list panel ──────────────────────────────────────────── */
#layout-list {
  background: #ffffff !important;
  border: 1px solid #dce9f7 !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(18, 80, 170, 0.06) !important;
  overflow: hidden !important;
}

/* Message list toolbar */
#layout-list .header,
#mailview-top .header {
  background: linear-gradient(135deg, #f5f9ff 0%, #edf4ff 100%) !important;
  border-bottom: 1px solid #d8e9f5 !important;
  border-radius: 16px 16px 0 0 !important;
  padding: 10px 12px !important;
}

/* Message list rows */
#messagelist tbody tr {
  border-bottom: 1px solid #edf4fb !important;
  transition: background 0.12s ease !important;
}

#messagelist tbody tr:hover {
  background: #f4f9ff !important;
}

#messagelist tbody tr.selected,
#messagelist tbody tr.selected:hover {
  background: linear-gradient(90deg, #e8f2ff 0%, #deeeff 100%) !important;
  border-left: 3px solid var(--kwd-accent) !important;
}

/* Unread messages bold + accent color for sender */
#messagelist tbody tr.unread td.fromto,
#messagelist tbody tr.unread .sender {
  color: #0d4fa8 !important;
  font-weight: 700 !important;
}

#messagelist td {
  padding: 11px 10px !important;
  font-size: 14px !important;
  vertical-align: middle !important;
}

/* Subject column */
#messagelist td.subject {
  font-size: 14px !important;
  line-height: 1.4 !important;
}

/* Date column */
#messagelist td.date {
  color: var(--kwd-muted) !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

/* Empty mailbox state */
#layout-list .pagenav,
.toolbar[aria-label="List navigation"] {
  background: transparent !important;
  border-top: 1px solid #e8f0fa !important;
  padding: 8px 12px !important;
  color: var(--kwd-muted) !important;
  font-size: 13px !important;
}

/* ── Application toolbar (reply/forward/delete bar) ─────────────── */
#layout-content .header,
#mailview-top .toolbar,
.toolbar.listing-toolbar {
  background: linear-gradient(135deg, #f5f9ff 0%, #edf4ff 100%) !important;
  border-bottom: 1px solid #d8e9f5 !important;
  gap: 4px !important;
  padding: 8px 12px !important;
}

/* Toolbar action buttons */
.toolbar a,
.toolbar button:not(.button-icon),
#toolbar-menu a,
#toolbar-menu button {
  background: #ffffff !important;
  border: 1px solid #cde2f5 !important;
  border-radius: 9px !important;
  color: #1d3a58 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 6px 12px !important;
  height: auto !important;
  min-height: 34px !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 3px rgba(18, 70, 140, 0.06) !important;
}

.toolbar a:hover,
.toolbar button:hover {
  background: #eef5ff !important;
  border-color: #b2d4f4 !important;
  color: #1060c4 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 10px rgba(18, 70, 140, 0.12) !important;
}

.toolbar a.delete,
.toolbar button.delete {
  border-color: #f5c5c8 !important;
  color: #c83a3a !important;
}

.toolbar a.delete:hover,
.toolbar button.delete:hover {
  background: #fff0f0 !important;
  border-color: #f0a0a5 !important;
}

/* Compose button — glass/frosted look inside unified blue sidebar */
#taskmenu a.compose,
a.compose.button {
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  margin: 0 0 6px !important;
  width: 100% !important;
}

#taskmenu a.compose:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ── Message content area ────────────────────────────────────────── */
#layout-content {
  background: #ffffff !important;
  border: 1px solid #dce9f7 !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(18, 80, 170, 0.06) !important;
  overflow: hidden !important;
}

/* ── Popups, dialogs, context menus ─────────────────────────────── */
.ui-dialog,
.popupmenu,
.dropdown-menu {
  border: 1px solid #d4e5f7 !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 40px rgba(18, 60, 130, 0.16) !important;
  overflow: hidden !important;
}

.ui-dialog .ui-dialog-titlebar {
  background: linear-gradient(135deg, #f0f7ff 0%, #e6f0ff 100%) !important;
  border-bottom: 1px solid #d0e4f5 !important;
  border-radius: 14px 14px 0 0 !important;
  font-weight: 700 !important;
  color: #1a3a5c !important;
}

.popupmenu li a,
.dropdown-menu a {
  padding: 10px 16px !important;
  font-size: 14px !important;
  border-radius: 8px !important;
  margin: 2px 6px !important;
  color: #1d3558 !important;
}

/* All popup list items — one background color */
.popupmenu li,
.popupmenu li.active,
.popupmenu li.selected {
  background-color: #ffffff !important;
}

.popupmenu li a:hover,
.dropdown-menu a:hover {
  background: #edf5ff !important;
  color: #1060c4 !important;
}

/* ── Mobile layout ≤ 767 px ─────────────────────────────────────── */
@media (max-width: 767px) {
  /* Collapse menu column to zero — keeps it in DOM for Roundcube JS
     but removes the dark visual strip */
  #layout-menu {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    flex: none !important;
  }

  /* Hide the taskmenu inside it too */
  #taskmenu {
    display: none !important;
  }

  /* Clean backgrounds — override elastic skin's dark gray */
  html, body, #layout, #mainscreen {
    background: #f0f5fb !important;
    overflow-x: hidden !important;
  }

  #layout-sidebar,
  #layout-list,
  #layout-content {
    background: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Force ALL panel headers white on mobile */
  #layout-sidebar .header,
  #layout-list .header,
  #layout-content .header {
    background: #ffffff !important;
    background-image: none !important;
    color: #1a3a5c !important;
    border-bottom: 1px solid #e8f0fa !important;
  }

  /* Completely hide the dark popover-header inside the collapsed layout-menu */
  #layout-menu .popover-header {
    display: none !important;
  }

  /* Pull logo out of the collapsed menu column — show it centered at top */
  body:not(.task-login) #logo {
    position: fixed !important;
    top: 8px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    z-index: 9998 !important;
    width: auto !important;
    height: 36px !important;
  }

  /* Add top padding so content doesn't slide under the logo */
  #layout {
    padding-top: 54px !important;
    padding-bottom: calc(62px + env(safe-area-inset-bottom)) !important;
  }

  /* Prevent iOS input zoom */
  input, textarea, select {
    font-size: 16px !important;
  }

  #quicksearchbox {
    font-size: 16px !important;
    border-radius: 10px !important;
  }

  #messagelist td {
    padding: 12px 10px !important;
    font-size: 14px !important;
  }

  #messagelist td.date {
    font-size: 12px !important;
  }

  #folderlist li a,
  .folderlist li a {
    padding: 13px 14px !important;
    font-size: 15px !important;
  }

  .toolbar a,
  .toolbar button {
    min-height: 44px !important;
    font-size: 14px !important;
  }

  .ui-dialog {
    width: 96vw !important;
    left: 2vw !important;
    max-height: 88vh !important;
    border-radius: 16px !important;
  }
}

/* ── Custom bottom nav bar (injected by JS — no media query needed) */
#kwd-mobile-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  min-height: 62px;
  padding-bottom: env(safe-area-inset-bottom);
  background: linear-gradient(180deg, #1e88f0 0%, #0e65cc 100%);
  border-radius: 18px 18px 0 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-around;
  z-index: 2147483647;
  box-shadow: 0 -3px 20px rgba(10, 60, 160, 0.28);
  overflow: hidden;
  box-sizing: border-box;
}

#kwd-mobile-nav > a,
#kwd-mobile-nav > button {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 4px 6px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.65);
  font-size: 10px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  position: relative;
  transition: color 0.15s, background 0.15s;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

#kwd-mobile-nav > a.selected,
#kwd-mobile-nav > button.selected,
#kwd-mobile-nav > a.active,
#kwd-mobile-nav > button.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}

#kwd-mobile-nav > a.selected::after,
#kwd-mobile-nav > button.selected::after,
#kwd-mobile-nav > a.active::after,
#kwd-mobile-nav > button.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 3px;
  background: #ffffff;
  border-radius: 0 0 3px 3px;
}

#kwd-mobile-nav > a:active,
#kwd-mobile-nav > button:active {
  background: rgba(255, 255, 255, 0.2);
}

#kwd-mobile-nav .inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

#kwd-mobile-nav .icon {
  font-size: 20px;
  line-height: 1;
  display: block;
}

#kwd-mobile-nav .label {
  font-size: 10px;
  display: block;
  white-space: nowrap;
  color: inherit;
}

/* ── Compose page specific ──────────────────────────────────────── */
.compose-headers label,
#compose-cc label,
#compose-bcc label,
#compose-subject label {
  font-weight: 600 !important;
  color: #1d3a58 !important;
  font-size: 13px !important;
}

.compose-headers input,
#compose-subject input {
  border-radius: 10px !important;
  padding: 8px 12px !important;
  font-size: 15px !important;
  height: auto !important;
}

/* ── Contacts page ──────────────────────────────────────────────── */
#contacts-list td,
.records-table td {
  padding: 10px 12px !important;
  font-size: 14px !important;
}

.records-table tr.selected td {
  background: linear-gradient(90deg, #e8f2ff, #ddeeff) !important;
}

/* ── Settings page ──────────────────────────────────────────────── */
.formcontent h3,
.formcontent .section-title {
  color: var(--kwd-accent) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-bottom: 2px solid #d8edff !important;
  padding-bottom: 6px !important;
  margin-bottom: 12px !important;
}

/* Submit / Save buttons */
.formbuttons input[type="submit"],
.formbuttons button[type="submit"],
input.mainaction,
button.mainaction {
  background: linear-gradient(135deg, #1f87ea 0%, #1363bf 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  border-radius: 12px !important;
  padding: 10px 28px !important;
  box-shadow: 0 4px 14px rgba(31, 135, 234, 0.3) !important;
  transition: all 0.18s ease !important;
}

.formbuttons input[type="submit"]:hover,
.formbuttons button[type="submit"]:hover,
input.mainaction:hover,
button.mainaction:hover {
  background: linear-gradient(135deg, #2d98f8 0%, #1a72d8 100%) !important;
  box-shadow: 0 6px 20px rgba(31, 135, 234, 0.45) !important;
  transform: translateY(-1px) !important;
}

/* Hide hamburger menu button on mobile (sidebar replaced by bottom nav) */
@media (max-width: 768px) {
  a.task-menu-button {
    display: none !important;
  }
}

/* Modern expressive icons */
/* Refresh / check-mail → sync/refresh icon */
a.button.icon.refresh:before,
button.btn.refresh:before {
  content: "\f021" !important;
}

/* Toolbar menu (⋮) → horizontal sliders */
a.button.icon.toolbar-menu-button:before,
button.btn.toolbar-menu-button:before {
  content: "\f1de" !important;
}