/* 🟢 Global Styles */
html, body {
    font-family: 'Arial', sans-serif;
    background-color: #f2f4f8 !important;
    color: #333;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* 🟢 Containers */
.container {
    max-width: 1000px !important; 
    margin: auto;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}

/* 🟢 Navbar Styling */
.navbar {
    width: 100%;
    background: linear-gradient(135deg, #005bb5, #0073e6);
    color: white;
    padding: 10px 15px; /* Adjust for proper inner spacing */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 999;
    box-sizing: border-box;
}

.navbar-brand {
    /* font-size: 2.4em;
    font-weight: 700;   
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    padding: 10px 80px 10px 0px; 
    margin-left: 10px;
    border-radius: 8px;
    display: inline-block;
    margin: 0;
    background-color: transparent; Remove inline blue rectangle */
    max-width: 100%; /* or auto */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
    flex-grow: 1;
}

/* 🟢 Navbar Navigation */
.navbar-nav {
    list-style: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
    margin: 0;
    padding: 30px 15px; /* ⬅️ more vertical space */
    background-color: #ffffff;
    border-radius: 8px;
    box-sizing: border-box;
    /* max-width: 90%;
    margin-left: auto;
    margin-right: auto;   
    flex-wrap: wrap;
    justify-content: flex-end; */
    gap: 8px; /* helps reduce crowding */
}



/* 🟢 Navbar Links */
.navbar .nav-link {
    color: #005bb5 !important;
    font-weight: bold;
    font-size: 1.2em;
    padding: 5px 10px; /* Adjust padding for better alignment */
    border-radius: 6px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease-in-out;
}

.navbar .nav-link:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffdd57 !important;
    transform: scale(1.05);
}

.navbar-nav .nav-link.active {
    background-color: #cfddea !important;
    color: #1830a0 !important;
    font-weight: bold;
    border-radius: 8px;
}

.navbar .nav-link i {
    font-size: 1.2em;
    margin-bottom: 5px;
    color: #005bb5;
}

/* 🟢 Special Last Nav Item */
.navbar .nav-item:last-child {
    display: flex;
    align-items: center;
    gap: 10px;
}

.navbar .nav-item:last-child .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #005bb5;
    font-size: 1.2em;
    font-weight: bold;
    text-decoration: none;
}

/* 🟢 Responsive Fixes for Mobile */
@media (max-width: 768px) {
    .navbar {
        padding: 10px 10px; /* Reduce padding for smaller screens */
    }

    .navbar-brand {
        font-size: 2.4em;  
    }

    .navbar-toggler {
        margin-right: auto; /* Align to the right */
        z-index: 1000;
        background: blue; /* Blue background for clarity */
    }

    .navbar-toggler-icon {
        background: rgb(3, 3, 230); /* Blue navbar toggler icon */
    }

    .navbar-nav {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 1rem;
        padding: 10px;
        margin: 0;
        width: 100%;
        box-sizing: border-box;
        border: none;
        background-color: white; /* Ensure collapsible menu is visible */
    }

    .navbar-collapse {
        display: none;
        width: 100%;
        flex-direction: column;
        background-color: white;
        padding: 15px;
        border-radius: 8px;
        box-sizing: border-box;
    }

    .navbar-collapse.show {
        display: flex !important; /* Show the navbar when toggled */
    }
}

/* 🟢 Custom Adjustments */
.custom-styles .container {
    max-width: 1100px;
    margin: auto;
    padding: 20px;
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}

.custom-styles .navbar-brand {
    font-weight: bold;
    color: #66a5bc;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    
}

.bg-primary {
    height: 10rem;
}

.container.mt-3.custom-styles {
    height: 0.5rem;
}

.container {
    max-width: 1100px !important;
    margin: 0 auto;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: left;
    box-sizing: border-box;
}

.custom-styles .navbar-brand {
    font-size: 2.4em;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.page-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
  }

.navbar .navbar-expand-lg .navbar-dark .bg-primary {
    background-color: #96c3f1;
  }

form {
    margin: 20px 0;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

form label {
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
    color: #005bb5; /* Blue text for labels */
}

form input,
form select,
form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
}

form button {
    background-color: #005bb5;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1em;
}

form button:hover {
    background-color: #003d80; /* Darker blue on hover */
}

.navbar {
    padding-left: 0 !important;
  }
  
.navbar-brand {
    margin-left: 10px !important;
  }

nav.navbar .navbar-brand {
    margin-left: 0px;
  }

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
  }
  
.navbar-brand {
    font-size: 2.4em;
    white-space: nowrap;
    flex-shrink: 1;
  }
  
.navbar-toggler {
    margin-left: auto;
    flex-shrink: 0;
  }
  
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
.navbar-brand {
    flex-shrink: 0;
  }
  
.navbar-toggler {
    margin-left: auto;
  }
/* Ensure the container aligns items in one line */
.navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
  }
  
  /* Prevent brand from pushing toggler */
.navbar-brand {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
    flex-shrink: 1;
  }
  
  /* Force the toggler to stay at the right */
.navbar-toggler {
    margin-left: auto;
    flex-shrink: 0;
  }
.navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
  }
  
.navbar-brand {
    font-size: 2.4em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%; /* Allow full space */
    flex: 1 1 auto;   /* Grow but also shrink if needed */
  }
  
.navbar-toggler {
    flex: 0 0 auto;    /* Do not shrink */
    margin-left: auto; /* Push it all the way to the right */
  }

.no-bullets {
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
  }
p.text-center.text-muted.small.mb-2 {
  color: #105ca2 !important;         /* darker color */
  font-size: 1rem !important;     /* increase size slightly */
  margin-bottom: 1rem !important; /* adjust spacing if needed */
  text-align: center !important;  /* ensure text remains centered */
}
 
.text-muted.small {
  color: #105ca2 !important;
  font-size: 0.875rem; /* example override for .small */
  font-weight: bold;
  margin-left: 1rem !important;
}
.text-center.text-muted {
     color: #105ca2 !important;
  font-size: 0.875rem; /* example override for .small */
  font-weight: bold;

}
.status-label {
    font-weight: bold;
    font-size: 1rem;
}

.status-active {
    color: green;
    font-weight: bold;
}

.status-inactive {
    color: gray;
    font-weight: bold;
}

.status-outdated {
    color: crimson;
    font-weight: bold;
}

.navbar-brand {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.navbar-brand {
    max-width: none !important;
}
/* Custom wide container to match navbar width */
.wide-container {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 30px 40px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}
.custom-styles .container {
    max-width: 100%; /* was 1000px */
    padding: 30px 40px;
}
/* Full-width container that visually aligns with navbar */
.full-width-wrapper {
    width: 100%;
    padding: 30px 50px;
    margin: 0 auto;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    box-sizing: border-box;
}
/* Restrict navbar content area background */
.white-navbar-bg {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    padding: 10px 20px;
    max-width: 1000px !important;
    margin: 0 auto;
    box-sizing: border-box;
}
/* ✅ Limit width of the white area below navbar */
.main-background-wrapper {
    max-width: 1150px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}
.is-invalid {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}
.option-item {
  position: relative;
}
.option-item .btn-outline-danger {
  position: absolute;
  top: 5px;
  right: 5px;
}
.sc-narrow-container {
    max-width: 850px; /* or whatever width you want */
    margin: 0 auto;
}
.container.sc-narrow-container {
  max-width: 500px !important;
}
.select.form-select.preset-select {
  background-color: #007bff !important;
  color: white !important;
}
.preset-select {
  background-color: #007bff !important;
  color: white !important;
  border: 1px solid #007bff;
  appearance: none;         /* Standard */
  -webkit-appearance: none; /* Chrome/Safari */
  -moz-appearance: none;    /* Firefox */
  background-image: none !important;
  padding-right: 1rem;
}
/* Remove native dropdown arrow */
.no-arrow {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: none !important;
  background-color: #0d6efd; /* optional: match your button color */
  color: white;              /* optional: match your button text color */
  border: none;              /* optional: clean up border */
  padding: 6px 12px;
  border-radius: 0.375rem;
  font-weight: 500;
  cursor: pointer;
}
.wider-select {
  width: 240px;
  color: white;
  background-color: #0d6efd; /* same as btn-primary */
  border: none;

  /* Hide native arrow */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* Custom white arrow */
  background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.5rem;
}
.toggle-options-btn {
  background-color: #17a2b8;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 5px;
}
h2, h3 {
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.add-option-btn {
  display: block;
  font-family: 'Segoe UI', 'Roboto', sans-serif;
  margin-left: auto;
  margin-top: 0.5rem;
  padding: 10px;
}
.sc-narrow-container .card {
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.075);
  border-radius: 0.75rem;
}
.option-title {
  background-color: #eaf6ff;
}
input[type="text"] {
  background-color: #eaf6ff !important;
}
.form-section-title {
  font-weight: bold;
  color: #444;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid #ccc;
  padding-bottom: 0.3rem;
  font-size: 1.5rem; /* 1.5x standard size */
}
/* --- ioVote UI Polish Pack --- */

/* Subtle shadow and soft rounded corners */
.form-control, .btn, .option-item, .form-section {
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Refine card spacing */
.form-section {
  padding: 1.5rem;
  margin-bottom: 2rem;
  background-color: #fdfefe;
  border: 1px solid #e4e4e4;
}

/* Modern buttons */
.btn-primary {
  background-color: #146cff;
  border: none;
}
.btn-success {
  background-color: #198754;
  border: none;
}
.btn-outline-danger {
  border-color: #dc3545;
}

/* Section headers */
.form-section-title {
  font-weight: 600;
  font-size: 1.25rem;
  margin-bottom: 1rem;
  color: #333;
  display: flex;
  align-items: center;
}

/* Session draft status */
#draftStatus {
  font-size: 0.9rem;
  color: #0d6efd;
  margin-top: 0.5rem;
}

.options-wrapper {
  min-height: 360px;
}

#option-container-wrapper {
  overflow: hidden;
  padding: 0;
}

#option-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
/* Light borders around sections */
#start-time-wrapper,
#groupSection,
#option-container-wrapper,
#end-time-wrapper {
  max-height: 400px;
  min-height: 400px;
  overflow-y: auto;
  padding-right: 6px;
  border-radius: 8px;
  background-color: #f8f9fa;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
/* Extra spacing between action buttons */
button[type="submit"],
#clearDraftBtn {
  margin-right: 0.5rem;
}

/* Slightly rounder inputs */
input[type="text"],
input[type="datetime-local"],
textarea,
select {
  border-radius: 6px !important;
}

/* Font size bump */
body,
input,
textarea,
select,
label,
button {
  font-size: 1rem;
}

/* Optional: clean up the "Toggle Options" button or hide it */
#toggle-options-btn {
  display: none;
}  /* or replace with display: inline-block and rename text */
/* Slight shadow for inputs */
input[type="text"],
input[type="datetime-local"],
textarea,
select {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border-radius: 6px;
}

/* Reduce Toggle Options button size */
#toggle-options-btn {
  font-size: 0.875rem;
  padding: 4px 10px;
}

/* Section card style */
.card-section {
  background-color: #ffffff;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

/* Button hover tweak */
button:hover {
  opacity: 0.92;
  transition: opacity 0.2s ease-in-out;
}
.sc-narrow-container {
  padding: 1rem;  /* was 20px */
}

@media (max-width: 576px) {
  .sc-narrow-container {
    border-radius: 0;  /* optional: remove corners on tiny screens */
    padding: 0.75rem;
  }
}
@media (max-width: 576px) {
  .d-flex.align-items-center.gap-2 {
    flex-direction: column;
    align-items: flex-start !important;
  }

  #start-time-preset, #end-time-preset {
    width: 100% !important;
  }
}
@media (max-width: 576px) {
  .d-flex.align-items-center.gap-2 {
    flex-direction: column;
    align-items: flex-start !important;
  }

  #start-time-preset, #end-time-preset {
    width: 100% !important;
  }
}
@media (max-width: 500px) {
  .d-flex.justify-content-between {
    flex-direction: column;
    gap: 0.5rem;
  }

  .btn {
    width: 100%;
  }
}
@media (hover: none) {
  input:focus, textarea:focus {
    box-shadow: none !important;
  }
}
body {
  font-size: 1rem;
}

@media (max-width: 480px) {
  body {
    font-size: 0.95rem;
  }
}