/* === Base Styles === */
#pageLoader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #121212; /* fallback for dark mode */
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  z-index: 9999;
  transition: opacity 0.4s ease;
}

#pageLoader span {
  max-width: 800px;
  width: 100%;
  text-align: center;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 40px;
  background-color: white;
  color: #333;
  max-width: 1280px;
  font-size: 16px;
  line-height: 1.6;
  transition: background-color 0.3s ease, color 0.3s ease;
}

input, select, textarea, button {
  font-size: 16px;
  padding: 8px 10px;
  line-height: 1.4;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
  transition: background-color 0.3s ease, color 0.3s ease;
  margin-bottom: 8px;
}

button {
  cursor: pointer;
}

/* === Header & Title Block === */
header {
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
}

.title-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1px 15px;
  padding: 0 10px;
}

.title-block .line1,
.title-block .line2 {
  font-size: 36px;
  margin: 0;
}

.title-block .line1 {
  flex-basis: 100%;
}

.title-block .line2 {
  flex: 1;
}

.title-block img {
  height: 60px;
  transform: translate(-10px, -25px);
}

/* === Top Bar Navigation === */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
  flex-wrap: wrap;
  gap: 10px;
}

.left-buttons,
.right-button {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.left-buttons a,
.right-button a {
  display: inline-block;
}

.nav-button {
  padding: 6px 10px;
  font-size: 15px;
  background-color: #444;
  color: white;
  border: none;
  border-radius: 4px;
  transition: background-color 0.3s ease;
  width: auto;
  max-width: 200px;
  display: inline-block;
  white-space: nowrap;
}

.nav-button:hover {
  background-color: #222;
}

/* === Dark Mode Toggle === */
#darkToggle {
  padding: 6px 10px;
  font-size: 15px;
  background-color: #444;
  color: white;
  border: none;
  border-radius: 4px;
}

#darkToggle:hover {
  background-color: #222;
}

/* === Dark Mode Styles === */
body.dark-mode {
  background-color: #121212;
  color: #eee;
}

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea,
body.dark-mode button {
  background-color: #333;
  color: #eee;
  border-color: #555;
}

body.dark-mode button:hover {
  background-color: #444;
}

body.dark-mode header {
  background-color: #121212;
  color: #eee;
}

body.dark-mode header h1,
body.dark-mode header button {
  color: #eee;
}

/* === FIX: Placeholder Visibility in Dark Mode === */
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: #ccc !important;
  opacity: 1;
}

/* === Form Layout === */
form > * {
  margin-bottom: 8px;
}

#orderForm label {
  display: block;
  margin-top: 2px;
  font-weight: 500;
}

#orderForm h2 {
  font-size: 20px;
  margin-bottom: 16px;
}

#orderForm input,
#orderForm select,
#orderForm textarea {
  width: 100%;
  max-width: 100%;
  margin-bottom: 5px;
}

#orderForm button {
  width: auto;
  max-width: 200px;
  display: inline-block;
  margin-bottom: 5px;
}

/* === Input Group === */
.input-group {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.input-group input,
.input-group select {
  flex: 1;
  max-width: 300px;
}

.input-group button {
  flex-shrink: 0;
  background-color: #0078D4;
  color: white;
}

.input-group button:hover {
  background-color: #005A9E;
}

/* === Submit & Delete Buttons === */
#submitOrder {
  background-color: #0078D4;
  color: white;
  padding: 8px 14px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
}

#submitOrder:hover {
  background-color: #005A9E;
}

.delete-container {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.delete-container button:not(#submitOrder),
.item-row button {
  background-color: #d32f2f;
  color: white;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 16px;
}

.delete-container button:not(#submitOrder):hover,
.item-row button:hover {
  background-color: #b71c1c;
}

/* === Item Row === */
.item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}

.item-description {
  flex: 1;
  margin-right: 10px;
}

.item-row .delete-button {
  white-space: nowrap;
}

/* === Custom Items === */
#customItems {
  height: 120px;
  resize: vertical;
  margin-top: 20px;
}

#customItems::placeholder {
  color: #333;
  font-size: 16px;
  opacity: 1;
}

/* === Vendor Link === */
.vendor-link {
  margin-top: 40px;
  text-align: center;
}

.vendor-link a {
  text-decoration: none;
}

.vendor-link button {
  background-color: #444;
  color: white;
  padding: 10px 20px;
  font-size: 15px;
  border: none;
  border-radius: 4px;
}

.vendor-link button:hover {
  background-color: #222;
}

/* === Vendor Dashboard Grid === */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.vendor-section {
  border: 1px solid #ccc;
  padding: 16px;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.vendor-section h3 {
  margin-top: 0;
  font-size: 18px;
  margin-bottom: 12px;
}

/* === Responsive Tweaks === */
@media (max-width: 600px) {
  body {
    margin: 20px;
    font-size: 16px;
  }

  .title-block {
    padding: 0 8px;
  }

  .title-block .line1,
  .title-block .line2 {
    font-size: 28px;
  }

  header {
    margin-bottom: 16px;
  }

  .input-group {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .delete-container {
    justify-content: center;
    margin-top: 16px;
  }

  #darkToggleContainer {
    justify-content: center;
    padding: 10px 0;
  }
}
.cool-font {
  font-family: 'Segoe UI', 'Open Sans', sans-serif;
  font-size: 2.5em;
  font-style: italic;
  font-weight: bold;
}

.bold-italic {
  font-weight: bold;
  font-style: italic;
}

.line2 {
  font-size: 1.2em;
  margin-top: -10px;
  color: #555;
}

.title-block {
  text-align: left;
  margin-bottom: 20px;
}

.title-block img {
  max-height: 80px;
  margin-top: 10px;
  display: block;
}
body.dark-mode .footer {
  background-color: #121212 !important;
  color: #eee !important;
  border-top-color: #444 !important;
}
.footer {
  background-color: #f2f2f2;
  padding: 20px;
  font-size: 14px;
  color: #444;
  text-align: center;
  border-top: 1px solid #ccc;
}

.footer a {
  color: #0066cc;
}

body.dark-mode .footer {
  background-color: #121212 !important;
  color: #eee !important;
  border-top-color: #444 !important;
}

body.dark-mode .footer a {
  color: #66b2ff !important;
}
body:not(.dark-mode) {
  background-color: white;
  color: #333;
}

body:not(.dark-mode) input,
body:not(.dark-mode) select,
body:not(.dark-mode) textarea,
body:not(.dark-mode) button {
  background-color: white;
  color: #333;
  border-color: #ccc;
}

body:not(.dark-mode) button:hover {
  background-color: #f0f0f0;
}

body:not(.dark-mode) header {
  background-color: white;
  color: #333;
}

body:not(.dark-mode) header h1,
body:not(.dark-mode) header button {
  color: #333;
}

body:not(.dark-mode) input::placeholder,
body:not(.dark-mode) textarea::placeholder {
  color: #666;
  opacity: 1;
}

body:not(.dark-mode) .footer {
  background-color: #f2f2f2;
  color: #444;
  border-top-color: #ccc;
}

body:not(.dark-mode) .footer a {
  color: #0066cc;
}
body:not(.dark-mode) .footer a {
  color: #0066cc;
}
/* === Light Mode Button Fixes === */
body:not(.dark-mode) .nav-button,
body:not(.dark-mode) #darkToggle,
body:not(.dark-mode) .vendor-link button,
body:not(.dark-mode) #submitOrder,
body:not(.dark-mode) .delete-container button:not(#submitOrder),
body:not(.dark-mode) .item-row button {
  background-color: #f0f0f0;
  color: #333;
  border: 1px solid #ccc;
}

body:not(.dark-mode) .nav-button:hover,
body:not(.dark-mode) #darkToggle:hover,
body:not(.dark-mode) .vendor-link button:hover,
body:not(.dark-mode) #submitOrder:hover,
body:not(.dark-mode) .delete-container button:not(#submitOrder):hover,
body:not(.dark-mode) .item-row button:hover {
  background-color: #e0e0e0;
}

    h1 {
      font-size: 32px;
      margin-bottom: 10px;
      color: #333;
    }

    img.logo {
      width: 120px;
      margin-bottom: 30px;
    }

    .relay-button {
      color: white;
      border: 2px solid black;
      border-radius: 50px;
      padding: 15px 30px;
      font-size: 18px;
      cursor: pointer;
      margin: 10px;
      transition: transform 0.1s ease, filter 0.1s ease;
      min-width: 300px;
    }

    /* State colors */
    .front-door       { background-color: #4CAF50; }
    .back-door        { background-color: #8BC34A; }
    .electronics-on   { background-color: #FF9800; }
    .electronics-off  { background-color: #F57C00; }
    .porch-on         { background-color: #03A9F4; }
    .porch-off        { background-color: #0288D1; }
    .backyard-on      { background-color: #9C27B0; }
    .backyard-off     { background-color: #7B1FA2; }
    .safe-door        { background-color: #E91E63; }
    .panic-on         { background-color: #D32F2F; }
    .panic-off        { background-color: #B71C1C; }

    /* Instant visual feedback when pressing */
    .relay-button:active {
      filter: brightness(0.8);
      transform: scale(0.97);
    }
	.button-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

/* Match footer line color to header line in dark mode */
body.dark-mode .footer {
  border-top-color: #ccc !important; /* same as header line */
}