/* ── Screen ───────────────────────────────────────── */
Screen {
  layout: vertical;
  background: #373737 100%;
  opacity: 100%;
}

/* Screen, */
/* SafeScreen, */
/* ScrollableList, */
/* ListWithDetails { */
/*   layout: vertical; */
/*   background: #373737; */
/* } */

/* ── Titles ───────────────────────────────────────── */
#table_title,
#week_title,
#scroll_title,
#details_title,
#list_title,
#events_title,
#tasks_title,
#dt_title,
#ed_title,
#bins_title {
  color: white;
  border-bottom: solid #7f7f7f;
  text-style: bold;
  text-align: center;
  padding: 1 1 0 1;
}

/* ── ScrollView defaults (plain) ──────────────────── */
ScrollView {
  padding: 0;
  margin: 0;
}

/* Hidden utility */
.hidden {
  display: none;
}

#custom_footer {
  color: white;
  text-style: bold;
  border-top: #7f7f7f;
  padding: 0 1 1 1;
}
/* ── Details Pane ───────────────────────────── */
#details-pane {
  dock: bottom;
  layout: vertical; /* header then body */
  border-top: heavy #7f7f7f; /* optional separator */
  height: 14; /* fixed: 2 rows for header + 12 for body */
  padding: 0 1 1 1;
}

#details-pane.hidden {
  display: none;
}

#details-title {
  width: 1fr;
  max-width: 1fr;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 1;
}

#details-body {
  height: 1fr; /* fills remaining space in the pane */
  border: none;
}

#details-body-content {
  border: none;
}

/* (Optional) Help panel styles you already had */
#help_panel {
  width: 100%;
  height: 100%;
  border: solid #7f7f7f;
}
#help_layout {
  height: 1fr;
}
#help_scroll {
  height: 1fr;
}

.dim-rule {
  color: #7f7f7f;
  height: 1;
}

/* ---- DatetimePrompt Layout ---- */

/* Padding Supply 1, 2 or 4 integers separated by a space */
/*       e.g. padding: 1; */
/*       e.g. padding: 1 2;     # Vertical, horizontal */
/*       e.g. padding: 1 2 3 4; # Top, right, bottom, left */

/* Title bar FOR ALL TITLES */
.title-class {
  text-align: center;
  color: white;
  text-style: bold;
  border-bottom: solid #7f7f7f;
  /* background: #373737; */
}

/* Horizontal rule */
.dim-rule {
  color: #555555;
  background: #373737;
}

/* Live feedback (“→ parsed datetime”) */
#dt_feedback {
  color: limegreen;
  padding: 0 1;
}
/* Message block just under the title */
#dt_message {
  color: #cccccc; /* soft grey */
  background: #373737;
  padding: 0 1 1 1;
  /* text-align: center; */
}

#dt_entry:focus {
  border: solid #7f7f7f;
  /* background: #373737; */
  background: #2e2e2e;
  color: white;
}

/* Fixed universal instructions */
#dt_instructions {
  color: #cccccc;
  background: #373737;
  padding: 0 1;
  text-align: center;
  /* text-style: dim; */
}

#ed_prompt {
  layout: vertical;
  padding: 0 1;
}
/* Message block just under the title */

#ed_instructions {
  color: #cccccc;
  background: #373737;
  padding: 0 1;
  text-align: center;
  /* text-style: dim; */
}

#ed_message {
  color: #cccccc; /* soft grey */
  background: #373737;
  padding: 0 1;
  /* text-align: center; */
}

#ed_entry:focus {
  border: solid #7f7f7f;
  /* background: #373737; */
  background: #3a3a3a;
  /* background: #2e2e2e; */
  color: white;
  height: auto;
  padding: 0 0;
}

#ed_feedback {
  height: auto;
  color: limegreen;
  padding: 0 1 0 1;
}
/* Container that holds a main list + details list */
ListWithDetails {
  layout: vertical;
  /* background: #373737; */
}

/* Main list fills available space */
ListWithDetails > #main-list {
  /* background: #373737; */
  height: 1fr;
}

/* Details list appears at bottom when shown and scrolls if long */
ListWithDetails > #details-list {
  /* background: #373737; */
  height: auto;
  max-height: 14; /* tweak to taste */
  border-top: solid #7f7f7f; /* optional separator */
  /* border-bottom: solid #7f7f7f; */
  /* padding-left: 1; */
  /* border: none; */
}

ListWithDetails > #details_text {
  /* background: #373737; */
  color: yellow;
  /* height: auto; */
  /* max-height: 14;  */
  /* border-top: solid #7f7f7f; */
  /* border-bottom: solid #7f7f7f; */
  /* padding-left: 1; */
  /* border: none; */
  padding: 1 0;
}

ListWithDetails > #details-list.hidden {
  display: none;
}

.busy-bar {
  text-style: bold;
  text-align: center;
  /* padding: 0 0 1 0; */
  height: auto;
  /* border: none; */
  border-bottom: #7f7f7f; /* optional separator */
}

/* ── BinHierarchyScreen ───────────────────────────── */

/* Make the tree fill the vertical space between Header and Footer */
#bins-tree {
  height: 1fr; /* grow to fill */
  margin: 0;
  padding: 0 1; /* match your other lists */
  /* border: solid #7f7f7f; */
  background: #373737; /* same dark base */
  color: #e0e0e0; /* legible on dark */
  overflow: auto; /* scroll if tall */
}

/* Stronger focus ring to mirror inputs’ focus state */
#bins-tree:focus {
  /* border: heavy #7f7f7f; */
  background: #2e2e2e; /* slight focus darken like #dt_entry / #ed_entry */
}

/* Optional: tighten header/footer to your house style */
BinHierarchyScreen > Header,
BinHierarchyScreen > Footer {
  background: #373737;
  color: white;
  border: none;
}

/* ── Tree niceties (Textual’s internal parts) ───────
   These selectors are supported by Textual’s Tree widget.
   If you’re on a very old Textual, you can safely delete them. */

/* Guides (│ ├ └) */
#bins-tree .tree--guides {
  color: #7f7f7f;
}

/* The row your cursor is on */
#bins-tree .tree--cursor {
  background: #2e2e2e;
  color: white;
  text-style: bold;
}

/* Labels (node text) */
#bins-tree .tree--label {
  color: #e0e0e0;
}

/* Expanded node labels a touch bolder for hierarchy pop */
#bins-tree .tree--label.-expanded {
  text-style: bold;
}

/* Dim disabled nodes (if you ever mark any) */
#bins-tree .-disabled .tree--label {
  color: #7f7f7f;
}

/* Scrollbar to match the rest of the app (works on recent Textual) */
#bins-tree {
  scrollbar-gutter: stable;
  scrollbar-color: #7f7f7f #373737; /* thumb, track */
}
