/* main.css */

/* Reset and base styles */
/* In use: applied sitewide via templates/layout.html body */
body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #fff;
  color: #333;
}

/* In use: status tables in
   templates/custportal/dbstatus.html,
   templates/dbaportal/drsizing.html,
   templates/dbaportal/drqueue.html,
   templates/services/systemstatus.html */
.status-table {
  margin-top: 1.5rem;
  border-collapse: collapse;
  width: 100%;
}

/* In use: status table cells in dbstatus/drqueue/drsizing/systemstatus templates */
.status-table th,
.status-table td {
  border: 1px solid #d4d4d4;
  padding: 0.6rem 0.8rem;
  text-align: left;
}

/* In use: header background for status tables */
.status-table thead th {
  background-color: #f2f2f2;
}

/* In use: status pill badges in
   templates/custportal/dbstatus.html,
   templates/dbaportal/drqueue.html,
   templates/services/systemstatus.html */
.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* In use: status detail links in templates/custportal/dbstatus.html and dbaportal/drqueue.html */
.status-pill-link {
  text-decoration: none;
}

/* In use: focus/hover treatment for pill links in templates/custportal/dbstatus.html and dbaportal/drqueue.html */
.status-pill-link:hover .status-pill,
.status-pill-link:focus .status-pill {
  box-shadow: 0 0 0 3px rgba(0, 50, 98, 0.2);
}

/* In use: state classes populated by views (e.g. status-good/down/warning/stale/unknown) */
.status-good {
  background-color: #136f31;
  color: #ffffff;
}

.status-down {
  background-color: #8c1c13;
  color: #ffffff;
}

.status-warning {
  background-color: #e5a50a;
  color: #1c1c1c;
}

.status-stale,
.status-unknown {
  background-color: #6f4e10;
  color: #ffffff;
}

/* Lightweight badge styling for instance_status bubbles */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 0.25rem;
  color: #ffffff;
  background-color: #6c757d;
}

.badge-pill {
  border-radius: 999px;
}

.badge-success {
  background-color: #136f31;
}

.badge-warning {
  background-color: #e5a50a;
  color: #1c1c1c;
}

.badge-orange {
  background-color: #d35400;
  color: #ffffff;
}

.badge-danger {
  background-color: #8c1c13;
}

.badge-secondary {
  background-color: #6c757d;
}

.badge-metric {
  min-width: 70px;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

.bg-primary {
  background-color: #003262;
  color: #ffffff;
}

.bg-light {
  background-color: #f2f2f2;
  color: #1c1c1c;
}

.text-dark {
  color: #1c1c1c;
}

/* In use: history image/card on templates/services/systemstatus.html */
.history-chart {
  margin-top: 2rem;
}

/* In use: embedded chart image styling in templates/services/systemstatus.html */
.history-chart-image {
  max-width: 100%;
  border: 1px solid #d4d4d4;
  border-radius: 4px;
  margin-top: 0.75rem;
}

/* --likely unused: no template references found via rg search */
.status-meta {
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: #555555;
}

/* In use: inline metadata spans in templates/custportal/dbstatus.html */
.status-meta-inline {
  display: inline-flex;
  align-items: center;
  margin-left: 0.5rem;
  font-size: 0.8rem;
  color: #1f2933;
}

/* Header */
/* In use: site banner markup in templates/partials/header.html */
.site-header {
  background-color: #003262;
  color: #fff;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Default link style in header (templates/partials/header.html) */
.site-header a {
    color: white;
    text-decoration: none;
    font-weight: normal;
}

/* Hover effect: golden yellow and bold (templates/partials/header.html) */
.site-header a:hover {
    color: #FDB515; /* Golden yellow */
    font-weight: bold;
}

/* In use: header branding wrapper in templates/partials/header.html */
.branding {
  display: flex;
  align-items: center;
}

/* In use: header logo image in templates/partials/header.html */
.wordmark {
  height: 40px;
  margin-right: 1rem;
}

/* --likely unused: site-title class not present in templates as of audit */
.site-title {
  font-size: 1.5rem;
  margin: 0;
}
/* Top Navigation */

/* Layout the nav bar */
/* In use: utility nav container in templates/partials/header.html */
.top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

/* In use: utility nav list in templates/partials/header.html */
.top-nav ul {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0 0;
  display: flex;
  gap: 1rem;
}

/* In use: utility nav links in templates/partials/header.html */
.top-nav a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

/* Main Navigation */
/* In use: primary nav container in templates/partials/nav.html and nav2.html */
.main-nav {
  background-color: #ffffff;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #cccccc;
}

/*.main-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 2rem;
}*/

/* In use: nav menu list in templates/partials/nav.html and nav2.html */
.main-nav > ul.nav-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 2rem;
}


/* In use: nav links in templates/partials/nav.html and nav2.html */
.main-nav a {
  color: #003262;
  text-decoration: none;
  font-weight: bold;
}


/* In use: overrides for dropdown triggers in templates/partials/nav.html */
.main-nav > ul.nav-menu > li > a {
  /* Use a dark-gray color instead of blue */
  color: #444444;   /* hex for dark gray */
}

/* If you have caret spans inside each dropdown link, ensure they match link color */
/* In use: aligns caret color in templates/partials/nav.html dropdowns */
.main-nav > ul.nav-menu > li > a .caret {
  color: #444444;   /* same dark gray */
}

/* On hover, you might want a slightly darker shade or underline, for example: */
/* In use: hover color for dropdown triggers in templates/partials/nav.html */
.main-nav > ul.nav-menu > li > a:hover {
  color: #222222;   /* darker gray on hover */
}






/* Separate left and right nav groups (nav-right used in templates/partials/header.html; nav-left markup currently commented out) */
/* nav-right used in templates/partials/header.html; nav-left markup currently commented out */
.nav-left,
.nav-right {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* In use: nav-right list items (templates/partials/header.html) */
.nav-left li,
.nav-right li {
  margin: 0 0.75em;
  position: relative;
}

/* Add separator between right-nav links (templates/partials/header.html) */
.nav-right li + li::before {
  content: "";
  display: inline-block;
  border-left: 1px solid #ccc;
  height: 1em;
  margin-right: 0.75em;
  position: relative;
  top: 0.15em;
}

/* some siteimprove suggestions via chatgpt */
/* make the <a> itself the touch target (templates/partials/header.html) */
.nav-right a {
  display: inline-flex;               /* allow width/height to apply */
  align-items: center;                /* vertical centering */
  justify-content: center;            /* horizontal centering */
  min-width: 44px;                    /* WCAG target width */
  min-height: 44px;                   /* WCAG target height */
  padding: 8px 10px;                    /* extra horizontal breathing room */
  box-sizing: bor
  der-box;             /* include padding in those min-dims */
  text-decoration: none;              /* your link styling */
  /* optional: background, hover states, etc. */
}

/* optional: space out your menu items (templates/partials/header.html) */
.nav-right li + li {
  margin-left: 8px;
}

/* In use: focus/hover treatment for header utility links */
.nav-right a:hover,
.nav-right a:focus {
  outline: 3px solid #ffb400;
  outline-offset: 2px;
  background-color: #f8f8f8;
}



/* --likely unused: nav-menu2 selector not referenced in templates */
.nav-menu2 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
/* In use: main nav flex container in templates/partials/nav.html and nav2.html */
.nav-menu {
  display: flex;
  align-items: center;
}


/* In use: nav list items in templates/partials/nav.html and nav2.html */
.nav-menu > li {
  position: relative;
  margin-right: 1em;
}

/* In use: base nav links in templates/partials/nav.html and nav2.html */
.nav-menu > li > a {
  color: #003262;
  text-decoration: none;
  padding: 0.5em;
  display: block;
}

/* In use: ensures tap-target sizing for nav links in templates/partials/nav.html */
.nav-menu a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  box-sizing: border-box;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
}




/* In use: logged-in user display in templates/partials/nav.html and nav2.html */
.nav-user {
  margin-left: auto;
  padding: 0 1em;
  font-weight: bold;
}

/* In use: secondary user detail text in templates/partials/nav.html and nav2.html */
.nav-user small {
  font-weight: normal;
  color: #aaa;
  margin-left: 0.5em;
}

/* In use: dropdown trigger alignment in templates/partials/nav.html */
.nav-menu .dropdown > a {
  display: inline-flex;
  align-items: center;
}

/* Style the caret so it isn’t too big or too close to the text (templates/partials/nav.html) */
.nav-menu .dropdown > .menu-toggle .caret {
  font-size: 1.35em;    /* make it a bit smaller */
  margin-left: 4px;     /* space between text and arrow */
  line-height: 1;       /* center vertically */
}

/* In use: placeholder caret span in templates/partials/nav.html */
.ghost-caret {
  visibility: hidden;
  display: inline-flex;
  align-items: center;
  font-size: 1.35em;   /* match real caret size */
  margin-left: 4px;    /* match real caret spacing */
  line-height: 1;      /* match real caret baseline */
}





/* In use: mobile and dropdown toggles in templates/partials/nav.html */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 12px;
  box-sizing: border-box;
  font-size: 1rem;
  font-weight: bold;
  color: #003262;
  text-decoration: none;
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
  appearance: none;
}
/* In use: interactive state for nav toggles in templates/partials/nav.html */
.menu-toggle:hover,
.menu-toggle:focus {
  background-color: #f0f0f0;
  outline: 2px solid #ffb400;
  outline-offset: 2px;
}


/* In use: global paragraph styling applied sitewide */
p {
	line-height: 1.5;
}

/* In use: responsive layout wrapper in templates/layout.html and derived templates */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem; /* Adds horizontal space on left/right (~16px) */
}
/* In use: main content spacing in templates/layout.html */
main.container {
  padding-bottom: 2rem;
}

/* In use: dropdown wrappers in templates/partials/nav.html and nav2.html */
.dropdown {
  position: relative;
}

/* In use: dropdown menus in templates/partials/nav.html and nav2.html */
.dropdown-menu {
  display: none;
  position: absolute;
  background-color: #ffffff;
  list-style: none;
  padding: 0;
  margin: 0;
  top: 100%;
  left: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 1000;
  flex-direction: column; /* prevents horizontal layout if inherited */
  display: none; /* reassert hidden default */
}


/* In use: dropdown option links in templates/partials/nav.html and nav2.html */
.dropdown-menu li a {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start; /* or center */
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  box-sizing: border-box;
}


/* In use: focus/hover styling for dropdown items in templates/partials/nav.html */
.dropdown-menu li a:hover, 
.dropdown-menu li a:focus {
  /*background-color: #f2f2f2;
  color: #222222;*/
  background-color: #f0f0f0;
  outline: 2px solid #ffb400;
  outline-offset: 2px;
}

/* In use: hover activation for desktop dropdowns in templates/partials/nav.html */
.dropdown:hover .dropdown-menu {
  display: block;
}

/* In use: clearfix for dropdown menu lists in templates/partials/nav.html */
.dropdown-menu::after {
  content: '';
  display: block;
  clear: both;
}

/* Table Container (optional for scroll) */
/* --likely unused: no template instances of class=\"table-container\" found */
.table-container {
  overflow-x: auto;
  margin-top: 1em;
}

/* Reusable table class */
/* In use: base table styling across portal templates (see multiple templates/* reports) */
.table-data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  color: #222;
}

/* Header styling */
/* In use: table header styling across portal tables */
.table-data thead {
  background-color: #e0e0e0; /* light gray */
  color: #000;
  font-weight: bold;
}

/* In use: shared table cell spacing/borders across portal tables */
.table-data th,
.table-data td {
  padding: 0.6em 0.9em;
  text-align: left;
  border: 1px solid #ccc;
}

/* Row striping (portal tables) */
.table-data tbody tr:nth-child(odd) {
  background-color: #f9f9f9; /* light gray */
}

.table-data tbody tr:nth-child(even) {
  background-color: #efefef; /* slightly darker gray */
}

/* Hover effect (portal tables) */
.table-data tbody tr:hover {
  background-color: #d8eaff; /* soft blue highlight */
}

/* Duplicate selector: extends table-data cells to enforce system font stack */
/* ADA/contrast: ensure readable color contrast */
.table-data th,
.table-data td {
  font-family: system-ui, sans-serif;
}

/* Footer */
/* In use: footer markup in templates/partials/footer.html */
.site-footer {
  background-color: #003262;
  color: #fff;
  padding: 1rem;
  text-align: center;
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
}

/* In use: footer navigation list in templates/partials/footer.html */
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0 0;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

/* In use: footer navigation links in templates/partials/footer.html */
.footer-links a {
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
}
/* In use: impersonation filter in templates/custportal/index.html */
.impersonate-form {
  margin-bottom: 1em;
}
/* In use: label styling for impersonation form in templates/custportal/index.html */
.impersonate-form label {
  margin-right: 0.5em;
  font-weight: bold;
}
/* In use: select control spacing in templates/custportal/index.html */
.impersonate-form select {
  margin-right: 0.5em;
}
/* In use: clear link styling in templates/custportal/index.html */
.impersonate-form .clear {
  margin-left: 1em;
  font-size: 0.9em;
}


/* In use: application link list items in templates/custportal/index.html */
ul li.app-link {
  display: list-item;
  /*list-style-type: disc;     /* or whatever bullet style you want */
  list-style-position: outside;
}

/* In use: application descriptions in templates/custportal/index.html */
ul li.app-link .app-desc {
  display: inline-block;    /* so margin applies only to the span */
  margin-left: 4.5em;       /* adjust to taste */
}

/* In use: service overview section headings in templates/services/overview.html */
h2 > a {
  display: inline-block;
  padding: 8px 10px;
  min-width: 44px;
  min-height: 44px;
  box-sizing: border-box;
  color: #0645AD; /* standard blue link color */
  text-decoration: underline;
}

/* In use: focus styling for overview headings in templates/services/overview.html */
h2 > a:hover,
h2 > a:focus {
  background-color: #f0f0f0;
  outline: 2px solid #ffb400;
  outline-offset: 2px;
  color: #0B0080; /* darker blue on hover */
}



/* In use: alert banner partial in templates/partials/banner2.html */
div.banner-alert {
    color: #fff;
    padding: 0;
    margin: 0;
}

/* In use: colorway variant for templates/partials/banner2.html */
div.banner-alert.openberkeley-widgets-color-scheme-web-medalist {
    background-color: #c4820e;
    font-size: 24px;
}

/* In use: nested alert container in templates/partials/banner2.html */
div.banner-alert .container.alert {
    padding: 17px 15px 13px 15px;
    margin-bottom: 0px;
    border: 0;
    border-radius: 0;
}
/* In use: accessibility helper class across multiple templates (e.g. dbstatus, layout) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* In use: skip-link visibility helper in templates/layout.html */
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  overflow: visible;
}


/* Flash-message container (templates/layout.html & dbaportal/script_settings.html) */
.flashes {
  margin: 1rem 0;
}

/* Base style for all flash messages */
.flashes ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* In use: flash list items rendered via templates/layout.html */
.flashes li.flash {
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  border-radius: 4px;
  font-weight: bold;
  font-size: 1rem;
}

/* Error (danger): bold red on light pink background (used by flash messages) */
.flash.danger {
  color: #B00020;            /* dark red (contrast > 4.5:1 on white) */
  background-color: #F8D7DA; /* very light red/pink background */
  border-left: 4px solid #B00020;
}

/* Success: bold green on light green background (used by flash messages) */
.flash.success {
  color: #0B6623;            /* dark green (contrast > 4.5:1 on white) */
  background-color: #D4EDDA; /* very light green background */
  border-left: 4px solid #0B6623;
}


/* In use: skip-link anchor in templates/layout.html and partials/header.html */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  /* completely off‐screen */
  transform: translateY(-100%);
  /* don’t show any outline or background by default */
  background: none;
  color: inherit;
  text-decoration: none;
  padding: 0;
  margin: 0;
  transition: transform 0.2s ease;
  z-index: 1000; /* above everything when it appears */
}

/* In use: focus state for skip link (templates/layout.html and partials/header.html) */
.skip-link:focus {
  /* slide back into place */
  transform: translateY(0);
  /* add a subtle underline or background to make it clear */
  background: #005fcc;
  color: #fff;
  padding: 0.5em 1em;
  text-decoration: none;
  outline: 3px solid #ffb400; /* or add your custom focus style */
  outline-offset: 2px;
}

/* In use: widen dbaportal email subject input for visibility (templates/dbaportal/email_lists.html) */
#email-subject {
  width: 100%;
  max-width: 40rem;
}

/* In use: layout host/instance/db type selects on email list page */
.app-filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 1.5rem;
  align-items: start;
}

.app-filter-grid .filter-field select {
  width: 100%;
}

.app-filter-grid .filter-field label {
  font-weight: 700;
}

@media (max-width: 992px) {
  .app-filter-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

@media (max-width: 640px) {
  .app-filter-grid {
    grid-template-columns: 1fr;
  }
}