﻿/* ==========================================================================
   gw5-compat.css — Bootstrap 3 classes that are WRITTEN FROM VB AT RUNTIME
   and therefore cannot be renamed without editing the code-behind.

   Load AFTER bootstrap 5 and BEFORE gw5-theme.css.

   Everything in this file exists because a .vb file emits it. Each rule names
   the file and line that produces it. When that VB is eventually changed, the
   matching rule here can be deleted — and not before.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SIDEBAR NAV STATE
   MasterPage.master.vb lines 19-28 and 185-346 write these onto the nav:
       ul_Quiz.Attributes.Add("class", "sub")        collapsed
       ul_Quiz.Attributes.Add("class", "sub show")   expanded
       SubMenu_Quiz.Attributes.Add("class", "notExpand" | "expand")
       hl_QuizList.Attributes.Add("class", "active")
   Renaming any of these to a Bootstrap collapse class breaks the menu.
   -------------------------------------------------------------------------- */
/* Indent: the rule sits under the centre of the section's chevron (link
   padding .625rem + half a 16px icon = 1.125rem). It was 1.5rem margin PLUS
   1.5rem padding, which pushed every page link 83px in on a 260px sidebar. */
.gw-nav ul.sub {
  display: none;
  list-style: none;
  margin: .125rem 0 .375rem 1.125rem;
  padding-left: .375rem;
  border-left: 1px solid var(--gw-line);
}
.gw-nav ul.sub.show { display: block; }
.gw-nav ul.sub li { list-style: none; }

/* section headers: .expand = open, .notExpand = closed. The chevron is drawn
   with a pseudo-element so the VB does not have to emit an icon. */
.gw-nav a.expand,
.gw-nav a.notExpand { position: relative; }
.gw-nav a.expand > i:first-child,
.gw-nav a.notExpand > i:first-child,
.gw-nav a.expand > svg:first-child,
.gw-nav a.notExpand > svg:first-child { transition: transform .15s ease; }
.gw-nav a.expand > i:first-child,
.gw-nav a.expand > svg:first-child { transform: rotate(90deg); }
/* Section-header labels: same weight as the old Supr headers, so they read as
   headings above the indented page links, not as page links themselves. */
.gw-nav-root > li > a { color: var(--gw-ink); font-weight: 500; }

/* .active is written onto the current page's link */
.gw-nav a.active {
  background: var(--gw-nav-active-bg);
  color: var(--gw-accent);
  font-weight: 500;
}
.gw-nav a.active::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 2px 2px 0;
  background: var(--gw-accent);
}
.gw-shell-collapsed .gw-nav a.active::before { display: none; }

/* --------------------------------------------------------------------------
   2. QUIZ FOLDER LINKS
   MasterPage.master.vb lines 96-104 build each folder as:
       <a class="span_icons" href="...">
         <i class="s12 icomoon-icon-folder-2"></i>
         <span class="QFName txt">Name</span>
         <div class="span_icon pull-right">
           <i class="icomoon-icon-marker"  onclick="Change_Folder_Name(...)"></i>
           <i class="icomoon-icon-remove-4" onclick="Delete_Folder_Name(...)"></i>
         </div>
       </a>
   The rename and delete icons only appear on hover — that behaviour came from
   an inline <style> in the old master and is reproduced here.
   -------------------------------------------------------------------------- */
.span_icons .span_icon { display: none; }
.span_icons:hover .span_icon,
.span_icons:focus-within .span_icon { display: block; }

/* In the BS5 sidebar a folder is a flex row like every other link: icon, name
   (takes the spare width, ellipsis when long), then the rename/delete pair
   pushed to the right edge. icons.css paints every icomoon glyph #353535 with
   5px side margins - on the navy sidebar that is 1.4:1, i.e. invisible. */
.gw-nav-root a.span_icons > i:first-child {
  color: var(--gw-faint); margin: 0; width: 16px; text-align: center; flex: 0 0 16px;
}
.gw-nav-root a.span_icons.active > i:first-child { color: var(--gw-accent); }
.gw-nav-root a.span_icons .QFName { flex: 1 1 auto; min-width: 0; max-width: none; }
.gw-nav-root a.span_icons .span_icon { margin-left: auto; float: none !important; white-space: nowrap; }
.gw-nav-root a.span_icons .span_icon i { margin: 0; }

.QFName {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
  display: inline-block;
  vertical-align: middle;
}

.span_icon i {
  cursor: pointer;
  padding: 2px 3px;
  border-radius: var(--gw-r-xs);
  color: var(--gw-faint);
}
.span_icon i:hover { color: var(--gw-ink); background: var(--gw-surface-3); }

/* --------------------------------------------------------------------------
   3. BOOTSTRAP 3 UTILITIES STILL EMITTED FROM VB OR LEFT IN MARKUP
   `pull-right` comes out of MasterPage.master.vb line 101. The rest are cheap
   insurance for any page not yet migrated by hand.
   -------------------------------------------------------------------------- */
.pull-right { float: right !important; }
.pull-left  { float: left !important; }
.text-right { text-align: right !important; }
.text-left  { text-align: left !important; }
.center-block { display: block; margin-left: auto; margin-right: auto; }
.hidden { display: none !important; }

/* Supr template size helpers used by the icon font (s12, s16, s20 …) */
.s12 { font-size: 12px; }
.s16 { font-size: 16px; }
.s20 { font-size: 20px; }
.txt { vertical-align: middle; }

/* --------------------------------------------------------------------------
   4. jQuery.validate
   The master configures errorClass 'invalid-feedback' now, but validation
   messages are injected as <label> elements, which are inline by default and
   would sit beside the field instead of under it.
   -------------------------------------------------------------------------- */
label.invalid-feedback { display: block; }
.form-control.error,
.form-select.error { border-color: var(--gw-danger); }

/* --------------------------------------------------------------------------
   5. LOADING OVERLAYS kept from the old master (#loading, .loader, .flipping)
   -------------------------------------------------------------------------- */
.loader { position: fixed; inset: 0; display: grid; place-items: center;
          background: rgba(255,255,255,.7); z-index: 2000; }
[data-bs-theme="dark"] .loader { background: rgba(11,14,20,.7); }

.flipping { display: flex; gap: 4px; justify-content: center; margin-top: 1rem; }
.flipping div {
  width: 10px; height: 10px; border-radius: 2px;
  background: var(--gw-accent);
  animation: gw-flip 1s infinite ease-in-out;
}
.flipping div:nth-child(2) { animation-delay: .1s }
.flipping div:nth-child(3) { animation-delay: .2s }
.flipping div:nth-child(4) { animation-delay: .3s }
.flipping div:nth-child(5) { animation-delay: .4s }
@keyframes gw-flip {
  0%, 80%, 100% { transform: scaleY(.6); opacity: .5 }
  40%           { transform: scaleY(1);  opacity: 1 }
}
@media (prefers-reduced-motion: reduce) {
  .flipping div { animation: none; }
}

/* icons.css:156 leaks onto .fade. Load order fixes display; these are
   the properties Bootstrap never sets. Do NOT add display here -
   .fade{display:...} would beat .modal{display:none}. */
.fade {
  margin-left: 0;
  margin-right: 0;
  vertical-align: baseline !important;
}
/* colour reset is scoped: a bare .fade{color:inherit} loads after Bootstrap
   and would override the text colour of .alert.fade and .toast.fade */
.modal.fade, .tab-pane.fade { color: inherit; }

/* --------------------------------------------------------------------------
   8. BOOTSTRAP 3 PANELS WRITTEN FROM VB
   13 code-behinds and App_Code/clsPortal.vb write
       <div class="panel panel-default toggle">
         <div class="panel-heading"><h4 class="panel-title">...</h4></div>
         <div class="panel-body pt0 pb0">...
   e.g. survey_create/step3.aspx.vb (Logic, one panel per question) and
   clsPortal.vb GenerateChart_QG_Survey (the charts on surveyreport.aspx).
   Bootstrap 5 has no .panel, so on a migrated page these were plain divs.
   Styled here to match .card / .card-header in gw5-theme.css, so a migrated
   page needs no VB change. (.toggle was Supr's collapse hook; it does nothing.)
   No overflow:hidden on .panel - step3's multiple-select drop-downs open
   inside it and would be cut off.
   -------------------------------------------------------------------------- */
.panel {
  background-color: var(--gw-surface);
  border: 1px solid var(--gw-line);
  border-radius: var(--gw-r-md);
  box-shadow: var(--gw-shadow-sm);
  margin-bottom: 1rem;
}
/* The flex row is on the HEADING, not the title: the title holds the
   question's own HTML (<strong>, two <p>s ...), and a flex title would have
   laid every run of text out side by side. */
.panel-heading {
  display: flex; align-items: center; gap: .5rem;
  background-color: var(--gw-head-bg, var(--gw-surface-2));   /* same band as .card-header */
  border-bottom: 1px solid var(--gw-head-line, var(--gw-line-strong));
  border-top-left-radius: calc(var(--gw-r-md) - 1px);
  border-top-right-radius: calc(var(--gw-r-md) - 1px);
  padding: .875rem 1.25rem;
}
.panel-heading::before {
  content: ""; width: 3px; height: 1em; border-radius: 2px;
  background: var(--gw-accent-strong); flex: 0 0 auto;
}
.panel-title {
  font-family: var(--gw-font); font-size: .9375rem; font-weight: 600;
  letter-spacing: -0.008em; color: var(--gw-ink); margin: 0;
  min-width: 0;
}
/* The title is the question text, which can carry the editor's own <p>. */
.panel-title > p { margin: 0; }
.panel-body { padding: 1.125rem 1.25rem; }
.panel-footer {
  border-top: 1px solid var(--gw-line); background: var(--gw-surface-2);
  padding: .875rem 1.25rem;
}

/* --------------------------------------------------------------------------
   9. SUPR SPACING HELPERS (mt10, pb20, mr5, mlm10 ...)
   Copied unchanged from /css/main.css (lines 65-411), which this master does
   not load. VB writes them (pt0, pb0, pt10, mb20, p25 ...) and so do the
   unmigrated pages' markup; without these the gaps between rows simply
   vanish. A migrated page's own markup uses Bootstrap 5's mt-3, pb-2 ...
   instead - these are for what VB writes.
   -------------------------------------------------------------------------- */
.m0 { margin: 0 !important; }
.m5 { margin: 5px !important; }
.m10 { margin: 10px !important; }
.m15 { margin: 15px !important; }
.m20 { margin: 20px !important; }
.m25 { margin: 25px !important; }
.m30 { margin: 30px !important; }
.mt0 { margin-top: 0 !important; }
.mt5 { margin-top: 5px !important; }
.mt10 { margin-top: 10px !important; }
.mt15 { margin-top: 15px !important; }
.mt20 { margin-top: 20px !important; }
.mt25 { margin-top: 25px !important; }
.mt30 { margin-top: 30px !important; }
.mt50 { margin-top: 50px !important; }
.mr0 { margin-right: 0 !important; }
.mr5 { margin-right: 5px !important; }
.mr10 { margin-right: 10px !important; }
.mr15 { margin-right: 15px !important; }
.mr20 { margin-right: 20px !important; }
.mr25 { margin-right: 25px !important; }
.mr30 { margin-right: 30px !important; }
.mb0 { margin-bottom: 0 !important; }
.mb5 { margin-bottom: 5px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb15 { margin-bottom: 15px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb25 { margin-bottom: 25px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb50 { margin-bottom: 50px !important; }
.ml0 { margin-left: 0 !important; }
.ml5 { margin-left: 5px !important; }
.ml10 { margin-left: 10px !important; }
.ml15 { margin-left: 15px !important; }
.ml20 { margin-left: 20px !important; }
.ml25 { margin-left: 25px !important; }
.ml30 { margin-left: 30px !important; }
.mlm5 { margin-top: -5px !important; }
.mlm10 { margin-top: -10px !important; }
.mlm15 { margin-top: -15px !important; }
.mlm20 { margin-top: -20px !important; }
.mlm25 { margin-top: -25px !important; }
.mtm5 { margin-top: -5px !important; }
.mtm10 { margin-top: -10px !important; }
.mtm15 { margin-top: -15px !important; }
.mtm20 { margin-top: -20px !important; }
.mtm25 { margin-top: -25px !important; }
.mrm5 { margin-top: -5px !important; }
.mrm10 { margin-top: -10px !important; }
.mrm15 { margin-top: -15px !important; }
.mrm20 { margin-top: -20px !important; }
.mrm25 { margin-top: -25px !important; }
.mbm5 { margin-top: -5px !important; }
.mbm10 { margin-top: -10px !important; }
.mbm15 { margin-top: -15px !important; }
.mbm20 { margin-top: -20px !important; }
.mbm25 { margin-top: -25px !important; }
.p0 { padding: 0 !important; }
.p5 { padding: 5px !important; }
.p10 { padding: 10px !important; }
.p15 { padding: 15px !important; }
.p20 { padding: 20px !important; }
.p25 { padding: 25px !important; }
.pt0 { padding-top: 0 !important; }
.pt5 { padding-top: 5px !important; }
.pt10 { padding-top: 10px !important; }
.pt15 { padding-top: 15px !important; }
.pt20 { padding-top: 20px !important; }
.pt25 { padding-top: 25px !important; }
.pr0 { padding-right: 0 !important; }
.pr5 { padding-right: 5px !important; }
.pr10 { padding-right: 10px !important; }
.pr15 { padding-right: 15px !important; }
.pr20 { padding-right: 20px !important; }
.pr25 { padding-right: 25px !important; }
.pb0 { padding-bottom: 0 !important; }
.pb5 { padding-bottom: 5px !important; }
.pb10 { padding-bottom: 10px !important; }
.pb15 { padding-bottom: 15px !important; }
.pb20 { padding-bottom: 20px !important; }
.pb25 { padding-bottom: 25px !important; }
.pl0 { padding-left: 0 !important; }
.pl5 { padding-left: 5px !important; }
.pl10 { padding-left: 10px !important; }
.pl15 { padding-left: 15px !important; }
.pl20 { padding-left: 20px !important; }
.pl25 { padding-left: 25px !important; }

/* ==========================================================================
   10. ASP.NET RadioButtonList / CheckBoxList (RepeatLayout="Table", the
   default). They render <td><input><label>...</label></td> cells with no
   spacing, so step 1's "Public" and "Private" ran together. Space after each
   box and between items; the box takes the theme colour.
   ========================================================================== */
td > input[type="radio"] + label,
td > input[type="checkbox"] + label { margin-left: .375rem; margin-right: 1.5rem; cursor: pointer; }
td > input[type="radio"],
td > input[type="checkbox"] { accent-color: var(--gw-accent-strong, #2468C0); vertical-align: -1px; }
