/* ==========================================================================
   OBSIDIAN MAIL PREMIUM THEME FOR ROUNDCUBE (MATCHING STITCH DESIGN SYSTEM)
   ========================================================================== */

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

html, body, #layout {
  background-color: #0b1326 !important;
  color: #dae2fd !important;
  font-family: 'Inter', sans-serif !important;
}

/* Left Sidebar task menu (#layout-menu) */
#layout-menu {
  background-color: #060e20 !important;
  border-right: 1px solid #2d3449 !important;
  width: 72px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 20px 0 !important;
  gap: 20px !important;
  height: 100vh !important;
  position: static !important;
  flex-shrink: 0 !important;
}

#layout-menu a {
  width: 46px !important;
  height: 46px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #8c909f !important;
  background: transparent !important;
  transition: all 0.2s ease !important;
  font-size: 0 !important;
}

#layout-menu a.mail::before { content: '\f0e0'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 20px; }
#layout-menu a.contacts::before { content: '\f2c2'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 20px; }
#layout-menu a.settings::before { content: '\f013'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 20px; }
#layout-menu a.about::before { content: '\f05a'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 20px; }
#layout-menu a.logout::before { content: '\f2f5'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 20px; }

#layout-menu a:hover, #layout-menu a.selected {
  color: #adc6ff !important;
  background: rgba(173, 198, 255, 0.1) !important;
  box-shadow: 0 0 10px rgba(173, 198, 255, 0.15) !important;
}

/* Sidebar navigation (#layout-sidebar) */
#layout-sidebar, .sidebar {
  width: 240px !important;
  background-color: #0f172a !important;
  border-right: 1px solid #2d3449 !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-shrink: 0 !important;
}

/* Floating compose button shape */
#rcmbtn_compose {
  background: #3B82F6 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  padding: 12px 24px !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.25) !important;
  margin: 10px 0 20px 0 !important;
  border: none !important;
  transition: all 0.2s !important;
}
#rcmbtn_compose:hover {
  background: #2563eb !important;
  transform: translateY(-1px) !important;
}

/* Folders list styling */
.folder-list li a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 14px !important;
  color: #c2c6d6 !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  margin-bottom: 4px !important;
  transition: all 0.2s !important;
}

.folder-list li a:hover {
  background: rgba(255, 255, 255, 0.03) !important;
  color: #ffffff !important;
}

.folder-list li.selected a {
  background: rgba(59, 130, 246, 0.1) !important;
  color: #adc6ff !important;
  font-weight: 600 !important;
}

/* Middle Mail list panel (#layout-list) */
#layout-list {
  background-color: #0b1326 !important;
  border-right: 1px solid #2d3449 !important;
  width: 360px !important;
  flex-shrink: 0 !important;
}

/* Search bar */
.searchbar, #searchfilter {
  background-color: #0f172a !important;
  border: 1px solid #2d3449 !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  color: #ffffff !important;
  margin: 15px !important;
}

/* Mail row list items */
.messagelist tr {
  background-color: transparent !important;
  border-bottom: 1px solid #2d3449 !important;
  transition: background-color 0.15s ease !important;
}

.messagelist tr:hover {
  background-color: rgba(255, 255, 255, 0.02) !important;
}

.messagelist tr.selected {
  background-color: rgba(99, 102, 241, 0.1) !important;
  border-left: 3px solid #6366F1 !important;
}

.messagelist td {
  padding: 12px 15px !important;
}

/* Subject & Unread Styling */
.messagelist td.subject a {
  font-weight: 500 !important;
  color: #c2c6d6 !important;
}

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

/* Blue dot for unread messages */
.messagelist tr.unread td.subject::before {
  content: '•' !important;
  color: #3B82F6 !important;
  font-size: 24px !important;
  line-height: 0 !important;
  vertical-align: middle !important;
  margin-right: 6px !important;
  display: inline-block !important;
}

/* Right Detail Pane (#layout-content) */
#layout-content {
  background-color: #0f172a !important;
}

.message-headers {
  background-color: #0b1326 !important;
  border-bottom: 1px solid #2d3449 !important;
  padding: 24px !important;
  border-radius: 16px 16px 0 0 !important;
  margin: 16px 16px 0 16px !important;
}

.message-body {
  background-color: #1e293b !important;
  border: 1px solid #2d3449 !important;
  border-radius: 0 0 16px 16px !important;
  margin: 0 16px 16px 16px !important;
  padding: 24px !important;
  color: #dae2fd !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* Header toolbar overrides */
.toolbar, .header-bar {
  background-color: #0f172a !important;
  border-bottom: 1px solid #2d3449 !important;
}

/* Hide default product name text overlays */
#logo, .popover-header {
  display: none !important;
}