/* Mobile-first base styles for responsive layout */
:root{--brand:#2E5828;--muted:#6c757d;--container-padding:16px}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#222;background:#fff;line-height:1.4}
*,*::before,*::after{box-sizing:border-box}
.container{width:100%;max-width:1100px;margin:0 auto;padding:var(--container-padding)}
img{max-width:100%;height:auto;display:block}
.header-container{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:16px;border-bottom:4px solid var(--brand);background:#f8f9fa;gap:12px}
.logo-section{display:flex;align-items:center;gap:12px;min-width:0}
/* Force logo sizes to avoid layout jumps and ensure consistent alignment */
.logo-section img{max-height:56px!important;width:auto!important}
.synapse-image{max-height:64px!important;width:auto!important}
.header-container h1{margin:0;font-size:1.25rem!important;line-height:1.1;font-weight:700}
.header-container p.text-muted{margin:0;font-size:.95rem;color:var(--muted)}

@media (min-width:768px){
  .logo-section img{max-height:80px!important}
  .synapse-image{max-height:100px!important}
  .header-container h1{font-size:1.75rem}
}

@media (max-width:575.98px){
  .header-container{padding:12px}
  .logo-section img{max-height:48px!important}
  .synapse-image{max-height:56px!important}
  .header-container h1{font-size:1.125rem}
}

.kpi-card{background:linear-gradient(135deg,var(--brand),#3d6e1a);color:#fff;border-radius:12px;padding:20px;text-align:center}
.kpi-number{font-size:2rem;font-weight:700}
.kpi-label{margin-top:8px;font-weight:600}
/* Forms and buttons touch targets */
input,textarea,button,select{font-size:1rem;padding:10px;border-radius:8px}
button{cursor:pointer}
/* Tables responsive wrapper */
.table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Make small text readable on phones */
.small,small{font-size:.9rem}
/* Reduce side paddings on small screens */
@media (max-width:575.98px){
  .header-container{padding:12px}
  .container{padding:12px}
  .kpi-number{font-size:1.6rem}
  .navbar .container{padding-left:0;padding-right:0}
}
/* Utility helpers */
.text-truncate-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
/* Make dataTables compatible with responsive */
.dataTables_wrapper .row{display:flex;flex-wrap:wrap;gap:8px}
/* Make sticky-top elements behave on mobile */
.sticky-top{position:sticky;top:0;z-index:1020}
/* Ensure modals or dialog areas are not full-width on small screens */
.modal-dialog{margin:16px}

/* On very small screens, make right-side panels (eg. voting sidebar) stack below content */
@media (max-width:575.98px){
  .vote-sidebar{position:static!important;right:auto!important;width:100%!important;margin-top:16px;box-shadow:none;border:0;padding:12px}
  body{padding-bottom:20px}
}