/* ============================================================
   SeaOwl — Thunderbird userChrome.css theme
   ----------------------------------------------------------------
   Minimal re-skin of Mozilla Thunderbird. Keeps Thunderbird's
   layout, commands, and keyboard flow 100% intact — only
   overrides what genuinely needs to change for the SeaOwl
   identity:

     - Surfaces         (cool dark navy, not pure black)
     - Folder pane      (cyan border-left on the selected folder)
     - Message list     (unread rows tinted, active row cyan edge)
     - Message header   (sender name in muted text)
     - Compose toolbar  (same dark surface + focus ring)
     - Calendar view    (today pill in brand cyan)

   No icon swaps. No layout moves. Thunderbird's defaults do
   the rest.

   Install:
     1. Help → Troubleshooting Information → Open Profile Folder
     2. Create a `chrome/` subdir if it does not exist
     3. Drop this file into `chrome/` as `userChrome.css`
     4. Tools → Settings → General → Config Editor →
        set `toolkit.legacyUserProfileCustomizations.stylesheets` to `true`
     5. Restart Thunderbird

   Source:  github.com/rosnovsky/seaowl
   ============================================================ */

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");

:root {
  /* Canonical SeaOwl palette — match docs/seasaw-zed-preview.html. */
  --sea-bg:            #0b0e17;
  --sea-surface:       #0f1420;
  --sea-elevated:      #111827;
  --sea-border:        #1e2a38;
  --sea-border-focus:  #2dd4bf;
  --sea-el-selected:   #1a3040;
  --sea-el-hover:      #1e2a38;
  --sea-text:          #cce8e5;
  --sea-text-muted:    #6b8296;
  --sea-success:       #4ade80;
  --sea-warning:       #fbbf24;
  --sea-error:         #f87171;
}

/* ----- Global app chrome ----- */
#messengerWindow,
#messengerBody,
#tabmail-tabs,
#tabs-toolbar,
#navigation-toolbox,
#toolbar-menubar,
#mail-toolbar-menubar2,
#tabmail-container {
  background-color: var(--sea-bg) !important;
  color: var(--sea-text) !important;
}

/* Tab strip — active tab gets a cyan underline, inactive sits muted. */
.tabmail-tab {
  background-color: var(--sea-bg) !important;
  color: var(--sea-text-muted) !important;
  border-color: var(--sea-border) !important;
}

.tabmail-tab[selected="true"] {
  background-color: var(--sea-surface) !important;
  color: var(--sea-text) !important;
  box-shadow: inset 0 -2px 0 0 var(--sea-border-focus) !important;
}

/* ----- Folder pane ----- */
#folderTree,
#folderPaneBox,
treechildren::-moz-tree-row {
  background-color: var(--sea-bg) !important;
  color: var(--sea-text) !important;
}

treechildren::-moz-tree-row(hover) {
  background-color: var(--sea-el-hover) !important;
}

treechildren::-moz-tree-row(selected),
treechildren::-moz-tree-row(selected, focus) {
  background-color: var(--sea-el-selected) !important;
  border-left: 2px solid var(--sea-border-focus) !important;
}

treechildren::-moz-tree-cell-text(selected),
treechildren::-moz-tree-cell-text(selected, focus) {
  color: var(--sea-text) !important;
}

/* Unread folders read louder than read ones. */
treechildren::-moz-tree-cell-text(folderNameCol, hasUnreadMessages-true) {
  color: var(--sea-border-focus) !important;
  font-weight: 600 !important;
}

/* ----- Message list (threadTree) ----- */
#threadTree,
#threadPane,
#threadPaneBox {
  background-color: var(--sea-surface) !important;
  color: var(--sea-text) !important;
}

#threadTree treechildren::-moz-tree-row {
  background-color: var(--sea-surface) !important;
}

#threadTree treechildren::-moz-tree-row(hover) {
  background-color: var(--sea-el-hover) !important;
}

#threadTree treechildren::-moz-tree-row(selected),
#threadTree treechildren::-moz-tree-row(selected, focus) {
  background-color: var(--sea-el-selected) !important;
  border-left: 2px solid var(--sea-border-focus) !important;
}

#threadTree treechildren::-moz-tree-cell-text(unread-true) {
  color: var(--sea-text) !important;
  font-weight: 600 !important;
}

#threadTree treechildren::-moz-tree-cell-text(read-true) {
  color: var(--sea-text-muted) !important;
}

/* ----- Message header pane ----- */
#messagepane,
#messagepanebox,
#messageHeader,
.message-header-view {
  background-color: var(--sea-surface) !important;
  color: var(--sea-text) !important;
  border-color: var(--sea-border) !important;
}

.message-header-view .headerName,
.message-header-view label {
  color: var(--sea-text-muted) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.message-header-view .headerValue,
.message-header-view .headerDisplayName {
  color: var(--sea-text-muted) !important;
}

.message-header-view .headerDisplayName[primary="true"] {
  color: var(--sea-text) !important;
}

/* ----- Compose window toolbar ----- */
#compose-toolbox,
#composeToolbar2,
#composeContentBox,
#msgSubject,
.address-row,
.address-container {
  background-color: var(--sea-bg) !important;
  color: var(--sea-text) !important;
  border-color: var(--sea-border) !important;
}

#msgSubject:focus,
.address-container:focus-within {
  border-color: var(--sea-border-focus) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sea-border-focus) 35%, transparent) !important;
}

/* ----- Calendar / Lightning month view ----- */
#calendar-view-box,
#calendar-month-view,
#calendar-week-view,
#calendar-multiweek-view {
  background-color: var(--sea-bg) !important;
  color: var(--sea-text) !important;
}

.calendar-month-day-box,
.calendar-day-label-name {
  background-color: var(--sea-surface) !important;
  color: var(--sea-text-muted) !important;
  border-color: var(--sea-border) !important;
}

.calendar-month-day-box[relation="today"],
.calendar-month-day-box-day-label[relation="today"],
calendar-day-label[relation="today"] {
  background-color: var(--sea-el-selected) !important;
  color: var(--sea-border-focus) !important;
  border: 1px solid var(--sea-border-focus) !important;
  border-radius: 4px;
}

/* ----- Keyboard focus ring — universal ----- */
*:focus-visible {
  outline: 2px solid var(--sea-border-focus) !important;
  outline-offset: 2px !important;
}

/* ----- Status / error colour mapping ----- */
.notificationbox[value="success"] { color: var(--sea-success) !important; }
.notificationbox[value="warning"] { color: var(--sea-warning) !important; }
.notificationbox[value="error"]   { color: var(--sea-error) !important; }

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

/* End. ~5 KB. */