/* ============================================================================
   PACT MAIL — GMAIL MATERIAL 3 LIGHT THEME (ALL VIEWS, ZERO STUBS)
   Covers Inbox, Reading Pane, Compose, Contacts, Settings, Identities, Folders
   ============================================================================ */

:root {
  --gm-bg-canvas: #f8fafd;
  --gm-bg-card: #ffffff;
  --gm-bg-read-row: #f2f6fc;
  --gm-bg-unread-row: #ffffff;
  --gm-bg-selected-row: #c2e7ff;
  --gm-bg-search: #eaf1fb;
  --gm-bg-compose: #c2e7ff;
  --gm-fg-compose: #001d35;
  --gm-bg-pill-active: #d3e3fd;
  --gm-fg-pill-active: #041e49;
  --gm-bg-pill-hover: #eaebef;
  --gm-blue: #0b57d0;
  --gm-blue-accent: #1a73e8;
  --gm-text-primary: #1f1f1f;
  --gm-text-secondary: #444746;
  --gm-text-muted: #5f6368;
  --gm-border: #e1e3e1;
  --gm-row-divider: #eceff1;
  --gm-font-sans: 'Google Sans', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --gm-font-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

/* 1. GLOBAL SHELL & LIGHT MODE ENFORCEMENT */
html:not(.iframe),
html:not(.iframe) body:not(.task-login),
html.dark-mode:not(.iframe),
html.dark-mode:not(.iframe) body:not(.task-login) {
  background-color: var(--gm-bg-canvas) !important;
  color: var(--gm-text-primary) !important;
  font-family: var(--gm-font-body) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  -webkit-font-smoothing: antialiased;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}

/* Framed views (Message reader, Contact editor, Settings forms, 2FA, Password) */
html.iframe,
html.iframe body,
html.iframe.dark-mode,
html.iframe.dark-mode body {
  background-color: #ffffff !important;
  color: var(--gm-text-primary) !important;
  font-family: var(--gm-font-body) !important;
  font-size: 14px !important;
  line-height: 20px !important;
  -webkit-font-smoothing: antialiased;
}

/* Main #layout container across ALL top-level views (Mail, Compose, Contacts, Settings) */
html:not(.iframe) body:not(.task-login) #layout {
  display: flex !important;
  flex-direction: row !important;
  position: fixed !important;
  top: 64px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: calc(100vh - 64px) !important;
  background-color: var(--gm-bg-canvas) !important;
  overflow: hidden !important;
}

/* Hide column resizer splitters across views for clean rounded Material 3 cards */
html:not(.iframe) body:not(.task-login) .splitter {
  display: none !important;
}

/* On main Mail Inbox view, hide #layout-menu since #layout-sidebar is the 256px folder drawer */
body.task-mail.action-none #layout-menu {
  display: none !important;
}

/* ============================================================================
   2. GLOBAL 64px PACT MAIL TOP HEADER BAR (#gmail-topbar)
   ============================================================================ */
#gmail-topbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 64px !important;
  background-color: var(--gm-bg-canvas) !important;
  display: flex !important;
  align-items: center !important;
  padding: 8px 12px !important;
  z-index: 1050 !important;
  user-select: none;
}

.gmail-topbar-left {
  display: flex !important;
  align-items: center !important;
  width: 244px !important;
  min-width: 244px !important;
  padding-left: 4px !important;
  gap: 4px !important;
}

.gmail-icon-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 9999px !important;
  border: none !important;
  background: transparent !important;
  color: #444746 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease !important;
  padding: 0 !important;
}

.gmail-icon-btn:hover {
  background-color: rgba(68, 71, 70, 0.08) !important;
  color: #1f1f1f !important;
}

.gmail-logo-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  padding: 4px 8px !important;
}

.gmail-m-logo {
  width: 30px !important;
  height: 22px !important;
  flex-shrink: 0 !important;
}

.gmail-wordmark {
  font-family: var(--gm-font-sans) !important;
  font-size: 21px !important;
  font-weight: 400 !important;
  color: #444746 !important;
  letter-spacing: -0.01em !important;
  line-height: 24px !important;
  white-space: nowrap !important;
}

/* Center Pill Search Bar (#eaf1fb) */
.gmail-topbar-center {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  max-width: 720px !important;
  padding-right: 24px !important;
}

.gmail-search-pill {
  width: 100% !important;
  height: 48px !important;
  background-color: var(--gm-bg-search) !important;
  border-radius: 9999px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 8px 0 6px !important;
  transition: background-color 0.15s ease, box-shadow 0.15s ease !important;
}

.gmail-search-pill:focus-within {
  background-color: #ffffff !important;
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15) !important;
}

.gmail-search-icon-btn,
.gmail-tune-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 9999px !important;
  border: none !important;
  background: transparent !important;
  color: #444746 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

.gmail-search-icon-btn:hover,
.gmail-tune-btn:hover {
  background-color: rgba(68, 71, 70, 0.08) !important;
}

.gmail-searchform-wrap {
  flex: 1 1 auto !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}

.gmail-searchform-wrap .searchbar {
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.gmail-searchform-wrap .searchbar > a.button.search,
.gmail-searchform-wrap .searchbar > a.button.options,
.gmail-searchform-wrap .searchbar > h2 {
  display: none !important;
}

.gmail-searchform-wrap .searchbar input,
#qsearchbox,
#pact-global-search-input {
  width: 100% !important;
  height: 44px !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #1f1f1f !important;
  font-family: var(--gm-font-sans) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  padding: 0 8px !important;
}

.gmail-searchform-wrap .searchbar input::placeholder,
#qsearchbox::placeholder,
#pact-global-search-input::placeholder {
  color: #444746 !important;
  opacity: 1 !important;
}

/* Right Utility Cluster */
.gmail-topbar-right {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding-right: 4px !important;
}

.gmail-avatar-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 9999px !important;
  border: none !important;
  background: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin-left: 4px !important;
}

.gmail-avatar-circle {
  width: 32px !important;
  height: 32px !important;
  border-radius: 9999px !important;
  background-color: #0b57d0 !important;
  color: #ffffff !important;
  font-family: var(--gm-font-sans) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 0 0 3px #c2e7ff !important;
  text-transform: lowercase !important;
}

/* Topbar Popovers (Pact Websites, Account, Shortcuts) */
.gmail-popover {
  position: fixed !important;
  top: 60px !important;
  right: 16px !important;
  background: #e9eef6 !important;
  border-radius: 28px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16), 0 1px 4px rgba(0, 0, 0, 0.08) !important;
  padding: 16px !important;
  z-index: 2500 !important;
  min-width: 310px !important;
  color: #1f1f1f !important;
}

.gmail-popover.hidden {
  display: none !important;
}

.gmail-apps-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: 14px !important;
}

.gmail-app-tile {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 6px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  color: #1f1f1f !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.gmail-app-tile:hover {
  background: #f2f6fc !important;
}

.gmail-badge-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--gm-font-sans) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

#gmail-account-popover {
  text-align: center !important;
  width: 344px !important;
  padding: 20px 18px !important;
}

.gmail-account-email {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #1f1f1f !important;
  margin-bottom: 14px !important;
}

.gmail-account-avatar-lg {
  width: 68px !important;
  height: 68px !important;
  border-radius: 9999px !important;
  background: #0b57d0 !important;
  color: #ffffff !important;
  font-size: 32px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 10px !important;
  box-shadow: 0 0 0 4px #c2e7ff !important;
  text-transform: lowercase !important;
}

.gmail-account-greeting {
  font-family: var(--gm-font-sans) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  color: #1f1f1f !important;
  margin-bottom: 12px !important;
}

.gmail-manage-account-btn {
  display: inline-block !important;
  padding: 8px 20px !important;
  border: 1px solid #747775 !important;
  border-radius: 9999px !important;
  color: #0b57d0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  margin-bottom: 16px !important;
}

.gmail-manage-account-btn:hover {
  background: rgba(11, 87, 208, 0.06) !important;
}

.gmail-account-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4px !important;
  margin-bottom: 12px !important;
}

.gmail-account-action-btn {
  background: #ffffff !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  color: #1f1f1f !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.gmail-account-action-btn:hover {
  background: #d3e3fd !important;
}

.gmail-domain-pills {
  display: flex !important;
  justify-content: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  padding-top: 4px !important;
}

.gmail-domain-pills a {
  font-size: 11px !important;
  color: #041e49 !important;
  background: #d3e3fd !important;
  padding: 3px 10px !important;
  border-radius: 9999px !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

.gmail-domain-pills a:hover {
  background: #c2e7ff !important;
}

.gmail-popover-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  margin-bottom: 10px !important;
}

.gmail-help-list {
  list-style: none !important;
  padding: 10px 14px !important;
  margin: 0 0 10px 0 !important;
  background: #ffffff !important;
  border-radius: 16px !important;
}

.gmail-help-list li {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 6px 0 !important;
  font-size: 13px !important;
}

.gmail-help-list li a {
  color: #1f1f1f !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

.gmail-help-list li a:hover {
  color: #0b57d0 !important;
}

.gmail-help-list kbd {
  background: #eaf1fb !important;
  color: #041e49 !important;
  border-radius: 4px !important;
  padding: 1px 6px !important;
  font-size: 11px !important;
}

.gmail-help-links {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 12px !important;
  padding: 0 4px !important;
}

.gmail-help-links a {
  color: #0b57d0 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

/* ============================================================================
   3. UNIFIED 256px LEFT SIDEBAR DRAWER (#layout-sidebar on Mail, #layout-menu on Compose/Contacts/Settings)
   ============================================================================ */
#layout-sidebar.portside-unified-sidebar,
body:not(.action-none) #layout-menu.pact-gmail-drawer,
body.task-addressbook #layout-menu.pact-gmail-drawer,
body.task-settings #layout-menu.pact-gmail-drawer {
  order: 1 !important;
  width: 256px !important;
  min-width: 256px !important;
  max-width: 256px !important;
  background-color: var(--gm-bg-canvas) !important;
  border: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 0 12px 12px 0 !important;
  flex-shrink: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  transition: width 0.15s ease, min-width 0.15s ease !important;
}

body.gmail-sidebar-collapsed #layout-sidebar.portside-unified-sidebar,
body.gmail-sidebar-collapsed #layout-menu.pact-gmail-drawer {
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
}

body.gmail-sidebar-collapsed .compose-text,
body.gmail-sidebar-collapsed .gmail-labels-header,
body.gmail-sidebar-collapsed .gmail-nav-label,
body.gmail-sidebar-collapsed #mailboxlist li a .unreadcount,
body.gmail-sidebar-collapsed #taskmenu.pact-drawer-nav a .inner {
  display: none !important;
}

body.gmail-sidebar-collapsed .btn-gmail-compose {
  min-width: 56px !important;
  width: 56px !important;
  padding: 0 !important;
  justify-content: center !important;
}

/* Compose Button (#c2e7ff / #001d35) */
.sidebar-compose-wrapper {
  padding: 8px 16px 16px 8px !important;
}

.btn-gmail-compose {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  height: 56px !important;
  min-width: 142px !important;
  padding: 0 24px 0 16px !important;
  background-color: var(--gm-bg-compose) !important;
  color: var(--gm-fg-compose) !important;
  border-radius: 16px !important;
  font-family: var(--gm-font-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: none !important;
  transition: box-shadow 0.15s ease, background-color 0.15s ease !important;
}

.btn-gmail-compose:hover {
  background-color: #b8e0fc !important;
  color: var(--gm-fg-compose) !important;
  box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15) !important;
}

/* Style #taskmenu inside #layout-menu.pact-gmail-drawer as horizontal 32px Gmail pills (NO dark square buttons!) */
#layout-menu.pact-gmail-drawer #taskmenu.pact-drawer-nav {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#layout-menu.pact-gmail-drawer #taskmenu.pact-drawer-nav .special-buttons {
  margin-top: 0 !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

#layout-menu.pact-gmail-drawer #taskmenu.pact-drawer-nav a.button {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 12px 0 26px !important;
  margin: 0 !important;
  border-radius: 0 16px 16px 0 !important;
  background: transparent !important;
  color: #1f1f1f !important;
  font-family: var(--gm-font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  border: none !important;
  gap: 18px !important;
  text-align: left !important;
}

#layout-menu.pact-gmail-drawer #taskmenu.pact-drawer-nav a.button:hover {
  background-color: var(--gm-bg-pill-hover) !important;
}

#layout-menu.pact-gmail-drawer #taskmenu.pact-drawer-nav a.button.selected {
  background-color: var(--gm-bg-pill-active) !important;
  color: var(--gm-fg-pill-active) !important;
  font-weight: 700 !important;
}

#layout-menu.pact-gmail-drawer #taskmenu.pact-drawer-nav a.button .inner {
  font-size: 14px !important;
  line-height: 20px !important;
  padding: 0 !important;
  margin: 0 !important;
  color: inherit !important;
}

#layout-menu.pact-gmail-drawer #taskmenu.pact-drawer-nav a.button::before {
  content: "" !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  display: inline-block !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 20px 20px !important;
  margin: 0 !important;
  font-size: 0 !important;
}

#layout-menu.pact-gmail-drawer #taskmenu.pact-drawer-nav a.button.mail::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23041e49'%3E%3Cpath d='M19 3H4.99c-1.11 0-1.98.89-1.98 2L3 19c0 1.1.88 2 1.99 2H19c1.1 0 2-.9 2-2V5c0-1.11-.9-2-2-2zm0 12h-4c0 1.66-1.35 3-3 3s-3-1.34-3-3H4.99V5H19v10z'/%3E%3C/svg%3E") !important;
}

#layout-menu.pact-gmail-drawer #taskmenu.pact-drawer-nav a.button.contacts::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444746'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E") !important;
}

#layout-menu.pact-gmail-drawer #taskmenu.pact-drawer-nav a.button.settings::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444746'%3E%3Cpath d='M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z'/%3E%3C/svg%3E") !important;
}

#layout-menu.pact-gmail-drawer #taskmenu.pact-drawer-nav a.button.logout::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ba1a1a'%3E%3Cpath d='M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z'/%3E%3C/svg%3E") !important;
}

/* Folder List & Extra Nav Items */
#folderlist-content {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  padding-right: 0 !important;
}

#mailboxlist,
.gmail-extra-nav {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#mailboxlist li,
.gmail-extra-nav li {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

body:not(.gmail-show-more-folders) #mailboxlist li.mailbox.junk:not(.selected),
body:not(.gmail-show-more-folders) #mailboxlist li.mailbox.trash:not(.selected) {
  display: none !important;
}

#mailboxlist li > a,
.gmail-extra-nav li > a {
  display: flex !important;
  align-items: center !important;
  height: 32px !important;
  padding: 0 12px 0 26px !important;
  border-radius: 0 16px 16px 0 !important;
  color: #1f1f1f !important;
  font-family: var(--gm-font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  position: relative !important;
  gap: 18px !important;
}

#mailboxlist li > a:hover,
.gmail-extra-nav li > a:hover {
  background-color: var(--gm-bg-pill-hover) !important;
}

#mailboxlist li.selected > a,
.gmail-extra-nav li.selected > a {
  background-color: var(--gm-bg-pill-active) !important;
  color: var(--gm-fg-pill-active) !important;
  font-weight: 700 !important;
}

#mailboxlist li > a .unreadcount {
  margin-left: auto !important;
  background: transparent !important;
  color: inherit !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 0 !important;
}

#mailboxlist li > a::before {
  content: "" !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  display: inline-block !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 20px 20px !important;
  margin: 0 !important;
  font-family: inherit !important;
}

#mailboxlist li.inbox > a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23041e49'%3E%3Cpath d='M19 3H4.99c-1.11 0-1.98.89-1.98 2L3 19c0 1.1.88 2 1.99 2H19c1.1 0 2-.9 2-2V5c0-1.11-.9-2-2-2zm0 12h-4c0 1.66-1.35 3-3 3s-3-1.34-3-3H4.99V5H19v10z'/%3E%3C/svg%3E") !important;
}

#mailboxlist li.sent > a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444746'%3E%3Cpath d='M4.01 6.03l7.51 3.22-7.52-1 .01-2.22m7.5 8.72L4 17.97v-2.22l7.51-1M2.01 3L2 10l15 2-15 2 .01 7L23 12 2.01 3z'/%3E%3C/svg%3E") !important;
}

#mailboxlist li.drafts > a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444746'%3E%3Cpath d='M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6z'/%3E%3C/svg%3E") !important;
}

#mailboxlist li.junk > a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444746'%3E%3Cpath d='M15.73 3H8.27L3 8.27v7.46L8.27 21h7.46L21 15.73V8.27L15.73 3zM19 14.9L14.9 19H9.1L5 14.9V9.1L9.1 5h5.8L19 9.1v5.8zM11 7h2v6h-2zm0 8h2v2h-2z'/%3E%3C/svg%3E") !important;
}

#mailboxlist li.trash > a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444746'%3E%3Cpath d='M16 9v10H8V9h8m-1.5-6h-5l-1 1H5v2h14V4h-3.5l-1-1zM18 7H6v12c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7z'/%3E%3C/svg%3E") !important;
}

#mailboxlist li.archive > a::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444746'%3E%3Cpath d='M20.54 5.23l-1.39-1.68C18.88 3.21 18.47 3 18 3H6c-.47 0-.88.21-1.16.55L3.46 5.23C3.17 5.57 3 6.02 3 6.5V19c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6.5c0-.48-.17-.93-.46-1.27zM12 17.5L6.5 12H10v-2h4v2h3.5L12 17.5zM5.12 5l.81-1h12l.94 1H5.12z'/%3E%3C/svg%3E") !important;
}

.gmail-nav-svg {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  color: #444746 !important;
}

.gmail-labels-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 12px 6px 26px !important;
}

.gmail-labels-title {
  font-family: var(--gm-font-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #444746 !important;
}

.gmail-labels-add-btn {
  width: 28px !important;
  height: 28px !important;
  border-radius: 9999px !important;
  color: #444746 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

.gmail-labels-add-btn:hover {
  background-color: var(--gm-bg-pill-hover) !important;
}

/* ============================================================================
   4. MAIL INBOX & READING PANE CARDS (#layout-list & #layout-content)
   ============================================================================ */
body.task-mail.action-none #layout-list {
  order: 2 !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  background-color: var(--gm-bg-card) !important;
  border-radius: 16px !important;
  margin: 0 0 12px 0 !important;
  border: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Keep #layout-content connected to DOM offscreen when reading pane is closed so iframe browsing context exists */
body.task-mail.action-none:not(.gmail-reading-open) #layout-content {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  overflow: hidden !important;
}

body.task-mail.action-none.gmail-reading-open #layout-list {
  display: none !important;
}

body.task-mail.action-none.gmail-reading-open #layout-content {
  position: static !important;
  order: 2 !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  background-color: var(--gm-bg-card) !important;
  border-radius: 16px !important;
  margin: 0 0 12px 0 !important;
  border: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

/* Top 48px Action Toolbar inside #layout-list */
#messagelist-header.gmail-list-toolbar {
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  background-color: #ffffff !important;
  border: none !important;
  padding: 0 16px 0 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.gmail-toolbar-left {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.gmail-select-cluster {
  display: inline-flex !important;
  align-items: center !important;
  height: 36px !important;
  padding: 0 4px 0 6px !important;
  border-radius: 4px !important;
}

.gmail-select-cluster:hover {
  background-color: rgba(68, 71, 70, 0.08) !important;
}

.gmail-master-cb {
  width: 16px !important;
  height: 16px !important;
  accent-color: #0b57d0 !important;
  cursor: pointer !important;
  margin: 0 !important;
}

.gmail-select-caret {
  color: #444746 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 28px !important;
  text-decoration: none !important;
}

.gmail-toolbar-icon-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 9999px !important;
  border: none !important;
  background: transparent !important;
  color: #444746 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  text-decoration: none !important;
  padding: 0 !important;
}

.gmail-toolbar-icon-btn:hover {
  background-color: rgba(68, 71, 70, 0.08) !important;
  color: #1f1f1f !important;
}

/* Right Pagination in Top Action Bar */
.gmail-toolbar-right .pagenav {
  background: transparent !important;
  border: none !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.gmail-toolbar-right .pagenav .pagenav-text {
  font-size: 12px !important;
  color: #5f6368 !important;
  margin-right: 8px !important;
  white-space: nowrap !important;
}

.gmail-toolbar-right .pagenav input.form-control,
.gmail-toolbar-right .pagenav a.firstpage,
.gmail-toolbar-right .pagenav a.lastpage {
  display: none !important;
}

.gmail-toolbar-right .pagenav a.prevpage,
.gmail-toolbar-right .pagenav a.nextpage {
  width: 32px !important;
  height: 32px !important;
  border-radius: 9999px !important;
  color: #444746 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

.gmail-toolbar-right .pagenav a.prevpage:hover:not(.disabled),
.gmail-toolbar-right .pagenav a.nextpage:hover:not(.disabled) {
  background-color: rgba(68, 71, 70, 0.08) !important;
}

/* ============================================================================
   5. CATEGORY TABS BAR (Primary / Promotions / Social / Updates)
   ============================================================================ */
#gmail-category-tabs {
  display: flex !important;
  align-items: stretch !important;
  height: 56px !important;
  min-height: 56px !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--gm-border) !important;
  padding: 0 !important;
  user-select: none;
}

.gmail-cat-tab {
  flex: 1 1 0 !important;
  max-width: 252px !important;
  border: none !important;
  background: transparent !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  cursor: pointer !important;
  position: relative !important;
  text-align: left !important;
  color: #444746 !important;
  transition: background-color 0.15s ease !important;
}

.gmail-cat-tab:hover {
  background-color: #f2f6fc !important;
}

.gmail-cat-tab.active {
  color: var(--gm-blue) !important;
}

.gmail-cat-tab.active::after {
  content: "" !important;
  position: absolute !important;
  left: 16px !important;
  right: 16px !important;
  bottom: 0 !important;
  height: 3px !important;
  background-color: var(--gm-blue) !important;
  border-radius: 3px 3px 0 0 !important;
}

.gmail-cat-icon {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
}

.gmail-cat-text {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
}

.gmail-cat-top {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.gmail-cat-title {
  font-family: var(--gm-font-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
}

.gmail-cat-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 6px !important;
  height: 18px !important;
  border-radius: 9999px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  line-height: 18px !important;
  white-space: nowrap !important;
}

.gmail-cat-badge.badge-green {
  background-color: #188038 !important;
}

.gmail-cat-badge.badge-orange {
  background-color: #e37400 !important;
}

.gmail-cat-sub {
  font-size: 12px !important;
  color: #5f6368 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 16px !important;
}

/* ============================================================================
   6. FULL-WIDTH SINGLE-LINE GMAIL MESSAGE ROWS (#messagelist)
   ============================================================================ */
#messagelist-content {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  background-color: #ffffff !important;
}

#messagelist {
  width: 100% !important;
  border-collapse: collapse !important;
  table-layout: fixed !important;
}

#messagelist thead {
  display: none !important;
}

#messagelist tbody {
  display: block !important;
  width: 100% !important;
}

#messagelist tbody tr.message {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 16px 0 8px !important;
  border: none !important;
  border-bottom: 1px solid var(--gm-row-divider) !important;
  background-color: var(--gm-bg-read-row) !important;
  color: var(--gm-text-primary) !important;
  cursor: pointer !important;
  position: relative !important;
  box-sizing: border-box !important;
}

#messagelist tbody tr.message.unread {
  background-color: var(--gm-bg-unread-row) !important;
}

#messagelist tbody tr.message.selected {
  background-color: var(--gm-bg-selected-row) !important;
}

#messagelist tbody tr.message:hover {
  box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15) !important;
  z-index: 4 !important;
}

#messagelist tbody tr.message > td.selection,
#messagelist tbody tr.message > td.threads,
#messagelist tbody tr.message > td.flags {
  display: none !important;
}

#messagelist tbody tr.message > td.subject {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important; /* CRITICAL: Never wrap onto row 2, keep on single line */
  align-items: center !important;
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 160px 0 0 !important; /* Reserve right zone so subject text never jitters */
  margin: 0 !important;
  border: none !important;
  overflow: hidden !important;
  background: transparent !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.gmail-row-cb-wrap {
  order: 1 !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.gmail-row-cb {
  width: 16px !important;
  height: 16px !important;
  accent-color: #0b57d0 !important;
  cursor: pointer !important;
  margin: 0 !important;
  opacity: 0.55;
}

#messagelist tbody tr.message:hover .gmail-row-cb,
#messagelist tbody tr.message.selected .gmail-row-cb,
.gmail-row-cb:checked {
  opacity: 1 !important;
}

#messagelist tbody tr.message td.subject > span.flag {
  order: 2 !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin: 0 4px 0 0 !important;
  position: static !important;
  cursor: pointer !important;
}

#messagelist tbody tr.message td.subject > span.flag::before {
  content: "" !important;
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23747775' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'%3E%3C/polygon%3E%3C/svg%3E") !important;
}

#messagelist tbody tr.message.flagged td.subject > span.flag::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fbbc04' stroke='%23fbbc04' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'%3E%3C/polygon%3E%3C/svg%3E") !important;
}

#messagelist tbody tr.message td.subject > span.fromto {
  order: 3 !important;
  width: 170px !important;
  min-width: 130px !important;
  max-width: 180px !important;
  padding-right: 12px !important;
  font-family: var(--gm-font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #1f1f1f !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

#messagelist tbody tr.message.unread td.subject > span.fromto {
  font-weight: 700 !important;
  color: #1f1f1f !important;
}

.gmail-new-badge {
  order: 4 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--gm-blue) !important;
  color: #ffffff !important;
  font-family: var(--gm-font-sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  height: 18px !important;
  padding: 0 7px !important;
  border-radius: 9999px !important;
  margin-right: 10px !important;
  flex-shrink: 0 !important;
  line-height: 18px !important;
}

#messagelist tbody tr.message.unread .gmail-new-badge {
  display: inline-flex !important;
}

#messagelist tbody tr.message td.subject > span.subject {
  order: 5 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important; /* CRITICAL: overrides Elastic's width: 100% */
  max-width: none !important;
  font-family: var(--gm-font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #444746 !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding-right: 16px !important;
  margin: 0 !important;
}

#messagelist tbody tr.message td.subject > span.subject a {
  display: inline !important;
  color: inherit !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#messagelist tbody tr.message td.subject > span.subject a span {
  display: inline !important;
  color: inherit !important;
}

#messagelist tbody tr.message.unread td.subject > span.subject,
#messagelist tbody tr.message.unread td.subject > span.subject a {
  font-weight: 700 !important;
  color: #1f1f1f !important;
}

#messagelist tbody tr.message td.subject > span.subject::before,
#messagelist tbody tr.message td.subject > span.status,
#messagelist tbody tr.message td.subject > span.size,
#messagelist tbody tr.message td.subject > span.msgicon {
  display: none !important;
}

.gmail-row-hover-actions {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: none !important;
  align-items: center !important;
  gap: 4px !important;
  z-index: 5 !important;
  background: inherit !important;
  padding: 0 4px !important;
}

#messagelist tbody tr.message:hover .gmail-row-hover-actions {
  display: inline-flex !important;
}

.gmail-row-act-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 9999px !important;
  border: none !important;
  background: transparent !important;
  color: #444746 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

.gmail-row-act-btn:hover {
  background-color: rgba(68, 71, 70, 0.12) !important;
  color: #1f1f1f !important;
}

#messagelist tbody tr.message td.subject > span.date {
  position: absolute !important;
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 85px !important;
  min-width: 85px !important;
  text-align: right !important;
  font-family: var(--gm-font-body) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #5f6368 !important;
  white-space: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

#messagelist tbody tr.message.unread td.subject > span.date {
  font-weight: 700 !important;
  color: #1f1f1f !important;
}

#messagelist tbody tr.message:hover td.subject > span.date {
  display: none !important;
}

/* ============================================================================
   7. GMAIL COMPOSE VIEW (body.task-mail.action-compose)
   ============================================================================ */
body.task-mail.action-compose #layout-content {
  order: 2 !important;
  flex: 1 1 auto !important;
  background-color: #ffffff !important;
  border-radius: 16px !important;
  margin: 0 12px 12px 0 !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.12) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

body.task-mail.action-compose #layout-sidebar.sidebar-right {
  order: 3 !important;
  width: 300px !important;
  min-width: 300px !important;
  max-width: 300px !important;
  background-color: #ffffff !important;
  border-radius: 16px !important;
  margin: 0 0 12px 0 !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.12) !important;
  overflow: hidden !important;
}

/* Compose Top Header ("Compose" + Pill Action Buttons) */
body.task-mail.action-compose #layout-content > .header,
body.task-mail.action-compose #layout-sidebar.sidebar-right > .header {
  background-color: #f2f6fc !important;
  height: 48px !important;
  min-height: 48px !important;
  border-bottom: 1px solid #e1e3e1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 16px !important;
}

body.task-mail.action-compose #layout-content > .header > .header-title,
body.task-mail.action-compose #layout-sidebar.sidebar-right > .header > .header-title {
  display: inline-block !important;
  font-family: var(--gm-font-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #1f1f1f !important;
}

/* Horizontal pill toolbar inside Compose header */
body.task-mail.action-compose #messagetoolbar {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

body.task-mail.action-compose #messagetoolbar a.button,
body.task-mail.action-compose #messagetoolbar a.responses {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  height: 34px !important;
  width: auto !important;
  padding: 0 12px !important;
  border-radius: 9999px !important;
  color: #444746 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  gap: 6px !important;
  text-decoration: none !important;
}

body.task-mail.action-compose #messagetoolbar a.button:hover,
body.task-mail.action-compose #messagetoolbar a.responses:hover {
  background-color: #d3e3fd !important;
  color: #041e49 !important;
}

body.task-mail.action-compose #messagetoolbar a.button::before,
body.task-mail.action-compose #messagetoolbar a.responses::before {
  font-size: 14px !important;
  line-height: 1 !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
}

body.task-mail.action-compose #messagetoolbar a .inner {
  font-size: 13px !important;
  padding: 0 !important;
}

/* Clean Gmail Bottom-Border Recipient & Subject Rows */
body.task-mail.action-compose #compose-content {
  padding: 0 20px !important;
  background: #ffffff !important;
}

body.task-mail.action-compose .compose-headers .form-group.row {
  margin: 0 !important;
  padding: 4px 0 !important;
  border-bottom: 1px solid #eceff1 !important;
  align-items: center !important;
}

body.task-mail.action-compose .compose-headers label.col-form-label {
  color: #5f6368 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  padding: 6px 0 !important;
}

body.task-mail.action-compose .compose-headers .form-control,
body.task-mail.action-compose .compose-headers .custom-select,
body.task-mail.action-compose .compose-headers ul.recipient-input {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #1f1f1f !important;
  font-size: 14px !important;
  min-height: 36px !important;
}

body.task-mail.action-compose .compose-headers .input-group-text {
  background: transparent !important;
  border: none !important;
  color: #5f6368 !important;
  border-radius: 9999px !important;
}

body.task-mail.action-compose .compose-headers .input-group-text:hover {
  background: #f2f6fc !important;
  color: #0b57d0 !important;
}

/* Compose Editor Container */
body.task-mail.action-compose #composebodycontainer {
  border: none !important;
  margin-top: 8px !important;
}

body.task-mail.action-compose .tox-tinymce {
  border: none !important;
}

body.task-mail.action-compose .tox .tox-toolbar,
body.task-mail.action-compose .tox .tox-toolbar__primary {
  background-color: #f2f6fc !important;
  border-radius: 9999px !important;
  border: none !important;
  margin-bottom: 6px !important;
  padding: 0 8px !important;
}

/* Compose Footer & Pill "Send" Button (#0b57d0) */
body.task-mail.action-compose #compose-content .formbuttons {
  padding: 12px 0 16px 0 !important;
  border-top: none !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

body.task-mail.action-compose .formbuttons button.btn-primary.send,
.btn-primary {
  background-color: var(--gm-blue) !important;
  border: none !important;
  color: #ffffff !important;
  border-radius: 9999px !important;
  height: 36px !important;
  padding: 0 24px !important;
  font-family: var(--gm-font-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

body.task-mail.action-compose .formbuttons button.btn-primary.send:hover,
.btn-primary:hover {
  background-color: #0842a0 !important;
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3) !important;
}

/* Attachments Drop Zone inside Compose Right Card */
body.task-mail.action-compose #compose-attachments {
  background: #f8fafd !important;
  border: 1.5px dashed #c2e7ff !important;
  border-radius: 12px !important;
  margin: 12px !important;
  padding: 16px !important;
}

body.task-mail.action-compose #compose-attachments button.attach {
  background-color: #d3e3fd !important;
  color: #041e49 !important;
  border: none !important;
  border-radius: 9999px !important;
  font-weight: 500 !important;
  padding: 6px 18px !important;
}

/* ============================================================================
   8. GMAIL SETTINGS ARCHITECTURE (body.task-settings, body.task-addressbook)
   Transforms Roundcube settings into Gmail Material 3 tabbed interface
   ============================================================================ */

/* Settings Workspace Layout - CSS Grid Architecture (Zero wrap collapse) */
body.task-settings #layout {
  display: grid !important;
  grid-template-columns: 256px 1fr !important;
  grid-template-rows: auto 1fr !important;
  grid-template-areas:
    "sidebar stage"
    "sidebar content" !important;
  width: 100vw !important;
  height: calc(100vh - 64px) !important;
  overflow: hidden !important;
  background-color: var(--gm-bg-canvas, #f6f8fc) !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* Hide the legacy 3-column Roundcube sidebar completely */
body.task-settings #layout-sidebar {
  display: none !important;
}

/* Left Navigation Drawer docked cleanly on the grid */
body.task-settings #layout-menu {
  grid-area: sidebar !important;
  width: 256px !important;
  min-width: 256px !important;
  max-width: 256px !important;
  height: 100% !important;
  background-color: var(--gm-bg-canvas, #f6f8fc) !important;
  overflow-y: auto !important;
}

/* Top Settings Stage & Horizontal Tabs */
.gmail-settings-stage {
  grid-area: stage !important;
  margin: 12px 16px 0 0 !important;
  background-color: #ffffff !important;
  border-radius: 16px 16px 0 0 !important;
  border-bottom: 1px solid #e0e2ec !important;
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.08) !important;
  z-index: 5 !important;
  position: relative !important;
}

.gmail-settings-header-card {
  padding: 16px 24px 0 24px !important;
}

.gmail-settings-title-row {
  margin-bottom: 12px !important;
}

.gmail-settings-title {
  font-family: var(--gm-font-sans) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  color: #1f1f1f !important;
  margin: 0 !important;
  line-height: 28px !important;
}

.gmail-settings-tabs-scroll {
  overflow-x: auto !important;
  white-space: nowrap !important;
  scrollbar-width: none !important;
  position: relative !important;
}

.gmail-settings-tabs-scroll::-webkit-scrollbar {
  display: none !important;
}

.gmail-settings-tabs {
  display: flex !important;
  gap: 2px !important;
  align-items: flex-end !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  position: relative !important;
}

.gmail-settings-tab {
  display: inline-flex !important;
  align-items: center !important;
  padding: 10px 16px !important;
  font-family: var(--gm-font-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #444746 !important;
  text-decoration: none !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 4px 4px 0 0 !important;
  transition: color 0.15s ease, background-color 0.15s ease !important;
  cursor: pointer !important;
  user-select: none !important;
  position: relative !important;
  bottom: -1px !important; /* Docks 3px indicator line flush over border */
  z-index: 2 !important;
}

.gmail-settings-tab:hover {
  color: #1f1f1f !important;
  background-color: #f2f6fc !important;
}

.gmail-settings-tab.active {
  color: #0b57d0 !important;
  font-weight: 700 !important;
  border-bottom: 3px solid #0b57d0 !important;
  background-color: transparent !important;
}

/* Settings main stage (Preferences view) */
body.task-settings #layout-content.gmail-settings-main-stage,
body.task-settings #layout-content.selected,
body.task-settings #layout-content {
  grid-area: content !important;
  width: auto !important;
  margin: 0 16px 16px 0 !important;
  background-color: #ffffff !important;
  border-radius: 0 0 16px 16px !important;
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.08) !important;
  border: none !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 520px !important;
}

body.task-settings .gmail-settings-iframe-wrapper,
body.task-settings .iframe-wrapper {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  background-color: #ffffff !important;
  border: none !important;
  overflow: hidden !important;
}

body.task-settings iframe#preferences-frame {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  border: none !important;
  background-color: #ffffff !important;
}

/* For Folders, Identities, and Responses which keep an item list */
body.task-settings.action-folders #layout,
body.task-settings.action-identities #layout,
body.task-settings.action-responses #layout {
  display: grid !important;
  grid-template-columns: 256px 300px 1fr !important;
  grid-template-rows: auto 1fr !important;
  grid-template-areas:
    "sidebar stage stage"
    "sidebar list content" !important;
}

body.task-settings.action-folders #layout-list,
body.task-settings.action-identities #layout-list,
body.task-settings.action-responses #layout-list {
  grid-area: list !important;
  display: block !important;
  width: 100% !important;
  background-color: #ffffff !important;
  border-right: 1px solid #e0e2ec !important;
  border-radius: 0 0 0 16px !important;
  margin: 0 !important;
  box-shadow: none !important;
  overflow-y: auto !important;
}

body.task-settings.action-folders #layout-content,
body.task-settings.action-identities #layout-content,
body.task-settings.action-responses #layout-content {
  grid-area: content !important;
  margin: 0 16px 16px 0 !important;
  border-radius: 0 0 16px 0 !important;
}

/* Overwrite dark button styles on Left Drawer for Settings */
body.task-settings #taskmenu a.button.selected,
body.task-settings #taskmenu a.button.settings,
body #layout-menu a.settings.selected,
body #layout-menu #taskmenu a.settings.selected {
  background-color: var(--gm-bg-pill-active, #d3e3fd) !important;
  color: var(--gm-fg-pill-active, #041e49) !important;
  font-weight: 700 !important;
  border-radius: 0 16px 16px 0 !important;
  box-shadow: none !important;
  border: none !important;
}

/* Inside Settings Iframe (settingsedit.html, folderedit.html, identityedit.html) */
html.iframe,
html.iframe body {
  background-color: #ffffff !important;
  color: #1f1f1f !important;
  font-family: var(--gm-font-sans), Roboto, sans-serif !important;
  padding: 24px 32px !important;
  margin: 0 !important;
}

html.iframe .formcontent {
  max-width: 960px !important;
}

html.iframe fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 0 24px 0 !important;
}

html.iframe legend {
  font-family: var(--gm-font-sans) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #1f1f1f !important;
  border-bottom: 2px solid #e0e2ec !important;
  padding-bottom: 8px !important;
  margin-bottom: 16px !important;
  width: 100% !important;
  display: block !important;
}

html.iframe .propform .form-group.row,
html.iframe .form-group.row {
  display: grid !important;
  grid-template-columns: 240px 1fr !important;
  align-items: start !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid #f1f3f4 !important;
  margin: 0 !important;
  gap: 16px !important;
}

html.iframe .col-form-label {
  font-family: var(--gm-font-sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1f1f1f !important;
  padding-top: 8px !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* Inputs, textareas, and selects */
html.iframe input.form-control,
html.iframe .custom-select,
html.iframe select.form-control {
  height: 38px !important;
  min-height: 38px !important;
  border: 1px solid #747775 !important;
  border-radius: 4px !important;
  padding: 0 12px !important;
  font-size: 14px !important;
  background-color: #ffffff !important;
  color: #1f1f1f !important;
  max-width: 480px !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  box-sizing: border-box !important;
}

html.iframe select.form-control,
html.iframe .custom-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23444746'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 18px !important;
  padding-right: 36px !important;
}

/* Fix textarea collapse: Allow signature/response editors to expand */
html.iframe textarea.form-control,
html.iframe textarea {
  height: auto !important;
  min-height: 120px !important;
  border: 1px solid #747775 !important;
  border-radius: 4px !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  background-color: #ffffff !important;
  color: #1f1f1f !important;
  max-width: 640px !important;
  width: 100% !important;
  resize: vertical !important;
  box-sizing: border-box !important;
}

html.iframe .form-control:focus,
html.iframe .custom-select:focus,
html.iframe textarea:focus {
  border-color: #0b57d0 !important;
  outline: 2px solid rgba(11, 87, 208, 0.2) !important;
  box-shadow: none !important;
}

/* Unhide Bootstrap custom controls and style with native accent */
html.iframe .custom-control-input {
  opacity: 1 !important;
  position: static !important;
  z-index: 1 !important;
  width: 18px !important;
  height: 18px !important;
  margin: 3px 8px 0 0 !important;
  accent-color: #0b57d0 !important;
  cursor: pointer !important;
  vertical-align: middle !important;
}

html.iframe .custom-control-label::before,
html.iframe .custom-control-label::after {
  display: none !important;
}

html.iframe .custom-control {
  padding-left: 0 !important;
  display: flex !important;
  align-items: center !important;
}

html.iframe .custom-control-label {
  font-size: 14px !important;
  color: #1f1f1f !important;
  cursor: pointer !important;
}

html.iframe .formcheck,
html.iframe input[type="checkbox"],
html.iframe input[type="radio"] {
  accent-color: #0b57d0 !important;
  width: 18px !important;
  height: 18px !important;
  cursor: pointer !important;
}

/* Gmail-style floating sticky Save Changes / Cancel Action Bar */
html.iframe .formbuttons {
  position: sticky !important;
  bottom: 0 !important;
  background-color: #ffffff !important;
  padding: 16px 24px !important;
  margin-top: 32px !important;
  border-top: 1px solid #e0e2ec !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  z-index: 10 !important;
  box-shadow: 0 -2px 8px rgba(60, 64, 67, 0.06) !important;
}

html.iframe .formbuttons .btn-primary,
html.iframe .btn-primary,
html.iframe .btn-gmail-save {
  background-color: #0b57d0 !important;
  color: #ffffff !important;
  border-radius: 100px !important;
  height: 40px !important;
  padding: 0 24px !important;
  font-family: var(--gm-font-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
  transition: background-color 0.15s ease, box-shadow 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

html.iframe .formbuttons .btn-primary:hover,
html.iframe .btn-primary:hover,
html.iframe .btn-gmail-save:hover {
  background-color: #0842a0 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

html.iframe .btn-gmail-cancel,
html.iframe .btn-secondary {
  background-color: transparent !important;
  color: #0b57d0 !important;
  border: 1px solid #747775 !important;
  border-radius: 100px !important;
  height: 40px !important;
  padding: 0 24px !important;
  font-family: var(--gm-font-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

html.iframe .btn-gmail-cancel:hover,
html.iframe .btn-secondary:hover {
  background-color: rgba(11, 87, 208, 0.08) !important;
}

/* Contacts View (body.task-addressbook) */
body.task-addressbook #layout-sidebar {
  order: 2 !important;
  width: 240px !important;
  min-width: 240px !important;
  background-color: #ffffff !important;
  border-radius: 16px !important;
  margin: 0 10px 12px 0 !important;
  border: none !important;
  overflow: hidden !important;
}

body.task-addressbook #layout-list {
  order: 3 !important;
  width: 320px !important;
  min-width: 280px !important;
  background-color: #ffffff !important;
  border-radius: 16px !important;
  margin: 0 10px 12px 0 !important;
  border: none !important;
  overflow: hidden !important;
}

body.task-addressbook #layout-content {
  order: 4 !important;
  flex: 1 1 auto !important;
  background-color: #ffffff !important;
  border-radius: 16px !important;
  margin: 0 0 12px 0 !important;
  border: none !important;
  overflow: hidden !important;
}

body.task-addressbook .header {
  background-color: #f2f6fc !important;
  border-bottom: 1px solid #e1e3e1 !important;
  height: 48px !important;
  min-height: 48px !important;
}

body.task-addressbook .listing li > a {
  border-radius: 0 16px 16px 0 !important;
  margin-right: 8px !important;
  color: #1f1f1f !important;
}

body.task-addressbook .listing li.selected > a {
  background-color: var(--gm-bg-pill-active) !important;
  color: var(--gm-fg-pill-active) !important;
  font-weight: 600 !important;
}

/* ============================================================================
   9. READING PANE TOOLBAR & EMAIL MESSAGE VIEW (Exact Gmail Architecture)
   ============================================================================ */
.gmail-reading-toolbar {
  height: 48px !important;
  min-height: 48px !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid #e0e2ec !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 16px !important;
  gap: 8px !important;
}

.gmail-back-to-list-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 9999px !important;
  border: none !important;
  background: transparent !important;
  color: #444746 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  margin-right: 8px !important;
}

.gmail-back-to-list-btn:hover {
  background-color: rgba(68, 71, 70, 0.08) !important;
  color: #1f1f1f !important;
}

#layout-content .header #mailtoolbar {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

#layout-content .header #mailtoolbar a.button {
  color: #444746 !important;
  height: 36px !important;
  width: 36px !important;
  padding: 0 !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#layout-content .header #mailtoolbar a.button:hover {
  background-color: rgba(68, 71, 70, 0.08) !important;
  color: #1f1f1f !important;
}

#layout-content .iframe-wrapper {
  flex: 1 1 auto !important;
  background: #ffffff !important;
  height: 100% !important;
  overflow: hidden !important;
}

#layout-content iframe#messagecontframe {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  background: #ffffff !important;
}

/* Inside Message Reading Frame (message.html / messagepreview) */
html.iframe body.task-mail.action-preview,
html.iframe body.task-mail.action-show,
body.task-mail.action-show {
  background-color: #ffffff !important;
  color: #1f1f1f !important;
  font-family: var(--gm-font-sans), Roboto, sans-serif !important;
  margin: 0 !important;
  padding: 0 !important;
}

#message-header {
  padding: 20px 24px 16px 24px !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid #f1f3f4 !important;
}

#message-header h2.subject {
  font-family: var(--gm-font-sans) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  color: #1f1f1f !important;
  margin: 0 0 16px 0 !important;
  line-height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

#message-header .header {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  position: relative !important;
}

#message-header .contactphoto {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 50% !important;
  background-color: #0b57d0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  overflow: hidden !important;
}

#message-header .header-content {
  flex: 1 1 auto !important;
}

#message-header .header-summary {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

#message-header .from-name {
  font-family: var(--gm-font-sans) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1f1f1f !important;
}

#message-header .from-address {
  font-size: 12px !important;
  color: #5f6368 !important;
}

#message-header .date {
  margin-left: auto !important;
  font-size: 12px !important;
  color: #5f6368 !important;
}

#message-header .to-list {
  font-size: 12px !important;
  color: #5f6368 !important;
  margin-top: 2px !important;
}

#messagebody,
.message-part {
  background-color: #ffffff !important;
  color: #1f1f1f !important;
  padding: 24px 32px !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  font-family: Roboto, -apple-system, sans-serif !important;
}

#messagebody img {
  max-width: 100% !important;
  height: auto !important;
}

/* ============================================================================
   10. RIGHT 56px COMPANION RAIL (#gmail-right-rail across ALL views)
   ============================================================================ */
#gmail-right-rail {
  order: 10 !important;
  width: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  background-color: var(--gm-bg-canvas) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding-top: 8px !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
}

.gmail-rail-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 9999px !important;
  border: none !important;
  background: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  text-decoration: none !important;
  padding: 0 !important;
}

.gmail-rail-btn:hover {
  background-color: rgba(68, 71, 70, 0.08) !important;
}

.gmail-rail-badge {
  width: 22px !important;
  height: 22px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--gm-font-sans) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.gmail-rail-divider {
  width: 20px !important;
  height: 1px !important;
  background-color: #dadce0 !important;
  margin: 4px 0 !important;
}

/* Search Options Dropdown (#searchmenu) positioned cleanly under the search pill */
#searchmenu {
  position: fixed !important;
  top: 58px !important;
  left: 256px !important;
  width: 680px !important;
  max-width: calc(100vw - 320px) !important;
  background: #ffffff !important;
  border-radius: 0 0 16px 16px !important;
  box-shadow: 0 4px 12px rgba(60, 64, 67, 0.25) !important;
  border: 1px solid #dadce0 !important;
  padding: 16px 20px !important;
  z-index: 2000 !important;
}

/* ============================================================================
   11. ACCESSIBILITY, FOCUS-VISIBLE RINGS, & TOUCH TARGETS
   ============================================================================ */
:focus-visible {
  outline: 2px solid #0b57d0 !important;
  outline-offset: 2px !important;
}

button:focus-visible,
a.button:focus-visible,
.gmail-cat-tab:focus-visible,
.gmail-settings-tab:focus-visible,
.gmail-action-btn:focus-visible,
.gmail-rail-btn:focus-visible {
  outline: 2px solid #0b57d0 !important;
  outline-offset: 2px !important;
}

/* Touch Target Floor: Ensure minimum 40-44px click area on controls */
.gmail-action-btn,
.gmail-back-to-list-btn,
.gmail-rail-btn {
  min-width: 40px !important;
  min-height: 40px !important;
}

/* ============================================================================
   12. RESPONSIVE BREAKPOINTS (Tablets & Mobile Viewports)
   ============================================================================ */
@media (max-width: 1024px) {
  #gmail-right-rail {
    display: none !important;
  }
  
  body.task-settings #layout {
    grid-template-columns: 200px 1fr !important;
  }
  
  body.task-settings #layout-menu {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
  }
  
  .gmail-settings-tabs-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

@media (max-width: 768px) {
  body.task-settings #layout {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto 1fr !important;
    grid-template-areas:
      "stage"
      "sidebar"
      "content" !important;
  }
  
  body.task-settings #layout-menu {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 180px !important;
  }
  
  html.iframe .propform .form-group.row,
  html.iframe .form-group.row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  
  html.iframe .col-form-label {
    padding-top: 0 !important;
  }
  
  #messagelist tbody tr.message td.subject > span.fromto {
    width: 110px !important;
    min-width: 90px !important;
  }
  
  #messagelist tbody tr.message > td.subject {
    padding-right: 110px !important;
  }
}

/* ============================================================================
   13. MODERN GOOGLE / GMAIL LOGIN INTERFACE (body.task-login)
   Clean centered card, Material 3 floating appearance, zero marketing fluff
   ============================================================================ */
body.task-login {
  background-color: #f0f4f9 !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--gm-font-sans), Roboto, -apple-system, sans-serif !important;
  margin: 0 !important;
  padding: 24px 16px !important;
  box-sizing: border-box !important;
}

body.task-login #layout {
  position: static !important;
  width: 100% !important;
  max-width: 448px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
  display: block !important;
  height: auto !important;
  overflow: visible !important;
}

body.task-login #layout-content {
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  position: static !important;
}

/* Hide legacy elements */
body.task-login #layout-content > img#logo,
body.task-login #layout-content > h1.voice,
body.task-login #gmail-right-rail,
body.task-login #layout-menu,
body.task-login #gmail-topbar {
  display: none !important;
}

.gmail-auth-stage {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.gmail-auth-card {
  width: 100% !important;
  background-color: #ffffff !important;
  border-radius: 28px !important;
  padding: 40px 36px 36px 36px !important;
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.12), 0 4px 8px 3px rgba(60, 64, 67, 0.08) !important;
  box-sizing: border-box !important;
}

.gmail-auth-header {
  text-align: left !important;
  margin-bottom: 28px !important;
}

.gmail-auth-logo {
  display: inline-flex !important;
  align-items: center !important;
  margin-bottom: 16px !important;
}

.gmail-auth-title {
  font-family: var(--gm-font-sans) !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  color: #1f1f1f !important;
  line-height: 32px !important;
  margin: 0 0 6px 0 !important;
}

.gmail-auth-subtitle {
  font-family: var(--gm-font-sans) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #444746 !important;
  line-height: 24px !important;
  margin: 0 !important;
}

/* Roundcube login form styling inside card */
body.task-login form#login-form {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.task-login form#login-form table,
body.task-login form#login-form tbody {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.task-login form#login-form tr.form-group {
  display: flex !important;
  flex-direction: column !important;
  margin-bottom: 16px !important;
  width: 100% !important;
}

body.task-login form#login-form td.title {
  display: none !important;
}

body.task-login form#login-form td.data {
  width: 100% !important;
  padding: 0 !important;
}

body.task-login .input-group {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
}

body.task-login .input-group-prepend {
  display: none !important; /* Eliminate decorative input icons */
}

body.task-login input.form-control {
  height: 52px !important;
  width: 100% !important;
  border: 1px solid #747775 !important;
  border-radius: 4px !important;
  padding: 0 16px !important;
  font-family: var(--gm-font-sans) !important;
  font-size: 16px !important;
  color: #1f1f1f !important;
  background-color: #ffffff !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

body.task-login input.form-control:focus {
  border-color: #0b57d0 !important;
  outline: 2px solid rgba(11, 87, 208, 0.25) !important;
  box-shadow: none !important;
}

body.task-login input.form-control::placeholder {
  color: #747775 !important;
  font-size: 15px !important;
}

/* Submit Action Button ("Next" or "Sign in") */
body.task-login p.formbuttons,
body.task-login .formbuttons {
  margin-top: 28px !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  width: 100% !important;
  background: transparent !important;
  border: none !important;
}

body.task-login button#rcmloginsubmit,
body.task-login .button.mainaction.submit {
  height: 40px !important;
  min-width: 96px !important;
  width: auto !important; /* Prevent 100% full-width stretch */
  padding: 0 24px !important;
  border-radius: 100px !important;
  background-color: #0b57d0 !important;
  color: #ffffff !important;
  border: none !important;
  font-family: var(--gm-font-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-transform: capitalize !important; /* Ensure sentence case "Next" */
  letter-spacing: 0.1px !important;
  cursor: pointer !important;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15) !important;
  transition: background-color 0.15s ease, box-shadow 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.task-login button#rcmloginsubmit:hover,
body.task-login .button.mainaction.submit:hover {
  background-color: #0842a0 !important;
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15) !important;
}

/* Toast session notification positioning */
body.task-login #messagestack {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  left: auto !important;
  top: auto !important;
  max-width: 400px !important;
  z-index: 9999 !important;
}

body.task-login #messagestack div {
  border-radius: 8px !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2) !important;
  font-size: 14px !important;
  padding: 12px 16px !important;
}

/* Sub-footer below card */
.gmail-auth-subfooter {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 16px !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
}

.gmail-auth-locale {
  font-family: var(--gm-font-sans) !important;
  font-size: 12px !important;
  color: #444746 !important;
}

.gmail-auth-links {
  display: flex !important;
  gap: 16px !important;
}

.gmail-auth-links a {
  font-family: var(--gm-font-sans) !important;
  font-size: 12px !important;
  color: #444746 !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.gmail-auth-links a:hover {
  color: #1f1f1f !important;
  text-decoration: underline !important;
}

@media (max-width: 480px) {
  body.task-login {
    background-color: #ffffff !important;
    padding: 16px !important;
    align-items: flex-start !important;
  }
  
  .gmail-auth-card {
    box-shadow: none !important;
    padding: 24px 0 !important;
    border-radius: 0 !important;
  }
  
  .gmail-auth-subfooter {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
    padding: 0 !important;
  }
}