/* VMS voter-side theme — layered on top of AdminLTE 2 / Bootstrap 3.
   Change the brand colours here only. */
:root{
  --vms-primary:#0b6e4f;      /* IUK green */
  --vms-primary-dark:#08503a;
  --vms-accent:#c9a227;       /* gold */
  --vms-bg:#f3f5f4;
  --vms-card:#ffffff;
  --vms-text:#1f2a26;
  --vms-muted:#6b7772;
  --vms-border:#dfe5e2;
  --vms-radius:12px;
}
body{ background:var(--vms-bg); color:var(--vms-text); }
.mt20{ margin-top:20px; }

/* ---------- Top bar ---------- */
.skin-blue .main-header .navbar{ background:var(--vms-primary); }
.skin-blue .main-header .navbar .nav>li>a:hover{ background:var(--vms-primary-dark); }
.navbar-brand .brand-mark{ color:var(--vms-accent); margin-right:6px; }
.user-menu .user-image{ object-fit:cover; }
.user-menu .voter-name{ font-weight:600; }
.user-menu .voter-reg{ opacity:.8; font-size:12px; margin-left:4px; }
.content-wrapper{ background:var(--vms-bg); }

/* ---------- Page header ---------- */
.vms-hero{ text-align:center; padding:24px 12px 8px; }
.vms-hero .title{ font-size:clamp(22px,5vw,38px); font-weight:700; margin:0 0 6px; letter-spacing:.5px; }
.vms-hero .subtitle{ color:var(--vms-muted); font-size:15px; margin:0; }

/* ---------- Position cards ---------- */
.position-card{ background:var(--vms-card); border:1px solid var(--vms-border); border-radius:var(--vms-radius);
  margin-bottom:22px; box-shadow:0 1px 3px rgba(0,0,0,.04); overflow:hidden; }
.position-card .pc-head{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 18px; border-bottom:1px solid var(--vms-border); flex-wrap:wrap; }
.position-card .pc-title{ font-size:18px; font-weight:700; margin:0; }
.position-card .pc-instruct{ color:var(--vms-muted); font-size:13px; margin:2px 0 0; }
.position-card .pc-status{ font-size:12px; font-weight:600; padding:3px 10px; border-radius:20px;
  background:#eef1f0; color:var(--vms-muted); white-space:nowrap; }
.position-card.is-done .pc-status{ background:#e3f3ec; color:var(--vms-primary); }
.position-card .reset{ border-radius:20px; }
.position-card .pc-body{ padding:16px; }

.candidate-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:14px; }
.candidate-card{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;
  border:2px solid var(--vms-border); border-radius:var(--vms-radius); padding:16px 12px 12px; margin:0;
  cursor:pointer; background:#fff; font-weight:400; transition:border-color .15s, box-shadow .15s, transform .15s; }
.candidate-card:hover{ border-color:#b9c9c2; transform:translateY(-1px); }
.candidate-card input{ position:absolute; opacity:0; pointer-events:none; }
.candidate-card .cc-photo{ width:96px; height:96px; border-radius:50%; object-fit:cover; border:3px solid #eef1f0; }
.candidate-card .cc-name{ font-size:16px; font-weight:600; margin:10px 0 8px; line-height:1.25; }
.candidate-card .cc-check{ position:absolute; top:10px; right:10px; width:24px; height:24px; border-radius:50%;
  border:2px solid var(--vms-border); background:#fff; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:13px; }
.candidate-card .platform{ font-size:12px; border-radius:20px; }
.candidate-card.is-selected{ border-color:var(--vms-primary); box-shadow:0 0 0 3px rgba(11,110,79,.15); }
.candidate-card.is-selected .cc-check{ background:var(--vms-primary); border-color:var(--vms-primary); }
.candidate-card.is-disabled{ opacity:.45; cursor:not-allowed; }
.candidate-card input:focus-visible ~ .cc-check{ outline:3px solid var(--vms-accent); outline-offset:2px; }

/* ---------- Sticky action bar ---------- */
.ballot-bar{ position:sticky; bottom:0; z-index:20; background:#fff; border-top:1px solid var(--vms-border);
  box-shadow:0 -4px 14px rgba(0,0,0,.06); padding:12px 16px; margin:10px -15px 0;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.ballot-bar .bb-progress{ flex:1; min-width:180px; }
.ballot-bar .bb-label{ font-size:13px; color:var(--vms-muted); margin-bottom:4px; }
.ballot-bar .progress{ height:8px; margin:0; border-radius:8px; }
.ballot-bar .progress-bar{ background:var(--vms-primary); }
.btn-vms{ background:var(--vms-primary); border-color:var(--vms-primary-dark); color:#fff; border-radius:24px; padding:10px 22px; font-weight:600; }
.btn-vms:hover,.btn-vms:focus{ background:var(--vms-primary-dark); color:#fff; }

/* ---------- Modals / ballot summary ---------- */
.modal-content{ border-radius:var(--vms-radius); overflow:hidden; }
.votelist{ display:flex; justify-content:space-between; gap:12px; padding:10px 4px; border-bottom:1px solid #f0f2f1; font-size:15px; margin:0; }
.votelist:last-child{ border-bottom:0; }
.votelist > span{ float:none; width:auto; padding:0; }
.votelist .pull-right{ float:none !important; color:var(--vms-muted); }
.votelist b{ font-weight:600; }
.skipped-note{ margin-top:12px; }

/* ---------- Already voted ---------- */
.voted-card{ background:#fff; border-radius:var(--vms-radius); border:1px solid var(--vms-border); padding:28px 22px; text-align:center; max-width:620px; margin:10px auto 30px; }
.voted-card .voted-icon{ width:72px; height:72px; border-radius:50%; background:#e3f3ec; color:var(--vms-primary);
  display:inline-flex; align-items:center; justify-content:center; font-size:34px; margin-bottom:12px; }
.voted-card h3{ margin:0 0 6px; font-weight:700; }
.voted-card .voted-list{ text-align:left; margin-top:18px; border-top:1px solid var(--vms-border); padding-top:8px; }

/* ---------- Login ---------- */
.login-page{ background:linear-gradient(160deg,var(--vms-primary) 0%,var(--vms-primary-dark) 55%,#062e22 100%); min-height:100vh; }
.login-box{ width:100%; max-width:400px; margin:0 auto; padding:7vh 16px 30px; }
.login-logo{ color:#fff; margin-bottom:18px; }
.login-logo .brand-mark{ width:64px; height:64px; border-radius:16px; background:rgba(255,255,255,.12); display:inline-flex;
  align-items:center; justify-content:center; font-size:30px; color:var(--vms-accent); margin-bottom:10px; }
.login-logo .brand-name{ display:block; font-size:28px; font-weight:700; color:#fff; line-height:1.2; }
.login-logo .brand-sub{ display:block; font-size:14px; color:rgba(255,255,255,.75); margin-top:4px; }
.login-box-body{ border-radius:var(--vms-radius); padding:26px 22px; box-shadow:0 10px 30px rgba(0,0,0,.2); }
.login-box-body label{ font-weight:600; font-size:13px; }
.login-box-body .form-control{ height:44px; border-radius:8px; }
.pw-wrap{ position:relative; }
.pw-wrap .pw-toggle{ position:absolute; right:6px; top:6px; border:0; background:none; color:var(--vms-muted); padding:6px 8px; }
.login-help{ text-align:center; font-size:13px; color:var(--vms-muted); margin:16px 0 0; }
.login-footer{ text-align:center; color:rgba(255,255,255,.6); font-size:12px; margin-top:18px; }

@media (max-width:480px){
  .candidate-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .candidate-card .cc-photo{ width:72px; height:72px; }
  .candidate-card .cc-name{ font-size:14px; }
  .position-card .pc-body{ padding:12px; }
  .ballot-bar .btn-vms{ width:100%; }
}

/* Keep brand + user menu on one row on phones */
@media (max-width:767px){
  .layout-top-nav .main-header .navbar-header{ float:left; }
  .layout-top-nav .main-header .navbar-custom-menu{ float:right; }
  .layout-top-nav .main-header .navbar-brand{ font-size:18px; }
}