/* GamerFrame Mail — Futuristic Dark Theme */

:root {
  --gf-bg-primary: #0a0e14;
  --gf-bg-secondary: #111820;
  --gf-bg-surface: #161d27;
  --gf-bg-elevated: #1a2332;
  --gf-border: #1e2a3a;
  --gf-border-subtle: #15202d;
  --gf-text-primary: #c8d6e5;
  --gf-text-secondary: #6b7f95;
  --gf-text-muted: #3d5068;
  --gf-accent: #00d4aa;
  --gf-accent-hover: #00f0c0;
  --gf-accent-dim: rgba(0, 212, 170, 0.12);
  --gf-danger: #e84040;
  --gf-success: #00d4aa;
  --gf-warning: #e89040;
  --gf-glow: 0 0 20px rgba(0, 212, 170, 0.15);
}

/* === BASE === */
body, html {
  background: var(--gf-bg-primary) !important;
  color: var(--gf-text-primary) !important;
}

#layout, #layout > div {
  background: var(--gf-bg-primary) !important;
}

/* === TOOLBAR === */
.header, #taskmenu, .toolbar,
#layout > .sidebar .header,
#layout > .list .header,
#layout > .content .header {
  background: var(--gf-bg-secondary) !important;
  border-bottom: 1px solid var(--gf-border) !important;
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.4) !important;
}

/* === SIDEBAR / FOLDER LIST === */
#layout > .sidebar,
#mailboxlist-container,
.folderlist-widget {
  background: var(--gf-bg-secondary) !important;
  border-right: 1px solid var(--gf-border) !important;
}

#mailboxlist li a,
#mailboxlist li div.mailbox,
.folderlist-widget li a {
  color: var(--gf-text-secondary) !important;
  transition: all 0.15s ease !important;
}

#mailboxlist li a:hover,
#mailboxlist li div.mailbox:hover,
.folderlist-widget li a:hover {
  color: var(--gf-text-primary) !important;
  background: var(--gf-accent-dim) !important;
}

#mailboxlist li.selected > a,
#mailboxlist li.selected > div.mailbox,
.folderlist-widget li.selected > a {
  background: var(--gf-accent-dim) !important;
  color: var(--gf-accent) !important;
  border-left: 2px solid var(--gf-accent) !important;
}

/* Unread count badges */
#mailboxlist .unreadcount,
.mailbox .unreadcount {
  background: var(--gf-accent) !important;
  color: var(--gf-bg-primary) !important;
  font-weight: 600 !important;
}

/* === MESSAGE LIST === */
#layout > .list,
#messagelist-container,
.messagelist {
  background: var(--gf-bg-primary) !important;
}

#messagelist tr td,
.messagelist tr td {
  border-bottom: 1px solid var(--gf-border-subtle) !important;
  color: var(--gf-text-primary) !important;
}

#messagelist tr:hover td,
.messagelist tr:hover td {
  background: var(--gf-bg-surface) !important;
}

#messagelist tr.selected td,
.messagelist tr.selected td {
  background: var(--gf-accent-dim) !important;
  border-left: 2px solid var(--gf-accent) !important;
}

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

#messagelist .subject a {
  color: var(--gf-text-primary) !important;
}

#messagelist tr.unread .subject a {
  color: #ffffff !important;
}

#messagelist .date, #messagelist .fromto {
  color: var(--gf-text-secondary) !important;
}

/* === CONTENT / MESSAGE VIEW === */
#layout > .content {
  background: var(--gf-bg-primary) !important;
}

.message-header, .message-headers {
  background: var(--gf-bg-surface) !important;
  border-bottom: 1px solid var(--gf-border) !important;
}

.message-header .header-title,
.message-header td.header-title {
  color: var(--gf-text-secondary) !important;
}

.message-header td.header {
  color: var(--gf-text-primary) !important;
}

/* === BUTTONS === */
a.button, button.btn,
.toolbar a, .toolbar button,
.toolbarmenu li a {
  color: var(--gf-text-secondary) !important;
  transition: all 0.15s ease !important;
}

a.button:hover, button.btn:hover,
.toolbar a:hover, .toolbar button:hover,
.toolbarmenu li a:hover {
  color: var(--gf-accent) !important;
  background: var(--gf-accent-dim) !important;
}

.btn-primary, a.btn-primary {
  background: var(--gf-accent) !important;
  border-color: var(--gf-accent) !important;
  color: var(--gf-bg-primary) !important;
  font-weight: 600 !important;
  box-shadow: var(--gf-glow) !important;
}

.btn-primary:hover, a.btn-primary:hover {
  background: var(--gf-accent-hover) !important;
  border-color: var(--gf-accent-hover) !important;
  box-shadow: 0 0 25px rgba(0, 212, 170, 0.25) !important;
}

/* === FORMS / INPUTS === */
input[type="text"], input[type="password"], input[type="email"],
input[type="search"], textarea, select,
.form-control {
  background: var(--gf-bg-surface) !important;
  border: 1px solid var(--gf-border) !important;
  color: var(--gf-text-primary) !important;
  transition: border-color 0.15s ease !important;
}

input:focus, textarea:focus, select:focus,
.form-control:focus {
  border-color: var(--gf-accent) !important;
  box-shadow: 0 0 0 2px var(--gf-accent-dim) !important;
  outline: none !important;
}

/* === LOGIN PAGE === */
#login-form {
  background: var(--gf-bg-elevated) !important;
  border: 1px solid var(--gf-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5), var(--gf-glow) !important;
}

#login-form .box-inner {
  background: transparent !important;
}

#login-form #rcmloginsubmit {
  background: var(--gf-accent) !important;
  border: none !important;
  color: var(--gf-bg-primary) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  box-shadow: var(--gf-glow) !important;
  transition: all 0.2s ease !important;
}

#login-form #rcmloginsubmit:hover {
  box-shadow: 0 0 30px rgba(0, 212, 170, 0.3) !important;
  transform: translateY(-1px) !important;
}

#login-form .custom-logo {
  filter: brightness(0.9) !important;
}

/* === MENUS / DROPDOWNS === */
.popupmenu, .dropdown-menu,
.toolbarmenu, .ui-dialog {
  background: var(--gf-bg-elevated) !important;
  border: 1px solid var(--gf-border) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5) !important;
}

.popupmenu li a, .dropdown-menu li a,
.toolbarmenu li a {
  color: var(--gf-text-primary) !important;
}

.popupmenu li a:hover, .dropdown-menu li a:hover {
  background: var(--gf-accent-dim) !important;
  color: var(--gf-accent) !important;
}

/* === SCROLLBAR === */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--gf-bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--gf-border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gf-text-muted);
}

/* === SEARCH BAR === */
.searchbar, #quicksearchbar {
  background: var(--gf-bg-surface) !important;
  border: 1px solid var(--gf-border) !important;
}

.searchbar input, #quicksearchbar input {
  background: transparent !important;
  color: var(--gf-text-primary) !important;
}

/* === QUOTA BAR === */
.quota-widget .bar {
  background: var(--gf-bg-surface) !important;
}

.quota-widget .bar .value {
  background: var(--gf-accent) !important;
}

/* === LINKS === */
a {
  color: var(--gf-accent) !important;
}

a:hover {
  color: var(--gf-accent-hover) !important;
}

/* === WATERMARK / EMPTY STATE === */
#messagecontframe, .watermark {
  background: var(--gf-bg-primary) !important;
}

/* === TABLE HEADERS === */
.listing thead td, .listing thead th,
#messagelist thead td {
  background: var(--gf-bg-secondary) !important;
  color: var(--gf-text-muted) !important;
  text-transform: uppercase !important;
  font-size: 0.7em !important;
  letter-spacing: 1px !important;
  border-bottom: 1px solid var(--gf-border) !important;
}

/* === DIALOG / MODAL === */
.ui-dialog {
  background: var(--gf-bg-elevated) !important;
  border: 1px solid var(--gf-border) !important;
}

.ui-dialog .ui-dialog-titlebar {
  background: var(--gf-bg-secondary) !important;
  color: var(--gf-text-primary) !important;
}

/* === COMPOSE === */
#composebody, .mce-content-body {
  background: var(--gf-bg-surface) !important;
  color: var(--gf-text-primary) !important;
}

/* === SUBTLE ANIMATIONS === */
#mailboxlist li a,
#messagelist tr td,
.toolbar a, .toolbar button,
.btn, a.button {
  transition: all 0.15s ease !important;
}

/* === PRODUCT NAME ON LOGIN === */
#login-form .brand,
.login-title, h1.voice {
  color: var(--gf-accent) !important;
  text-shadow: 0 0 20px rgba(0, 212, 170, 0.3) !important;
  letter-spacing: 2px !important;
}