@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --pk-green-900: #022211;
  --pk-green-800: #033b1e;
  --pk-green-700: #0a4d2e;
  --pk-green-600: #078242;
  --pk-green-500: #0e9a50;
  --pk-green-100: #f0fdf4;
  --pk-green-50:  #f5faf7;
  --pk-nav-bg:    #5a5a5a;
  --pk-nav-hover: #4a4a4a;
  --pk-text:      #0f172a;
  --pk-text-2:    #334155;
  --pk-text-3:    #64748b;
  --pk-bg:        #f1f5f9;
  --pk-surface:   #ffffff;
  --pk-border:    #e2e8f0;
  --pk-border-lt: #f1f5f9;
  --pk-hover:     #f8fafc;
  --pk-focus:     rgba(7,130,66,0.2);
  --pk-shadow-s:  0 1px 2px rgba(0,0,0,0.04);
  --pk-shadow-m:  0 2px 8px rgba(0,0,0,0.07);
  --pk-r-sm:      4px;
  --pk-r-md:      6px;
  --pk-r-lg:      8px;
  --pk-sans:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --pk-serif:     Georgia, 'Times New Roman', serif;
}

/* ============================================================ */
/* RESET                                                         */
/* ============================================================ */
*, *::before , *::after { box-sizing: border-box; }

/* ============================================================ */
/* GLOBAL TYPOGRAPHY                                             */
/* ============================================================ */
body {
  font-family: var(--pk-sans) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  margin: 0;
  color: var(--pk-text) !important;
  background-color: var(--pk-bg) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--pk-sans) !important;
  color: var(--pk-text) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
}

h1.page-title, h1#page-title {
  font-size: 24px !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--pk-border) !important;
  padding: 0 0 12px 0 !important;
  margin-bottom: 20px !important;
}
h2.block-title { font-size: 18px; margin: 0; }

a, a:link, a:visited {
  color: var(--pk-green-800) !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}
a:hover { color: var(--pk-green-600) !important; text-decoration: underline !important; }
a:active, a:focus { background-color: transparent !important; }

b, strong { font-weight: 600; }
em, i { font-style: italic; }
img { max-width: 100%; height: auto; vertical-align: bottom; }
p, dl, hr, h1, h2, h3, h4, h5, h6, ol, ul, pre, table, address, fieldset { margin-bottom: 18px; }
ol { list-style: decimal; }
ul { list-style: disc; }
.node ol, .node ul { padding-left: 1.2em; }


/* ============================================================ */
/* HEADER                                                        */
/* ============================================================ */
.l-header {
  background-color: var(--pk-green-800) !important;
  background-image: url('/themes/phenotype/images/mendel.png') !important;
  background-position: top right !important;
  background-repeat: no-repeat !important;
  height: 100px !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  position: relative !important;
  z-index: 999 !important;
  overflow: visible !important;
  border: none !important;
  box-shadow: none !important;
}
.l-header-inner,
.l-header .l-header-inner {
  max-width: 1040px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  position: relative !important;
  height: 100px !important;
  display: block !important;
}
.l-header .block {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.l-header .block-title,
.l-header h2.block-title,
.l-header .contextual-links-wrapper,
.l-header .menu-toggle-button,
.l-header input.menu-toggle-state { display: none !important; }

/* ---- Logo ---- */
.l-header .block-system-header {
  background: transparent !important;
  position: static !important;
  height: 100px !important;
  border: none !important;
}
.l-header .block-system-header .block-content {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
.l-header .header-identity-wrapper,
.l-header .header-site-name-wrapper { display: block !important; }
.l-header a.header-site-name-link {
  display: inline-block !important;
  margin-top: 14px !important;
  text-decoration: none !important;
  line-height: 0 !important;
  border: none !important;
}
.l-header .header-logo-wrapper { display: inline-block !important; }
.l-header .header-logo-wrapper img {
  content: url('/themes/phenotype/images/logo.png') !important;
  display: block !important;
  width: 572px !important;
  height: 70px !important;
  max-width: none !important;
}
.l-header a.header-site-name-link strong,
.l-header .site-slogan,
.l-header .header-site-slogan { display: none !important; }

/* ---- User links ---- */
.l-header nav.header-menu {
  position: absolute !important;
  top: 8px !important;
  right: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: transparent !important;
  z-index: 101 !important;
}
.l-header nav.header-menu ul.links {
  display: flex !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center !important;
  gap: 4px !important;
}
.l-header nav.header-menu ul.links li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.l-header nav.header-menu ul.links li + li::before {
  content: '' !important;
  padding: 0 !important;
}
.l-header nav.header-menu ul.links a {
  color: rgba(255,255,255,0.9) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  padding: 5px 14px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,0.35) !important;
  background: transparent !important;
  display: inline-block !important;
  transition: all 0.15s ease !important;
}
.l-header nav.header-menu ul.links li:last-child a { opacity: 0.65 !important; }
.l-header nav.header-menu ul.links a:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.6) !important;
  text-decoration: none !important;
  opacity: 1 !important;
}
.l-header .block-system-user-menu { display: none !important; }

/* ---- Search ---- */
.l-header .block-search-form,
.l-header [class*="block-search"] {
  position: absolute !important;
  top: 52px !important;
  right: 14px !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 100 !important;
}
.l-header [class*="block-search"] .block-content { background: transparent !important; padding: 0 !important; }
.l-header [class*="block-search"] form,
.l-header [class*="block-search"] form > div,
.l-header [class*="block-search"] .container-inline {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
}
.l-header [class*="block-search"] .form-item,
.l-header [class*="block-search"] .form-actions {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
}
.l-header [class*="block-search"] label { display: none !important; }
.l-header [class*="block-search"] input[type="search"],
.l-header [class*="block-search"] input[type="text"] {
  height: 30px !important;
  padding: 0 10px !important;
  font-size: 13px !important;
  border-radius: var(--pk-r-sm) 0 0 var(--pk-r-sm) !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  border-right: none !important;
  background: rgba(255,255,255,0.92) !important;
  color: #000 !important;
  outline: none !important;
  box-shadow: none !important;
  width: 150px !important;
}
.l-header [class*="block-search"] input[type="submit"] {
  height: 30px !important;
  padding: 0 14px !important;
  font-size: 11px !important;
  border-radius: 0 var(--pk-r-sm) var(--pk-r-sm) 0 !important;
  background: var(--pk-green-600) !important;
  color: #fff !important;
  border: none !important;
  cursor: pointer !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  text-shadow: none !important;
  box-shadow: none !important;
  margin: 0 !important;
}
.l-header [class*="block-search"] input[type="submit"]:hover { background: var(--pk-green-700) !important; }
.l-header input:focus { box-shadow: none !important; outline: none !important; }


/* ============================================================ */
/* NAV BAR                                                       */
/* ============================================================ */
.l-header .block-system-main-menu {
  background: var(--pk-nav-bg) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 200 !important;
  border: none !important;
  overflow: visible !important;
}
.l-header .block-system-main-menu .block-content {
  max-width: 1040px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}
.l-header .block-system-main-menu ul.menu-tree {
  display: flex !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: visible !important;
}
.l-header .block-system-main-menu ul.menu-tree > li {
  position: relative !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  border-right: 1px solid rgba(255,255,255,0.1) !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  background: transparent !important;
}
.l-header .block-system-main-menu ul.menu-tree > li > a {
  display: inline-block !important;
  line-height: 2.5em !important;
  padding: 0 22px !important;
  color: white !important;
  font-size: 13px !important;
  font-family: var(--pk-sans) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  letter-spacing: 0.02em !important;
  background: transparent !important;
  border-radius: 0 !important;
  transition: background 0.15s !important;
}
.l-header .block-system-main-menu ul.menu-tree > li > a:hover { background: var(--pk-nav-hover) !important; }
.l-header .block-system-main-menu ul.menu-tree > li.active-trail > a,
.l-header .block-system-main-menu ul.menu-tree > li > a.active { background: var(--pk-green-600) !important; color: white !important; }
.l-header .block-system-main-menu ul.menu-tree > li.last { border-right: none !important; }

/* Dropdowns */
.l-header .block-system-main-menu ul.menu-tree li.expanded > ul,
.l-header .block-system-main-menu ul.menu-tree li.has-children > ul {
  display: none;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  min-width: 200px !important;
  margin: 0 !important;
  padding: 4px 0 !important;
  background: var(--pk-nav-bg) !important;
  border: none !important;
  z-index: 999 !important;
  list-style: none !important;
  box-shadow: var(--pk-shadow-m) !important;
  border-radius: 0 0 var(--pk-r-md) var(--pk-r-md) !important;
}
.l-header .block-system-main-menu ul.menu-tree li.expanded:hover > ul,
.l-header .block-system-main-menu ul.menu-tree li.has-children:hover > ul { display: block !important; }
.l-header .block-system-main-menu ul.menu-tree li.expanded > ul > li,
.l-header .block-system-main-menu ul.menu-tree li.has-children > ul > li {
  display: block !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}
.l-header .block-system-main-menu ul.menu-tree li.expanded > ul a,
.l-header .block-system-main-menu ul.menu-tree li.has-children > ul a {
  display: block !important;
  padding: 6px 16px !important;
  color: white !important;
  font-size: 13px !important;
  text-decoration: none !important;
  text-shadow: none !important;
  background: transparent !important;
  transition: background 0.12s !important;
}
.l-header .block-system-main-menu ul.menu-tree li.expanded > ul a:hover,
.l-header .block-system-main-menu ul.menu-tree li.has-children > ul a:hover { background: var(--pk-nav-hover) !important; }

/* =============================================
   ADMIN BAR - White Readable Theme
   ============================================= */

/* Reset body/header offsets caused by admin bar */
.admin-bar .l-header { margin-top: 0 !important; }
body.admin-bar { border-top: none !important; margin-top: 0 !important; padding-top: 0 !important; }

/* Admin bar container - white */
#admin-bar,
#admin-bar .admin-bar-block,
#admin-bar .admin-bar-container,
#admin-bar > div,
#admin-bar > nav {
  background: #ffffff !important;
  background-color: #ffffff !important;
}
#admin-bar {
  border-bottom: 1px solid #d0d5dd !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  font-family: var(--pk-sans) !important;
  font-size: 12px !important;
}

/* Force all admin bar text dark */
#admin-bar,
#admin-bar * {
  color: #374151 !important;
  font-family: var(--pk-sans) !important;
  font-size: 12px !important;
}

/* ---- Base Links ---- */
#admin-bar a,
#admin-bar a:link,
#admin-bar a:visited {
  color: #374151 !important;
  background: transparent !important;
  text-decoration: none !important;
  text-shadow: none !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  padding: 6px 10px !important;
  display: block !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 3px !important;
}
#admin-bar a:hover,
#admin-bar a:active,
#admin-bar a:focus {
  color: #fff !important;
  background: var(--pk-green-700) !important;
  text-decoration: none !important;
}

/* ---- Dropdown Menus ---- */
#admin-bar ul li { list-style: none !important; }
#admin-bar ul li a {
  color: #374151 !important;
  background: #fff !important;
}
#admin-bar ul li a:hover,
#admin-bar ul li a:focus {
  color: #fff !important;
  background: var(--pk-green-700) !important;
}
.expanded-trail { z-index: 9999 !important; }
li.admin-bar-alert a.alert { margin-bottom: 0 !important; }

/* Dropdown panels */
#admin-bar .dropdown,
#admin-bar ul ul,
#admin-bar .admin-bar-block ul {
  background: #fff !important;
  border: 1px solid #d0d5dd !important;
  border-radius: 0 0 6px 6px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}
#admin-bar .dropdown li a,
#admin-bar ul ul li a {
  color: #374151 !important;
  background: #fff !important;
  padding: 6px 14px !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
#admin-bar .dropdown li a:hover,
#admin-bar ul ul li a:hover {
  color: #fff !important;
  background: var(--pk-green-700) !important;
}
#admin-bar .dropdown li:last-child a,
#admin-bar ul ul li:last-child a {
  border-bottom: none !important;
}

/* ---- Icons ---- */
#admin-bar .icon,
#admin-bar .admin-bar-icon,
#admin-bar .fa,
#admin-bar [class*="icon-"] {
  color: var(--pk-green-700) !important;
}

/* ---- Home / Logo link ---- */
#admin-bar .home-link a,
#admin-bar .admin-home a {
  color: var(--pk-green-700) !important;
  font-weight: 600 !important;
}
#admin-bar .home-link a:hover,
#admin-bar .admin-home a:hover {
  color: #fff !important;
  background: var(--pk-green-700) !important;
}

/* ---- User/Account Section ---- */
#admin-bar .admin-account,
#admin-bar .user-info {
  color: #6b7280 !important;
  font-size: 11px !important;
}
#admin-bar .admin-account a,
#admin-bar .user-info a {
  color: var(--pk-green-700) !important;
}
#admin-bar .admin-account a:hover,
#admin-bar .user-info a:hover {
  color: #fff !important;
  background: var(--pk-green-700) !important;
}

/* ---- Shortcut Toggle ---- */
#admin-bar .shortcut-toggle a {
  color: var(--pk-green-600) !important;
  font-size: 16px !important;
}
#admin-bar .shortcut-toggle a:hover {
  color: var(--pk-green-800) !important;
  background: transparent !important;
}

/* ---- Primary Tabs (View / Edit / Revisions) ---- */
ul.primary-tabs,
.page-tabs,
ul.tabs.primary {
  background: transparent !important;
  border-bottom: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  gap: 2px !important;
}
ul.primary-tabs li,
.page-tabs li,
ul.tabs.primary li {
  margin: 0 !important;
  list-style: none !important;
}
ul.primary-tabs a,
.page-tabs a,
ul.tabs.primary a {
  color: #475569 !important;
  background: #e2e8f0 !important;
  padding: 8px 18px !important;
  border-radius: 5px 5px 0 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family: var(--pk-sans) !important;
  border: 1px solid #d0d5dd !important;
  border-bottom: none !important;
  display: inline-block !important;
  text-decoration: none !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}
ul.primary-tabs a:hover,
.page-tabs a:hover,
ul.tabs.primary a:hover {
  color: #1e293b !important;
  background: #f1f5f9 !important;
}
ul.primary-tabs a.active,
ul.primary-tabs a.is-active,
ul.primary-tabs li.active a,
.page-tabs a.active,
ul.tabs.primary a.active,
ul.tabs.primary li.active a {
  color: #fff !important;
  background: var(--pk-green-700) !important;
  border-color: var(--pk-green-700) !important;
  font-weight: 600 !important;
}

/* ---- Secondary Tabs ---- */
ul.secondary-tabs,
ul.tabs.secondary {
  background: transparent !important;
  padding: 6px 0 !important;
}
ul.secondary-tabs a,
ul.tabs.secondary a {
  color: #475569 !important;
  background: #f1f5f9 !important;
  padding: 4px 12px !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  margin-right: 4px !important;
  border: 1px solid #d0d5dd !important;
}
ul.secondary-tabs a:hover,
ul.tabs.secondary a:hover {
  color: #1e293b !important;
  background: #e2e8f0 !important;
}
ul.secondary-tabs a.active,
ul.secondary-tabs a.is-active,
ul.tabs.secondary a.active {
  color: #fff !important;
  background: var(--pk-green-700) !important;
  border-color: var(--pk-green-700) !important;
}

/* ---- Action Links (+ Add content, etc.) ---- */
ul.action-links {
  padding: 8px 0 !important;
  margin: 0 !important;
}
ul.action-links a {
  color: #fff !important;
  background: var(--pk-green-700) !important;
  padding: 6px 14px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
ul.action-links a:hover {
  background: var(--pk-green-800) !important;
}

/* ---- Admin Messages ---- */
.messages {
  border-radius: 6px !important;
  padding: 12px 16px !important;
  margin: 10px 0 !important;
  font-size: 13px !important;
}
.messages.status { background: #f0fdf4 !important; border-left: 4px solid var(--pk-green-600) !important; color: #166534 !important; }
.messages.warning { background: #fffbeb !important; border-left: 4px solid #d97706 !important; color: #92400e !important; }
.messages.error { background: #fef2f2 !important; border-left: 4px solid #dc2626 !important; color: #991b1b !important; }

/* ============================================================ */
/* PAGE LAYOUT                                                   */
/* ============================================================ */
.l-wrapper {
  position: relative !important;
  z-index: 1 !important;
  margin-top: 16px !important;
  background-color: var(--pk-bg) !important;
}
.l-wrapper-inner,
.l-wrapper-inner.container,
.l-wrapper-inner.container-fluid {
  max-width: 1040px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: var(--pk-surface) !important;
  border-radius: var(--pk-r-lg) !important;
  box-shadow: var(--pk-shadow-m) !important;
  border: 1px solid var(--pk-border) !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Breadcrumb above page title */
.l-wrapper-inner > .l-top { order: -1 !important; }

div.l-page-title {
  padding: 20px 28px 0 28px !important;
  background: var(--pk-surface) !important;
  display: block !important;
}
div.l-page-title a#main-content { display: block; height: 0; overflow: hidden; }

.l-wrapper-inner > .l-middle { background: var(--pk-surface); min-height: 300px; padding-bottom: 50px; }
.l-middle.row {
  display: flex !important;
  flex-wrap: nowrap !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
main.l-content, .l-content {
  flex: 1 !important;
  min-width: 0 !important;
  padding: 28px 32px 48px 32px !important;
  box-sizing: border-box !important;
  max-width: none !important;
  width: auto !important;
}
.l-content p, .l-content li {
  font-size: 14px !important;
  color: var(--pk-text) !important;
  max-width: none;
}
.l-content ul li, .l-content ol li { margin-left: 20px !important; margin-bottom: 4px !important; }


/* ============================================================ */
/* GLOBAL COL-MD FIX — full-width content on all pages           */
/* ============================================================ */
main.l-content.col-md-6 {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
  margin-left: 0 !important;
  left: 0 !important;
}
main.l-content.col-md-push-3 {
  left: 0 !important;
  margin-left: 0 !important;
}

/* Hide sidebars that contain no visible block content */
.l-sidebar.col-md-3:not(:has(.block)),
.l-sidebar-first.col-md-3:not(:has(.block)),
.l-sidebar-second.col-md-3:not(:has(.block)) {
  display: none !important;
  width: 0 !important;
  flex: 0 !important;
  padding: 0 !important;
}

/* ============================================================ */
/* TABS                                                          */
/* ============================================================ */
html body nav.tabs,
html body nav[role="tablist"] {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-bottom: 1px solid var(--pk-border) !important;
  padding: 0 0 0 20px !important;
  margin: 0 !important;
}
html body nav.tabs ul,
html body nav[role="tablist"] ul,
ul.primary {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  display: flex !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  gap: 0 !important;
}
html body nav.tabs ul li,
html body nav[role="tablist"] ul li,
ul.primary li {
  list-style: none !important;
  display: inline !important;
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body nav.tabs ul li a,
html body nav[role="tablist"] ul li a,
ul.primary li a {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 10px 18px !important;
  margin-right: 0 !important;
  display: inline-block !important;
  font-family: var(--pk-sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--pk-text-2) !important;
  letter-spacing: 0.01em !important;
  text-decoration: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: color 0.15s, border-color 0.15s !important;
}
html body nav.tabs ul li a:hover {
  background: transparent !important;
  color: var(--pk-green-800) !important;
  border-bottom-color: var(--pk-border) !important;
}
html body nav.tabs ul li.active a,
html body nav[role="tablist"] ul li.is-active a {
  background: transparent !important;
  color: var(--pk-green-800) !important;
  border-bottom: 2px solid var(--pk-green-600) !important;
  font-weight: 600 !important;
}

/* ---- Secondary tabs (Collaboration, View Groups, etc.) ---- */
nav.tabs ul.secondary,
ul.secondary {
  list-style: none !important;
  margin: 0 !important;
  padding: 4px 4px 0 !important;
  display: flex !important;
  gap: 6px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
nav.tabs ul.secondary li, ul.secondary li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline !important;
}
nav.tabs ul.secondary li a,
ul.secondary li a {
  display: inline-block !important;
  background: #f1f5f9 !important;
  border: 1px solid var(--pk-border) !important;
  border-radius: 20px !important;
  padding: 6px 16px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: all 0.15s !important;
}
nav.tabs ul.secondary li a:hover,
ul.secondary li a:hover {
  background: #e2e8f0 !important;
  color: #1e293b !important;
}
nav.tabs ul.secondary li.active a,
ul.secondary li.active a,
ul.secondary li.is-active a {
  background: var(--pk-green-800) !important;
  color: #fff !important;
  border-color: var(--pk-green-800) !important;
  font-weight: 600 !important;
}

/* ============================================================ */
/* SIDEBAR (non-Bootstrap, flex-based)                           */
/* ============================================================ */
.l-sidebar, .l-sidebar-first, .l-sidebar-second {
  flex-shrink: 0 !important;
  flex: 0 0 240px !important;
  width: 240px !important;
  max-width: 240px !important;
  padding-top: 28px !important;
  padding-left: 24px !important;
  padding-right: 12px !important;
  box-sizing: border-box !important;
  border-left: 1px solid var(--pk-border-lt) !important;
}
.l-sidebar .block {
  margin-bottom: 28px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.l-sidebar .block-title,
.l-sidebar .block h2 {
  font-family: var(--pk-sans) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--pk-text-2) !important;
  border-bottom: 2px solid var(--pk-green-600) !important;
  padding-bottom: 8px !important;
  margin-bottom: 12px !important;
}
.l-sidebar ul, .l-sidebar .view-content ul { list-style: none; padding: 0; margin: 0; }
.l-sidebar ul li, .l-sidebar .view-content li, .l-sidebar .views-row { margin: 0 !important; padding: 0; list-style: none; }
.l-sidebar a {
  font-family: var(--pk-sans) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--pk-green-800) !important;
  display: block !important;
  padding: 5px 0 5px 20px !important;
  background: transparent url('/themes/phenotype/images/page_phenotype_small.png') no-repeat left center !important;
  border-radius: var(--pk-r-sm) !important;
  transition: background-color 0.12s !important;
  text-decoration: none !important;
}
.l-sidebar a:hover { color: var(--pk-green-600) !important; background-color: var(--pk-hover) !important; text-decoration: none !important; }
.l-sidebar table { border: none !important; width: 100% !important; border-collapse: collapse !important; }
.l-sidebar table td { padding: 5px 4px !important; font-size: 13px !important; border-bottom: 1px solid #f0f0f0 !important; }
.l-sidebar table tr:hover td { background: var(--pk-green-50) !important; }
.l-sidebar .views-table .views-field a {
  font-size: 12px !important;
  display: inline-block !important;
  color: var(--pk-green-800) !important;
  padding-left: 20px !important;
  background: transparent url('/themes/phenotype/images/page_phenotype_small.png') no-repeat left center !important;
}

/* ============================================================ */
/* TABLES                                                        */
/* ============================================================ */
table {
  border: 1px solid var(--pk-border) !important;
  border-collapse: collapse !important;
  width: 100% !important;
  font-size: 13px !important;
}
thead th, th {
  background: #f8fafc !important;
  color: var(--pk-text) !important;
  font-family: var(--pk-sans) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--pk-border) !important;
  text-align: left !important;
}
td { padding: 10px 12px !important; font-size: 13px !important; vertical-align: middle !important; border-bottom: 1px solid var(--pk-border-lt) !important; }
tbody tr:nth-child(even) td { background: #f8fafc !important; }
tbody tr:nth-child(odd) td { background: var(--pk-surface) !important; }
tr:hover td { background: var(--pk-green-50) !important; }

/* ============================================================ */
/* L-TOP & BREADCRUMB                                            */
/* ============================================================ */
.l-top, div.l-top {
  padding: 0 28px !important;
  background: var(--pk-surface) !important;
  box-shadow: none !important;
  margin: 0 !important;
  border: none !important;
}
.l-top > *, .l-top > * > *, .l-top > * > * > * {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.l-top .block-title, .l-top h2.block-title { display: none !important; }

nav.breadcrumb, .breadcrumb {
  margin: 3em 0 12px 0 !important;
  font-size: 12px !important;
  font-family: var(--pk-sans) !important;
  background: transparent !important;
  border: none !important;
  padding: 4px 0 !important;
  color: var(--pk-text-3) !important;
}
nav.breadcrumb ol, .breadcrumb ol {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
nav.breadcrumb ol li, .breadcrumb ol li, .l-top nav.breadcrumb ol li {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline !important;
  font-size: 12px !important;
  color: var(--pk-text-3) !important;
}
nav.breadcrumb ol li:first-child a, .breadcrumb ol li:first-child a {
  font-size: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  padding: 0 !important;
  color: transparent !important;
}
nav.breadcrumb ol li:first-child a img {
  display: none !important;
}
nav.breadcrumb ol li:first-child a::before, .breadcrumb ol li:first-child a::before {
  content: '\1F3E0' !important;
  font-size: 14px !important;
  color: var(--pk-green-800) !important;
  display: inline-block !important;
}
nav.breadcrumb ol li + li, .breadcrumb ol li + li { display: inline !important; visibility: visible !important; }
nav.breadcrumb ol li + li::before, .breadcrumb ol li + li::before {
  content: '›' !important;
  display: inline !important;
  visibility: visible !important;
  color: var(--pk-text-3) !important;
  padding: 0 6px !important;
  font-size: 14px !important;
  width: auto !important;
  height: auto !important;
}
nav.breadcrumb ol li:last-child a[aria-current="page"],
.breadcrumb ol li:last-child a[aria-current="page"] {
  color: var(--pk-text-2) !important;
  pointer-events: none !important;
}
nav.breadcrumb a, .breadcrumb a { color: var(--pk-text-2) !important; font-size: 12px !important; }
nav.breadcrumb a:hover, .breadcrumb a:hover { color: var(--pk-green-800) !important; text-decoration: underline !important; }

/* ============================================================ */
/* FOOTER                                                        */
/* ============================================================ */
.l-footer {
  background-color: var(--pk-green-900) !important;
  color: #94a3b8 !important;
  border-top: none !important;
  margin-top: 0;
}
.l-footer .block, .l-footer .block-content {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  color: #94a3b8 !important;
  padding: 0 !important;
}
.l-footer-inner, .l-footer .l-footer-inner, .l-footer .container, .l-footer .container-fluid {
  max-width: 1040px !important;
  margin: 0 auto !important;
  padding: 28px 32px !important;
}
.l-footer h1, .l-footer h2, .l-footer h3, .l-footer h4, .l-footer .block-title {
  font-family: var(--pk-sans) !important;
  font-size: 14px !important;
  border: none !important;
  color: #94a3b8 !important;
  font-weight: normal !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
}
.l-footer p { font-size: 13px !important; color: #94a3b8 !important; margin: 0 !important; }
.l-footer a { color: #6ee7b7 !important; text-decoration: none !important; }
.l-footer a:hover { color: #a7f3d0 !important; }
.l-footer ul { list-style: none; padding: 0; margin: 0; }
.l-footer ul li { padding: 2px 0; margin-left: 0 !important; font-size: 14px; }

/* ============================================================ */
/* MESSAGES                                                      */
/* ============================================================ */
.l-wrapper-inner > .l-messages { background: var(--pk-surface); padding: 0 14px; }
.messages {
  border-radius: var(--pk-r-md) !important;
  padding: 14px 18px !important;
  font-size: 14px !important;
  margin: 14px 28px !important;
  border-left: 4px solid !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  box-shadow: var(--pk-shadow-s) !important;
}
.messages.status { background: #f0fdf4 !important; border-color: #16a34a !important; color: #166534 !important; padding-left: 50px !important; }
.messages.warning { background: #fffbeb !important; border-color: #f59e0b !important; color: #92400e !important; padding-left: 50px !important; }
.messages.error { background: #fef2f2 !important; border-color: #ef4444 !important; color: #991b1b !important; padding-left: 50px !important; }

/* ============================================================ */
/* FORMS                                                         */
/* ============================================================ */
input[type="text"], input[type="email"], input[type="password"], input[type="search"], textarea, select {
  border: 1px solid var(--pk-border) !important;
  border-radius: var(--pk-r-md) !important;
  padding: 9px 14px !important;
  font-size: 14px !important;
  font-family: var(--pk-sans) !important;
  color: var(--pk-text) !important;
  background: var(--pk-surface) !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
  height: auto !important;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea:focus, select:focus {
  border-color: var(--pk-green-600) !important;
  box-shadow: 0 0 0 3px var(--pk-focus) !important;
  outline: none !important;
}
input[type="submit"], button, .form-submit {
  border-radius: var(--pk-r-md) !important;
  background: var(--pk-green-800) !important;
  color: #fff !important;
  border: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: var(--pk-sans) !important;
  cursor: pointer !important;
  letter-spacing: 0.02em !important;
  transition: background 0.15s, box-shadow 0.15s !important;
  text-shadow: none !important;
  box-shadow: var(--pk-shadow-s) !important;
}
input[type="submit"]:hover, button:hover, .form-submit:hover { background: var(--pk-green-600) !important; box-shadow: var(--pk-shadow-m) !important; }

/* ============================================================ */
/* NODE / FIELD                                                  */
/* ============================================================ */
.field { margin-bottom: 18px !important; }
.field-label { font-weight: 600 !important; font-size: 13px !important; color: var(--pk-text-2) !important; }

/* ============================================================ */
/* PAGER                                                         */
/* ============================================================ */
.item-list .pager {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 20px 0 !important;
  display: inline-flex !important;
  list-style: none !important;
  gap: 4px !important;
  overflow: visible !important;
}
.item-list .pager li { display: inline !important; border: none !important; margin: 0 !important; padding: 0 !important; float: none !important; }
.item-list .pager li a {
  display: inline-block !important;
  padding: 6px 12px !important;
  background: var(--pk-surface) !important;
  color: var(--pk-text) !important;
  text-decoration: none !important;
  font: 600 12px/1.4 var(--pk-sans) !important;
  border: 1px solid var(--pk-border) !important;
  border-radius: var(--pk-r-sm) !important;
  transition: all 0.15s !important;
}
.item-list .pager li a:hover { background: var(--pk-hover) !important; border-color: var(--pk-text-3) !important; }
.item-list .pager li.pager-current {
  padding: 6px 12px !important;
  font: 600 12px/1.4 var(--pk-sans) !important;
  color: #fff !important;
  background: var(--pk-green-800) !important;
  border-radius: var(--pk-r-sm) !important;
  display: inline-block !important;
}

/* ============================================================ */
/* PHENOTYPES LISTING PAGE                                       */
/* ============================================================ */


/* Full-width layout for phenotypes page only */

/* Phenotypes page - block uses full content width */
.page-phenotypes .l-content {
  padding: 16px 0 48px 0 !important;
}
.page-phenotypes .block-phenotype-table-phenotype-table {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 16px !important;
}

.page-phenotypes .l-wrapper-inner,
.page-phenotypes .l-wrapper-inner.container,
.page-phenotypes .l-wrapper-inner.container-fluid {
  max-width: 1040px !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
}
.page-phenotypes .l-wrapper {
  margin-top: 0 !important;
}

.context-phenotypes h1.page-title,
.page-phenotypes h1.page-title { font-size: 28px !important; padding-top: 0 !important; }

.views-exposed-form {
  background: #f8fafc !important;
  border: 1px solid var(--pk-border) !important;
  border-radius: var(--pk-r-md) !important;
  padding: 16px 18px 12px !important;
  margin-bottom: 18px !important;
  box-shadow: none !important;
  width: 100% !important;
}
.views-exposed-form .views-exposed-widgets { display: flex !important; flex-wrap: wrap !important; gap: 14px !important; align-items: flex-end !important; }
.views-exposed-form .views-exposed-widget { margin: 0 !important; padding: 0 !important; }
.views-exposed-form label {
  font-family: var(--pk-sans) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--pk-text) !important;
  display: block !important;
  margin-bottom: 4px !important;
}
.views-exposed-form select { border: 1px solid #c1c1c1 !important; border-radius: var(--pk-r-sm) !important; font-size: 13px !important; padding: 4px 6px !important; background: #fff !important; height: auto !important; }
.views-exposed-form select[multiple], .views-exposed-form select[size] { height: 90px !important; width: 170px !important; font-size: 12px !important; }
.views-exposed-form input[type="text"] { border: 1px solid #c1c1c1 !important; border-radius: var(--pk-r-sm) !important; font-size: 13px !important; padding: 4px 8px !important; height: auto !important; }
.views-exposed-form input[type="submit"] { background: var(--pk-green-800) !important; border-radius: var(--pk-r-sm) !important; font-size: 13px !important; text-transform: none !important; letter-spacing: normal !important; }
.views-exposed-form input[type="submit"]:hover { background: var(--pk-green-600) !important; }

/* Phenotypes listing — full width, hide sidebars */
.page-phenotypes .l-content, .page-phenotypes main.l-content { width: 100% !important; max-width: 100% !important; flex: 1 1 auto !important; }
.page-phenotypes .l-sidebar, .page-phenotypes .l-sidebar-first, .page-phenotypes .l-sidebar-second { display: none !important; }
.page-phenotypes .view-phenotypes, .page-phenotypes .view-phenotypes .view-content, .page-phenotypes .view-phenotypes .view-filters { width: 100% !important; }

.view-phenotypes table, .context-phenotypes table {
  border: 1px solid var(--pk-border) !important;
  border-radius: var(--pk-r-md) !important;
  box-shadow: var(--pk-shadow-s) !important;
  overflow: hidden !important;
  table-layout: auto !important;
}
.view-phenotypes .views-field-title a { color: var(--pk-green-800) !important; font-weight: 600 !important; font-size: 13px !important; }
.view-phenotypes .views-field-title a:hover { color: var(--pk-green-600) !important; }
.view-phenotypes .views-field-field-p-status { font-weight: 600 !important; color: var(--pk-green-600) !important; font-size: 12px !important; text-transform: uppercase !important; letter-spacing: 0.03em !important; padding: 0 0 0 4px !important}
.view-phenotypes td.views-field-field-pgx-type { font-weight: normal !important; color: var(--pk-text) !important; }
.view-phenotypes td.views-field-field-owner-pgroup { word-break: normal !important; overflow-wrap: break-word !important; min-width: 120px !important; max-width: 200px !important; }
.view-phenotypes .views-field-field-institution { font-size: 12px !important; color: var(--pk-text-2) !important; }

.view-name-phenotypes .layout--simmons .l-wrapper .l-wrapper-inner .l-middle .l-sidebar,
.view-name-user_search .layout--simmons .l-wrapper .l-wrapper-inner .l-middle .l-sidebar,
.layout--simmons .l-wrapper .l-wrapper-inner .l-middle .l-sidebar {
  display: none !important;
}
.view-phenotypes table {
  border: 1px solid var(--pk-border) !important;
  border-radius: var(--pk-r-md) !important;
  box-shadow: var(--pk-shadow-s) !important;
  overflow: hidden !important;
  table-layout: fixed !important;
}
th.views-field{
  padding: 5px !important;
}

th:last-child {
  border-right-color: var(--pk-border);
}
th.views-field-counter,
th.views-field-edit-node {
  width: 48px !important;
}
th.views-field-title {
  width: 150px !important;
}

th.views-field-field-institution {
  width: 100px !important;
}
th.views-field-field-owner-pgroup,
th.views-field-field-view-pgroup {
  width:120px !important;
}
th.views-field-field-class {
  width:78px !important;
}
th.views-field-field-p-status {
  width: 103px !important;
}
th.views-field-timestamp {
  width: 70px !important;
}
th.views-field-field-case-true-negative {
  width: 72px !important;
}
th.views-field-last-updated {
  width: 80px !important;
}

td.views-field {
  padding: 5px 8px !important;
  word-wrap: break-word !important;  
  vertical-align: middle !important;
  font-size: 12px !important;
  border-color: #bbbbbb;
}


/* ============================================================ */
/* ANGULAR / PRIMENG TABLE OVERRIDES                             */
/* ============================================================ */
.p-datatable .p-datatable-thead > tr > th {
  background: #f8fafc !important;
  color: var(--pk-text-2) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  border-bottom: 1px solid var(--pk-border) !important;
  border-left: none !important;
}
.p-datatable .p-datatable-wrapper, .p-datatable table { border: 1px solid var(--pk-border) !important; }
.p-datatable .p-column-filter-menu-button { background: transparent !important; border: none !important; color: #999 !important; padding: 2px !important; box-shadow: none !important; }
.p-datatable .p-column-filter-menu-button .pi, .p-column-filter-menu-button .p-icon { color: var(--pk-green-600) !important; font-size: 14px !important; }
.p-datatable .p-column-filter-menu-button:hover { color: #666 !important; }
.p-datatable .p-column-filter-menu-button.p-column-filter-menu-button-active { color: var(--pk-green-800) !important; }
.p-datatable .p-sortable-column-icon { color: var(--pk-green-600) !important; font-size: 13px !important; }
.p-paginator { background: transparent !important; border: none !important; padding: 12px 0 !important; }
.p-paginator .p-paginator-page, .p-paginator .p-paginator-first, .p-paginator .p-paginator-prev, .p-paginator .p-paginator-next, .p-paginator .p-paginator-last {
  background: #fff !important; color: #333 !important; border: 1px solid var(--pk-border) !important; border-radius: var(--pk-r-sm) !important; min-width: 32px !important; height: 32px !important; margin: 0 2px !important; font-size: 13px !important; box-shadow: none !important;
}
.p-paginator .p-paginator-page.p-highlight, .p-paginator .p-highlight { background: var(--pk-green-800) !important; color: #fff !important; border-color: var(--pk-green-800) !important; }

/* Larger text and row height for phenotype table */
.p-datatable .p-datatable-tbody > tr > td {
  font-size: 15px !important;
  padding: 18px 20px !important;
  line-height: 1.7 !important;
  color: var(--pk-text) !important;
}
.p-datatable .p-datatable-thead > tr > th {
  font-size: 14px !important;
  padding: 18px 20px !important;
  line-height: 1.6 !important;
}

@media (max-width: 768px ) {
.p-datatable .p-datatable-thead > tr > th {
  font-size: 0.6rem !important;}
}

/* ============================================================ */
/* PHENOTYPE DETAIL PAGE                                         */
/* ============================================================ */
.node-type-phenotype .l-sidebar, .node-type-phenotype .l-sidebar-first, .node-type-phenotype .l-sidebar-second { display: none !important; }
.node-type-phenotype main.l-content, .node-type-phenotype .l-content { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important;}

/* Grid layout */
.node-phenotype .node-content { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px 32px !important; align-items: start !important; grid-auto-flow: dense !important; padding-top: 8px !important; }
.node-phenotype .node-content > .field-name-body { grid-column: 1 / -1 !important; }
.node-phenotype .node-content > .field-name-field-structured-data,
.node-phenotype .node-content > .field-name-field-unstructured-data,
.node-phenotype .node-content > .field-name-field-data-source-clinical,
.node-phenotype .node-content > .field-name-field-related-codes,
.node-phenotype .node-content > .field-name-field-algorithm-type2,
.node-phenotype .node-content > .field-name-field-data-model,
.node-phenotype .node-content > .field-name-field-class,
.node-phenotype .node-content > .field-name-field-pgx-type,
.node-phenotype .node-content > .field-name-field-covid-19,
.node-phenotype .node-content > .field-name-field-primary-use-case,
.node-phenotype .node-content > .field-name-field-files,
.node-phenotype .node-content > .field-name-field-urls { grid-column: 1 !important; }
.node-phenotype .node-content > .field-group-fieldset { grid-column: 1 / -1 !important; max-width: 420px !important; }
.node-phenotype .node-content > .field-name-body ~ .field-group-fieldset { grid-column: 2 !important; max-width: none !important; }
.node-phenotype .node-content > .field-group-fieldset.group-legacy, .node-phenotype .node-content > fieldset.group-legacy, .node-phenotype .node-content > nav, .node-phenotype .node-content > .links { grid-column: 1 / -1 !important; max-width: none !important; }

.node-phenotype .node-content > .field-name-body .field-items p { line-height: 1.8 !important; }
.node-phenotype .node-content > .field-name-field-unstructured-data,
.node-phenotype .node-content > .field-name-field-structured-data,
.node-phenotype .node-content > .field-name-field-data-source-clinical
{ margin: 20px 0 0 0 !important; }
.node-phenotype .node-content > .field-name-field-files,
.field-name-phekb-subscribers { margin: 20px 0 !important; }
.node-phenotype .node-content:has(.field-name-field-data-source-clinical) .field-name-phekb-subscribers { margin-bottom: 0 !important; }

@media (max-width: 768px) {
  .node-phenotype .node-content { grid-template-columns: 1fr !important; }
  .node-phenotype .node-content > * { grid-column: 1 !important; max-width: none !important; }
}

/* Page title */
.node-type-phenotype h1.page-title, .node-type-phenotype h1#page-title {
  font-family: var(--pk-sans) !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  padding-left: 40px !important;
  padding-bottom: 8px !important;
  margin-bottom: 16px !important;
  border-bottom: 1px solid var(--pk-border) !important;
  background: transparent url(/themes/phenotype/images/page_phenotype.png) no-repeat left top !important;
}

/* Body text */
.node-phenotype .field-name-body, body.node-type-phenotype .field-name-body {
  background-color: var(--pk-border-lt) !important;
  border-radius: var(--pk-r-lg) !important;
  padding: 24px 28px !important;
  border: 1px solid var(--pk-text-3) !important;
  margin-bottom: 24px !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: var(--pk-text) !important;
}

/* Fields */
.page-node article.node-phenotype .field { display: block !important; margin-bottom: 18px !important; clear: none !important; }
.page-node article.node-phenotype .field-label {
  font-family: var(--pk-sans) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  color: var(--pk-text-2) !important;
  margin: 0 0 4px 0 !important;
  padding-left: 22px !important;
  letter-spacing: 0.02em !important;
}
.page-node article.node-phenotype .field-items { margin-left: 0 !important; font-size: 13px !important; line-height: 1.5 !important; color: var(--pk-text) !important; }
.page-node article.node-phenotype .field-items .field-item { font-size: inherit !important; padding-right: 4px !important; }
.page-node article.node-phenotype .field-label-inline .field-items .field-item { display: inline-block !important; }
.page-node article.node-phenotype .field-name-body .field-item { font-size: 14px !important; }
.node-phenotype .field-items a { color: var(--pk-green-800) !important; }
.node-phenotype .field-items a:hover { color: var(--pk-green-600) !important; text-decoration: underline !important; }

/* Group requests */
.page-top-links {
margin-top: 10px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
column-gap: 15px;
line-height: 1.6;
font-size: 14px;
font-weight: 500;
}

h4.page_top .field-label button,
.view-phenotypes-my-groups .view-header button {
  padding: 9px 20px !important;
}

table.sticky-header {
    width: auto;
    max-width: 64% !important; /* Sticky header width matches table width */
}


/* Field label icons */
.page-node article.node-phenotype .field-name-field-class .field-label { background: transparent url(/themes/phenotype/images/sitemap_color_small.png) no-repeat left center !important; }
.page-node article.node-phenotype .field-name-field-author .field-label { background: transparent url(/themes/phenotype/images/author_small.png) no-repeat left center !important; }
.page-node article.node-phenotype .field-name-field-files .field-label { background: transparent url(/themes/phenotype/images/files_small.png) no-repeat left center !important; }
.page-node article.node-phenotype .field-name-field-phenotype-id .field-label { background: transparent url(/themes/phenotype/images/status_small.png) no-repeat left center !important; }
.page-node article.node-phenotype .field-name-field-pgx-type .field-label { background: transparent url(/themes/phenotype/images/status_small.png) no-repeat left center !important; }
.page-node article.node-phenotype .field-name-field-p-status .field-label { background: transparent url(/themes/phenotype/images/status_small.png) no-repeat left center !important; }
.page-node article.node-phenotype .field-name-field-owner-pgroup .field-label,
.page-node article.node-phenotype .field-name-field-view-pgroup .field-label { background: transparent url(/themes/phenotype/images/group_small.png) no-repeat left center !important; }
.page-node article.node-phenotype .field-name-field-institution .field-label { background: transparent url(/themes/phenotype/images/building_small.png) no-repeat left center !important; }
.page-node article.node-phenotype .field-name-field-created-at .field-label { background: transparent url(/themes/phenotype/images/date_small.png) no-repeat left center !important; }
.page-node article.node-phenotype .field-name-field-ages .field-label,
.page-node article.node-phenotype .field-name-field-gender .field-label,
.page-node article.node-phenotype .field-name-field-race .field-label,
.page-node article.node-phenotype .field-name-field-ethnicity .field-label { background: transparent url(/themes/phenotype/images/sitemap_color_small.png) no-repeat left center !important; }
.page-node article.node-phenotype .field-name-field-network-associations .field-label { background: transparent url(/themes/phenotype/images/network_small.png) no-repeat left center !important; }
.page-node article.node-phenotype .field-name-field-contact-author .field-label { background: transparent url(/themes/phenotype/images/contact_small.png) no-repeat left center !important; }
.page-node article.node-phenotype .field-name-field-urls .field-label { background: transparent url(/themes/phenotype/images/url_small.png) no-repeat left center !important; }
.page-node article.node-phenotype .field-name-field-structured-data .field-label { background: transparent url(/themes/phenotype/images/files_small.png) no-repeat left center !important; }
.page-node article.node-phenotype .field-name-field-data-source-clinical .field-label { background: transparent url(/themes/phenotype/images/files_small.png) no-repeat left center !important; }
.field-name-field-phenotype-id .field-item { font-weight: bold !important; }

/* Files */
.page-node article.node-phenotype .field-name-field-files .field-items { margin-left: 8px !important; }
.page-node article.node-phenotype .field-name-field-files .field-items .field-item { margin: 5px 0 0 14px !important; line-height: 1.4 !important; }

/* Fieldsets */
.node-phenotype fieldset, .node-phenotype details, .node-phenotype .field-group-fieldset {
  border: 1px solid var(--pk-border) !important;
  border-radius: var(--pk-r-md) !important;
  margin-bottom: 16px !important;
  padding: 14px 18px !important;
  background: var(--pk-surface) !important;
  box-shadow: var(--pk-shadow-s) !important;
}
.node-phenotype fieldset legend, .node-phenotype details summary, .node-phenotype .field-group-fieldset > legend {
  font-family: var(--pk-sans) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  color: var(--pk-text-2) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 4px 10px !important;
  margin: 0 0 0 -4px !important;
  background: var(--pk-surface) !important;
  border: none !important;
  width: auto !important;
  display: inline !important;
  text-decoration: none !important;
  cursor: pointer !important;
}
.node-phenotype fieldset legend span, .node-phenotype fieldset legend a, .node-phenotype .field-group-fieldset legend span { text-decoration: none !important; border: none !important; }
.node-phenotype fieldset .fieldset-wrapper, .node-phenotype .field-group-fieldset .fieldset-wrapper { padding: 10px 6px 6px 6px !important; }

.node-phenotype .node-content > .field-name-field-unstructured-data
/* Suggested Citation */
.field-phekb-citation { border-top: 1px solid var(--pk-border) !important; clear: both !important; }
.field-phekb-citation h3 { font-family: var(--pk-sans) !important; font-size: 16px !important; font-weight: 600 !important; color: var(--pk-text) !important; margin-bottom: 8px !important; border-bottom: 1px solid var(--pk-border) !important; padding-bottom: 6px !important; }
.field-phekb-citation .field-items { font-size: 13px !important; color: var(--pk-text-2) !important; line-height: 1.6 !important; }

/* Node links */
article.node-phenotype nav.links, .node-phenotype .links.node-links { color: var(--pk-text-3) !important; font-size: 13px !important; margin: 12px 0 !important; padding: 0 !important; }
article.node-phenotype nav.links ul, .node-phenotype .links.node-links ul { margin: 0 !important; padding: 0 !important; }
article.node-phenotype nav.links li, .node-phenotype .links.node-links li { display: inline !important; list-style: none !important; margin: 0 !important; padding: 0 !important; }
article.node-phenotype nav.links a, .node-phenotype .links.node-links a { color: var(--pk-green-800) !important; font-size: 13px !important; display: inline-block !important; margin: 0 0.25em !important; background: transparent !important; padding: 0 !important; border-radius: 0 !important; }
article.node-phenotype nav.links a:hover { text-decoration: underline !important; }

/* Comments */
section.comments, #comments {
  background-color: #f8fafc !important;
  border: 1px solid var(--pk-border) !important;
  border-radius: var(--pk-r-md) !important;
  padding: 0 20px 20px 20px !important;
  margin-top: 24px !important;
  box-shadow: none !important;
}
section.comments > h2, #comments > h2 { font-family: var(--pk-sans) !important; font-size: 18px !important; font-weight: 600 !important; border-bottom: none !important; margin-top: 18px !important; text-align: center !important; }
article.comment { margin-bottom: 12px !important; background: transparent !important; border: none !important; padding: 0 !important; box-shadow: none !important; }
.comment .attribution, .comment .username { font-style: italic !important; font-size: 13px !important; color: var(--pk-text-2) !important; }
.comment .comment-body, .comment .content { border: 1px solid var(--pk-border) !important; border-radius: var(--pk-r-sm) !important; padding: 14px 16px !important; background: var(--pk-surface) !important; }
.comment .submitted { font-style: italic !important; font-size: 12px !important; color: var(--pk-text-3) !important; margin-bottom: 6px !important; }
.comment h3, .comment h3 a { font-family: var(--pk-sans) !important; font-size: 16px !important; color: var(--pk-green-800) !important; text-decoration: none !important; border: none !important; }
.comment ul.links, .comment nav.links ul { display: flex !important; justify-content: flex-end !important; list-style: none !important; margin: 0 !important; padding: 0 !important; }
.comment ul.links a, .comment nav.links a { background: transparent !important; color: var(--pk-green-800) !important; padding: 6px 16px !important; font-size: 12px !important; text-decoration: none !important; display: inline-block !important; border-radius: var(--pk-r-sm) !important; margin: 4px 0 0 4px !important; }
.comment ul.links a:hover { background: transparent !important; }
section.comments h2.comment-form { text-align: left !important; margin-top: 20px !important; font-size: 18px !important; border-bottom: none !important; }

/* User picture */
.page-node .node-phenotype .user-picture { margin-left: 14px !important; }
.page-node .node-phenotype .user-picture img { width: 20px !important; height: 20px !important; }

/* PubMed references */
#pubmed-references { margin-left: 35px !important; }
#pubmed-references h3 { font-family: var(--pk-sans) !important; font-size: 16px !important; font-weight: 600 !important; color: var(--pk-text) !important; margin-bottom: 10px !important; border-bottom: 1px solid var(--pk-border) !important; padding-bottom: 6px !important; }
#references-hidden { display: none !important; }

/* ============================================================ */
/* VALIDATION / DATA DICTIONARY PAGES                            */
/* ============================================================ */
.node-type-phenotype .l-content, .node-type-implementation .l-content { text-align: left !important; }

.node-type-phenotype .l-content form fieldset {
  border: 1px solid var(--pk-border) !important;
  border-radius: var(--pk-r-md) !important;
  margin-bottom: 20px !important;
  padding: 0 !important;
  background: var(--pk-surface) !important;
  box-shadow: var(--pk-shadow-s) !important;
}
.node-type-phenotype .l-content form fieldset legend {
  font-family: var(--pk-sans) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--pk-text-2) !important;
  padding: 6px 14px !important;
}
.node-type-phenotype .l-content form fieldset .fieldset-wrapper { padding: 18px !important; }
.form-item .file_link { margin: 0 0 1.5em !important; }
/* Implementations table */
.implementations_table { border: 1px solid var(--pk-border) !important; border-radius: var(--pk-r-md) !important; overflow: hidden !important; box-shadow: var(--pk-shadow-s) !important; }
.implementation_summary .imp_title a { color: var(--pk-green-800) !important; font-weight: 600 !important; }
.implementation_summary .institution_title { font-size: 12px !important; color: var(--pk-text-2) !important; }
.implementation_summary .algorithm_type { font-size: 12px !important; color: var(--pk-text-3) !important; }
.implementation_summary .date { font-size: 11px !important; color: var(--pk-text-3) !important; margin-top: 4px !important; }
.new_node_button_form { margin-bottom: 16px !important; text-align: left !important; }
table.implementations_table th:last-child { width: 170px !important; }
/* ============================================================ */
/* IMPLEMENTATION NODE PAGE                                      */
/* ============================================================ */

/* Hide sidebars, full-width content */
.node-type-implementation .l-sidebar,
.node-type-implementation .l-sidebar-first,
.node-type-implementation .l-sidebar-second {
  display: none !important;
  width: 0 !important;
  flex: 0 !important;
  padding: 0 !important;
}
.node-type-implementation main.l-content,
.node-type-implementation .l-content {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
}


/* Validation result containers */
.validation-result {
  margin-bottom: 20px !important;
}

/* Collapsible fieldsets in validation forms */
.node-type-implementation fieldset.collapsible,
.node-type-implementation fieldset {
  border: 1px solid var(--pk-border) !important;
  border-radius: var(--pk-r-md) !important;
  margin-bottom: 16px !important;
  padding: 0 !important;
  background: var(--pk-surface) !important;
  box-shadow: var(--pk-shadow-s) !important;
  overflow: visible !important;
}

/* Legend — plain text, not a dark button */
.node-type-implementation fieldset legend,
.node-type-implementation fieldset.collapsible legend,
.node-type-implementation fieldset.collapse-processed legend {
  font-family: var(--pk-sans) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--pk-text) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  width: 100% !important;
  display: block !important;
  cursor: pointer !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  border-radius: 0 !important;
}

/* Legend inner elements — fieldset-legend span, fieldset-title link, summary span */
.node-type-implementation fieldset legend span.fieldset-legend,
.node-type-implementation fieldset legend a.fieldset-title,
.node-type-implementation fieldset legend span.summary {
  color: var(--pk-text) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  border-radius: 0 !important;
  text-shadow: none !important;
}
.node-type-implementation fieldset legend a.fieldset-title:hover {
  color: var(--pk-green-800) !important;
  background: transparent !important;
  text-decoration: underline !important;
}
.node-type-implementation fieldset legend span.summary {
  font-weight: 400 !important;
  color: var(--pk-text-3) !important;
  font-size: 12px !important;
  margin-left: 6px !important;
}

/* Validation result fieldsets — error and ok variants */
.node-type-implementation fieldset.validation-result-wrapper {
  border: 1px solid var(--pk-border) !important;
  border-radius: var(--pk-r-sm) !important;
  margin-bottom: 10px !important;
  background: var(--pk-surface) !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.node-type-implementation fieldset.collapsible-error {
  border-left: 4px solid #ef4444 !important;
}
.node-type-implementation fieldset.collapsible-ok {
  border-left: 4px solid #16a34a !important;
}

.phenotype-validate-datafile-form p.warning {
  color:  #840 !important;
}
/* Validation results header */
.node-type-implementation .validation-results-header {
  margin-bottom: 10px !important;
  font-size: 13px !important;
}

.phenotype-validate-datafile-form .validation-results-header {
  display: none !important;
}
#results-1-wrapper fieldset.form-wrapper {
  display: none !important;
}
#results-1-wrapper fieldset.form-wrapper:has(.validation-result-wrapper) {
  display: block !important;
  padding: 18px 0 0 0 !important;
  border: none !important;
}

.form-wrapper#edit-results--2 {
  border: none !important;
}

/* Fix Backdrop collapse arrow positioning */
.js fieldset.collapsible .fieldset-legend a::before,
.node-type-implementation fieldset.collapsible .fieldset-legend a.fieldset-title::before,
fieldset.collapsible .fieldset-legend a.fieldset-title::before,
fieldset.collapsible .fieldset-legend a::before {
  display: inline-block !important;
  position: static !important;
  vertical-align: middle !important;
  margin-right: 6px !important;
  margin-top: -2px !important;
  border-top-color: var(--pk-text-3) !important;
  float: none !important;
  top: auto !important;
  left: auto !important;
}

/* The fieldset-title link itself must be inline */
.js fieldset.collapsible .fieldset-legend a,
.node-type-implementation fieldset.collapsible .fieldset-legend a.fieldset-title {
  display: inline !important;
  position: static !important;
}

/* Hide the "Show"/"Hide" prefix text */
.node-type-implementation fieldset legend span.fieldset-legend-prefix {
  display: none !important;
}

/* Fieldset wrapper content area */
.node-type-implementation fieldset .fieldset-wrapper {
  padding: 14px 18px !important;
  overflow: visible !important;
  border-top: 1px solid var(--pk-border) !important;
}

/* Collapsed state — hide the wrapper */
.node-type-implementation fieldset.collapsed .fieldset-wrapper {
  display: none !important;
}

/* Validation status icons — ensure visible */
.node-type-implementation .validation-result .messages,
.node-type-implementation .form-wrapper .messages {
  position: relative !important;
  overflow: visible !important;
  margin-left: 0 !important;
  padding-left: 48px !important;
}

/* Valid/invalid result boxes */
.node-type-implementation .messages.status {
  background: #f0fdf4 !important;
  border-left: 4px solid #16a34a !important;
}
.node-type-implementation .messages.error {
  background: #fef2f2 !important;
  border-left: 4px solid #ef4444 !important;
}

/* Dataset path text - prevent overflow */
.node-type-implementation .form-wrapper,
.node-type-implementation .validation-result {
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

/* File links */
.node-type-implementation .file a {
  color: var(--pk-green-800) !important;
  font-size: 13px !important;
}
.node-type-implementation .file a:hover {
  color: var(--pk-green-600) !important;
}

/* Dataset form — ensure proper layout */
.node-type-implementation form.pv-cur-dataset-form-readonly {
  margin-bottom: 20px !important;
}

/* ============================================================ */
/* MOBILE RESPONSIVE                                             */
/* ============================================================ */
@media (max-width: 768px) {
  main.l-content, .l-content { padding: 16px 16px 32px 16px !important; }
  .l-wrapper-inner, .l-wrapper-inner.container, .l-wrapper-inner.container-fluid { border-radius: 0 !important; border-left: none !important; border-right: none !important; }
  .l-sidebar, .l-sidebar-first, .l-sidebar-second { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; padding: 16px !important; border-left: none !important; border-top: 1px solid var(--pk-border) !important; }
  .l-middle.row { flex-wrap: wrap !important; }
  html body nav.tabs ul { flex-wrap: wrap !important; }
  html body nav.tabs ul li a { font-size: 12px !important; padding: 8px 12px !important; }
  .l-header .header-logo-wrapper img { width: 320px !important; height: auto !important; }
}

@media (max-width: 768px) {
  .l-header .block-system-main-menu .menu-toggle-button { display: flex !important; }
  .l-header .block-system-main-menu ul.menu-tree { display: flex !important; flex-direction: column !important; width: 100% !important; }
  #menu-toggle-state:not(:checked) ~ ul.menu-tree { display: none !important; }
  #menu-toggle-state:checked ~ ul.menu-tree { display: flex !important; }
  .l-header .block-system-header .block-content { display: flex !important; }
  .l-header a.header-site-name-link { background: none !important; }
}

@media (max-width: 480px) {
  .l-header nav.header-menu { top: 4px !important; right: 8px !important; }
  .l-header nav.header-menu ul.links a { font-size: 10px !important; padding: 3px 8px !important; }
  .l-header [class*="block-search"] { display: none !important; }
}
/* ============================================================ */
/* COLLABORATION / VIEW GROUPS / IMPLEMENTATIONS VIEWS          */
/* Scoped overrides to match Drupal 7 look                      */
/* ============================================================ */


/* Hide sidebars, full-width content */
body.view-name-phenotype_table .l-sidebar,
body.view-name-phenotype_table .l-sidebar-first,
body.view-name-phenotype_table .l-sidebar-second,
body.view-name-phenotypes_my_groups .l-sidebar,
body.view-name-phenotypes_my_groups .l-sidebar-first,
body.view-name-phenotypes_my_groups .l-sidebar-second,
body.view-name-implementations_by_phenotype .l-sidebar,
body.view-name-implementations_by_phenotype .l-sidebar-first,
body.view-name-implementations_by_phenotype .l-sidebar-second {
  display: none !important;
  width: 0 !important;
  flex: 0 !important;
  padding: 0 !important;
}
body.view-name-phenotype_table main.l-content,
body.view-name-phenotype_table .l-content,
body.view-name-phenotypes_my_groups main.l-content,
body.view-name-phenotypes_my_groups .l-content,
body.view-name-implementations_by_phenotype main.l-content,
body.view-name-implementations_by_phenotype .l-content {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
}

/* --- Filter form: plain, no card wrapper --- */
.view-id-phenotype_table .views-exposed-form,
.view-id-phenotypes_my_groups .views-exposed-form,
.view-id-implementations_by_phenotype .views-exposed-form {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 0 12px 0 !important;
  margin-bottom: 14px !important;
  box-shadow: none !important;
}

/* Filter labels: sentence case */
.view-id-phenotype_table .views-exposed-form label,
.view-id-phenotypes_my_groups .views-exposed-form label,
.view-id-implementations_by_phenotype .views-exposed-form label {
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--pk-text) !important;
}

/* Apply button: sentence case */
.view-id-phenotype_table .views-exposed-form input[type="submit"],
.view-id-phenotypes_my_groups .views-exposed-form input[type="submit"],
.view-id-implementations_by_phenotype .views-exposed-form input[type="submit"] {
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 13px !important;
}
form.new_node_button_form #create-new-sf {
  padding: 9px 20px !important;
}

/* --- Table headers: sentence case, lighter, tighter --- */
.view-id-phenotype_table table thead th,
.view-id-phenotype_table table th,
.view-id-phenotypes_my_groups table thead th,
.view-id-phenotypes_my_groups table th,
.view-id-implementations_by_phenotype table thead th,
.view-id-implementations_by_phenotype table th {
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 10px !important;
  background: #f5f5f5 !important;
  color: var(--pk-text) !important;
  vertical-align: top !important;
  border-bottom: 1px solid #ccc !important;
}

/* --- Table cells: tighter padding, top-align --- */
.view-id-phenotype_table table td,
.view-id-phenotypes_my_groups table td,
.view-id-implementations_by_phenotype table td {
  padding: 8px 10px !important;
  font-size: 13px !important;
  vertical-align: top !important;
  line-height: 1.5 !important;
}

/* --- Table: simpler border, no shadow/radius --- */
.view-id-phenotype_table table,
.view-id-phenotypes_my_groups table,
.view-id-implementations_by_phenotype table {
  border: 1px solid #ccc !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-collapse: collapse !important;
}

/* Row striping */
.view-id-phenotype_table table tbody tr:nth-child(odd) td,
.view-id-phenotypes_my_groups table tbody tr:nth-child(odd) td,
.view-id-implementations_by_phenotype table tbody tr:nth-child(odd) td {
  background: #fff !important;
}
.view-id-phenotype_table table tbody tr:nth-child(even) td,
.view-id-phenotypes_my_groups table tbody tr:nth-child(even) td,
.view-id-implementations_by_phenotype table tbody tr:nth-child(even) td {
  background: #f9f9f9 !important;
}
.view-id-phenotype_table table tbody tr:hover td,
.view-id-phenotypes_my_groups table tbody tr:hover td,
.view-id-implementations_by_phenotype table tbody tr:hover td {
  background: #f0f7f0 !important;
}

/* Status field: normal case */
.view-id-phenotype_table .views-field-field-p-status,
.view-id-phenotypes_my_groups .views-field-field-p-status,
.view-id-implementations_by_phenotype .views-field-field-p-status {
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: normal !important;
  color: var(--pk-text) !important;
  font-size: 13px !important;
}

/* --- Description text block above table --- */
.view-id-phenotype_table .view-header,
.view-id-phenotypes_my_groups .view-header,
.view-id-implementations_by_phenotype .view-header {
  margin-bottom: 16px !important;
}
.view-id-phenotype_table .view-header p,
.view-id-phenotypes_my_groups .view-header p,
.view-id-implementations_by_phenotype .view-header p {
  font-size: 13px !important;
  line-height: 1.6 !important;
  max-width: none !important;
}

/* --- Pager fix: remove background bar, clean layout --- */
.item-list {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.item-list h2.element-invisible {
  display: none !important;
}
.item-list .pager {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 12px 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  list-style: none !important;
  gap: 25px !important;
  align-items: center !important;
}
.item-list .pager li {
  display: flex !important;
  align-items: center !important;
  border: none !important;
  margin: 0 2px !important;
  padding: 0 !important;
  float: none !important;
  background: transparent !important;
}
.item-list .pager li a {
  background: #fff !important;
  color: #333 !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-family: var(--pk-sans) !important;
  border: 1px solid var(--pk-border) !important;
}


.item-list .pager li a,
.item-list .pager li.pager-current {
  display: flex !important;
  align-items: center !important;
  padding: 9px 20px !important;
  line-height: 1 !important;
  border-radius: var(--pk-r-sm) !important;
  font-size: 13px !important;
  font-family: var(--pk-sans) !important;
  min-width: 32px !important;
  height: 32px !important;
  box-shadow: none !important;;
}

.item-list .pager li.pager-current {
  background-color: #5a8f73 !important;
  color: #fff !important;
  border: 1px solid var(--pk-green-800) !important;
  font-weight: 600 !important;
  margin: 0 -12px !important;
}

button.p-ripple {
  padding: 9px 20px !important;
}

.item-list .pager li a:hover,
button.p-ripple:hover {
  border: 1px solid var(--pk-text-3) !important;
  transition: ease 300ms !important;
}

/* Hide all breadcrumb items except Home */
nav.breadcrumb ol li:not(:first-child),
.breadcrumb ol li:not(:first-child) {
  display: none !important;
}

/* User profile buttons */
.field-requested-pgroups button {
  background-color: transparent !important;
  color: var(--pk-green-800) !important;
  border: 1px solid var(--pk-green-800) !important;
  border-radius: 20px !important;
  padding: 6px 18px !important;
  font-size: 13px !important;
  cursor: pointer !important;
  font-family: var(--pk-sans) !important;
}
.field-requested-pgroups button:hover {
  background-color: var(--pk-green-800) !important;
  color: #fff !important;
}

.field-requested-pgroups .field-item:last-child {
  display: flex !important;
  gap: 10px !important;
  margin-top: 10px !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Comment action links - rounded outline buttons */
.node-phenotype .links.node-links li a,
article.node-phenotype nav.links li a {
  background-color: transparent !important;
  color: var(--pk-green-800) !important;
  border: 1px solid var(--pk-green-800) !important;
  border-radius: 20px !important;
  padding: 6px 18px !important;
  font-size: 13px !important;
  display: inline-block !important;
  margin: 0 5px 0 0 !important;
  text-decoration: none !important;
}
.node-phenotype .links.node-links li a:hover,
article.node-phenotype nav.links li a:hover {
  background-color: var(--pk-green-800) !important;
  color: #fff !important;
  text-decoration: none !important;
}
.node-phenotype .links.node-links li,
article.node-phenotype nav.links li {
  list-style: none !important;
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Comment section box */
section.comments, #comments {
  background-color: #f8fafc !important;
  border: 1px solid var(--pk-border) !important;
  border-radius: var(--pk-r-md) !important;
  padding: 20px !important;
  margin-top: 24px !important;
  box-sizing: content-box !important;
}
section.comments > h2, #comments > h2 {
  font-family: var(--pk-sans) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  text-align: center !important;
  margin-bottom: 20px !important;
}

/* Individual comment styling */
article.comment {
  background: var(--pk-surface) !important;
  border: 1px solid var(--pk-border) !important;
  border-radius: var(--pk-r-md) !important;
  padding: 16px !important;
  margin-bottom: 16px !important;
  box-sizing: content-box !important;
}
article.comment h3, article.comment h3 a {
  font-family: var(--pk-sans) !important;
  font-size: 16px !important;
  color: var(--pk-green-800) !important;
}
article.comment .submitted {
  font-size: 13px !important;
  color: var(--pk-text-2) !important;
  margin-bottom: 10px !important;
}
article.comment .comment-body {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}

.field-name-comment-body { padding: 0 15px !important; }
.comment-text .comment-title { padding: 25px 29px 0; }

/* Comment action buttons (delete/edit/reply) */
.comment ul.links a,
.comment nav.links a,
.comment .links.node-links a,
section.comments .links a,
#comments .links a {
  background-color: transparent !important;
  color: var(--pk-green-800) !important;
  border: 1px solid var(--pk-green-800) !important;
  border-radius: 20px !important;
  padding: 4px 14px !important;
  font-size: 12px !important;
  display: inline-block !important;
  margin: 4px 4px 0 0 !important;
}
.comment ul.links a:hover,
.comment nav.links a:hover,
section.comments .links a:hover,
#comments .links a:hover {
  background-color: transparent !important;
  color: var(--pk-green-800) !important;
}

/* Neutralize green background on comment form submit/actions area */
#comment-form input[type="submit"],
.comment-form input[type="submit"],
.comment-form .form-submit,
.comment-form .form-actions input[type="submit"],
.comment-form .form-actions button,
section.comments .form-actions input[type="submit"],
section.comments .form-actions button,
#comments .form-actions input[type="submit"],
#comments .form-actions button {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--pk-green-800) !important;
  border: 1px solid var(--pk-green-800) !important;
  box-shadow: none !important;
}
#comment-form input[type="submit"]:hover,
.comment-form input[type="submit"]:hover,
.comment-form .form-submit:hover,
.comment-form .form-actions input[type="submit"]:hover,
.comment-form .form-actions button:hover,
section.comments .form-actions input[type="submit"]:hover,
section.comments .form-actions button:hover,
#comments .form-actions input[type="submit"]:hover,
#comments .form-actions button:hover {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--pk-green-800) !important;
}

.comment-node-phenotype-form {
  border: 0.125em solid #033b1e;
  padding: 1.5em;
}

/*Save/Preview buttons */
div#edit-actions input#edit-submit.button-primary {
  background: var(--pk-green-800) !important;
  color: #fff !important;
  font-weight: 600 !important;
  &:hover {
    background-color: var(--pk-green-600) !important;
    box-shadow: var(--pk-shadow-m) !important;
    transition: background-color 0.15s, box-shadown 0.15s !important;
  }
}

div#edit-actions input#edit-preview.button-secondary:hover {
  box-shadow: var(--pk-shadow-m) !important;
  transition: box-shadown 0.15s !important;
}

/* Strip any solid green background from the comment footer / form wrapper itself */
.comment-footer,
.comment-wrapper .comment-footer,
.comment .comment-footer,
section.comments .comment-footer,
#comments .comment-footer,
.comment-form-wrapper,
.field-name-comment-body,
section.comments .form-actions,
#comments .form-actions {
  background: transparent !important;
  background-color: transparent !important;
}

/* ============================================================ */
/* IMPLEMENTATION NODE — VIEW MODE FULL (D7-style display)       */
/* ============================================================ */

/* ---- Title with leading document icon ---- */
.node-type-implementation .l-page-title h1,
.node-type-implementation h1.page-title {
  font-family: var(--pk-sans) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--pk-text) !important;
  padding-bottom: 12px !important;
  margin: 18px 0 22px 0 !important;
  border-bottom: 1px solid var(--pk-border) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.node-type-implementation .l-page-title h1::before,
.node-type-implementation h1.page-title::before {
  content: '' !important;
  display: inline-block !important;
  width: 24px !important;
  height: 24px !important;
  background: url('/themes/phenotype/images/page_phenotype.png') no-repeat center / contain !important;
  flex: 0 0 24px !important;
}

/* ---- Metadata panel: phenotype / algorithm type / institution ---- */
.node-implementation.view-mode-full > .content {
  background: var(--pk-hover) !important;
  border: 1px solid var(--pk-border) !important;
  border-radius: var(--pk-r-md) !important;
  padding: 20px 24px !important;
  margin-bottom: 24px !important;
  box-shadow: var(--pk-shadow-s) !important;
}

.node-implementation.view-mode-full > .content > .field-name-field-phenotype-implementation,
.node-implementation.view-mode-full > .content > .field-name-field-algorithm-type,
.node-implementation.view-mode-full > .content > .field-name-field-implementation-institution {
  display: flex !important;
  align-items: baseline !important;
  margin: 8px 0 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.node-implementation.view-mode-full > .content > .field-name-field-phenotype-implementation .field-label,
.node-implementation.view-mode-full > .content > .field-name-field-algorithm-type .field-label,
.node-implementation.view-mode-full > .content > .field-name-field-implementation-institution .field-label {
  flex: 0 0 140px !important;
  font-weight: 600 !important;
  color: var(--pk-text) !important;
  padding-right: 12px !important;
  margin: 0 !important;
}

.node-implementation.view-mode-full > .content > .field-name-field-phenotype-implementation .field-items,
.node-implementation.view-mode-full > .content > .field-name-field-algorithm-type .field-items,
.node-implementation.view-mode-full > .content > .field-name-field-implementation-institution .field-items,
.node-implementation.view-mode-full > .content > .field-name-field-phenotype-implementation .field-item,
.node-implementation.view-mode-full > .content > .field-name-field-algorithm-type .field-item,
.node-implementation.view-mode-full > .content > .field-name-field-implementation-institution .field-item {
  display: inline !important;
  font-weight: 400 !important;
  color: var(--pk-text-2) !important;
}

.node-implementation.view-mode-full > .content > .field a {
  color: var(--pk-green-800) !important;
  text-decoration: none !important;
}
.node-implementation.view-mode-full > .content > .field a:hover {
  text-decoration: underline !important;
}

/* ---- Metric cells: True Positive / False Positive / Case PPV ---- */
.node-implementation.view-mode-full > .content > .field-name-field-case-true-positive,
.node-implementation.view-mode-full > .content > .field-name-field-case-false-positive,
.node-implementation.view-mode-full > .content > .field-name-field-case-ppv {
  display: inline-block !important;
  vertical-align: top !important;
  background: var(--pk-surface) !important;
  border: 1px solid var(--pk-border) !important;
  border-radius: var(--pk-r-sm) !important;
  margin: 18px 8px 0 0 !important;
  padding: 14px 18px !important;
  min-width: 180px !important;
  box-sizing: border-box !important;
}

.node-implementation.view-mode-full > .content > .field-name-field-case-true-positive {
  border-left: 4px solid var(--pk-green-500) !important;
}

.node-implementation.view-mode-full > .content > .field-name-field-case-false-positive {
  border-left: 4px solid #f5c2c2 !important;
}

.node-implementation.view-mode-full > .content > .field-name-field-case-ppv {
  display: block !important;
  width: 100% !important;
  margin: 8px 0 0 0 !important;
  border-left: 4px solid var(--pk-green-800) !important;
  background: var(--pk-green-50) !important;
}

.node-implementation.view-mode-full > .content > .field-name-field-case-true-positive .field-label,
.node-implementation.view-mode-full > .content > .field-name-field-case-false-positive .field-label,
.node-implementation.view-mode-full > .content > .field-name-field-case-ppv .field-label {
  display: block !important;
  flex: none !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--pk-text-3) !important;
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
}

.node-implementation.view-mode-full > .content > .field-name-field-case-true-positive .field-items,
.node-implementation.view-mode-full > .content > .field-name-field-case-false-positive .field-items,
.node-implementation.view-mode-full > .content > .field-name-field-case-ppv .field-items {
  display: block !important;
}

.node-implementation.view-mode-full > .content > .field-name-field-case-true-positive .field-item,
.node-implementation.view-mode-full > .content > .field-name-field-case-false-positive .field-item {
  font-family: var(--pk-sans) !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  color: var(--pk-text) !important;
  display: block !important;
}

.node-implementation.view-mode-full > .content > .field-name-field-case-true-positive .field-item::after {
  content: 'Correct result' !important;
  display: block !important;
  font-family: var(--pk-sans) !important;
  font-size: 11px !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: var(--pk-text-3) !important;
  margin-top: 2px !important;
}

.node-implementation.view-mode-full > .content > .field-name-field-case-false-positive .field-item::after {
  content: 'Unexpected result' !important;
  display: block !important;
  font-family: var(--pk-sans) !important;
  font-size: 11px !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: var(--pk-text-3) !important;
  margin-top: 2px !important;
}

.node-implementation.view-mode-full > .content > .field-name-field-case-ppv .field-item {
  font-family: var(--pk-sans) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--pk-green-800) !important;
}

/* ---- "Log in to post comments" link as pill ---- */
.node-implementation.view-mode-full ul.links.inline {
  margin: 20px 0 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.node-implementation.view-mode-full ul.links.inline li {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
}

.node-implementation.view-mode-full ul.links.inline a {
  display: inline-block !important;
  background: var(--pk-surface) !important;
  border: 1px solid var(--pk-border) !important;
  border-radius: var(--pk-r-sm) !important;
  padding: 6px 14px !important;
  color: var(--pk-green-800) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

.node-implementation.view-mode-full ul.links.inline a:hover {
  background: var(--pk-green-50) !important;
  border-color: var(--pk-green-500) !important;
}

/* ============================================================ */
/* IMPLEMENTATION NODE — GENERIC FIELD HANDLING                  */
/* Catches any field on .node-implementation view-mode-full      */
/* (Phenotype, Algorithm Type, Institution, Implementation       */
/*  Details, Total Cases, Files, etc.) regardless of which       */
/*  specific Implementation node is being viewed.                */
/* ============================================================ */

/* ---- Generic inline-labeled fields: label left, value right ---- */
.node-implementation.view-mode-full > .content > .field.field-label-inline {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  margin: 8px 0 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.node-implementation.view-mode-full > .content > .field.field-label-inline > .field-label {
  flex: 0 0 140px !important;
  font-weight: 600 !important;
  color: var(--pk-text) !important;
  padding-right: 12px !important;
  margin: 0 !important;
}

.node-implementation.view-mode-full > .content > .field.field-label-inline > .field-items,
.node-implementation.view-mode-full > .content > .field.field-label-inline > .field-item {
  flex: 1 1 200px !important;
  color: var(--pk-text-2) !important;
}

/* ---- Generic above-labeled fields (Total Cases etc.)         ----
   Excludes the TP/FP/PPV metric cards which have their own styling. */
.node-implementation.view-mode-full > .content > .field.field-label-above:not(.field-name-field-case-true-positive):not(.field-name-field-case-false-positive):not(.field-name-field-case-ppv) {
  margin: 12px 0 !important;
  font-size: 14px !important;
}

.node-implementation.view-mode-full > .content > .field.field-label-above:not(.field-name-field-case-true-positive):not(.field-name-field-case-false-positive):not(.field-name-field-case-ppv) > .field-label {
  display: block !important;
  font-weight: 600 !important;
  color: var(--pk-text) !important;
  margin-bottom: 4px !important;
  padding: 0 !important;
}

.node-implementation.view-mode-full > .content > .field.field-label-above:not(.field-name-field-case-true-positive):not(.field-name-field-case-false-positive):not(.field-name-field-case-ppv) > .field-items {
  color: var(--pk-text-2) !important;
}

/* ---- Files field: each file on its own line, green links ---- */
.node-implementation.view-mode-full .field-name-field-files .file {
  display: block !important;
  padding: 4px 0 !important;
}

.node-implementation.view-mode-full .field-name-field-files .file a {
  color: var(--pk-green-800) !important;
  text-decoration: none !important;
}

.node-implementation.view-mode-full .field-name-field-files .file a:hover {
  text-decoration: underline !important;
}

/* ---- Long-text content (Implementation Details) line-height ---- */
.node-implementation.view-mode-full .field-type-text-long .field-items,
.node-implementation.view-mode-full .field-type-text-with-summary .field-items {
  line-height: 1.6 !important;
}

/* ============================================================ */
/* PHENOTYPE NODE — DATA DICTIONARIES TAB: remove inner divider  */
/* The inner ERRORS fieldset (fieldset.validation-result-wrapper)*/
/* draws a top border that reads as a divider line between the   */
/* "Datasets Using This" button and the ERRORS disclosure row.   */
/* Strip its box border; keep the disclosure inline so it sits   */
/* directly below the button with normal spacing.                */
/* ============================================================ */
.node-type-phenotype form.pv-phenotype-cur-dict-file-form fieldset.validation-result-wrapper {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  margin: 8px 0 0 0 !important;
  padding: 0 !important;
}
.node-type-phenotype form.pv-phenotype-cur-dict-file-form fieldset.validation-result-wrapper > legend {
  padding: 4px 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
}

.validation-results-header,
.validation-results-header > h3,
div[id^="results_wrapper_"] > .validation-results-header,
div[id^="results_wrapper_"] > .validation-results-header > h3 {
  display: none !important;
}