/* WageIndicator brand theme — light mode */
html[data-theme="light"],
:root {
  --primary: #e04e04;
  --secondary: #2b2b2b;
  --accent: #c4dce8;
  --primary-fg: #fff;

  --body-fg: #333;
  --body-bg: #fff;
  --body-quiet-color: #666;
  --body-medium-color: #444;
  --body-loud-color: #000;

  --header-color: #fff;
  --header-branding-color: #fff;
  --header-bg: #2b2b2b;
  --header-link-color: #fff;

  --breadcrumbs-fg: #c4dce8;
  --breadcrumbs-link-fg: #fff;
  --breadcrumbs-bg: #e04e04;

  --link-fg: #777;
  --link-hover-color: #999;
  --link-selected-fg: #444;

  --hairline-color: #e8e8e8;
  --border-color: #ccc;

  --darkened-bg: #f8f8f8;
  --selected-bg: #e4e4e4;
  --selected-row: #ffc;

  --button-fg: #fff;
  --button-bg: #e04e04;
  --button-hover-bg: #878787;
  --default-button-bg: #2b2b2b;
  --default-button-hover-bg: #191d22;
  --close-button-bg: #878787;
  --close-button-hover-bg: #292d32;

  --object-tools-fg: var(--button-fg);
  --object-tools-bg: #292d32;
  --object-tools-hover-bg: #191d22;
}

/* WageIndicator brand — dark mode (auto) */
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"][data-admin-theme="wageindicator"] {
    --primary: #e04e04;
    --secondary: #1a1a1a;
    --primary-fg: #fff;

    --body-fg: #eeeeee;
    --body-bg: #121212;
    --body-quiet-color: #d0d0d0;
    --body-medium-color: #e0e0e0;
    --body-loud-color: #ffffff;

    --header-color: #fff;
    --header-branding-color: #fff;
    --header-bg: #1a1a1a;
    --header-link-color: #ddd;

    --breadcrumbs-fg: #c4dce8;
    --breadcrumbs-link-fg: #fff;
    --breadcrumbs-bg: #e04e04;

    --link-fg: #999;
    --link-hover-color: #bbb;
    --link-selected-fg: #ddd;

    --hairline-color: #272727;
    --border-color: #353535;

    --darkened-bg: #212121;
    --selected-bg: #1b1b1b;
    --selected-row: #3d1a00;

    --button-bg: #e04e04;
    --button-hover-bg: #878787;
    --default-button-bg: #2b2b2b;
    --default-button-hover-bg: #191d22;
    --close-button-bg: #333333;
    --close-button-hover-bg: #666666;
  }
}

/* WageIndicator brand — dark mode (explicit) */
html[data-theme="dark"][data-admin-theme="wageindicator"],
html[data-admin-theme="wageindicator"][data-theme="dark"] {
  --primary: #e04e04;
  --secondary: #1a1a1a;
  --primary-fg: #fff;

  --body-fg: #eeeeee;
  --body-bg: #121212;
  --body-quiet-color: #d0d0d0;
  --body-medium-color: #e0e0e0;
  --body-loud-color: #ffffff;

  --header-color: #fff;
  --header-branding-color: #fff;
  --header-bg: #1a1a1a;
  --header-link-color: #ddd;

  --breadcrumbs-fg: #c4dce8;
  --breadcrumbs-link-fg: #fff;
  --breadcrumbs-bg: #e04e04;

  --link-fg: #999;
  --link-hover-color: #bbb;
  --link-selected-fg: #ddd;

  --hairline-color: #272727;
  --border-color: #353535;

  --darkened-bg: #212121;
  --selected-bg: #1b1b1b;
  --selected-row: #3d1a00;

  --button-bg: #e04e04;
  --button-hover-bg: #878787;
  --default-button-bg: #2b2b2b;
  --default-button-hover-bg: #191d22;
  --close-button-bg: #333333;
  --close-button-hover-bg: #666666;
}

#branding h1,
#branding h1 a:link,
#branding h1 a:visited,
#site-name a:link,
#site-name a:visited {
  color: #fff;
}

#header {
  background: var(--header-bg);
  color: #fff;
}

#header a:link,
#header a:visited {
  color: #fff;
}

#header a:hover,
#header a:focus {
  color: #fff;
}

#user-tools a:focus,
#user-tools a:hover {
  border: 0;
  color: #ddd;
}

.module h2,
.inline-group h2,
.selector-chosen h2 {
  background: var(--primary);
}

.paginator a:link,
.paginator a:visited {
  background: var(--primary);
}

.paginator a:focus,
.paginator a:hover {
  background: var(--default-button-hover-bg);
}

.calendar td.selected a,
.calendar td a:focus,
.timelist a:focus,
.calendar td a:hover,
.timelist a:hover {
  background: var(--primary) !important;
}

.calendar caption,
.calendarbox h2 {
  background: #999;
}

.theme-toggle svg.theme-icon-when-auto,
.theme-toggle svg.theme-icon-when-dark,
.theme-toggle svg.theme-icon-when-light {
  fill: #fff;
  color: var(--header-bg);
}

html[data-admin-theme="wageindicator"] .admin-branding-logo,
html[data-admin-theme="wageindicator"] #branding #site-name a img.logo {
  filter: brightness(0) invert(1);
}