/* scheduler.css */
.logout-button {
    display: inline-block;
    padding: 2px 4px;  /* Slightly smaller padding for a more compact look */
    background-color: #5a9bd5;  /* Softer, muted blue */
    color: white;
    text-decoration: none;
    border-radius: 4px;  /* Slightly smaller border radius for a more modern look */
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.3s ease;  /* Smooth hover effect */
    cursor: pointer;
}

/* scheduler.css */
.selfspot-button {
    display: inline-block;
    padding: 2px 4px;  /* Slightly smaller padding for a more compact look */
    background-color: #f4a460;  /* Orange, not too intense */
    color: white;
    text-decoration: none;
    border-radius: 4px;  /* Slightly smaller border radius for a more modern look */
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.3s ease;  /* Smooth hover effect */
    cursor: pointer;
}

.logout-button:hover {
    background-color: #4682b4;  /* A slightly darker muted blue for hover */
    transform: scale(1.05);  /* Slightly enlarge button on hover for a better feel */
}

.logout-button:active {
    transform: scale(1);  /* Reset to normal size when clicked */
}

/* Make the container flex so the buttons stay on the same line */
.button-container {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch; /* Ensures all buttons are same height */
}

/* Style for each button */
.button-container input {
    flex: 1 1 200px;         /* Grow/shrink with a base width of 200px */
    min-width: 150px;        /* Don’t go smaller than this */
    max-width: 220px;        /* Prevent overly wide buttons */
    width: 100%;             /* Fill allowed space within flex item */

    padding: 10px 15px;
    text-align: center;

    white-space: normal;     /* Allow wrapping */
    word-wrap: break-word;   /* Older fallback */
    overflow-wrap: break-word; /* Modern */

    font-size: 14px;
    line-height: 1.2;
    background-color: #007bff;
    color: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;

    box-sizing: border-box;
}

.button-container input:hover {
    background-color: #0056b3;  /* Darker shade on hover */
}

.section {
  margin-bottom: 1em;
}

label {
  margin-right: 1em;
}

.login-button {
  font-size: 14px;
  padding: 10px 15px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  transition: background-color 0.2s ease;
  min-width: 100px; /* Optional: gives it a bit more presence */
}

.login-button:hover {
  background-color: #0056b3; /* darker blue instead of black */
}

.login-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1em;
  margin-bottom: 1em;
}

.login-row label {
  margin-right: 0.25em;
  white-space: nowrap;
}

.login-tooltip-wrap {
  position: relative;
  display: inline-block;
}

.login-tooltip-wrap input[type="text"],
.login-tooltip-wrap input[type="password"] {
  padding: 5px 8px;
  font-size: 14px;
  border: 1px solid #aaa;
  border-radius: 4px;
  background-color: #fff;
  box-sizing: border-box;
}

.login-tooltip-wrap input.login-button {
  font-size: 14px;
  padding: 10px 15px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  transition: background-color 0.2s ease;
  min-width: 100px;
}

.login-tooltip-wrap input.login-button:hover {
  background-color: #0056b3;
}

/* Tooltip behavior */
.login-tooltip-text {
  visibility: hidden;
  opacity: 0;
  width: 220px;
  background-color: #f9f9f9;
  color: #333;
  text-align: left;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 6px;
  position: absolute;
  top: 125%;
  left: 0;
  z-index: 10;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.15);
  transition: opacity 0.3s ease;
}

.login-tooltip-wrap:hover .login-tooltip-text {
  visibility: visible;
  opacity: 1;
}

@media print {
  /*input, button, select, label, textarea {
    display: none !important;
  }*/
  table {
    width: 100%;
    font-size: 12pt;
  }
  th, td {
    border: 1px solid black;
    padding: 4px;
  }
}

.filter-section {
  position: relative;
  width: 100%;
  background-color: #e6f9e6;
  border: 2px solid #5cb85c;
  border-radius: 6px;
  padding: 1em;
  box-sizing: border-box;
}

/* Circle-i icon */
.info-icon {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 18px;
  color: #007bff;
  cursor: pointer;
  line-height: 1;
  margin: 0;
  padding: 0;
}

/* Tooltip text */
.info-icon .tooltiptext {
  position: absolute;
  top: 100%;
  right: 0;
  transform: translateX(-50%);
  width: 260px;              /* Was max-width — now fixed width */
  white-space: normal;
  overflow-wrap: break-word;

  background-color: #f0f0f0;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 10px;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);

  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 10;
}

/* Show on hover */
.info-icon:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.header-wrap {
  display: flex;
  align-items: center;
}

.vertical-label {
  writing-mode: vertical-rl;
  /* transform: rotate(180deg);  /* optional: makes text bottom-to-top */
  margin-left: 10px;         /* space between image and label */
  font-weight: bold;
  font-family: sans-serif;
  font-size: 10px;
}

/* ---- index page visibility helpers ---- */
#secPassword,
#secActions {
  display: none;
} 

/* ---- tighten up the white space ---- */
/* === Compact overrides for index (match scheduler feel) === */

/* overall scale a hair smaller */
.wrap { max-width: 960px; padding: 8px 10px; }
.card { padding: 10px 12px; border-radius: 8px; }

/* banner tighter */
.banner { height: 92px; margin: 4px 0 8px 0; }
@media (max-height: 820px) { .banner { height: 78px; } }

/* headings + helper text */
h2 { margin: 4px 0 6px 0; line-height: 1.15; font-size: 1.6rem; }
p.muted { margin: 2px 0 6px 0; }

/* grid spacing like scheduler */
.row { gap: 6px; }
@media (min-width: 720px) {
  .row { grid-template-columns: 1fr 1fr; } /* 50/50 like your screenshot */
}

/* controls trimmed (height closer to scheduler) */
label { margin-bottom: 2px; font-weight: 600; }
input, select {
  padding: 5px 7px;          /* was 8px */
  font-size: 15px;           /* a touch smaller */
  line-height: 1.2;
}

/* the description box right of Event */
#event + div .muted {
  padding: 5px 7px;
  border-radius: 6px;
  min-height: 0;
}

/* action rows */
.actions { gap: 6px; margin-top: 6px; }
.btn { padding: 6px 10px; border-radius: 8px; }
.btn.primary, .btn.secondary { line-height: 1.1; }

/* section spacers */
#sec2a       { margin-top: 8px; }
#secIdentity { margin-top: 8px; }
#secPassword { margin-top: 6px; }
#secActions  { margin-top: 6px; }

/* small-height screens: squeeze just a bit more */
@media (max-height: 760px) {
  .wrap  { padding: 6px 8px; }
  .card  { padding: 8px 10px; }
  .row   { gap: 5px; }
  input, select { padding: 4px 6px; font-size: 14.5px; }
  .btn   { padding: 5px 9px; }
}
/* --- Compact index overrides (force past inline styles) --- */
.banner { height: 92px !important; margin: 4px 0 8px 0 !important; }
.wrap { padding: 8px 10px !important; }
.card { padding: 10px 12px !important; border-radius: 8px !important; }

.row { gap: 6px !important; }
.actions { gap: 6px !important; margin-top: 6px !important; }

label { margin-bottom: 2px !important; }
input, select { padding: 5px 7px !important; font-size: 15px !important; line-height: 1.2 !important; }

#sec2a, #secIdentity, #secPassword, #secActions { margin-top: 6px !important; }

/* description box to the right of Event */
#event + div .muted { padding: 5px 7px !important; border-radius: 6px !important; min-height: 0 !important; }

/* buttons */
.btn { padding: 6px 10px !important; border-radius: 8px !important; }

/* short screens: squeeze a bit more */
@media (max-height: 760px) {
  .banner { height: 78px !important; }
  .card { padding: 8px 10px !important; }
  .row { gap: 5px !important; }
  input, select { padding: 4px 6px !important; font-size: 14.5px !important; }
  .btn { padding: 5px 9px !important; }
}
/* make the banner full size */
.banner{ height: auto !important; max-height: 144px !important; }