/* --------------------
   RESET & BASE
   -------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* just give it full height so body can reference it */
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: #000;
  color: #fff;
  font-family: sans-serif;
  line-height: 1.4;

  /* make body a column flex, fill viewport */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* your main content wrapper should grow */
body > main {
  flex: 1;
}

.container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 1rem;
}

/* --------------------
   NAVBAR
   -------------------- */
nav {
  background: #111;
}

nav .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

/* Logo */
.logo a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.2rem;
}

/* hide the checkbox */
#menu-toggle {
  display: none;
}

/* hamburger icon (desktop hidden) */
.menu-icon {
  display: none;
  font-size: 1.5rem;
  color: #fff;
  cursor: pointer;
}

/* desktop menu */
.menu {
  list-style: none;
  display: flex;
  gap: 1rem;
}

.menu li a {
  display: block;
  padding: 0.5rem 0.75rem;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
}

.menu li a:hover {
  background: #444;
}

/* language picker as menu‐item */
.menu li.lang-picker {
  list-style: none;
  display: inline-flex;
  align-items: center;
}

.menu li.lang-picker select {
  background: transparent;
  border: none;
  color: #fff;
  font: inherit;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}

.menu li.lang-picker select:hover {
  background: #444;
}

/* --------------------
   RESPONSIVE (≤600px)
   -------------------- */
@media (max-width: 600px) {
  .menu {
    display: none;
    flex-direction: column; /* stack menu items only */
    width: 100%;
    margin-top: 1rem;
    background: #111;
    border-radius: 6px;
    padding: 0.5rem 0;
  }
  #menu-toggle:checked + .menu-icon + .menu {
    display: flex;
  }
  .menu-icon {
    display: block;
    margin-left: auto; /* push hamburger to right */
  }
  nav .container {
    flex-direction: row;         /* <--- KEEP ROW! */
    align-items: center;         /* vertical center */
    /* You may want: */
    /* justify-content: space-between; */
  }
  .logo {
  margin-right: auto; /* push .menu-icon rightward */
}
}

/* --------------------
   FOOTER
   -------------------- */
footer {
  background: #111;
  color: #fff;
  text-align: center;
  padding: 1rem;
  margin-top: auto;
}

footer a {
  color: #fff;
  text-decoration: underline;
}

footer a:hover,
footer a:focus {
  color: #ddd;
}

/* override the old text‐logo styles if necessary */
.logo a {
  text-decoration: none;
  display: block;
}

/* size & color‐invert the SVG */
.logo img {
  display: block;
  height: 2.0rem;   /* or whatever fits your header */
  width: auto;
  filter: brightness(0) invert(1);
}

/* -----------------------------------
   LINKS
   ----------------------------------- */
a {
  color: #fff;
  text-decoration: underline;
}
a:hover,
a:focus {
  color: #ddd;
}

/* -----------------------------------
   HEADINGS
   ----------------------------------- */
h1, h2, h3, h4, h5, h6 {
  color: #fff;
  margin: 1rem 0 0.5rem;
  line-height: 1.2;
}

/* -----------------------------------
   LISTS (outside of .menu)
   ----------------------------------- */
ul:not(.menu) {
  list-style: none;
  margin: 1rem 0;
  padding: 0;
}
ul:not(.menu) li {
  margin-bottom: 0.75rem;
  padding: 0.75rem;
  background: #111;
  border-radius: 6px;
  color: #fff;
}

/* -----------------------------------
   FORMS
   ----------------------------------- */
.form-group {
  margin-bottom: 1rem;
}
.form-group label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
  color: #fff;
}
.form-control {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  color: #fff;
  background: #111;
  border: 1px solid #444;
  border-radius: 4px;
  transition: border-color 0.2s;
   font-family: inherit;
}
.form-control:focus {
  outline: none;
  border-color: #888;
}

/* multiple‐select box */
select[multiple].form-control {
  height: auto;
}

/* -----------------------------------
   BUTTONS
   ----------------------------------- */
.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  line-height: 1.2;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s, border 0.2s, color 0.2s;
  border: 1px solid transparent;
}

/* primary = blue */
.btn-primary {
  background: #007bff;
  border-color: #007bff;
  color: #fff;
}
.btn-primary:hover:not(:disabled) {
  background: #0056b3;
  border-color: #0056b3;
}

/* success = green */
.btn-success {
  background: #28a745;
  border-color: #28a745;
  color: #fff;
}
.btn-success:hover:not(:disabled) {
  background: #218838;
  border-color: #218838;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* -----------------------------------
   UTILITY: form button alignment
   ----------------------------------- */
form button,
form .btn {
  margin-top: 0.5rem;
}

/* If you need extra vertical rhythm */
.form-group + .form-group {
  margin-top: 0.75rem;
}

/* ─────────────────────────────────────────────────────────
   START / STOP BUTTONS — MONOCHROME STYLE
   ───────────────────────────────────────────────────────── */
#btnStart,
#btnStop {
  background: transparent;      /* let the page bg (black) show through */
  border: 1px solid #fff;       /* white border */
  color: #fff;                  /* white text */
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

/* hover state: invert to white bg, black text */
#btnStart:hover:not(:disabled),
#btnStop:hover:not(:disabled) {
  background: #fff;
  color: #000;
  border-color: #fff;
}

/* disabled state: faded-out */
#btnStart:disabled,
#btnStop:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ─────────────────────────────────────────────────────────
   SELECTS — MONOCHROME STYLE
   ───────────────────────────────────────────────────────── */
select,
.nav-item select,
#langSelect,
#roomSelectMenu {
  background: transparent;      /* show page‐bg (black) */
  color: #fff;                  /* white text */
  border: 1px solid #fff;       /* white outline */
  border-radius: 4px;
  padding: 0.4rem 0.75rem;
  font-size: 0.9rem;
  line-height: 1.2;
  appearance: none;             /* hide native arrow on some browsers */
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

/* add a simple arrow (fallback) */
select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 0.6rem auto;
}

/* hover/focus = invert colors */
select:hover:not(:disabled),
select:focus:not(:disabled),
.nav-item select:hover:not(:disabled),
.nav-item select:focus:not(:disabled),
#langSelect:hover:not(:disabled),
#langSelect:focus:not(:disabled),
#roomSelectMenu:hover:not(:disabled),
#roomSelectMenu:focus:not(:disabled) {
  background: #fff;
  color: #000;
  border-color: #fff;
  outline: none;
}

/* disabled look */
select:disabled,
.nav-item select:disabled,
#langSelect:disabled,
#roomSelectMenu:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


.notice {
  background: #222;
  color: #fff;
  border-left: 4px solid #0080ff;
  border-radius: 4px;
  padding: 1em;
  margin: 1.2em 0;
  font-size: 1.05em;
}