/*
 * SmarterMail Enterprise Premium Theme CSS Overrides
 * Design Framework: Microsoft Outlook Web / Office 365 (Turkish Locale Reference)
 */

/* ==========================================
   1. DESIGN TOKENS (LIGHT & DARK VARIABLE MAPS)
   ========================================== */

html[mrs-theme="light"] {
  --mrs-primary: #0078d4;              /* Outlook Brand Blue */
  --mrs-primary-hover: #005a9e;
  --mrs-primary-active: #004578;
  --mrs-primary-light: #eff6fc;       /* Selected Row/Item Soft Blue */
  --mrs-accent: #0078d4;
  --mrs-bg-page: #f3f2f1;             /* Page Background Light Gray */
  --mrs-bg-surface: #ffffff;          /* Flat Panels White */
  --mrs-bg-subtle: #f3f2f1;           /* Sidebar/Folder List Background */
  --mrs-text-primary: #323130;        /* Outlook Neutral Primary */
  --mrs-text-secondary: #605e5c;      /* Outlook Neutral Secondary */
  --mrs-text-muted: #a19f9d;          /* Outlook Neutral Muted */
  --mrs-border: #edebe9;              /* Subtle Card/Row Borders */
  --mrs-border-light: #f3f2f1;
  --mrs-success: #107c41;
  --mrs-danger: #a80000;
  
  --mrs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --mrs-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.04);
  --mrs-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
  --mrs-radius-sm: 2px;
  --mrs-radius-md: 4px;
  --mrs-radius-lg: 4px;
  --mrs-radius-xl: 4px;
  --mrs-transition: all 0.1s ease;
}

html[mrs-theme="dark"] {
  --mrs-primary: #479ef5;              /* Outlook Dark Accent Blue */
  --mrs-primary-hover: #60a9f7;
  --mrs-primary-active: #2563eb;
  --mrs-primary-light: #252423;       /* Dark Selected Row Background */
  --mrs-accent: #479ef5;
  --mrs-bg-page: #111111;             /* Deep Dark Page Background */
  --mrs-bg-surface: #1f1f1f;          /* Card panels dark gray */
  --mrs-bg-subtle: #252423;           /* Dark Sidebar Folders */
  --mrs-text-primary: #f3f2f1;
  --mrs-text-secondary: #a19f9d;
  --mrs-text-muted: #605e5c;
  --mrs-border: #292929;
  --mrs-border-light: #202020;
  --mrs-success: #10b981;
  --mrs-danger: #ef4444;
  
  --mrs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --mrs-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.35);
  --mrs-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.45);
  --mrs-radius-sm: 2px;
  --mrs-radius-md: 4px;
  --mrs-radius-lg: 4px;
  --mrs-radius-xl: 4px;
  --mrs-transition: all 0.1s ease;
}

/* ==========================================
   2. CORE TYPOGRAPHY & LAYOUT RESET
   ========================================== */

*:not(.toolsicon):not([class*="toolsicon-"]):not(.fa):not([class*="fa-"]):not(.glyphicon):not([class*="glyphicon-"]):not(.st-icon):not([class*="st-icon-"]),
*:not(.toolsicon):not([class*="toolsicon-"]):not(.fa):not([class*="fa-"]):not(.glyphicon):not([class*="glyphicon-"]):not(.st-icon):not([class*="st-icon-"])::before,
*:not(.toolsicon):not([class*="toolsicon-"]):not(.fa):not([class*="fa-"]):not(.glyphicon):not([class*="glyphicon-"]):not(.st-icon):not([class*="st-icon-"])::after {
  font-family: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, sans-serif !important;
}

body, select, input, textarea, button, td, th {
  font-family: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, sans-serif !important;
  font-size: 1.3rem !important;
  color: var(--mrs-text-primary) !important;
  -webkit-font-smoothing: antialiased;
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--mrs-border);
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--mrs-text-secondary);
}

/* ==========================================
   3. APP BAR & HEADER LAYOUT (OUTLOOK BLUE HEADER)
   ========================================== */

/* Base Top Bar specificity overrides */
/* Base Top Bar specificity overrides */
html body.theme-light top-menu-bar-user .top-menu-bar,
html body.theme-light top-menu-bar-admin .top-menu-bar,
html body.theme-light top-menu-bar-chat .top-menu-bar,
html[mrs-theme="light"] body.theme-light .top-menu-bar,
html body.theme-light .top-menu-bar,
body.theme-light .top-menu-bar,
.top-menu-bar {
  background-color: #005a9e !important;   /* Solid Microsoft Blue */
  color: #ffffff !important;
  height: 48px !important;
  min-height: 48px !important;
  border-bottom: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 0 16px 0 0 !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}

html body.theme-dark top-menu-bar-user .top-menu-bar,
html body.theme-dark top-menu-bar-admin .top-menu-bar,
html body.theme-dark top-menu-bar-chat .top-menu-bar,
html[mrs-theme="dark"] body.theme-dark .top-menu-bar,
html body.theme-dark .top-menu-bar,
body.theme-dark .top-menu-bar {
  background-color: #1f1f1f !important;   /* Dark Theme Header */
  border-bottom: 1px solid #292929 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* App Launcher / 9-dot Grid Toggle */
html body.theme-light top-menu-bar-user #hamburger-toggle,
html body.theme-light top-menu-bar-admin #hamburger-toggle,
html body.theme-light #hamburger-toggle,
body.theme-light #hamburger-toggle,
html body.theme-light .top-menu-bar .hamburger,
body.theme-light .top-menu-bar .hamburger {
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  cursor: pointer !important;
  border-radius: 0 !important;
  border: none !important;
  background-color: transparent !important;
  transition: var(--mrs-transition) !important;
}

html body.theme-light top-menu-bar-user #hamburger-toggle:hover,
html body.theme-light top-menu-bar-admin #hamburger-toggle:hover,
html body.theme-light #hamburger-toggle:hover,
body.theme-light #hamburger-toggle:hover,
html body.theme-light .top-menu-bar .hamburger:hover,
body.theme-light .top-menu-bar .hamburger:hover {
  background-color: #004578 !important;
  color: #ffffff !important;
}

html body.theme-dark top-menu-bar-user #hamburger-toggle,
html body.theme-dark top-menu-bar-admin #hamburger-toggle,
html body.theme-dark #hamburger-toggle,
body.theme-dark #hamburger-toggle,
html body.theme-dark .top-menu-bar .hamburger,
body.theme-dark .top-menu-bar .hamburger {
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  cursor: pointer !important;
  border-radius: 0 !important;
  border: none !important;
  background-color: transparent !important;
  transition: var(--mrs-transition) !important;
}

html body.theme-dark top-menu-bar-user #hamburger-toggle:hover,
html body.theme-dark top-menu-bar-admin #hamburger-toggle:hover,
html body.theme-dark #hamburger-toggle:hover,
body.theme-dark #hamburger-toggle:hover,
html body.theme-dark .top-menu-bar .hamburger:hover,
body.theme-dark .top-menu-bar .hamburger:hover {
  background-color: #292929 !important;
  color: #ffffff !important;
}

/* Outlook Brand Text */
.mrs-brand-header {
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 16px 0 8px !important;
}

.mrs-brand-header span {
  color: #ffffff !important;
  font-size: 1.6rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* Horizontal Left-Item Navigation Links (Desktop Only) */
@media (min-width: 768px) {
  html body.theme-light top-menu-bar-user .top-menu-bar .left-item,
  html body.theme-light top-menu-bar-admin .top-menu-bar .left-item,
  html body.theme-light .top-menu-bar .left-item,
  body.theme-light .top-menu-bar .left-item {
    height: 48px !important;
    line-height: 48px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border-bottom: 3px solid transparent !important;
    border-right: none !important;
    border-left: none !important;
    border-radius: 0 !important;
    transition: var(--mrs-transition) !important;
    cursor: pointer !important;
    min-width: 0 !important;
  }

  html body.theme-dark top-menu-bar-user .top-menu-bar .left-item,
  html body.theme-dark top-menu-bar-admin .top-menu-bar .left-item,
  html body.theme-dark .top-menu-bar .left-item,
  body.theme-dark .top-menu-bar .left-item {
    height: 48px !important;
    line-height: 48px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #d5d5d5 !important;
    border-bottom: 3px solid transparent !important;
    border-right: none !important;
    border-left: none !important;
    border-radius: 0 !important;
    transition: var(--mrs-transition) !important;
    cursor: pointer !important;
    min-width: 0 !important;
  }

  html body.theme-light top-menu-bar-user .top-menu-bar .left-item:hover,
  html body.theme-light top-menu-bar-admin .top-menu-bar .left-item:hover,
  html body.theme-light .top-menu-bar .left-item:hover,
  body.theme-light .top-menu-bar .left-item:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
  }

  html body.theme-dark top-menu-bar-user .top-menu-bar .left-item:hover,
  html body.theme-dark top-menu-bar-admin .top-menu-bar .left-item:hover,
  html body.theme-dark .top-menu-bar .left-item:hover,
  body.theme-dark .top-menu-bar .left-item:hover {
    background-color: #292929 !important;
    color: #ffffff !important;
  }

  html body.theme-light top-menu-bar-user .top-menu-bar .left-item.active,
  html body.theme-light top-menu-bar-admin .top-menu-bar .left-item.active,
  html body.theme-light .top-menu-bar .left-item.active,
  body.theme-light .top-menu-bar .left-item.active {
    background-color: rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-bottom-color: #ffffff !important; /* White bottom indicator */
    font-weight: 600 !important;
  }

  html body.theme-dark top-menu-bar-user .top-menu-bar .left-item.active,
  html body.theme-dark top-menu-bar-admin .top-menu-bar .left-item.active,
  html body.theme-dark .top-menu-bar .left-item.active,
  body.theme-dark .top-menu-bar .left-item.active {
    background-color: #252423 !important;
    background: #252423 !important;
    color: #479ef5 !important;
    border-bottom-color: #479ef5 !important;
    font-weight: 600 !important;
  }
}

/* Hide Left-Item Navigation Links on Mobile screens */
@media (max-width: 767px) {
  html body.theme-light top-menu-bar-user .top-menu-bar .left-item,
  html body.theme-light top-menu-bar-admin .top-menu-bar .left-item,
  html body.theme-light .top-menu-bar .left-item,
  body.theme-light .top-menu-bar .left-item,
  html body.theme-dark top-menu-bar-user .top-menu-bar .left-item,
  html body.theme-dark top-menu-bar-admin .top-menu-bar .left-item,
  html body.theme-dark .top-menu-bar .left-item,
  body.theme-dark .top-menu-bar .left-item {
    display: none !important;
  }
}

/* Right items (User avatar, help) */
html body.theme-light top-menu-bar-user .top-menu-bar .right-item,
html body.theme-light top-menu-bar-admin .top-menu-bar .right-item,
html body.theme-light .top-menu-bar .right-item,
body.theme-light .top-menu-bar .right-item {
  color: #ffffff !important;
  margin: 0 4px !important;
  height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body.theme-light top-menu-bar-user .top-menu-bar .right-item:hover,
html body.theme-light top-menu-bar-admin .top-menu-bar .right-item:hover,
html body.theme-light .top-menu-bar .right-item:hover,
body.theme-light .top-menu-bar .right-item:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

html body.theme-dark top-menu-bar-user .top-menu-bar .right-item,
html body.theme-dark top-menu-bar-admin .top-menu-bar .right-item,
html body.theme-dark .top-menu-bar .right-item,
body.theme-dark .top-menu-bar .right-item {
  color: #ffffff !important;
  margin: 0 4px !important;
  height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body.theme-dark top-menu-bar-user .top-menu-bar .right-item:hover,
html body.theme-dark top-menu-bar-admin .top-menu-bar .right-item:hover,
html body.theme-dark .top-menu-bar .right-item:hover,
body.theme-dark .top-menu-bar .right-item:hover {
  background-color: #292929 !important;
}

html body.theme-light top-menu-bar-user .top-menu-bar .avatar,
html body.theme-light top-menu-bar-admin .top-menu-bar .avatar,
html body.theme-light .top-menu-bar .avatar,
body.theme-light .top-menu-bar .avatar {
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

html body.theme-dark top-menu-bar-user .top-menu-bar .avatar,
html body.theme-dark top-menu-bar-admin .top-menu-bar .avatar,
html body.theme-dark .top-menu-bar .avatar,
body.theme-dark .top-menu-bar .avatar {
  border: 1px solid #292929 !important;
}

/* ==========================================
   4. OUTLOOK SEARCH BAR (CENTER FLOATING)
   ========================================== */

html body st-search-box,
body st-search-box,
html body .email-search-box-top,
body .email-search-box-top,
#mailListView st-search-box,
#mailListView .email-search-box-top,
#mailOverview st-search-box,
#mailOverview .email-search-box-top {
  position: fixed !important;
  top: 8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 380px !important;
  max-width: 40vw !important;
  z-index: 1005 !important;
  margin: 0 !important;
  height: 32px !important;
  box-sizing: border-box !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Remove default browser button background and styles on search inputs */
st-search-box button,
st-search-box .search-mag-btn,
st-search-box .search-close-btn,
#mailListView st-search-box button,
#mailListView st-search-box .search-mag-btn,
#mailListView st-search-box .search-close-btn {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

@media (max-width: 767px) {
  st-search-box,
  .email-search-box-top,
  #mailListView st-search-box,
  #mailListView .email-search-box-top {
    display: none !important;
  }
}

/* Default state: Semi-transparent white background, matching Outlook Web header */
html body st-search-box .st-search-box,
body st-search-box .st-search-box,
#mailListView st-search-box .st-search-box,
#mailListView .st-search-box,
#mailOverview st-search-box .st-search-box,
#mailOverview .st-search-box {
  background-color: rgba(255, 255, 255, 0.15) !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border: none !important;
  border-radius: 4px !important;
  height: 32px !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  transition: all 0.15s ease !important;
}

@media (max-width: 767px) {
  st-search-box .st-search-box,
  #mailListView .st-search-box {
    padding: 0 8px !important;
    gap: 4px !important;
  }
}

/* Hover & Focus state: Solid white background */
html body st-search-box .st-search-box:hover,
html body st-search-box .st-search-box.md-input-focused,
body st-search-box .st-search-box:hover,
body st-search-box .st-search-box.md-input-focused,
#mailListView st-search-box .st-search-box:hover,
#mailListView st-search-box .st-search-box.md-input-focused,
#mailListView .st-search-box:hover,
#mailListView .st-search-box.md-input-focused {
  background-color: #ffffff !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  border-radius: 4px !important;
}

html[mrs-theme="dark"] st-search-box .st-search-box,
html[mrs-theme="dark"] #mailListView .st-search-box {
  background-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

html[mrs-theme="dark"] st-search-box .st-search-box:hover,
html[mrs-theme="dark"] st-search-box .st-search-box.md-input-focused,
html[mrs-theme="dark"] #mailListView .st-search-box:hover,
html[mrs-theme="dark"] #mailListView .st-search-box.md-input-focused {
  background-color: #252423 !important;
  background: #252423 !important;
  border-color: #292929 !important;
}

html body st-search-box .st-search-box input,
body st-search-box .st-search-box input,
#mailListView st-search-box .st-search-box input,
#mailListView .st-search-box input {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 1.3rem !important;
  height: 32px !important;
  line-height: 32px !important;
  border: none !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

st-search-box .st-search-box input::placeholder,
#mailListView .st-search-box input::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}

html body st-search-box .st-search-box:hover input,
html body st-search-box .st-search-box.md-input-focused input,
body st-search-box .st-search-box:hover input,
body st-search-box .st-search-box.md-input-focused input,
#mailListView st-search-box .st-search-box:hover input,
#mailListView st-search-box .st-search-box.md-input-focused input,
#mailListView .st-search-box:hover input,
#mailListView .st-search-box.md-input-focused input {
  color: #323130 !important;
}

st-search-box .st-search-box:hover input::placeholder,
st-search-box .st-search-box.md-input-focused input::placeholder,
#mailListView .st-search-box:hover input::placeholder,
#mailListView .st-search-box.md-input-focused input::placeholder {
  color: #605e5c !important;
}

html[mrs-theme="dark"] st-search-box .st-search-box input,
html[mrs-theme="dark"] #mailListView .st-search-box input {
  color: #ffffff !important;
}

st-search-box .st-search-box i,
#mailListView .st-search-box i {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 1.4rem !important;
}

st-search-box .st-search-box:hover i,
st-search-box .st-search-box.md-input-focused i,
#mailListView .st-search-box:hover i,
#mailListView .st-search-box.md-input-focused i {
  color: #0078d4 !important;
}

html[mrs-theme="dark"] st-search-box .st-search-box:hover i,
html[mrs-theme="dark"] st-search-box .st-search-box.md-input-focused i,
html[mrs-theme="dark"] #mailListView .st-search-box:hover i,
html[mrs-theme="dark"] #mailListView .st-search-box.md-input-focused i {
  color: #479ef5 !important;
}

/* Clear wrapper parent div in email list page flow */
#mailListView > div:first-child,
#mailOverview > div:first-child,
.mailOverviewArea > div:first-child {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ==========================================
   5. CONTAINER MARGIN OFFSET
   ========================================== */

.main-flex-parent {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  width: 100vw !important;
}

.main-flex-container {
  margin-left: 0 !important;
  width: 100% !important;
  height: auto !important;
  flex: 1 1 auto !important;
  box-sizing: border-box !important;
}

.page-wrapper {
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 100% !important;
}

.main-content-view {
  border-radius: 0 !important;
  box-shadow: none !important;
  height: 100% !important;
}

/* ==========================================
   6. FOLDER SIDEBAR (LIGHT GRAY OUTLOOK PANEL)
   ========================================== */

.slide-panel-wrapper .slide-panel {
  background-color: var(--mrs-bg-subtle) !important;   /* Light Gray */
  border-right: 1px solid var(--mrs-border) !important;
  box-sizing: border-box !important;
}

.slide-panel-wrapper .slide-panel .tree-list-container .treeBody ul li a {
  border-radius: var(--mrs-radius-sm) !important;
  padding: 6px 12px !important;
  color: var(--mrs-text-secondary) !important;
  font-size: 1.25rem !important;
  margin: 1px 8px !important;
  display: flex !important;
  align-items: center !important;
  transition: var(--mrs-transition) !important;
}

.slide-panel-wrapper .slide-panel .tree-list-container .treeBody ul li.active a {
  background-color: #eff6fc !important;                /* Light Blue Highlight */
  color: #0078d4 !important;                           /* Outlook Blue Text */
  font-weight: 600 !important;
}

html[mrs-theme="dark"] .slide-panel-wrapper .slide-panel .tree-list-container .treeBody ul li.active a {
  background-color: #252423 !important;
  color: #479ef5 !important;
}

.slide-panel-wrapper .slide-panel .tree-list-container .treeBody ul li a:hover {
  background-color: #edebe9 !important;
}

html[mrs-theme="dark"] .slide-panel-wrapper .slide-panel .tree-list-container .treeBody ul li a:hover {
  background-color: #2d2d2d !important;
}

/* Tree count badges */
.slide-panel-wrapper .tree-list-container .treeBody ul li a .counter {
  color: #0078d4 !important;
  font-weight: 600 !important;
}

html[mrs-theme="dark"] .slide-panel-wrapper .tree-list-container .treeBody ul li a .counter {
  color: #479ef5 !important;
}

/* ==========================================
   7. EMAIL ACTION TOOLBAR (SUB-HEADER RIBBON)
   ========================================== */

.top-bar {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--mrs-border) !important;
  height: 44px !important;
  padding: 0 16px !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
}

html[mrs-theme="dark"] .top-bar {
  background-color: #1f1f1f !important;
}

/* Yeni Posta (New Email Button) - Solid Outlook Blue */
/* Yeni Posta (New Email Button) - Solid Outlook Blue */
html body .top-bar .md-button.md-primary[ng-click*="new"],
html body .top-bar .md-button.md-primary[ng-click*="New"],
html body .mailTopBar .md-button.md-primary[ng-click*="new"],
html body .mailTopBar .md-button.md-primary[ng-click*="New"],
html body .mail-popout-top-bar .md-button.md-primary[ng-click*="new"],
html body .mail-popout-top-bar .md-button.md-primary[ng-click*="New"],
body .top-bar .md-button.md-primary[ng-click*="new"],
body .top-bar .md-button.md-primary[ng-click*="New"],
body .mailTopBar .md-button.md-primary[ng-click*="new"],
body .mailTopBar .md-button.md-primary[ng-click*="New"] {
  background-color: var(--mrs-primary) !important;
  background: var(--mrs-primary) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-radius: var(--mrs-radius-md) !important;
  height: 30px !important;
  min-height: 30px !important;
  line-height: 28px !important;
  padding: 0 14px !important;
  border: 1px solid var(--mrs-primary) !important;
}

html body .top-bar .md-button.md-primary[ng-click*="new"]:hover,
html body .top-bar .md-button.md-primary[ng-click*="New"]:hover,
body .top-bar .md-button.md-primary[ng-click*="new"]:hover,
body .top-bar .md-button.md-primary[ng-click*="New"]:hover {
  background-color: var(--mrs-primary-hover) !important;
  background: var(--mrs-primary-hover) !important;
}

/* Other Flat Toolbar Buttons (Transparent by default, light gray hover, no border - Outlook Ribbon Style) */
html body .top-bar .md-button:not(#btnSendMessage):not([ng-click*="new"]):not([ng-click*="New"]),
body .top-bar .md-button:not(#btnSendMessage):not([ng-click*="new"]):not([ng-click*="New"]),
html body .mailTopBar .md-button:not(#btnSendMessage):not([ng-click*="new"]):not([ng-click*="New"]),
body .mailTopBar .md-button:not(#btnSendMessage):not([ng-click*="new"]):not([ng-click*="New"]),
html body .mail-popout-top-bar .md-button:not(#btnSendMessage):not([ng-click*="new"]):not([ng-click*="New"]),
body .mail-popout-top-bar .md-button:not(#btnSendMessage):not([ng-click*="new"]):not([ng-click*="New"]) {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--mrs-text-secondary) !important;
  font-weight: 500 !important;
  font-size: 1.25rem !important;
  height: 30px !important;
  min-height: 30px !important;
  line-height: 30px !important;
  margin: 0 4px !important;
  padding: 0 8px !important;
  border-radius: var(--mrs-radius-sm) !important;
}

html body .top-bar .md-button:not(#btnSendMessage):not([ng-click*="new"]):not([ng-click*="New"]):hover,
body .top-bar .md-button:not(#btnSendMessage):not([ng-click*="new"]):not([ng-click*="New"]):hover,
html body .mailTopBar .md-button:not(#btnSendMessage):not([ng-click*="new"]):not([ng-click*="New"]):hover,
body .mailTopBar .md-button:not(#btnSendMessage):not([ng-click*="new"]):not([ng-click*="New"]):hover,
html body .mail-popout-top-bar .md-button:not(#btnSendMessage):not([ng-click*="new"]):not([ng-click*="New"]):hover,
body .mail-popout-top-bar .md-button:not(#btnSendMessage):not([ng-click*="new"]):not([ng-click*="New"]):hover {
  background-color: #edebe9 !important;
  background: #edebe9 !important;
  color: var(--mrs-text-primary) !important;
  border: none !important;
}

/* Dark Theme Toolbar button Hover */
html[mrs-theme="dark"] body .top-bar .md-button:not(#btnSendMessage):not([ng-click*="new"]):not([ng-click*="New"]):hover,
html[mrs-theme="dark"] body .mailTopBar .md-button:not(#btnSendMessage):not([ng-click*="new"]):not([ng-click*="New"]):hover,
html[mrs-theme="dark"] body .mail-popout-top-bar .md-button:not(#btnSendMessage):not([ng-click*="new"]):not([ng-click*="New"]):hover {
  background-color: #2d2d2d !important;
  background: #2d2d2d !important;
  color: #ffffff !important;
}

/* Hide duplicate Close/messageDoesNotExist toolbars completely */
div[ng-show*="messageDoesNotExist"],
.mail-popout-top-bar + .mail-popout-top-bar,
.mail-popout-top-bar ~ .mail-popout-top-bar,
.mail-dont-show-mobile-pane + div[ng-show*="messageDoesNotExist"] {
  display: none !important;
}


/* ==========================================
   8. EMAIL LIST PANE (OUTLOOK GRID INTERFACE)
   ========================================== */

#mailListView {
  background-color: #ffffff !important;
}

html[mrs-theme="dark"] #mailListView {
  background-color: #111111 !important;
}

/* Clean grid items list */
.panel-grid .panel-item {
  border-bottom: 1px solid #f3f2f1 !important;
  background-color: #ffffff !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  height: 72px !important;
  max-height: 72px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html[mrs-theme="dark"] .panel-grid .panel-item {
  border-bottom-color: #1f1f1f !important;
  background-color: #111111 !important;
}

.panel-grid .panel-item:hover {
  background-color: #f3f2f1 !important;
}

html[mrs-theme="dark"] .panel-grid .panel-item:hover {
  background-color: #1f1f1f !important;
}

/* Selected row in the inbox list */
.panel-grid .panel-item.selected {
  background-color: #eff6fc !important;
}

html[mrs-theme="dark"] .panel-grid .panel-item.selected {
  background-color: #1f2a3a !important;
}

/* Border bar styling */
.mailGridItem {
  border-left: 3.5px solid transparent !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

/* Unread vertical blue bar indicator */
.mailGridItem[read="false"] {
  border-left-color: #0078d4 !important;
}

html[mrs-theme="dark"] .mailGridItem[read="false"] {
  border-left-color: #479ef5 !important;
}

/* Active vertical blue bar indicator when selected */
.panel-item.selected .mailGridItem {
  border-left-color: #0078d4 !important;
}

html[mrs-theme="dark"] .panel-item.selected .mailGridItem {
  border-left-color: #479ef5 !important;
}

/* Inbox card content layouts */
.inboxMessage {
  padding: 8px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  box-sizing: border-box !important;
  height: 100% !important;
  justify-content: center !important;
}

.inboxMessageFirstLine {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

/* Sender text */
.inboxMessageName {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #323130 !important;
  line-height: 18px !important;
}

html[mrs-theme="dark"] .inboxMessageName {
  color: #f3f2f1 !important;
}

/* Unread text bold weights */
.mailGridItem[read="false"] .inboxMessageName {
  font-weight: 700 !important;
  color: #0078d4 !important; /* Outlook Blue for unread sender */
}

html[mrs-theme="dark"] .mailGridItem[read="false"] .inboxMessageName {
  color: #479ef5 !important;
}

/* Subject line */
.inboxMessageSubject {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #323130 !important;
  line-height: 16px !important;
}

html[mrs-theme="dark"] .inboxMessageSubject {
  color: #d5d5d5 !important;
}

.mailGridItem[read="false"] .inboxMessageSubject {
  font-weight: 600 !important;
  color: #201f1e !important;
}

html[mrs-theme="dark"] .mailGridItem[read="false"] .inboxMessageSubject {
  color: #ffffff !important;
}

/* Date label */
.inboxMessageDate {
  font-size: 11px !important;
  color: #605e5c !important;
  line-height: 15px !important;
}

.mailGridItem[read="false"] .inboxMessageDate {
  font-weight: 600 !important;
  color: #0078d4 !important;
}

html[mrs-theme="dark"] .mailGridItem[read="false"] .inboxMessageDate {
  color: #479ef5 !important;
}

/* Preview body text */
.inboxMessageLastLine {
  font-size: 11px !important;
  color: #605e5c !important;
  line-height: 15px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[mrs-theme="dark"] .inboxMessageLastLine {
  color: #a19f9d !important;
}

/* ==========================================
   9. MICROSOFT OFFICIAL LOGIN CARD LAYOUT
   ========================================== */

/* Login page background - Light pastel wave */
.login-wrapper {
  background: url('/interface/premium-theme/ms_login_bg.png') no-repeat center center fixed !important;
  background-size: cover !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  width: 100vw !important;
  box-sizing: border-box !important;
}

.login-backdrop {
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 100vh !important;
}

/* Sharp, Flat White Microsoft Card */
.login-backdrop .login-modal,
.login-wrapper .login-backdrop .login-modal {
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  border-radius: 0px !important;              /* Sharp 0px corners */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important; /* Soft Microsoft shadow */
  padding: 44px !important;
  width: 100% !important;
  max-width: 440px !important;                 /* Exact Microsoft size */
  box-sizing: border-box !important;
  margin: auto !important;
}

/* Dark mode login card */
html[mrs-theme="dark"] .login-backdrop .login-modal,
html[mrs-theme="dark"] .login-wrapper .login-backdrop .login-modal {
  background-color: #1f1f1f !important;
  border-color: #292929 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

/* Title: "Oturum açın" */
.login-modal h1.welcome-message {
  font-family: 'Segoe UI', system-ui, sans-serif !important;
  font-size: 2.4rem !important;
  font-weight: 600 !important;
  color: #1b1b1b !important;
  text-align: left !important;
  margin: 0 0 20px 0 !important;
}

html[mrs-theme="dark"] .login-modal h1.welcome-message {
  color: #ffffff !important;
}

/* Border-Bottom Input containers (Microsoft Input Style) */
.mrs-ms-input-container {
  margin: 16px 0 8px 0 !important;
  width: 100% !important;
  border-bottom: 1.5px solid #666666 !important; /* Flat bottom border */
  background: transparent !important;
  transition: border-bottom-color 0.15s ease !important;
}

html[mrs-theme="dark"] .mrs-ms-input-container {
  border-bottom-color: #888888 !important;
}

.mrs-ms-input-container.md-input-focused {
  border-bottom-color: #0067b8 !important; /* Microsoft Blue highlight */
}

/* Clear padding, borders, background from input elements */
.mrs-ms-input-container input.md-input {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 6px 0 !important;
  height: 36px !important;
  color: #1b1b1b !important;
  font-size: 1.5rem !important;
  width: 100% !important;
  border-radius: 0 !important;
}

html[mrs-theme="dark"] .mrs-ms-input-container input.md-input {
  color: #ffffff !important;
}

.mrs-ms-input-container input.md-input:focus {
  outline: none !important;
  border: none !important;
}

/* Hide labels in border-bottom inputs since we use placeholders */
.mrs-ms-input-container label {
  display: none !important;
}

/* Submit Button ("İleri") */
.mrs-ms-submit-btn {
  background-color: #0067b8 !important;   /* Solid MS Blue */
  color: #ffffff !important;
  border: none !important;
  border-radius: 0px !important;            /* Sharp corners */
  font-size: 1.5rem !important;
  font-weight: 500 !important;
  height: 32px !important;
  min-height: 32px !important;
  line-height: 32px !important;
  padding: 0 36px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}

.mrs-ms-submit-btn:hover {
  background-color: #005da6 !important;
}

/* Locale select overrides */
.mrs-locale-select md-select .md-select-value {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}

/* Language selector bottom border */
.mrs-locale-select {
  border-bottom: 1.5px solid #666666 !important;
}

html[mrs-theme="dark"] .mrs-locale-select {
  border-bottom-color: #888888 !important;
}

.mrs-locale-select.md-input-focused {
  border-bottom-color: #0067b8 !important;
}

/* Remember me toggle switch margins */
.mrs-remember-me-row {
  margin: 16px 0 !important;
}

/* Custom MS link colors */
.mrs-ms-links a {
  color: #0067b8 !important;
  text-decoration: none !important;
}

.mrs-ms-links a:hover {
  text-decoration: underline !important;
}

html[mrs-theme="dark"] .mrs-ms-links a {
  color: #479ef5 !important;
}

/* ==========================================
   9. BUTTON OVERRIDES (MICROSOFT OUTLOOK THEME)
   ========================================== */

/* Universal md-button reset */
html body .md-button,
body .md-button {
  font-family: "Segoe UI", system-ui, sans-serif !important;
  font-size: 1.35rem !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  line-height: 30px !important;
  margin: 6px 3px !important;
  padding: 0 16px !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

/* Default md-primary Button style (Rendered as standard outline button to match Outlook visual hierarchy) */
html body .md-button.md-primary,
html body .md-button.md-raised.md-primary,
body .md-button.md-primary,
body .md-button.md-raised.md-primary,
html body .page-container .md-button.md-primary,
body .page-container .md-button.md-primary,
html body md-card-content .md-button.md-primary,
body md-card-content .md-button.md-primary {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #323130 !important;
  border: 1px solid #8a8886 !important;
}


html body .md-button.md-primary:not([disabled]):hover,
html body .md-button.md-raised.md-primary:not([disabled]):hover,
body .md-button.md-primary:not([disabled]):hover,
body .md-button.md-raised.md-primary:not([disabled]):hover {
  background-color: #f3f2f1 !important;
  background: #f3f2f1 !important;
  color: #201f1e !important;
  border-color: #8a8886 !important;
}

/* Dark Theme Default Primary Buttons (Outline style) */
html[mrs-theme="dark"] body .md-button.md-primary,
html[mrs-theme="dark"] body .md-button.md-raised.md-primary {
  background-color: #2d2d2d !important;
  background: #2d2d2d !important;
  color: #ffffff !important;
  border-color: #444444 !important;
}

html[mrs-theme="dark"] body .md-button.md-primary:not([disabled]):hover,
html[mrs-theme="dark"] body .md-button.md-raised.md-primary:not([disabled]):hover {
  background-color: #3c3c3c !important;
  background: #3c3c3c !important;
  border-color: #555555 !important;
  color: #ffffff !important;
}

/* True Action/Creation Primary Buttons (Solid Microsoft Outlook Blue) */
html body .md-button.md-primary[ng-click*="new"],
html body .md-button.md-primary[ng-click*="New"],
html body .md-button.md-primary[ng-click*="send"],
html body .md-button.md-primary[ng-click*="Send"],
html body .md-button.md-primary[ng-click*="save"],
html body .md-button.md-primary[ng-click*="Save"],
html body .md-button.md-primary[type="submit"],
html body .md-button.md-raised.md-primary[ng-click*="new"],
html body .md-button.md-raised.md-primary[ng-click*="New"],
html body .md-button.md-raised.md-primary[type="submit"],
html body #btnSendMessage,
html body md-dialog-actions .md-primary,
html body .md-dialog-actions .md-button.md-primary,
body .md-button.md-primary[ng-click*="new"],
body .md-button.md-primary[ng-click*="New"],
body .md-button.md-primary[ng-click*="send"],
body #btnSendMessage,
body md-dialog-actions .md-primary {
  background-color: #0078d4 !important;
  background: #0078d4 !important;
  color: #ffffff !important;
  border: 1px solid #0078d4 !important;
}

html body .md-button.md-primary[ng-click*="new"]:not([disabled]):hover,
html body .md-button.md-primary[ng-click*="New"]:not([disabled]):hover,
html body .md-button.md-primary[ng-click*="send"]:not([disabled]):hover,
html body .md-button.md-primary[ng-click*="Send"]:not([disabled]):hover,
html body .md-button.md-primary[ng-click*="save"]:not([disabled]):hover,
html body .md-button.md-primary[ng-click*="Save"]:not([disabled]):hover,
html body .md-button.md-primary[type="submit"]:not([disabled]):hover,
html body #btnSendMessage:not([disabled]):hover,
html body md-dialog-actions .md-primary:not([disabled]):hover,
body .md-button.md-primary[ng-click*="new"]:not([disabled]):hover,
body .md-button.md-primary[ng-click*="New"]:not([disabled]):hover,
body .md-button.md-primary[ng-click*="send"]:not([disabled]):hover,
body #btnSendMessage:not([disabled]):hover,
body md-dialog-actions .md-primary:not([disabled]):hover {
  background-color: #005a9e !important;
  background: #005a9e !important;
  border-color: #005a9e !important;
  color: #ffffff !important;
}

/* Dark Theme True Primary Buttons (Solid Blue) */
html[mrs-theme="dark"] body .md-button.md-primary[ng-click*="new"],
html[mrs-theme="dark"] body .md-button.md-primary[ng-click*="New"],
html[mrs-theme="dark"] body .md-button.md-primary[ng-click*="send"],
html[mrs-theme="dark"] body .md-button.md-primary[ng-click*="Send"],
html[mrs-theme="dark"] body .md-button.md-primary[ng-click*="save"],
html[mrs-theme="dark"] body .md-button.md-primary[ng-click*="Save"],
html[mrs-theme="dark"] body .md-button.md-primary[type="submit"],
html[mrs-theme="dark"] body #btnSendMessage,
html[mrs-theme="dark"] body md-dialog-actions .md-primary,
html[mrs-theme="dark"] body .md-dialog-actions .md-button.md-primary {
  background-color: #0078d4 !important;
  background: #0078d4 !important;
  border-color: #0078d4 !important;
  color: #ffffff !important;
}

html[mrs-theme="dark"] body .md-button.md-primary[ng-click*="new"]:not([disabled]):hover,
html[mrs-theme="dark"] body .md-button.md-primary[ng-click*="New"]:not([disabled]):hover,
html[mrs-theme="dark"] body .md-button.md-primary[ng-click*="send"]:not([disabled]):hover,
html[mrs-theme="dark"] body #btnSendMessage:not([disabled]):hover,
html[mrs-theme="dark"] body md-dialog-actions .md-primary:not([disabled]):hover {
  background-color: #005a9e !important;
  background: #005a9e !important;
  border-color: #005a9e !important;
  color: #ffffff !important;
}

/* Secondary / Standard Button style */
html body .md-button.md-standard,
html body .md-button:not(.md-primary):not(.md-icon-button),
body .md-button.md-standard,
body .md-button:not(.md-primary):not(.md-icon-button) {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #323130 !important;
  border: 1px solid #8a8886 !important;
}

html body .md-button.md-standard:not([disabled]):hover,
html body .md-button:not(.md-primary):not(.md-icon-button):not([disabled]):hover,
body .md-button.md-standard:not([disabled]):hover,
body .md-button:not(.md-primary):not(.md-icon-button):not([disabled]):hover {
  background-color: #f3f2f1 !important;
  background: #f3f2f1 !important;
  color: #201f1e !important;
  border-color: #8a8886 !important;
}


/* Disabled button overrides */
html body .md-button[disabled],
body .md-button[disabled] {
  background-color: #f3f2f1 !important;
  background: #f3f2f1 !important;
  color: #a19f9d !important;
  border-color: #edebe9 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Icon Buttons overrides (Transparent default, light gray hover, no borders) */
html body .md-button.md-icon-button,
body .md-button.md-icon-button,
html body .md-button.md-icon-button.md-primary,
body .md-button.md-icon-button.md-primary {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #605e5c !important;
}

html body .md-button.md-icon-button:hover,
body .md-button.md-icon-button:hover,
html body .md-button.md-icon-button.md-primary:hover,
body .md-button.md-icon-button.md-primary:hover {
  background-color: #f3f2f1 !important;
  background: #f3f2f1 !important;
  color: #201f1e !important;
  border: none !important;
}

/* Dark Theme Icon Buttons */
html[mrs-theme="dark"] body .md-button.md-icon-button,
html[mrs-theme="dark"] body .md-button.md-icon-button.md-primary {
  color: #d5d5d5 !important;
  background: transparent !important;
  border: none !important;
}

html[mrs-theme="dark"] body .md-button.md-icon-button:hover,
html[mrs-theme="dark"] body .md-button.md-icon-button.md-primary:hover {
  background-color: #292929 !important;
  background: #292929 !important;
  color: #ffffff !important;
}

/* Icon button nested SVG/i alignment */
html body .md-button.md-icon-button i,
html body .md-button.md-icon-button mrs-icon,
html body .md-button.md-icon-button md-icon,
body .md-button.md-icon-button i,
body .md-button.md-icon-button mrs-icon {
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/* ==========================================
   10. COMPOSE INTERFACE (MICROSOFT OUTLOOK THEME)
   ========================================== */

/* Compose Area Parent Container */
#mailComposeArea,
#mailComposeView {
  background-color: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
}

html[mrs-theme="dark"] #mailComposeArea,
html[mrs-theme="dark"] #mailComposeView {
  background-color: #1b1b1b !important;
}

/* Compose Header Toolbar */
html body.theme-light .mail-popout-top-bar,
html body.theme-light #mailComposeView .mail-popout-top-bar,
body.theme-light .mail-popout-top-bar {
  background-color: #ffffff !important;
  border-bottom: 1px solid #edebe9 !important;
  box-shadow: none !important;
  padding: 6px 16px !important;
  height: 48px !important;
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

html body.theme-dark .mail-popout-top-bar,
html body.theme-dark #mailComposeView .mail-popout-top-bar,
body.theme-dark .mail-popout-top-bar {
  background-color: #1f1f1f !important;
  border-bottom: 1px solid #292929 !important;
  box-shadow: none !important;
  padding: 6px 16px !important;
  height: 48px !important;
  min-height: 48px !important;
}

/* Make "Gönder" button solid Microsoft Blue with Outlook Split Button style */
html body #btnSendMessage,
body #btnSendMessage {
  background-color: var(--mrs-primary) !important;
  background: var(--mrs-primary) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border-top-left-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 16px !important;
  margin-right: 0 !important;
  border: none !important;
  border-right: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: none !important;
}

html body #btnSendMessage:hover,
body #btnSendMessage:hover {
  background-color: var(--mrs-primary-hover) !important;
  background: var(--mrs-primary-hover) !important;
}

/* Dropdown arrow next to Gönder button */
html body #btnSendMessage + md-menu > .md-button,
body #btnSendMessage + md-menu > .md-button,
html body #btnSendMessage + .md-button,
body #btnSendMessage + .md-button {
  background-color: var(--mrs-primary) !important;
  background: var(--mrs-primary) !important;
  color: #ffffff !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
  height: 32px !important;
  min-height: 32px !important;
  min-width: 32px !important;
  width: 32px !important;
  padding: 0 !important;
  margin-left: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

html body #btnSendMessage + md-menu > .md-button:hover,
body #btnSendMessage + md-menu > .md-button:hover,
html body #btnSendMessage + .md-button:hover,
body #btnSendMessage + .md-button:hover {
  background-color: var(--mrs-primary-hover) !important;
  background: var(--mrs-primary-hover) !important;
}

/* Icons inside compose toolbar (Attachment, AI, actions) */
#mailComposeView .top-bar-buttons mrs-icon,
#mailComposeView .top-bar-buttons i,
.mail-popout-top-bar mrs-icon,
.mail-popout-top-bar i {
  color: #605e5c !important;
  fill: #605e5c !important;
}

#mailComposeView .top-bar-buttons .md-button:hover mrs-icon,
#mailComposeView .top-bar-buttons .md-button:hover i,
.mail-popout-top-bar .md-button:hover mrs-icon,
.mail-popout-top-bar .md-button:hover i {
  color: #201f1e !important;
  fill: #201f1e !important;
}

/* Remove default white buttons outline in compose toolbar for flat actions */
#mailComposeView .top-bar-buttons .md-button:not(#btnSendMessage):not(.md-standard),
.mail-popout-top-bar .md-button:not(#btnSendMessage) {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Standard buttons in the compose toolbar (Cancel, Save Draft, etc.) */
#mailComposeView .top-bar-buttons .md-standard {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #323130 !important;
  border: 1px solid #8a8886 !important;
  border-radius: 4px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 16px !important;
}

#mailComposeView .top-bar-buttons .md-standard:hover {
  background-color: #f3f2f1 !important;
  background: #f3f2f1 !important;
  color: #201f1e !important;
}

html body.theme-dark #mailComposeView .top-bar-buttons .md-standard {
  background-color: #2d2d2d !important;
  background: #2d2d2d !important;
  color: #ffffff !important;
  border-color: #444444 !important;
}

/* Compose fields headers */
#replyHeader {
  background-color: #ffffff !important;
  border-bottom: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

html[mrs-theme="dark"] #replyHeader {
  background-color: #1b1b1b !important;
}

#replyHeader .toFieldRow {
  display: flex !important;
  align-items: center !important;
  padding: 4px 16px !important;
  border-bottom: 1px solid #edebe9 !important;
  min-height: 48px !important;
  background-color: #ffffff !important;
}

html[mrs-theme="dark"] #replyHeader .toFieldRow {
  background-color: #1b1b1b !important;
  border-bottom-color: #292929 !important;
}

/* Outlook Compose Header Kime/CC/BCC Labels */
html body #replyHeader .toFieldRow label,
body #replyHeader .toFieldRow label,
html body #toLabelForAutocomplete,
body #toLabelForAutocomplete,
html body .labelForAutocompleteWithChips,
body .labelForAutocompleteWithChips {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--mrs-primary) !important;
  font-weight: 600 !important;
  font-size: 1.35rem !important;
  text-transform: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 8px 0 0 !important;
  display: inline-block !important;
  width: 60px !important;
  min-width: 60px !important;
}

html[mrs-theme="dark"] #replyHeader .toFieldRow label,
html[mrs-theme="dark"] .labelForAutocompleteWithChips {
  color: var(--mrs-primary) !important;
}

/* Remove default chips borders and backgrounds to look like clean Outlook inputs */
#replyHeader md-chips,
#replyHeader md-chips md-chips-wrap,
#replyHeader md-autocomplete,
#replyHeader md-autocomplete input {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
}

#replyHeader .toFieldRow input,
#replyHeader .toFieldRow md-autocomplete-wrap input {
  border: none !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Editor font family override to Segoe UI */
.fr-element.fr-view,
.fr-element.fr-view * {
  font-family: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, sans-serif !important;
  font-size: 14px !important;
}

#replyHeader .toFieldRow .toField {
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
  min-width: 0 !important;
}

/* Chips in email compose */
#replyHeader .toField md-chips {
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  flex: 1 !important;
}

#replyHeader .toField md-chips md-chips-wrap {
  box-shadow: none !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

/* Subject line container styling */
#replyHeader .subject-container {
  display: flex !important;
  align-items: center !important;
  padding: 4px 16px !important;
  border-bottom: 1px solid #edebe9 !important;
  background-color: #ffffff !important;
  min-height: 48px !important;
}

html[mrs-theme="dark"] #replyHeader .subject-container {
  background-color: #1b1b1b !important;
  border-bottom-color: #292929 !important;
}

#replyHeader .subject-container md-input-container.subject-line {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  flex: 1 !important;
  border: none !important;
}

#replyHeader .subject-container md-input-container.subject-line label {
  width: 60px !important;
  min-width: 60px !important;
  color: #605e5c !important;
  font-weight: 600 !important;
  font-size: 1.35rem !important;
  margin: 0 !important;
}

html[mrs-theme="dark"] #replyHeader .subject-container md-input-container.subject-line label {
  color: #a19f9d !important;
}

#replyHeader .subject-container md-input-container.subject-line input {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  height: 32px !important;
  line-height: 32px !important;
  padding: 4px 0 !important;
  color: #323130 !important;
  font-size: 1.35rem !important;
  width: 100% !important;
}

html[mrs-theme="dark"] #replyHeader .subject-container md-input-container.subject-line input {
  color: #ffffff !important;
}

#replyHeader md-input-container.md-input-focused .md-input,
#replyHeader md-input-container .md-input {
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Signature & Sender selections dropdown block */
#replyHeader .replyDropdowns {
  display: flex !important;
  gap: 24px !important;
  padding: 8px 16px !important;
  border-bottom: 1px solid #edebe9 !important;
  background-color: #ffffff !important;
}

html[mrs-theme="dark"] #replyHeader .replyDropdowns {
  background-color: #1b1b1b !important;
  border-bottom-color: #292929 !important;
}

#replyHeader .replyDropdowns md-input-container {
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 1 200px !important;
}

/* HTML Editor - Froala Styles */
st-html-editor#composeEditor {
  margin-top: 8px !important;
  border: none !important;
  background: #ffffff !important;
}

html[mrs-theme="dark"] st-html-editor#composeEditor {
  background: #1b1b1b !important;
}

st-html-editor#composeEditor .fr-toolbar {
  background-color: #f3f2f1 !important;
  border: 1px solid #edebe9 !important;
  border-bottom: none !important;
  border-radius: 4px 4px 0 0 !important;
  box-shadow: none !important;
  padding: 4px 8px !important;
}

html[mrs-theme="dark"] st-html-editor#composeEditor .fr-toolbar {
  background-color: #2d2d2d !important;
  border-color: #292929 !important;
}

st-html-editor#composeEditor .fr-box.fr-basic {
  border: 1px solid #edebe9 !important;
  border-radius: 0 0 4px 4px !important;
  box-shadow: none !important;
}

html[mrs-theme="dark"] st-html-editor#composeEditor .fr-box.fr-basic {
  border-color: #292929 !important;
}

st-html-editor#composeEditor .fr-element.fr-view {
  padding: 16px !important;
  font-family: "Segoe UI", system-ui, sans-serif !important;
  font-size: 1.4rem !important;
  color: #323130 !important;
  background-color: #ffffff !important;
}

html[mrs-theme="dark"] st-html-editor#composeEditor .fr-element.fr-view {
  color: #ffffff !important;
  background-color: #1b1b1b !important;
}

st-html-editor#composeEditor .fr-command.fr-btn {
  color: #323130 !important;
  border-radius: 2px !important;
  transition: background-color 0.1s ease !important;
}

html[mrs-theme="dark"] st-html-editor#composeEditor .fr-command.fr-btn {
  color: #ffffff !important;
}

st-html-editor#composeEditor .fr-command.fr-btn:hover {
  background-color: #edebe9 !important;
}

html[mrs-theme="dark"] st-html-editor#composeEditor .fr-command.fr-btn:hover {
  background-color: #3c3c3c !important;
}

/* ==========================================
   11. DISPLAY HELPER MEDIA QUERY OVERRIDES
   ========================================== */

@media (max-width: 767px) {
  html body .md-button.display-desktop-view,
  body .md-button.display-desktop-view,
  html body .md-button.mail-hide-mobile,
  body .md-button.mail-hide-mobile,
  html body .md-button.mail-dont-show-mobile-pane.showMessagePane,
  body .md-button.mail-dont-show-mobile-pane.showMessagePane {
    display: none !important;
  }
}

@media (min-width: 768px) {
  html body .md-button.display-mobile-view,
  body .md-button.display-mobile-view,
  html body .md-button.mail-show-mobile-inline,
  body .md-button.mail-show-mobile-inline,
  html body .md-button.mail-dont-show-mobile-list:not(.showMessagePane),
  body .md-button.mail-dont-show-mobile-list:not(.showMessagePane) {
    display: none !important;
  }
}


/* ==========================================
   12. OUTLOOK EMAIL COMPOSE FLAT CANVAS STYLES
   ========================================== */

/* Disabled Send Button - Muted Outlook Blue */
html body #btnSendMessage[disabled],
body #btnSendMessage[disabled],
html body #btnSendMessage.md-primary[disabled],
body #btnSendMessage.md-primary[disabled] {
  background-color: rgba(0, 120, 212, 0.4) !important;
  background: rgba(0, 120, 212, 0.4) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border: none !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

html body #btnSendMessage[disabled] + md-menu > .md-button,
body #btnSendMessage[disabled] + md-menu > .md-button,
html body #btnSendMessage[disabled] + .md-button,
body #btnSendMessage[disabled] + .md-button {
  background-color: rgba(0, 120, 212, 0.4) !important;
  background: rgba(0, 120, 212, 0.4) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border: none !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

/* Force body of the compose page/window background to be white (or dark gray in dark mode) */
html body #mailComposeView,
body #mailComposeView,
html body .mail-message-view,
body .mail-message-view,
html body .emailPopout,
body .emailPopout {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 16px !important;
}

html[mrs-theme="dark"] body #mailComposeView,
html[mrs-theme="dark"] body .mail-message-view,
html[mrs-theme="dark"] body .emailPopout {
  background-color: #1b1b1b !important;
  background: #1b1b1b !important;
}

/* Remove card/panel borders and rounded corners around replyHeader and editor */
html body #replyHeader,
body #replyHeader {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: #ffffff !important;
  background: #ffffff !important;
}

html[mrs-theme="dark"] body #replyHeader {
  background-color: #1b1b1b !important;
  background: #1b1b1b !important;
}

/* Remove default card borders around Froala html editor wrapper */
html body st-html-editor,
body st-html-editor,
html body .fr-box,
body .fr-box,
html body .fr-wrapper,
body .fr-wrapper,
html body st-html-editor#composeEditor .fr-box.fr-basic,
body st-html-editor#composeEditor .fr-box.fr-basic {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background-color: #ffffff !important;
  background: #ffffff !important;
}

html[mrs-theme="dark"] body st-html-editor,
html[mrs-theme="dark"] body .fr-box,
html[mrs-theme="dark"] body .fr-wrapper,
html[mrs-theme="dark"] st-html-editor#composeEditor .fr-box.fr-basic {
  background-color: #1b1b1b !important;
  background: #1b1b1b !important;
  border: none !important;
}

/* Make sure the toolbar of the editor is flat, borderless, and aligned */
html body st-html-editor#composeEditor .fr-toolbar,
body st-html-editor#composeEditor .fr-toolbar,
html body .fr-toolbar,
body .fr-toolbar {
  border: none !important;
  border-bottom: 1px solid #edebe9 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background-color: #ffffff !important;
  background: #ffffff !important;
  padding: 4px 0 !important;
}

html[mrs-theme="dark"] body st-html-editor#composeEditor .fr-toolbar,
html[mrs-theme="dark"] body .fr-toolbar {
  background-color: #2d2d2d !important;
  background: #2d2d2d !important;
  border-bottom-color: #292929 !important;
  border-top: none !important;
}

/* Style the CC/BCC toggle in compose header to look like Outlook flat text links */
html body #replyHeader #CcToggle,
body #replyHeader #CcToggle {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #605e5c !important;
  font-weight: normal !important;
  cursor: pointer !important;
  font-size: 1.25rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  transition: background-color 0.1s ease !important;
}

html body #replyHeader #CcToggle:hover,
body #replyHeader #CcToggle:hover {
  background-color: #f3f2f1 !important;
  color: var(--mrs-primary) !important;
}

html[mrs-theme="dark"] body #replyHeader #CcToggle {
  color: #a19f9d !important;
}

html[mrs-theme="dark"] body #replyHeader #CcToggle:hover {
  background-color: #2d2d2d !important;
  color: #ffffff !important;
}

html body #replyHeader #CcToggle .counter.tree-count,
body #replyHeader #CcToggle .counter.tree-count {
  background: #edebe9 !important;
  color: #323130 !important;
  border-radius: 10px !important;
  padding: 1px 6px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  margin-left: 2px !important;
}

html[mrs-theme="dark"] body #replyHeader #CcToggle .counter.tree-count {
  background: #2d2d2d !important;
  color: #ffffff !important;
}

/* Force Froala editor text container to fill height and have transparent background */
html body st-html-editor#composeEditor .fr-element.fr-view,
body st-html-editor#composeEditor .fr-element.fr-view {
  min-height: 350px !important;
}