luk/src/mail/email_viewer.tcss

/* Basic stylesheet for the Textual Email Viewer App */


#main_content, .list_view {
  scrollbar-size: 1 1;
  border: round $border;
  height: 1fr;
}

#sidebar {
  width: 1fr
}

.list_view {
  height: 3;
}

#main_content {
  width: 2fr;

}


.envelope-selected {
  tint: $accent 20%; 
}

#sidebar:focus-within {
  background: $panel;

  .list_view:blur {
    height: 3;
  }
  .list_view:focus {
    height: 2fr;
  }
}


#envelopes_list {
  height: 2fr;
}

#main_content:focus, .list_view:focus {
  border: round $secondary;
  background: $surface;
  border-title-style: bold;
}

Label#task_prompt {
  padding: 1;
  color: $text-muted;
}

Label#task_prompt_label {
  padding: 1;
  color: $warning;
}

Label#message_label {
  padding: 1;
}

StatusTitle {
  dock: top;
  width: 100%;
  height: 1;
  color: $text;
  background: $panel;
  content-align: center middle;
}

EnvelopeHeader {
  width: 100%;
  height: auto;
  min-height: 4;
  max-height: 6;
  padding: 0 1;
  background: $surface-darken-1;
  scrollbar-size: 1 1;
}

/* Full headers mode - allow more height for scrolling */
EnvelopeHeader.full-headers {
  max-height: 12;
}

#content_scroll {
  height: 1fr;
  width: 100%;
}

/* Header labels should be single line with truncation */
EnvelopeHeader Label {
  width: 100%;
  height: 1;
  text-overflow: ellipsis;
}

/* Full headers mode - allow wrapping */
EnvelopeHeader.full-headers Label {
  height: auto;
  text-overflow: clip;
}

Markdown {
  padding: 1 2;
}

/* =====================================================
   NEW EnvelopeListItem and GroupHeader styles
   ===================================================== */

/* EnvelopeListItem - the main envelope display widget */
EnvelopeListItem {
  height: auto;
  width: 1fr;
  padding: 0;
}

EnvelopeListItem .envelope-content {
  height: auto;
  width: 1fr;
}

EnvelopeListItem .envelope-row-1 {
  height: 1;
  width: 1fr;
}

EnvelopeListItem .envelope-row-2 {
  height: 1;
  width: 1fr;
}

EnvelopeListItem .envelope-row-3 {
  height: 1;
  width: 1fr;
}

EnvelopeListItem .status-icon {
  width: 2;
  padding: 0;
  color: $text-muted;
}

EnvelopeListItem .status-icon.unread {
  color: $accent;
}

EnvelopeListItem .checkbox {
  width: 1;
  padding: 0;
}

EnvelopeListItem .sender-name {
  width: 1fr;
}

EnvelopeListItem .message-datetime {
  width: auto;
  padding: 0 1;
  color: $secondary;
}

EnvelopeListItem .email-subject {
  width: 1fr;
  padding: 0 3;
}

EnvelopeListItem .email-preview {
  width: 1fr;
  padding: 0 3;
  color: $text-muted;
}

/* Unread message styling */
EnvelopeListItem.unread .sender-name {
  text-style: bold;
}

EnvelopeListItem.unread .email-subject {
  text-style: bold;
}

/* Selected/checked message styling (for multi-select) */
EnvelopeListItem.selected {
  tint: $accent 20%;
}

/* Currently highlighted/focused item styling - more prominent */
EnvelopeListItem.highlighted {
  background: $primary-darken-1;
}

EnvelopeListItem.highlighted .sender-name {
  color: $text;
  text-style: bold;
}

EnvelopeListItem.highlighted .email-subject {
  color: $text;
  text-style: bold;
}

EnvelopeListItem.highlighted .message-datetime {
  color: $secondary-lighten-2;
}

/* GroupHeader - date group separator */
GroupHeader {
  height: 1;
  width: 1fr;
  background: $panel;
}

GroupHeader .group-header-label {
  color: $text-muted;
  text-style: bold;
  padding: 0 1;
  width: 1fr;
}

/* =====================================================
   END NEW styles
   ===================================================== */

/* Legacy styles (keeping for backward compatibility) */
.email_subject {
  width: 1fr;
  padding: 0 2;
  text-style: bold;
}

.sender_name {
  tint: gray 30%;
}

.message_date {
  padding: 0 2;
  color: $secondary;
}

.header_key {
  tint: gray 20%;
  min-width: 10;
  text-style:bold;
}

.header_value {
  padding:0 1 0 0;
  height: auto;
  width: auto;
}

.modal_screen {
  align: center middle;
  margin: 1;
  padding: 2;
  border: round $border;
  background: $panel;
  width: auto;
  height: auto;
}


 
#envelopes_list {
  ListItem:odd {
    background: $surface;
  }
  ListItem:even {
    background: $surface-darken-1;
  }
  
  /* Currently highlighted/focused item - make it very visible */
  & > ListItem.-highlight {
    background: $primary-darken-2;
    color: $text;
    text-style: bold;
  }
  
  /* Highlighted item's child elements */
  & > ListItem.-highlight EnvelopeListItem {
    tint: $primary 30%;
  }
  
  & > ListItem.-highlight .sender-name {
    color: $text;
    text-style: bold;
  }
  
  & > ListItem.-highlight .email-subject {
    color: $text;
    text-style: bold;
  }
  
  & > ListItem.-highlight .message-datetime {
    color: $secondary-lighten-2;
  }
}

.envelope_item_row {
  height: auto;
  width: 1fr;
  
  .envelope_header_row, .envelope_subject_row {
    height: auto;
  } 
}



.x-list {
    tint: $accent 20%;
}

#open_message_container {
  border: panel $border; 
  dock: right;
  width: 25%;
  min-width: 60;
  padding: 0 1;
  height: 100%;

  Input {
    width: 1fr;
  }
  Label, Button {
    width: auto;
  }
}

Label.group_header {
  color: $text-muted;
  text-style: bold;
  background: $panel;
  width: 100%;
  padding: 0 1;
}

#plaintext_content {
  padding: 1 2;
  height: auto;
  width: 100%;
}

#html_content {
  padding: 1 2;
  height: auto;
  width: 100%;
}

.hidden {
  display: none;
}

#markdown_content {
  padding: 1 2;
}

ContentContainer {
  width: 100%;
  height: 1fr;
}