/* ============================================================================
   citizen-sidebar.css — Citizen portal sidebar, restyled to match the staff
   dashboard sidebar (includes/dswd_sidebar.php + dswd-theme.css).

   Same visual language: navy panel, circular seal, menu search, uppercase
   section labels, gold active indicator, programme chips, and a user box
   pinned to the bottom.
   ============================================================================ */

.dswd-cz-sidebar{
  position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w,270px);
  background:linear-gradient(180deg,#0b1730 0%,#0d1b3e 60%,#091530 100%);
  display:flex;flex-direction:column;z-index:1000;overflow-y:auto;
  border-right:1px solid rgba(255,255,255,.07);
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent;
}
.dswd-cz-sidebar::-webkit-scrollbar{width:5px;}
.dswd-cz-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px;}
.cz-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ── Brand ─────────────────────────────────────────────────────────────── */
.cz-brand{
  display:flex;align-items:center;gap:12px;padding:18px 18px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
  position:sticky;top:0;background:#0b1730;z-index:2;
}
.cz-seal{
  width:42px;height:42px;border-radius:50%;object-fit:cover;flex-shrink:0;background:#fff;
  box-shadow:0 0 0 2px rgba(252,209,22,.6),0 4px 12px rgba(0,0,0,.35);
}
.cz-bt{color:#fff;font-size:1.18rem;font-weight:800;line-height:1;letter-spacing:-.01em;}
.cz-bt .go{color:#fcd116;}
.cz-bs{color:rgba(255,255,255,.5);font-size:.62rem;margin-top:3px;text-transform:uppercase;letter-spacing:.6px;}

/* ── Menu search ───────────────────────────────────────────────────────── */
/* Flex row rather than an icon floated over the field — see the matching
   comment on .dswd-sb-search in dswd-theme.css. Icon and input sit one after
   the other, so they cannot overlap however the padding is styled elsewhere. */
.cz-search{
  position:relative;
  margin:14px 14px 6px;
  display:flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  border-radius:9px;
  padding:0 12px;
  transition:border-color .18s,background .18s;
}
.cz-search:focus-within{background:rgba(255,255,255,.12);border-color:rgba(252,209,22,.5);}
.cz-search i{
  position:static;transform:none;flex:0 0 auto;
  color:rgba(255,255,255,.35);font-size:.75rem;pointer-events:none;line-height:1;
}
.cz-search input{
  flex:1 1 auto;min-width:0;width:auto;
  background:transparent;border:none;box-shadow:none;
  padding:9px 0;color:#fff;font-size:.78rem;outline:none;
}
.cz-search input::placeholder{color:rgba(255,255,255,.35);}
.cz-search input:focus{outline:none;}

/* ── Navigation ────────────────────────────────────────────────────────── */
.cz-nav{flex:1;padding:4px 0 12px;}
.cz-section{
  color:rgba(255,255,255,.3);font-size:.6rem;letter-spacing:1.3px;text-transform:uppercase;
  padding:16px 20px 6px;font-weight:800;
}
.cz-link{
  position:relative;display:flex;align-items:center;gap:12px;
  padding:10px 18px;margin:1px 8px;border-radius:9px;
  color:rgba(255,255,255,.68);text-decoration:none;
  font-size:.82rem;font-weight:500;transition:background .16s,color .16s;
}
.cz-link:hover{background:rgba(255,255,255,.08);color:#fff;}
/* Matches the staff sidebar: weight and full-strength text, no fill. */
.cz-link.active{background:transparent;color:#fff;font-weight:700;}
.cz-icon{
  width:30px;height:30px;flex-shrink:0;border-radius:8px;font-size:.82rem;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);transition:background .16s;
}
.cz-link:hover .cz-icon{background:rgba(255,255,255,.14);}
.cz-link.active .cz-icon{background:rgba(255,255,255,.14);color:#fff;}
/* The gold indicator bar was removed along with the coloured fill. */
.cz-indicator{display:none;}

/* ── Programme chips ───────────────────────────────────────────────────── */
.cz-progs{display:flex;flex-wrap:wrap;gap:6px;padding:4px 18px 6px;}
.cz-prog-chip{
  font-size:.6rem;font-weight:800;letter-spacing:.04em;
  padding:3px 9px;border-radius:20px;border:1px solid;
}

/* ── Hotline ───────────────────────────────────────────────────────────── */
.cz-hotline{
  margin:10px 12px;padding:14px 16px;text-align:center;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:11px;
}
.cz-hotline-label{color:rgba(255,255,255,.42);font-size:.6rem;text-transform:uppercase;letter-spacing:.8px;font-weight:700;}
.cz-hotline-number{display:block;color:#fcd116;font-size:1rem;font-weight:800;margin-top:4px;text-decoration:none;}
.cz-hotline-number:hover{color:#fff;}
.cz-hotline-sub{color:rgba(255,255,255,.32);font-size:.6rem;margin-top:2px;}
.cz-hotline-mail{display:block;color:rgba(255,255,255,.5);font-size:.65rem;margin-top:5px;text-decoration:none;}
.cz-hotline-mail:hover{color:#fcd116;}

/* ── User box ──────────────────────────────────────────────────────────── */
/* Opaque: the box is pinned to the bottom while the menu scrolls under it,
   and on any screen shorter than the menu (most laptops) the translucent
   background let the links and programme chips show through the name and
   the Sign Out button. */
.cz-userbox{
  margin-top:auto;padding:14px 16px 16px;
  border-top:1px solid rgba(255,255,255,.08);background:#091530;
  position:sticky;bottom:0;z-index:2;
  box-shadow:0 -12px 18px -10px rgba(0,0,0,.55);
}
.cz-user-row{display:flex;align-items:center;gap:11px;margin-bottom:9px;}
.cz-avatar{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,#0044a8,#0a2a6b);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;
}
.cz-u-name{color:#fff;font-weight:700;font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cz-u-role{color:#6dd5a6;font-size:.65rem;margin-top:1px;}
.cz-u-org{
  color:rgba(255,255,255,.38);font-size:.65rem;margin-bottom:10px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cz-logout{
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:rgba(192,57,43,.16);border:1px solid rgba(192,57,43,.4);
  color:#ff8579;border-radius:9px;padding:8px;font-size:.76rem;font-weight:700;
  text-decoration:none;transition:.18s;
}
.cz-logout:hover{background:rgba(192,57,43,.3);color:#fff;}

/* ── Mobile ────────────────────────────────────────────────────────────── */
@media (max-width:768px){
  .dswd-cz-sidebar{transform:translateX(-100%);transition:transform .3s;}
  .dswd-cz-sidebar.open{transform:translateX(0);box-shadow:0 0 60px rgba(0,0,0,.5);}
}
@media print{
  .dswd-cz-sidebar{display:none!important;}
}