/* =============================================
   BYTEMECHANIX APPLE THEME - CLEAN REWRITE
   ============================================= */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap");

/* === GLOBAL === */
* { font-family: -apple-system, "SF Pro Text", "Inter", sans-serif !important; -webkit-font-smoothing: antialiased !important; }
body, html { background: #F5F5F7 !important; color: #1D1D1F !important; }
a { color: #0071E3 !important; }
hr { border-color: rgba(0,0,0,0.06) !important; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.35); }

/* === TASKMENU (left icon strip) - ALWAYS DARK === */
#taskmenu {
  background: rgb(47, 58, 63) !important;
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  display: block !important;
  overflow: hidden !important;
}
#taskmenu span.action-buttons,
#taskmenu span.special-buttons {
  display: block !important;
  width: 60px !important;
  background: rgb(47, 58, 63) !important;
}
#taskmenu a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 60px !important;
  height: 54px !important;
  background: rgb(47, 58, 63) !important;
  color: #3C3C43 !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  text-align: center !important;
}
#taskmenu a:hover { background: rgb(60, 73, 79) !important; color: #FFFFFF !important; }
#taskmenu a.selected, #taskmenu a.mail.selected { background: rgb(47, 58, 63) !important; color: #0071E3 !important; }
#taskmenu a.compose, #rcmbtn100 { color: #FFFFFF !important; font-weight: 600 !important; }
#taskmenu a.compose:hover { background: #2C2C2E !important; }
#taskmenu a.logout, #rcmbtn106 { color: #FF3B30 !important; }
#taskmenu a.logout:hover { background: rgba(255,59,48,0.1) !important; }
#taskmenu a.theme, #rcmbtn104 { color: #3C3C43 !important; }
#taskmenu a span.inner { font-size: 9px !important; display: block !important; margin-top: 2px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 56px !important; text-align: center !important; }
#taskmenu a svg { width: 18px !important; height: 18px !important; flex-shrink: 0 !important; }

/* Also dark for html.dark-mode */
html.dark-mode #taskmenu,
html.dark-mode #taskmenu a,
html.dark-mode #taskmenu span.action-buttons,
html.dark-mode #taskmenu span.special-buttons {
  background: rgb(47, 58, 63) !important;
}

/* === FOLDER SIDEBAR === */
#layout-sidebar { background: #F2F2F7 !important; border-right: 1px solid rgba(0,0,0,0.08) !important; }
#mailboxlist li a { color: #3C3C43 !important; border-radius: 8px !important; margin: 1px 8px !important; padding: 6px 10px !important; font-size: 13px !important; transition: background 0.15s !important; display: block !important; }
#mailboxlist li a:hover { background: rgba(0,0,0,0.05) !important; color: #1D1D1F !important; }
#mailboxlist li.selected a { background: #0071E3 !important; color: #fff !important; font-weight: 500 !important; }
#mailboxlist .unread a { font-weight: 600 !important; color: #1D1D1F !important; }
.unread-count { background: #0071E3 !important; color: #fff !important; border-radius: 10px !important; font-size: 11px !important; padding: 1px 6px !important; }

/* === TOP TOOLBAR === */
.toolbar, #messagelisttoolbar {
  background: rgba(255,255,255,0.9) !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}
html.dark-mode .toolbar, html.dark-mode #messagelisttoolbar {
  background: rgba(255,255,255,0.9) !important;
}
.toolbar a, .toolbar button { color: #3C3C43 !important; border-radius: 6px !important; font-size: 12px !important; font-weight: 500 !important; }
.toolbar a:hover, .toolbar button:hover { background: rgba(0,0,0,0.06) !important; color: #1D1D1F !important; }
.toolbar a.disabled, .toolbar button:disabled { color: #C7C7CC !important; }
.toolbar a.active, .toolbar a.selected { color: #0071E3 !important; }

/* === MESSAGE LIST === */
#layout-content .listbox { background: #FFFFFF !important; }
table.listing tbody tr { border-bottom: 1px solid rgba(0,0,0,0.05) !important; }
table.listing tbody tr:hover { background: #F2F2F7 !important; }
table.listing tbody tr.selected { background: #0071E3 !important; }
table.listing tbody tr.selected td { color: #fff !important; }
table.listing td { color: #3C3C43 !important; font-size: 13px !important; }
table.listing td.subject { color: #1D1D1F !important; }
table.listing tr.unread td.subject { font-weight: 600 !important; }
table.listing td.date, table.listing td.size { color: #8E8E93 !important; font-size: 12px !important; }

/* === SEARCH === */
.searchbar { background: #E5E5EA !important; border: none !important; border-radius: 10px !important; }
.searchbar input { background: transparent !important; color: #1D1D1F !important; font-size: 13px !important; }
.searchbar input::placeholder { color: #8E8E93 !important; }

/* === PREVIEW PANE === */
#layout-preview { background: #FFFFFF !important; border-left: 1px solid rgba(0,0,0,0.08) !important; }
#messageheader { background: #FFFFFF !important; border-bottom: 1px solid rgba(0,0,0,0.08) !important; padding: 16px 20px !important; }
.message-part { background: #FFFFFF !important; color: #1D1D1F !important; }
html.dark-mode #layout-preview, html.dark-mode #messageheader, html.dark-mode .message-part { background: #FFFFFF !important; color: #1D1D1F !important; }

/* === COMPOSE === */
#compose-content, .formcontainer { background: #FFFFFF !important; }
html.dark-mode #compose-content { background: #FFFFFF !important; }
.compose-headers, div.compose-headers { background: #FFFFFF !important; border-bottom: 1px solid rgba(0,0,0,0.06) !important; }
.compose-headers td { color: #8E8E93 !important; font-size: 13px !important; border-bottom: 1px solid rgba(0,0,0,0.05) !important; }
.compose-headers input { background: transparent !important; color: #1D1D1F !important; font-size: 13px !important; border: none !important; }

/* === INPUT GROUPS (To/Cc/Bcc fields) === */
.input-group { background: #FFFFFF !important; border: 1px solid rgba(0,0,0,0.15) !important; border-radius: 8px !important; outline: none !important; }
.input-group:focus-within { border-color: #0071E3 !important; box-shadow: 0 0 0 3px rgba(0,113,227,0.15) !important; }
.input-group input { outline: none !important; border: none !important; background: transparent !important; color: #1D1D1F !important; }
.input-group input:focus { outline: none !important; box-shadow: none !important; }
.input-group-text, label.input-group-text { background: #F2F2F7 !important; border: none !important; border-left: 1px solid rgba(0,0,0,0.1) !important; color: #3C3C43 !important; }
*:focus { outline: none !important; }
*:focus-visible { outline: none !important; }

/* === INPUTS === */
input[type=text], input[type=email], input[type=password], input[type=search], textarea, select {
  background: #FFFFFF !important; color: #1D1D1F !important;
  border: 1px solid rgba(0,0,0,0.2) !important; border-radius: 8px !important;
  font-size: 13px !important;
}
html.dark-mode input, html.dark-mode textarea, html.dark-mode select { background: #FFFFFF !important; color: #1D1D1F !important; }

/* === BUTTONS === */
a.button, .btn { background: #F2F2F7 !important; color: #0071E3 !important; border: 1px solid rgba(0,113,227,0.3) !important; border-radius: 8px !important; font-size: 13px !important; }
a.button:hover, .btn:hover { background: #0071E3 !important; color: #fff !important; }
a.button.primary, .btn-primary { background: #0071E3 !important; color: #fff !important; border-color: #0071E3 !important; }

/* === DIALOGS === */
.ui-dialog, .popupmenu { background: rgba(255,255,255,0.97) !important; border: 1px solid rgba(0,0,0,0.12) !important; border-radius: 12px !important; box-shadow: 0 8px 40px rgba(0,0,0,0.15) !important; }
.ui-dialog .ui-dialog-titlebar { background: #F8F8F8 !important; border-bottom: 1px solid rgba(0,0,0,0.08) !important; border-radius: 12px 12px 0 0 !important; }
.popupmenu li a { color: #1D1D1F !important; padding: 7px 16px !important; font-size: 13px !important; }
.popupmenu li a:hover { background: #0071E3 !important; color: #fff !important; }
.popupmenu li.separator { border-top: 1px solid rgba(0,0,0,0.08) !important; }

/* === STATUS BAR === */
#statusbar { background: rgba(248,248,248,0.9) !important; border-top: 1px solid rgba(0,0,0,0.08) !important; color: #8E8E93 !important; font-size: 11px !important; }
html.dark-mode #statusbar { background: rgba(248,248,248,0.9) !important; color: #8E8E93 !important; }

/* === HEADER === */
#header { background: rgba(255,255,255,0.85) !important; border-bottom: 1px solid rgba(0,0,0,0.08) !important; }
html.dark-mode #header { background: rgba(255,255,255,0.85) !important; }
#logo { max-height: 32px !important; }

/* === CENTER BUTTONS + WHITE ICONS/TEXT === */
#taskmenu a {
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  color: #FFFFFF !important;
}
#taskmenu a span.inner {
  color: #FFFFFF !important;
  text-align: center !important;
}
#taskmenu a svg,
#taskmenu a svg path,
#taskmenu a svg rect,
#taskmenu a svg circle,
#taskmenu a svg line,
#taskmenu a svg polyline {
  stroke: #FFFFFF !important;
  color: #FFFFFF !important;
}
/* Keep logout red and selected blue */
#taskmenu a.logout,
#taskmenu a.logout span.inner { color: #FF453A !important; }
#taskmenu a.logout svg path { stroke: #FF453A !important; }
#taskmenu a.selected,
#taskmenu a.selected span.inner { color: #5AC8FA !important; }
#taskmenu a.selected svg path { stroke: #5AC8FA !important; }
/* Hover state */
#taskmenu a:hover { background: rgb(60, 73, 79) !important; }