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

/*
 * SmarterMail Enterprise Premium Theme CSS Overrides
 * Design Framework: TRMail Fluent Design (Inter & Manrope Reference)
 */

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

html[mrs-theme="light"] {
  --mrs-primary: #2B5FDB;              /* TRMail Blue */
  --mrs-primary-hover: #1E48B0;        /* TRMail Blue Dark */
  --mrs-primary-active: #183B91;
  --mrs-primary-light: #EAF1FF;        /* TRMail Blue Tint */
  --mrs-accent: #2B5FDB;
  --mrs-bg-page: #F4F5F9;             /* TRMail Paper Background */
  --mrs-bg-surface: #ffffff;          /* Flat Panels White */
  --mrs-bg-subtle: #F3F5F8;           /* Sidebar/Folder List Background (Soft gray-blue) */
  --mrs-text-primary: #1B1F2A;        /* TRMail Ink */
  --mrs-text-secondary: #6B7280;      /* TRMail Ink Soft */
  --mrs-text-muted: #9AA1B1;          /* TRMail Ink Faint */
  --mrs-border: #E7E9F1;              /* TRMail Line */
  --mrs-border-light: #D7DAE6;        /* TRMail Line Strong */
  --mrs-success: #1E8E5A;             /* TRMail Success */
  --mrs-danger: #D6392E;              /* TRMail Danger */
  
  --mrs-shadow-sm: 0 1px 3px rgba(20,24,45,.06);    /* TRMail Shadow 1 */
  --mrs-shadow-md: 0 6px 20px rgba(20,24,45,.10);   /* TRMail Shadow 2 */
  --mrs-shadow-lg: 0 14px 40px rgba(20,24,45,.16);  /* TRMail Shadow 3 */
  --mrs-radius-sm: 8px;
  --mrs-radius-md: 12px;
  --mrs-radius-lg: 16px;
  --mrs-radius-xl: 16px;
  --mrs-transition: all 0.15s ease;
}

html[mrs-theme="dark"] {
  --mrs-primary: #4C7CF0;              /* TRMail Dark Accent Blue */
  --mrs-primary-hover: #6093F5;
  --mrs-primary-active: #2563eb;
  --mrs-primary-light: #1B2A4A;        /* Dark Selected Row Background */
  --mrs-accent: #4C7CF0;
  --mrs-bg-page: #11131A;             /* Deep Dark Page Background */
  --mrs-bg-surface: #1B1F2A;          /* Card panels dark gray */
  --mrs-bg-subtle: #222736;           /* Dark Sidebar Folders */
  --mrs-text-primary: #F4F5F9;        /* Text Primary */
  --mrs-text-secondary: #9AA1B1;      /* Text Secondary */
  --mrs-text-muted: #6B7280;          /* Text Muted */
  --mrs-border: #2B3142;
  --mrs-border-light: #343B50;
  --mrs-success: #1E8E5A;
  --mrs-danger: #D6392E;
  
  --mrs-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --mrs-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45);
  --mrs-shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.5);
  --mrs-radius-sm: 8px;
  --mrs-radius-md: 12px;
  --mrs-radius-lg: 16px;
  --mrs-radius-xl: 16px;
  --mrs-transition: all 0.15s 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: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

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

h1, h2, h3, .brand-text, .mrs-guides-title, .mrs-ai-dialog h2, .welcome-message {
  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* 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: var(--mrs-bg-surface) !important;   /* White background */
  color: var(--mrs-text-primary) !important;
  height: 48px !important;
  min-height: 48px !important;
  border-bottom: 1px solid var(--mrs-border) !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: var(--mrs-bg-surface) !important;   /* Dark slate background */
  border-bottom: 1px solid var(--mrs-border) !important;
  color: var(--mrs-text-primary) !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: 36px !important;
  height: 36px !important;
  margin: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--mrs-text-primary) !important;
  cursor: pointer !important;
  border-radius: var(--mrs-radius-sm) !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: var(--mrs-primary-light) !important;
  color: var(--mrs-primary) !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: 36px !important;
  height: 36px !important;
  margin: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--mrs-text-primary) !important;
  cursor: pointer !important;
  border-radius: var(--mrs-radius-sm) !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: var(--mrs-bg-subtle) !important;
  color: var(--mrs-primary) !important;
}

/* Outlook Brand Text */
.mrs-brand-header {
  height: 36px !important;
  margin: 6px 12px 6px 6px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
}

.mrs-brand-header span {
  font-family: 'Manrope', 'Inter', sans-serif !important;
  color: var(--mrs-text-primary) !important;
  font-size: 1.7rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !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: 36px !important;
    line-height: 36px !important;
    padding: 0 14px !important;
    margin: 6px 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--mrs-text-secondary) !important;
    border-bottom: none !important;
    border-right: none !important;
    border-left: none !important;
    border-radius: var(--mrs-radius-sm) !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: 36px !important;
    line-height: 36px !important;
    padding: 0 14px !important;
    margin: 6px 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--mrs-text-secondary) !important;
    border-bottom: none !important;
    border-right: none !important;
    border-left: none !important;
    border-radius: var(--mrs-radius-sm) !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: var(--mrs-primary-light) !important;
    color: var(--mrs-primary) !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: var(--mrs-bg-subtle) !important;
    color: var(--mrs-primary) !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: var(--mrs-primary-light) !important;
    background: var(--mrs-primary-light) !important;
    color: var(--mrs-primary) !important;
    border-bottom: none !important;
    font-weight: 700 !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: var(--mrs-bg-subtle) !important;
    background: var(--mrs-bg-subtle) !important;
    color: var(--mrs-primary) !important;
    border-bottom: none !important;
    font-weight: 700 !important;
}

/* Navigation Tab Badge/Counter Overrides (Premium round pill badges) */
html body .top-menu-bar .left-item,
body .top-menu-bar .left-item,
html body .top-bar .left-item,
body .top-bar .left-item {
  position: relative !important;
}

html body .left-item .counter,
body .left-item .counter,
html body .top-menu-bar .left-item .counter,
body .top-menu-bar .left-item .counter {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  background-color: #D6392E !important; /* Premium Red-Orange Danger Color */
  background: #D6392E !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  line-height: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  padding: 0 4px !important;
  border-radius: 10px !important;
  box-shadow: 0 0 0 2px var(--mrs-bg-surface, #ffffff) !important; /* Separator ring */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: translate(35%, -35%) !important;
  margin: 0 !important;
  text-align: center !important;
  z-index: 2 !important;
}

html[mrs-theme="dark"] body .left-item .counter,
html[mrs-theme="dark"] body .top-menu-bar .left-item .counter {
  box-shadow: 0 0 0 2px var(--mrs-bg-surface, #1B1F2A) !important; /* Dark separator ring */
}

/* 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: var(--mrs-text-secondary) !important;
  margin: 6px 4px !important;
  height: 36px !important;
  padding: 0 8px !important;
  border-radius: var(--mrs-radius-sm) !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: var(--mrs-primary-light) !important;
  color: var(--mrs-primary) !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: var(--mrs-text-primary) !important;
  margin: 6px 4px !important;
  height: 36px !important;
  padding: 0 8px !important;
  border-radius: var(--mrs-radius-sm) !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: var(--mrs-bg-subtle) !important;
  color: var(--mrs-primary) !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 var(--mrs-border) !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: Light gray background, rounded border, matching TRMail Web search */
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: var(--mrs-bg-page) !important;       /* Light gray paper */
  background: var(--mrs-bg-page) !important;
  border: 1.5px solid var(--mrs-border) !important;        /* Outlined border */
  border-radius: 20px !important;                          /* Rounded pill search */
  height: 32px !important;
  padding: 0 16px !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 with primary border */
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;
  border-color: var(--mrs-primary) !important;             /* TRMail Blue focus */
  box-shadow: 0 0 0 3px rgba(43,95,219,.1) !important;
  border-radius: 20px !important;
}

html[mrs-theme="dark"] st-search-box .st-search-box,
html[mrs-theme="dark"] #mailListView .st-search-box {
  background-color: var(--mrs-bg-surface) !important;
  background: var(--mrs-bg-surface) !important;
  border: 1.5px solid var(--mrs-border) !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: var(--mrs-bg-surface) !important;
  background: var(--mrs-bg-surface) !important;
  border-color: var(--mrs-primary) !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: var(--mrs-text-primary) !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: var(--mrs-text-muted) !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: var(--mrs-text-primary) !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: var(--mrs-text-muted) !important;
}

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

st-search-box .st-search-box i,
#mailListView .st-search-box i {
  color: var(--mrs-text-muted) !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: var(--mrs-primary) !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: var(--mrs-primary) !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 {
  background-color: var(--mrs-bg-subtle) !important;   /* Light Gray */
  border-right: 1px solid var(--mrs-border) !important;
  box-sizing: border-box !important;
}

.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 .tree-list-container .treeBody ul li.active a {
  background-color: var(--mrs-primary-light) !important;                /* TRMail Blue Tint */
  color: var(--mrs-primary-hover) !important;                           /* TRMail Blue Dark */
  font-weight: 600 !important;
}

html[mrs-theme="dark"] .slide-panel .tree-list-container .treeBody ul li.active a {
  background-color: var(--mrs-primary-light) !important;
  color: var(--mrs-primary) !important;
}

.slide-panel .tree-list-container .treeBody ul li a:hover {
  background-color: var(--mrs-bg-page) !important;
}

html[mrs-theme="dark"] .slide-panel .tree-list-container .treeBody ul li a:hover {
  background-color: var(--mrs-bg-page) !important;
}

/* Tree count badges */
.slide-panel .tree-list-container .treeBody ul li a .counter,
.slide-panel .tree-list-container .treeBody ul li a .tree-count {
  background-color: var(--mrs-primary-light) !important;
  background: var(--mrs-primary-light) !important;
  color: var(--mrs-primary) !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  min-width: 20px !important;
  height: 18px !important;
  line-height: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  box-shadow: none !important;
}

html[mrs-theme="dark"] .slide-panel .tree-list-container .treeBody ul li a .counter,
html[mrs-theme="dark"] .slide-panel .tree-list-container .treeBody ul li a .tree-count {
  background-color: rgba(76, 124, 240, 0.15) !important;
  color: #4C7CF0 !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 */
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: 4px !important;
  height: 24px !important;
  min-height: 24px !important;
  line-height: normal !important;
  font-size: 11px !important;
  padding: 0 10px !important;
  border: 1px solid var(--mrs-primary) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !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 (Slightly rounded gray buttons with border - Outlook 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: #F3F4F6 !important;
  background-color: #F3F4F6 !important;
  border: 1px solid #E5E7EB !important;
  box-shadow: none !important;
  color: #374151 !important;
  font-weight: 500 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  height: 24px !important;
  min-height: 24px !important;
  line-height: normal !important;
  margin: 0 3px !important;
  padding: 0 8px !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  transition: all 0.15s ease !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: #E5E7EB !important;
  background: #E5E7EB !important;
  color: #111827 !important;
  border-color: #D1D5DB !important;
}

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

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: #3F3F3F !important;
  background: #3F3F3F !important;
  color: #ffffff !important;
  border-color: #4D4D4D !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;
}

/* Fix SmarterMail Spool/Quarantine bug: hide the Kapat toolbar when email is loaded successfully */
body:has(#mailMessageView .emailMessage:not(.ng-hide)) div[ng-show*="messageDoesNotExist"],
body:has(#mailMessageView .emailMessage:not(.ng-hide)) .mail-popout-top-bar:has(md-button[ng-click*="closeWindow"]) {
  display: none !important;
}

/* Strict framework layout overrides to prevent inline-flex rules from overriding ng-hide/display classes */
.ng-hide,
.md-button.ng-hide,
.display-mobile-view.ng-hide,
.display-desktop-view.ng-hide {
  display: none !important;
}

@media (min-width: 737px) {
  .display-mobile-view,
  .mail-show-mobile-inline,
  .mail-show-mobile-flex {
    display: none !important;
  }
}

@media (max-width: 736px) {
  .display-desktop-view,
  .mail-hide-mobile {
    display: none !important;
  }
}


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

#mailListView {
  background-color: var(--mrs-bg-surface) !important;
}

html[mrs-theme="dark"] #mailListView {
  background-color: var(--mrs-bg-page) !important;
}

/* Clean grid items list */
.panel-grid .panel-item {
  border-bottom: 1px solid var(--mrs-border) !important;
  background-color: var(--mrs-bg-surface) !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  height: 80px !important;
  max-height: 80px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  font-family: 'Inter', sans-serif !important;
  transition: background-color 0.15s ease !important;
}

html[mrs-theme="dark"] .panel-grid .panel-item {
  border-bottom-color: var(--mrs-border) !important;
  background-color: var(--mrs-bg-surface) !important;
}

.panel-grid .panel-item:hover {
  background-color: var(--mrs-bg-subtle) !important;
}

html[mrs-theme="dark"] .panel-grid .panel-item:hover {
  background-color: var(--mrs-bg-subtle) !important;
}

/* Selected row in the inbox list */
.panel-grid .panel-item.selected {
  background-color: var(--mrs-primary-light) !important;
}

html[mrs-theme="dark"] .panel-grid .panel-item.selected {
  background-color: var(--mrs-primary-light) !important;
}

/* Border bar styling */
.mailGridItem {
  position: relative !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

/* Unread vertical blue bar indicator (Pill style) */
.mailGridItem[read="false"]::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 8px !important;
  bottom: 8px !important;
  width: 4px !important;
  background-color: var(--mrs-primary) !important;
  border-radius: 0 4px 4px 0 !important;
}

/* Active vertical blue bar indicator when selected */
.panel-item.selected .mailGridItem::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 4px !important;
  background-color: var(--mrs-primary) !important;
  border-radius: 0 !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: var(--mrs-text-primary) !important;
  line-height: 18px !important;
}

html[mrs-theme="dark"] .inboxMessageName {
  color: var(--mrs-text-primary) !important;
}

/* Unread text bold weights */
.mailGridItem[read="false"] .inboxMessageName {
  font-weight: 700 !important;
  color: var(--mrs-primary) !important; /* TRMail Blue for unread sender */
}

html[mrs-theme="dark"] .mailGridItem[read="false"] .inboxMessageName {
  color: var(--mrs-primary) !important;
}

/* Subject line */
.inboxMessageSubject {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--mrs-text-secondary) !important;
  line-height: 16px !important;
}

html[mrs-theme="dark"] .inboxMessageSubject {
  color: var(--mrs-text-secondary) !important;
}

.mailGridItem[read="false"] .inboxMessageSubject {
  font-weight: 600 !important;
  color: var(--mrs-text-primary) !important;
}

html[mrs-theme="dark"] .mailGridItem[read="false"] .inboxMessageSubject {
  color: var(--mrs-text-primary) !important;
}

/* Date label */
.inboxMessageDate {
  font-size: 11px !important;
  color: var(--mrs-text-muted) !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 - TRMail Soft Radial Gradients */
.login-wrapper {
  background:
    radial-gradient(900px circle at 12% 8%, #eef3ff 0%, transparent 55%),
    radial-gradient(900px circle at 92% 92%, #eaf7f3 0%, transparent 55%),
    var(--mrs-bg-page) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  width: 100vw !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: hidden !important;
}

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

/* Rounded, Elegant TRMail Card */
.login-backdrop .login-modal,
.login-wrapper .login-backdrop .login-modal {
  background-color: var(--mrs-bg-surface) !important;
  border: 1px solid var(--mrs-border) !important;
  border-radius: var(--mrs-radius-lg) !important;              /* Rounded corners (16px) */
  box-shadow: var(--mrs-shadow-lg) !important;                  /* Smooth drop shadow */
  padding: 44px 40px !important;
  width: 100% !important;
  max-width: 424px !important;                                 /* TRMail card width */
  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: var(--mrs-bg-surface) !important;
  border-color: var(--mrs-border) !important;
  box-shadow: var(--mrs-shadow-lg) !important;
}

/* Title: "Hesabınıza giriş yapın" */
.login-modal h1.welcome-message {
  font-family: 'Manrope', 'Inter', sans-serif !important;
  font-size: 23px !important;
  font-weight: 800 !important;
  color: var(--mrs-text-primary) !important;
  text-align: left !important;
  margin: 24px 0 4px !important;
  letter-spacing: -.01em !important;
}

html[mrs-theme="dark"] .login-modal h1.welcome-message {
  color: var(--mrs-text-primary) !important;
}

/* Outlined Rounded Input containers for all login/reset/MFA forms (TRMail Input Style) */
.login-modal md-input-container {
  margin: 17px 0 0 0 !important;
  width: 100% !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.login-modal md-input-container::before,
.login-modal md-input-container::after,
.login-modal md-input-container .md-errors-spacer {
  display: none !important;
}

/* Outlined Inputs & Select boxes for all states */
.login-modal md-input-container input.md-input,
.login-modal md-input-container md-select,
.login-modal md-input-container input[type="text"],
.login-modal md-input-container input[type="password"],
.login-modal md-input-container input[type="number"],
.login-modal md-input-container input[type="email"] {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: var(--mrs-text-primary) !important;
  border: 1.5px solid var(--mrs-border-light) !important; /* Outlined border */
  border-radius: var(--mrs-radius-sm) !important;        /* 8px rounded */
  padding: 12px 14px !important;
  background-color: var(--mrs-bg-surface) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
  height: auto !important;
  line-height: normal !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

html[mrs-theme="dark"] .login-modal md-input-container input.md-input,
html[mrs-theme="dark"] .login-modal md-input-container md-select,
html[mrs-theme="dark"] .login-modal md-input-container input[type="text"],
html[mrs-theme="dark"] .login-modal md-input-container input[type="password"],
html[mrs-theme="dark"] .login-modal md-input-container input[type="number"],
html[mrs-theme="dark"] .login-modal md-input-container input[type="email"] {
  color: var(--mrs-text-primary) !important;
  background-color: var(--mrs-bg-surface) !important;
  border-color: var(--mrs-border) !important;
}

.login-modal md-input-container.md-input-focused input.md-input,
.login-modal md-input-container input.md-input:focus,
.login-modal md-input-container.md-input-focused md-select,
.login-modal md-input-container md-select:focus,
.login-modal md-input-container input[type="text"]:focus,
.login-modal md-input-container input[type="password"]:focus,
.login-modal md-input-container input[type="number"]:focus,
.login-modal md-input-container input[type="email"]:focus {
  outline: none !important;
  border-color: var(--mrs-primary) !important;            /* TRMail Blue focus */
  box-shadow: 0 0 0 3px rgba(43,95,219,.12) !important;
  background-color: var(--mrs-bg-surface) !important;
}

/* Form labels for all sub-states forms */
.login-modal md-input-container label {
  display: block !important;
  position: static !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--mrs-text-secondary) !important;
  margin-bottom: 6px !important;
  transform: none !important;
  pointer-events: none !important;
  width: auto !important;
}

/* Hide labels in main login page inputs since we use placeholders */
.login-modal md-input-container.mrs-ms-input-container label {
  display: none !important;
}

/* Submit Button ("Giriş yap") */
.mrs-ms-submit-btn {
  background: linear-gradient(150deg, #3D6EE8, var(--mrs-primary-hover)) !important; /* Gradient layout */
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--mrs-radius-sm) !important;          /* 8px corners */
  font-size: 14.5px !important;
  font-weight: 700 !important;
  height: auto !important;
  min-height: auto !important;
  line-height: normal !important;
  padding: 13px 20px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  width: 100% !important;
  margin-top: 4px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: transform .1s, box-shadow .15s, filter .15s !important;
}

.mrs-ms-submit-btn:hover {
  background: linear-gradient(150deg, #3D6EE8, var(--mrs-primary-hover)) !important;
  box-shadow: 0 6px 18px rgba(43,95,219,.35) !important;
  filter: brightness(1.04) !important;
}

.mrs-ms-submit-btn:active {
  transform: scale(.98) !important;
}

.mrs-ms-submit-btn:disabled {
  opacity: .55 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

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

.mrs-locale-select {
  border: none !important;
  margin: 17px 0 0 0 !important;
}

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

/* Custom link colors matching TRMail style */
.mrs-ms-links a {
  color: var(--mrs-primary) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

.mrs-ms-links a:hover {
  color: var(--mrs-primary-hover) !important;
  text-decoration: underline !important;
}

html[mrs-theme="dark"] .mrs-ms-links a {
  color: var(--mrs-primary) !important;
}

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

/* Universal md-button reset */
html body .md-button,
body .md-button {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  line-height: normal !important;
  margin: 6px 3px !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Default md-primary Button style (Rendered as clean outline standard button in some dialog cases or custom primary) */
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: linear-gradient(150deg, #3D6EE8, var(--mrs-primary-hover)) !important;
  background-color: #3D6EE8 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 4px rgba(43,95,219,0.2), inset 0 -1px 0 rgba(0,0,0,0.1) !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 {
  box-shadow: 0 6px 18px rgba(43,95,219,.35) !important;
  filter: brightness(1.05) !important;
}

/* Dark Theme Default Primary Buttons */
html[mrs-theme="dark"] body .md-button.md-primary,
html[mrs-theme="dark"] body .md-button.md-raised.md-primary {
  background: linear-gradient(150deg, #3D6EE8, var(--mrs-primary-hover)) !important;
  background-color: #3D6EE8 !important;
  color: #ffffff !important;
  border: none !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 {
  box-shadow: 0 6px 18px rgba(43,95,219,.35) !important;
  filter: brightness(1.05) !important;
}

/* True Action/Creation Primary Buttons (Solid TRMail Gradient) */
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: linear-gradient(150deg, #3D6EE8, var(--mrs-primary-hover)) !important;
  background-color: #3D6EE8 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 4px rgba(43,95,219,0.2), inset 0 -1px 0 rgba(0,0,0,0.1) !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 {
  box-shadow: 0 6px 18px rgba(43,95,219,.35) !important;
  filter: brightness(1.05) !important;
}

/* Dark Theme True Primary Buttons */
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: linear-gradient(150deg, #3D6EE8, var(--mrs-primary-hover)) !important;
  background-color: #3D6EE8 !important;
  border: none !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 {
  box-shadow: 0 6px 18px rgba(43,95,219,.35) !important;
  filter: brightness(1.05) !important;
}

/* Secondary / Standard Button style (TRMail Ghost 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),
html body .md-button[aria-haspopup="true"],
body .md-button[aria-haspopup="true"] {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: var(--mrs-text-primary) !important;
  border: 1.5px solid #D7DAE6 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !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,
html body .md-button[aria-haspopup="true"]:not([disabled]):hover,
body .md-button[aria-haspopup="true"]:not([disabled]):hover {
  border-color: var(--mrs-primary) !important;
  color: var(--mrs-primary) !important;
  background-color: var(--mrs-primary-light) !important;
  background: var(--mrs-primary-light) !important;
  box-shadow: 0 4px 10px rgba(43, 95, 219, 0.08) !important;
}

/* Disabled button overrides */
html body .md-button[disabled],
body .md-button[disabled],
html body .md-button[disabled]:hover,
body .md-button[disabled]:hover {
  background-color: #F8FAFC !important;
  background: #F8FAFC !important;
  color: #94A3B8 !important;
  border: 1.5px solid #E2E8F0 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  opacity: 0.65 !important;
}

/* Icon Buttons overrides (Transparent default, light blue hover, no borders) */
html body .md-button.md-icon-button:not([aria-haspopup="true"]),
body .md-button.md-icon-button:not([aria-haspopup="true"]),
html body .md-button.md-icon-button.md-primary:not([aria-haspopup="true"]),
body .md-button.md-icon-button.md-primary:not([aria-haspopup="true"]) {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--mrs-text-secondary) !important;
}

html body .md-button.md-icon-button:not([aria-haspopup="true"]):hover,
body .md-button.md-icon-button:not([aria-haspopup="true"]):hover,
html body .md-button.md-icon-button.md-primary:hover:not([aria-haspopup="true"]),
body .md-button.md-icon-button.md-primary:hover:not([aria-haspopup="true"]) {
  background-color: var(--mrs-primary-light) !important;
  background: var(--mrs-primary-light) !important;
  color: var(--mrs-primary) !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: var(--mrs-text-secondary) !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: var(--mrs-primary-light) !important;
  background: var(--mrs-primary-light) !important;
  color: var(--mrs-primary) !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)
   ========================================== */

/* Clean, flat page background for the entire window */
html body, 
html body.theme-light, 
html body .emailPopout, 
html body #mailComposeArea,
html body #mailComposeView,
html body.theme-light #mailComposeView,
html body.theme-light #mailComposeArea {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
}

html[mrs-theme="dark"] body, 
html[mrs-theme="dark"] body.theme-dark, 
html[mrs-theme="dark"] .emailPopout, 
html[mrs-theme="dark"] #mailComposeArea,
html[mrs-theme="dark"] #mailComposeView {
  background-color: #1b1b1b !important;
  background: #1b1b1b !important;
  border: none !important;
  box-shadow: none !important;
}

/* Outlook-prefixed layout classes */

/* Toolbar */
html body div.outlook-toolbar,
html body.theme-light div.outlook-toolbar,
html body.theme-dark div.outlook-toolbar {
  background: linear-gradient(135deg, rgba(0, 120, 212, 0.88), rgba(0, 90, 158, 0.95)) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  padding: 0 24px !important;
  height: 48px !important;
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  box-shadow: 0 4px 16px rgba(0, 90, 158, 0.15) !important;
}

html[mrs-theme="dark"] body div.outlook-toolbar {
  background: linear-gradient(135deg, rgba(27, 42, 71, 0.88), rgba(15, 23, 42, 0.95)) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

html body .outlook-toolbar-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
}

/* Send Button Split */
html body .outlook-send-split {
  display: inline-flex !important;
  align-items: center !important;
}

html body div.outlook-toolbar md-button.outlook-btn-send,
html body.theme-light div.outlook-toolbar md-button.outlook-btn-send,
html body.theme-dark div.outlook-toolbar md-button.outlook-btn-send {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #0078d4 !important;
  font-weight: 600 !important;
  font-family: 'Segoe UI', system-ui, sans-serif !important;
  border-radius: 4px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 16px !important;
  border: none !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
  font-size: 13px !important;
  text-transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.1s ease !important;
}

html body div.outlook-toolbar md-button.outlook-btn-send:hover {
  background-color: #f3f2f1 !important;
  background: #f3f2f1 !important;
  color: #005a9e !important;
}

html body div.outlook-toolbar md-button.outlook-btn-send i,
html body div.outlook-toolbar md-button.outlook-btn-send span,
html body div.outlook-toolbar md-button.outlook-btn-send svg * {
  color: #0078d4 !important;
  fill: #0078d4 !important;
}

html body div.outlook-toolbar md-button.outlook-btn-send:hover i,
html body div.outlook-toolbar md-button.outlook-btn-send:hover span {
  color: #005a9e !important;
}

html body div.outlook-toolbar md-button.outlook-btn-send[disabled] {
  background-color: rgba(255, 255, 255, 0.3) !important;
  background: rgba(255, 255, 255, 0.3) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

html body div.outlook-toolbar md-button.outlook-btn-send[disabled] i,
html body div.outlook-toolbar md-button.outlook-btn-send[disabled] span {
  color: rgba(255, 255, 255, 0.6) !important;
}

html body .outlook-icon-send::before {
  content: "➤" !important;
  font-size: 11px !important;
  transform: rotate(-15deg) !important;
  display: inline-block !important;
  color: inherit !important;
}

/* Standard Toolbar Buttons (İptal, Taslak Kaydet) - Glass Buttons */
html body div.outlook-toolbar md-button.outlook-btn-toolbar,
html body.theme-light div.outlook-toolbar md-button.outlook-btn-toolbar,
html body.theme-dark div.outlook-toolbar md-button.outlook-btn-toolbar {
  background-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 4px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 16px !important;
  font-size: 13px !important;
  font-family: 'Segoe UI', system-ui, sans-serif !important;
  font-weight: 600 !important;
  text-transform: none !important;
  margin: 0 !important;
  box-shadow: none !important;
  transition: all 0.15s ease !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

html body div.outlook-toolbar md-button.outlook-btn-toolbar:hover {
  background-color: rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  color: #ffffff !important;
}

/* Icon Button & AI Button - Glass Buttons */
html body div.outlook-toolbar md-button.outlook-btn-icon,
html body.theme-light div.outlook-toolbar md-button.outlook-btn-icon,
html body.theme-dark div.outlook-toolbar md-button.outlook-btn-icon,
html body div.outlook-toolbar md-button.outlook-btn-ai,
html body.theme-light div.outlook-toolbar md-button.outlook-btn-ai,
html body.theme-dark div.outlook-toolbar md-button.outlook-btn-ai {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  transition: all 0.15s ease !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

html body div.outlook-toolbar md-button.outlook-btn-icon:hover,
html body div.outlook-toolbar md-button.outlook-btn-ai:hover {
  background-color: rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
}

/* Ensure the SVG icons and font icons inside are colored white */
html body div.outlook-toolbar md-button.outlook-btn-icon mrs-icon,
html body div.outlook-toolbar md-button.outlook-btn-icon i,
html body div.outlook-toolbar md-button.outlook-btn-ai mrs-icon,
html body div.outlook-toolbar md-button.outlook-btn-ai i,
html body div.outlook-toolbar md-button.outlook-actions-btn i,
html body div.outlook-toolbar md-button.outlook-actions-btn mrs-icon,
html body div.outlook-toolbar md-button.outlook-btn-icon svg *,
html body div.outlook-toolbar md-button.outlook-btn-ai svg * {
  color: #ffffff !important;
  fill: #ffffff !important;
}

html[mrs-theme="dark"] body .outlook-btn-ai mrs-icon {
  color: #ffffff !important;
  fill: #ffffff !important;
}

html[mrs-theme="dark"] body .outlook-btn-ai:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Workspace - Outlook Web Clean White Sheet Canvas */
html body .outlook-compose-workspace,
html body #mailComposeView.outlook-compose-workspace {
  background-color: #ffffff !important;
  background: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

html[mrs-theme="dark"] body .outlook-compose-workspace,
html[mrs-theme="dark"] body #mailComposeView.outlook-compose-workspace {
  background-color: #1b1b1b !important;
  background: #1b1b1b !important;
}

/* Header */
html body .outlook-compose-header,
html body #replyHeader.outlook-compose-header {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 16px 24px 0 24px !important;
  margin: 0 !important;
  overflow: hidden !important;
}

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

/* Dropdown signature & sender row */
html body .outlook-dropdown-row {
  display: flex !important;
  gap: 16px !important;
  padding: 6px 0 !important;
  border-bottom: 1px solid #EDEBE9 !important;
  background-color: transparent !important;
}

html[mrs-theme="dark"] body .outlook-dropdown-row {
  border-bottom-color: #292929 !important;
}

html body .outlook-dropdown-row md-input-container {
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 1 220px !important;
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

html body .outlook-dropdown-row md-input-container label {
  color: #605e5c !important;
  font-size: 12px !important;
  font-family: 'Segoe UI', system-ui, sans-serif !important;
  font-weight: 500 !important;
  position: static !important;
  transform: none !important;
  margin-bottom: 4px !important;
  display: block !important;
}

html[mrs-theme="dark"] body .outlook-dropdown-row md-input-container label {
  color: #a19f9d !important;
}

html body .outlook-dropdown-row md-select {
  border: 1px solid #EDEBE9 !important;
  border-radius: 4px !important;
  background-color: #ffffff !important;
  padding: 4px 8px !important;
  height: 28px !important;
  min-height: 28px !important;
  font-size: 13px !important;
  font-family: 'Segoe UI', system-ui, sans-serif !important;
  color: #323130 !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}

html body .outlook-dropdown-row md-select:hover {
  border-color: #A19F9D !important;
}

html body .outlook-dropdown-row md-select:focus {
  border-color: var(--mrs-primary) !important;
}

html body .outlook-dropdown-row md-select .md-select-value {
  border-bottom: none !important;
  padding: 0 !important;
}

html[mrs-theme="dark"] body .outlook-dropdown-row md-select {
  border-color: #3f3f3f !important;
  background-color: #2d2d2d !important;
  color: #f3f2f1 !important;
}

html[mrs-theme="dark"] body .outlook-dropdown-row md-select:hover {
  border-color: #555555 !important;
}

/* Recipient and Subject Row Inputs */
html body .outlook-input-row {
  display: flex !important;
  align-items: center !important;
  padding: 6px 0 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid #EDEBE9 !important;
  min-height: 40px !important;
  background-color: transparent !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

html[mrs-theme="dark"] body .outlook-input-row {
  border-bottom-color: #292929 !important;
}

html body .outlook-to-field {
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
  min-width: 0 !important;
}

/* Recipient Outline Button Labels (Alıcı, Bilgi, Gizli) */
html body .outlook-label-btn {
  background-color: #ffffff !important;
  border: 1px solid #d2d0ce !important;
  border-radius: 4px !important;
  color: #323130 !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  font-family: 'Segoe UI', system-ui, sans-serif !important;
  text-transform: none !important;
  cursor: pointer !important;
  padding: 2px 14px !important;
  margin: 0 12px 0 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 60px !important;
  height: 26px !important;
  box-sizing: border-box !important;
  transform: none !important;
  position: static !important;
  box-shadow: none !important;
  line-height: normal !important;
}

html body .outlook-label-btn:hover {
  background-color: #f3f2f1 !important;
  border-color: #a19f9d !important;
}

html[mrs-theme="dark"] body .outlook-label-btn {
  background-color: #202020 !important;
  border-color: #3f3f3f !important;
  color: #f3f2f1 !important;
}

html[mrs-theme="dark"] body .outlook-label-btn:hover {
  background-color: #2d2d2d !important;
  border-color: #555555 !important;
}

/* Chips layout inside autocomplete */
html body .outlook-to-field md-chips,
html body .outlook-to-field md-chips md-chips-wrap,
html body .outlook-to-field md-autocomplete,
html body .outlook-to-field md-autocomplete input {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  flex: 1 !important;
}

html body .outlook-to-field md-chips .md-chip,
html body .outlook-to-field md-chip {
  background: #f3f2f1 !important;
  background-color: #f3f2f1 !important;
  color: #323130 !important;
  border-radius: 100px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  height: 24px !important;
  line-height: 24px !important;
  margin: 3px 4px !important;
  padding: 0 10px !important;
  border: 1px solid transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  box-sizing: border-box !important;
}

html body .outlook-to-field md-chips .md-chip:hover,
html body .outlook-to-field md-chip:hover {
  background-color: #edebe9 !important;
}

html[mrs-theme="dark"] body .outlook-to-field md-chips .md-chip,
html[mrs-theme="dark"] body .outlook-to-field md-chip {
  background: #2d2d2d !important;
  background-color: #2d2d2d !important;
  color: #f3f2f1 !important;
}

html[mrs-theme="dark"] body .outlook-to-field md-chips .md-chip:hover,
html[mrs-theme="dark"] body .outlook-to-field md-chip:hover {
  background-color: #3c3c3c !important;
}

/* CC/BCC Toggle Links */
html body .outlook-cc-bcc-toggles {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

html body .outlook-cc-bcc-toggles .md-button,
html body #CcToggle,
html body #BccToggle {
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #0f6cbd !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  font-family: 'Segoe UI', system-ui, sans-serif !important;
  text-transform: none !important;
  padding: 4px 8px !important;
  min-width: auto !important;
  min-height: auto !important;
  line-height: normal !important;
  margin: 0 !important;
  cursor: pointer !important;
}

html body .outlook-cc-bcc-toggles .md-button:hover,
html body #CcToggle:hover,
html body #BccToggle:hover {
  text-decoration: underline !important;
  color: #0b5a9e !important;
}

html[mrs-theme="dark"] body .outlook-cc-bcc-toggles .md-button,
html[mrs-theme="dark"] body #CcToggle,
html[mrs-theme="dark"] body #BccToggle {
  color: #78be5c !important;
}

html[mrs-theme="dark"] body .outlook-cc-bcc-toggles .md-button:hover,
html[mrs-theme="dark"] body #CcToggle:hover,
html[mrs-theme="dark"] body #BccToggle:hover {
  color: #a2db87 !important;
}

/* Subject Line Row */
html body .outlook-subject-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 6px 0 !important;
  border-bottom: 1px solid #EDEBE9 !important;
}

html[mrs-theme="dark"] body .outlook-subject-row {
  border-bottom-color: #292929 !important;
}

html body .outlook-subject-field {
  flex: 1 !important;
  min-width: 0 !important;
}

html body .outlook-subject-input {
  border: none !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  height: 28px !important;
  line-height: 28px !important;
  padding: 2px 0 !important;
  color: #323130 !important;
  font-size: 14px !important;
  font-family: 'Segoe UI', system-ui, sans-serif !important;
  width: 100% !important;
  margin: 0 !important;
  outline: none !important;
}

html body .outlook-subject-input::placeholder {
  color: #a19f9d !important;
  opacity: 0.8 !important;
}

html[mrs-theme="dark"] body .outlook-subject-input {
  color: #f3f2f1 !important;
}

/* Editor Container */
html body .outlook-editor-container {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

html body .outlook-editor-container st-html-editor,
html body .outlook-editor-container st-html-editor#composeEditor {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background-color: #ffffff !important;
  background: #ffffff !important;
  padding: 0 24px 24px 24px !important;
  margin: 0 !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

html[mrs-theme="dark"] body .outlook-editor-container st-html-editor {
  background-color: #1b1b1b !important;
  background: #1b1b1b !important;
}

/* Froala Editor Layout overrides inside layout */
html body .outlook-editor-container st-html-editor .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: 6px 0 !important;
}

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

html body .outlook-editor-container .fr-box.fr-basic,
html body .outlook-editor-container .fr-wrapper {
  border: none !important;
  box-shadow: none !important;
  background-color: #ffffff !important;
  background: #ffffff !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 250px !important;
}

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

html body .outlook-editor-container .fr-element.fr-view {
  padding: 16px 0 !important;
  min-height: 250px !important;
  flex: 1 !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #323130 !important;
}

html[mrs-theme="dark"] body .outlook-editor-container .fr-element.fr-view {
  color: #f3f2f1 !important;
}

/* Premium Colored Froala Editor Icons - Microsoft 365 / Outlook Style */
html body st-html-editor#composeEditor .fr-command.fr-btn[data-cmd="bold"] svg *,
html body st-html-editor#composeEditor .fr-command.fr-btn[data-cmd="bold"] i {
  color: #106ebe !important;
  fill: #106ebe !important;
}
html body st-html-editor#composeEditor .fr-command.fr-btn[data-cmd="italic"] svg *,
html body st-html-editor#composeEditor .fr-command.fr-btn[data-cmd="italic"] i {
  color: #107c41 !important;
  fill: #107c41 !important;
}
html body st-html-editor#composeEditor .fr-command.fr-btn[data-cmd="underline"] svg *,
html body st-html-editor#composeEditor .fr-command.fr-btn[data-cmd="underline"] i {
  color: #d83b01 !important;
  fill: #d83b01 !important;
}
st-html-editor#composeEditor .fr-command.fr-btn[data-cmd="strikeThrough"] svg *,
st-html-editor#composeEditor .fr-command.fr-btn[data-cmd="strikeThrough"] i {
  color: #a80000 !important;
  fill: #a80000 !important;
}
st-html-editor#composeEditor .fr-command.fr-btn[data-cmd="undo"] svg *,
st-html-editor#composeEditor .fr-command.fr-btn[data-cmd="undo"] i,
st-html-editor#composeEditor .fr-command.fr-btn[data-cmd="redo"] svg *,
st-html-editor#composeEditor .fr-command.fr-btn[data-cmd="redo"] i {
  color: #0078d4 !important;
  fill: #0078d4 !important;
}
st-html-editor#composeEditor .fr-command.fr-btn[data-cmd="fontFamily"] svg *,
st-html-editor#composeEditor .fr-command.fr-btn[data-cmd="fontFamily"] i,
st-html-editor#composeEditor .fr-command.fr-btn[data-cmd="fontSize"] svg *,
st-html-editor#composeEditor .fr-command.fr-btn[data-cmd="fontSize"] i {
  color: #5c2d91 !important;
  fill: #5c2d91 !important;
}
st-html-editor#composeEditor .fr-command.fr-btn[data-cmd="textColor"] svg *,
st-html-editor#composeEditor .fr-command.fr-btn[data-cmd="textColor"] i {
  color: #e81123 !important;
  fill: #e81123 !important;
}
st-html-editor#composeEditor .fr-command.fr-btn[data-cmd="backgroundColor"] svg *,
st-html-editor#composeEditor .fr-command.fr-btn[data-cmd="backgroundColor"] i {
  color: #ffb900 !important;
  fill: #ffb900 !important;
}
st-html-editor#composeEditor .fr-command.fr-btn[data-cmd="align"] svg *,
st-html-editor#composeEditor .fr-command.fr-btn[data-cmd="align"] i {
  color: #605e5c !important;
  fill: #605e5c !important;
}
st-html-editor#composeEditor .fr-command.fr-btn[data-cmd="formatOL"] svg *,
st-html-editor#composeEditor .fr-command.fr-btn[data-cmd="formatOL"] i,
st-html-editor#composeEditor .fr-command.fr-btn[data-cmd="formatUL"] svg *,
st-html-editor#composeEditor .fr-command.fr-btn[data-cmd="formatUL"] i {
  color: #008272 !important;
  fill: #008272 !important;
}
st-html-editor#composeEditor .fr-command.fr-btn[data-cmd="insertLink"] svg *,
st-html-editor#composeEditor .fr-command.fr-btn[data-cmd="insertLink"] i {
  color: #0078d4 !important;
  fill: #0078d4 !important;
}
st-html-editor#composeEditor .fr-command.fr-btn[data-cmd="insertImage"] svg *,
st-html-editor#composeEditor .fr-command.fr-btn[data-cmd="insertImage"] i {
  color: #107c41 !important;
  fill: #107c41 !important;
}
st-html-editor#composeEditor .fr-command.fr-btn[data-cmd="insertVideo"] svg *,
st-html-editor#composeEditor .fr-command.fr-btn[data-cmd="insertVideo"] i {
  color: #d83b01 !important;
  fill: #d83b01 !important;
}
st-html-editor#composeEditor .fr-command.fr-btn[data-cmd="insertTable"] svg *,
st-html-editor#composeEditor .fr-command.fr-btn[data-cmd="insertTable"] i {
  color: #0078d4 !important;
  fill: #0078d4 !important;
}
st-html-editor#composeEditor .fr-command.fr-btn[data-cmd="quote"] svg *,
st-html-editor#composeEditor .fr-command.fr-btn[data-cmd="quote"] i {
  color: #b4009e !important;
  fill: #b4009e !important;
}
st-html-editor#composeEditor .fr-command.fr-btn[data-cmd="html"] svg *,
st-html-editor#composeEditor .fr-command.fr-btn[data-cmd="html"] i {
  color: #2b5fdb !important;
  fill: #2b5fdb !important;
}
st-html-editor#composeEditor .fr-command.fr-btn[data-cmd="clearFormatting"] svg *,
st-html-editor#composeEditor .fr-command.fr-btn[data-cmd="clearFormatting"] i {
  color: #a80000 !important;
  fill: #a80000 !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 Web Style */
html body #btnSendMessage[disabled],
html body #btnSendMessage.md-button[disabled],
html body #btnSendMessage.md-raised[disabled],
html body #btnSendMessage.md-primary[disabled],
html body #btnSendMessage[disabled="disabled"],
html body #btnSendMessage.md-button[disabled="disabled"],
html body #btnSendMessage.md-raised[disabled="disabled"],
html body #btnSendMessage.md-primary[disabled="disabled"],
html body #mailComposeView #btnSendMessage[disabled] {
  background-color: #f3f2f1 !important;
  background: #f3f2f1 !important;
  color: #a19f9d !important;
  border: none !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

html body #btnSendMessage[disabled] + md-menu > .md-button,
html body #btnSendMessage[disabled] + .md-button,
html body #btnSendMessage[disabled="disabled"] + md-menu > .md-button,
html body #btnSendMessage[disabled="disabled"] + .md-button,
html body #btnSendMessage.md-button[disabled] + md-menu > .md-button,
html body #btnSendMessage.md-button[disabled] + .md-button {
  background-color: #f3f2f1 !important;
  background: #f3f2f1 !important;
  color: #a19f9d !important;
  border: none !important;
  border-left: 1px solid #d2d0ce !important;
  cursor: not-allowed !allowed !important;
  opacity: 1 !important;
}



/* Defensive CSS to strip cards, card-containers, or panel styles inside the compose window */
html body #mailComposeView .card,
html body #mailComposeView .panel,
html body #mailComposeView .panel-default,
html body #mailComposeView .card-container,
html body #mailComposeView .card-content,
html body #mailComposeView md-card,
html body.theme-light #mailComposeView .card,
html body.theme-light #mailComposeView .panel,
html body.theme-light #mailComposeView .card-container,
html body.theme-light #mailComposeView md-card {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}




/* Ensure desktop and mobile views do not duplicate */
@media (min-width: 768px) {
  .display-mobile-view {
    display: none !important;
  }
}
@media (max-width: 767px) {
  .display-desktop-view {
    display: none !important;
  }
}

/* Premium Minimal Scrollbars for Webkit browsers */
::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}
::-webkit-scrollbar-track {
  background: transparent !important;
}
::-webkit-scrollbar-thumb {
  background: #E2E8F0 !important;
  border-radius: 4px !important;
}
::-webkit-scrollbar-thumb:hover {
  background: #CBD5E1 !important;
}

html[mrs-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #334155 !important;
}
html[mrs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #475569 !important;
}


/* ==========================================================
   10. PREMIUM THREE-PANE MINIMALIST LAYOUT OVERRIDES (TRMail)
   ========================================================== */

/* 1. Flat Three-Pane Background & Borders */
html body #mailListView,
html body #mailOverview,
html body #mailOverviewArea,
html body .mailOverviewArea,
html body .slide-panel {
  background-color: #ffffff !important;
  background: #ffffff !important;
}

html body .slide-panel {
  border-right: 1px solid #E5E7EB !important;
  width: 240px !important;
  min-width: 240px !important;
  max-width: 240px !important;
}

html body.theme-light #mailListView {
  border-right: 1px solid #E5E7EB !important;
}

/* Restore horizontal layout on the parent container */
html body .main-flex-parent,
body .main-flex-parent {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  width: 100vw !important;
}

html body .main-flex-container,
body .main-flex-container {
  flex: 1 1 auto !important;
  height: auto !important;
  display: flex !important;
  flex-direction: row !important;
}

/* Premium Horizontal Top Bar Styling (Colored Royal Blue Gradient) */
html body .top-menu-bar,
body .top-menu-bar {
  display: flex !important;
  flex-direction: row !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  background: linear-gradient(135deg, #1E3A8A, #2B5FDB) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-right: none !important;
  padding: 0 16px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
  box-shadow: 0 2px 8px rgba(30, 58, 138, 0.15) !important;
}

/* Brand/Title Text (White) */
html body .top-menu-bar .mrs-brand-header,
body .top-menu-bar .mrs-brand-header,
html body .top-menu-bar .mrs-brand-header span,
body .top-menu-bar .mrs-brand-header span {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-family: 'Inter', sans-serif !important;
}

/* Navigation items inside Top Bar (White/Semi-transparent) */
html body .top-menu-bar .left-item,
body .top-menu-bar .left-item,
html body .top-menu-bar .right-item,
body .top-menu-bar .right-item,
html body .top-menu-bar mrs-icon,
body .top-menu-bar mrs-icon,
html body .top-menu-bar i,
body .top-menu-bar i {
  color: rgba(255, 255, 255, 0.85) !important;
  transition: all 0.15s ease !important;
}

/* Hover State in Top Bar */
html body .top-menu-bar .left-item:hover,
body .top-menu-bar .left-item:hover,
html body .top-menu-bar .right-item:hover,
body .top-menu-bar .right-item:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: #60A5FA !important;
  border-radius: 6px !important;
}

html body .top-menu-bar .left-item:hover mrs-icon,
body .top-menu-bar .left-item:hover mrs-icon,
html body .top-menu-bar .left-item:hover i,
body .top-menu-bar .left-item:hover i,
html body .top-menu-bar .right-item:hover mrs-icon,
body .top-menu-bar .right-item:hover mrs-icon,
html body .top-menu-bar .right-item:hover i,
body .top-menu-bar .right-item:hover i {
  color: #60A5FA !important;
}

/* Active State in Top Bar */
html body .top-menu-bar .left-item.active,
body .top-menu-bar .left-item.active {
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  border-radius: 6px !important;
}

/* Notifications Badge in Top Bar (Aligned & Vivid Red) */
html body .top-menu-bar .left-item .counter,
body .top-menu-bar .left-item .counter {
  background-color: #EF4444 !important;
  background: #EF4444 !important;
  color: #ffffff !important;
  border: 1.5px solid #1E3A8A !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* Custom colored icons for system folders in the shortTree */
/* Gelen Kutusu (1st Row) - Blue Envelope Icon */
.slide-panel .tree-list-container .shortTree ul li:nth-child(1) a::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='16' height='16'%3E%3Cpath d='M17 5H3c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm-1.6 2L10 10.2 4.6 7h10.8zM3 13V8.3l7 4.1 7-4.1V13H3z' fill='%233B82F6'/%3E%3C/svg%3E") !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  margin-right: 10px !important;
  vertical-align: middle !important;
}

/* Silinmiş Öğeler (2nd Row) - Red Trash Bin Icon */
.slide-panel .tree-list-container .shortTree ul li:nth-child(2) a::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='16' height='16'%3E%3Cpath d='M6 2h8a1 1 0 0 1 1 1v1h4a1 1 0 1 1 0 2h-1v11a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6H1a1 1 0 1 1 0-2h4V3a1 1 0 0 1 1-1zm2 2v1h4V4H8zm-3 4v7a1 1 0 1 0 2 0V8a1 1 0 1 0-2 0zm6 0v7a1 1 0 1 0 2 0V8a1 1 0 1 0-2 0z' fill='%23EF4444'/%3E%3C/svg%3E") !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  margin-right: 10px !important;
  vertical-align: middle !important;
}

/* Taslaklar (3rd Row) - Orange Pencil/Paper Icon */
.slide-panel .tree-list-container .shortTree ul li:nth-child(3) a::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='16' height='16'%3E%3Cpath d='M13.586 3.586a2 2 0 1 1 2.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793l2.828 2.828-6.828 6.828H4.56v-2.828l6.828-6.828z' fill='%23F97316'/%3E%3C/svg%3E") !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  margin-right: 10px !important;
  vertical-align: middle !important;
}

/* Gereksiz E-posta (4th Row) - Red Exclamation Warning Icon */
.slide-panel .tree-list-container .shortTree ul li:nth-child(4) a::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='16' height='16'%3E%3Cpath d='M11.53 2.3a1.5 1.5 0 0 0-3.06 0L3.6 15A1.5 1.5 0 0 0 5 17h10a1.5 1.5 0 0 0 1.4-2L11.53 2.3zM10 13a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm0-7a1 1 0 0 1 1 1v4a1 1 0 0 1-2 0V7a1 1 0 0 1 1-1z' fill='%23DC2626'/%3E%3C/svg%3E") !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  margin-right: 10px !important;
  vertical-align: middle !important;
}

/* Gönderilmiş Öğeler (5th Row) - Blue Paper Plane Icon */
.slide-panel .tree-list-container .shortTree ul li:nth-child(5) a::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='16' height='16'%3E%3Cpath d='M17.218 2.218a.75.75 0 0 1 .18.82l-6 13a.75.75 0 0 1-1.396-.134l-1.92-5.76-5.76-1.92a.75.75 0 0 1-.134-1.396l13-6a.75.75 0 0 1 .82.18L17.218 2.218z' fill='%233B82F6'/%3E%3C/svg%3E") !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  margin-right: 10px !important;
  vertical-align: middle !important;
}

/* Custom Warm Amber folder color for subfolders in treeBody */
.slide-panel .tree-list-container .treeBody ul li a i.toolsicon,
.slide-panel .tree-list-container .treeBody ul li a mrs-icon i,
.slide-panel .tree-list-container .treeBody ul li a i {
  color: #F59E0B !important;
}

/* 3. Inline Search Box in Middle Column */
html body #mailListView st-search-box,
body #mailListView st-search-box,
#mailListView st-search-box {
  position: static !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 12px 0 !important;
  padding: 0 16px !important;
  display: block !important;
  height: 36px !important;
  box-sizing: border-box !important;
}

html body #mailListView st-search-box .st-search-box,
body #mailListView st-search-box .st-search-box,
#mailListView st-search-box .st-search-box {
  background-color: #F3F4F6 !important;
  background: #F3F4F6 !important;
  border: none !important;
  border-radius: 20px !important;
  height: 36px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  box-shadow: none !important;
}

/* 4. Folders List items (Spacious & Clean) */
.slide-panel .tree-list-container .treeBody ul li a {
  background-color: transparent !important;
  color: #4B5563 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 8px 16px !important;
  margin: 4px 8px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  transition: all 0.15s ease !important;
}

.slide-panel .tree-list-container .treeBody ul li a:hover {
  background-color: #F3F4F6 !important;
  color: var(--mrs-primary) !important;
}

.slide-panel .tree-list-container .treeBody ul li.active a {
  background-color: var(--mrs-primary-light) !important;
  color: var(--mrs-primary) !important;
  font-weight: 600 !important;
}

/* 5. Plain Text Folder Counter Badges (No solid backgrounds) */
.slide-panel .tree-list-container .treeBody ul li a .counter,
.slide-panel .tree-list-container .treeBody ul li a .tree-count {
  background: transparent !important;
  background-color: transparent !important;
  color: #9CA3AF !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-left: auto !important;
  min-width: 0 !important;
  height: auto !important;
  line-height: normal !important;
}

/* 6. Reading Pane Header Styling */
#mailMessageView #messageHeader {
  padding: 24px !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid #E5E7EB !important;
  margin-bottom: 20px !important;
}

#mailMessageView #messageHeader #subject {
  font-family: 'Inter', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  line-height: 28px !important;
  margin-bottom: 16px !important;
}

#mailMessageView #messageHeader .message-header-info {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

#mailMessageView #messageHeader .message-header-icon,
#mailMessageView #messageHeader .message-header-icon * {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 50% !important;
  line-height: 40px !important;
  font-size: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* 7. Action Buttons (Reply/Delete Outline Pill Buttons) */
#mailMessageView .mailTopBar,
#mailMessageView .top-bar {
  background-color: #ffffff !important;
  border-bottom: none !important;
  padding: 8px 16px 0 !important; /* Extremely compact top padding */
  height: auto !important;
  min-height: 0 !important;
}

#mailMessageView .mailTopBar .md-button,
#mailMessageView .top-bar .md-button {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #1F2937 !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 4px !important; /* Compact square rounded corners */
  padding: 0 10px !important;    /* Tighter padding */
  height: 24px !important;        /* Compact height */
  min-height: 24px !important;
  line-height: normal !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;    /* Smaller font-size */
  font-weight: 500 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 3px !important;
}

#mailMessageView .mailTopBar .md-button:hover,
#mailMessageView .top-bar .md-button:hover {
  background-color: #F9FAFB !important;
  border-color: #9CA3AF !important;
}


/* ==========================================================
   11. PREMIUM EMAIL LIST ITEM AVATARS & DETAILS (TRMail)
   ========================================================== */

.panel-grid .panel-item {
  height: 84px !important;
  max-height: 84px !important;
  border-bottom: 1px solid #F3F4F6 !important;
}

.panel-grid .panel-item .inboxMessage {
  padding-left: 72px !important;
  position: relative !important;
}

.panel-grid .panel-item .inboxMessage::before {
  content: "" !important;
  position: absolute !important;
  left: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 20px !important;
  z-index: 2 !important;
  transition: all 0.15s ease !important;
}

/* Sequential user silhouette avatars mimicking design initials */
.panel-grid .panel-item:nth-child(5n+1) .inboxMessage::before {
  background-color: #E0F2FE !important; /* Sky Blue */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%230284C7'%3E%3Cpath fill-rule='evenodd' d='M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
}

.panel-grid .panel-item:nth-child(5n+2) .inboxMessage::before {
  background-color: #D1FAE5 !important; /* Emerald */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23059669'%3E%3Cpath fill-rule='evenodd' d='M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
}

.panel-grid .panel-item:nth-child(5n+3) .inboxMessage::before {
  background-color: #FCE7F3 !important; /* Rose */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23DB2777'%3E%3Cpath fill-rule='evenodd' d='M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
}

.panel-grid .panel-item:nth-child(5n+4) .inboxMessage::before {
  background-color: #F5F3FF !important; /* Violet */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%237C3AED'%3E%3Cpath fill-rule='evenodd' d='M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
}

.panel-grid .panel-item:nth-child(5n) .inboxMessage::before {
  background-color: #FEF3C7 !important; /* Warm Amber */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23D97706'%3E%3Cpath fill-rule='evenodd' d='M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
}


/* ==========================================================
   12. PREMIUM MAIL READING PANE OVERRIDES (COMPACT OUTLOOK STYLE)
   ========================================================== */

/* 1. Hide the redundant "İleti" tab bar completely when there are no extra tabs */
#mailMessageView .mail-message-tabs:not(.has-extra-tabs) {
  display: none !important;
}

/* Style the tab bar when it is visible (i.e., has attachments or tasks) */
#mailMessageView .mail-message-tabs.has-extra-tabs {
  display: flex !important;
  background-color: var(--mrs-bg-surface) !important;
  border-bottom: 1px solid var(--mrs-border) !important;
  padding: 0 24px !important;
  height: 42px !important;
  align-items: center !important;
  margin-bottom: 12px !important;
}

#mailMessageView .mail-message-tabs.has-extra-tabs .message-tabs-wrapper {
  display: flex !important;
  gap: 16px !important;
  height: 100% !important;
}

#mailMessageView .mail-message-tabs.has-extra-tabs .mail-tab {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 4px !important;
  height: 100% !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--mrs-text-secondary) !important;
  border-bottom: 2px solid transparent !important;
  cursor: pointer !important;
  transition: var(--mrs-transition) !important;
}

#mailMessageView .mail-message-tabs.has-extra-tabs .mail-tab:hover {
  color: var(--mrs-primary) !important;
}

#mailMessageView .mail-message-tabs.has-extra-tabs .mail-tab.mail-tab-selected {
  color: var(--mrs-primary) !important;
  font-weight: 600 !important;
  border-bottom-color: var(--mrs-primary) !important;
}

#mailMessageView .mail-message-tabs.has-extra-tabs .mail-tab .counter {
  margin-left: 6px !important;
  background-color: var(--mrs-primary-light) !important;
  color: var(--mrs-primary) !important;
  padding: 2px 6px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  display: inline-block !important;
}

/* Premium Attachments Section Styling */
#mailMessageView .emailAttachments,
.forwardAttachments {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 12px !important;
  padding: 16px 24px !important;
  box-sizing: border-box !important;
}

/* Reset direct padding for compose forward attachments container */
.forwardAttachments {
  padding: 12px 0 !important;
}

.emailAttachment {
  display: flex !important;
  align-items: center !important;
  padding: 10px 14px !important;
  background-color: var(--mrs-bg-subtle) !important;
  border: 1px solid var(--mrs-border) !important;
  border-radius: var(--mrs-radius-md) !important;
  text-decoration: none !important;
  color: var(--mrs-text-primary) !important;
  transition: var(--mrs-transition) !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.emailAttachment:hover {
  background-color: var(--mrs-primary-light) !important;
  border-color: var(--mrs-primary) !important;
  box-shadow: var(--mrs-shadow-sm) !important;
}

html[mrs-theme="dark"] .emailAttachment:hover {
  background-color: var(--mrs-primary-light) !important; /* Premium Dark Row Hover */
}

.emailAttachment i.toolsicon {
  font-size: 20px !important;
  margin-right: 12px !important;
  color: var(--mrs-primary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 24px !important;
}

/* Special color for download all icon */
.emailAttachment i.toolsicon-download {
  color: var(--mrs-success) !important;
}

.emailAttachment .previewImage {
  width: 32px !important;
  height: 32px !important;
  border-radius: var(--mrs-radius-sm) !important;
  overflow: hidden !important;
  margin-right: 12px !important;
  border: 1px solid var(--mrs-border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.emailAttachment .previewImage img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.emailAttachment .emailAttachmentInfo {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  flex: 1 !important;
  text-align: left !important;
}

.emailAttachment .emailAttachmentName {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--mrs-text-primary) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-bottom: 2px !important;
}

.emailAttachment .emailAttachmentSize {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  color: var(--mrs-text-secondary) !important;
}

/* Compose Removal button styling */
.emailAttachment .att-remove-button {
  margin-left: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.emailAttachment .att-remove-button .btn-container {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: var(--mrs-transition) !important;
  color: var(--mrs-text-secondary) !important;
}

.emailAttachment .att-remove-button .btn-container:hover {
  background-color: var(--mrs-border-light) !important;
  color: var(--mrs-danger) !important;
}

.emailAttachment .att-remove-button .btn-container i {
  font-size: 12px !important;
}

/* 2. Flat Continuous White Canvas (No grey borders or boxes) */
html body #messageViewFrameContainer,
html body .mail-message-info {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* 3. Outer Padding and Layout spacing for email body */
#mailMessageView .mail-message-info {
  padding: 8px 24px 24px !important;
  box-sizing: border-box !important;
}

#mailMessageView #messageViewFrameContainer {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* 4. Subject and Top Toolbar Ribbons (Compact Layout) */
#mailMessageView #messageHeader {
  padding: 12px 24px 10px !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid #F3F4F6 !important;
  margin-bottom: 8px !important;
}

#mailMessageView #messageHeader #subject {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  line-height: 20px !important;
  margin-bottom: 6px !important;
}

/* Fix Avatar dimensions to prevent squeezing */
#mailMessageView #messageHeader .message-header-icon {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  margin-right: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#mailMessageView #messageHeader .message-header-icon div,
#mailMessageView #messageHeader .message-header-icon img {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  line-height: 32px !important;
}

/* 5. Sender Card Info Re-ordering (Extremely Compact) */
#mailMessageView #messageHeader .message-header-info {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#mailMessageView #messageHeader .message-header-info > div:not(.message-header-icon) {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}

#mailMessageView #messageHeaderSecondLine {
  order: 3 !important; /* Date & Status at bottom */
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 1px !important;
}

#mailMessageView #messageHeaderFirstLine {
  order: 1 !important; /* Sender name (From) at top */
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #111827 !important;
}

#mailMessageView #messageHeaderThirdLine {
  order: 2 !important; /* Recipient name (To) in middle */
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  color: #6B7280 !important;
}

#mailMessageView #messageHeaderFirstLine #from,
#mailMessageView #messageHeaderThirdLine #to {
  color: #374151 !important;
  font-family: 'Inter', sans-serif !important;
}

#mailMessageView #messageHeaderFirstLine .header-label,
#mailMessageView #messageHeaderThirdLine .header-label {
  color: #9CA3AF !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-right: 4px !important;
}

#mailMessageView #messageHeader #date {
  color: #9CA3AF !important;
  font-size: 11px !important;
  font-family: 'Inter', sans-serif !important;
}

/* Plain Text Trusted Sender Label (Compact) */
#mailMessageView #messageHeader .sender-trusted {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  color: #10B981 !important; /* Green text */
  padding: 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  display: inline-block !important;
  margin-left: 6px !important;
  box-shadow: none !important;
}

/* Warning & Blocked Remote Content Banners (Ultra Compact & Flat) */
#mailMessageView .st-warning-banner,
#mailMessageView .readReceiptArea,
#mailMessageView #blockedContentBanner {
  background-color: #FFFBEB !important;
  background: #FFFBEB !important;
  border: none !important;
  border-left: 3px solid #F59E0B !important;
  border-radius: 4px !important;
  padding: 4px 12px !important;
  margin: 4px 24px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  color: #92400E !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  line-height: 14px !important;
}

/* Ensure the warning/receipt banner disappears when Angular adds ng-hide class */
#mailMessageView .st-warning-banner.ng-hide,
#mailMessageView .readReceiptArea.ng-hide,
#mailMessageView #blockedContentBanner.ng-hide {
  display: none !important;
}

#mailMessageView .readReceiptArea .md-button,
#mailMessageView #blockedContentBanner .md-button {
  background-color: #F59E0B !important;
  background: #F59E0B !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 4px !important;
  height: 20px !important;
  min-height: 20px !important;
  line-height: 20px !important;
  padding: 0 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  margin: 0 2px !important;
  box-shadow: 0 1px 2px rgba(245, 158, 11, 0.1) !important;
}

#mailMessageView .readReceiptArea .md-button:hover,
#mailMessageView #blockedContentBanner .md-button:hover {
  background-color: #D97706 !important;
  background: #D97706 !important;
}


/* ==========================================================
   14. OUTLOOK MESSAGE DETAILS READER HEADER STYLES
   ========================================================== */

/* Overall Message details view wrapper */
html body #mailMessageView {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important;
}

/* Reset default SmarterMail message header styles */
html body #messageHeader,
html body #mailMessageView #messageHeader {
  padding: 20px 24px 16px 24px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  background-color: #ffffff !important;
  background: #ffffff !important;
  display: block !important;
  height: auto !important;
  min-height: auto !important;
  box-sizing: border-box !important;
}

html[mrs-theme="dark"] body #messageHeader {
  background-color: #1e293b !important;
  background: #1e293b !important;
  border-bottom-color: #334155 !important;
}

/* Subject styling */
html body #messageHeader .outlook-read-subject-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  margin-bottom: 16px !important;
  width: 100% !important;
}

html body #messageHeader .outlook-read-subject {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #323130 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.35 !important;
  flex: 1 !important;
  border: none !important;
}

html[mrs-theme="dark"] body #messageHeader .outlook-read-subject {
  color: #f3f2f1 !important;
}

/* Indicators */
html body #messageHeader .outlook-read-indicators {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-left: 16px !important;
}

html body #messageHeader .outlook-read-indicators .indicator {
  color: #605e5c !important;
  cursor: pointer !important;
}

html body #messageHeader .outlook-read-indicators .indicator i {
  font-size: 14px !important;
}

/* Details row container (Flexbox row) */
html body #messageHeader .outlook-read-details-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 16px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Avatar container */
html body #messageHeader .outlook-read-avatar-col {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  display: block !important;
}

/* Force avatar circle and images */
html body #messageHeader .outlook-read-avatar-col [st-avatar-icon],
html body #messageHeader .outlook-read-avatar-col .avatar-circle,
html body #messageHeader .outlook-read-avatar-col img {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  line-height: 40px !important;
  font-size: 16px !important;
  margin: 0 !important;
}

/* Info Details Column */
html body #messageHeader .outlook-read-info-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  flex: 1 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* Sender line (Name + Email) */
html body #messageHeader .outlook-read-sender {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 2px !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

html body #messageHeader .outlook-sender-name {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important;
  font-weight: 700 !important;
  color: #323130 !important;
}

html[mrs-theme="dark"] body #messageHeader .outlook-sender-name {
  color: #f3f2f1 !important;
}

html body #messageHeader .outlook-sender-email {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important;
  font-size: 13px !important;
  color: #605e5c !important;
  font-weight: 400 !important;
}

html[mrs-theme="dark"] body #messageHeader .outlook-sender-email {
  color: #a19f9d !important;
}

/* Recipients layout */
html body #messageHeader .outlook-read-recipients {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body #messageHeader .outlook-recipient-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 6px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

html body #messageHeader .outlook-recipient-label {
  color: #605e5c !important;
  font-weight: 600 !important;
  min-width: 36px !important;
}

html[mrs-theme="dark"] body #messageHeader .outlook-recipient-label {
  color: #a19f9d !important;
}

html body #messageHeader .outlook-recipient-list,
html body #messageHeader .outlook-recipient-static {
  color: #605e5c !important;
  display: inline-flex !important;
  flex-wrap: wrap !important;
  column-gap: 6px !important;
  row-gap: 2px !important;
}

html[mrs-theme="dark"] body #messageHeader .outlook-recipient-list,
html[mrs-theme="dark"] body #messageHeader .outlook-recipient-static {
  color: #cbd5e1 !important;
}

/* Comma separator inside lists */
html body #messageHeader .outlook-recipient-list user-with-context {
  display: inline-block !important;
  color: inherit !important;
}

html body #messageHeader .outlook-recipient-list user-with-context a,
html body #messageHeader .outlook-recipient-list user-with-context span {
  color: inherit !important;
  text-decoration: none !important;
}

html body #messageHeader .outlook-recipient-list user-with-context a:hover {
  text-decoration: underline !important;
}

html body #messageHeader .outlook-recipient-list user-with-context::after {
  content: "," !important;
  color: #605e5c !important;
  display: inline-block !important;
  margin-right: 4px !important;
}

html[mrs-theme="dark"] body #messageHeader .outlook-recipient-list user-with-context::after {
  color: #a19f9d !important;
}

html body #messageHeader .outlook-recipient-list user-with-context:last-child::after {
  content: "" !important;
}

/* Date row */
html body #messageHeader .outlook-read-meta-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 6px !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

html body #messageHeader .outlook-read-date {
  color: #605e5c !important;
}

html[mrs-theme="dark"] body #messageHeader .outlook-read-date {
  color: #a19f9d !important;
}