@import url('https://fonts.googleapis.com/css?family=Open+Sans:wght@400;600;700');

:root {
  --bg:        #f9f9f9;
  --bg-dark:   #f1f3f5;
  --bg-border: #e3e3e3;
  --accent:    #1d4e7a;   /* primary */
  --accent2:   #2c7fb8;
  --ink:       #1a1a1a;
  --ink2:      #555;
}

body, .container-fluid {
  background-color: var(--bg);
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  color: var(--ink);
}

/* shinydashboard header + sidebar */
.skin-blue .main-header .logo,
.skin-blue .main-header .logo:hover,
.skin-blue .main-header .navbar { background-color: var(--accent); }
.skin-blue .main-header .logo { font-weight: 700; letter-spacing: .3px; }
.skin-blue .main-sidebar { background-color: #21384e; }
.skin-blue .sidebar-menu > li > a { font-weight: 600; }
.skin-blue .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li:hover > a { background: #18293a; border-left-color: var(--accent2); }
.content-wrapper, .right-side { background-color: var(--bg) !important; }

h1,h2,h3,h4,h5 { font-family: "Open Sans", sans-serif; font-weight: 700; color: var(--ink); }
h3 { font-size: 1.4em; } h4 { font-size: 1.05em; }
.muted { color: var(--ink2); font-size: .92em; }

/* card wrapper (his .ggplot_box / .dt_box) */
.card {
  box-shadow: 0 5px 12px hsla(0,0%,0%,.10), inset 0 4px 0 var(--accent);
  border-radius: 6px;
  border: 1px solid var(--bg-border);
  background-color: #fff;
  padding: 18px 16px 14px;
  margin: 16px 8px 24px;
}
.card-title { font-weight: 700; font-size: 1.05em; margin: 0 0 10px; color: var(--accent); }

/* filter bar */
.filterbar { background: var(--bg-dark); border: 1px solid var(--bg-border); border-radius: 6px;
             padding: 10px 14px 2px; margin: 12px 8px; }
.filterbar .form-group { margin-bottom: 6px; }

/* reactable group + header styling (his pattern) */
.header, .group-header {
  display: flex; flex-direction: column; justify-content: flex-end;
  font-weight: 700; color: var(--ink);
}
.group-header { text-align: center; border-bottom: 2px solid var(--accent); color: var(--accent); }
.border-left { border-left: 2px solid var(--ink2) !important; }

/* team summary chips */
.chip { display:inline-block; background:var(--bg-dark); border:1px solid var(--bg-border);
        border-radius: 14px; padding: 3px 12px; margin: 2px 4px 2px 0; font-size:.92em; }
.chip b { color: var(--accent); }