/* ============================================
   DT Growth Partners - Roundcube Dark Theme
   Full black + blue accent gradients
   ============================================ */

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

:root {
  --bg-primary: #0A0A0A;
  --bg-card: #0A0A0A;
  --bg-elevated: #111111;
  --foreground: #FAFAFA;
  --primary: #0080FF;
  --accent: #1173D4;
  --muted-fg: #666666;
  --border: rgba(255, 255, 255, 0.06);
  --input-bg: rgba(255, 255, 255, 0.04);
  --glow: 0 0 20px rgba(0, 128, 255, 0.15);
  --gradient-blue: linear-gradient(135deg, #0080FF, #26BDF0);
  --gradient-subtle: linear-gradient(135deg, rgba(0,128,255,0.08), rgba(38,189,240,0.04));
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --font: 'Inter', -apple-system, sans-serif;
}

/* ===== GLOBAL ===== */
body, html,
.ui-widget-content,
#layout {
  font-family: var(--font) !important;
  background: var(--bg-primary) !important;
  color: var(--foreground) !important;
}

* {
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* ===== LOGIN ===== */
#login-form {
  background: var(--bg-primary) !important;
  border: 0.8px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.6) !important;
}
#login-form .logo {
  text-align: center;
  padding: 28px 0 16px 0;
}
#login-form .logo img {
  max-height: 70px;
  width: auto;
}
#login-form .formcontent,
#login-form table {
  background: transparent !important;
}
#login-form label,
#login-form .label {
  color: var(--muted-fg) !important;
  font-size: 13px !important;
  font-family: var(--font) !important;
}
#login-form input[type="text"],
#login-form input[type="password"],
#login-form select,
#login-form .input-group input {
  background: var(--input-bg) !important;
  border: 0.8px solid var(--border) !important;
  border-radius: 10px !important;
  color: var(--foreground) !important;
  padding: 10px 12px !important;
  font-family: var(--font) !important;
}
#login-form input:focus,
#login-form select:focus {
  border-color: var(--primary) !important;
  box-shadow: var(--glow) !important;
  outline: none !important;
}
#login-form #rcmloginsubmit,
#login-form .mainaction,
#login-form button[type="submit"] {
  background: var(--gradient-blue) !important;
  border: none !important;
  border-radius: 10px !important;
  color: #0A0A0A !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 10px 20px !important;
  font-family: var(--font) !important;
  cursor: pointer;
  text-shadow: none !important;
}
#login-form #rcmloginsubmit:hover,
#login-form .mainaction:hover {
  box-shadow: var(--glow), 0 0 40px rgba(0,128,255,0.25) !important;
  filter: brightness(1.1);
}

/* ===== LAYOUT STRUCTURE ===== */
#layout > .menu,
#layout > .sidebar,
#layout > .list,
#layout > .content,
.toolbar,
#taskmenu,
.header,
.footer,
#layout .header,
#layout > .content > .header,
#layout-menu,
.layout-menu {
  background: var(--bg-primary) !important;
  border-color: var(--border) !important;
}

/* Sidebar */
#layout > .sidebar,
#mailboxlist-container,
.sidebar {
  background: var(--bg-primary) !important;
  border-right: 0.8px solid var(--border) !important;
}

/* ===== NAVIGATION / TOOLBAR ===== */
.toolbar,
.toolbar a,
.toolbar button,
#taskmenu a {
  background: var(--bg-primary) !important;
  color: var(--foreground) !important;
  font-family: var(--font) !important;
}
.toolbar a:hover,
.toolbar button:hover,
#taskmenu a:hover {
  background: var(--gradient-subtle) !important;
}
.toolbar a.selected,
.toolbar button.selected,
#taskmenu a.selected {
  background: var(--gradient-subtle) !important;
  color: var(--primary) !important;
}

/* ===== ICONS - blue gradient ===== */
.toolbar a::before,
.toolbar button::before,
#taskmenu a::before,
.toolbarmenu a::before,
.listing a::before,
#mailboxlist a::before,
a.button::before,
.menu a::before,
.sidebar a::before {
  background: var(--gradient-blue) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Icon SVG filters for blue tint */
.toolbar .icon,
#taskmenu .icon,
.menu .icon,
.sidebar .icon {
  filter: brightness(0) saturate(100%) invert(38%) sepia(93%) saturate(1352%) hue-rotate(196deg) brightness(100%) contrast(104%) !important;
}

/* ===== FOLDER LIST ===== */
#mailboxlist li a,
.treelist li a,
.listing li a {
  color: var(--foreground) !important;
  font-family: var(--font) !important;
  background: transparent !important;
  border-radius: 8px !important;
}
#mailboxlist li a:hover,
.treelist li a:hover,
.listing li a:hover {
  background: var(--gradient-subtle) !important;
}
#mailboxlist li.selected > a,
.treelist li.selected > a,
.listing li.selected > a,
#mailboxlist li a.focused,
.listing li a.focused {
  background: rgba(0, 128, 255, 0.1) !important;
  border-left: 2px solid var(--primary) !important;
}

/* ===== MESSAGE LIST ===== */
.messagelist,
#message-list,
.messagelist thead,
#message-list thead {
  background: var(--bg-primary) !important;
}
.messagelist tr,
#message-list tr {
  background: var(--bg-primary) !important;
  border-bottom: 0.8px solid var(--border) !important;
}
.messagelist tr:hover,
#message-list tr:hover {
  background: rgba(0, 128, 255, 0.04) !important;
}
.messagelist tr.selected,
#message-list tr.selected {
  background: rgba(0, 128, 255, 0.08) !important;
}
.messagelist td,
#message-list td,
.messagelist th,
#message-list th {
  color: var(--foreground) !important;
  font-family: var(--font) !important;
  border-color: var(--border) !important;
}
.messagelist td.subject span {
  color: var(--foreground) !important;
}
.messagelist td.date,
.messagelist td.size,
.messagelist td.fromto {
  color: var(--muted-fg) !important;
}
.messagelist tr.unread td.subject span {
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

/* ===== MESSAGE VIEW ===== */
.messageheaderbox,
#message-header {
  background: var(--bg-primary) !important;
  border: 0.8px solid var(--border) !important;
  border-radius: 12px !important;
}
.messageheaderbox .header-title,
.messageheaderbox td.header-title {
  color: var(--muted-fg) !important;
}
.messageheaderbox td.header {
  color: var(--foreground) !important;
}

/* Message body iframe bg */
#messagebody,
.message-part {
  background: var(--bg-primary) !important;
}

/* ===== BUTTONS ===== */
.button,
a.button,
input.button {
  font-family: var(--font) !important;
  border-radius: 10px !important;
  border: 0.8px solid var(--border) !important;
  background: var(--bg-primary) !important;
  color: var(--foreground) !important;
}
.button:hover,
a.button:hover {
  background: var(--gradient-subtle) !important;
  border-color: rgba(0, 128, 255, 0.2) !important;
}
.button.mainaction,
a.button.mainaction {
  background: var(--gradient-blue) !important;
  color: #0A0A0A !important;
  border: none !important;
  font-weight: 600 !important;
}
.button.mainaction:hover {
  box-shadow: var(--glow) !important;
  filter: brightness(1.1);
}

/* ===== COMPOSE ===== */
#composebody,
textarea,
.mce-content-body {
  background: var(--bg-primary) !important;
  color: var(--foreground) !important;
  border: 0.8px solid var(--border) !important;
  border-radius: 10px !important;
  font-family: var(--font) !important;
}
#compose-content input,
#compose-content select,
.compose-header input,
.compose-header select {
  background: var(--input-bg) !important;
  border: 0.8px solid var(--border) !important;
  border-radius: 10px !important;
  color: var(--foreground) !important;
  font-family: var(--font) !important;
}
#compose-content input:focus,
.compose-header input:focus {
  border-color: var(--primary) !important;
  box-shadow: var(--glow) !important;
}

/* ===== BADGES / UNREAD ===== */
.unreadcount,
span.unreadcount {
  background: var(--gradient-blue) !important;
  color: #0A0A0A !important;
  border: none !important;
  border-radius: 9999px !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  min-width: 18px;
  text-align: center;
}

/* ===== SEARCH ===== */
.searchbar input,
#quicksearchbar input,
.searchbox input {
  background: var(--input-bg) !important;
  border: 0.8px solid var(--border) !important;
  border-radius: 10px !important;
  color: var(--foreground) !important;
  font-family: var(--font) !important;
}
.searchbar input:focus,
#quicksearchbar input:focus {
  border-color: var(--primary) !important;
  box-shadow: var(--glow) !important;
}

/* ===== DIALOGS / POPUPS ===== */
.popupmenu,
.ui-dialog,
.ui-widget-content,
.popover,
.dropdown-menu {
  background: var(--bg-primary) !important;
  border: 0.8px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
  color: var(--foreground) !important;
}
.popupmenu li a,
.toolbarmenu li a,
.dropdown-menu a {
  color: var(--foreground) !important;
}
.popupmenu li a:hover,
.toolbarmenu li a:hover,
.dropdown-menu a:hover {
  background: var(--gradient-subtle) !important;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.15);
}

/* ===== LINKS ===== */
a {
  color: var(--primary) !important;
}
a:hover {
  color: #26BDF0 !important;
}

/* ===== LOGO IN APP ===== */
#layout > .menu .logo img,
.logo img {
  max-height: 36px;
  width: auto;
}

/* ===== BLUE LINE SEPARATOR ACCENT ===== */
#layout > .sidebar::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,128,255,0), rgba(0,128,255,0.3), rgba(0,128,255,0));
  pointer-events: none;
}

/* ===== MISC / CLEANUP ===== */
.formcontent,
.propform,
.formcontainer,
table.propform td,
table.propform th,
.boxcontent,
.scroller,
#preferences-box,
.listbox,
.contentbox {
  background: var(--bg-primary) !important;
  color: var(--foreground) !important;
}
.propform td,
.propform th {
  border-color: var(--border) !important;
}

/* Watermark/empty state */
.watermark {
  opacity: 0.03 !important;
}

/* Selection text */
::selection {
  background: rgba(0, 128, 255, 0.3);
  color: #FFFFFF;
}