* {
  box-sizing: border-box;
}

/* Default (Light) theme variables */
:root {
  --background-color: hsl(0,0%,100%);
  --container-background: hsl(0,0%,95%);
  --background-light: hsl(0,0%,90%);
  --background-medium: hsl(0,0%,80%);
  --text-color-95: hsl(0,0%,5%);
  --text-color-50: hsl(0,0%,50%);
  --border: hsl(0,0%,70%);
  --gradient: linear-gradient(0deg, var(--container-background) 95%, var(--background-light));
  --gradient-hover: linear-gradient(0deg, var(--container-background), var(--background-light));
  --label-color: hsl(0,0%,50%);
  --input-border: #555;
  --input-focus-border: #9f9f9f;
  --input-focus-shadow: rgba(74, 144, 226, 0.3);
  --button-background: #d13035;
  --button-hover-background: #b02529;
  --link-color: #4a90e2;
  --highlight: hsl(0,0%,55%);
  --footer-background: hsl(0,0%,100%);
  --loader-background: rgba(0, 0, 0, 0.1);
  /* red buttons */
  --pmp-red-50: #fdf3f3;
  --pmp-red-100: #fce4e5;
  --pmp-red-200: #fbcdce;
  --pmp-red-300: #f7aaac;
  --pmp-red-400: #f0797d;
  --pmp-red-500: #e54e53;
  --pmp-red-def: #d13035;
  --pmp-red-700: #b02529;
  --pmp-red-800: #922225;
  --pmp-red-900: #792326;
  --pmp-red-950: #410e10;
}

/* Dark theme variables */
[data-theme="dark"] {
  --background-color: hsl(0,0%,0%);
  --container-background: hsl(0,0%,5%);
  --background-light: hsl(0,0%,10%);
  --background-medium: hsl(0,0%,20%);
  --text-color-95: hsl(0,0%,95%);
  --text-color-75: hsl(0,0%,75%);
  --text-color-50: hsl(0,0%,50%);
  --border: hsl(0,0%,30%);
  --gradient: linear-gradient(0deg, var(--container-background) 95%, var(--background-light));
  --gradient-hover: linear-gradient(0deg, var(--container-background), var(--background-light));
  --label-color: hsl(0,0%,50%);
  --input-border: #060606;
  --input-focus-border: #949494;
  --input-focus-shadow: rgba(74, 144, 226, 0.3);
  --button-background: #d13035;
  --button-hover-background: #b02529;
  --link-color: #4a90e2;
  --highlight: hsl(0,0%,45%);
  --footer-background: hsl(0,0%,0%);
  --loader-background: rgba(255, 255, 255, 0.1);
  /* red buttons */
  --pmp-red-50: #fdf3f3;
  --pmp-red-100: #fce4e5;
  --pmp-red-200: #fbcdce;
  --pmp-red-300: #f7aaac;
  --pmp-red-400: #f0797d;
  --pmp-red-500: #e54e53;
  --pmp-red-def: #d13035;
  --pmp-red-700: #b02529;
  --pmp-red-800: #922225;
  --pmp-red-900: #792326;
  --pmp-red-950: #410e10;
}

/* Fonts */
@font-face {
  font-family: 'Myriad_Pro-Bold';
  src: url('fonts/MYRIADPRO-BOLD.otf') format('opentype');
}

@font-face {
  font-family: 'Myriad_Pro';
  src: url('fonts/MYRIADPRO-REGULAR.otf') format('opentype');
}

@font-face {
  font-family: 'Ubuntu-Bold';
  src: url('fonts/Ubuntu-M.ttf') format('truetype');
}

@font-face {
  font-family: 'Ubuntu';
  src: url('fonts/Ubuntu-L.ttf') format('truetype');
}

/* Global Styles */
* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--background-color);
  font-family: Ubuntu-Bold, sans-serif;
}

/* Header */
header, header.login-toolbar {
  position: sticky;   /* sticky instead of fixed */
  top: 0;
  left: 0;
  width: 100%;
  padding: 1rem;
  background-color: var(--container-background);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  z-index: 1000;
  transition: transform 0.2s ease; /* animate hide/show */
}

.header-logo-container, .logo-topleft {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.header-logo-container img, .logo-topleft img {
  height: 2rem;
}

.logo-topleft img {
  height: 40px; /* Override for logging.html */
}

.header-logo-container h1 {
  margin: 0;
}

.header-logo-container a, .logo-topleft a {
  height: 2rem;
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Theme Toggle and Logout */
.theme-toggle-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.theme-toggle {
  padding: 0.5rem;
  background-color: transparent;
  border-radius: 8px;
  cursor: pointer;
}

.theme-toggle:hover {
  background-color: var(--background-light);
}

.theme-toggle img {
  width: 24px;
  height: 24px;
  display: block;
}

.logout-btn {
  margin-left: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: var(--button-background);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.2s;
}

.logout-btn:hover {
  background-color: var(--button-hover-background);
}

/* Main Content */
main.container, .login-container {
  background: var(--gradient);
  padding: 1rem;
  border: 1px solid var(--border);
  border-top: 1px solid var(--highlight);
  border-radius: 1rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
  margin: 1rem auto;
}

main.container:hover, .login-container:hover {
  background: var(--gradient-hover);
}

main.logging-container {
  width: 95%;
  max-width: 1200px;
  margin: 80px auto 2rem;
}

main.iframe-container {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
}

main.iframe-container iframe {
  flex: 1;
  width: 100%;
  height: 100%;
  border: none;
}

/* Headings */
h1, h2, h4 {
  font-family: Ubuntu-Bold;
  text-align: center;
  color: var(--text-color-95);
  margin: 0 0 0.75rem;
}

h4 {
  color: var(--text-color-50);
  margin-bottom: 2rem;
}

/* Form Elements */
.form-group {
  margin-bottom: 1rem;
}

.form-group.password {
  margin-bottom: 2.4rem; /* From index.html inline style */
}

label {
  display: block;
  font-size: 0.9rem;
  color: var(--text-color-75);
  margin-bottom: 0.3rem;
}

input, .logging-query-bar select, .logging-filters select {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--input-border);
  border-radius: 4px;
  font-size: 1rem;
  background-color: var(--background-medium);
  color: var(--text-color-95);
}

input:focus {
  border-color: var(--input-focus-border);
  box-shadow: 0 0 5px var(--input-focus-shadow);
  outline: none;
}

button, #view-logs-button, .logging-filters button {
  width: 100%;
  padding: 0.75rem;
  background-color: var(--pmp-red-def);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

button:hover, #view-logs-button:hover, .logging-filters button:hover {
  background-color: var(--pmp-red-700);
}

.logging-query-bar input, .logging-query-bar select {
  flex: 1 1 auto;
}

/* Logging Page */
.logging-query-bar {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1rem;
}

.logging-filters {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

.logging-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

.logging-table th, .logging-table td {
  border: 1px solid var(--border);
  padding: 0.5rem;
  text-align: left;
  color: var(--text-color-95); /* Override #FFF for theme consistency */
}

.logging-table th {
  background-color: var(--container-background);
}

/* Footer */
footer.site-footer {
  position: static;   /* not fixed */
  bottom: auto;
  left: auto;
  width: 100%;
  padding: 1rem;
  background-color: var(--container-background);
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.1); /* shadow above footer */
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  margin-top: auto;   /* stick to bottom if short content */
}

p {
  color: var(--text-color-50);
  margin: 1rem;
  text-align: center;
  font-family: Ubuntu, sans-serif;
}

p.no-bottom-margin {
  margin-bottom: 0; /* From index.html inline style */
}

a, a.content-link {
  color: var(--link-color);
  text-decoration: none;
}

a:hover, a.content-link:hover {
  text-decoration: underline;
}

/* Header Logo */
.header-logo {
  text-align: center;
  margin: 1rem 0;
}

.header-logo img {
  height: 8rem;
}

/* Loader */
.loader, #loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  transition: opacity 0.3s ease;
}

.loader.hidden, #loading-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.loader-gif, .loading-box img {
  width: 5rem;
  height: 5rem;
  padding: 0.5rem;
  background-color: var(--loader-background);
  border-radius: 8px;
}

.hidden {
  display: none;
}