/* Supernova Mail — brand-matched dark theme */

:root {
  color-scheme: dark;
  --sn-bg: #08090e;
  --sn-surface: #101219;
  --sn-raised: #141722;
  --sn-soft: #0c0e14;
  --sn-text: #f2f1f7;
  --sn-muted: #9a9ba8;
  --sn-subtle: #666977;
  --sn-border: rgba(221, 220, 244, .105);
  --sn-border-strong: rgba(221, 220, 244, .17);
  --sn-violet: #9684ff;
  --sn-violet-bright: #b1a4ff;
}

html,
body {
  color-scheme: dark;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(121, 101, 232, .09), transparent 40%),
    var(--sn-bg) !important;
  color: var(--sn-text) !important;
  font-family: "DM Sans", Inter, system-ui, sans-serif;
}

#layout,
#layout-menu,
#layout-sidebar,
#layout-list,
#layout-content {
  color: var(--sn-text) !important;
  border-color: var(--sn-border) !important;
}

#layout-menu,
#layout-sidebar {
  background: rgba(12, 14, 20, .96) !important;
}

#layout-list,
#layout-content {
  background: rgba(16, 18, 25, .94) !important;
}

#layout-menu,
#layout-sidebar,
#layout-list {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.toolbar,
.header,
.header-title,
.listing thead,
.listing th {
  background-color: var(--sn-soft) !important;
  color: var(--sn-text) !important;
  border-color: var(--sn-border) !important;
}

a {
  color: var(--sn-violet-bright);
  transition: color .18s ease, background-color .18s ease;
}

a:hover,
a:focus {
  color: #d5ccff;
}

button,
.btn,
.button,
.toolbar a,
.menu a,
#layout-menu a,
#layout-sidebar a,
.listing tbody tr {
  transition:
    color .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

#layout-menu a:hover,
#layout-sidebar a:hover,
.toolbar a:hover,
.menu a:hover,
.listing tbody tr:hover {
  background-color: rgba(150, 132, 255, .065) !important;
}

.selected,
.focused,
.active,
.listing tr.selected,
.listing tr.focused {
  background-color: rgba(150, 132, 255, .11) !important;
}

.popup,
.popover,
.dropdown-menu,
.modal-content,
.listbox {
  background: var(--sn-raised) !important;
  color: var(--sn-text) !important;
  border: 1px solid var(--sn-border-strong) !important;
  border-radius: 10px !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28) !important;
}

input,
select,
textarea,
.form-control {
  background-color: var(--sn-soft) !important;
  color: var(--sn-text) !important;
  border-color: var(--sn-border-strong) !important;
  border-radius: 7px !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  border-color: rgba(150, 132, 255, .65) !important;
  box-shadow: 0 0 0 3px rgba(150, 132, 255, .10) !important;
  outline: none;
}

.btn-primary,
.button.primary,
input[type="submit"] {
  color: #11101b !important;
  background: linear-gradient(135deg, #b2a5ff, #927dff) !important;
  border: 1px solid rgba(197, 187, 255, .5) !important;
}

.btn-primary:hover,
.button.primary:hover,
input[type="submit"]:hover {
  background: linear-gradient(135deg, #c1b7ff, #a28fff) !important;
  box-shadow: 0 5px 18px rgba(118, 98, 226, .18) !important;
  transform: translateY(-1px);
}

.btn,
.button,
button {
  border-radius: 7px;
}

.btn:hover,
.button:hover,
button:hover {
  border-color: var(--sn-border-strong);
}

table,
th,
td,
.listing,
.listing th,
.listing td,
hr {
  border-color: var(--sn-border) !important;
}

h1, h2, h3, h4, h5, label, legend {
  color: var(--sn-text);
}

small,
.hint,
.secondary,
.text-muted,
.form-text {
  color: var(--sn-muted) !important;
}

::selection {
  color: #fff;
  background: rgba(150, 132, 255, .34);
}

:focus-visible {
  outline: 2px solid var(--sn-violet-bright);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

@media (max-width: 768px) {
  #layout-menu,
  #layout-sidebar,
  #layout-list {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Supernova — icon, toolbar and interaction refinement */

:root {
  --sn-icon: #aaa2c7;
  --sn-icon-hover: #ded6ff;
  --sn-icon-active: #b4a6ff;
  --sn-icon-surface: rgba(255, 255, 255, .025);
  --sn-icon-hover-surface: rgba(150, 132, 255, .085);
}

/* Toolbar buttons: consistent size, alignment and hit area */
.toolbar a,
.toolbar button,
.toolbar .button,
.action-buttons a,
.action-buttons button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  color: var(--sn-icon) !important;
  background: transparent !important;
  transition:
    color .16s ease,
    background-color .16s ease,
    border-color .16s ease,
    transform .16s ease !important;
}

.toolbar a:hover,
.toolbar button:hover,
.toolbar .button:hover,
.action-buttons a:hover,
.action-buttons button:hover {
  color: var(--sn-icon-hover) !important;
  background: var(--sn-icon-hover-surface) !important;
  border-color: var(--sn-border) !important;
}

/* Existing icon glyphs and SVGs */
.toolbar a::before,
.toolbar button::before,
.toolbar a svg,
.toolbar button svg,
.taskbar a::before,
.taskbar a svg {
  transition: color .16s ease, opacity .16s ease;
}

.toolbar a svg,
.toolbar button svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Task navigation */
.taskbar a {
  color: var(--sn-icon) !important;
  transition:
    color .16s ease,
    background-color .16s ease !important;
}

.taskbar a:hover {
  color: var(--sn-icon-hover) !important;
  background: var(--sn-icon-hover-surface) !important;
}

.taskbar a.selected,
.taskbar a.active {
  color: var(--sn-icon-active) !important;
  background: rgba(150, 132, 255, .10) !important;
}

/* Folder list and settings navigation */
.folderlist li a,
.mailboxlist li a,
.settings-menu li a,
#layout-sidebar a {
  border-radius: 7px;
  transition:
    color .16s ease,
    background-color .16s ease !important;
}

.folderlist li a:hover,
.mailboxlist li a:hover,
.settings-menu li a:hover,
#layout-sidebar a:hover {
  background-color: var(--sn-icon-hover-surface) !important;
}

/* Popup menus and dropdown action icons */
.popupmenu a,
.toolbarmenu a,
.dropdown-menu a {
  border-radius: 6px;
  transition: background-color .15s ease, color .15s ease;
}

.popupmenu a:hover,
.toolbarmenu a:hover,
.dropdown-menu a:hover {
  color: var(--sn-icon-hover) !important;
  background-color: var(--sn-icon-hover-surface) !important;
}

/* Inputs and checkboxes */
input[type="checkbox"],
input[type="radio"] {
  accent-color: #a495ff;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid rgba(177, 164, 255, .75);
  outline-offset: 2px;
}

/* Small, deliberate hover lift for interactive cards only */
.listing tbody tr:hover {
  box-shadow: inset 2px 0 0 rgba(150, 132, 255, .45);
}

/* Avoid animation for users who request reduced motion */
@media (prefers-reduced-motion: reduce) {
  .toolbar *,
  .taskbar *,
  .folderlist *,
  .mailboxlist *,
  .settings-menu * {
    transition: none !important;
  }
}