:root {
  /*  --body-font-family: "Segoe UI", sans-serif;*/
  --body-bgcolor: #fff;
  --body-color: #000;
  --body-font-family: "Roboto Mono", Menlo, monospace;

  /* Cell highlight colors matching event text colors */
  --cell-bg-color-black: #E2E2E2; /* highlight background for "black" feed */
  --cell-bg-color-red: #FFE5E5;   /* highlight background for "red" feed */
  --cell-bg-color-green: #DCFFEB; /* highlight background for "green" feed */
  --cell-bg-color-orange: #FEF9C3;/* highlight background for "orange" feed */
  --cell-bg-color-blue: #DBEAFE;  /* highlight background for "blue" feed */
  --cell-bg-color-purple: #E9D5FF;/* highlight background for "purple" feed */

  --cell-border-color-quarter: #000;
  --cell-border-color: #ccc;
  --cell-color-past: #eee;
  --cell-color-today: #3B82F6;
  --cell-color-weekend: #f9f9f9;
  --daynumber-color: #ccc;

  /* Event (text) colors */
  --event-color-black: #000;
  --event-color-red: #BA1E55;
  --event-color-green: #0F735A;
  --event-color-orange: #CA8A04;
  --event-color-blue: #1E3A8A;
  --event-color-purple: #6D28D9;
  --event-color-past: #ccc;

  --headercell-bgcolor: #f2f2f2;

  /* -------------------------
     NEW: Form control colors
     for light theme
  ------------------------- */
  --control-bgcolor: #fff;        /* input/select background */
  --control-color: #000;          /* input/select text color */
  --control-bordercolor: #ccc;    /* input/select border */
  --button-bgcolor: #f6f6f6;      /* button background */
  --button-color: #333;           /* button text color */
}

@media (prefers-color-scheme: dark) {
  :root {
    --body-bgcolor: #1F2937;
    --body-color: #94A3B8;

    --cell-bg-color-black: #2F2F2F;
    --cell-bg-color-red: #3F1B1E;
    --cell-bg-color-green: #07423D;
    --cell-bg-color-orange: #44400F;
    --cell-bg-color-blue: #1E3A52;
    --cell-bg-color-purple: #2F2240;

    --cell-border-color-quarter: #94A3B8;
    --cell-border-color: #374151;
    --cell-color-past: #1F2937;
    --cell-color-today: #3B82F6;
    --cell-color-weekend: #111827;
    --daynumber-color: #6B7280;

    --event-color-black: #94A3B8;
    --event-color-red: #F78BA0;
    --event-color-green: #10B981;
    --event-color-orange: #FACC15;
    --event-color-blue: #60A5FA;
    --event-color-purple: #C084FC;
    --event-color-past: #6B7280;

    --headercell-bgcolor: #1F2937;

    /* -------------------------
       NEW: Form control colors
       for dark theme
    ------------------------- */
    --control-bgcolor: #374151;    /* input/select background in dark mode */
    --control-color: #D1D5DB;      /* text color */
    --control-bordercolor: #6B7280;/* input/select border */
    --button-bgcolor: #4B5563;     /* button background in dark mode */
    --button-color: #D1D5DB;       /* button text color in dark mode */
  }
}

body {
  font-family: var(--body-font-family);
  padding: 20px;
  color: var(--body-color);
  background-color: var(--body-bgcolor);
}

/* Feed Manager & Form Fields */
#feed-manager,
input[type="select"] {
  font-size: 0.8rem;
}

/* Use new control colors for text inputs and selects */
input[type="text"],
input[type="url"],
select {
  background-color: var(--control-bgcolor);
  color: var(--control-color);
  border: 1px solid var(--control-bordercolor);
}

/* Slight button coloring without changing size/layout */
button {
  background-color: var(--button-bgcolor);
  color: var(--button-color);
  border: 1px solid var(--control-bordercolor);
}

/* Feed List Container */
#feed-list {
  padding: 0;
  margin: 0 0 0.25rem 0;
}

#add-feed-form,
.feed-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.25rem 0;
  height: 32px;
  padding: 0 8px;
}

#add-feed-form {
  background-color: var(--cell-color-weekend);
}

#feed-name {
  width: 8rem;
}
#feed-url {
  width: 11rem;
}

/* The color bar */
.feed-color-strip {
  width: 12px; 
  height: 32px;
}

/* The feed name text */
.feed-name {
  font-weight: bold; 
  margin-right: 0.5rem;
  width: 8rem;
}

/* Label arrangement in feed row */
.feed-row label {
  display: flex; 
  align-items: center;
  gap: 0.25rem;
  width: 4rem;
}
.feed-row label + label {
  width: 6rem;
}

/* Make sure we keep the select as is, but with new color changes from above. */
.feed-row select {
  margin-left: 0.5rem;
}

/* If you have a remove button in the feed row: 
   we just rely on the global 'button' styling above. */

/* "Show Past" toggle container */
#calendar-toggles {
  margin-bottom: 1rem;
}

/* ===============================================
   CALENDAR TABLE STYLES (unchanged except colors)
   =============================================== */
table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.8em;
}
table th:first-child, 
table td:first-child {
  width: 60px;
}

th, td {
  vertical-align: top;
  border-left: 1px solid var(--cell-border-color);
  border-right: 1px solid var(--cell-border-color);
  padding: 4px;
  text-align: left;
}

tr {
  border-top: 1px solid var(--cell-border-color);
  border-bottom: 1px solid var(--cell-border-color);
}

th {
  background-color: var(--headercell-bgcolor);
}

/* Week Labels */
.week-label {
  font-weight: bold;
}
@media (prefers-color-scheme: dark) {
  .week-label {
    font-weight: normal;
  }
}

/* Weekend BG */
.sat, .sun {
  background-color: var(--cell-color-weekend);
}

/* Quarter boundaries (if used) */
.wk12, .wk25, .wk38, th {
  border-bottom: 1px solid var(--cell-border-color-quarter);
}

/* Day Number styling */
.day-number {
  display: inline;
  color: var(--daynumber-color);
}
.day-number:after {
  content: " ";
}

/* Events */
td .event {
  display: inline;
}
/* Comma after multiple events (comment out if undesired) */
.event:after {
  content: ", ";
  color: var(--event-color-black);
}
.event:has(+ .show-no):after,
.event:last-child:after {
  content: "";
}

/* Hide events that are toggled off */
td .event.show-no {
  display: none;
}

/* FEED COLOR CLASSES (text) */
.event.feed-red,
.feed-row.feed-red .feed-color-strip {
  color: var(--event-color-red);
}
.event.feed-black,
.feed-row.feed-black .feed-color-strip {
  color: var(--event-color-black);
}
.event.feed-green,
.feed-row.feed-green .feed-color-strip {
  color: var(--event-color-green);
}
.event.feed-orange,
.feed-row.feed-orange .feed-color-strip {
  color: var(--event-color-orange);
}
.event.feed-blue,
.feed-row.feed-blue .feed-color-strip {
  color: var(--event-color-blue);
}
.event.feed-purple,
.feed-row.feed-purple .feed-color-strip {
  color: var(--event-color-purple);
}

/* HIGHLIGHT CELLS in the calendar for each feed color */
.feed-row.feed-red,
td:has(.highlight-cell.feed-red) {
  background-color: var(--cell-bg-color-red);
}
.feed-row.feed-black,
td:has(.highlight-cell.feed-black) {
  background-color: var(--cell-bg-color-black);
}
.feed-row.feed-green,
td:has(.highlight-cell.feed-green) {
  background-color: var(--cell-bg-color-green);
}
.feed-row.feed-orange,
td:has(.highlight-cell.feed-orange) {
  background-color: var(--cell-bg-color-orange);
}
.feed-row.feed-blue,
td:has(.highlight-cell.feed-blue) {
  background-color: var(--cell-bg-color-blue);
}
.feed-row.feed-purple,
td:has(.highlight-cell.feed-purple) {
  background-color: var(--cell-bg-color-purple);
}

/* Past & Today */
tr.past td,
tr.past td:has(.highlight-cell),
tr td.past,
tr td.past:has(.highlight-cell),
tr:has(.past) .week-label {
  background-color: var(--cell-color-past);
}
.past .event,
.past .event:after,
.past .day-number {
  color: var(--event-color-past);
}
.today {
  outline: 2px solid var(--cell-color-today);
}
/* If you want the week's label to be in a special color: */
/* tr:has(.today) .week-label {
  color: var(--cell-color-today);
} */