/* =========================
   Base Layout & Typography
   ========================= */


html {
  font-size: 14px;
  height: 100%;
  min-height: 100%;
}

body {
  font-size: 0.85rem;
  line-height: 1.2;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

.page-wrapper {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0; /* ensures it doesn't force the footer down if content is small */
}

footer.container {
  flex-shrink: 0;
  margin-top: auto; /* this pushes the footer to the bottom if there's extra space */
}


header, main, footer, hgroup {
  padding: 0.25rem 0;
  margin: 0.25rem 0;
}

section {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

/* =========================
   Headings, Paragraphs, Lists
   ========================= */

h1, h2, h3, h4, h5, h6 {
  font-size: 1rem;
  margin: 0.2em 0;
}

p, li {
  margin: 0.2rem 0;
}

/* =========================
   Form Elements & Tables
   ========================= */

button, input, select, textarea {
  font-size: 0.85rem;
  padding: 0.25rem 0.5rem;
  margin: 0.2rem 0;
}

table th, table td {
  padding: 0.3rem 0.5rem;
  font-size: 0.8rem;
}

/* =========================
   Alert/Article Styles
   ========================= */

article.primary,
article.secondary,
article.contrast {
  padding: 0.5rem;
  margin: 0.3rem 0;
  font-size: 0.85rem;
  border-radius: 4px;
  border-left: 4px solid currentColor;
}

article.primary {
  background-color: #e8f0fe;
  color: #1967d2;
}

article.secondary {
  background-color: #f1f3f4;
  color: #5f6368;
}

article.contrast {
  background-color: #fbe9e7;
  color: #d93025;
}

/* =========================
   Row & Flex Layouts
   ========================= */

.flex-row {
  display: flex;
  flex-direction: row;
  gap: 2rem; /* Adjust spacing as needed */
  justify-content: center; /* Optional: center the sections */
  align-items: flex-start; /* Optional: align items to the top */
}
.flex-row section {
  flex: 1 1 0;
  min-width: 200px; /* Optional: control minimum width */
}

/* =========================
   Spinner Styles
   ========================= */

#refreshSpinner svg {
  vertical-align: middle;
}

.datasource-spinner {
  margin-left: 0.5em;
  display: flex;
  align-items: center;
  height: 2em;
}

/* =========================
   Data Source Controls
   ========================= */

.datasource-controls {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.25em;
}

.datasource-controls button,
.datasource-controls .show-json-btn,
.datasource-controls .download-json-link {
  vertical-align: middle;
  margin: 0;
  padding: 0.25em 0.75em;
  height: 2.2em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.show-json-btn,
.download-json-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0 0.02em; /* reduced for tighter spacing */
  cursor: pointer;
  height: 2em;
  width: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.show-json-btn svg,
.download-json-link svg {
  width: 1.8em;
  height: 1.8em;
  min-width: 1.8em;
  min-height: 1.8em;
  display: block;
}

/* =========================
   Navigation Menu Styles
   ========================= */

/* Old menu styles (can be removed if not used)
.menu-nav {
  border-bottom: px solid #ccc;
  background: #fff;
}
.menu-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 2rem;
  justify-content: flex-start;
}
.menu-nav li {
  display: inline;
}
.menu-nav a {
  text-decoration: none;
  color: var(--primary, #007bff);
  font-weight: bold;
  padding: 0.25em 0.75em;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
}
.menu-nav a:hover,
.menu-nav a:focus {
  background: var(--primary, #007bff);
  color: #fff;
}
*/

/* Modern menu bar */
.menu-bar {
  background: var(--primary, #0d6efd);
  border-radius: 0 0 0.5em 0.5em;
  margin-bottom: 2em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  padding-top: 0.25em;
  padding-bottom: 0.25em;
  padding-left: 1.5em;
  padding-right: 1.5em;
  min-height: 2.5em; /* matches button height */
  display: flex;
  align-items: center;
}
.menu-bar ul {
  display: flex;
  gap: 2em;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.menu-bar .menu-left {
  /* Left items: default order */
}

.menu-bar .menu-right {
  margin-left: auto;
  /* All right-aligned items will be pushed to the right */
  /* If you have multiple .menu-right items, they will stay together on the right */
}

.menu-bar a {
  color: #fff !important;
  text-decoration: none;
  font-weight: 500;
  padding: 0.35em 1em;
  border-radius: 0.25em;
  transition: background 0.15s;
  font-size: 1em;
  line-height: 1.5em;
  display: inline-flex;
  align-items: center;
  height: 2.2em; /* matches button height */
  box-sizing: border-box;
}
.menu-bar a:hover,
.menu-bar a:focus {
  background: rgba(255,255,255,0.12);
}

/* =========================
   Legacy/Override Styles
   ========================= */

/* Remove or update these if not needed */
/* nav.container ul,
nav.container li,
nav.container a, */
/* nav.container a:hover {
  (legacy styles, can be removed if not using nav.container anymore)
} */



/* Make DataTables header sort controls look like plain text */
th .dt-column-title[role="button"],
th .dt-column-title[role="button"]:focus,
th .dt-column-title[role="button"]:hover {
  background: none !important;
  border: none !important;
  color: inherit !important;
  font: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  outline: none !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
}

.bookmark-icon {
  object-fit: scale-down;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}


main.container #dataTable {
  /* width: 80%; */
  margin: 0 auto;
  /* min-width: 300px;
  max-width: 100%; */
  box-sizing: border-box;
}


/* =========================
   utility classes
   ========================= */

.hidden { display: none !important}



/* =========================
   tzhelper styles
   ========================= */


#tzh-picker {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1em;
  margin-bottom: 1em;
  text-align: center;
  width: fit-content;
  max-width: 100%;
}

#tzh-picker input[type="date"],
#tzh-picker input[type="time"] {
  display: inline-block;
  width: auto;
  margin-right: 0.5em;
  vertical-align: middle;
}

td .tzh-time {
  font-size: 1em;
  font-weight: bold;
}

td .tzh-date {
  font-size: 0.8em;
  display: inline-block;
  margin-left: 5px;
}

th .tzh-zoneinfo {
  font-size: 0.8em !important;
  display: inline-block;
  margin-left: 5px;
  text-decoration: none !important;
}

 /* working: dark text on white */
 /* non-working: dark text on light grey */
 /* sleeping: white text on dark grey */
 /* weekend: white text on red */
 /* now: dark text with white shadow on yellow */

.tzh-w {
  background: #ffffff;
  color: #111;
  text-align: center;
}

.tzh-nw {
  background: #e0e4ea;
  color: #222;
  text-align: center;
}

.tzh-s {
  background: #75757a;
  color: #fff;
  text-align: center;
}

.tzh-we {
  background: #e53935;
  color: #fff;
  text-align: center;
}

.tzh-now {
  background: #FFEB3B;
  color: #222;
  text-align: center;
  text-shadow: 0 1px 2px #fff, 0 -1px 2px #fff;
}

/* .tzh-w { background: #ffffff; text-align: center;}
.tzh-s { background: #75757a; text-align: center;}
.tzh-nw { background: #c1c9d3; text-align: center;}
.tzh-we { background: #bebebc; text-align: center;}
.tzh-now { background: #FFEB3B; text-align: center;} */