/* Pastel green for the employee portal of a company with its own look -
   the same palette as public/themes/green.css on its office server.
   Served as /theme.css when THEME=green; the blue in portal.css stays for
   every portal without it. Green is the accent: the menu bar, the chosen
   tab, the main buttons. The page and the text stay neutral. */
:root {
  --bg: #f4f6f5;
  --surface: #ffffff;
  --surface-2: #eef1ef;
  --surface-3: #f7f9f8;
  --sunk: #eceeed;
  --weekend: #f7f9f8;
  --line: #dce2de;
  --line-soft: #e8ece9;
  --text: #1f2723;
  --muted: #5d6762;
  --accent: #2f7a50;
  --accent-soft: #e2f1e7;
  --accent-ink: #ffffff;
}

/* The menu bar: deep green shaded left to right, white text. */
.topbar {
  background: linear-gradient(90deg, #245a3d 0%, #2f6b4a 45%, #357652 100%);
  border-bottom: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .14);
}
.topbar .brand { color: #ffffff; }
.topbar .who { color: rgba(255, 255, 255, .85); }
.topbar .btn {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .35);
  color: #ffffff;
}
.topbar .btn:hover:not([disabled]) { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .55); }
.topbar .tab { color: rgba(255, 255, 255, .85); }
.topbar .tab:hover { color: #ffffff; background: rgba(255, 255, 255, .1); }
/* The chosen tab is a white folder tab joined to the page below it. */
.topbar .tab.is-active { background: var(--bg); border-color: transparent; color: var(--accent); }

/* Blues portal.css names outright rather than through a token. */
.btn:hover:not([disabled]) { border-color: #bfdcc9; }
.time { color: #245a3d; }
#my-leave th { background: #dcefe3; color: #245a3d; }

/* On a phone the tabs are pills on the green bar. */
@media (max-width: 640px) {
  .topbar .tab {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .3);
    color: #ffffff;
  }
  .topbar .tab.is-active {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--accent);
  }
}