/* ==========================================================================
   Liquid Glass Theme
   Visual refresh layered on top of AdminLTE. Colors are derived from the
   existing skin-blue palette (#3c8dbc / #367fa9 / #222d32) — no new brand
   colors introduced. Cosmetic only: no layout, markup or script changes.
   ========================================================================== */

:root{
  color-scheme: only light;

  --glass-primary: #3c8dbc;
  --glass-primary-dark: #367fa9;
  --glass-primary-darker: #2f6690;
  --glass-navy: #222d32;
  --glass-navy-light: #2c3b41;

  --glass-bg: rgba(255, 255, 255, 0.58);
  --glass-bg-strong: rgba(255, 255, 255, 0.78);
  --glass-bg-soft: rgba(255, 255, 255, 0.38);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-border-soft: rgba(255, 255, 255, 0.28);

  --glass-shadow-sm: 0 2px 10px rgba(31, 61, 82, 0.08);
  --glass-shadow-md: 0 10px 30px rgba(24, 55, 78, 0.14), 0 2px 8px rgba(24, 55, 78, 0.06);
  --glass-shadow-lg: 0 20px 50px rgba(20, 48, 68, 0.20), 0 4px 14px rgba(20, 48, 68, 0.08);

  --glass-blur: blur(20px) saturate(180%);
  --glass-blur-sm: blur(10px) saturate(160%);

  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --radius-xs: 8px;

  --ease-glass: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------------------------------------------------------------------- */
/* Foundation                                                              */
/* ---------------------------------------------------------------------- */

html, body{
  min-height: 100%;
}

body{
  background-color: #dce7ef !important;
  background-image:
    radial-gradient(1100px 700px at 8% -5%, rgba(120, 190, 230, 0.35), transparent 60%),
    radial-gradient(900px 600px at 100% 0%, rgba(60, 141, 188, 0.28), transparent 55%),
    radial-gradient(1200px 800px at 50% 120%, rgba(54, 127, 169, 0.22), transparent 60%),
    linear-gradient(160deg, #eaf2f7 0%, #dce7ef 45%, #d3e1eb 100%) !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  color: #2c3b41;
  overflow-x: hidden;
}

.wrapper{
  background-color: #dce7ef !important;
}

.content-wrapper,
.right-side{
  background-color: #e7eef4 !important;
  background-image:
    radial-gradient(900px 600px at 10% 0%, rgba(120, 190, 230, 0.22), transparent 60%),
    radial-gradient(1000px 700px at 100% 100%, rgba(54, 127, 169, 0.16), transparent 60%) !important;
  background-repeat: no-repeat !important;
  min-height: calc(100vh - 100px);
}

*{
  scrollbar-width: thin;
  scrollbar-color: rgba(54, 127, 169, 0.45) transparent;
}
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{
  background: rgba(54, 127, 169, 0.4);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover{ background: rgba(54, 127, 169, 0.6); background-clip: padding-box; }

/* ---------------------------------------------------------------------- */
/* Login pages                                                             */
/* ---------------------------------------------------------------------- */

html{ height: 100%; }

body.login-page{
  position: relative;
  width: 100%;
  min-height: 100vh;
}

body.login-page::before,
body.login-page::after{
  content: "";
  position: fixed;
  border-radius: 50%;
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
}
body.login-page::before{
  width: 480px; height: 480px;
  top: -140px; left: -120px;
  background: radial-gradient(circle, rgba(60,141,188,0.45), rgba(60,141,188,0) 70%);
}
body.login-page::after{
  width: 520px; height: 520px;
  bottom: -160px; right: -140px;
  background: radial-gradient(circle, rgba(54,127,169,0.4), rgba(54,127,169,0) 70%);
}

.login-box{
  position: fixed !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  margin: 0 !important;
  width: 380px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  float: none;
}

.login-logo{
  text-align: center;
  margin-bottom: 22px;
}

.login-badge{
  width: 68px;
  height: 68px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 28px;
  color: #fff;
  background: linear-gradient(135deg, #4a9bcf 0%, var(--glass-primary) 55%, var(--glass-primary-dark) 100%);
  box-shadow: 0 12px 26px rgba(60, 141, 188, 0.4), inset 0 1px 0 rgba(255,255,255,0.35);
}

.login-logo b{
  display: block;
  font-size: 24px;
  letter-spacing: 0.3px;
  color: #1f3d52;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}

.login-logo-sub{
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--glass-primary-dark);
  opacity: 0.85;
}

.login-box-body{
  background: var(--glass-bg-strong) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--glass-shadow-lg);
  padding: 32px 28px !important;
  animation: glass-rise 0.5s var(--ease-glass);
}

.login-box-msg{
  color: #3a5568;
  font-weight: 600;
  margin-bottom: 22px;
}

.login-box-body .form-group{
  margin-bottom: 16px;
}

.login-box-body .input-group{
  width: 100%;
  border-radius: var(--radius-xs);
  overflow: hidden;
}

.login-box-body .input-group-addon{
  width: 46px;
  text-align: center;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(140, 170, 190, 0.4);
  border-right: none;
  border-radius: 0 !important;
  color: var(--glass-primary-dark);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.login-box-body .input-group .form-control{
  border-radius: 0 !important;
  height: 44px;
}

.login-box-body .input-group:focus-within .input-group-addon{
  border-color: var(--glass-primary);
  background: rgba(255,255,255,0.85);
  color: var(--glass-primary);
}

.login-box-body .input-group-addon.toggle-password{
  border-left: none;
  border-right: 1px solid rgba(140, 170, 190, 0.4);
  cursor: pointer;
  user-select: none;
}

.login-box-body .input-group-addon.toggle-password:hover{
  color: var(--glass-primary);
}

.login-box-body .btn-block{
  height: 46px;
  font-size: 15px;
  margin-top: 8px;
}

@keyframes glass-rise{
  from{ opacity: 0; transform: translateY(14px); }
  to{ opacity: 1; transform: translateY(0); }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .login-box-body{ background: rgba(255,255,255,0.92) !important; }
}

/* ---------------------------------------------------------------------- */
/* Buttons                                                                 */
/* ---------------------------------------------------------------------- */

.btn{
  border-radius: var(--radius-xs) !important;
  border: none;
  font-weight: 600;
  letter-spacing: 0.2px;
  box-shadow: var(--glass-shadow-sm);
  transition: transform 0.15s var(--ease-glass), box-shadow 0.15s var(--ease-glass), filter 0.15s ease;
}
.btn:active{ transform: translateY(0); }
.btn:hover{ transform: translateY(-1px); filter: brightness(1.04); }
.btn:focus, .btn.focus{ outline: none; }

.btn-primary{
  background: linear-gradient(135deg, #4a9bcf 0%, var(--glass-primary) 55%, var(--glass-primary-dark) 100%) !important;
  box-shadow: 0 6px 16px rgba(60, 141, 188, 0.35);
}
.btn-primary:hover, .btn-primary:focus{
  background: linear-gradient(135deg, #559fd0 0%, #3f93c2 55%, #316f95 100%) !important;
  box-shadow: 0 8px 20px rgba(60, 141, 188, 0.42);
}

.btn-success{
  background: linear-gradient(135deg, #34c37a 0%, #00a65a 55%, #00934f 100%) !important;
  box-shadow: 0 6px 16px rgba(0, 166, 90, 0.32);
}
.btn-danger{
  background: linear-gradient(135deg, #ef6a5c 0%, #dd4b39 55%, #c53c2b 100%) !important;
  box-shadow: 0 6px 16px rgba(221, 75, 57, 0.32);
}
.btn-warning{
  background: linear-gradient(135deg, #ffb347 0%, #f39c12 55%, #dd8b0a 100%) !important;
  box-shadow: 0 6px 16px rgba(243, 156, 18, 0.32);
}
.btn-info{
  background: linear-gradient(135deg, #35d0f2 0%, #00c0ef 55%, #00a3ca 100%) !important;
  box-shadow: 0 6px 16px rgba(0, 192, 239, 0.32);
}
.btn-default{
  background: rgba(255,255,255,0.7) !important;
  border: 1px solid rgba(150,170,185,0.4) !important;
  color: #2c3b41;
}
.btn-default:hover{ background: rgba(255,255,255,0.9) !important; }

.btn-block{ border-radius: var(--radius-xs) !important; }

/* ---------------------------------------------------------------------- */
/* Header / top navbar                                                    */
/* ---------------------------------------------------------------------- */

.main-header{
  box-shadow: var(--glass-shadow-md);
}

.main-header .navbar,
.main-header{
  background: linear-gradient(120deg, rgba(34, 45, 50, 0.92) 0%, rgba(44, 59, 65, 0.9) 55%, rgba(54, 127, 169, 0.88) 130%) !important;
  -webkit-backdrop-filter: var(--glass-blur-sm);
  backdrop-filter: var(--glass-blur-sm);
}

.main-header .logo{
  background: rgba(0,0,0,0.14) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.main-header .logo:hover{ background: rgba(0,0,0,0.2) !important; }

.main-header .navbar-brand{ color: #fff; }

/* Logo: icon badge + title, single row, never wraps.
   Selector must match AdminLTE's own ".main-header .logo .logo-lg{display:block}"
   specificity (3 classes) exactly — a weaker selector loses the display fight
   even without !important, and !important here would also defeat the more
   specific collapsed-sidebar rule that hides this element when mini. */
.main-header .logo .logo-lg{
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
}
.main-header .logo-icon{
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  font-size: 14px;
  line-height: 1;
  color: #fff;
  background: linear-gradient(135deg, #4a9bcf 0%, var(--glass-primary) 55%, var(--glass-primary-dark) 100%);
  box-shadow: 0 4px 12px rgba(60, 141, 188, 0.45), inset 0 1px 0 rgba(255,255,255,0.35);
}
.main-header .logo-text{
  flex: 0 1 auto;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Collapsed (icon-only) sidebar: give the mini logo the same gradient
   badge as the expanded logo-icon instead of a bare glyph. Needs to match
   AdminLTE's own collapsed-logo selector specificity to win the cascade. */
.sidebar-mini.sidebar-collapse .main-header .logo > .logo-mini{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1;
  color: #fff;
  border-radius: 9px;
  background: linear-gradient(135deg, #4a9bcf 0%, var(--glass-primary) 55%, var(--glass-primary-dark) 100%);
  box-shadow: 0 4px 12px rgba(60, 141, 188, 0.45), inset 0 1px 0 rgba(255,255,255,0.35);
}

.main-header .navbar .nav > li > a{
  color: rgba(255,255,255,0.85);
}
.main-header .navbar .nav > li > a:hover,
.main-header .navbar .nav > li > a:focus,
.main-header .navbar .nav > .active > a{
  background: rgba(255,255,255,0.12) !important;
  color: #fff;
}

.main-header .navbar-toggle{ color: #fff; }

.main-header .sidebar-toggle{ color: rgba(255,255,255,0.85); }
.main-header .sidebar-toggle:hover{ background: rgba(255,255,255,0.1) !important; color: #fff; }

.main-header .navbar-custom-menu .navbar-nav > li > a,
.main-header .user-menu .user-image{
  color: #fff;
}

/* User menu: avatar ring + name + caret */
.main-header .navbar-custom-menu .navbar-nav > li.user-menu > a{
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-radius: var(--radius-xs);
  transition: background 0.15s ease;
}
.main-header .navbar-custom-menu .navbar-nav > li.user-menu > a:hover,
.main-header .navbar-custom-menu .navbar-nav > li.user-menu > a:focus{
  background: rgba(255,255,255,0.12) !important;
}
.main-header .user-menu .user-image{
  width: 30px;
  height: 30px;
  margin-right: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.35);
  transition: box-shadow 0.15s ease;
}
.main-header .user-menu > a:hover .user-image{
  box-shadow: 0 0 0 2px rgba(255,255,255,0.7);
}
.main-header .user-caret{
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  transition: transform 0.15s ease;
}
.main-header .user-menu.open .user-caret{ transform: rotate(180deg); }

.main-header .dropdown-menu{
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--glass-shadow-md);
  overflow: hidden;
}
.main-header .dropdown-menu .user-header{
  background: linear-gradient(135deg, var(--glass-primary), var(--glass-primary-dark)) !important;
}
.main-header .dropdown-menu .user-footer{
  background: rgba(255,255,255,0.3);
}

/* ---------------------------------------------------------------------- */
/* Sidebar (admin)                                                        */
/* ---------------------------------------------------------------------- */

.main-sidebar{
  background: linear-gradient(180deg, rgba(34, 45, 50, 0.94) 0%, rgba(26, 34, 38, 0.96) 100%) !important;
  -webkit-backdrop-filter: var(--glass-blur-sm);
  backdrop-filter: var(--glass-blur-sm);
  box-shadow: var(--glass-shadow-md);
}

.sidebar{ background: transparent; }

.sidebar .user-panel{
  padding: 16px;
  margin: 10px 8px 6px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
}
.sidebar .user-panel > .image > img{
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.18), 0 0 0 5px rgba(60,141,188,0.25);
}
.sidebar .user-panel > .info,
.sidebar .user-panel > .info > a{ color: #fff; }
.sidebar .user-panel > .info > p{
  font-weight: 600;
  margin-bottom: 2px;
}
.sidebar .user-panel > .info > a{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}

/* Collapsed (icon-only) sidebar: a circular avatar squeezed between the
   square nav icon chips always looks cramped/out of place at 50px wide.
   Hide the whole panel here — the logo badge already identifies the app,
   and the nav icons read cleanly right below it. */
.sidebar-mini.sidebar-collapse .sidebar .user-panel{
  display: none;
}

.status-dot{
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2fd287;
  box-shadow: 0 0 0 0 rgba(47, 210, 135, 0.55);
  animation: status-pulse 2s infinite;
}
@keyframes status-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(47, 210, 135, 0.55); }
  70%{ box-shadow: 0 0 0 6px rgba(47, 210, 135, 0); }
  100%{ box-shadow: 0 0 0 0 rgba(47, 210, 135, 0); }
}

.sidebar-menu > li.sidebar-divider{
  height: 1px;
  margin: 10px 20px;
  padding: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14) 50%, transparent);
  pointer-events: none;
}
.sidebar-mini.sidebar-collapse .sidebar-menu > li.sidebar-divider{
  margin: 8px 14px;
}

.sidebar-menu > li > a{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  color: rgba(255,255,255,0.78);
  border-left: 3px solid transparent;
  margin: 3px 10px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 13.5px;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, color 0.15s ease;
}
.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > .glyphicon{
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0;
  border-radius: 9px;
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.55);
  font-size: 13px;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.sidebar-menu > li > a > span{
  flex: 1 1 auto;
  min-width: 0;
}

/* Collapsed (icon-only) sidebar: the padding/margin above is tuned for the
   expanded row (icon + label). With the label hidden, that leaves the icon
   pinned to the left edge with barely any gap between rows — recenter it
   and give the chips proper breathing room. */
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a{
  justify-content: center;
  padding: 12px 0;
  margin: 6px 8px;
}

.sidebar-menu > li > a:hover{
  background: rgba(255,255,255,0.08) !important;
  border-left-color: var(--glass-primary);
  color: #fff;
}
.sidebar-menu > li > a:hover > .fa,
.sidebar-menu > li > a:hover > .glyphicon{
  background: rgba(255,255,255,0.14);
  color: #fff;
}

/* Collapsed (icon-only) sidebar: the flyout label that pops out on hover
   inherits the hover background above, which is too transparent to read
   against the light page behind it — give it a solid opaque panel instead. */
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a,
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span{
  background-color: #202b30 !important;
}
.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span{
  color: #fff;
  box-shadow: var(--glass-shadow-md);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: none;
}
.sidebar-menu > li.active > a{
  background: linear-gradient(90deg, rgba(60,141,188,0.4), rgba(60,141,188,0.08)) !important;
  border-left-color: var(--glass-primary);
  color: #fff;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), var(--glass-shadow-sm);
}
.sidebar-menu > li.active > a > .fa,
.sidebar-menu > li.active > a > .glyphicon{
  background: linear-gradient(135deg, var(--glass-primary), var(--glass-primary-dark));
  color: #fff;
  box-shadow: 0 2px 8px rgba(60, 141, 188, 0.45);
}

/* ---------------------------------------------------------------------- */
/* Boxes / panels / cards                                                  */
/* ---------------------------------------------------------------------- */

.box{
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md) !important;
  box-shadow: var(--glass-shadow-md);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  position: relative;
}
.box::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--glass-primary), var(--glass-primary-dark) 60%, var(--glass-primary));
  opacity: 0.85;
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
  pointer-events: none;
}

.box.box-solid{
  border: 1px solid var(--glass-border);
}

.box-header{
  background: transparent !important;
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}
.box-header.with-border{
  border-bottom: 1px solid rgba(60, 141, 188, 0.18);
}
.box.box-solid.box-primary > .box-header,
.box.box-solid > .box-header{
  color: #1f3d52;
}
.box-title{ color: #223543; }

.box-body{ color: #2c3b41; }

.box-footer{
  background: rgba(255,255,255,0.25) !important;
  border-top: 1px solid rgba(60, 141, 188, 0.15);
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

.nav-tabs-custom{
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-md);
  box-shadow: var(--glass-shadow-md);
  border: 1px solid var(--glass-border);
}
.nav-tabs-custom > .nav-tabs{ border-bottom: 1px solid rgba(60,141,188,0.18); }
.nav-tabs-custom > .nav-tabs > li.active{ border-top-color: var(--glass-primary); }

/* ---------------------------------------------------------------------- */
/* Small boxes / info boxes (dashboard stat tiles)                        */
/* ---------------------------------------------------------------------- */

.small-box{
  border-radius: var(--radius-md) !important;
  box-shadow: var(--glass-shadow-md);
  border: 1px solid rgba(255,255,255,0.35);
  overflow: hidden;
  position: relative;
  transition: transform 0.2s var(--ease-glass), box-shadow 0.2s var(--ease-glass);
}
.small-box:hover{
  transform: translateY(-4px);
  box-shadow: var(--glass-shadow-lg);
}
.small-box::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.28), rgba(255,255,255,0) 55%);
  pointer-events: none;
}
.small-box > .inner{ position: relative; z-index: 1; }
.small-box > .icon{ opacity: 0.28; }
.small-box h3{ font-weight: 700; }
.small-box .small-box-footer{
  background: rgba(0,0,0,0.08) !important;
  color: rgba(255,255,255,0.92);
  position: relative;
  z-index: 1;
}
.small-box .small-box-footer:hover{ background: rgba(0,0,0,0.14) !important; }

.small-box.bg-aqua{ background: linear-gradient(135deg, #3fd0f2, #00b8e0) !important; }
.small-box.bg-green{ background: linear-gradient(135deg, #2fd287, #00a65a) !important; }
.small-box.bg-yellow{ background: linear-gradient(135deg, #ffc164, #f39c12) !important; }
.small-box.bg-red{ background: linear-gradient(135deg, #f16f60, #dd4b39) !important; }
.small-box.bg-blue{ background: linear-gradient(135deg, #5aa4d6, #3c8dbc) !important; }

.info-box{
  background: var(--glass-bg-strong) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-md);
  box-shadow: var(--glass-shadow-md);
  border: 1px solid var(--glass-border);
}
.info-box-icon{ border-radius: var(--radius-md) 0 0 var(--radius-md); }

/* ---------------------------------------------------------------------- */
/* Stat cards (dashboard)                                                  */
/* ---------------------------------------------------------------------- */

.stat-cards{ margin-bottom: 4px; }

.stat-card{
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  overflow: hidden;
  padding: 20px 46px 20px 20px;
  margin-bottom: 20px;
  border-radius: var(--radius-md);
  box-shadow: var(--glass-shadow-md);
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  text-decoration: none;
  transition: transform 0.2s var(--ease-glass), box-shadow 0.2s var(--ease-glass);
}
.stat-card:hover,
.stat-card:focus{
  transform: translateY(-4px);
  box-shadow: var(--glass-shadow-lg);
  color: #fff;
  text-decoration: none;
}
.stat-card::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.28), rgba(255,255,255,0) 55%);
  pointer-events: none;
}

.stat-card-icon{
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
  font-size: 22px;
}

.stat-card-body{
  position: relative;
  z-index: 1;
  min-width: 0;
  flex: 1 1 auto;
}
.stat-card-body h3{
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.stat-card-body p{
  margin: 2px 0 0;
  font-size: 13px;
  font-weight: 600;
  opacity: 0.92;
  white-space: nowrap;
}
.stat-card-sub{
  font-size: 12px;
  font-weight: 600;
  opacity: 0.85;
}

.stat-card-link{
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  margin-left: auto;
  padding-left: 12px;
  font-size: 11px;
  font-weight: 600;
  opacity: 0.85;
  white-space: nowrap;
  border-left: 1px solid rgba(255,255,255,0.25);
}
.stat-card-link i{ margin-left: 3px; }

.stat-card-blue{ background: linear-gradient(135deg, #5aa4d6, #3c8dbc) !important; }
.stat-card-green{ background: linear-gradient(135deg, #2fd287, #00a65a) !important; }
.stat-card-yellow{ background: linear-gradient(135deg, #ffc164, #f39c12) !important; }
.stat-card-red{ background: linear-gradient(135deg, #f16f60, #dd4b39) !important; }


.section-heading{
  display: flex;
  align-items: center;
  gap: 8px;
  color: #1f3d52;
  font-weight: 700;
  margin: 6px 0 16px;
}
.section-heading i{ color: var(--glass-primary-dark); }

/* ---------------------------------------------------------------------- */
/* Voters table: avatar cell, ID badge, icon actions, stat chips           */
/* ---------------------------------------------------------------------- */

.voters-box-header,
.box-header-flex{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.voters-box-header .stat-chips,
.box-header-flex .stat-chips{ float: none; display: flex; gap: 8px; flex-wrap: wrap; }

.stat-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--glass-primary-dark);
  background: rgba(60, 141, 188, 0.12);
  border: 1px solid rgba(60, 141, 188, 0.22);
  border-radius: 999px;
}
.stat-chip-green{
  color: #146b41;
  background: rgba(0, 166, 90, 0.12);
  border-color: rgba(0, 166, 90, 0.24);
}
.stat-chip-red{
  color: #a13c30;
  background: rgba(221, 75, 57, 0.12);
  border-color: rgba(221, 75, 57, 0.24);
}
.stat-chip-amber{
  color: #8a5a00;
  background: rgba(243, 156, 18, 0.14);
  border-color: rgba(243, 156, 18, 0.28);
}
a.stat-chip:hover{ text-decoration: none; filter: brightness(0.95); }

/* Per-voter login email state (Voters list) */
.email-tag{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  margin-top: 3px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
}
.email-tag-bad{ color: #a13c30; background: rgba(221, 75, 57, 0.12); }
.email-tag-sent{ color: #146b41; background: rgba(0, 166, 90, 0.12); }

.voter-cell{
  display: flex;
  align-items: center;
  gap: 12px;
}
.voter-check, .voter-check-all{ width: 16px; height: 16px; margin: 0; cursor: pointer; flex-shrink: 0; accent-color: #2a7bb8; vertical-align: middle; }
.voter-check-all{ margin-right: 6px; }
.avatar-wrap{
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
}
.avatar-sm{
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px rgba(60, 141, 188, 0.25);
}
.avatar-edit{
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--glass-primary);
  color: #fff !important;
  font-size: 9px;
  box-shadow: 0 0 0 2px #fff;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.avatar-wrap:hover .avatar-edit{
  opacity: 1;
  transform: scale(1);
}

.voter-meta{
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.voter-fullname{
  font-weight: 600;
  color: #1f3d52;
}
.voter-email{
  font-size: 12px;
  color: #6a808e;
}
.voter-email i{ margin-right: 3px; }

.id-badge{
  display: inline-block;
  padding: 3px 10px;
  font-family: "Courier New", monospace;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #2c3b41;
  background: rgba(140, 170, 190, 0.16);
  border: 1px solid rgba(140, 170, 190, 0.3);
  border-radius: var(--radius-xs);
}

.voted-badge,
.not-voted-badge{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 999px;
  white-space: nowrap;
}
.voted-badge{
  color: #146b41;
  background: rgba(0, 166, 90, 0.14);
  border: 1px solid rgba(0, 166, 90, 0.28);
}
.not-voted-badge{
  color: #7c92a0;
  background: rgba(140, 170, 190, 0.14);
  border: 1px solid rgba(140, 170, 190, 0.28);
}

.row-actions{
  display: inline-flex;
  gap: 6px;
}
.btn-icon{
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  border: 1px solid transparent;
  background: rgba(140, 170, 190, 0.14);
  color: #4a606f;
  cursor: pointer;
  transition: transform 0.15s var(--ease-glass), box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.btn-icon:hover{ transform: translateY(-1px); box-shadow: var(--glass-shadow-sm); }
.btn-icon-success{ color: #00934f; }
.btn-icon-success:hover{ background: rgba(0, 166, 90, 0.16); color: #00934f; }
.btn-icon-danger{ color: #c53c2b; }
.btn-icon-danger:hover{ background: rgba(221, 75, 57, 0.16); color: #c53c2b; }
.btn-icon-info{ color: #2a7bb8; }
.btn-icon-info:hover{ background: rgba(60, 141, 188, 0.16); color: #2a7bb8; }

@media (max-width: 767px){
  .voter-email{ display: none; }
}

/* ---------------------------------------------------------------------- */
/* Votes table: position pill, empty state                                 */
/* ---------------------------------------------------------------------- */

.position-badge{
  display: inline-block;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--glass-primary-dark);
  background: rgba(60, 141, 188, 0.10);
  border: 1px solid rgba(60, 141, 188, 0.22);
  border-radius: 999px;
  white-space: nowrap;
}

table.dataTable tbody td.dataTables_empty{
  padding: 56px 20px !important;
  color: #6a808e;
  font-weight: 600;
  font-size: 14px;
}
table.dataTable tbody td.dataTables_empty::before{
  content: "\f01c";
  font-family: FontAwesome;
  display: block;
  font-size: 30px;
  margin-bottom: 10px;
  color: rgba(60, 141, 188, 0.32);
}

/* ---------------------------------------------------------------------- */
/* Positions table: order badge, position icon cell, vote chip             */
/* ---------------------------------------------------------------------- */

.position-order{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(60, 141, 188, 0.12);
  border: 1px solid rgba(60, 141, 188, 0.22);
  color: var(--glass-primary-dark);
  font-weight: 700;
  font-size: 12px;
}

.position-cell{
  display: flex;
  align-items: center;
  gap: 12px;
}
.position-cell-icon{
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(74, 155, 207, 0.22), rgba(54, 127, 169, 0.12));
  color: var(--glass-primary-dark);
  font-size: 15px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
.position-cell-name{
  font-weight: 600;
  color: #1f3d52;
  font-size: 14.5px;
}

.vote-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #93650b;
  background: rgba(243, 156, 18, 0.12);
  border: 1px solid rgba(243, 156, 18, 0.24);
  border-radius: 999px;
  white-space: nowrap;
}

@media (max-width: 480px){
  .position-order-col{ display: none; }
}

/* ---------------------------------------------------------------------- */
/* Forms                                                                   */
/* ---------------------------------------------------------------------- */

.form-control{
  background: rgba(255,255,255,0.55) !important;
  border: 1px solid rgba(140, 170, 190, 0.4) !important;
  border-radius: var(--radius-xs) !important;
  box-shadow: inset 0 1px 2px rgba(31,61,82,0.06) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.form-control:focus{
  background: rgba(255,255,255,0.85) !important;
  border-color: var(--glass-primary) !important;
  box-shadow: 0 0 0 3px rgba(60, 141, 188, 0.18) !important;
}
.form-control::placeholder{ color: #7c92a0; }

.has-feedback .form-control-feedback{ color: #7c92a0; }

.input-group-addon{
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(140, 170, 190, 0.4);
  border-radius: var(--radius-xs);
}

label{ color: #2c3b41; font-weight: 600; }

/* iCheck flat radios/checkboxes: keep widget behavior, just soften edges */
.icheckbox_flat-green, .iradio_flat-green,
.icheckbox_flat-red, .iradio_flat-red{
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.06));
}

/* ---------------------------------------------------------------------- */
/* Tables / DataTables                                                     */
/* ---------------------------------------------------------------------- */

.table{
  background: transparent;
}
.table > thead > tr > th{
  border-bottom: 2px solid rgba(60, 141, 188, 0.3);
  color: #1f3d52;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.5px;
}
.table-bordered{
  border: 1px solid rgba(60, 141, 188, 0.15);
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td{
  border: 1px solid rgba(60, 141, 188, 0.12);
}
.table > tbody > tr:hover{
  background: rgba(60, 141, 188, 0.08);
}
.table-striped > tbody > tr:nth-of-type(odd){
  background: rgba(255,255,255,0.25);
}

div.dataTables_wrapper div.dataTables_filter input,
div.dataTables_wrapper div.dataTables_length select{
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(140, 170, 190, 0.4);
  border-radius: var(--radius-xs);
}
.paginate_button.current, .paginate_button.current:hover{
  background: linear-gradient(135deg, var(--glass-primary), var(--glass-primary-dark)) !important;
  border-color: transparent !important;
  color: #fff !important;
  border-radius: var(--radius-xs);
}
.paginate_button{ border-radius: var(--radius-xs) !important; }

/* ---------------------------------------------------------------------- */
/* Alerts / callouts                                                       */
/* ---------------------------------------------------------------------- */

.alert{
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  backdrop-filter: var(--glass-blur-sm);
  box-shadow: var(--glass-shadow-sm);
}
.alert-danger{ background: rgba(221, 75, 57, 0.14); border-color: rgba(221, 75, 57, 0.3); color: #9c2f22; }
.alert-success{ background: rgba(0, 166, 90, 0.14); border-color: rgba(0, 166, 90, 0.3); color: #146b41; }
.alert-warning{ background: rgba(243, 156, 18, 0.16); border-color: rgba(243, 156, 18, 0.32); color: #93650b; }
.alert-info{ background: rgba(0, 192, 239, 0.14); border-color: rgba(0, 192, 239, 0.3); color: #147089; }

.callout{
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  backdrop-filter: var(--glass-blur-sm);
  border-radius: var(--radius-sm);
  box-shadow: var(--glass-shadow-sm);
}
.callout-danger{ border-color: #dd4b39; }
.callout-success{ border-color: #00a65a; }

/* ---------------------------------------------------------------------- */
/* Modals                                                                   */
/* ---------------------------------------------------------------------- */

.modal-backdrop{ background-color: #16232b; }
.modal-content{
  background: var(--glass-bg-strong) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--glass-shadow-lg);
  overflow: hidden;
}
.modal-header{
  border-bottom: 1px solid rgba(60, 141, 188, 0.18);
}
.modal-footer{
  border-top: 1px solid rgba(60, 141, 188, 0.18);
}

/* ---------------------------------------------------------------------- */
/* "Your Votes" review modal                                               */
/* ---------------------------------------------------------------------- */

.vote-review-header{
  text-align: center;
  padding: 26px 24px 18px !important;
}
.vote-review-icon{
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 22px;
  color: #fff;
  background: linear-gradient(135deg, #4a9bcf 0%, var(--glass-primary) 55%, var(--glass-primary-dark) 100%);
  box-shadow: 0 8px 20px rgba(60, 141, 188, 0.35), inset 0 1px 0 rgba(255,255,255,0.35);
}
.vote-review-header .modal-title{
  font-weight: 700;
  color: #1f3d52;
}
.vote-review-sub{
  margin: 4px 0 0;
  font-size: 12.5px;
  color: #5c7183;
}

.vote-review-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vote-review-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.32);
  border: 1px solid rgba(140, 170, 190, 0.22);
  transition: transform 0.15s var(--ease-glass), box-shadow 0.15s ease;
}
.vote-review-row:hover{
  transform: translateY(-2px);
  box-shadow: var(--glass-shadow-sm);
}
.vote-review-candidate{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.vote-review-avatar{
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.6);
}
.vote-review-name{
  font-weight: 700;
  color: #1f3d52;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 480px){
  .vote-review-row{ justify-content: flex-start; }
}

/* ---------------------------------------------------------------------- */
/* Breadcrumbs / content header                                            */
/* ---------------------------------------------------------------------- */

.content-header h1{
  color: #1f3d52;
  font-weight: 700;
}
.content-header h1 small{ color: #5c7183; }

.breadcrumb{
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  backdrop-filter: var(--glass-blur-sm);
  border-radius: var(--radius-xs);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-sm);
}
.breadcrumb > li + li::before{ color: #7c92a0; }
.breadcrumb a{ color: var(--glass-primary-dark); }

/* ---------------------------------------------------------------------- */
/* Footer                                                                   */
/* ---------------------------------------------------------------------- */

.main-footer{
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: var(--glass-blur-sm);
  backdrop-filter: var(--glass-blur-sm);
  border-top: 1px solid var(--glass-border);
  box-shadow: 0 -4px 16px rgba(24, 55, 78, 0.05);
  color: #4a606f;
  padding: 0;
}
.main-footer a{ color: var(--glass-primary-dark); font-weight: 600; }
.main-footer a:hover{ color: var(--glass-primary); }

.footer-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 20px;
}
.main-footer .container .footer-inner{ padding-left: 0; padding-right: 0; }
.footer-copyright{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #4a606f;
}
.footer-copyright i{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(60, 141, 188, 0.12);
  color: var(--glass-primary-dark);
  font-size: 13px;
}
.footer-tagline{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #7c92a0;
}
.footer-tagline i{ font-size: 12px; opacity: 0.8; }

@media (max-width: 480px){
  .footer-inner{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 14px 16px;
  }
}

/* ---------------------------------------------------------------------- */
/* Misc: page header title on voter home, candidate list cards             */
/* ---------------------------------------------------------------------- */

.page-header.title{
  border-bottom: none;
  color: #1f3d52;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

#candidate_list ul li{
  background: rgba(255,255,255,0.35);
  border-radius: var(--radius-sm);
  padding: 14px;
  box-shadow: var(--glass-shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#candidate_list ul li:hover{
  transform: translateY(-2px);
  box-shadow: var(--glass-shadow-md);
}

#candidate_list ul li img{
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.6), var(--glass-shadow-sm);
}

/* ---------------------------------------------------------------------- */
/* DataTables controls                                                     */
/* ---------------------------------------------------------------------- */

div.dataTables_wrapper{
  padding-top: 4px;
}
div.dataTables_wrapper div.dataTables_length,
div.dataTables_wrapper div.dataTables_filter,
div.dataTables_wrapper div.dataTables_info,
div.dataTables_wrapper div.dataTables_paginate{
  margin-bottom: 10px;
}
div.dataTables_wrapper div.dataTables_filter input,
div.dataTables_wrapper div.dataTables_length select{
  padding: 5px 10px;
  color: #2c3b41;
  box-shadow: inset 0 1px 2px rgba(31,61,82,0.06);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
div.dataTables_wrapper div.dataTables_filter input:focus,
div.dataTables_wrapper div.dataTables_length select:focus{
  outline: none;
  border-color: var(--glass-primary);
  box-shadow: 0 0 0 3px rgba(60, 141, 188, 0.18);
}
div.dataTables_wrapper div.dataTables_info{
  color: #5c7183;
  font-size: 12.5px;
}
.paginate_button{
  color: #2c3b41 !important;
  margin-left: 2px;
}
.paginate_button:hover{
  background: rgba(60, 141, 188, 0.12) !important;
  border-color: transparent !important;
  color: var(--glass-primary-dark) !important;
}
.paginate_button.disabled,
.paginate_button.disabled:hover{
  color: #a9b8c2 !important;
  background: transparent !important;
}

.table-responsive{
  border: none;
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------- */
/* Table thumbnails / row tools                                            */
/* ---------------------------------------------------------------------- */

.table td img{
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px rgba(60, 141, 188, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.table td img:hover{
  transform: scale(1.15);
  box-shadow: 0 0 0 2px var(--glass-primary);
}
.table td a.photo{
  color: var(--glass-primary-dark);
  margin-left: 6px;
}
.table td a.photo:hover{ color: var(--glass-primary); }

.table td .btn + .btn{ margin-left: 4px; }

/* ---------------------------------------------------------------------- */
/* Forms (horizontal) / box-tools                                          */
/* ---------------------------------------------------------------------- */

.form-horizontal .control-label{
  text-align: right;
}
@media (max-width: 767px){
  .form-horizontal .control-label{
    text-align: left;
    margin-bottom: 2px;
  }
}

.box-header .box-tools .btn,
.box-header .btn-sm{
  border-radius: var(--radius-xs) !important;
}
.box-tools .btn-default{
  background: rgba(255,255,255,0.55) !important;
  border: 1px solid rgba(140, 170, 190, 0.4) !important;
}
.box-tools .btn-default:disabled,
.box-tools .btn-default[disabled]{
  opacity: 0.4;
}

/* ---------------------------------------------------------------------- */
/* Voter portal: title, countdown, ballot candidate cards                  */
/* ---------------------------------------------------------------------- */

.layout-top-nav .content-wrapper{
  padding-top: 10px;
}

#countdown{
  --cd-accent: var(--glass-primary-dark);
  --cd-accent-rgb: 54, 127, 169;
  text-align: center;
  color: var(--cd-accent);
  margin: 4px 0 24px;
  padding: 12px 18px 14px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--glass-shadow-sm);
  display: inline-block;
  animation: glass-rise 0.5s var(--ease-glass) both;
  transition: color 0.4s ease, box-shadow 0.4s ease;
}
#countdown.is-urgent{
  --cd-accent: #d9534f;
  --cd-accent-rgb: 217, 83, 79;
  box-shadow: 0 0 0 1px rgba(217, 83, 79, 0.25), 0 6px 22px rgba(217, 83, 79, 0.18);
}
#countdown.is-ended{
  --cd-accent: #7c92a0;
  --cd-accent-rgb: 124, 146, 160;
}
.countdown-label{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 8px;
}
.countdown-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00a65a;
  box-shadow: 0 0 0 0 rgba(0, 166, 90, 0.6);
  animation: cd-live 1.8s ease-out infinite;
}
#countdown.is-urgent .countdown-dot{
  background: #d9534f;
  animation-duration: 1s;
  animation-name: cd-live-urgent;
}
#countdown.is-ended .countdown-dot{
  background: #9aabb7;
  animation: none;
}
.countdown-units{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
}
.cd-unit{
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 58px;
}
.cd-num{
  display: block;
  width: 100%;
  padding: 8px 6px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--cd-accent);
  background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.55) 100%);
  border: 1px solid rgba(var(--cd-accent-rgb), 0.18);
  border-radius: var(--radius-xs);
  box-shadow: 0 4px 12px rgba(var(--cd-accent-rgb), 0.12), inset 0 1px 0 rgba(255,255,255,0.9);
  transition: color 0.4s ease, border-color 0.4s ease;
}
.cd-num.tick{
  animation: cd-tick 0.45s var(--ease-glass);
}
.cd-lbl{
  margin-top: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #7c92a0;
}
.cd-sep{
  font-size: 22px;
  font-weight: 800;
  line-height: 40px;
  color: rgba(var(--cd-accent-rgb), 0.5);
  animation: cd-blink 1s steps(1) infinite;
}
#countdown.is-ended .cd-sep{ animation: none; }

@keyframes cd-tick{
  0%  { transform: translateY(-6px) scale(1.06); opacity: 0.35; }
  60% { transform: translateY(1px) scale(1); opacity: 1; }
  100%{ transform: translateY(0); }
}
@keyframes cd-live{
  0%  { box-shadow: 0 0 0 0 rgba(0, 166, 90, 0.55); }
  100%{ box-shadow: 0 0 0 9px rgba(0, 166, 90, 0); }
}
@keyframes cd-live-urgent{
  0%  { box-shadow: 0 0 0 0 rgba(217, 83, 79, 0.6); }
  100%{ box-shadow: 0 0 0 9px rgba(217, 83, 79, 0); }
}
@keyframes cd-blink{
  50%{ opacity: 0.25; }
}
.row > .col-sm-10.col-sm-offset-1{
  text-align: center;
}

/* Candidate selection cards (voter ballot + admin ballot preview) */
.candidate-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 0;
  margin: 0;
}

.candidate-card{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  width: calc(33.333% - 11px);
  box-sizing: border-box;
  margin: 0 !important;
  padding: 20px 16px 16px;
  background: rgba(255,255,255,0.4);
  border: 2px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--glass-shadow-sm);
  cursor: pointer;
  transition: transform 0.15s var(--ease-glass), box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.candidate-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--glass-shadow-md);
  border-color: rgba(60, 141, 188, 0.45);
}
.candidate-card-input{
  position: absolute;
  top: 12px;
  left: 12px;
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--glass-primary);
}
.candidate-card-check{
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #34c37a 0%, #00a65a 100%);
  color: #fff;
  font-size: 12px;
  box-shadow: 0 4px 10px rgba(0, 166, 90, 0.4);
}
.candidate-card:has(.candidate-card-input:checked){
  background: rgba(60, 141, 188, 0.14);
  border-color: var(--glass-primary);
  box-shadow: 0 0 0 3px rgba(60, 141, 188, 0.18), var(--glass-shadow-md);
}
.candidate-card:has(.candidate-card-input:checked) .candidate-card-check{
  display: flex;
}
.candidate-card-photo{
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.7), var(--glass-shadow-sm);
}
.candidate-card-name{
  font-size: 16px;
  font-weight: 700;
  color: #1f3d52;
}
.candidate-card-program{
  font-size: 12.5px;
  font-weight: 600;
  color: var(--glass-primary-dark);
  background: rgba(60, 141, 188, 0.1);
  padding: 2px 10px;
  border-radius: 999px;
}
.candidate-card-manifesto{
  margin-top: 4px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--glass-primary-dark);
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(140, 170, 190, 0.4);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.candidate-card-manifesto:hover{
  background: var(--glass-primary);
  color: #fff;
  border-color: var(--glass-primary);
}

/* Step-by-step ballot wizard */

/* Stepper: one numbered dot per position, connected by a line */
.ballot-stepper{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
  margin: 0 0 14px;
  padding: 14px 12px 10px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--glass-shadow-sm);
  overflow-x: auto;
  animation: glass-rise 0.5s var(--ease-glass) both;
}
.ballot-stepper-item{
  position: relative;
  flex: 1 1 0;
  min-width: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: #7a8b97;
}
/* connector line to the next dot */
.ballot-stepper-item:not(:last-child)::after{
  content: "";
  position: absolute;
  top: 17px;
  left: calc(50% + 22px);
  right: calc(-50% + 22px);
  height: 3px;
  border-radius: 3px;
  background: rgba(60, 141, 188, 0.15);
  transition: background 0.4s ease;
}
.ballot-stepper-item.is-done:not(:last-child)::after{
  background: linear-gradient(90deg, var(--pos-accent), #00a65a);
}
.ballot-stepper-dot{
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  background: #fff;
  color: #7a8b97;
  border: 2px solid rgba(140, 170, 190, 0.45);
  transition: transform 0.3s var(--ease-glass), background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.ballot-stepper-dot .fa-check{ display: none; }
.ballot-stepper-label{
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.3s ease;
}
.ballot-stepper-item:hover .ballot-stepper-dot{ transform: translateY(-2px); }
.ballot-stepper-item.is-done .ballot-stepper-dot{
  background: #00a65a;
  border-color: #00a65a;
  color: #fff;
}
.ballot-stepper-item.is-done .ballot-stepper-dot .num{ display: none; }
.ballot-stepper-item.is-done .ballot-stepper-dot .fa-check{ display: inline; animation: pop-in 0.35s var(--ease-glass); }
.ballot-stepper-item.is-done .ballot-stepper-label{ color: #00733e; }
.ballot-stepper-item.is-active .ballot-stepper-dot{
  background: var(--pos-accent);
  border-color: var(--pos-accent);
  color: #fff;
  transform: scale(1.15);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--pos-accent) 22%, transparent);
  animation: pulse-ring 2s ease-out infinite;
}
.ballot-stepper-item.is-active .ballot-stepper-label{ color: var(--pos-accent); }

/* Thin overall progress bar */
.ballot-progress{
  margin: 0 0 18px;
  text-align: left;
}
.ballot-progress-label{
  font-size: 12.5px;
  font-weight: 700;
  color: #5c7183;
  margin-top: 6px;
  text-align: right;
}
.ballot-progress-bar{
  height: 6px;
  border-radius: 999px;
  background: rgba(60, 141, 188, 0.15);
  overflow: hidden;
}
.ballot-progress-fill{
  position: relative;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--glass-primary) 0%, #00a65a 100%);
  transition: width 0.5s var(--ease-glass);
  overflow: hidden;
}
.ballot-progress-fill::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: shimmer 2.2s infinite;
}

/* Position card with its own coloured hero banner */
.position-box{
  overflow: hidden;
  border-top: 0 !important;
}
.position-box::before{ display: none; }
.position-hero{
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 26px;
  color: #fff;
  text-align: left;
  background: linear-gradient(120deg, var(--pos-accent) 0%, var(--pos-accent-dark) 100%);
  overflow: hidden;
}
/* soft diagonal pattern */
.position-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 14px);
  pointer-events: none;
}
/* light sweep across the banner */
.position-hero::after{
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 40%;
  left: -50%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.22), transparent);
  animation: hero-sweep 4.5s ease-in-out infinite;
  pointer-events: none;
}
.position-hero-orb{
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  pointer-events: none;
}
.position-hero-orb.orb-1{ width: 180px; height: 180px; right: -40px; top: -70px; animation: float 7s ease-in-out infinite; }
.position-hero-orb.orb-2{ width: 90px; height: 90px; right: 120px; bottom: -40px; animation: float 5s ease-in-out infinite reverse; }
.position-hero-icon{
  position: relative;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: var(--pos-accent-dark);
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
  animation: icon-bob 3s ease-in-out infinite;
}
.position-hero-text{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.position-hero-eyebrow{
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  opacity: 0.85;
}
.position-hero-title{
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.3px;
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.18);
}
.position-hero-tagline{
  font-size: 14px;
  font-weight: 600;
  opacity: 0.92;
}

/* Toolbar under the banner */
.position-toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 16px;
}
.position-instruct{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--pos-accent-dark);
  background: color-mix(in srgb, var(--pos-accent) 12%, transparent);
  border-radius: 999px;
}
.position-reset{
  font-weight: 700;
  color: var(--pos-accent-dark) !important;
  background: #fff !important;
  border: 1px solid color-mix(in srgb, var(--pos-accent) 40%, transparent) !important;
  border-radius: 999px !important;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.position-reset:hover{
  background: var(--pos-accent) !important;
  color: #fff !important;
}
.position-reset:hover .fa-refresh{ animation: spin 0.6s linear; }

/* Candidate cards inside a position take on its accent colour */
.position-box .candidate-card{
  animation: card-in 0.5s var(--ease-glass) both;
  animation-delay: calc(var(--i, 0) * 90ms + 120ms);
}
.position-box .candidate-card:hover{
  border-color: color-mix(in srgb, var(--pos-accent) 50%, transparent);
}
.position-box .candidate-card-input{ accent-color: var(--pos-accent); }
.position-box .candidate-card:has(.candidate-card-input:checked){
  background: color-mix(in srgb, var(--pos-accent) 10%, rgba(255,255,255,0.6));
  border-color: var(--pos-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--pos-accent) 20%, transparent), var(--glass-shadow-md);
}
.candidate-card-photo-wrap{
  position: relative;
  display: inline-block;
  border-radius: 50%;
  padding: 4px;
  background: conic-gradient(from 0deg, rgba(140,170,190,0.35), rgba(140,170,190,0.35));
  transition: transform 0.3s var(--ease-glass);
}
.candidate-card:hover .candidate-card-photo-wrap{ transform: scale(1.05); }
.position-box .candidate-card:has(.candidate-card-input:checked) .candidate-card-photo-wrap{
  background: conic-gradient(from 0deg, var(--pos-accent), #00a65a, var(--pos-accent));
  animation: spin-ring 3s linear infinite;
}
.position-box .candidate-card:has(.candidate-card-input:checked) .candidate-card-photo{
  animation: spin-ring 3s linear infinite reverse; /* keep the photo upright */
}
.position-box .candidate-card:has(.candidate-card-input:checked) .candidate-card-name{
  color: var(--pos-accent-dark);
}
.candidate-card.pop{ animation: card-pop 0.4s var(--ease-glass); }
.candidate-card.pop .candidate-card-check{ animation: pop-in 0.4s var(--ease-glass); }

/* Step transitions */
.ballot-step.step-enter-next{ animation: step-in-right 0.45s var(--ease-glass) both; }
.ballot-step.step-enter-prev{ animation: step-in-left 0.45s var(--ease-glass) both; }
.shake{ animation: shake 0.5s ease both; }

/* Navigation buttons */
.ballot-nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 8px 0 28px;
}
.ballot-btn{
  min-width: 140px;
  padding: 10px 22px;
  font-weight: 800;
  font-size: 15px;
  border: 0 !important;
  border-radius: 999px !important;
  transition: transform 0.2s var(--ease-glass), box-shadow 0.2s ease, background 0.2s ease;
}
.ballot-btn:hover{ transform: translateY(-2px); }
.ballot-btn:active{ transform: translateY(0) scale(0.98); }
.ballot-btn-back{
  color: #3a5568 !important;
  background: rgba(255,255,255,0.75) !important;
  box-shadow: var(--glass-shadow-sm);
}
.ballot-btn-next{
  color: #fff !important;
  background: linear-gradient(135deg, var(--glass-primary) 0%, var(--glass-primary-darker) 100%) !important;
  box-shadow: 0 8px 20px rgba(60, 141, 188, 0.35);
}
.ballot-btn-next .fa-arrow-right{ transition: transform 0.2s ease; }
.ballot-btn-next:hover .fa-arrow-right{ transform: translateX(4px); }
.ballot-btn-submit{
  color: #fff !important;
  background: linear-gradient(135deg, #34c37a 0%, #00a65a 100%) !important;
  box-shadow: 0 8px 22px rgba(0, 166, 90, 0.4);
  animation: glow 2s ease-in-out infinite;
}
.ballot-btn-submit.is-loading{ pointer-events: none; opacity: 0.85; animation: none; }

/* Review page */
.ballot-review{
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.ballot-review-row{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.55);
  border: 1px solid var(--glass-border);
  border-left: 5px solid var(--pos-accent);
  border-radius: var(--radius-sm);
  animation: card-in 0.45s var(--ease-glass) both;
  animation-delay: calc(var(--i, 0) * 80ms + 100ms);
}
.ballot-review-position{
  flex: 0 0 210px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: #1f3d52;
}
.ballot-review-icon{
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--pos-accent);
  flex: 0 0 auto;
}
.ballot-review-picks{
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ballot-review-pick{
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  padding: 3px 12px 3px 3px;
  background: #fff;
  border-radius: 999px;
  box-shadow: var(--glass-shadow-sm);
}
.ballot-review-pick img{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}
.ballot-review-none{
  color: #7a8b97;
  font-style: italic;
}
.ballot-review-edit{
  font-weight: 700;
  color: var(--pos-accent) !important;
  background: transparent !important;
  border: 1px solid currentColor !important;
  border-radius: 999px !important;
  padding: 3px 12px;
}
.ballot-review-edit:hover{ background: var(--pos-accent) !important; color: #fff !important; }
.ballot-review-edit:hover i{ color: #fff; }

/* Keyframes */
@keyframes step-in-right{ from{ opacity: 0; transform: translateX(40px); } to{ opacity: 1; transform: none; } }
@keyframes step-in-left{ from{ opacity: 0; transform: translateX(-40px); } to{ opacity: 1; transform: none; } }
@keyframes card-in{ from{ opacity: 0; transform: translateY(18px) scale(0.97); } to{ opacity: 1; transform: none; } }
@keyframes card-pop{ 0%{ transform: scale(1); } 40%{ transform: scale(1.04); } 100%{ transform: scale(1); } }
@keyframes pop-in{ 0%{ transform: scale(0); } 70%{ transform: scale(1.25); } 100%{ transform: scale(1); } }
@keyframes shake{ 10%,90%{ transform: translateX(-2px); } 20%,80%{ transform: translateX(4px); } 30%,50%,70%{ transform: translateX(-7px); } 40%,60%{ transform: translateX(7px); } }
@keyframes shimmer{ from{ transform: translateX(-100%); } to{ transform: translateX(100%); } }
@keyframes hero-sweep{ 0%{ left: -50%; } 60%,100%{ left: 130%; } }
@keyframes float{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(12px); } }
@keyframes icon-bob{ 0%,100%{ transform: translateY(0) rotate(0); } 50%{ transform: translateY(-4px) rotate(-4deg); } }
@keyframes spin{ to{ transform: rotate(360deg); } }
@keyframes spin-ring{ to{ transform: rotate(360deg); } }
@keyframes pulse-ring{
  0%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--pos-accent) 45%, transparent); }
  70%{ box-shadow: 0 0 0 10px transparent; }
  100%{ box-shadow: 0 0 0 0 transparent; }
}
@keyframes glow{
  0%,100%{ box-shadow: 0 8px 22px rgba(0, 166, 90, 0.35); }
  50%{ box-shadow: 0 8px 30px rgba(0, 166, 90, 0.65); }
}

@media (max-width: 767px){
  .position-hero{ padding: 18px; gap: 14px; }
  .position-hero-icon{ width: 52px; height: 52px; font-size: 24px; border-radius: 14px; }
  .position-hero-title{ font-size: 23px; }
  .position-hero-tagline{ font-size: 12.5px; }
  .ballot-stepper-label{ display: none; }
  .ballot-stepper-item{ min-width: 40px; }
}
@media (max-width: 600px){
  .position-toolbar{ flex-wrap: wrap; }
  .ballot-review-row{ flex-wrap: wrap; }
  .ballot-review-position{ flex-basis: 100%; }
  .ballot-nav .btn{ min-width: 0; flex: 1; }
}
@media (prefers-reduced-motion: reduce){
  .ballot-step, .candidate-card, .ballot-review-row, .position-hero::after, .position-hero-orb,
  .position-hero-icon, .ballot-progress-fill::after, .ballot-btn-submit, .ballot-stepper-dot,
  .candidate-card-photo-wrap, .candidate-card-photo{ animation: none !important; }
}

@media (max-width: 991px){
  .candidate-card{ width: calc(50% - 8px); }
}
@media (max-width: 600px){
  .candidate-card{ width: 100%; }
}

/* ---------------------------------------------------------------------- */
/* Voter portal: "already voted" card                                     */
/* ---------------------------------------------------------------------- */

.voted-card{
  max-width: 560px;
  margin: 0 auto 28px;
  animation: glass-rise 0.4s var(--ease-glass);
}
.voted-card .box-body{
  padding: 34px 24px;
}
.voted-icon{
  width: 60px;
  height: 60px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 28px;
  color: #fff;
  background: linear-gradient(135deg, #34c37a 0%, #00a65a 100%);
  box-shadow: 0 10px 24px rgba(0, 166, 90, 0.35), inset 0 1px 0 rgba(255,255,255,0.35);
}
.voted-card h3{
  margin: 0 0 6px;
  color: #1f3d52;
  font-weight: 700;
}
.voted-sub{
  color: #5c7183;
  font-size: 13.5px;
  margin: 0 0 18px;
}

.voted-icon-missed{
  background: linear-gradient(135deg, #ffb347 0%, #f39c12 55%, #dd8b0a 100%);
  box-shadow: 0 10px 24px rgba(243, 156, 18, 0.35), inset 0 1px 0 rgba(255,255,255,0.35);
}

/* Voted card animations: shimmer top edge, icon pop + ripple, drawn check, staggered text */
.voted-card{
  position: relative;
  overflow: hidden;
}
.voted-card::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, #34c37a 30%, #4a9bcf 50%, #34c37a 70%, transparent 100%);
  background-size: 200% 100%;
  animation: voted-shimmer 3.5s linear infinite;
}
.voted-card-missed::before{
  background-image: linear-gradient(90deg, transparent 0%, #ffb347 30%, #f39c12 50%, #ffb347 70%, transparent 100%);
}
.voted-icon{
  position: relative;
  animation: voted-pop 0.6s 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.voted-icon::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(0, 166, 90, 0.45);
  animation: voted-ripple 2.4s 0.7s ease-out infinite;
}
.voted-icon-missed::after{ border-color: rgba(243, 156, 18, 0.45); }
.voted-check{
  width: 34px;
  height: 34px;
}
.voted-check path{
  fill: none;
  stroke: #fff;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: voted-draw 0.45s 0.6s ease-out forwards;
}
.voted-card h3,
.voted-card .voted-sub,
.voted-card .voted-badge,
.voted-card .btn{
  animation: glass-rise 0.5s var(--ease-glass) both;
}
.voted-card h3{ animation-delay: 0.35s; }
.voted-card .voted-sub{ animation-delay: 0.45s; }
.voted-card .voted-badge{ animation-delay: 0.55s; }
.voted-card .btn{ animation-delay: 0.65s; }

.voted-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 20px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #1e8a54;
  background: rgba(0, 166, 90, 0.1);
  border: 1px solid rgba(0, 166, 90, 0.22);
  border-radius: 999px;
}
.voted-card .btn{
  border-radius: var(--radius-sm) !important;
  padding-left: 22px;
  padding-right: 22px;
  transition: transform 0.2s var(--ease-glass), box-shadow 0.2s ease;
}
.voted-card .btn:hover,
.voted-card .btn:focus{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(54, 127, 169, 0.32);
}
.voted-card .btn:active{ transform: translateY(0); }

@keyframes voted-shimmer{
  from{ background-position: 200% 0; }
  to  { background-position: -200% 0; }
}
@keyframes voted-pop{
  0%  { opacity: 0; transform: scale(0.3) rotate(-20deg); }
  100%{ opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes voted-ripple{
  0%  { transform: scale(1); opacity: 0.9; }
  70% { transform: scale(1.7); opacity: 0; }
  100%{ transform: scale(1.7); opacity: 0; }
}
@keyframes voted-draw{
  to{ stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce){
  #countdown, .cd-num.tick, .cd-sep, .countdown-dot,
  .voted-card, .voted-card::before, .voted-icon, .voted-icon::after,
  .voted-card h3, .voted-card .voted-sub, .voted-card .voted-badge, .voted-card .btn{
    animation: none !important;
  }
  .voted-check path{ animation: none; stroke-dashoffset: 0; }
}

/* ---------------------------------------------------------------------- */
/* Voter portal: results leaderboard (winner / not elected)                */
/* ---------------------------------------------------------------------- */

.results-intro{
  text-align: center;
  margin: 10px 0 22px;
  animation: glass-rise 0.6s 0.5s var(--ease-glass) both;
}
.results-heading{
  justify-content: center;
  text-align: center;
  gap: 12px;
  margin: 0 0 6px;
  font-size: 28px;
}
.results-heading-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-size: 20px;
  background: linear-gradient(135deg, #5aa4d6 0%, #2f78a8 100%);
  box-shadow: 0 8px 18px rgba(47, 120, 168, 0.3), inset 0 1px 0 rgba(255,255,255,0.35);
  animation: results-icon-bob 3.2s ease-in-out infinite;
}
.results-heading .results-heading-icon i{ color: #fff; }
.results-subtitle{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #5c7183;
  background: rgba(255,255,255,0.45);
  border: 1px solid rgba(140, 170, 190, 0.25);
  border-radius: 999px;
}
.results-live-dot{
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00a65a;
}
.results-live-dot::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #00a65a;
  animation: results-dot-ping 1.8s ease-out infinite;
}

.results-empty{
  color: #5c7183;
  font-weight: 600;
  font-size: 13.5px;
  text-align: center;
  margin: 4px 0;
}
.results-empty i{ color: var(--glass-primary-dark); margin-right: 4px; }

/* Position card */
.result-position{
  position: relative;
  overflow: hidden;
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md) !important;
  box-shadow: var(--glass-shadow-md);
  padding: 22px 24px !important;
  margin: 0 auto 22px !important;
  max-width: 780px;
  transition: opacity 0.7s var(--ease-glass), transform 0.7s var(--ease-glass), box-shadow 0.3s ease;
}
.result-position::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #5aa4d6, #34c37a);
  transform-origin: left;
  transition: transform 0.9s 0.2s var(--ease-glass);
}
.result-position:hover{
  box-shadow: 0 18px 40px rgba(31, 61, 82, 0.14);
}
.result-position-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}
.result-position h2{
  position: relative;
  color: #1f3d52 !important;
  font-size: 20px !important;
  font-weight: 700;
  text-align: left;
  margin: 0 !important;
  padding-left: 12px;
}
.result-position h2::before{
  content: "";
  position: absolute;
  left: 0; top: 15%; bottom: 15%;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, #5aa4d6, #2f78a8);
}
.result-total{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 600;
  color: #2f6f99;
  background: rgba(60, 141, 188, 0.1);
  border: 1px solid rgba(60, 141, 188, 0.2);
  border-radius: 999px;
}
.result-total b{ font-variant-numeric: tabular-nums; }

.result-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Candidate row */
.result-row{
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.4);
  border: 1px solid rgba(140, 170, 190, 0.22);
  transition: opacity 0.55s var(--ease-glass), transform 0.55s var(--ease-glass),
              box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
  transition-delay: calc(0.15s + var(--i, 0) * 0.11s), calc(0.15s + var(--i, 0) * 0.11s), 0s, 0s, 0s;
}
.result-row:hover{
  background: rgba(255,255,255,0.65);
  border-color: rgba(60, 141, 188, 0.3);
  box-shadow: 0 8px 20px rgba(31, 61, 82, 0.08);
}
.result-row-winner{
  overflow: hidden;
  background: linear-gradient(100deg, rgba(0, 166, 90, 0.13), rgba(52, 195, 122, 0.06));
  border-color: rgba(0, 166, 90, 0.32);
  box-shadow: 0 6px 18px rgba(0, 166, 90, 0.14);
}
.result-row-winner:hover{
  background: linear-gradient(100deg, rgba(0, 166, 90, 0.17), rgba(52, 195, 122, 0.09));
  border-color: rgba(0, 166, 90, 0.45);
  box-shadow: 0 10px 26px rgba(0, 166, 90, 0.2);
}
/* Light sweep across the winning row */
.result-row-winner::after{
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -40%;
  width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: results-sweep 5s 1.6s ease-in-out infinite;
}

.result-rank{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  color: #6b8494;
  background: rgba(140, 170, 190, 0.16);
}
.result-rank-1{ color: #7a5300; background: linear-gradient(135deg, #ffe08a, #f5b82e); box-shadow: 0 3px 8px rgba(245, 184, 46, 0.4); }
.result-rank-2{ color: #4c5a63; background: linear-gradient(135deg, #f1f4f6, #c5cfd6); }
.result-rank-3{ color: #6b3c14; background: linear-gradient(135deg, #f3c9a0, #d08a4c); }

.result-avatar-wrap{
  position: relative;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  padding: 2px;
  background: rgba(255,255,255,0.7);
}
.result-row-winner .result-avatar-wrap{
  background: conic-gradient(from 0deg, #34c37a, #f5b82e, #5aa4d6, #34c37a);
  animation: results-ring 4s linear infinite;
}
.result-avatar{
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  transition: transform 0.3s var(--ease-glass);
}
.result-row-winner .result-avatar{ animation: results-ring 4s linear infinite reverse; }
.result-row:hover .result-avatar{ transform: scale(1.06); }

.result-meta{
  display: flex;
  flex-direction: column;
  flex: 0 1 200px;
  min-width: 0;
  text-align: left;
}
.result-name{
  font-weight: 700;
  color: #1f3d52;
  font-size: 15px;
  line-height: 1.25;
}
.result-program{
  font-size: 12px;
  font-weight: 600;
  color: var(--glass-primary-dark);
  line-height: 1.3;
}

.result-bar-wrap{
  flex: 1 1 160px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.result-bar{
  height: 10px;
  border-radius: 999px;
  background: rgba(140, 170, 190, 0.18);
  box-shadow: inset 0 1px 2px rgba(31,61,82,0.08);
  overflow: hidden;
}
.result-bar-fill{
  position: relative;
  overflow: hidden;
  width: var(--pct, 0%);
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #9fb4c2, #7c92a0);
  transition: width 1.1s cubic-bezier(0.25, 1, 0.5, 1);
  transition-delay: calc(0.35s + var(--i, 0) * 0.11s);
}
.result-bar-fill.result-bar-winner{
  background: linear-gradient(90deg, #34c37a, #00a65a);
}
.result-bar-fill.result-bar-winner::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: translateX(-100%);
  animation: shimmer 2.2s 1.6s ease-in-out infinite;
}
.result-pct{
  font-size: 12px;
  font-weight: 600;
  color: #5c7183;
  text-align: left;
}
.result-pct b{ font-weight: 700; color: #1f3d52; font-variant-numeric: tabular-nums; }

.result-tag{
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  white-space: nowrap;
}
.result-tag-winner{
  color: #fff;
  background: linear-gradient(135deg, #34c37a, #00a65a);
  border: 1px solid rgba(0, 140, 76, 0.4);
  box-shadow: 0 6px 14px rgba(0, 166, 90, 0.3);
}
.result-tag-winner i{
  display: inline-block;
  color: #ffe08a;
  transform-origin: 50% 90%;
  animation: results-trophy 2.8s 2s ease-in-out infinite;
}
.result-tag-lost{
  color: #7c92a0;
  background: rgba(140, 170, 190, 0.14);
  border: 1px solid rgba(140, 170, 190, 0.28);
}

/* Entrance: only when JS has flagged that scroll-reveal will run */
.results-anim .result-position:not(.is-inview){
  opacity: 0;
  transform: translateY(28px);
}
.results-anim .result-position:not(.is-inview)::before{ transform: scaleX(0); }
.results-anim .result-position:not(.is-inview) .result-row{
  opacity: 0;
  transform: translateX(-18px);
}
.results-anim .result-position:not(.is-inview) .result-bar-fill{ width: 0; }
.results-anim .result-position:not(.is-inview) .result-tag{ opacity: 0; }
.results-anim .result-position.is-inview .result-tag-winner{
  animation: results-tag-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(1.3s + var(--i, 0) * 0.11s);
}
.results-anim .result-position.is-inview .result-tag-lost{
  animation: glass-rise 0.5s var(--ease-glass) both;
  animation-delay: calc(1.2s + var(--i, 0) * 0.11s);
}

@keyframes results-icon-bob{
  0%,100%{ transform: translateY(0) rotate(0); }
  50%    { transform: translateY(-4px) rotate(-5deg); }
}
@keyframes results-dot-ping{
  0%  { transform: scale(1); opacity: 0.7; }
  80%,100%{ transform: scale(2.6); opacity: 0; }
}
@keyframes results-sweep{
  0%     { left: -40%; }
  35%,100%{ left: 130%; }
}
@keyframes results-ring{
  to{ transform: rotate(360deg); }
}
@keyframes results-trophy{
  0%,70%,100%{ transform: rotate(0) scale(1); }
  76%{ transform: rotate(-14deg) scale(1.15); }
  84%{ transform: rotate(12deg) scale(1.15); }
  92%{ transform: rotate(-6deg) scale(1.05); }
}
@keyframes results-tag-pop{
  0%  { opacity: 0; transform: scale(0.4); }
  100%{ opacity: 1; transform: scale(1); }
}

/* Phones: two-line row — identity + tag on top, full-width bar below */
@media (max-width: 600px){
  .results-heading{ font-size: 23px; }
  .results-heading-icon{ width: 36px; height: 36px; font-size: 17px; border-radius: 10px; }
  .result-position{ padding: 18px 14px !important; }
  .result-position h2{ font-size: 18px !important; }
  .result-row{
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "rank avatar meta meta"
      "bar  bar    bar  tag";
    column-gap: 10px;
    row-gap: 10px;
    padding: 12px;
  }
  .result-rank{ grid-area: rank; width: 24px; height: 24px; font-size: 11px; }
  .result-avatar-wrap{ grid-area: avatar; width: 42px; height: 42px; }
  .result-meta{ grid-area: meta; }
  .result-name{ font-size: 14px; }
  .result-program{ font-size: 11px; }
  .result-tag{ grid-area: tag; align-self: center; margin-left: 0; padding: 5px 10px; font-size: 11px; }
  .result-bar-wrap{ grid-area: bar; }
}
@media (prefers-reduced-motion: reduce){
  .results-intro, .results-heading-icon, .results-live-dot::after,
  .result-row-winner::after, .result-row-winner .result-avatar-wrap,
  .result-row-winner .result-avatar, .result-bar-fill.result-bar-winner::after,
  .result-tag-winner i{
    animation: none !important;
  }
  .result-position, .result-row, .result-bar-fill{ transition: none !important; }
}

@media (max-width: 480px){
  .voted-card .box-body{ padding: 26px 16px; }
  .voted-icon{ width: 50px; height: 50px; font-size: 22px; }
  .voted-check{ width: 28px; height: 28px; }
  .cd-unit{ min-width: 50px; }
  .cd-num{ font-size: 21px; padding: 7px 4px; }
  .cd-sep{ font-size: 18px; line-height: 35px; }
  .countdown-units{ gap: 4px; }
}

/* ---------------------------------------------------------------------- */
/* Responsive polish                                                       */
/* ---------------------------------------------------------------------- */

@media (max-width: 991px){
  .content-wrapper > .content-header,
  .content-wrapper > section.content{
    padding-left: 12px;
    padding-right: 12px;
  }
}

@media (max-width: 767px){
  .login-box{ width: 90%; }
  .login-box-body{ padding: 22px 18px !important; }
  .login-badge{ width: 56px; height: 56px; font-size: 22px; }
  .box, .small-box, .info-box, .modal-content{ border-radius: var(--radius-sm) !important; }
  .content-header h1{ font-size: 22px; }
  .title{ font-size: 32px !important; }
  #candidate_list ul li{ margin: 0 0 16px 0 !important; width: 100%; }
  .box-header .box-tools{
    position: static;
    float: none;
    display: block;
    margin-top: 8px;
  }
  .box-header .pull-right{ float: none !important; display: block; margin-top: 8px; }
  .modal-dialog{ margin: 12px; }
  #countdown{ padding: 10px 12px 12px; }
  .bar .label{ width: 72px !important; margin-right: 12px !important; font-size: 12.5px; }
}

@media (max-width: 480px){
  .small-box .icon{ display: none; }
  .login-box{ width: 94%; }
  .table td, .table th{ font-size: 12.5px; padding: 6px; }
}

/* ---------------------------------------------------------------------- */
/* Ballot preview page (admin)                                            */
/* ---------------------------------------------------------------------- */

.ballot-toolbar{
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--glass-shadow-sm);
  padding: 12px 16px;
  margin-bottom: 4px;
}
.ballot-hint{
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #4a606f;
}
.ballot-hint i{ color: var(--glass-primary-dark); margin-right: 4px; }

.ballot-loading{
  text-align: center;
  padding: 60px 20px;
  color: #5c7183;
  font-weight: 600;
  font-size: 14px;
}
.ballot-loading i{
  display: block;
  font-size: 26px;
  margin-bottom: 10px;
  color: var(--glass-primary-dark);
}

.ballot-position-box{
  animation: glass-rise 0.4s var(--ease-glass);
}

.ballot-box-tools{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ballot-instruct{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(60, 141, 188, 0.2);
  font-size: 13px;
  font-weight: 600;
  color: #4a606f;
}
.ballot-instruct i{ color: var(--glass-primary-dark); margin-right: 4px; }

.ballot-no-candidates{
  width: 100% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 14px !important;
  color: #7c92a0;
  font-weight: 600;
  background: rgba(255,255,255,0.25) !important;
}
.ballot-no-candidates i{ font-size: 18px; }

.ballot-empty .box-body{
  padding: 50px 20px;
  color: #5c7183;
}
.ballot-empty i{
  display: block;
  font-size: 34px;
  margin-bottom: 12px;
  color: rgba(60, 141, 188, 0.35);
}
.ballot-empty p{ margin: 0; font-weight: 600; }
.ballot-empty-sub{
  font-weight: 400 !important;
  font-size: 12.5px;
  color: #7c92a0;
  margin-top: 4px !important;
}

.btn-icon[disabled]{
  opacity: 0.35;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

@media (max-width: 767px){
  .ballot-toolbar{ flex-direction: column; align-items: flex-start; }
  .ballot-instruct{ flex-direction: column; align-items: flex-start; }
  .ballot-instruct .btn{ width: 100%; }
  .ballot-box-tools{ width: 100%; justify-content: space-between; }
}

/* ---------------------------------------------------------------------- */
/* Voters page: targeted polish                                            */
/* ---------------------------------------------------------------------- */

.box:has(.voters-table){
  animation: glass-rise 0.4s var(--ease-glass);
  transition: box-shadow 0.25s ease;
}
.box:has(.voters-table):hover{
  box-shadow: var(--glass-shadow-lg);
}

.voters-table tbody td{
  padding-top: 12px;
  padding-bottom: 12px;
  vertical-align: middle;
}
.voters-table tbody tr:nth-child(even) td{
  background: rgba(255,255,255,0.22);
}
.voters-table .voter-fullname{
  display: block;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.voters-table tbody td.dataTables_empty::before{
  content: "\f0c0";
  font-family: FontAwesome;
  display: block;
  font-size: 30px;
  margin-bottom: 10px;
  color: rgba(60, 141, 188, 0.35);
}

@media (max-width: 480px){
  .voters-box-header .btn{ width: 100%; text-align: center; }
  .voters-box-header .stat-chips{ width: 100%; }
  .voters-table .voter-fullname{ max-width: 150px; }
  .voters-table .avatar-sm, .voters-table .avatar-wrap{ width: 32px; height: 32px; }

  .voters-table thead{ display: none; }
  .voters-table, .voters-table tbody, .voters-table tr, .voters-table td{ display: block; width: 100%; }
  .voters-table tbody tr{
    padding: 12px;
    margin-bottom: 10px;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.4) !important;
    box-shadow: var(--glass-shadow-sm);
  }
  .voters-table tbody td{
    border: none !important;
    padding: 4px 0 !important;
  }
  .voters-table tbody td:nth-child(2){ margin: 8px 0; }
  .voters-table tbody td.text-right{ text-align: left !important; }
  .voters-table .row-actions{ justify-content: flex-start; margin-top: 6px; }
  .voters-table tbody td.dataTables_empty{
    background: transparent !important;
    box-shadow: none;
  }
}

/* ---------------------------------------------------------------------- */
/* App Dialog — centered replacement for alert() / confirm() / prompt()    */
/* ---------------------------------------------------------------------- */
body.app-dialog-lock{ overflow: hidden; }

.app-dialog-backdrop{
  position: fixed;
  inset: 0;
  z-index: 30000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(20, 34, 44, 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .18s ease;
}
.app-dialog-backdrop.app-dialog-open{ opacity: 1; }

.app-dialog{
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  padding: 30px 28px 22px;
  text-align: center;
  background: #fff;
  border-radius: var(--radius-lg, 22px);
  box-shadow: var(--glass-shadow-lg, 0 20px 50px rgba(20, 48, 68, .2));
  transform: translateY(12px) scale(.96);
  transition: transform .22s var(--ease-glass, ease);
}
.app-dialog-backdrop.app-dialog-open .app-dialog{ transform: none; }

.app-dialog-icon{
  --tone: var(--glass-primary, #3c8dbc);
  flex: none;
  width: 60px;
  height: 60px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 26px;
  color: var(--tone);
  background: color-mix(in srgb, var(--tone) 12%, #fff);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--tone) 6%, #fff);
}
.app-dialog-success .app-dialog-icon{ --tone: #00a65a; }
.app-dialog-warning .app-dialog-icon{ --tone: #e08e0b; }
.app-dialog-danger  .app-dialog-icon{ --tone: #dd4b39; }

.app-dialog-title{
  flex: none;
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 700;
  color: #1f2d36;
}

.app-dialog-body{
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.55;
  color: #55646e;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.app-dialog-body p{ margin: 0 0 10px; }
.app-dialog-body p:last-child{ margin-bottom: 0; }

.app-dialog-list{
  margin: 12px 0;
  padding: 10px 14px;
  list-style: none;
  text-align: left;
  font-size: 13px;
  background: #f5f7f9;
  border: 1px solid #e6ebef;
  border-radius: var(--radius-sm, 12px);
  max-height: 180px;
  overflow-y: auto;
}
.app-dialog-list li{ position: relative; padding: 4px 0 4px 16px; }
.app-dialog-list li + li{ border-top: 1px dashed #e1e7ec; }
.app-dialog-list li:before{
  content: "";
  position: absolute;
  left: 2px;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b7c3cc;
}
.app-dialog-danger  .app-dialog-list li:before{ background: #dd4b39; }
.app-dialog-warning .app-dialog-list li:before{ background: #e08e0b; }

.app-dialog-note{ font-weight: 600; color: #34434d; }

.app-dialog-input{
  margin-top: 14px;
  height: 42px;
  border-radius: var(--radius-xs, 8px) !important;
  text-align: left;
}
.app-dialog-input.app-dialog-invalid{ border-color: #dd4b39 !important; }
.app-dialog-error{ min-height: 18px; margin-top: 4px; font-size: 12px; text-align: left; color: #dd4b39; }

.app-dialog-actions{
  flex: none;
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 22px;
}
.app-dialog-btn{
  flex: 1 1 0;
  max-width: 180px;
  min-height: 42px;
  padding: 9px 18px;
  font-weight: 600;
  border: 0;
  border-radius: 999px !important;
  transition: filter .15s ease, box-shadow .15s ease;
}
.app-dialog-btn:focus{ outline: none; }
.app-dialog-btn:focus-visible{ box-shadow: 0 0 0 3px rgba(60, 141, 188, .35); }
.app-dialog-cancel{ color: #44535d; background: #eef2f5; }
.app-dialog-cancel:hover{ background: #e3e9ed; color: #2b3942; }
.app-dialog-ok{ color: #fff !important; background: var(--glass-primary, #3c8dbc); }
.app-dialog-ok:hover{ filter: brightness(.94); }
.app-dialog-success .app-dialog-ok{ background: #00a65a; }
.app-dialog-warning .app-dialog-ok{ background: #e08e0b; }
.app-dialog-danger  .app-dialog-ok{ background: #dd4b39; }

@media (max-width: 480px){
  .app-dialog{ padding: 24px 18px 18px; }
  .app-dialog-actions{ flex-direction: column-reverse; }
  .app-dialog-btn{ max-width: none; }
}

/* ---------------------------------------------------------------------- */
/* Ballot: per-candidate Vote button, confirm dialog, thank-you screen    */
/* ---------------------------------------------------------------------- */

/* Selection happens through the Vote button, so the raw input stays hidden */
.candidate-card:has(.candidate-vote-btn){ cursor: default; }
.candidate-card:has(.candidate-vote-btn) .candidate-card-input{
  opacity: 0;
  pointer-events: none;
}

.candidate-vote-btn{
  position: relative;
  margin-top: 6px;
  min-width: 128px;
  padding: 9px 20px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--pos-accent, var(--glass-primary)) 0%, var(--pos-accent-dark, var(--glass-primary-darker)) 100%);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--pos-accent, #3c8dbc) 40%, transparent);
  cursor: pointer;
  transition: transform 0.2s var(--ease-glass), box-shadow 0.2s ease, background 0.25s ease, opacity 0.2s ease;
}
.candidate-vote-btn:hover:not(:disabled){ transform: translateY(-2px) scale(1.03); }
.candidate-vote-btn:active:not(:disabled){ transform: scale(0.96); }
.candidate-vote-btn:focus-visible{ outline: 3px solid color-mix(in srgb, var(--pos-accent, #3c8dbc) 45%, transparent); outline-offset: 2px; }
.candidate-vote-btn:disabled{ cursor: not-allowed; }
.candidate-vote-btn.is-voted{
  background: linear-gradient(135deg, #34c37a 0%, #00a65a 100%);
  box-shadow: 0 6px 16px rgba(0, 166, 90, 0.4);
  opacity: 1;
  animation: vote-confirm 0.5s var(--ease-glass);
}
.candidate-vote-btn.is-voted i{ animation: pop-in 0.45s var(--ease-glass); }

/* Other candidates fade back once the seats for a position are filled */
.candidate-card.is-locked{
  opacity: 0.55;
  filter: grayscale(0.6);
  transform: scale(0.97);
}
.candidate-card.is-locked:hover{ transform: scale(0.97); box-shadow: var(--glass-shadow-sm); }
.candidate-card.is-locked .candidate-vote-btn{
  background: rgba(140, 160, 175, 0.55);
  box-shadow: none;
}
.candidate-card.unlock{ animation: card-pop 0.4s var(--ease-glass); }

/* VOTED rubber stamp across the chosen card */
.candidate-card-stamp{
  display: none;
  position: absolute;
  top: 44px;
  left: 50%;
  z-index: 2;
  padding: 3px 14px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #00a65a;
  border: 3px solid #00a65a;
  border-radius: 8px;
  background: rgba(255,255,255,0.85);
  transform: translateX(-50%) rotate(-12deg);
  pointer-events: none;
}
.candidate-card.is-voted .candidate-card-stamp{ display: block; }
.candidate-card-stamp.stamp-in{ animation: stamp-in 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both; }

/* Little burst of dots out of the Vote button */
.vote-burst{ position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.vote-burst i{
  position: absolute;
  width: 7px; height: 7px;
  margin: -3.5px;
  border-radius: 50%;
  animation: burst 0.7s ease-out forwards;
}

/* Toast: You voted for X as President */
.vote-toast{
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 1060;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100% - 32px);
  padding: 10px 18px 10px 10px;
  color: #1f3d52;
  font-size: 14px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--glass-border);
  border-left: 4px solid #00a65a;
  border-radius: 999px;
  box-shadow: var(--glass-shadow-lg);
  transform: translate(-50%, 140%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.45s var(--ease-glass), opacity 0.3s ease;
}
.vote-toast.is-showing{ transform: translate(-50%, 0); opacity: 1; }
.vote-toast img{ width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.vote-toast .fa-check-circle{ color: #00a65a; font-size: 20px; }

/* Overlays (confirm + thank you) */
body.vote-overlay-lock{ overflow: hidden; }
.vote-overlay{
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 32, 45, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.vote-overlay.is-open{ opacity: 1; visibility: visible; transition: opacity 0.3s ease; }

.vote-dialog{
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 26px 24px 22px;
  text-align: left;
  background: rgba(255,255,255,0.94);
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  box-shadow: var(--glass-shadow-lg);
  transform: translateY(30px) scale(0.95);
  transition: transform 0.4s var(--ease-glass);
}
.vote-overlay.is-open .vote-dialog{ transform: none; }
.vote-dialog-head{ text-align: center; margin-bottom: 16px; }
.vote-dialog-head h3{ margin: 10px 0 6px; font-size: 22px; font-weight: 800; color: #1f3d52; }
.vote-dialog-head p{ margin: 0; color: #5b7486; }
.vote-dialog-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px; height: 60px;
  font-size: 28px;
  color: #fff;
  border-radius: 18px;
  background: linear-gradient(135deg, #34c37a 0%, #00a65a 100%);
  box-shadow: 0 10px 24px rgba(0, 166, 90, 0.35);
}
.vote-overlay.is-open .vote-dialog-icon{ animation: pop-in 0.5s var(--ease-glass) 0.15s both; }
.vote-overlay.is-open .ballot-review-row{ animation: card-in 0.45s var(--ease-glass) both; animation-delay: calc(var(--i, 0) * 80ms + 150ms); }
.vote-dialog-question{
  margin: 18px 0 14px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #1f3d52;
}
.vote-dialog-question .fa{ color: #f39c12; }
.vote-dialog-actions{ display: flex; justify-content: space-between; gap: 12px; }
.vote-dialog-actions .ballot-btn{ flex: 1; }

/* Thank-you screen */
.vote-overlay-thanks{ background: rgba(10, 40, 30, 0.6); }
#confettiCanvas{ position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vote-thanks{
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 34px 26px 26px;
  text-align: center;
  background: rgba(255,255,255,0.95);
  border-radius: 26px;
  box-shadow: var(--glass-shadow-lg);
  transform: scale(0.7);
  opacity: 0;
}
.vote-overlay-thanks.is-open .vote-thanks{ animation: thanks-in 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) forwards; }
.vote-thanks h2{ margin: 16px 0 6px; font-size: 28px; font-weight: 900; color: #00733e; }
.vote-thanks p{ margin: 0 0 18px; color: #4b6576; font-size: 15px; }
.vote-thanks-badge{ width: 96px; height: 96px; margin: 0 auto; border-radius: 50%; }
.vote-thanks-badge svg{ width: 100%; height: 100%; }
.vote-thanks-badge circle{
  fill: #00a65a;
  stroke: #00a65a;
  stroke-width: 2;
  transform-origin: center;
  transform: scale(0);
}
.vote-thanks-badge path{
  fill: none;
  stroke: #fff;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
}
.vote-overlay-thanks.is-open .vote-thanks-badge circle{ animation: pop-in 0.5s var(--ease-glass) 0.3s forwards; }
.vote-overlay-thanks.is-open .vote-thanks-badge path{ animation: draw-check 0.45s ease-out 0.7s forwards; }
.vote-overlay-thanks.is-open .vote-thanks-badge{ animation: thanks-glow 1.8s ease-out 1.1s infinite; }

.vote-thanks-picks{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 20px; }
.vote-thanks-pick{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 5px;
  text-align: left;
  background: color-mix(in srgb, var(--pos-accent, #3c8dbc) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--pos-accent, #3c8dbc) 35%, transparent);
  border-radius: 999px;
  opacity: 0;
}
.vote-overlay-thanks.is-open .vote-thanks-pick{ animation: card-in 0.45s var(--ease-glass) forwards; animation-delay: calc(var(--i, 0) * 120ms + 1s); }
.vote-thanks-pick img{ width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.vote-thanks-pick b{ display: block; font-size: 13px; color: #1f3d52; line-height: 1.2; }
.vote-thanks-pick small{ display: block; font-size: 11px; font-weight: 700; color: var(--pos-accent, #3c8dbc); }

.vote-thanks-timer{ height: 4px; border-radius: 999px; background: rgba(0, 166, 90, 0.15); overflow: hidden; }
.vote-thanks-timer span{ display: block; height: 100%; width: 100%; background: #00a65a; transform-origin: left; transform: scaleX(0); }
.vote-overlay-thanks.is-open .vote-thanks-timer span{ animation: timer-fill linear forwards; }

@keyframes vote-confirm{ 0%{ transform: scale(1); } 35%{ transform: scale(1.12); } 100%{ transform: scale(1); } }
@keyframes stamp-in{ 0%{ opacity: 0; transform: translateX(-50%) rotate(-12deg) scale(2.4); } 100%{ opacity: 1; transform: translateX(-50%) rotate(-12deg) scale(1); } }
@keyframes burst{ from{ transform: translate(0, 0) scale(1); opacity: 1; } to{ transform: translate(var(--dx), var(--dy)) scale(0.3); opacity: 0; } }
@keyframes thanks-in{ from{ transform: scale(0.7); opacity: 0; } to{ transform: scale(1); opacity: 1; } }
@keyframes thanks-glow{ 0%{ box-shadow: 0 0 0 0 rgba(0, 166, 90, 0.5); } 100%{ box-shadow: 0 0 0 22px rgba(0, 166, 90, 0); } }
@keyframes draw-check{ to{ stroke-dashoffset: 0; } }
@keyframes timer-fill{ to{ transform: scaleX(1); } }

@media (max-width: 600px){
  .vote-dialog{ padding: 20px 16px 16px; }
  .vote-dialog-actions{ flex-direction: column-reverse; }
  .vote-thanks h2{ font-size: 23px; }
}
@media (prefers-reduced-motion: reduce){
  .candidate-vote-btn, .candidate-card-stamp, .vote-burst i, .vote-dialog-icon, .vote-thanks,
  .vote-thanks-badge, .vote-thanks-pick{ animation: none !important; }
  .vote-thanks, .vote-thanks-pick{ opacity: 1; transform: none; }
  .vote-thanks-badge circle{ transform: none; }
  .vote-thanks-badge path{ stroke-dashoffset: 0; }
}