/* Global styles */
body {
  font-family: "Inter", "Poppins", sans-serif;
  background-color: #ffffff;
	 padding-bottom: 80px !important; 
	  
}



/* Navbar */
.navbar {
  border-bottom: 1px solid #f1f1f1;
}

.nav-link {
  color: #000;
  font-weight: 500;
  transition: color 0.2s ease-in-out;
}

/* Hover and active link styles */
.nav-link:hover {
  color: #0066B3;
}

.nav-link.active {
  color: #0066B3 !important;
  position: relative;
}


/* Primary color overrides */
.text-primary {
  color: #0066B3 !important;
}

.btn-primary {
  background-color: #0066B3 !important;
  border: none;
  border-radius: 8px;
  padding: 10px 28px;
  transition: all 0.2s ease-in-out;
}

.btn-primary:hover {
  background-color: #004f8a !important;
}










/* ===== Active Elections Section ===== */

.active-elections {
  background-color: #ffffff;
}

.section-subtitle {
  color: #8997B0;
  font-size: 15px;
}

/* Card */
.election-card {
  background-color: #FAFAFA;
  border: 2px solid #EDEDED;
  border-radius: 10px;
  transition: all 0.2s ease-in-out;
}

.election-card:hover {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

.election-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Status badge */
.status-active {
  background-color: #5DC564;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  border-radius: 12px;
  padding: 5px 10px;
}

.status-upcoming {
  background-color: #ffffff;
  color: #0066B3;
	border: #0066B3 1px solid ;
  font-size: 13px;
  font-weight: 500;
  border-radius: 12px;
  padding: 5px 10px;
}

.status-completed {
  background-color: #CEDFEB;
  color: #0066B3;
	
  font-size: 13px;
  font-weight: 500;
  border-radius: 12px;
  padding: 5px 10px;
}








/* Card subtitle */
.card-subtitle {
  color: #8997B0;
  font-size: 14px;
}

/* Progress */
.progress {
  background-color: #EDEDED;
  border-radius: 5px;
}

.progress-bar {
  border-radius: 5px;
}

/* Voter count */
.voter-count {
  display: flex;
  align-items: center;
  color: #8997B0;
  font-size: 14px;
}






/* ACTIVE BADGE (Your existing style reference)
-------------------------------------------------- */
.status-active {
  background-color: #198754;
  color: #fff;
}

/* 1. Pending Approval */
.status-pending {
  background-color: #FFC107;
  color: #000;
}

/* 2. Approved */
.status-approved {
  background-color: #0066B3;
  color: #fff;
}

/* 3. Nominations Ongoing */
.status-nominations {
  background-color: #17A2B8;
  color: #fff;
}

/* 4. Nomination Approval Ongoing */
.status-nomination-approval {
  background-color: #6610F2;
  color: #fff;
}

/* 5. Withdrawal Ongoing */
.status-withdrawal {
  background-color: #FD7E14;
  color: #fff;
}

/* 6. Voting Not Yet Started */
.status-voting-not-started {
  background-color: #6C757D;
  color: #fff;
}

/* 7. Voting In-progress */
.status-voting {
  background-color: #198754;
  color: #fff;
}

/* 8. Results to be Announced */
.status-results {
  background-color: #FFC107;
  color: #000;
}

/* 9. Completed */
.status-completed {
  background-color: #146C43;
  color: #fff;
}



/* Prevent table from hiding behind footer */
.election-details-container {
    padding-bottom: 120px !important;  /* increase if footer is taller */
}









/* Divider line inside cards */
.card-divider {
  border: none;
  border-top: 2px solid #D5D5D5;
  margin: 12px 0;
}


/* Dates */
.election-dates p {
  color: #8997B0;
  font-size: 13px;
  line-height: 1.4;
}







/* === Login Page === */

/* Full page background */
.login-bg {
  background-color: #FAFAFA !important;
  font-family: "Poppins", "Inter", sans-serif;
}


/* Center everything perfectly */
.login-wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

/* Tagline (optional small heading) */
.tagline {
  color: #0066B3;
  font-size: 14px;
  margin-bottom: 16px;
}

/* Login container card */
.login-container {
  background-color: #FFFFFF;
  border: 1px solid #EFF3F7;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  width: 40vw;              /* Wider appearance */
  min-width: 400px;
  max-width: 600px;
  padding: 28px 40px;        /* Reduced height */
  transition: all 0.3s ease;
}

/* Headings */
.text-secondary {
  color: #7a7a7a !important;
  font-weight: 500;
  font-size: 1rem;
}

.text-primary {
  font-size: 0.95rem;
}

/* Label text */
.small-text {
  color: #1E1E1E;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
}

/* Input fields */
.form-control {
  background-color: #FAFAFA;
  border: 1px solid #EDEDED;
  border-radius: 8px;
  height: 38px;
  font-size: 14px;
  padding: 8px 12px;
}

.form-control:focus {
  border-color: #0066B3;
  box-shadow: none;
  background-color: #ffffff;
}



.login-bg {
  min-height: 100vh;
  padding-bottom: 80px; /* space for footer */
}

.otp-wrapper {
  margin-top: 40px;
  margin-bottom: 40px;
}

.otp-container {
  background: #fff;
  padding: 25px;
  border-radius: 12px;
  max-width: 480px;
  margin: 0 auto;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.otp-input {
  width: 45px;
  height: 50px;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 20px;
}





/* Nomination section (scoped) */
.nomination-section { padding: 24px 0; }
.ns-title { font-size: 22px; margin: 6px 0 4px; color:#111; }
.ns-sub { color:#8997B0; margin-bottom:18px; }

/* Card */
.nom-card {
  background:#fff;
  border:1px solid #E7ECF3;
  border-radius:12px;
  margin-bottom:18px;
  overflow:visible;
}

/* Header button (collapsed view) */
.nom-header {
  width:100%;
  display:flex;
  align-items:center;
  gap:16px;
  padding:14px 18px;
  background:transparent;
  border:0;
  text-align:left;
  cursor:pointer;
}

.nom-left { flex:0 0 74px; }
.nom-photo {
  width:72px;
  height:72px;
  object-fit:cover;
  border-radius:8px;
  display:block;
}

/* mid column */
.nom-mid { flex:1; min-width:0; }
.nom-name { font-weight:700; font-size:16px; color:#111; margin-bottom:4px; }
.nom-ight { color:#6f7b86; font-size:13px; margin-bottom:8px;  }
.nom-role { font-weight:700; font-size:14px; color:#111; margin-bottom:4px; }
.cv-link { color:#0066B3; font-size:13px; text-decoration:none; }

/* right column in header */
.nom-right { flex:0 0 110px; display:flex; align-items:center; justify-content:flex-end; gap:12px; }




.approved-badge {
  background:#5DC564;
  color:#fff;
  padding:6px 10px;
  border-radius:14px;
  font-size:13px;
  display:inline-block;
}

.pending-badge {
  background:#FFC107;
  color:#1e1e1e;
  padding:6px 10px;
  border-radius:14px;
  font-size:13px;
  display:inline-block;
}














.chev { font-size:18px; color:#6b7280; transition: transform .25s ease; }

/* body (hidden by default) */
.nom-body {
  max-height:0;
  overflow:hidden;
  transition: max-height .36s ease;
  border-top:1px solid #EFF3F7;
  background:#fff;
}

/* interior layout when expanded */
.nom-body-inner {
  padding:20px 18px 22px;
  display:flex;
  gap:20px;
  align-items:flex-start;
}

/* left column in expanded content (bigger photo) */
.nom-body-left { flex:0 0 140px; }
.nom-photo-large {
  width:128px;
  height:128px;
  object-fit:cover;
  border-radius:8px;
  display:block;
}

/* right column */
.nom-body-right { flex:1; min-width:0; }
.bio { color:#333; font-size:14px; line-height:1.5; margin-bottom:12px; }
.details-grid { display:flex; gap:16px; margin-bottom:12px; }
.d-row { display:flex; gap:12px; color:#6f7b86; font-size:13px; }
.d-label { min-width:160px; color:#8997B0; }
.d-value { font-weight:600; color:#111; }

/* approvals list */
.approval-list { margin-top:10px; }
.approval-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-radius:6px; }
.approval-left { color:#2b2b2b; font-size:14px; }
.approval-right { }

/* open state */
.nom-card.open .nom-body { max-height:1000px; } /* big enough to show content; adjust if needed */
.nom-card.open .chev { transform: rotate(180deg); color:#0066B3; }
.nom-card.open .nom-header { background: #fff; }

/* responsive */

/* MOBILE + TABLET ONLY */
@media (max-width: 991px) {

    #dashboard {
        display: none;
    }

    #cornerTrigger {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 70px;
        height: 70px;
        z-index: 99999;
        background: transparent;
    }

}

@media (max-width: 900px) {
  .nom-body-inner { flex-direction:column; }
  .nom-body-left { flex:0 0 auto; }
  .d-label { min-width:120px; }
}


.chev-icon {
  width: 20px;
  height: 20px;
  transition: transform .25s ease;
  cursor: pointer;
}

/* Rotate when card opens */
.nom-card.open .chev-icon {
  transform: rotate(180deg);
}








.custom-multiselect {
  border: 1px solid #ced4da;
  border-radius: 6px;
  padding: 6px 10px;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  background: white;
  position: relative;
}

.custom-multiselect .selected-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.custom-multiselect .dropdown-arrow {
  margin-left: auto;
  color: #555;
  font-size: 14px;
}

.tag-pill {
  background: #0066B3;
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
}

.options-list {
  display: none;
  border: 1px solid #ced4da;
  border-radius: 6px;
  margin-top: 4px;
  background: #fff;
  padding: 8px 10px;
  max-height: 180px;
  overflow-y: auto;
  position: absolute;
  width: 100%;
  z-index: 10;
}

.options-list label {
  display: block;
  margin-bottom: 6px;
  cursor: pointer;
}




.btn-custom-outline:hover {
  background: #0066B3 !important;
  color: #fff !important;
}








/* Headings & bold labels */
h1, h2, h3, h4, h5, h6, .fw-bold, label.form-label, .navbar-brand, .card h4, .card h5 {
    color: #1e1e1e !important;
}

/* Light gray secondary text */
.text-muted,
p.text-muted,
small.text-muted,
.form-text,
.text-secondary {
    color: #8997B0 !important;
}

/* Placeholder text */
::placeholder {
    color: #8997B0 !important;
    opacity: 1;
}

/* Dropdown text */
.form-select,
.form-control {
    color: #1e1e1e;
}

/* Input group icons */
.input-group-text i {
    color: #8997B0;
}








/* Back to Dashboard button */
.back-btn {
    background-color: #0066B3 !important;
    color: #ffffff !important;
    border: none !important;
}

.btn-text {
	color: #ffffff !important;
}


.icon-btn {
    width: 60px;           
    height: 60px;          
    background-color: #0066B3;
    border-radius: 10px;    
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-btn img {
    width: 50px;           
    height: auto;
    display: block;
}

























/* Footer text */
.text-muted.small {
  color: #8997B0 !important;
  font-size: 13px;
  margin-top: 12px;
}

/* === Responsive Adjustments === */

/* For large desktops (≥1440px) */
@media (min-width: 1440px) {
  .login-container {
    width: 34vw;           /* Wider for large screens */
    padding: 30px 50px;
  }

  .form-control {
    height: 36px;
  }

  .btn-primary {
    height: 38px;
  }
}

/* For laptops (992px–1439px) */
@media (max-width: 1439px) {
  .login-container {
    width: 42vw;
  }
}

/* For tablets */
@media (max-width: 992px) {
  .login-container {
    width: 55vw;
  }
}

/* For mobile */
@media (max-width: 768px) {
  .login-container {
    width: 85%;
    padding: 25px 25px;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .login-container {
    width: 90%;
    padding: 20px;
  }
  .form-control {
    height: 34px;
  }
  .btn-primary {
    height: 36px;
  }
}




.otp-wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.otp-logo {
  height: 60px;
}

.text-primary {
  color: #0066B3 !important;
}

.text-secondary {
  color: #777777 !important;
}

.otp-container {
  background-color: #FFFFFF;
  border: 1px solid #EFF3F7;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  padding: 35px 45px;
  width: 34vw;
  min-width: 360px;
  max-width: 480px;
  transition: all 0.3s ease;
}

.otp-inputs {
  justify-content: center;
}

.otp-input {
  width: 46px;
  height: 56px;
  text-align: center;
  font-size: 20px;
  border: 2px solid #E1E6ED;
  border-radius: 8px;
  background-color: #FFFFFF;
  transition: all 0.2s;
}

.otp-input:focus {
  outline: none;
  border-color: #0066B3;
  box-shadow: 0 0 4px rgba(0, 102, 179, 0.25);
}

/* Button styling */
.btn-primary {
  background-color: #0066B3 !important;
  border: none;
  border-radius: 10px;
  height: 42px;
  font-size: 15px;
  font-weight: 500;
}

.btn-primary:hover {
  background-color: #005798 !important;
}

/* Responsive */
@media (max-width: 1200px) {
  .otp-container { width: 40vw; }
}

@media (max-width: 992px) {
  .otp-container { width: 55vw; }
}

@media (max-width: 768px) {
  .otp-container { width: 85%; padding: 25px; }
  .otp-input { width: 42px; height: 52px; font-size: 18px; }
}

@media (max-width: 480px) {
  .otp-container { width: 90%; padding: 20px; }
  .otp-input { width: 38px; height: 48px; font-size: 16px; }
}




section.active-elections:last-of-type {
  margin-bottom: 100px; /* Adjust if footer height changes */
}






/* Officer Page Styles (scoped safely) */
.officer-page {
  background-color: #FAFAFA;
}

.officer-sidebar .officer-link {
  color: #000;
  font-weight: 500;
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: all 0.2s ease;
}

.officer-sidebar .officer-link:hover {
  background-color: #D2EBFF;
}

.officer-sidebar .officer-link.active {
  background-color: #0066B3;
  color: #fff !important;
}

.officer-sidebar .officer-link.active i {
  color: #fff;
}

.officer-sidebar .officer-link i {
  font-size: 18px;
  color: #555;
  transition: color 0.2s ease;
}

.officer-sidebar .officer-link:hover i {
  color: #0066B3;
}

.officer-card {
  background-color: #fff;
  border-radius: 12px;
}

.badge.bg-success {
  background-color: #5DC564 !important;
}

.officer-sidebar {
  width: 270px; /* increased from 240px */
}

@media (max-width: 992px) {
  .officer-sidebar {
    width: 240px; /* smaller width for tablets or small screens */
  }
}




.officer-link.active {
  background-color: #0066B3 !important;
  color: #fff !important;
  border-radius: 6px;
}

.officer-link:hover {
  background-color: #D2EBFF !important;
  color: #000 !important;
}

.status-pill {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
  color: #fff;
}

.status-pill.success {
  background-color: #28a745;   /* Green */
}

.status-pill.fail {
  background-color: #dc3545;   /* Red */
}




.inbox-message {
  transition: all 0.2s ease;
}

.inbox-message:hover {
  background-color: #F7FBFF;
  border-color: #B3E0FF;
}


.inbox-message {
  transition: all 0.2s ease;
}

.inbox-message:hover {
  background-color: #F7FBFF;
  border-color: #B3E0FF;
}


.inbox-toggle {
  background-color: #F3F7FB;
  border: 1px solid #E3E9EF;
  display: inline-flex !important;  
  width: auto !important;  
}

.toggle-option {
  border: none;
  background: transparent;
  color: #6B7280;
  font-weight: 500;
  font-size: 16px;
  padding: 6px 18px;
  border-radius: 20px;
  transition: all 0.2s ease;
}

.toggle-option.active {
  background: #fff;
  color: #000;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.toggle-option:hover:not(.active) {
  color: #000;
}

/* Wrapper ensures toggle stays compact and aligned to left */
.inbox-toggle-wrapper {
  display: block;          /* normal flow */
  text-align: left;        /* keep toggle left-aligned inside container */
}

/* The pill itself: force content-width, prevent full-width stretching */
.inbox-toggle {
  display: inline-flex !important; /* ensure it does not become block/flex-full */
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;               /* key: shrink-to-fit */
  background-color: #F3F7FB;
  border: 1px solid #E3E9EF;
  padding: 6px;                     /* outer padding of pill */
  border-radius: 999px;
  box-sizing: border-box;
}

/* Buttons inside pill */
.toggle-option {
  border: none;
  background: transparent;
  color: #6B7280;
  font-weight: 500;
  font-size: 16px;
  padding: 8px 20px;    /* tune width here */
  margin: 0;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
  transition: all 0.14s ease;
  box-sizing: border-box;
}

/* Active button style */
.toggle-option.active {
  background: #ffffff;
  color: #000;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* smaller screens: reduce padding so it still fits nicely */
@media (max-width: 576px) {
  .toggle-option {
    padding: 6px 12px;
    font-size: 14px;
  }
}








/* Edit button */
.edit-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background: #F5F9FF;
  border: 1px solid #D0E3FF;
  padding: 6px 14px;
  border-radius: 8px;
  font-weight: 600;
  color: #0B5ED7;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: 0.2s ease;
}

.edit-btn:hover {
  background: #E6F0FF;
  border-color: #0B5ED7;
  cursor: pointer;
}

.election-details-container {
  padding: 20px 30px;
}

.election-card {
  background: #ffffff;
  padding: 30px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
}

.ed-header {
  display: flex;
  align-items: center;
  gap: 15px;
}

.ed-header h2 {
  font-weight: 700;
  margin: 0;
}

.subtitle {
  margin: 5px 0 20px;
  color: #777;
}

.status-badge {
  padding: 5px 12px;
  font-size: 13px;
  border-radius: 20px;
  color: #fff;
}

.status-badge.active {
  background: #5DC564;
}

/* Grid */
.ed-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
  row-gap: 20px;
  margin-top: 20px;
}

.item label {
  font-size: 14px;
  color: #666;
  display: block;
}

.item p {
  font-weight: 600;
  margin: 3px 0 0;
}

.item.full {
  grid-column: 1 / 3;
}

.bold {
  font-weight: 700;
}









.table-responsive {
  width: 100%;
  overflow-x: auto; /* allows horizontal scroll */
}

.summary-table {
    width: max-content; /* ensures table is wider than container */
    min-width: 1200px;
    border-collapse: collapse;
    white-space: nowrap;
}

/* Optional: nice scroll behavior */
.summary-table-wrapper::-webkit-scrollbar {
    height: 6px;
}

.summary-table-wrapper::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.summary-table-wrapper::-webkit-scrollbar-track {
    background: transparent;
}



.summary-card {
  background: #fff;
  border-radius: 15px;
  padding: 30px;
  border: 1px solid #e6edf5;
}

.summary-table {
  width: 100%;
	 min-width: 1200px; 
  border-collapse: separate;
  border-spacing: 0;
}

.summary-table thead th {
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  white-space: nowrap;
  border-bottom: 1px solid #e6edf5;
}

.summary-table tbody td {
  padding: 16px;
  font-size: 15px;
  vertical-align: middle;
  border-bottom: 1px solid #f2f4f7;
}

.summary-table tbody tr:last-child td {
  border-bottom: none;
}
.summary-table {
  min-width: 1200px; /* adjust if your columns need more space */
}

/* Badge styles */
.status-badge {
  display: inline-block;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 20px;
}

.status-badge.win {
  background: #e6f9ea;
  color: #2f8f41;
}

.summary-table-wrapper {
    width: 100%;
    overflow-x: auto; /* enable horizontal scroll */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* smooth scrolling on mobile */
}







.post-option {
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  background: #fff;
  transition: background 0.2s;
}
.post-option:hover {
  background: #e0e0e0;
}
.post-option.selected {
  background: #204CC7;
  color: #fff;
  font-weight: bold;
}






.status-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.status-dot.success {
  background-color: #28a745; /* green */
}

.status-dot.failed {
  background-color: #dc3545; /* red */
}












.footer-line {
  margin-top: 25px;
  font-size: 14px;
  color: #6a6a6a;
}

.footer-line span {
  font-weight: 600;
}

.footer {
  background-color: #91BDDE;
  font-size: 16px;
  color: #1e1e1e;
  width: 100%;
  position: static; /* default: normal flow */
  bottom: auto;
  
}

/* On larger screens (e.g., desktops 768px and above) → fixed footer */
@media (min-width: 768px) {
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
  }
}

.footer a {
  color: #1E1E1E;
  text-decoration: none;
  font-weight: 500;
}

.footer a:hover {
  text-decoration: underline;
}

.footer-bottom {
  padding: 10px 0;
}

.footer-content {
  gap: 10px;
}

@media (max-width: 767px) {
  .footer-content {
    flex-direction: column;
    text-align: center;
  }

  .powered-by {
    justify-content: center;
    margin-top: 5px;
  }
}








.summary-scroll-viewport {
    display: block;
    width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    white-space: nowrap;
}

/* MAKE INNER CONTENT WIDER THAN VIEWPORT */
.summary-scroll-inner {
    display: inline-block;
    width: max-content !important;
}

/* TABLE MUST BE WIDE, NOT SHRUNK */
.summary-table {
    width: max-content !important;
    min-width: 1200px !important;
    white-space: nowrap;
}