:root {
  --primary: #04AA6D;
  --dark: #333;
  --light-bg: #f2f2f2;
  --hover-bg: #ddd;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  --transition: 0.3s;
}

/* apply globally */
html, body,
h1, h2, h3, h4, h5, h6,
p, a, span, label, button,
input, select, textarea {
  font-family: var(--font-sans) !important;
}

/* Header logo */
.header-image {
  background: url("/static/images/IGF_Logo.png") center/contain no-repeat;
  height: 100px;
  margin-bottom: 1rem;
}

/* Topnav */
.topnav {
  display: flex; align-items: center;
  background: var(--dark);
  flex-wrap: wrap;
  position: sticky; top: 0; z-index: 100;
}

.topnav .subnavbtn {
  background-color: var(--dark) !important;  /* same as your nav background */
  color: #f2f2f2;                            /* same as other links */
}
.topnav .subnavbtn:hover {
  background-color: var(--primary);          /* same hover as links */
  color: #fff;
}

.topnav a,
.subnavbtn {
  color: #fff;
  padding: 14px 16px;
  text-decoration: none;
  transition: background var(--transition);
}

.topnav a.active,
.topnav a:hover,
.subnavbtn:hover {
  background: var(--primary);
}



/* Hamburger icon */
.topnav .icon {
  display: none;
  margin-left: auto;
  cursor: pointer;
}
@media (max-width: 768px) {
  /* Hide every nav link & dropdown button */
  .topnav a,
  .topnav .subnav {
    display: none;
  }
  /* But show the hamburger icon */
  .topnav .icon {
    display: block;
    margin-left: auto;
  }
}

/* When toggled open, stack them vertically */
.topnav.responsive {
  flex-direction: column;
}
.topnav.responsive a,
.topnav.responsive .subnav {
  display: block;
}

/* Subnav dropdown */
.subnav {
  position: relative;
}
.subnav-content {
  display: none;
  position: absolute;
  background: var(--primary);
  width: 100%;
  left: 0;
  top: 100%;
}
.subnav:hover .subnav-content {
  display: block;
}
.subnav-content a {
  color: #fff;
  padding: 10px 16px;
  display: block;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.subnav-content a:hover {
  background: #eee;
  color: var(--dark);
}

/* Tables */
.table-responsive {
  overflow-x: auto;               /* allow horizontal scroll */
  -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
}

table.sortable {
  width: auto;                     /* size to content, not 100% */
  min-width: 100%;                 /* at least full container width */
}
table.sortable th,
table.sortable td {
  padding: 12px;
  border: 1px solid #ddd;
  transition: background var(--transition);
}
table.sortable th {
  background: var(--primary);
  color: #fff;
}
table.sortable tr:nth-child(even) {
  background: var(--light-bg);
}
table.sortable tr:hover {
  background: var(--hover-bg);
}

/* Icon images in tables */
.icon-img {
  width: 32px;
  vertical-align: middle;
  margin-right: .5rem;
}

/* hide the native <select> once Select2 has taken over */
.select2-hidden-accessible {
  display: none !important;
}

/* force the Select2 container to fill its parent */
.select2-container {
  width: 100% !important;
}