:root{
  --ufs-red:#0F204B;
  --ufs-gold:#FDB913;
  --ufs-dark:#111827;
  --ufs-muted:#6b7280;
  --ufs-bg:#f6f7fb;
  --ufs-card:#ffffff;
  --ufs-border:#e5e7eb;

  --ufs-footer:#2a2f36;
  --ufs-footer2:#0f2d52;

  --radius:14px;
  --shadow:0 10px 24px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{height:100%}

/* Fix black “void”: body becomes a page flex column */
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif;
  color:var(--ufs-dark);
  background:var(--ufs-bg);
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

main{
  display:block;
  flex:1;
  padding-bottom:10px;
}

a{color:var(--ufs-red);text-decoration:none}
a:hover{text-decoration:underline}

/* TOP BAR */
.topbar{
  background:linear-gradient(90deg,var(--ufs-red),#0B1738);
  color:#fff;
  padding:18px 0;
  border-bottom:4px solid var(--ufs-gold);
}
.topbar .wrap{
  max-width:none;
  margin:0;
  padding:0 28px;
  display:grid;
  grid-template-columns: 280px 1fr 280px;
  align-items:center;
  gap:14px;
  position:relative;
}
@media (max-width:900px){
  .topbar .wrap{grid-template-columns: 1fr; text-align:center; padding:0 18px}
  .top-left,.top-right{justify-content:center}
}

.top-left{display:flex;align-items:center;justify-content:flex-start}
.ufs-logo{
  height:62px;
  max-width:245px;
  width:auto;
  object-fit:contain;
  margin-right:10px;
  filter:none;
  border-radius:0;
  display:block;
}
.top-center{text-align:center;line-height:1.15}
.top-title{font-weight:900;font-size:22px;letter-spacing:.2px}
.top-sub{margin-top:6px;font-size:14px;opacity:.95}

.navlinks{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.navlinks a{
  color:#fff;opacity:.95;
  padding:8px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
}
.navlinks a:hover{opacity:1;background:rgba(255,255,255,.10);text-decoration:none}

/* LAYOUT */
.container{max-width:1050px;margin:22px auto;padding:0 18px}
.card{
  background:var(--ufs-card);
  border:1px solid var(--ufs-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}
.card + .card{margin-top:16px}

h2{margin:0 0 10px 0;font-size:18px}
h3{margin:18px 0 10px 0;font-size:15px}
.small{color:var(--ufs-muted);font-size:13px;line-height:1.4}
.hr{height:1px;background:var(--ufs-border);margin:16px 0}

/* Grid */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.col-12{grid-column:span 12}
.col-6{grid-column:span 6}
.col-5{grid-column:span 5}
.col-4{grid-column:span 4}
.col-3{grid-column:span 3}
@media (max-width:900px){.col-6,.col-5,.col-4,.col-3{grid-column:span 12}}

label{display:block;font-weight:650;font-size:13px;margin:0 0 6px 0}
input[type="text"],input[type="email"],input[type="tel"],textarea,select{
  width:100%;
  padding:10px 11px;
  border-radius:12px;
  border:1px solid var(--ufs-border);
  background:#fff;
  outline:none;
}
textarea{min-height:92px;resize:vertical}
input:focus,textarea:focus,select:focus{
  border-color:rgba(15,32,75,.55);
  box-shadow:0 0 0 4px rgba(15,32,75,.10);
}

/* Radio/checkbox tiles */
.options{display:flex;flex-wrap:wrap;gap:10px}
.opt{
  display:flex;align-items:center;gap:8px;
  padding:10px 12px;
  border:1px solid var(--ufs-border);
  border-radius:12px;
  background:#fff;
}
.opt input{margin:0}

/* POPIA note (italic + red) */
.popia-note{
  border-left:4px solid var(--ufs-gold);
  padding:12px 14px;
  background:rgba(253,185,19,.10);
  border-radius:12px;
  text-align:center;
}
.popia-note .popia-title{
  font-weight:900;
  letter-spacing:.2px;
  margin-bottom:6px;
}
.popia-note .popia-text{
  font-style:italic;
  color:var(--ufs-red);
  font-weight:650;
}

/* Alerts */
.alert{padding:10px 12px;border-radius:12px;border:1px solid var(--ufs-border);background:#fff}
.alert.success{border-color:rgba(22,163,74,.35);background:rgba(22,163,74,.08)}
.alert.warn{border-color:rgba(217,119,6,.35);background:rgba(217,119,6,.08)}
.alert.danger{border-color:rgba(220,38,38,.35);background:rgba(220,38,38,.08)}

/* Buttons (fix alignment + same height) */
.btnrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;align-items:center}
.btn, button.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  min-height:42px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  cursor:pointer;
  font-weight:800;
  line-height:1;
}
.btn.primary{background:var(--ufs-red);border-color:var(--ufs-red);color:#fff}
.btn.ghost{background:#fff;color:var(--ufs-red);border-color:rgba(15,32,75,.25)}
.btn.primary:hover{filter:brightness(.98)}
.btn.ghost:hover{background:rgba(15,32,75,.05);text-decoration:none}

/* Section bar */
.sectionbar{
  margin:18px 0 10px;
  background: var(--ufs-red);
  color:#fff;
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
  padding:10px 12px;
  border-radius:12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

/* Table */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin-top:8px;
  border:1px solid var(--ufs-border);
  border-radius:var(--radius);
  overflow:hidden;
}
.table th,.table td{padding:10px;border-bottom:1px solid var(--ufs-border);font-size:13px;vertical-align:top}
.table th{background:#fafafa;text-align:left;width:220px}
.table tr:last-child td{border-bottom:none}

/* Wider container on big screens */
.container{max-width:1280px;margin:22px auto;padding:0 18px}

/* Tables: allow horizontal scroll if needed */
.table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* Make tables more readable */
.table{
  min-width:980px; /* prevents “squashing” on wide tables */
}
.table th{
  width:240px;
  white-space:nowrap;
}
.table td{
  word-break:break-word;
}

/* Dashboard table specific: keep ticket + dates readable */
td.code{white-space:nowrap}
/* Pills */
.pill{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:800;border:1px solid var(--ufs-border);background:#fff}
.pill.new{background:rgba(15,32,75,.06);color:var(--ufs-red)}
.pill.verify{background:rgba(217,119,6,.08);color:#7c2d12}
.pill.approved{background:rgba(22,163,74,.08);color:#166534}
.pill.rejected{background:rgba(220,38,38,.08);color:#7f1d1d}
.pill.closed{
  background:rgba(15,32,75,.08);
  color:#0F204B;
  border:1px solid rgba(15,32,75,.18);
}

.code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px}

/* Details blocks for transparency sections */
details.transparency{
  border:1px solid var(--ufs-border);
  border-radius:12px;
  background:#fff;
  padding:10px 12px;
  margin-top:10px;
}
details.transparency summary{
  cursor:pointer;
  font-weight:900;
  color:var(--ufs-red);
}
details.transparency .content{
  margin-top:10px;
  color:#111827;
  font-size:13px;
  line-height:1.5;
}

/* FOOTER */
.site-footer{
  background:var(--ufs-footer);
  color:#fff;
  border-top:6px solid var(--ufs-footer2);
}
.footer-inner{
  max-width:1100px;
  margin:0 auto;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.footer-inner .footer-copy{
  font-size:12px;
  opacity:.92;
  white-space:nowrap;
}
.footer-links{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}
.footer-links a{
  color:#fff;
  opacity:.9;
  font-size:12px;
  white-space:nowrap;
  padding:6px 8px;
  border-radius:10px;
}
.footer-links a:hover{
  opacity:1;
  background:rgba(255,255,255,.08);
  text-decoration:none;
}

/* --- Staff dashboard -- */
.table-wrap{width:100%; overflow:auto; border-radius:14px}
.table th, .table td{word-break:break-word}
.table td .small{margin-top:4px}

/* KPI counters row */
.kpi-row{
  display:grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap:10px;
}
.kpi{
  border:1px solid var(--ufs-border);
  background:#fff;
  border-radius:14px;
  padding:10px 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.04);
}
.kpi-num{font-weight:900;font-size:18px;line-height:1}
.kpi-label{margin-top:6px;font-size:12px;color:var(--ufs-muted);font-weight:700}
@media (max-width:1100px){
  .kpi-row{grid-template-columns: repeat(3, minmax(0, 1fr));}
}

/* =========================================================
   Checklist panel (Request page)
========================================================= */
.checklist{
  border:1px solid var(--ufs-border);
  border-radius:14px;
  padding:12px;
  background:#fff;
}

.checkgrid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:10px;
}

.checkitem{
  grid-column:span 4;
  border:1px solid var(--ufs-border);
  border-radius:14px;
  padding:10px 12px;
  background:#fafafa;
}

@media (max-width:900px){
  .checkitem{grid-column:span 12;}
}

.checktitle{
  font-weight:900;
  font-size:13px;
}

.checkmeta{
  margin-top:4px;
  font-size:12px;
  color:var(--ufs-muted);
  line-height:1.35;
}

.checkitem.ok{
  background:rgba(22,163,74,.08);
  border-color:rgba(22,163,74,.25);
}

.checkitem.bad{
  background:rgba(220,38,38,.07);
  border-color:rgba(220,38,38,.25);
}

.checkitem.warn{
  background:rgba(217,119,6,.08);
  border-color:rgba(217,119,6,.25);
}

/* Disabled buttons */
button:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.stat-card{
  display:block;
  border-radius:14px;
  padding:14px 16px;
  text-decoration:none;
  border:1px solid var(--ufs-border);
  background:#fff;
  color:var(--ufs-dark);
}
.stat-card:hover{
  text-decoration:none;
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(15,32,75,.08);
}
.stat-card span{
  display:inline-block;
  margin-top:4px;
  font-size:24px;
  font-weight:900;
}
.stat-card.success{
  border-left:5px solid #0F204B;
}
.stat-card.warn{
  border-left:5px solid #FDB913;
}

/* Dashboard wide table improvements */
body.staff-page .container,
body.admin-page .container,
.container {
  max-width: 1600px;
}

.table-wrap {
  overflow-x: auto;
}

.table {
  width: 100%;
  min-width: 1350px;
}

.table th,
.table td {
  vertical-align: top;
  word-break: normal;
  overflow-wrap: normal;
}

.table td.code,
.table th:first-child,
.table td:first-child {
  white-space: nowrap;
}

.table .pill {
  white-space: nowrap;
  line-height: 1.2;
}

.table td:last-child {
  white-space: nowrap;
  min-width: 90px;
}

.table td:nth-child(3) {
  min-width: 150px;
}

.table td:nth-child(4) {
  min-width: 150px;
}

.table td:nth-child(5),
.table td:nth-child(7) {
  min-width: 120px;
}

.table td:nth-child(9),
.table td:nth-child(10) {
  min-width: 180px;
}

/* Dashboard wide table improvements */
body.staff-page .container,
body.admin-page .container,
.container {
  max-width: 1600px;
}

.table-wrap {
  overflow-x: auto;
}

.table {
  width: 100%;
  min-width: 1350px;
}

.table th,
.table td {
  vertical-align: top;
  word-break: normal;
  overflow-wrap: normal;
}

.table td.code,
.table th:first-child,
.table td:first-child {
  white-space: nowrap;
}

.table .pill {
  white-space: nowrap;
  line-height: 1.2;
}

.table td:last-child {
  white-space: nowrap;
  min-width: 90px;
}

.table td:nth-child(3) {
  min-width: 150px;
}

.table td:nth-child(4) {
  min-width: 150px;
}

.table td:nth-child(5),
.table td:nth-child(7) {
  min-width: 120px;
}

.table td:nth-child(9),
.table td:nth-child(10) {
  min-width: 180px;
}

/* Top horizontal scrollbar */
.table-scroll-top {
  overflow-x: auto;
  overflow-y: hidden;
  height: 18px;
  margin-bottom: 8px;
}

.table-scroll-top div {
  height: 1px;
}

.table-scroll-top::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar {
  height: 12px;
}

.table-scroll-top::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb {
  background: #9ca3af;
  border-radius: 999px;
}

/* User group help tooltips */
.help-tip{
  position:relative;
  display:inline-block;
  margin-left:6px;
  color:#0B1738;
  font-weight:bold;
  cursor:pointer;
}

.tip-text{
  visibility:hidden;
  opacity:0;
  width:280px;
  max-width:min(280px,80vw);
  white-space:normal;
  background:#fff;
  color:#111827;
  border:1px solid #d1d5db;
  border-radius:8px;
  padding:10px;
  position:absolute;
  z-index:999;
  left:0;
  top:22px;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  transition:opacity .2s;
  font-weight:normal;
  line-height:1.4;
}

.help-tip:hover .tip-text,
.help-tip:focus .tip-text{
  visibility:visible;
  opacity:1;
}

/* Mobile polish for user group help text */
@media (max-width:700px){
  .topbar{
    padding:14px 0 16px;
  }

  .topbar .wrap{
    grid-template-columns:1fr;
    gap:10px;
    text-align:center;
    padding:0 18px;
  }

  .top-left{
    justify-content:center;
  }

  .ufs-logo{
    height:auto;
    max-height:72px;
    max-width:260px;
    margin:0 auto 4px;
  }

  .top-title{
    font-size:22px;
    line-height:1.15;
    max-width:320px;
    margin:0 auto;
  }

  .top-sub{
    font-size:13px;
    max-width:320px;
    margin-left:auto;
    margin-right:auto;
  }

  .navlinks{
    justify-content:center;
    margin-top:6px;
  }

  .options{
    align-items:stretch;
  }

  .opt{
    width:100%;
    justify-content:flex-start;
    position:relative;
  }

  .help-tip{
    margin-left:auto;
  }

  .tip-text{
    left:auto;
    right:0;
    top:28px;
    width:260px;
    max-width:calc(100vw - 70px);
    text-align:left;
    font-size:13px;
  }
}