/* One look for the whole site (the public search page's): dark teal, gold, light grey, Cairo. */
@font-face { font-family: 'WqCairo'; src: url('../lib/fonts/pdf-library/Cairo-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'WqCairo'; src: url('../lib/fonts/pdf-library/Cairo-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'WqCairo'; src: url('../lib/fonts/pdf-library/Cairo-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'WqCairo'; src: url('../lib/fonts/pdf-library/Cairo-Black.ttf') format('truetype'); font-weight: 900; font-display: swap; }

:root {
  --wq-primary: #0d3a52;
  --wq-primary-dark: #082c40;
  --wq-primary-light: #1d6a7e;
  --wq-accent: #c9963f;
  --wq-accent-light: #e3b866;
  --wq-success: #059669;
  --wq-danger: #dc2626;
  --wq-warning: #d97706;
  --wq-bg: #f1f3f4;
  --wq-surface: #ffffff;
  --wq-ink: #1b2b3a;
  --wq-muted: #6b7785;
  --wq-border: #e4e8ec;
  --wq-card-radius: 1rem;
  --wq-radius-sm: .6rem;
  --wq-shadow-xs: 0 .25rem .75rem rgba(27, 43, 58, .05);
  --wq-shadow: 0 .5rem 1.5rem rgba(27, 43, 58, .07);
  --wq-shadow-lg: 0 1rem 2.4rem rgba(27, 43, 58, .1);
  --wq-transition: .15s ease;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: 'WqCairo', 'DroidKufi', 'Segoe UI', Tahoma, Arial, sans-serif;
  background: linear-gradient(180deg, #f7f8f9 0, var(--wq-bg) 420px) no-repeat, var(--wq-bg);
  color: var(--wq-ink);
}

a { color: var(--wq-primary); text-decoration: none; transition: color var(--wq-transition); }
a:hover { color: var(--wq-primary-dark); text-decoration: none; }

.wq-auth-link {
  color: var(--wq-primary-light);
  font-weight: 600;
  display: inline-block;
  transition: color var(--wq-transition), font-size var(--wq-transition);
}
.wq-auth-link:hover {
  color: var(--wq-accent);
  font-size: 1.2em;
}

::selection { background: rgba(201, 150, 63, .25); }

h1, h2, h3, h4, h5, h6 { letter-spacing: -.01em; }

/* ================= Buttons ================= */
.btn {
  border-radius: var(--wq-radius-sm);
  font-weight: 600;
  padding-inline: 1.1em;
  transition: box-shadow var(--wq-transition), background-color var(--wq-transition), border-color var(--wq-transition), color var(--wq-transition);
}
.btn:active { transform: scale(.98); }
.btn-sm { padding-inline: .9em; }

.btn-primary {
  --bs-btn-bg: var(--wq-primary);
  --bs-btn-border-color: var(--wq-primary);
  --bs-btn-hover-bg: var(--wq-primary-dark);
  --bs-btn-hover-border-color: var(--wq-primary-dark);
  --bs-btn-active-bg: var(--wq-primary-dark);
  box-shadow: var(--wq-shadow-xs);
}
.btn-primary:hover { box-shadow: var(--wq-shadow); }

.btn-success { box-shadow: var(--wq-shadow-xs); }

.btn-outline-primary, .btn-outline-secondary, .btn-outline-danger,
.btn-outline-warning, .btn-outline-info, .btn-outline-success {
  transition: background-color var(--wq-transition), color var(--wq-transition), box-shadow var(--wq-transition);
}
.btn-outline-primary:hover, .btn-outline-secondary:hover {
  box-shadow: var(--wq-shadow-xs);
}

.text-primary { color: var(--wq-primary) !important; }
.bg-primary { background-color: var(--wq-primary) !important; }

/* Template page: more room between the template's name card and its design/beneficiaries tabs. */
.wq-main-tabs { margin-top: 2.75rem; }

/* ================= Search / hero section ================= */
.wq-hero {
  background: transparent;
  padding: 2rem 1rem 1.5rem;
  text-align: center;
  position: relative;
}
.wq-hero h2 { font-weight: 800; color: var(--wq-ink); font-size: 1.6rem; }
.wq-hero h2 .bi { color: var(--wq-accent); }
.wq-hero > p { color: var(--wq-muted); }
.wq-hero::after { content: ""; display: block; width: 3.25rem; height: 3px; border-radius: 3px; background: var(--wq-accent); margin: .9rem auto 0; }
.wq-hero p.lead {
  color: var(--wq-muted);
  max-width: none;
  margin-inline: auto;
  font-size: 1.05rem;
  white-space: nowrap;
}
@media (max-width: 767.98px) {
  .wq-hero p.lead {
    white-space: normal;
    font-size: .95rem;
  }
}

.card.wq-search-card {
  border-radius: 1.1rem;
  box-shadow: var(--wq-shadow-lg);
  border: 0;
  background: var(--wq-surface);
  position: relative;
  overflow: hidden;
}
.wq-search-btn {
  background: var(--wq-primary);
  border-color: var(--wq-primary);
  color: #fff;
  font-weight: 600;
}
.wq-search-btn:hover, .wq-search-btn:focus {
  background: var(--wq-primary-dark);
  border-color: var(--wq-primary-dark);
  color: #fff;
}
.wq-search-input-group { position: relative; }
.wq-search-input-group .bi-search {
  position: absolute;
  inset-inline-start: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--wq-muted);
  font-size: 1.05rem;
  pointer-events: none;
}
.wq-search-input-group input {
  padding-inline-start: 2.75rem;
  border-radius: var(--wq-radius-sm);
  transition: box-shadow var(--wq-transition), border-color var(--wq-transition);
}
.wq-search-input-group input:focus {
  border-color: var(--wq-primary);
  box-shadow: 0 0 0 .2rem rgba(67, 56, 202, .14);
}

/* ================= How it works ================= */
.wq-step-card {
  text-align: center;
  padding: 1.7rem 1.2rem;
  height: 100%;
  border: 1px solid var(--wq-border);
  box-shadow: none;
  transition: box-shadow var(--wq-transition), border-color var(--wq-transition);
}
.wq-step-card:hover {
  box-shadow: var(--wq-shadow);
}
.wq-step-icon {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto .85rem;
  font-size: 1.3rem;
  color: var(--wq-primary);
  background: rgba(67, 56, 202, .1);
}
.wq-step-num {
  display: inline-block;
  color: var(--wq-primary);
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ================= Cards / tables ================= */
.card {
  border-radius: var(--wq-card-radius);
  border: 1px solid #edf0f3;
  box-shadow: var(--wq-shadow);
  transition: box-shadow var(--wq-transition);
}
.table {
  --bs-table-bg: transparent;
}
.table thead th {
  background-color: var(--wq-bg);
  border-bottom-width: 1px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--wq-ink);
}
.table-hover tbody tr {
  transition: background-color var(--wq-transition);
}

.badge {
  font-weight: 600;
  padding: .42em .75em;
  border-radius: 999px;
}
.badge-status-draft { background-color: #f3f4f6; color: #4b5563; border: 1px solid #e5e7eb; }
.badge-status-approved { background-color: #fef3e2; color: #92400e; border: 1px solid #fde3ba; }
.badge-status-published { background-color: #e8f8ee; color: #15803d; border: 1px solid #bceccb; }
.badge-trial { background-color: rgba(201, 150, 44, .15); color: var(--wq-accent); border: 1px solid rgba(201, 150, 44, .35); }

/* ================= Search result cards ================= */
.wq-result-card {
  border-radius: var(--wq-card-radius);
  border: 1px solid var(--wq-border);
  box-shadow: var(--wq-shadow-xs);
  padding: 1.25rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--wq-transition), border-color var(--wq-transition);
}
.wq-result-card:hover {
  box-shadow: var(--wq-shadow);
  border-color: var(--wq-primary-light);
}
.wq-result-icon {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: var(--wq-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--wq-primary);
  background: rgba(67, 56, 202, .1);
  margin-bottom: .8rem;
}
.wq-result-card .wq-result-title { font-weight: 700; margin-bottom: .15rem; }
.wq-result-card .wq-result-meta { color: var(--wq-muted); font-size: .86rem; }
.wq-result-card .btn { margin-top: auto; }

/* ================= Pagination ================= */
.wq-pagination-wrap { overflow-x: auto; }
.pagination { flex-wrap: wrap; }
.page-link {
  border-radius: var(--wq-radius-sm) !important;
  margin-inline: .15rem;
  color: var(--wq-ink);
  border-color: var(--wq-border);
  transition: background-color var(--wq-transition), color var(--wq-transition);
}
.page-link:hover { background-color: var(--wq-bg); }
.page-item.active .page-link {
  background: var(--wq-primary);
  border-color: var(--wq-primary);
  color: #fff;
}

/* ================= Admin layout: top navigation bar ================= */
/* One navy bar: logo (start), the main pages as icon-over-label buttons (middle), and the
   user menu (end). Below the lg breakpoint the page buttons drop to their own row and become
   a horizontally swipeable strip (site.js scrolls the active one into view). */
.wq-topnav {
  background: linear-gradient(180deg, var(--wq-primary) 0%, var(--wq-primary-dark) 100%);
  color: #e5e7eb;
  border-bottom: 3px solid var(--wq-accent);
  box-shadow: 0 .4rem 1.2rem rgba(8, 44, 64, .22);
}
.wq-topnav-inner {
  display: flex;
  align-items: center;
  gap: .75rem 1.25rem;
  padding: .4rem 1.6rem;
}
.wq-topnav-brand { flex-shrink: 0; display: flex; align-items: center; }
.wq-topnav-brand img { height: 46px; width: auto; }
/* A department user's header leads with the department's own logo and name. */
.wq-topnav-dept {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  max-width: 22rem;
  min-width: 0;
}
.wq-topnav-dept > i { font-size: 1.4rem; color: var(--wq-accent-light); }
.wq-topnav-brand .wq-topnav-dept-logo {
  height: 46px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  background: #fff;
  border-radius: .5rem;
  padding: .2rem .35rem;
}
.wq-topnav-dept-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wq-poweredby {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  font-size: .75rem;
  color: var(--wq-muted);
}
.wq-poweredby img { height: 18px; width: auto; }
.wq-poweredby strong { color: var(--wq-primary); }
.wq-topnav-links {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: center;
  gap: .25rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.wq-topnav-links::-webkit-scrollbar { display: none; }
.wq-topnav-link {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  padding: .55rem .8rem .5rem;
  border-radius: var(--wq-radius-sm);
  color: rgba(229, 231, 235, .85);
  font-weight: 700;
  font-size: .86rem;
  white-space: nowrap;
  position: relative;
  transition: background-color var(--wq-transition), color var(--wq-transition);
}
.wq-topnav-link i { font-size: 1.25rem; line-height: 1; }
.wq-topnav-link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.wq-topnav-link.active {
  background: rgba(201, 150, 63, .18);
  color: var(--wq-accent-light);
}
.wq-topnav-link.active::after {
  content: '';
  position: absolute;
  bottom: .2rem;
  inset-inline: 30%;
  height: 3px;
  border-radius: 3px;
  background: var(--wq-accent-light);
}
.wq-topnav-user { flex-shrink: 0; }
.wq-topnav-userbtn {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255, 255, 255, .3);
  --bs-btn-hover-bg: rgba(255, 255, 255, .1);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: rgba(255, 255, 255, .5);
  --bs-btn-active-bg: rgba(255, 255, 255, .15);
  --bs-btn-active-color: #fff;
  --bs-btn-active-border-color: rgba(255, 255, 255, .5);
  border-radius: 999px;
  font-weight: 700;
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wq-topnav-user .dropdown-menu { min-width: 15rem; }
.wq-topnav-user .dropdown-item { display: flex; align-items: center; gap: .5rem; }
@media (max-width: 991.98px) {
  .wq-topnav-inner { flex-wrap: wrap; padding: .4rem .9rem 0; }
  .wq-topnav-brand img, .wq-topnav-brand .wq-topnav-dept-logo { height: 40px; }
  .wq-topnav-dept { max-width: 13rem; font-size: .9rem; }
  .wq-topnav-user { margin-inline-start: auto; }
  .wq-topnav-links {
    order: 3;
    flex-basis: 100%;
    justify-content: flex-start;
    margin: 0 -.9rem;
    padding: 0 .6rem .35rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
  }
  .wq-topnav-link { padding: .5rem .7rem .45rem; font-size: .8rem; }
}
/* Dashboard pages: the content fills the window so the wave footer sits at the bottom. */
body.wq-admin { min-height: 100vh; display: flex; flex-direction: column; background: #fff; }
body.wq-admin .wq-hub-footer { --hub-teal: #0d3a52; --hub-gold: #c9963f; --hub-gold-2: #e3b866; margin-top: 70px; }
.wq-admin-content {
  min-width: 0;
  flex: 1 0 auto;
  padding: 1.6rem 1.6rem 2rem;
}
@media (max-width: 575.98px) {
  .wq-admin-content { padding: 1rem .75rem; }
}
.wq-topbar {
  background: var(--wq-surface);
  border-radius: var(--wq-card-radius);
  box-shadow: var(--wq-shadow);
  border: 0;
  border-inline-start: 4px solid var(--wq-accent);
  padding: .9rem 1.4rem;
  margin-bottom: 1.4rem;
}
.wq-topbar h5 { font-weight: 800; color: var(--wq-ink); }

.wq-bulk-job-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--wq-surface);
  border: 1px solid var(--wq-primary-light);
  border-radius: var(--wq-card-radius);
  box-shadow: var(--wq-shadow-xs);
  padding: .75rem 1.1rem;
  margin-bottom: 1.4rem;
}
.wq-bulk-job-text {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  color: var(--wq-ink);
  white-space: nowrap;
}
.wq-bulk-job-text i { color: var(--wq-primary); }
.wq-bulk-job-progress {
  flex-grow: 1;
  min-width: 120px;
  height: .55rem;
}
.wq-bulk-job-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
}


.wq-stat-card {
  border-radius: var(--wq-card-radius);
  padding: 1.4rem;
  background: var(--wq-surface);
  color: var(--wq-ink);
  border: 1px solid var(--wq-border);
  box-shadow: var(--wq-shadow-xs);
  transition: box-shadow var(--wq-transition);
  position: relative;
  overflow: hidden;
}
.wq-stat-card:hover { box-shadow: var(--wq-shadow); }
.wq-stat-card .wq-stat-value { font-size: 1.9rem; font-weight: 800; }
.wq-stat-card::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: .25rem;
  background: var(--wq-primary);
}
.wq-stat-card.bg-b::before { background: var(--wq-warning); }
.wq-stat-card.bg-c::before { background: #db2777; }
.wq-stat-card.bg-d::before { background: var(--wq-success); }

/* ================= Designer: element tools column ================= */
.wq-designer-tools-title { font-size: .8rem; font-weight: 800; color: var(--wq-muted); padding: .1rem .2rem .5rem; }
.wq-designer-tools .btn { text-align: start; white-space: nowrap; }
/* Lets the page column shrink (its canvas scrolls) instead of pushing the properties column
   onto a new row when the page is wider than the space between the two side columns. */
.wq-designer-main { min-width: 0; }
/* Resize handles appear only on the element being edited, not on every element on the page. */
.wq-text-element:not(.wq-selected) > .wq-resize-handle { display: none; }
@media (min-width: 992px) {
  .wq-designer-side { width: 10rem; position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
  .wq-designer-side .btn { width: 100%; white-space: nowrap; }
  .wq-designer-props { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
}
/* Compact properties panel: smaller type and tighter spacing so an element's properties fit with little scrolling. */
.wq-designer-props.card { padding: .75rem !important; font-size: .8rem; }
.wq-designer-props h6 { font-size: .9rem; }
.wq-designer-props .form-label { font-size: .75rem; margin-bottom: .1rem; }
.wq-designer-props .mb-2 { margin-bottom: .35rem !important; }
.wq-designer-props .form-control-sm,
.wq-designer-props .form-select-sm { font-size: .8rem; padding-top: .15rem; padding-bottom: .15rem; min-height: 0; }
.wq-designer-props .form-control-color { height: 1.6rem; }
.wq-designer-props .btn-sm { font-size: .75rem; padding: .15rem .45rem; }
.wq-designer-props .input-group-text { font-size: .75rem; padding: .15rem .45rem; }
.wq-designer-props .form-check { min-height: 0; margin-bottom: 0; }
.wq-designer-props p.small { font-size: .72rem; line-height: 1.4; }
.wq-designer-props hr { margin: .6rem 0 !important; }
/* Designer header: the header card takes the remaining width so the save/preview frame stays beside it. */
.wq-page-tabs-card { flex: 1 1 0; min-width: 18rem; }
.wq-design-actions .btn { white-space: nowrap; }
/* Preview popup: the pages stacked, each scaled to the popup's width. */
.wq-preview-body { background: #e9ecef; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.wq-preview-body img { max-width: 100%; height: auto; background: #fff; box-shadow: var(--wq-shadow-lg); }
.wq-preview-page-label { font-size: .8rem; color: var(--wq-muted); margin-bottom: -.6rem; }

/* ================= Department home (dashboard) ================= */
.wq-dash-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 1.6rem;
  border-radius: var(--wq-card-radius);
  background: linear-gradient(135deg, var(--wq-primary) 0%, var(--wq-primary-light) 100%);
  color: #fff;
  box-shadow: var(--wq-shadow);
}
.wq-dash-hello { color: var(--wq-accent-light); font-weight: 700; font-size: .9rem; }
.wq-dash-name { margin: .15rem 0 0; font-weight: 800; color: #fff; }
.wq-dash-card { padding: 1.2rem 1.3rem; display: flex; flex-direction: column; }
.wq-dash-card-head { display: flex; align-items: center; gap: .6rem; color: var(--wq-muted); font-weight: 700; }
.wq-dash-icon {
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(13, 59, 102, .08); color: var(--wq-primary); font-size: 1.1rem;
}
.wq-dash-number { font-size: 2rem; font-weight: 800; color: var(--wq-ink); margin-top: .5rem; line-height: 1.2; }
.wq-dash-number small { font-size: .85rem; font-weight: 600; color: var(--wq-muted); }
.wq-dash-progress { height: .45rem; margin-top: .6rem; background: #eef0f3; }
.wq-dash-progress .progress-bar { background-color: var(--wq-primary); }
.wq-dash-progress .progress-bar.bg-success { background-color: var(--wq-success) !important; }
.wq-dash-progress .progress-bar.bg-warning { background-color: var(--wq-warning) !important; }
.wq-dash-sub { font-size: .82rem; color: var(--wq-muted); margin-top: .35rem; }
.wq-dash-link { margin-top: auto; padding-top: .8rem; font-size: .85rem; font-weight: 700; }
.wq-dash-card-warn { border-color: #fcd9a8; background: #fffaf2; }
.wq-dash-card-warn .wq-dash-icon { background: #fef3e2; color: var(--wq-warning); }
.wq-dash-alert {
  margin-top: auto; padding-top: .8rem; font-size: .85rem; color: #92400e;
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
}
.wq-dash-section-head {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between;
  padding: .9rem 1.2rem; border-bottom: 1px solid var(--wq-border);
}
.wq-dash-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) auto minmax(8rem, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: .8rem 1.2rem;
  color: var(--wq-ink);
  border-bottom: 1px solid var(--wq-border);
  transition: background-color var(--wq-transition);
}
li:last-child > .wq-dash-row { border-bottom: 0; }
.wq-dash-row:hover { background: #f8fafc; color: var(--wq-ink); }
.wq-dash-row-main { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.wq-dash-row-stats { display: flex; gap: .9rem; color: var(--wq-muted); font-size: .85rem; white-space: nowrap; }
.wq-dash-row-progress .wq-dash-progress { margin-top: 0; margin-bottom: .15rem; }
@media (max-width: 767.98px) {
  .wq-dash-row { grid-template-columns: minmax(0, 1fr) auto; gap: .4rem .8rem; }
  .wq-dash-row-stats { grid-column: 1; }
  .wq-dash-row-progress { grid-column: 1; }
  .wq-dash-row > .bi-chevron-left { grid-column: 2; grid-row: 1 / span 3; }
}

/* Ensures a consistent gap above the footer even when the page content is
   short and the sticky-footer flex mode isn't active (e.g. a search-results
   page, where the footer should follow the content, not stick to the
   viewport, but should still never touch it directly). */
main { padding-bottom: 3rem; }

/* ================= Loading overlay ================= */
.wq-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, .5);
  backdrop-filter: blur(2px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.wq-loading-overlay.d-none { display: none; }
.wq-loading-card {
  background: var(--wq-surface);
  border-radius: var(--wq-card-radius);
  padding: 1.9rem 2.15rem;
  min-width: 280px;
  max-width: 90vw;
  text-align: center;
  box-shadow: var(--wq-shadow-lg);
}
.wq-loading-card .progress { height: .5rem; border-radius: var(--wq-radius-sm); }
.wq-loading-card .progress-bar { background: var(--wq-primary); }

/* ================= Forms ================= */
.form-control:focus, .form-select:focus {
  border-color: var(--wq-accent);
  box-shadow: 0 0 0 .2rem rgba(201, 150, 63, .15);
}
.form-control, .form-select { border-color: #dfe4e9; }
.form-check-input:checked { background-color: var(--wq-primary); border-color: var(--wq-primary); }
.form-check-input:focus { border-color: var(--wq-accent); box-shadow: 0 0 0 .2rem rgba(201, 150, 63, .15); }

/* Bootstrap's stock blue, swapped for the site's teal. */
.btn-outline-primary {
  --bs-btn-color: var(--wq-primary);
  --bs-btn-border-color: var(--wq-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--wq-primary);
  --bs-btn-hover-border-color: var(--wq-primary);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--wq-primary-dark);
  --bs-btn-active-border-color: var(--wq-primary-dark);
}
.list-group-item.active { background-color: var(--wq-primary); border-color: var(--wq-primary); }
.nav-pills .nav-link.active { background-color: var(--wq-primary); }
.nav-tabs .nav-link.active { color: var(--wq-primary); border-top: 2px solid var(--wq-accent); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--wq-primary); }
.progress-bar { background-color: var(--wq-primary-light); }

/* Plain file inputs otherwise render as a flat white box that disappears
   against a white modal/card background, with no visual cue of where to
   click — give it a tinted background and a colored, branded button. */
input[type="file"].form-control {
  background-color: var(--wq-bg);
  border: 1px solid var(--wq-border);
}
input[type="file"].form-control::file-selector-button,
input[type="file"].form-control::-webkit-file-upload-button {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--wq-primary);
  color: #fff;
  border: none;
  border-radius: var(--wq-radius-sm);
  padding: .375rem .9rem;
  margin-inline-end: .75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--wq-transition);
}
input[type="file"].form-control::file-selector-button:hover,
input[type="file"].form-control::-webkit-file-upload-button:hover {
  background-color: var(--wq-primary-dark);
}

/* ================= Logo ================= */
.wq-logo-nav { height: 52px; width: auto; vertical-align: middle; }
.wq-public-navbar .wq-logo-nav { height: 56px; }
.wq-logo-hero { height: 64px; width: auto; vertical-align: middle; }
.wq-logo-footer { height: 20px; width: auto; vertical-align: middle; }

/* ============ Lockable settings sections ============ */
.wq-section-locked input[readonly],
.wq-section-locked select:disabled {
  background-color: var(--wq-bg);
  cursor: not-allowed;
}
.wq-locked-checkbox {
  pointer-events: none;
  opacity: .6;
}

/* ============ Distinct settings cards (email / WhatsApp) ============ */
.wq-settings-card {
  border-inline-start-width: .25rem;
  border-inline-start-style: solid;
  border-inline-start-color: var(--wq-border);
  transition: box-shadow var(--wq-transition);
}
.wq-dept-logo-preview {
  width: 9rem;
  height: 5rem;
  border: 1px dashed var(--wq-border);
  border-radius: var(--wq-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  flex-shrink: 0;
}
.wq-dept-logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; padding: .35rem; }
.wq-settings-card-email {
  border-inline-start-color: var(--wq-primary);
}
.wq-settings-card-email h6 i { color: var(--wq-primary); }
.wq-settings-card-whatsapp {
  border-inline-start-color: #25d366;
}
.wq-settings-card-whatsapp h6 i { color: #1fa855; }

.wq-settings-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  padding: .75rem 1.1rem;
  border-radius: var(--wq-radius-sm);
  margin-bottom: 1.25rem;
}
.wq-settings-heading i { margin-inline-end: .35rem; }
.wq-settings-heading-email {
  background: linear-gradient(135deg, var(--wq-primary), var(--wq-primary-dark));
}
.wq-settings-heading-whatsapp {
  background: linear-gradient(135deg, #25d366, #1fa855);
}

/* ================= Settings panels =================
   One panel per kind of setting: a dark header with white text, a light tint of the same colour
   behind the content, and a border in the header colour. The variant sets the colour pair. */
/* Show/hide password eye (added by site.js). The button sits on the left in both RTL and LTR boxes. */
.wq-pw-wrap { position: relative; }
.wq-pw-wrap > .form-control { padding-left: 2.6rem; }
.wq-pw-wrap > .form-control.is-invalid,
.wq-pw-wrap > .form-control.is-valid { padding-left: 4.6rem; background-position: left 2.6rem center; }
.wq-pw-wrap > .form-control::-ms-reveal { display: none; }
.wq-pw-toggle {
  position: absolute; top: 50%; left: .45rem; transform: translateY(-50%);
  border: 0; background: transparent; color: #6c757d; padding: .2rem .4rem; line-height: 1;
  border-radius: .35rem; font-size: 1.05rem;
}
.wq-pw-toggle:hover { color: var(--wq-primary-dark, #1b2a4a); background: rgba(0,0,0,.05); }
.wq-pw-wrap > .form-control:disabled ~ .wq-pw-toggle { pointer-events: none; opacity: .4; }

.wq-panel {
  --wq-panel: var(--wq-primary);
  --wq-panel-tint: #edf2f8;
  border: 1px solid var(--wq-panel);
  border-radius: .75rem;
  background: var(--wq-panel-tint);
  overflow: hidden;
  margin-bottom: 1.25rem;
  box-shadow: var(--wq-shadow-xs);
}
.wq-panel-header {
  background: var(--wq-panel);
  color: #fff;
  padding: .7rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  font-weight: 700;
  font-size: .98rem;
}
.wq-panel-header .bi { margin-inline-end: .4rem; }
.wq-panel-header .btn { font-weight: 500; }
.wq-panel-body { padding: 1.1rem 1.25rem; }
.wq-panel-body > :last-child { margin-bottom: 0; }
.wq-panel-desc { font-size: .86rem; color: #4b5563; margin-bottom: 1rem; }
.wq-panel .form-text { color: #4b5563; }
.wq-panel .form-text.wq-field-hint { color: #0b6e8a; }
.wq-panel .table { --bs-table-bg: transparent; }
.wq-panel-footer {
  border-top: 1px solid color-mix(in srgb, var(--wq-panel) 25%, transparent);
  padding: .8rem 1.25rem;
  background: color-mix(in srgb, var(--wq-panel-tint) 60%, #fff);
}
.wq-panel-navy { --wq-panel: #0d3b66; --wq-panel-tint: #edf2f8; }
.wq-panel-teal { --wq-panel: #0f5f66; --wq-panel-tint: #e9f4f5; }
.wq-panel-purple { --wq-panel: #4c3a85; --wq-panel-tint: #f1eef9; }
.wq-panel-green { --wq-panel: #1f6b45; --wq-panel-tint: #eaf5ef; }
.wq-panel-whatsapp { --wq-panel: #128c4a; --wq-panel-tint: #e8f6ee; }
.wq-panel-gold { --wq-panel: #8a5f12; --wq-panel-tint: #fbf4e6; }
.wq-panel-slate { --wq-panel: #37475a; --wq-panel-tint: #eff2f6; }
.wq-panel-red { --wq-panel: #9b1c1c; --wq-panel-tint: #fcefef; }
/* A form spanning several panels saves them together from one bar. */
.wq-panel-savebar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: rgba(247, 248, 250, .92);
  backdrop-filter: blur(4px);
  border-top: 1px solid var(--wq-border);
  padding: .75rem 0;
  margin-bottom: 1.25rem;
}
/* ================= Public hub (search homepage + QR verify page) ================= */
/* A light page over a faint drawn backdrop (mountains, palms, buildings), a white pill search box
   with a gold round button, white cards, and a dark teal footer under a wave with a gold line. */

.wq-hub {
  --hub-teal: #0d3a52;
  --hub-teal-2: #144d68;
  --hub-gold: #c9963f;
  --hub-gold-2: #e3b866;
  --hub-ink: #1b2b3a;
  --hub-muted: #6b7785;
  --hub-line: #e4e8ec;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #f7f8f9 0%, #f1f3f4 55%, #eceff0 100%);
  color: var(--hub-ink);
  font-family: 'WqCairo', 'DroidKufi', 'Segoe UI', Tahoma, sans-serif;
  overflow-x: hidden;
}

/* ---- Top bar: one button at the top-left ---- */
.wq-hub-nav { position: absolute; top: 1rem; left: 2.25rem; z-index: 5; display: flex; align-items: center; gap: .5rem; }
.wq-hub-nav-btn, .wq-hub-nav-link {
  display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; text-decoration: none;
  font-weight: 600; font-size: .95rem; border-radius: .7rem; padding: .6rem 1.35rem;
  transition: background-color .15s, color .15s;
}
.wq-hub-nav-btn { background: var(--hub-teal); color: #fff; border: 0; box-shadow: 0 .4rem 1rem rgba(13,58,82,.25); }
.wq-hub-nav-btn:hover, .wq-hub-nav-btn:focus { background: var(--hub-teal-2); color: #fff; }
.wq-hub-nav-btn .bi { font-size: 1.1rem; }
.wq-hub-nav-link { background: rgba(255,255,255,.8); color: var(--hub-teal); border: 1px solid var(--hub-line); }
.wq-hub-nav-link:hover { background: #fff; color: var(--hub-teal); }

.wq-hub-alerts { position: fixed; top: 4.5rem; inset-inline: 0; z-index: 20; display: grid; justify-items: center; gap: .5rem; padding-inline: 1rem; pointer-events: none; }
.wq-hub-alerts .alert { pointer-events: auto; max-width: 640px; width: 100%; box-shadow: 0 .75rem 2rem rgba(13,58,82,.18); }

/* ---- Pages on the public layout (_Layout): logo at the start, actions at the end ---- */
.wq-inner-nav { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 2.25rem 0; }
.wq-inner-brand img { height: 64px; width: auto; display: block; }
.wq-inner-actions { display: flex; align-items: center; gap: .5rem; }
.wq-inner-main { padding-bottom: 6.5rem; }
.wq-hub.wq-plain { background: #fff; }
.wq-info-nav { border-radius: var(--wq-card-radius); overflow: hidden; box-shadow: var(--wq-shadow); }
.wq-info-nav .list-group-item { border-color: #edf0f3; }
.wq-hub-inner .container > .row section,
.wq-hub-inner .col-lg-9 > section { background: #fff; border-radius: var(--wq-card-radius); box-shadow: var(--wq-shadow); padding: 1.5rem 1.75rem; }
@media (max-width: 575.98px) {
  .wq-inner-nav { padding: .75rem 1rem 0; }
  .wq-inner-brand img { height: 44px; }
}

/* ---- Main area with the backdrop ---- */
.wq-hub-main { position: relative; flex: 1 0 auto; display: flex; flex-direction: column; isolation: isolate; }
.wq-hub-scenery { position: absolute; inset-inline: 0; bottom: 0; width: 100%; height: min(460px, 70%); z-index: -1; opacity: .9; pointer-events: none; }
.wq-hub-page { width: 100%; max-width: 1280px; margin-inline: auto; padding: 1.75rem 1.5rem 5.5rem; }

.wq-hub-head { text-align: center; }
.wq-hub-logo img { height: clamp(84px, 9vw, 112px); width: auto; max-width: 100%; }
.wq-hub-lead { font-size: .98rem; color: #4f5b67; margin: 2.75rem 0 1.5rem; }

.wq-hub-search {
  display: flex; align-items: center; gap: .4rem; max-width: 860px; margin: 0 auto;
  background: #fff; border-radius: 999px; padding: .4rem .4rem .4rem .4rem;
  box-shadow: 0 .6rem 1.8rem rgba(27,43,58,.08), 0 0 0 1px rgba(27,43,58,.04);
}
.wq-hub-search:focus-within { box-shadow: 0 .6rem 1.8rem rgba(27,43,58,.1), 0 0 0 2px rgba(201,150,63,.45); }
.wq-hub-search-input {
  flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent;
  color: var(--hub-ink); font-size: 1.02rem; font-weight: 600; padding: .65rem 1.3rem;
}
.wq-hub-search-input::placeholder { color: #8f99a4; font-weight: 400; }
.wq-hub-search-clear { flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 0; background: transparent; color: #7b8691; }
.wq-hub-search-clear:hover { background: #f1f3f5; color: var(--hub-ink); }
.wq-hub-search-btn {
  flex-shrink: 0; width: 4.2rem; height: 2.9rem; border-radius: 999px; border: 0;
  background: linear-gradient(135deg, var(--hub-gold-2), var(--hub-gold));
  color: var(--hub-ink); font-size: 1.25rem; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 .3rem .8rem rgba(201,150,63,.35); transition: filter .15s, transform .15s;
}
.wq-hub-search-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }

/* ---- Below the search ---- */
.wq-hub-body { margin-top: 1.5rem; }

.wq-hub-refine {
  max-width: 1120px; margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .9rem 1rem;
  background: #fff; border-radius: 1.1rem; padding: 1.1rem 1.5rem 1.25rem;
  box-shadow: 0 .6rem 1.8rem rgba(27,43,58,.07);
}
.wq-hub-refine-field { display: grid; gap: .35rem; flex: 0 1 13rem; min-width: 10rem; }
.wq-hub-refine-field.is-grow { flex: 1 1 18rem; }
.wq-hub-refine-field label { font-size: .85rem; font-weight: 600; color: var(--hub-ink); }
.wq-hub-field { position: relative; }
.wq-hub-field > .bi { position: absolute; top: 50%; inset-inline-start: .85rem; transform: translateY(-50%); color: #4f5b67; pointer-events: none; z-index: 1; }
.wq-hub-field .form-control, .wq-hub-field .form-select {
  border-radius: .65rem; border-color: #dfe4e9; padding-block: .6rem; padding-inline-start: 2.4rem; font-size: .92rem; color: var(--hub-ink);
}
.wq-hub-field .form-control:focus, .wq-hub-field .form-select:focus { border-color: var(--hub-gold); box-shadow: 0 0 0 .2rem rgba(201,150,63,.15); }
.wq-hub-refine-actions { display: flex; gap: .6rem; }

.wq-hub-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; text-decoration: none; white-space: nowrap;
  border-radius: 999px; padding: .65rem 2rem; font-weight: 700; font-size: .95rem;
  background: var(--hub-teal); color: #fff; border: 1px solid var(--hub-teal); transition: background-color .15s, color .15s;
}
.wq-hub-pill:hover, .wq-hub-pill:focus { background: var(--hub-teal-2); border-color: var(--hub-teal-2); color: #fff; }
.wq-hub-pill.is-outline { background: #fff; color: var(--hub-ink); border-color: #d6dce2; font-weight: 600; }
.wq-hub-pill.is-outline:hover, .wq-hub-pill.is-outline:focus { background: #f3f5f7; color: var(--hub-ink); }

.wq-hub-identity {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: center;
  width: fit-content; max-width: 100%; margin: 1.5rem auto 0;
  background: #fff; border-radius: 999px; padding: .45rem 1.1rem .45rem .45rem;
  box-shadow: 0 .4rem 1.2rem rgba(27,43,58,.07); font-size: .92rem; color: var(--hub-ink);
}
.wq-hub-identity-icon {
  width: 2.2rem; height: 2.2rem; border-radius: 50%; flex-shrink: 0;
  background: #f6ead5; color: var(--hub-gold); display: inline-flex; align-items: center; justify-content: center;
}
.wq-hub-identity strong { font-weight: 700; }
.wq-hub-identity-sep { width: 1px; height: 1.1rem; background: #d6dce2; }

.wq-hub-count { margin: .5rem 0 .9rem; text-align: start; font-weight: 600; color: var(--hub-ink); }

/* 4 cards a row on wide screens, then 3, 2 and 1; a page holds 12 (HomeController.PageSize). */
.wq-hub-docs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
@media (max-width: 1199.98px) { .wq-hub-docs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899.98px) { .wq-hub-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* A thin border so each card holds its edge on the light page, a gold line along the top, and a
   lift with a teal border on hover. */
.wq-hub-doc {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid #e3e8ec; border-radius: 1rem; padding: 1.15rem 1.05rem 1.1rem;
  box-shadow: 0 .6rem 1.8rem rgba(27,43,58,.07);
  display: flex; flex-direction: column; gap: 1rem;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.wq-hub-doc::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--hub-gold), #e3b866, var(--hub-gold));
}
.wq-hub-doc:hover {
  transform: translateY(-4px); border-color: rgba(29,106,126,.45);
  box-shadow: 0 1.1rem 2.6rem rgba(27,43,58,.13);
}
.wq-hub-doc-main { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex: 1 1 auto; }
.wq-hub-doc-info { min-width: 0; flex: 1 1 auto; }
/* Always two lines tall (longer names end in "…", the full name is in the title tooltip), so the
   details and buttons line up across every card in a row. */
.wq-hub-doc-title {
  font-size: 1.02rem; font-weight: 800; color: var(--hub-ink); margin: 0 0 .5rem; line-height: 1.6;
  min-height: 3.2em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wq-hub-doc-meta { font-size: .78rem; color: var(--hub-muted); display: flex; align-items: center; gap: .4rem; line-height: 1.9; }
.wq-hub-doc-meta .bi { color: #4f5b67; }
.wq-hub-doc-emblem {
  position: relative; flex-shrink: 0; width: 4.6rem; height: 4.6rem; border-radius: 50%;
  background: #eef1f4; display: flex; align-items: center; justify-content: center; padding: .7rem; overflow: hidden;
}
.wq-hub-doc-emblem img { max-width: 100%; max-height: 100%; object-fit: contain; }
.wq-hub-doc-emblem > .bi-file-earmark-text { font-size: 2.1rem; color: #2f3e4c; }
.wq-hub-doc-award { position: absolute; bottom: 1rem; left: 1.2rem; font-size: .95rem; color: var(--hub-gold); }
.wq-hub-doc-actions { display: flex; gap: .6rem; }
.wq-hub-btn {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; white-space: nowrap; text-decoration: none;
  border-radius: .55rem; padding: .55rem .6rem; font-weight: 700; font-size: .84rem;
  background: var(--hub-teal); color: #fff; border: 1px solid var(--hub-teal); transition: background-color .15s, color .15s;
}
.wq-hub-btn:hover, .wq-hub-btn:focus { background: var(--hub-teal-2); border-color: var(--hub-teal-2); color: #fff; }
/* The square share button beside the download buttons: outlined, so the downloads stay the main action. */
.wq-hub-btn.is-icon { flex: 0 0 2.4rem; padding-inline: 0; background: #fff; color: var(--hub-teal); border-color: #cfd8de; }
.wq-hub-btn.is-icon:hover, .wq-hub-btn.is-icon:focus { background: #f1f5f6; color: var(--hub-teal); border-color: var(--hub-teal); }
/* Three buttons must always fit the card: they may shrink, sit a little tighter, and on a narrow
   card the download buttons drop their small icons (the card is a size container for that). */
.wq-hub-doc { container-type: inline-size; }
.wq-hub-doc-actions { gap: .45rem; }
.wq-hub-doc-actions .wq-hub-btn { min-width: 0; overflow: hidden; }
.wq-hub-doc-actions:has(.is-icon) .wq-hub-btn:not(.is-icon) { padding-inline: .4rem; gap: .35rem; }
@container (max-width: 300px) {
  .wq-hub-doc-actions:has(.is-icon) .wq-hub-btn:not(.is-icon) .bi { display: none; }
}

/* How to get a document: three numbered boxes under the search, before any search. */
.wq-hub-steps { max-width: 1000px; margin: 3rem auto 0; text-align: center; }
.wq-hub-steps-title { font-weight: 800; font-size: 1.35rem; color: var(--hub-ink); margin-bottom: .55rem; }
.wq-hub-steps-bar { width: 3.25rem; height: 3px; border-radius: 3px; background: var(--hub-gold); margin: 0 auto 1.75rem; }
.wq-hub-steps-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.wq-hub-step {
  position: relative; background: #fff; border-radius: 1rem; padding: 1.75rem 1.25rem 1.5rem;
  box-shadow: 0 .6rem 1.8rem rgba(27,43,58,.08); transition: transform .2s, box-shadow .2s;
}
.wq-hub-step:hover { transform: translateY(-3px); box-shadow: 0 1rem 2.4rem rgba(27,43,58,.12); }
.wq-hub-step-num {
  position: absolute; top: 1rem; inset-inline-start: 1rem; width: 2rem; height: 2rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--hub-gold-2), var(--hub-gold)); color: var(--hub-ink);
  font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.wq-hub-step-icon {
  width: 4.25rem; height: 4.25rem; margin: 0 auto 1rem; border-radius: 50%;
  background: #eef1f4; color: var(--hub-teal); display: flex; align-items: center; justify-content: center; font-size: 1.75rem;
}
.wq-hub-step h3 { font-weight: 800; font-size: 1.05rem; color: var(--hub-ink); margin-bottom: .45rem; }
.wq-hub-step p { font-size: .86rem; color: var(--hub-muted); line-height: 1.85; margin: 0; }

.wq-hub-state {
  max-width: 560px; margin: 1rem auto; text-align: center;
  background: #fff; border-radius: 1.1rem; padding: 2.1rem 1.75rem; color: var(--hub-muted);
  box-shadow: 0 .6rem 1.8rem rgba(27,43,58,.07);
}
.wq-hub-state-icon {
  width: 3.8rem; height: 3.8rem; margin: 0 auto 1rem; border-radius: 50%;
  background: #eef1f4; color: var(--hub-teal); display: flex; align-items: center; justify-content: center; font-size: 1.7rem;
}
.wq-hub-state-icon.is-warning { background: #fdf3e1; color: #b7791f; }
.wq-hub-state-title { font-size: 1.12rem; font-weight: 800; color: var(--hub-ink); margin-bottom: .4rem; }
.wq-hub-state .wq-hub-pill { margin-top: .4rem; }
.wq-hub-empty { border: 1px solid #e3e8ec; }
.wq-hub-empty-art { width: 170px; height: auto; display: block; margin: 0 auto .9rem; }
.wq-hub-empty-tips {
  list-style: none; padding: .9rem 1.1rem; margin: 0 0 1rem; text-align: start;
  background: #f6f8f9; border-radius: .8rem; font-size: .88rem; line-height: 1.8;
}
.wq-hub-empty-tips li { display: flex; gap: .5rem; align-items: flex-start; }
.wq-hub-empty-tips .bi { color: var(--hub-gold); margin-top: .25rem; flex-shrink: 0; }

.wq-hub .page-link { background: #fff; border-color: var(--hub-line); color: var(--hub-teal); border-radius: .55rem; }
.wq-hub .page-link:hover { background: #f1f3f5; }
.wq-hub .page-item.active .page-link { background: var(--hub-teal); border-color: var(--hub-teal); color: #fff; }

/* ---- Verify page ---- */
.wq-verify-seal {
  width: 4.75rem; height: 4.75rem; border-radius: 50%; margin: .5rem auto 1rem;
  display: flex; align-items: center; justify-content: center; font-size: 2.3rem;
  background: #fff; box-shadow: 0 .6rem 1.6rem rgba(27,43,58,.1);
}
.wq-verify-seal.is-valid { color: #1f7a52; }
.wq-verify-seal.is-invalid { color: var(--wq-danger); }
.wq-verify-title { text-align: center; font-weight: 800; font-size: 1.4rem; color: var(--hub-ink); margin-bottom: .3rem; }
.wq-verify-subtitle { text-align: center; color: var(--hub-muted); font-size: .92rem; margin-bottom: 1.5rem; }
.wq-verify-card {
  max-width: 520px; margin: 0 auto; background: #fff; border-radius: 1.1rem; padding: 1.4rem 1.6rem;
  box-shadow: 0 .6rem 1.8rem rgba(27,43,58,.08); border-top: 4px solid var(--hub-gold);
}
.wq-verify-row { display: flex; align-items: flex-start; gap: .85rem; padding: .8rem 0; }
.wq-verify-row + .wq-verify-row { border-top: 1px solid #eef1f4; }
.wq-verify-row-icon {
  width: 2.4rem; height: 2.4rem; border-radius: 50%; flex-shrink: 0;
  background: #eef1f4; color: var(--hub-teal); display: flex; align-items: center; justify-content: center;
}
.wq-verify-row-label { color: var(--hub-muted); font-size: .78rem; margin-bottom: .1rem; }
.wq-verify-row-value { color: var(--hub-ink); font-weight: 700; font-size: 1rem; word-break: break-word; }
.wq-verify-footer-note { margin-top: 1.4rem; font-size: .8rem; color: var(--hub-muted); display: flex; align-items: center; justify-content: center; gap: .4rem; }
.wq-verify-dept-logo { max-height: 4rem; max-width: 60%; object-fit: contain; margin-bottom: .75rem; }
.wq-verify-downloads { max-width: 520px; margin: 1.2rem auto 0; }
.wq-verify-downloads .wq-hub-btn { padding-top: .75rem; padding-bottom: .75rem; font-size: .95rem; }

/* ---- Footer ---- */
.wq-hub-footer { position: relative; background: var(--hub-teal); color: rgba(255,255,255,.8); font-size: .9rem; }
.wq-hub-footer-wave { position: absolute; bottom: 100%; left: 0; display: block; width: 100%; height: 70px; margin-bottom: -1px; }
.wq-hub-footer-inner {
  max-width: 1440px; margin-inline: auto; padding: 1.25rem 2.5rem 1.6rem;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem 2rem;
}
.wq-hub-footer-brand img { height: 56px; width: auto; display: block; }
.wq-hub-footer-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; row-gap: .4rem; }
.wq-hub-footer-links a { color: #fff; text-decoration: none; padding-inline: 1.4rem; position: relative; }
.wq-hub-footer-links a + a::before { content: ""; position: absolute; inset-inline-start: 0; top: 20%; height: 60%; width: 1px; background: var(--hub-gold); opacity: .8; }
.wq-hub-footer-links a:hover { color: var(--hub-gold-2); }
.wq-hub-footer-copy { font-size: .82rem; color: rgba(255,255,255,.75); }
.wq-hub-footer-end { display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }
/* The platform QR on the search pages: a small white tile with a short caption, linking to the full card. */
.wq-hub-footer-qr {
  display: inline-flex; align-items: center; gap: .65rem; text-decoration: none;
  color: rgba(255,255,255,.85); font-size: .76rem; line-height: 1.5;
}
.wq-hub-footer-qr img {
  width: 68px; height: 68px; background: #fff; border-radius: .55rem; padding: 3px;
  box-shadow: 0 0 0 2px rgba(201,150,63,.65); transition: transform .2s;
}
.wq-hub-footer-qr:hover { color: var(--hub-gold-2); }
.wq-hub-footer-qr:hover img { transform: scale(1.06); }

@media (max-width: 991.98px) {
  .wq-hub-footer-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .wq-hub-footer-end { align-items: center; }
  .wq-hub-refine-field, .wq-hub-refine-field.is-grow { flex: 1 1 calc(50% - .5rem); }
  .wq-hub-refine-field.is-grow { flex-basis: 100%; }
  .wq-hub-refine-actions { width: 100%; }
  .wq-hub-refine-actions .wq-hub-pill { flex: 1; }
}
@media (max-width: 575.98px) {
  .wq-hub-nav { left: 1rem; top: .75rem; }
  .wq-hub-nav-btn span, .wq-hub-nav-link span { display: none; }
  .wq-hub-nav-btn, .wq-hub-nav-link { padding: .55rem .75rem; }
  .wq-hub-page { padding: 3.75rem 1rem 4.5rem; }
  .wq-hub-lead { font-size: .88rem; }
  .wq-hub-search-input { padding-inline: 1rem .25rem; font-size: .92rem; }
  .wq-hub-search-btn { width: 3.4rem; }
  .wq-hub-refine { padding: 1rem; }
  .wq-hub-refine-field, .wq-hub-refine-field.is-grow { flex-basis: 100%; }
  .wq-hub-docs { grid-template-columns: minmax(0, 1fr); }
  .wq-hub-footer-brand img { height: 46px; }
  .wq-hub-steps { margin-top: 2.25rem; }
  .wq-hub-steps-row { grid-template-columns: minmax(0, 1fr); }
  .wq-hub-lead { margin-top: 2rem; }
  .wq-hub-footer-links a { padding-inline: .8rem; }
  .wq-hub-footer-links a + a::before { display: none; }
  .wq-hub-footer-wave { height: 40px; }
}

.wq-guide-btn {
  background: var(--wq-accent);
  color: #1a1206;
  font-weight: 600;
  border: none;
  border-radius: 999px;
  padding: .4rem 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  box-shadow: 0 2px 10px rgba(201, 150, 44, .35);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.wq-guide-btn:hover, .wq-guide-btn:focus {
  background: #8a5f22;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(201, 150, 44, .5);
}

/* ================= SweetAlert2 confirmation dialogs ================= */
.wq-swal-popup {
  font-family: 'DroidKufi', 'Segoe UI', Tahoma, Arial, sans-serif;
  border-radius: var(--wq-card-radius);
  direction: rtl;
}
.wq-swal-popup .swal2-title,
.wq-swal-popup .swal2-html-container {
  font-family: inherit;
}
.wq-swal-popup .swal2-actions {
  gap: .6rem;
}
.wq-swal-popup .swal2-confirm,
.wq-swal-popup .swal2-cancel {
  border-radius: var(--wq-radius-sm) !important;
  font-weight: 600;
  box-shadow: none !important;
}

/* Purchases page — numbered step layout (quantity/price -> bank transfer -> proof upload) */
.wq-purchase-step {
  display: flex;
  gap: .9rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px dashed var(--wq-border);
}
.wq-purchase-step.wq-purchase-step-last {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: .5rem;
}
.wq-purchase-step-num {
  flex-shrink: 0;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--wq-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .95rem;
}
.wq-purchase-step-body {
  flex: 1;
  min-width: 0;
}

/* Design libraries (frames, phrases, logos, dividers): thumbnails on a checkerboard so
   transparent areas are visible, used by the SuperAdmin page and the designer picker. */
.wq-library-thumb {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-bottom: 1px solid var(--wq-border);
  background: repeating-conic-gradient(#f1f3f5 0% 25%, #ffffff 0% 50%) 50% / 16px 16px;
}
.wq-library-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.wq-library-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; max-height: 260px; overflow-y: auto; }
.wq-library-picker button { border: 1px solid var(--wq-border); border-radius: var(--wq-radius-sm); background: #fff; padding: 0; text-align: center; font-size: .75rem; }
.wq-library-picker button:hover, .wq-library-picker button:focus-visible { border-color: var(--wq-primary-light); box-shadow: var(--wq-shadow); }
.wq-library-picker .wq-library-thumb { height: 64px; border-bottom: 1px solid var(--wq-border); }
.wq-library-picker span { display: block; padding: 2px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Image preview before it joins a design (image-prep.js) */
.wq-imgprep-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 12rem;
    padding: .75rem;
    border: 1px solid #dfe5ea;
    border-radius: .5rem;
    background: repeating-conic-gradient(#fff 0 25%, #e9edf0 0 50%) 0 0 / 20px 20px;
}
.wq-imgprep-stage canvas { display: block; max-width: 100%; max-height: 48vh; }
.wq-imgprep-options { margin: .5rem 1.5rem 0 0; max-width: 24rem; }
.wq-imgprep-scale { display: flex; justify-content: space-between; margin: -.2rem 0 .5rem; font-size: .78rem; color: #6b7a86; }
/* Public attendance screen (/f/{token}) and its builder tab */
.wq-attend { max-width: 34rem; margin-inline: auto; }
.wq-attend-head { text-align: center; }
.wq-attend-head .wq-verify-dept-logo { margin-bottom: .8rem; }
.wq-attend-dept { color: var(--hub-muted); font-size: .95rem; font-weight: 600; margin-bottom: 1rem; }
.wq-attend-head .wq-verify-title { margin: 0; font-size: clamp(1.55rem, 5vw, 1.95rem); line-height: 1.5; color: var(--hub-teal); }
.wq-attend-head .wq-verify-title::after { content: ""; display: block; width: 3.5rem; height: 3px; margin: .85rem auto 0; border-radius: 3px; background: var(--hub-gold); }
.wq-attend-course { margin-top: 1rem; font-size: 1.12rem; font-weight: 600; line-height: 1.8; color: var(--wq-primary-light); }
.wq-attend-dates { display: inline-flex; align-items: center; gap: .4rem; margin-top: .8rem; padding: .3rem .95rem; border-radius: 999px; background: #e9f1f4; color: var(--hub-teal); font-size: .92rem; font-weight: 600; }
.wq-attend-notes { max-width: 520px; margin: 1.1rem auto 0; padding: .7rem 1rem; border-radius: .65rem; background: #fbf3e2; color: #7a5a1e; font-size: .95rem; line-height: 1.9; white-space: pre-line; }
.wq-attend-form { margin-top: 1.5rem; }
.wq-attend-form .wq-hub-btn { min-height: 2.9rem; }
.wq-attend-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.wq-attend-privacy { margin: .8rem 0 0; font-size: .82rem; color: #6b7a86; text-align: center; }
.wq-attendance-qr { display: block; width: 100%; max-width: 15rem; margin-inline: auto; border: 1px solid #e3e8ec; border-radius: .5rem; }.wq-attend-optional { color: #7a8894; font-size: .85em; font-weight: 400; }
.wq-att-group-title { display: flex; align-items: center; gap: .45rem; margin-bottom: .25rem; font-weight: 700; color: var(--wq-primary); }
.wq-att-group-hint { margin-bottom: .9rem; padding-bottom: .7rem; border-bottom: 1px solid #e3e8ec; font-size: .85rem; color: #6b7a86; }
.wq-att-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid #eef1f4; }
.wq-att-row-main { flex: 1 1 auto; min-width: 0; }
.wq-att-subtitle { margin: 1rem 0 .5rem; font-weight: 600; }
.wq-att-required { flex: 0 0 7rem !important; width: 7rem; }

/* A wide, long table scrolls inside its own box: the header row stays on top and, from tablet
   width up, the actions column stays on the page's left edge. Sticky cells need an opaque
   background, and separate borders, or collapsed borders scroll away from them. */
.wq-table-scroll { max-height: 70vh; overflow: auto; }
.wq-table-scroll .table { --bs-table-bg: #fff; margin-bottom: 0; border-collapse: separate; border-spacing: 0; }
.wq-table-scroll th, .wq-table-scroll td { white-space: nowrap; }
.wq-table-scroll thead th { position: sticky; top: 0; z-index: 2; }
@media (min-width: 768px) {
  .wq-table-scroll th:last-child,
  .wq-table-scroll td:last-child { position: sticky; inset-inline-end: 0; z-index: 1; }
  .wq-table-scroll thead th:last-child { z-index: 3; }
  .wq-table-scroll th:last-child::before,
  .wq-table-scroll td:last-child::before {
    content: ""; position: absolute; inset-block: 0; inset-inline-start: -.5rem; width: .5rem;
    background: linear-gradient(to right, rgba(15, 39, 56, .1), transparent); pointer-events: none;
  }
}

/* Document template cards: the top edge and icon carry the status colour. */
.wq-doc-card {
  --wq-doc-accent: var(--wq-muted);
  position: relative; display: flex; flex-direction: column; height: 100%; padding: 1.1rem;
  background: var(--wq-surface); border: 1px solid var(--wq-border); border-top: 4px solid var(--wq-doc-accent);
  border-radius: var(--wq-card-radius); box-shadow: var(--wq-shadow-xs);
  transition: box-shadow var(--wq-transition), transform var(--wq-transition);
}
.wq-doc-card:hover { box-shadow: var(--wq-shadow-lg); transform: translateY(-2px); }
.wq-doc-card-approved { --wq-doc-accent: var(--wq-accent); }
.wq-doc-card-published { --wq-doc-accent: var(--wq-success); }
.wq-doc-card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .8rem; }
.wq-doc-card-icon {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.6rem; height: 2.6rem;
  border-radius: var(--wq-radius-sm); font-size: 1.25rem; color: var(--wq-doc-accent);
  background: color-mix(in srgb, var(--wq-doc-accent) 13%, transparent);
}
.wq-doc-card-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .25rem; }
.wq-doc-card-title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  min-height: 2.9em; margin-bottom: .8rem; font-size: 1.02rem; font-weight: 700; line-height: 1.45; color: var(--wq-ink);
}
.wq-doc-card-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .8rem; }
.wq-doc-card-stat { min-width: 0; padding: .45rem .6rem; border-radius: var(--wq-radius-sm); background: var(--wq-bg); }
.wq-doc-card-stat-label { display: block; font-size: .74rem; color: var(--wq-muted); }
.wq-doc-card-stat-value { display: block; font-size: 1rem; font-weight: 700; color: var(--wq-primary); }
.wq-doc-card-warning { margin-bottom: .8rem; font-size: .82rem; color: var(--wq-danger); }

/* An action that can't be taken yet: the button ignores the pointer so the wrapper gets the
   hover and the click that explain why. */
.wq-locked { display: inline-block; cursor: not-allowed; }
.wq-locked .btn { pointer-events: none; }