:root {
  
  /* Watts Brand Fonts */
  --primary-font: 'Jost*', sans-serif;
  --secondary-font: 'Space Grotesk', sans-serif;
  /* Watts Brand Colors */
  --watts-orange: #f58220;            /* RGB(245, 130, 32) */
  --watts-purple: #a64686;            /* RGB(166, 70, 134) */
  --watts-magenta: #ff277d;           /* RGB(255, 39, 125) */
  --watts-cyan: #00aeef;              /* RGB(0, 174, 239) */
  --watts-green: #a6ce39;             /* RGB(166, 206, 57) */
  --watts-primary-night: #0a122a;     /* RGB(10, 18, 41) */
  --watts-accent-a-electric-purple: #870dba;  /* RGB(135, 13, 186) */
  --watts-accent-b-neon-pink: #ff277d;         /* RGB(255, 39, 125) */
  --watts-accent-b: #23c2ec;                    /* RGB(35, 194, 236) */
  --watts-sky: #ffffff;                          /* RGB(255, 255, 255) */
  --jazzy-secondary: var(--watts-accent-a-electric-purple);

  --watts-orange-rgb: 245, 130, 32;
  --watts-purple-rgb: 166, 70, 134;
  --watts-magenta-rgb: 255, 39, 125;
  --watts-cyan-rgb: 0, 174, 239;
  --watts-green-rgb: 166, 206, 57;
  --watts-primary-night-rgb: 10, 18, 42;
  --watts-accent-a-electric-purple-rgb: 135, 13, 186;
  --watts-accent-b-neon-pink-rgb: 255, 39, 125;
  --watts-accent-b-rgb: 35, 194, 236;
  --watts-sky-rgb: 255, 255, 255;
  --jazzy-secondary-rgb: 68, 4, 126;
}

.colorized.blue    { color: #2196f3; font-weight: bold; }
.colorized.red     { color: #f44336; font-weight: bold; }
.colorized.green   { color: #4caf50; font-weight: bold; }
.colorized.cyan    { color: #00bcd4; font-weight: bold; }
.colorized.purple  { color: #9c27b0; font-weight: bold; }
.colorized.pink    { color: #e91e63; font-weight: bold; }
.colorized.orange  { color: #ff9800; font-weight: bold; }
.colorized.yellow  { color: #ffeb3b; font-weight: bold; }
.colorized.white   { color: #ffffff; font-weight: bold; }
.colorized.black   { color: #000000; font-weight: bold; }
.colorized.magenta { color: #ff00ff; font-weight: bold; }

html, body {
  margin: 0;
  padding: 0;
  background-color: var(--watts-primary-night);
  color: var(--watts-green);
  font-family: var(--primary-font);
  height: 100%;
  width: 100%;
  /* overflow: hidden; */ /* Prevent scrollbars for fixed backgrounds */
}

#loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 18, 42, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.spinner {
  width: 50px;
  height: 50px;
  border: 6px solid var(--watts-cyan);
  border-top: 6px solid var(--watts-magenta);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* 🎨 Background Shape Styling */
.background-shape {
  position: absolute;
  width: 40vmin;
  height: 25vmin;
  animation: float 5s ease-in-out infinite, fadeInOut 300s ease-in-out infinite;
  will-change: transform, opacity;
  opacity: 0.1; /* Start mostly invisible */
}

/* 🌀 Floating Animation */
@keyframes float {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(10deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* 🌗 Base Fade-in/Fade-out Animation */
@keyframes fadeInOut {
  0%, 89% { opacity: 0.2; }  /* 🔻 Stay mostly invisible */
  90%, 92% { opacity: 0.95; } /* 🔥 Briefly fade in */
  93%, 100% { opacity: 0.2; } /* 🔻 Fade back out */
}

/* 🌀 Randomized Fade-in Delays (1-5 minutes apart) */
.background-shape.shape-1 {
  top: 10%;
  left: 10%;
  animation-delay: 1s, 65s; /* Float Delay, Random Fade Delay */
}

.background-shape.shape-2 {
  top: 5%;
  right: 15%;
  animation-delay: 2s, 180s; /* 3 minutes */
}

.background-shape.shape-3 {
  bottom: 10%;
  left: 8%;
  animation-delay: 3s, 240s; /* 4 minutes */
}

.background-shape.shape-4 {
  bottom: 5%;
  right: 10%;
  animation-delay: 4s, 90s; /* 1.5 minutes */
}

.background-shape.shape-5 {
  top: 5%;
  left: 35%;
  animation-delay: 5s, 300s; /* 5 minutes */
}

/* scroll bar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--watts-primary-night);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--watts-magenta);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--watts-accent-b);
}

/* Global scrollbar arrow buttons using inline SVG icons */
::-webkit-scrollbar-button {
  background: var(--watts-orange);
  width: 8px;
  height: 8px;
  background-repeat: no-repeat;
  background-position: center;
}
/* Ask Donnie Containers, Button and Tooltip */
#ask-donnie-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  font-family: var(--primary-font);
}

#donnie-bulb-wrapper {
  position: relative;
  display: inline-block;
}

#wattsbulb-icon {
  width: 72px;
  height: auto;
  cursor: pointer;
  transition: transform 0.3s ease;
  display: block;
  z-index: 1;
}

#wattsbulb-icon:hover {
  transform: scale(1.1); /* The bulb grows a lil ✨ */
}


#donnie-tooltip {
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--watts-green);
  color: var(--watts-primary-night);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 18px;
  font-family: var(--secondary-font);
  white-space: nowrap;
  box-shadow: 0 0 8px var(--watts-magenta);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 9999;
}

#donnie-bulb-wrapper:hover #donnie-tooltip {
  opacity: 1;
}

@keyframes wiggle {
  0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
  15%     { transform: translate(-50%, -50%) rotate(-10deg); }
  30%     { transform: translate(-50%, -50%) rotate(10deg); }
  45%     { transform: translate(-50%, -50%) rotate(-8deg); }
  60%     { transform: translate(-50%, -50%) rotate(8deg); }
  75%     { transform: translate(-50%, -50%) rotate(-4deg); }
  90%     { transform: translate(-50%, -50%) rotate(4deg); }
}

.wiggle-me {
  animation: wiggle 1.2s ease-in-out;
}

#bulb-question-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 78px;
  font-weight: bold;
  color: #ffcc00;
  text-shadow: 0 0 8px black;
  pointer-events: none;
  user-select: none;
  font-family: var(--primary-font, 'Arial Black'), sans-serif;
  transition: transform 0.3s ease, color 0.3s ease, text-shadow 0.3s ease;
  z-index: 2;
}

#donnie-bulb-wrapper:hover #bulb-question-mark {
  transform: translate(-50%, -50%) scale(1.5); /* Center + scale larger than bulb */
  color: var(--watts-green);
  text-shadow: 0 0 12px var(--watts-orange), 0 0 20px var(--watts-magenta);
}

#donnie-chat-box {
  position: fixed;
  bottom: 100px;
  right: 40px;
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

#donnie-chat-box.hidden {
  display: none;
}

#donnie-resizer {
  position: absolute;
  top: -12px;
  left: -12px;
  width: 20px;
  height: 20px;
  background: rgba(255, 192, 240, 0.4);
  cursor: nwse-resize;
  z-index: 10000;
  border-bottom: 2px solid var(--watts-magenta);
  border-right: 2px solid var(--watts-magenta);
  border-top-left-radius: 8px;
  box-shadow: 0 0 6px var(--watts-magenta);
}
#donnie-character {
  width: 150px;
  height: auto;
  align-self: flex-end;
}

#donnie-chat-window {
  width: 320px;
  height: 400px;
  background: var(--watts-primary-night);
  border: 2px solid var(--watts-orange);
  border-radius: 12px;
  padding: 15px;
  font-family: var(--primary-font);
  color: var(--watts-sky);
  box-shadow: 0 0 12px black;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  resize: none;
  position: relative;
}

#donnie-chat-box.user-resized #donnie-chat-window {
  resize: both;
  overflow: auto;
}

#donnie-messages {
  max-height: 100%;
  overflow-y: auto;
  flex: 1 1 auto;
  font-size: 14px;
}

.msg.user {
  text-align: right;
  color: var(--watts-accent-b-neon-pink);
  margin-bottom: 6px;
  font-family: var(--secondary-font);
}

.msg.donnie {
  text-align: left;
  color: var(--watts-accent-b);
  margin-bottom: 6px;
  font-family: var(--primary-font);
}

.msg.donnie .highlight {
  color: var(--watts-orange);
  font-weight: bold;
  text-shadow: 0 0 1px var(--watts-magenta);
}

@keyframes animationTextWave {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

@keyframes animationColorWave {
  0%   { background-position: 0% 50%; }
  100% { background-position: 600% 50%; }
}

@keyframes animationTextWave {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes animationColorWave {
  0%   { background-position: 0% 50%; }
  100% { background-position: 600% 50%; }
}

.hex-highlight {
  transition: all 0.3s ease-in-out;
  cursor: help;
}

.animation-highlight {
  display: inline;
  font-weight: bold;

  animation:
    animationTextWave 3.2s ease-in-out infinite,
    animationColorWave 15s linear infinite;

  background-image: linear-gradient(
    90deg,
    var(--watts-orange),
    var(--watts-magenta),
    var(--watts-cyan),
    var(--watts-purple),
    var(--watts-green),
    var(--watts-orange) /* loop back to start */
  );
  background-size: 600% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;



}


@keyframes holidayWave {
  0%   { background-position: 0% 0; filter: brightness(1); }
  50%  { background-position: 50% 0; filter: brightness(2); }
  100% { background-position: 100% 0; filter: brightness(1); }
}

@keyframes waveText {
  0%, 100% {
      transform: translateY(0px);
      opacity: 1;
  }
  50% {
      transform: translateY(-1px);
      opacity: 0.85;
  }
}


.holiday-animated-gradient {
  display: inline; /* let it flow inside paragraph text naturally */
  white-space: normal; /* allow wrapping */
  text-shadow: 0 0 4px currentColor, 0 0 8px currentColor;
  word-break: break-word; /* break long strings like Supercalifragilistic... */
}

.holiday-animated-gradient span {
  display: inline; /* 🌸 instead of inline-block, so they wrap */
  font-weight: bold;
  animation: waveText 1s infinite ease-in-out;
  background: linear-gradient(90deg, var(--color-stops));
  background-size: calc(var(--char-count) * 100%) 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;

  /* 🌈 Gradient wave motion */
  animation: holidayWave 3s linear infinite;
  animation-delay: calc(var(--i) * 0.1s);

  /* 💫 Glow effect from your original */
  text-shadow:
      0 0 3px currentColor,
      0 0 6px currentColor,
      0 0 10px currentColor;

  /* 🎉 Optional sparkle pulse */
  animation-timing-function: ease-in-out;
}
#donnie-chat-form {
  display: flex;
  gap: 5px;
}

#donnie-input {
  flex: 1;
  padding: 5px;
  border-radius: 5px;
  border: none;
  font-family: var(--secondary-font);
  background-color: #222;
  color: white;
}

#donnie-chat-form button {
  background: var(--watts-orange);
  color: black;
  padding: 5px 10px;
  border: none;
  border-radius: 5px;
  font-family: var(--primary-font);
  font-weight: bold;
  cursor: pointer;
}
.cloud1remote-form .form-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.8rem;
  flex-wrap: wrap;
  flex: 1;
}

.cloud1remote-form label {
  flex: 1 0 150px;
}
.cloud1remote-form .form-row input {
  flex: 1; /* Or flex: 1 1 0%; for more explicit behavior */
}
.cloud1remote-form .form-select,
.cloud1remote-form .form-control {
  flex: 2 0 200px;
}

.cloud1remote-form .form-buttons {
  text-align: center;
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.cloud1remote-form .form-buttons {
  gap: 1.5rem;
}
.form-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.form-buttons-outer {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  padding-bottom: 20px;
}

.form-buttons {
  display: flex;
  gap: 12px;
}

.label-dirty-update {
  animation: labelPop 0.2s ease-out;
}

@keyframes labelPop {
  0% { opacity: 0; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}

.old-value-label {
  font-size: 0.9em;
  color: var(--watts-accent-b-neon-pink);
  font-style: italic;
  white-space: nowrap;
  display: inline-block;
}

.cloud1remote-form .form-row select {
  flex: 1; /* Or flex: 1 1 0%; to match the input behavior */
}

.cloud1remote-form .form-row .old-value-label {
  display: inline-block;
}
.number-spinner {
  width: 80px;
  padding: 4px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.number-spinner::-webkit-inner-spin-button,
.number-spinner::-webkit-outer-spin-button {
  opacity: 1; /* Keep 'em visible, darling */
}




input[type="number"] {
  color: var(--watts-cyan);
  background-color: rgba(var(--watts-purple-rgb), 0.5);
  border: 1px solid var(--watts-cyan);
  padding: 6px 10px;
  border-radius: 4px;
  font-weight: bold;
  transition: all 0.2s ease-in-out;
}

input[type="number"]:focus {
  outline: none;
  box-shadow: 0 0 5px var(--watts-cyan);
  background-color: rgba(var(--watts-purple-rgb), 0.7);
}

.powercalc-container {
  max-width: 1100px;
  margin: auto;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.watts-calcstatus-good {
  color: var(--watts-green, #00ff99);
}

.watts-calcstatus-bad {
  color: var(--watts-red, #ff3366);
}

.watts-calcstatus-warning {
  color: var(--watts-orange, #ffb833);
}
.watts-bom-container {
  max-width: 700px;
  margin: 30px auto 0;
  padding: 25px;
  border-radius: 8px;
  background: rgba(var(--watts-purple-rgb), 0.2);
  box-shadow: 0 0 10px rgba(187, 103, 196, 0.5);
  border: 2px dashed var(--watts-pink, #ff69b4);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.watts-total-amps-banner {
  text-align: center;
  margin-top: 15px;
  background: rgba(var(--watts-purple-rgb), 0.2);
  box-shadow: 0 0 10px rgba(187, 103, 196, 0.5);
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--watts-orange, #ffb833);
  padding: 12px;

  border: 2px dashed var(--watts-orange, #ffb833);
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(255, 184, 51, 0.4);
}

.watts-bom-container h3 {
  text-align: center;
  margin-top: 0;
}

.watts-bom-container ul {
  padding-left: 20px;
  margin-top: 8px;
}

.watts-calcdisclaimer-banner {
  background: rgba(var(--watts-purple-rgb), 0.2);
  box-shadow: 0 0 10px rgba(187, 103, 196, 0.5);
  border-left: 5px solid var(--watts-pink, #e91e63);
  padding: 10px 15px;
  margin-bottom: 15px;
  border-radius: 6px;
  font-size: 0.9rem;
  color: var(--watts-cyan);
  font-weight: bold;
}

.autofill-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 0.5rem;
  font-size: 0.95rem;
  color: var(--watts-cyan);
}

.autofill-toggle input[type="checkbox"] {
  transform: scale(1.2);
  accent-color: var(--watts-pink);
}

input[type="checkbox"][id^="auto_"] {
  cursor: pointer;
  margin-left: 4px;
  transform: scale(1.1);
  accent-color: var(--watts-pink);
}

.form-error {
  background-color: rgba(255, 0, 100, 0.1);
  border: 1px solid var(--watts-pink);
  padding: 1em;
  margin-bottom: 1em;
  border-radius: 6px;
}

.constants-section {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.constants-flex {
  display: flex;
  gap: 40px;
  justify-content: space-between;
}

.constants-flex > div {
  flex: 1;
  min-width: 220px;
}
.constants-box {
  background: rgba(var(--watts-purple-rgb), 0.2);
  box-shadow: 0 0 10px rgba(187, 103, 196, 0.5);
  border: 1px solid var(--watts-cyan);
  border-radius: 8px;
  padding: 1rem;
  flex: 1 1 45%;
}

.input-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.circuit-box {
  box-shadow: 0 0 10px rgba(187, 103, 196, 0.5);
  background: rgba(var(--watts-purple-rgb), 0.3);
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid var(--watts-cyan);
}

.circuit-box input {
  width: 100%;
  padding: 0.3rem;
  background: rgba(var(--watts-purple-rgb), 0.6);
  color: var(--watts-cyan);
  border: 1px solid var(--watts-cyan);
  margin-bottom: 0.8rem;
}

.submit-btn {
  background: var(--watts-cyan);
  color: black;
  box-shadow: 0 0 10px rgba(187, 103, 196, 0.5);
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 1rem;
}

.results-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  gap: 1.5rem;
}

.result-box {
  background-color: rgba(var(--watts-purple-rgb), 0.2);
  box-shadow: 0 0 10px rgba(187, 103, 196, 0.5);
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid var(--watts-cyan);
}

.result-box .good {
  color: limegreen;
  font-weight: bold;
}

.result-box .bad {
  color: orange;
  font-weight: bold;
}

/* Vertical Up Arrow */
::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23f58220" viewBox="0 0 24 24"><path d="M12 8l-6 6h12z"/></svg>');
}

/* Vertical Down Arrow */
::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23f58220" viewBox="0 0 24 24"><path d="M12 16l6-6H6z"/></svg>');
}

/* Horizontal Left Arrow */
::-webkit-scrollbar-button:single-button:horizontal:decrement {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23f58220" viewBox="0 0 24 24"><path d="M8 12l6-6v12z"/></svg>');
}

/* Horizontal Right Arrow */
::-webkit-scrollbar-button:single-button:horizontal:increment {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23f58220" viewBox="0 0 24 24"><path d="M16 12l-6 6V6z"/></svg>');
}

/* Global scrollbar styles for Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--watts-magenta) var(--watts-primary-night);
}


.navbar {
  background-color: rgba(var(--watts-accent-a-electric-purple-rgb), 0.5);
  padding: 15px 20px;
  border-radius: 12px;
  font-size: 20px;
  font-weight: bold;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  max-width: 90%;
  margin: 20px auto;
  position: relative;
  box-shadow: 0 4px 15px rgba(187, 103, 196, 0.5);
  border: 2px solid var(--watts-purple);
  flex-wrap: nowrap;

}

/* 🔹 Navbar left side (team name) */
.navbar-left {
  display: flex; 
  align-items: center;
  font-size: 22px;
}

/* 🔹 Navbar right side (user info + dropdown) */
.navbar-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}

.navbar-right .navbar-username {
  display: inline-block; 
  position: relative; 
}

.navbar-right .navbar-dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  background-color: rgba(var(--watts-accent-a-electric-purple-rgb), 0.95);
  border: 2px solid var(--watts-purple);
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(187, 103, 196, 0.5);
  display: none;
  flex-direction: column;
  min-width: 80px;
  z-index: 10;
}

.navbar-right .navbar-username:hover .navbar-dropdown,
.navbar-right .navbar-dropdown:hover {

  display: block; 
}

.navbar-dropdown a {
  color: var(--watts-cyan);
  padding: 10px;
  text-decoration: none;
  display: block;
}

.navbar-dropdown a:hover {
  background-color: rgba(var(--watts-cyan-rgb), 0.5);
}


.navbar-right:hover .navbar-dropdown {
  display: flex;
}

/* Logo Group */
.logo-group {
  display: flex;
  margin-left: 20px;
  align-items: center;
  position: relative;
  gap: 10px; /* Adds space between logos */

  transition: transform 0.2s ease; /* smooth transition for scale */
}
.logo-group:hover {
  background-color: transparent !important; /* force removal of any background change */
  transform: scale(1.05);
}

.navbar-username {
  cursor: pointer;
  padding: 10px 15px;
  font-weight: bold;
  color: var(--watts-cyan);
}
.navbar-username:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.logout-button{
  padding: 10px 20px;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--watts-accent-a-electric-purple);
  color: var(--watts-cyan);
  border: 2px solid var(--watts-purple);
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.logout-button:hover,
.back-button:hover {
  background-color: var(--watts-purple);
  box-shadow: 0 0 10px rgba(187, 103, 196, 0.5);
}

.logout-button:active {
  transform: scale(0.95);
  background-color: #9350bb;
}



/* Space Between Logo Group & H1 */
.navbar-title {
  margin-left: 20px;
  font-size: 40px;
  font-weight: bold;
  color: var(--watts-cyan);
  animation: float 5s ease-in-out infinite; 
  
}




/* Contractor Logo - Peeking from under */
.contractor-logo {
  width: 100px;
  position: absolute;
  left: -50px;
  top: 5px;
  bottom: 5px;
  opacity: 0.8; /* Slightly faded */
  z-index: 1;
}

/* Team Logo - Main logo */
.team-logo {
  width: 200px;
  position: relative;
  z-index: 1;
  padding-right: 250px;
}


h1 {
  font-size: 40px;
  padding-right: 3px;
  color: var(--watts-cyan);
  font-weight: bolder;
  position: relative;
  z-index: 2;
  text-align: center;
  font-family: var(--primary-font);
}


#global-notification {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  background-color: rgba(0, 204, 0, 0.9); /* Default green */
  color: #fff;
  text-align: center;
  font-weight: 600;
  z-index: 9999;
  transition: opacity 2s ease;
}
#global-notification.hidden {
  opacity: 0;
  pointer-events: none;
}
.header-box {
  background-color: rgba(var(--jazzy-secondary-rgb), 0.8); /* Deep purple with slight transparency */
  color: #ffffff; /* White text */
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  max-width: 80%;
  margin: 20px auto;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 15px rgba(187, 103, 196, 0.5);
  border: 2px solid var(--watts-purple); /* Light purple border */
}

.header-box h1 {
  margin: 0;
  padding: 0;
  font-size: 28px;
}
.shapes-wrapper {
  position: fixed; /* Ensure shapes stay in place */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0; /* Behind everything */
  pointer-events: none; /* Ensure shapes don't interfere with user interactions */
  overflow: hidden; /* Prevent overflow of shapes outside viewport */
  display: flex;
  justify-content: space-between;
  align-items: center;
}


/* General Styling */
.bulbs-container {
  background-color: #000000; 
  color: white; 
  padding: 5px;
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  max-height: 200px;
  overflow-y: auto;
}

.bulb-span {
  display: inline-block;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  font-size: 12px;
  font-weight: bold;
  margin: 2px;
  border-radius: 50%;
  border: 1px solid #ccc;
}
.device-log-group {
  margin-bottom: 2em;
}

.device-log-header {
  border: 2px solid var(--watts-purple);
  border-radius: 8px;
  padding: 20px;
  margin: 0 auto 10px;  /* centers horizontally */
  background-color: rgba(var(--watts-accent-a-electric-purple-rgb), 0.5);
  text-align: center; 
  color: var(--watts-cyan);
  font-family: var(--secondary-font);
  font-size: 20px;
  width: fit-content;  /* width fits the content */
  display: flex;
  flex-direction: column; /* stack header and paragraph vertically */
  justify-content: center;
  align-items: center;
  z-index: 1;
  position: relative;
  columns: var(--watts-accent-b);
}

.tooltip {
    text-align: left;
    line-height: 1.5;
    width: 150px;
    font-family: var(--secondary-font);
    background-color: rgba(var(--jazzy-secondary-rgb), 0.9);
    position: absolute;
    color: white;
    border-radius: 5px;
    font-size: 12px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9);
    max-width: 250px;
    z-index: 1000;
    transition: opacity 0.2s ease-in-out;
}

.tooltip p {
    margin: 4px 0;
}
.tooltip-good-signal {
  color: #4caf50; /* Green for strong signal */
}

.tooltip-medium-signal {
  color: #ff9800; /* Orange for medium signal */
}

.tooltip-poor-signal {
  color: #f44336; /* Red for weak signal */
}

.tooltip-offline {
  background: #9e9e9e; /* Grey for offline */
}

.tooltip-bulb {
  width: 30px;
  height: 30px;
  vertical-align: middle;
  margin-left: 5px;
}

.bulb-on {
  filter: none; /* Normal color when ON */
}

.bulb-off {
  filter: grayscale(100%); /* Greyscale when OFF */

}

.feedback-notice {
  background: rgba(var(--watts-green-rgb), 0.15);
  padding: 8px 12px;
  border-radius: 4px;
  margin-bottom: 8px;
  color: rgb(var(--watts-green-rgb));
  font-weight: 600;
}

.feedback-form {
  background: rgba(var(--jazzy-secondary-rgb), 0.6);
  border: 1px solid rgba(var(--watts-purple-rgb), 0.3);
  border-radius: 6px;
  /* Center horizontally with a fixed width */
  width: 50%;
  margin: 12px auto; /* top/bottom = 12px, left/right = auto to center */
  padding: 12px;

  /* Add a proper box-shadow (the old line was missing the offsets!) */
  box-shadow: 0 2px 6px rgba(var(--watts-green-rgb), 0.3);

  display: flex;
  flex-direction: column;
  gap: 12px;
}

.feedback-form label {
  display: block;
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 15px;
  color: rgb(var(--watts-purple-rgb));
}

.feedback-form .feedback-row {
  display: flex; 
  align-items: center; /* vertically center them */
  gap: 10px;          /* space between elements */
}

.feedback-form textarea {
  flex: 1;           
  min-height: 50px;  
  border: 1px solid rgba(var(--watts-purple-rgb), 0.2);
  border-radius: 4px;
  background-color: rgba(var(--watts-purple-rgb), 0.5);
  width: 50%;
  padding: 8px;
  font-size: 20px;
  font-family: var(--secondary-font);
  color: var(--watts-accent-b) !important;
  outline: none;
}
.feedback-form textarea:focus {
  border-color: rgb(var(--watts-purple-rgb));
  box-shadow: 0 0 6px rgba(var(--watts-purple-rgb), 0.3);
}



.submit-feedback-button {
  padding: 8px 16px;
  background-color: rgb(var(--watts-accent-a-electric-purple));
  color: var(--watts-cyan);
  font-size: 20px;
  font-weight: 600;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}
.submit-feedback-button:hover {
  box-shadow: 0 4px 10px rgba(var(--watts-purple-rgb), 0.4);
  transform: translateY(-2px);
  color: var(--jazzy-secondary);
  background-color: rgb(var(--watts-accent-b-neon-pink));
}

.controller-logo {
  filter: drop-shadow(0 0 10px var(--watts-magenta));
  transition: filter 0.3s ease;
}

.device-log-header h2 {
  text-align: center;
  color: var(--watts-cyan);
  margin: 0;
  font-family: var(--secondary-font);

}

.device-log-header p {
  text-align: center;
  color: rgba(var(--watts-magenta-rgb), 0.6);
  margin: 0;
  font-family: var(--secondary-font);
}

.landing-container {

  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: transparent;
  text-align: center;
  z-index: 2;
  position: relative;
}

/* Top Controls - Aligning Buttons & IP Input */
.top-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 15px; /* Space between buttons and IP box */
  margin: 20px;
  position: relative;
  z-index: 2;

}

/* IP Address Input Styling */
.ip-address-container {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: 10px;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 8px 12px;
  border-radius: 8px;
  width: 20%;
}

.ip-address-container label {
  color: #ffffff;
  font-size: 14px;
}

.ip-address-container input {
  padding: 5px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background-color: #2c2f33;
  color: #ffffff;
  font-size: 14px;
  width: 140px;
}

/* Button Styling */
.button-group {
  display: flex;
  gap: 10px; /* Space between buttons */
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.tab-container {
  display: flex;
  justify-content: center; /* centers the tabs */
  gap: 10px;
  margin-bottom: 20px;
}

.tab-button {
  padding: 10px 20px;
  cursor: pointer;
  background-color: rgba(var(--jazzy-secondary-rgb), 0.5);
  color: var(--watts-accent-b);
  border: none;
  border-radius: 4px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.tab-button:hover {
  background-color: var(--jazzy-secondary);
  color: var(--watts-sky);
}

.tab-button.active {
  background-color: var(--jazzy-secondary);
  color: var(--watts-sky);
}

.tab-button.active:hover {
  /* Active state remains the same on hover */
  background-color: var(--jazzy-secondary);
  color: var(--watts-sky);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* General Button Styling */
.button-group a,
.button-group button {
    padding: 10px 20px;
    background-color: var(--watts-accent-a-electric-purple);
    color: var(--watts-cyan);
    text-decoration: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    border: none;
    cursor: pointer;
    display: inline-block;
    text-align: center;
}

/* Hover and Active Effects */
.button-group a:hover,
.button-group button:hover {

    color: var(--watts-accent-a-electric-purple);
    box-shadow: 0 0 10px rgba(187, 103, 196, 0.5);
}

.button-group a:active,
.button-group button:active {
    transform: scale(0.95);
    background-color: #9350bb;
}


/* userbutton Styling */
.userbutton-group {
  display: flex;
  gap: 10px; /* Space between userbuttons */
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
/* General userbutton Styling */
.userbutton-group a,
.userbutton-group userbutton {
    padding: 10px 20px;
    background-color: var(--watts-accent-a-electric-purple);
    color: var(--watts-cyan);
    text-decoration: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    border: none;
    cursor: pointer;
    display: inline-block;
    text-align: center;
}


/* Hover and Active Effects */
.userbutton-group a:hover,
.userbutton-group userbutton:hover {
    background-color: var(--watts-cyan);
    color: var(--watts-accent-a-electric-purple);
    box-shadow: 0 0 10px rgba(187, 103, 196, 0.5);
}

.userbutton-group a:active,
.userbutton-group userbutton:active {
    transform: scale(0.95);
    background-color: #9350bb;
}


.landing-container a:hover,
.landing-container .logout-button:hover {
  background-color: var(--watts-cyan);
  color: var(--watts-accent-a-electric-purple);
  box-shadow: 0 0 10px rgba(187, 103, 196, 0.5);
}

.logo {
  margin: 20px 0;
  width: auto;
  height: 100px;
}
/* Container Styles */
#htmlgraphics-container {
    padding: 20px;
    background-color: #0a1229;
    border-radius: 8px;
    border: 1px solid var(--watts-accent-a-electric-purple);
  }
  
  #htmlgraphics-container h2 {
    color: var(--watts-cyan);
    font-size: 24px;
    text-align: center;
    margin-bottom: 20px;
  }

/* 🌐 Cloud1 Layout */
.status-banner {
  max-width: 800px;
  margin: 0 auto;
  padding: 15px 20px;
  font-size: 17px;
  text-align: center;
  border-radius: 10px;
  font-weight: bold;
  transition: all 0.4s ease-in-out;
  overflow: hidden;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top center;
  height: 0;
  pointer-events: none;
}

.status-banner.show {
  opacity: 1;
  transform: scaleY(1);
  height: auto;
  pointer-events: auto;
}
.status-banner .onlineStatusLabel { color: #006315; }
.status-banner .offlineStatusLabel { color: #420021; }
/* 🌈 Online glam */
.online-banner {
  background: #6de49b;
  color: #006400;
  border: 2px solid #48d17a;
}

/* 🌈 Online time (lush green) */
.online-time-green {
  color: #006315 !important;
  font-weight: bold;
  letter-spacing: 0.5px;
}

/* 💔 Offline time (firebrick red) */
.offline-time-red {
  color: #b22222 !important;
  font-weight: bold;
  letter-spacing: 0.5px;
}
/* 💔 Offline drama */
.offline-banner {
  background: #ffd6e8;
  color: #a7002f;
  border: 2px solid #ff69b4;
}

.coming-soon {
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  margin-top: 20px;
}
.cloud1-dashboard {
  display: flex;
  gap: 20px;
  padding: 20px;
  justify-content: center;
}

#syncCloudTab .row {
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
#syncCloudTab label {
  min-width: 100px;
  font-weight: bold;
}
#syncCloudTab .checkbox-grid {
  display: flex;

  flex-wrap: wrap;
}

.cloud1remote-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 2rem;
  padding: 2rem;
  max-width: 900px;
  margin: 0 auto;
  background: rgba(var(--watts-purple-rgb), 0.1);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(255, 105, 180, 0.2);
}

.cloud1remote-form .form-group {
  display: flex;
  flex-direction: column;
}

.cloud1remote-form label {
  font-weight: bold;
  color: var(--watts-cyan);
  margin-bottom: 0.3rem;
}

.cloud1remote-form input[type="number"],
.cloud1remote-form select,
.cloud1remote-form button {
  padding: 8px 12px;
  border-radius: 5px;
  border: 1px solid var(--watts-cyan);
  background-color: rgba(var(--watts-purple-rgb), 0.3);
  color: var(--watts-cyan);
  font-weight: bold;
  transition: all 0.2s ease-in-out;
}

.cloud1remote-form input:focus,
.cloud1remote-form select:focus {
  outline: none;
  box-shadow: 0 0 5px var(--watts-cyan);
}

.cloud1remote-form button {
  background-color: var(--watts-cyan);
  color: black;
  cursor: pointer;
}

.cloud1remote-form button:hover {
  background-color: var(--watts-green);
}


/* 🟢 Left: Status Panel */
.cloud1-device-status {
  position: relative; /* Establish positioning context */
  width: 30%;
  padding: 15px;
  border-radius: 12px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);
  overflow: hidden; /* Hide overflow from pseudo-element */
}

/* Pseudo-element for the gradient background */
.cloud1-device-status::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--watts-orange) 0%,
    var(--watts-purple) 25%,
    var(--watts-magenta) 50%,
    var(--watts-cyan) 75%,
    var(--watts-green) 100%
  );
  filter: blur(8px);
  opacity: 0.2;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none; /* Make sure clicks pass through */
}

/* 🔥 Right: Content Panel */
.cloud1-content {
  position: relative; /* For pseudo-element positioning */
  width: 50%;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(187, 103, 196, 0.5);
}

.cloud1-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--watts-orange) 0%,
    var(--watts-purple) 25%,
    var(--watts-magenta) 50%,
    var(--watts-cyan) 75%,
    var(--watts-green) 100%
  );
  filter: blur(8px);
  opacity: 0.2;
  z-index: 0;
  pointer-events: none; /* Make sure clicks pass through */
}


/* 📂 Tabs Navigation (Above Content) */
.cloud1-tab-container {
  display: flex;
  gap: 5px;
  padding: 10px;
  background: rgba(var(--jazzy-secondary-rgb), 0.5);
  border-radius: 10px 10px 0 0;
}

.cloud1-tab-button {
  padding: 10px 20px;
  border: none;
  background: var(--watts-accent-a-electric-purple);
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  transition: background 0.3s ease;
}

.cloud1-tab-button.active {
  background: rgb(var(--watts-accent-a-electric-purple));
  color: var(--watts-accent-b);
}

/* 🎛️ Controls */
.cloud1-device-controls-container {
  background-color: #1e1e2f;
  padding: 25px;
  border-radius: 16px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
  color: #eee;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cloud1-sln-control {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sln-adjust-button {
  background-color: #7e57c2;
  color: white;
  font-size: 18px;
  border: none;
  padding: 5px 12px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.2s ease-in-out;
}

.sln-adjust-button:hover {
  background-color: #9575cd;
}

.folder-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: start;
    z-index: 2;
}
.color-icon {
  margin: 2px;
  vertical-align: middle;
  transition: transform 0.2s ease;
}
.color-icon:hover {
  transform: scale(1.1);
}
#presetFolderGrid {
  position: relative;
width: 100%;
overflow: auto;
box-sizing: border-box;
}

#presetLibraryModal {
  position: relative;
  width: 100%;
  overflow: auto;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

#presetList {
  position: relative;
width: 100%;
height: auto;
overflow: auto;
box-sizing: border-box;
}

#presetLibraryModalContainer {
  position: fixed; /* Let it break free, girl! */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9998;
  pointer-events: none;
}

#presetItems {
  position: relative;
width: 100%;
height: auto;
overflow: auto;
box-sizing: border-box;
}

.custom-modal-body {
  height: auto;
overflow: auto;
box-sizing: border-box;
}

.custom-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.65);
  z-index: 9999;
  display: flex;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.custom-modal-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.loader-spinner {
  border: 6px solid rgba(255, 255, 255, 0.2);
  border-top: 6px solid #ffffff;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
  margin: 2rem auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.custom-modal-content {
  background: #1e1e1e;
  box-sizing: border-box;
  padding: 20px;
  border-radius: 10px;
  width: 90%;
  justify-content: center;  /* ⬅️ centers horizontally */
  align-items: center;      /* ⬆️ centers vertically */
  max-width: 700px;
  height: 80vh !important;
  max-height: 80vh !important;
  overflow-y: auto;
  color: #fff;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

.preset-list.hidden {
  display: none;
}

.folder-grid {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.preset-folder-btn {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  width: 120px;
  text-align: center;
}

.preset-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.custom-modal-overlay.visible {
  pointer-events: auto;
  opacity: 1;
}

.custom-modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.6);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}


.preset-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preset-modal-content {
  background: #1a1a1a;
  color: #fff;
  padding: 2rem;
  border-radius: 12px;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

.preset-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.preset-close-btn {
  background: transparent;
  color: #fff;
  font-size: 24px;
  border: none;
  cursor: pointer;
}

.preset-folder-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
  justify-content: flex-start;
}

.preset-folder-btn {
  background-color: #2c2c2c;
  color: white;
  border: none;
  border-radius: 10px;
  padding: 0.5rem;
  cursor: pointer;
  width: 120px;
  text-align: center;
}

.folder-label {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: #ccc;
}

.folder-grid,
.preset-list {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.preset-view-wrapper {
  position: relative;
  width: 100%;
  min-height: 300px;
}

.hidden {
  display: none;
}

.preset-list {
  margin-top: 1rem;
  z-index: 1;
}

.preset-scroll-list {
  max-height: 400px;
  overflow-y: auto;
  border-top: 1px solid #333;
}

.preset-back-btn {
  margin-bottom: 1rem;
  background: #333;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.category-header {
  text-align: center;
  margin-bottom: 20px;
}

.category-icon {
  width: 100px;
  height: 100px;
  margin: 0 auto;
}

.preset-preview-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #2b2b2b;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.preset-preview-item:hover {
  background: #3d3d3d;
}


.preset-preview-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem; /* Cute gap between colors and animation */
}

.preset-color-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 10px;
}

.preset-animation-preview {
  width: 100%;
  text-align: center;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.color-box {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid #111;
}




#slnValue {
  font-weight: bold;
  font-size: 18px;
  width: 30px;
  text-align: center;
}

/* 🎨 Color Pickers */
.cloud1-color-group {
  margin-top: 20px;
}

.cloud1-color-container input[type="color"] {
  -webkit-appearance: none;  /* Remove default styling for WebKit browsers */
  appearance: none;          /* Standard property for compatibility */
  border: none;              /* Remove any default border */
  width: 30px;               /* Set a cute width */
  height: 30px;              /* Set a cute height */
  border-radius: 50%;        /* Make them perfectly round */
  padding: 0;
  cursor: pointer;           /* Give a pointer cursor for extra flair */
  margin: 0 5px;             /* Add a little spacing between dots */
}

/* Remove default inner padding in WebKit browsers */
.cloud1-color-container input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

/* Style the inner color swatch */
.cloud1-color-container input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
}

/* 📊 Sliders */
.cloud1-slider-group {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

/* 🔘 Buttons */
.cloud1-device-button {
  background: var(--watts-accent-b);
  padding: 10px 20px;
  border: none;
  color: white;
  cursor: pointer;
  border-radius: 10px; /* 💖 Extra glam rounded edges */
  font-size: 16px;
  transition: background 0.3s ease, transform 0.1s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cloud1-device-button:hover {
  background: var(--watts-accent-a-electric-purple);
}
.cloud1-device-button-lights-state {
  padding: 10px 20px;
  border: none;
  color: white;
  cursor: pointer;
  border-radius: 10px; /* 💖 Extra glam rounded edges */
  font-size: 16px;
  transition: background 0.3s ease, transform 0.1s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cloud1-device-button-lights-state[data-on="true"] {
  background-color: #00c853; /* Bright green for ON */
  color: white;
}

.cloud1-device-button-lights-state[data-on="false"] {
  background-color: #1b5e20; /* Dark green for OFF */
  color: white;
}
/* 🔘 Buttons */
.cloud1-device-reboot-button {
  background:var(--watts-accent-b-neon-pink);
  padding: 10px 20px;
  border: none;
  color: white;
  cursor: pointer;
  border-radius: 10px; /* 💖 Extra glam rounded edges */
  font-size: 16px;
  transition: background 0.3s ease, transform 0.1s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cloud1-device-reboot-button:hover {
  background: #ff0000;
}
.cloud1-animation-container {
  text-align: center;
  padding: 15px;

  border-radius: 10px;

}

.cloud1-animation {
  position: relative; /* Establish a positioning context */
  width: 50%;
  min-height: 50px; 
  display: flex;
  justify-self: center;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  overflow: hidden;
}
/* 💄 Luxe Results Table Styling */
.table.results-table {
  background-color: #1e1e2f; /* deep charcoal */
  color: #f1f1f1;            /* soft white text */
  border: 1px solid #444;
  font-size: 0.95rem;
}

.table.results-table th {
  background-color: #2b2b40; /* slightly lighter header */
  color: #ffdd57;            /* golden header text */
  border-bottom: 2px solid #666;
  padding: 12px;
}

.table.results-table td {
  background-color: #262637;
  color: #e0e0e0;
  padding: 10px;
  vertical-align: top;
}

.table.results-table tr:nth-child(even) td {
  background-color: #2c2c3f;
}

.table.results-table details summary {
  color: #89cfff;
  cursor: pointer;
}

.table.results-table details .border {
  background-color: #1a1a2a;
  color: #e0e0e0;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #444;
  margin-top: 6px;
}


.watts-dark-table {
  background-color: #1a1a1a;
  color: #f8f9fa;
}

.watts-dark-table thead th {
  background-color: #2c2c2c;
  color: #ffffff;
}

pre {
  background: #1e1e1e;
  color: #f2f2f2;
  padding: 10px;
  border-radius: 4px;
  font-size: 0.9em;
}

.watts-dark-table td {
  background-color: #252525;
  color: #ddd;
}

.accordion-button.bg-dark {
  background-color: #1e1e2f;
  color: #fff;
}
.accordion-button.collapsed {
  background-color: #2a2a3b;
}
.accordion-body {
  background-color: #181828;
}
.watts-dark-card {
  border: 1px solid #444;
}
.watts-message-details summary {
  cursor: pointer;
  padding: 6px 0;
  font-size: 1rem;
  color: #f8f8f8;
}

.watts-message-content {
  background-color: #2c2c3b;
  border-color: #666;
}

.attachment-link {
  font-size: 0.95rem;
  display: inline-block;
  margin-top: 4px;
}

.ticket-results {
  margin-top: 2rem;
}

.section-title {
  font-size: 2rem;
  font-weight: bold;
  color: var(--watts-gold);
  margin-bottom: 1.5rem;
}

.ticket-card {
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-bottom: 2rem;
  padding: 1rem 1.5rem;
  background-color: #f9f9f9;
}

.ticket-header div {
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.ticket-messages {
  margin-top: 1rem;
  border-top: 1px solid #ddd;
  padding-top: 1rem;
}

.ticket-message {
  margin-bottom: 1.5rem;
}

.message-header {
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.message-body {
  background: #fff;
  padding: 1rem;
  border-radius: 6px;
  border: 1px solid #eee;
}

.btn-export {
  background-color: var(--watts-gold);
  color: black;
  padding: 0.5rem 1.5rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  transition: 0.3s ease;
}

.btn-export:hover {
  background-color: gold;
}

.export-btn-wrapper {
  margin-top: 2rem;
  text-align: right;
}

#slothGameCanvas {
  background-color: #0d075f2a;
  display: block;
  margin: 0 auto;
  image-rendering: pixelated;
  box-shadow: 0 0 20px rgba(106, 2, 138, 0.493);
}
  /* Table Styles */
  #logs-table {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    background-color: #2c2f3387;
    border-radius: 8px;
    overflow: hidden;
    position: relative; /* make the table positioned */
  }
  
  
  #logs-table::before {
    content: "";
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    background: linear-gradient(
      90deg,
      var(--watts-orange) 0%,
      var(--watts-purple) 25%,
      var(--watts-magenta) 50%,
      var(--watts-cyan) 75%,
      var(--watts-green) 100%
      
    );
    background-size: 300%; /* Increase background size to have room for animation */
    z-index: 1;
    filter: blur(8px);
    opacity: 0.2;
    border-radius: inherit;
    animation: glow-chase 30s linear infinite;
  }
  
  @keyframes glow-chase {
    0% {
      background-position: 0% 50%;
    }
    100% {
      background-position: 100% 50%;
    }
  }


  #logs-table th,
  #logs-table td {
    padding: 10px;
    text-align: center;
  }
    
  #logs-table th {
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    color: #ffffff;
    background-color: var(--watts-accent-a-electric-purple);
  }
  
  #logs-table tr:nth-child(even) {
    background-color: #2c2f33;
  }
  
  #logs-table tr:hover {
    background-color: var(--watts-accent-a-electric-purple);
    color: #ffffff;
  }

  .gptform-container {
    background-color: #23272a; /* Slightly lighter than main background */
    padding: 30px 40px;
    border-radius: 10px;
    box-shadow: 14px 11px 18px 4px rgb(154 5 173 / 33%);
    width: 100%;
    box-sizing: border-box;
    z-index: 1;
  }
  
  /* Login Title Styling */
  .gptform-container h1 {
    color: var(--watts-cyan); /* Purple Accent */
    font-size: 24px;
    text-align: center;
    margin-bottom: 20px;
  }
  
  /* Form Group Styling */
  .gptform-group {
    margin-bottom: 20px;
    text-align: left;
  
  }
  
  .gptform-group label {
    display: block;
    color: #ffffff;
    margin-bottom: 5px;
    font-weight: bold;
  }


  .checkbox-group {
    margin: 20px 0;
}

.checkbox-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.checkbox-label {
    box-sizing: border-box;
}

.clickable-emoji {
  cursor: pointer;
}

  .checkbox-wrapper input[type="checkbox"] {
    background-image: -webkit-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)),
              -webkit-linear-gradient(left,  var(--watts-accent-b-neon-pink) 50%, var(--watts-accent-b) 50%);
    background-size: 100% 100%, 200% 100%;
    background-position: 0 0, 15px 0;
    border-radius: 12.5px;
    box-shadow: inset 0 1px 4px hsla(0,0%,0%,.5),
          inset 0 0 10px hsla(0,0%,0%,.5),
          0 0 0 1px hsla(0,0%,0%,.1),
          0 -1px 2px 2px hsla(0,0%,0%,.25),
          0 2px 2px 2px hsla(0,0%,100%,.75);
    cursor: pointer;
    height: 12.5px;
    padding-right: 12.5px;
    width: 37.5px;
    appearance: none;
    -webkit-appearance: none;
    transition: .25s;
    -webkit-transition: .25s;
  }
  .checkbox-wrapper input[type="checkbox"]:after {
    background-color: var(--jazzy-secondary);
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
    border-radius: 12.5px;
    box-shadow: inset 0 1px 1px 1px var(--watts-accent-b-neon-pink)(0,0%,100%,1),
          inset 0 -1px 1px 1px hsla(0,0%,0%,.25),
          0 1px 3px 1px hsla(0,0%,0%,.5),
          0 0 2px hsla(0,0%,0%,.25);
    content: '';
    display: block;
    height: 12.5px;
    width: 25px;
  }
  .checkbox-wrapper input[type="checkbox"]:checked {
    background-position: 0 0, 17.5px 0;
    padding-left: 12.5px;
    padding-right: 0;
  }

  table {
      width: 90%;
      margin: 2em auto;
      border-collapse: collapse;
      position: relative;
      z-index: 2;
  }
table::before {
    content: "";
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      var(--watts-orange) 0%,
      var(--watts-purple) 25%,
      var(--watts-magenta) 50%,
      var(--watts-cyan) 75%,
      var(--watts-green) 100%
      
    );
    background-size: 300%; /* Increase background size to have room for animation */
    z-index: 1;
    filter: blur(8px);
    opacity: 0.2;
    border-radius: inherit;
    animation: glow-chase 30s linear infinite;
  }
  
  @keyframes glow-chase {
    0% {
      background-position: 0% 50%;
    }
    100% {
      background-position: 100% 50%;
    }
  }
  th, td {
      padding: 0.5em;
      border: 1px solid #555;
      text-align: center;
      font-family: var(--secondary-font);
  }
  .action-button {
      padding: 5px 10px;
      margin: 2px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      background-color: #28a745;
      color: #fff;
      transition: background-color 0.3s ease;
  }
  .action-button:hover {
      background-color: #218838;
  }
  

  #logs-table td.preview-cell div {
    width: 40px;
    height: 40px;
    background-color: #555;
    border-radius: 50%;
  }
  
  #logs-table td,
  #logs-table th {
    color: #ffffff;
  }
  
  #logs-table td.preview-cell:hover div {
    background-color: var(--watts-cyan);
  }
  
  /* Button Styles */
  #logs-table .action-button {
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    background-color: var(--watts-accent-a-electric-purple);
    transition: all 0.3s ease-in-out;
  }
  
  #logs-table .action-button:hover {
    background-color: var(--watts-cyan);
    color: #2c2f33;
    box-shadow: 0 0 10px rgba(187, 103, 196, 0.5);
  }
  
  #logs-table .action-button:active {
    transform: scale(0.95);
    background-color: #9350bb;
  }
  
  /* Spacing between buttons */
  #logs-table .action-button + .action-button {
    margin-left: 10px;
  }

  


  #preset-table {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    background-color: #2c2f3300;
    border-radius: 8px;
    overflow: hidden;
    /* z-index: 2; */
  }
  

  

  
  #preset-table tr:nth-child(even) {
    background-color: #2c2f33;
  }
  
  table tr:hover {
    background-color: var(--watts-accent-a-electric-purple);
    color: var(--watts-cyan);
  }

  table {
      width: 90%;
      margin: 2em auto;
      border-collapse: collapse;
      position: relative;
      z-index: 2;
  }
  th, td {
      padding: 0.5em;
      border: 1px solid #870DBA;
      text-align: center;
  }
  .action-button {
      padding: 5px 10px;
      margin: 2px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      background-color: #28a745;
      color: #fff;
      transition: background-color 0.3s ease;
  }
  .action-button:hover {
      background-color: #218838;
  }
  .color-dot {
      display: inline-block;
      width: 20px;
      height: 20px;
      margin: 2px;
      border: 1px solid #000;
      border-radius: 50%;
  }

  /* State Column Styling */
  .state-column {
    width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #ffffff;
  }
  
  /* Preview Cell Styling */
  #preset-table td.preview-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #23272a;
  }
  
  #preset-table td.preview-cell div {
    width: 40px;
    height: 40px;
    background-color: #555;
    border-radius: 50%;
  }
  
  #preset-table td,
  #preset-table th {
    color: #ffffff;
    font-weight: bold;
  }
  
  #preset-table td.preview-cell:hover div {
    background-color: var(--watts-cyan);
  }
  
  /* Button Styles */
  #preset-table .action-button {
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    background-color: var(--watts-accent-a-electric-purple);
    transition: all 0.3s ease-in-out;
  }
  
  #preset-table .action-button:hover {
    background-color: var(--watts-cyan);
    color: #2c2f33;
    box-shadow: 0 0 10px rgba(187, 103, 196, 0.5);
  }
  
  #preset-table .action-button:active {
    transform: scale(0.95);
    background-color: #9350bb;
  }
  
  /* Spacing between buttons */
  #preset-table .action-button + .action-button {
    margin-left: 10px;
  }
  



  

  .error-input {
    border-color: #ff4757;
    background-color: #3b3f45;
}

.error-input::placeholder {
    color: #ff6b81;
}

input:focus, .login-button:focus {
  outline: 2px solid var(--watts-purple);
  outline-offset: 2px;
}

.form-group input:focus, .login-button:focus {
  outline: 2px solid var(--watts-purple);
  outline-offset: 2px;
}

/* Spinner Container Styling */
.spinner-container {
  display: none; /* Hidden by default */
  position: fixed; /* Sit on top of the page content */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  z-index: 1000; /* Ensure it's on top */
}

/* Spinner Styling */
.spinner {
  border: 8px solid var(--watts-accent-a-electric-purple); /* Light grey border */
  border-top: 8px solid var(--watts-purple); /* Blue border on top */
  border-radius: 50%; /* Rounded border */
  width: 60px; /* Width of the spinner */
  height: 60px; /* Height of the spinner */
  animation: spin 2s linear infinite; /* Spin animation */
}

/* Spin Animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* Login Container Styling */
.login-container {
  display: flex;
  flex-direction: row; /* Arrange children in a row */
  align-items: center; /* Vertically center items */
  justify-content: center; /* Horizontally center items */
  height: 100vh; /* Full viewport height */
  background-color: #0a1229; /* Dark Grey Background */
  padding: 20px; /* Optional padding */
  box-sizing: border-box; /* Ensure padding doesn't affect total width */
}

#password-toggle {
  padding: 5px;
}

/* GIF Container Styling */
.gif-container {
  margin-right: 40px; /* Space between GIF and form */
}

.animated-gif {
  width: 220px; /* Smaller size as per request */
  height: auto;
  border-radius: 8px;
  animation: float 3s ease-in-out infinite;
  position: relative;
  z-index: 2;
}

/* Float Animation for GIF */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

/* Form Container Styling */
.form-container {
  background-color: #23272a; /* Slightly lighter than main background */
  padding: 30px 40px;
  border-radius: 10px;
  box-shadow: 14px 11px 18px 4px rgb(154 5 173 / 33%);
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
  z-index: 1;
}

/* Login Title Styling */
.form-container h1 {
  color: var(--watts-cyan); /* Purple Accent */
  font-size: 24px;
  text-align: center;
  margin-bottom: 20px;
}

/* Form Group Styling */
.form-group {
  margin-bottom: 20px;
  text-align: left;

}

.form-group label {
  display: block;
  color: #ffffff;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input {
  width: 100%;
  padding: 10px 15px;
  border: 1px solid #555;
  border-radius: 4px;
  background-color: #1c1c1c;
  color: #ffffff;
  font-size: 16px;
}

.form-group input::placeholder {
  color: #a4a6a9;
}

.form-group input:focus {
  outline: none;
  border-color: var(--watts-cyan); /* Purple border on focus */
  background-color: #470272;

}

.search-input {
  width: 80%;
  max-width: 400px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--watts-purple);
  background-color: #2c2f33;
  color: white;
  font-size: 16px;
}

/* 🔄 Loading Indicator */
.loading-indicator {
  text-align: center;
  font-size: 14px;
  color: var(--watts-cyan);
  margin-top: 10px;
}

/* Pagination Styling */
.pagination {
  text-align: center;
  margin-top: 20px;
}

.pagination a, .pagination span {
  padding: 8px 12px;
  margin: 2px;
  border-radius: 5px;
  background-color: var(--watts-accent-a-electric-purple);
  color: white;
  text-decoration: none;
  transition: background-color 0.3s ease-in-out;
}

.pagination a:hover {
  background-color: var(--watts-cyan);
}
.user-toggle {
  cursor: pointer;
  font-weight: bold;
  color: var(--watts-cyan);
}

.device-header {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Ensures title left, button right */
  justify-self: center;
  width: 80%;
  padding: 10px 20px;
  background-color: var(--watts-accent-a-electric-purple);
  border-radius: 8px;
  margin-bottom: 10px;
}

.device-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
}

/* Adjusted Device Buttons Grid */
.device-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  color: var(--watts-accent-a-electric-purple);
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.loading-message {
  text-align: center;
  font-size: 16px;
  color: var(--watts-cyan);
  font-style: italic;
}

.device-buttons.active {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/* Submit Button Styling */
.login-button {
  width: 100%;
  padding: 12px;
  background-color: var(--watts-accent-a-electric-purple); /* Purple Background */
  color: #ffffff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.login-button:hover {
  background-color: var(--watts-cyan); /* Lighter Purple on Hover */
  box-shadow: 0 0 10px rgba(187, 103, 196, 0.5);
}

.login-button:active {
  transform: scale(0.95);
  background-color: #9350bb; /* Darker Purple on Active */
}



.device-error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100vh; /* Full height of the screen */
}

.error-container {
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 20px;
  text-align:center;
  
}

.error-message {
  color: #ffffff;
  font-size: 14px;
}
.loading-gif {
  width: 180px; /* Adjust size */
  height: auto;
  display: block;
}

.support-link {
  color: var(--watts-cyan);
  font-weight: bold;
  text-decoration: none;
  transition: color 0.3s ease;
}

.support-link:hover {
  color: #ff75b5;
  text-decoration: underline;
}

.qr-main-wrapper {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
}
.qr-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns only */
  grid-auto-rows: 1fr;
  gap: 2.2em 2.2em;
  margin: 2em 0 2em 0;
  justify-content: center;
  align-items: center;
  min-height: 480px;
}
@media (max-width: 900px) {
  .qr-grid { grid-template-columns: 1fr; }
}
.qr-form-container,
.qr-result-container {
  flex: 1 1 350px;
  max-width: 450px;
  min-width: 320px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .qr-content-grid {
      flex-direction: column;
      align-items: center;
      gap: 28px;
  }
  .qr-form-container,
  .qr-result-container {
      width: 100%;
      max-width: 99vw;
  }
}
.qr-card {
  background: #232334;
  border-radius: 1em;
  box-shadow: 0 2px 26px #ff85ec22, 0 0 16px 4px #aaff0080;
  padding: 1.5em 1em 1em 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* Center vertically */
  min-height: 270px;
  min-width: 190px;
  max-width: 220px;
  margin: auto;
  font-family: 'Fira Mono', monospace;
  transition: box-shadow .2s;
  text-align: center;
}
.qr-card:hover { box-shadow: 0 4px 32px #fff4fb66; }

.qr-results-side {
  flex: 2 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.qr-main-wrapper { max-width:1200px; margin:3em auto; }
.qr-two-panel { display:flex; gap:2em; }
.qr-form-side { flex:1.1 1 0; min-width:310px; max-width:380px; }
.qr-results-side { flex:2 1 0; min-width:0; }
@media (max-width:900px) { .qr-two-panel { flex-direction:column; } .qr-results-side, .qr-form-side { max-width:none; width:100%; }}
/* --- keep the rest of grid/qr-card CSS from previous glam answer --- */
.qr-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2em 1.5em; margin: 2em 0 2em 0; }
.qr-card {
    background: #232334;
    border-radius: 1em;
    box-shadow: 0 2px 18px #ff85ec22;
    padding: 1.4em 1em;
    display: flex; flex-direction: column; align-items: center; min-height: 220px;
    font-family: 'Fira Mono', monospace;
    transition: box-shadow .2s;
}
.qr-card:hover { box-shadow: 0 4px 26px #ffb4f444; }
.qr-code-preview { max-width: 70px; margin: 0.6em 0 0.8em 0; border-radius: .4em; background: #fff; padding: 2px;}
.qr-name { font-weight: bold; font-size: 1.08em; margin-bottom: .5em; }
.qr-scans { font-size: .95em; color: #f39fff; margin-bottom: .5em; }
.qr-links { font-size: .91em; color: #f9f2ffbb; margin-bottom: .5em; word-break: break-all;}
.qr-links a { color: #aad5ff; text-decoration: underline; display: block; margin: 1px 0; }
.grid-title { font-size: 1.35em; letter-spacing: .04em; margin-bottom: .5em; }
.qr-pagination { text-align: center; margin: 1.5em 0 0 0; }
.qr-page-btn { margin: 0 .25em; border-radius: .5em; border: none; background: #393357; color: #fff; padding: .25em .95em; font-size: 1em; cursor: pointer; transition: background .15s;}
.qr-page-btn.active, .qr-page-btn:hover { background: #a469e6; }
.login-button, .back-btn { background: #f39fff; color: #232334; border: none; padding: .6em 1.2em; border-radius: .7em; font-weight: bold; margin-bottom: 1em; cursor: pointer; }
.back-btn { background: #f9f2ff; color: #8b36bb; margin-bottom: 1.2em; }
.form-container { background: #2e2237; border-radius: 1.3em; box-shadow: 0 2px 14px #f39fff22; padding: 2em; margin: auto; }
.qr-image { max-width: 140px; margin: 0.8em 0; background: #fff; border-radius: .4em; }
.error-box { background: #432146; color: #fff1f8; padding: 1em; border-radius: .7em; margin-top: 1.5em; font-size: 1.08em;}
@media (max-width: 900px) { .qr-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 700px) { .qr-grid { grid-template-columns: 1fr; } }


.device-list h2 {
  padding-left: 100px;
  color: var(--watts-cyan);
  font-size: 50px;
  font-weight: bold;
  font-family: var(--primary-font);
  /* margin-bottom: 5px; */ /* Space between title and user panels */
  margin-left: inherit;
  width: 100%;
}
.device-list.grid-parent {
  display: grid;
  grid-template-rows: auto auto 1fr; /* Adjust as needed */
}

.device-header.header-box {
  justify-content: center;
  grid-row: 1;
}



/*customer device panel start */
/* 🎨 Customer Device Panel - Modern Styling */
.device-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Responsive grid */
  gap: 80px;
  padding: 40px;
  justify-items: center;
}

/* 🟢 Green for >1 day */
.device-uptime[data-uptime^="2d"],
.device-uptime[data-uptime^="3d"],
.device-uptime[data-uptime^="4d"],
.device-uptime[data-uptime^="5d"],
.device-uptime[data-uptime^="6d"],
.device-uptime[data-uptime^="7d"],
.device-uptime[data-uptime^="8d"],
.device-uptime[data-uptime^="9d"] {
    color: var(--watts-green);
}

/* 🟠 Orange for exactly 1 day */
.device-uptime[data-uptime^="1d"] {
    color: var(--watts-orange);
}

/* 🟡 Yellow for under 1 day */
.device-uptime[data-uptime^="0d"] {
    color: var(--watts-yellow);
}

/* 📟 Device Card - Smooth Rounded Corners & Dynamic Shadows */
.device-card {
  background: rgba(var(--jazzy-secondary-rgb), 0.8); /* Purple with transparency */
  color: var(--watts-magenta); /* magenta text */
  border-radius: 15px; /* ✅ Super smooth rounded corners */
  padding: 20px;
  box-shadow: 0px 6px 12px rgba(var(--watts-orange-rgb), 0.1); /* ✅ Dynamic Box Shadow */
  transition: transform 0.2s ease-in-out, box-shadow 0.3s ease;
  width: 100%;
  display: flex;
  flex-direction: column;
  max-width: 300px;
}

.device-card:hover {
  transform: translateY(-5px);
}

/* 🌈 Dynamic Title Colors */
.device-card h3 {
  color: var(--watts-cyan);
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
  transition: color 0.3s ease;
}

.device-card h3:hover {
  color: var(--watts-cyan);
}

/* 🎭 Labels & Values */
.label {
  color: var(--watts-sky); /* Cyan for labels */
  font-weight: bold;
  font-family: var(--secondary-font);
}

.value {
  color: var(--watts-accent-b); 
}

/* 🎭 Different Color for Dynamic Data */
.device-status, .device-signal, .device-leds, .device-uptime, .device-version {
  font-weight: bold;
}

/* 🛜 Signal Strength Colors */
.device-signal {
  color: #4CAF50; /* Default: Green */
}

.device-signal.low {
  color: #FF9800; /* Warning */
}

.device-signal.critical {
  color: #F44336; /* Critical */
}

/* 🔴 No Devices Message */
.no-devices {
  text-align: center;
  font-size: 18px;
  color: #ccc;
}
/*customer device panel end */


.search-container {
  width: 90%;
  max-width: 800px;
  grid-row: 2;
  text-align: center;
  margin: 20px auto;
}
.search-container.input#search-users {
  width: 100%;
}

div#user-panels {
  grid-row: 3;
}

#user-panels {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.device-list.grid-parent #user-panels { 
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 20px;
}

.user-panels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 20px;
  justify-content: center;
  width: 90%;
  max-width: 1200px;
  margin: auto;
}

.device-list {
  display: none;
  margin-top: 10px;
}

.device-list.open {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 150px; /* each column fixed width */
  grid-template-rows: repeat(5, auto); /* max 5 devices per column */
  gap: 20px; /* increased gap between items/columns */
  margin-top: 10px;
  overflow-x: auto; /* allow horizontal scrolling if needed */
}

.device-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Optionally, force a consistent height */
  min-height: 40px;
}

.share-icon {
  margin-left: 5px;
  cursor: pointer;
}

.user-container {
  min-width: 370px;
  resize: horizontal;
  overflow: auto;
  transition: width 0.3s ease;
  padding: 10px;
  box-sizing: border-box;
  box-shadow: 0 0 10px rgba(var(--jazzy-secondary-rgb), 0.2);
  background: rgba(var(--jazzy-secondary-rgb), 0.2);
}

.user-container::-webkit-scrollbar {
  display: none;

}


/* Expanded panel takes more space (roughly 50% width) */
.user-container.expanded {
  flex: 0 1 auto;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.pagination a, .pagination span {
  padding: 8px 12px;
  margin: 5px;
  text-decoration: none;
  border-radius: 5px;
  color: #ffffff;
  background-color: var(--watts-accent-a-electric-purple);
  font-weight: bold;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.pagination a:hover {
  background-color: var(--watts-cyan);
  transform: scale(1.1);
}
.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  gap: 10px;
}

.pagination-link {
  padding: 10px 15px;
  background-color: var(--watts-accent-a-electric-purple); /* Main Purple */
  color: #ffffff;
  border-radius: 6px;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.2s ease;
  border: 2px solid transparent;
}

.pagination-link:hover {
  background-color: var(--watts-cyan); /* Lighter Neon Purple */
  box-shadow: 0 0 10px rgba(187, 103, 196, 0.5);
  transform: scale(1.1);
}

.pagination-link.active {
  background-color: var(--watts-cyan); /* Active Page */
  border: 2px solid #ffffff;
  font-weight: bold;
  transform: scale(1.15);
}

.pagination-link.disabled {
  background-color: #2c2f33;
  color: #aaaaaa;
  cursor: not-allowed;
  opacity: 0.6;
}

/* 📌 Register Device Button */
.register-device-button {
  background-color: var(--watts-cyan);
  color: var(--watts-accent-a-electric-purple);
  margin-left: 15px;
  border: none;
  padding: 10px 15px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.register-device-button:hover {
  background-color: var(--watts-cyan);
  transform: scale(1.1);
  color: var(--watts-accent-a-electric-purple);
}

/* 📌 Modal Styles */
.modal {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: var(--watts-accent-a-electric-purple); /* ✅ Deep Purple */
  color: var(--watts-cyan); /* ✅ Light Purple Text */
  padding: 20px 30px; /* ✅ Increased right padding */
  border-radius: 10px;
  width: 320px; /* ✅ Slightly wider modal for better spacing */
  text-align: center;
  box-shadow: 0 4px 10px rgba(187, 103, 196, 0.5);
  border: 2px solid var(--watts-purple); /* Light purple border */
}

.modal-message {
  margin-top: 10px;
  font-size: 14px;
}


.modal-content label {
  display: block; /* Ensure label is on its own line */
  color: #d58b3b;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px; /* ✅ Adds spacing between label and input */
}

.modal-content input {
  width: 90%; /* ✅ Prevents input from stretching too far */
  max-width: 250px; /* ✅ Ensures it doesn't get too big */
  padding: 10px;
  border-radius: 6px;
  border: 2px solid var(--watts-purple);
  background-color: #2c2f33;
  color: white;
  font-size: 14px;
  margin-bottom: 15px; /* ✅ Adds spacing below input */
  text-align: center; /* ✅ Centers the text inside */
}

.modal-content button {
  background-color: var(--watts-accent-a-electric-purple); /* ✅ Lighter purple */
  color: var(--watts-accent-b); /* ✅ White text */
  border: none;
  padding: 10px 15px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.modal-content button:hover {
  background-color: var(--watts-accent-b-neon-pink); /* ✅ Lighter Pink-Purple */
  transform: scale(1.05);
}

.close {
  color: #ff75b5; /* ✅ Pinkish Purple */
  font-size: 50px;
  font-weight: bold;
  float: right;
  cursor: pointer;
  transition: color 0.3s ease, transform 0.2s ease;
}

.close:hover {
  color: #ffffff; /* ✅ White on hover */
  transform: scale(1.2);
}


/* Ensuring the buttons don't overflow their container */
.device-button {
  width: 100%;
  max-width: 200px;
  text-align: center;
  display: inline-block;
  padding: 10px 15px;
  margin: 5px;
  background-color: var(--watts-accent-a-electric-purple);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.2s ease;
  white-space: nowrap;
}


.device-button:hover {
  background-color: var(--watts-cyan);
  transform: scale(1.05);
}

.device-button:active {
  background-color: #9350bb;
  transform: scale(0.95);
}


.user-container h3 {
  cursor: pointer;
  color: var(--watts-cyan);
  transition: color 0.3s ease;
  padding: 10px;
  border-radius: 8px;
  background-color: var(--watts-purple)30;
}


.userdevice-button {
  width: 100%;
  max-width: 200px;
  text-align: center;
  display: inline-block;
  padding: 10px 15px;
  margin: 5px;
  background-color: var(--watts-accent-a-electric-purple);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.2s ease;
  white-space: nowrap;
}


.userdevice-button:hover {
  background-color: var(--watts-cyan);
  transform: scale(1.05);
}

.userdevice-button:active {
  background-color: #9350bb;
  transform: scale(0.95);
}

.user-container h3:hover {
    color: var(--watts-accent-b-neon-pink);
    background-color: rgba(var(--watts-accent-a-electric-purple-rgb), 0.5);
}

/* Staff Panel Styling */

.approval-table {
  width: 90%;
  margin: 20px auto;
  border-collapse: collapse;
  z-index: 1 ;
  position: relative;
}

#approval-table::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  background: linear-gradient(
    90deg,
    var(--watts-orange) 0%,
    var(--watts-purple) 25%,
    var(--watts-magenta) 50%,
    var(--watts-cyan) 75%,
    var(--watts-green) 100%
    
  );
  background-size: 300%; /* Increase background size to have room for animation */
  z-index: 1;
  filter: blur(8px);
  opacity: 0.2;
  border-radius: inherit;
  animation: glow-chase 30s linear infinite;
}

@keyframes glow-chase {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

.approval-table th,
.approval-table td {
  padding: 10px;
  border: 1px solid #870DBA;
  text-align: center;
}

.approval-table th {
  background-color: var(--watts-accent-a-electric-purple);
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
}

.approval-table tr:nth-child(even) {
  background-color: #2c2f33;
}

.approval-table tr:hover {
  background-color: var(--watts-accent-a-electric-purple);
  color: #ffffff;
}

/* Responsive Design -------------------------------------------------------------------------------------------*/
@media (max-width: 768px) {
  .login-container {
      flex-direction: column; /* Stack vertically on smaller screens */
      padding: 10px;
  }
  .cloud1-form .form-row {
    flex-wrap: wrap;
    gap: 4px;
  }
  .cloud1-form label {
    min-width: auto;
    width: 100%;
  }
  .gif-container {
      margin-right: 0;
      margin-bottom: 20px; /* Space below GIF when stacked */
  }

  .animated-gif {
      width: 60px; /* Even smaller on smaller screens */
  }

  .form-container {
      max-width: 100%;
  }
  .user-container {
    flex: 1 1 100%; /* Stack in smaller screens */
}
}

@media (max-width: 480px) {
  .form-container {
      padding: 20px 30px;
  }

  .form-container h1 {
      font-size: 20px;
  }

  .login-button {
      font-size: 14px;
  }

}