/* =========================================================
   OOCCVA – Consolidated UI CSS (REFactored + CW3 fixed)
   CW1 / CW3 / Cards / Sidebar / CW4 / Pagination
   ========================================================= */

/* ---------- Theme ---------- */
:root{
  --bg:#f4f4f2;
  --card:#fff;
  --text:#222;
  --muted:#777;

  --blue:#1f5fbf;
  --blueHover:#17498f;

  /* Used for borders/lines */
  --line:#e0e0e0;
  --lineDark:#b5b5b5;

  --red:#d94a3a;
  --yellow:#f5c24b;
  --amber:#e6a23c;

  --shadow:0 2px 4px rgba(0,0,0,.08);

  /* IMPORTANT:
     This is the “CW1 light blue fill” you’ve been chasing. */
  --cwBandBlue: rgba(31,95,191,.45);
}

/* ---------- Base ---------- */
html{ font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body{ margin:0; background:var(--bg); color:var(--text); }
*{ box-sizing:border-box; }
button{ font-family:inherit; }
h4{
  text-align:center;
  margin:0 0 8px;
  font-weight:600;
  letter-spacing:.04em;
}

/* ---------- Header utilities ---------- */
.d-tablefb{ display:table; width:100%; }
.d-tablefb-cell{ display:table-cell; vertical-align:middle; }
.wfb-100{ width:100%; }
.tarfb{ text-align:right; font-size:12px; color:#888; }

/* CW1: add breathing room under Top Level Only / Back row */
#cardWrapper .d-tablefb.wfb-100{ margin-bottom:10px; }

/* ---------- Inputs ---------- */
.txtbox{
  display:block;
  width:100%;
  min-width:260px;
  padding:10px 12px;
  border:1px solid #d0d0d0;
  border-radius:3px;
  outline:none;
  font-size:14px;
  resize:vertical;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.txtbox:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 2px rgba(31,95,191,.15);
}

/* ---------- Checkbox (Top Level Only) ---------- */
.regular-checkbox{
  appearance:none;
  width:16px; height:16px;
  border:1px solid #cacece;
  border-radius:2px;
  background:#fafafa;
  display:inline-block;
  vertical-align:middle;
  margin-right:6px;
  cursor:pointer;
  position:relative;
}
.regular-checkbox:checked{
  background:var(--yellow);
  border-color:#b89a31;
}
.regular-checkbox:checked:after{
  content:"✓";
  position:absolute;
  top:-1px; left:3px;
  font-size:12px;
  color:var(--text);
}

/* =========================================================
   Buttons
   ========================================================= */

/* Primary action buttons (Submit, etc.) */
.btnclass,.btnclass1,.btnclass2,.btnclass3{
  display:inline-block;
  height:44px;
  min-width:120px;
  padding:0 18px;
  font-weight:600;
  font-size:14px;
  background:var(--blue);
  color:#fff;
  border:0;
  border-radius:3px;
  cursor:pointer;
  line-height:44px;
  box-shadow:0 2px 4px rgba(0,0,0,.12);
  margin:6px 4px 0 0;
}
.btnclass:hover,.btnclass1:hover,.btnclass2:hover,.btnclass3:hover{ background:var(--blueHover); }

/* Pager buttons */
.btnclass4,.btnclass5,.btnclass6,.btnclass7{
  height:32px;
  min-width:90px;
  padding:0 14px;
  font-weight:600;
  font-size:13px;
  background:#fff;
  color:var(--text);
  border-radius:3px;
  border:1px solid #cfcfcf;
  cursor:pointer;
  line-height:30px;
  margin:0 4px;
  white-space:nowrap;
}
.btnclass4:hover,.btnclass5:hover,.btnclass6:hover,.btnclass7:hover{
  border-color:var(--blue);
  color:var(--blue);
}

/* Back buttons */
.btngoback,.btngoback2{
  height:30px;
  min-width:90px;
  padding:0 12px;
  font-weight:600;
  font-size:12px;
  background:#fff;
  color:var(--text);
  border-radius:3px;
  border:1px solid #d0d0d0;
  cursor:pointer;
  line-height:28px;
  margin-left:10px;
  vertical-align:top;
}
.btngoback:hover,.btngoback2:hover{ border-color:var(--red); color:var(--red); }
.tarfb .btngoback,.tarfb .btngoback2{ color:var(--text); }

/* =========================================================
   Collapsibles / Options (shared)
   ========================================================= */

.collapsible,.collapsible2,.collapsible3,.collapsible4{
  background:var(--blue);
  color:#fff;
  cursor:pointer;
  padding:12px 14px;
  width:100%;
  border:0;
  text-align:left;
  outline:none;
  font-size:14px;
  font-weight:600;
  margin:0;
}
.collapsible:hover,.collapsible2:hover,.collapsible3:hover,.collapsible4:hover{
  background:var(--blueHover);
  color:#fff;
}

/* “Answer options” buttons */
.options{
  background:var(--bg);
  color:var(--text);
  padding:10px 14px;
  width:100%;
  border-bottom:1px solid var(--line);
  cursor:pointer;
}
.options:hover{ background:var(--red); color:#fff; }

.chosen{ background:var(--yellow); color:var(--text); font-weight:600; }
.chosen:hover{ background:var(--amber); color:#fff; }

.reasons{ background:var(--red); color:#fff; }
.insertNewAnswer{ background:var(--blue); color:#fff; font-weight:600; }
.insertNewAnswer:hover{ background:var(--blueHover); }

/* CW1 + CW3 "Enter new answer" always white */
#cardWrapper .insertNewAnswer,
#cardWrapper3 button.cw3-newabtn{ color:#fff !important; }

/* =========================================================
   Dropdown containers (shared)
   ========================================================= */
.content2{
  padding:0 14px 10px;
  display:none;
  overflow:hidden;
  background:var(--bg);
}
.dropdown2{ float:left; overflow:hidden; }

.dropdown-content2{
  display:none;
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 3px 8px rgba(0,0,0,.12);
  z-index:5;
  padding:10px 12px;
  margin-top:2px;
}
.dropdown-content2 a,
.dropdown-content2 button,
.dropdown-content2 form{
  display:block;
  text-align:left;
  margin:4px 0;
  color:var(--text);
  text-decoration:none;
}

/* CW1 hover-open */
#cardWrapper .dropdown2:hover .dropdown-content2{ display:block; }
/* CW3 never hover-open */
#cardWrapper3 .dropdown2:hover .dropdown-content2{ display:none !important; }

/* =========================================================
   CW1 specifics
   ========================================================= */

/* CW1 question hover red */
.cw1-qbtn:hover{ background:var(--red); color:#fff; }

/* Remove divider lines between CW1 question buttons */
#cardWrapper table.cw1-question,
#cardWrapper table.cw1-question tr,
#cardWrapper table.cw1-question th,
#cardWrapper table.cw1-question td{
  border:0 !important;
  border-collapse:collapse !important;
  border-spacing:0 !important;
  padding:0 !important;
}
#cardWrapper table.cw1-question button.cw1-qbtn,
#cardWrapper table.cw1-question button.collapsible{
  border:0 !important;
  box-shadow:none !important;
  outline:none !important;
}
#cardWrapper table.cw1-question button.cw1-qbtn::after,
#cardWrapper table.cw1-question button.collapsible::after{
  content:none !important;
}

/* CW1 Select/Dive buttons inside dropdown */
#cardWrapper .dropdown-content2 .ajax-button{
  display:block;
  width:100%;
  box-sizing:border-box;
  margin:4px 0;
  padding:12px 14px;
  font-weight:600;
  font-size:14px;
  text-align:left;
  border:0;
  outline:none;
  cursor:pointer;
  background:var(--blue);
  color:#fff;
}
#cardWrapper .dropdown-content2 .ajax-button:hover{ background:var(--blueHover); }

/* =========================================================
   CW3 specifics (CLEAN + AUTHORITATIVE)
   ========================================================= */

/* CW3 question hover */
#cardWrapper3 button.cw3-qbtn:hover{ background:var(--blueHover) !important; }

/* CW3 visibility (JS uses .active) */
#cardWrapper3 .cw3-qcontent{ display:none !important; }
#cardWrapper3 button.cw3-qbtn.active + .cw3-qcontent{ display:block !important; }

#cardWrapper3 .cw3-answer-row > .cw3-acontent{ display:none !important; }
#cardWrapper3 .cw3-answer-row > button.cw3-abtn.active + .cw3-acontent{
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
}

/* CW3 answer-list container should NOT look like a “dropdown panel” */
#cardWrapper3 .dropdown-content2.cw3-qcontent{
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* ---- CW3 Answer banding: match CW1 behavior ----
   - The ROW supplies the fill (gray vs light-blue tint)
   - The BUTTON is transparent
   - Rails are top/bottom inset matching the row’s band color
   - NO whitespace gap (margin/padding removed)
*/
#cardWrapper3 .cw3-qcontent > .cw3-answer-row{
  margin:0 !important;
  padding:0 !important;
}

#cardWrapper3 .cw3-qcontent > .cw3-answer-row:nth-child(odd){
  background:var(--bg) !important;
}

#cardWrapper3 .cw3-qcontent > .cw3-answer-row:nth-child(even){
  background:var(--cwBandBlue) !important;
}

/* CW3 answer buttons (size should match CW1 .options) */
#cardWrapper3 .cw3-qcontent > .cw3-answer-row > button.collapsible.options.cw3-abtn{
  display:block !important;
  width:100% !important;
  box-sizing:border-box !important;

  /* remove the “white space between bands” */
  margin:0 !important;

  /* match CW1 feel */
  padding:10px 14px !important;
  height:auto !important;
  min-height:0 !important;
  line-height:normal !important;

  text-align:left !important;
  border:0 !important;
  border-radius:0 !important;
  outline:0 !important;

  /* critical: let the ROW show through like CW1 */
  background:transparent !important;
  color:var(--text) !important;

  /* rails: default gray rails (odd rows) */
  box-shadow:
    inset 0 4px 0 var(--lineDark),
    inset 0 -4px 0 var(--lineDark)
    !important;
}

/* even rows = blue rails matching the blue fill */
#cardWrapper3 .cw3-qcontent > .cw3-answer-row:nth-child(even)
> button.collapsible.options.cw3-abtn{
  box-shadow:
    inset 0 4px 0 var(--cwBandBlue),
    inset 0 -4px 0 var(--cwBandBlue)
    !important;
}

/* hover / chosen */
#cardWrapper3 .cw3-qcontent > .cw3-answer-row > button.collapsible.options.cw3-abtn:hover{
  background:var(--red) !important;
  color:#fff !important;
  box-shadow:none !important; /* hover should be clean red */
}
#cardWrapper3 .cw3-qcontent > .cw3-answer-row > button.collapsible.options.cw3-abtn.chosen{
  background:var(--yellow) !important;
  color:var(--text) !important;
  font-weight:600 !important;
  box-shadow:none !important;
}
#cardWrapper3 .cw3-qcontent > .cw3-answer-row > button.collapsible.options.cw3-abtn.chosen:hover{
  background:var(--amber) !important;
  color:#fff !important;
}

/* CW3 dropdown panel under an answer */
#cardWrapper3 .cw3-acontent{
  margin:0 0 6px 0;
  padding:10px 12px;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:0 3px 8px rgba(0,0,0,.12);
}

/* CW3 action buttons (Select / Dive / Select2) */
#cardWrapper3 .cw3-acontent button.ajax-button{
  display:block !important;
  width:100% !important;
  box-sizing:border-box !important;

  margin:0 !important;
  padding:12px 14px !important;
  font-weight:600 !important;
  font-size:14px !important;
  text-align:left !important;

  border:0 !important;
  outline:0 !important;
  cursor:pointer !important;

  background:var(--blue) !important;
  color:#fff !important;
}
#cardWrapper3 .cw3-acontent button.ajax-button:hover{ background:var(--blueHover) !important; }

/* CW3: Dive ABOVE Select (forms wrap buttons, so make forms "disappear") */
#cardWrapper3 .cw3-acontent form{
  display:contents !important;
  margin:0 !important;
}
#cardWrapper3 .cw3-acontent .updater33{ order:1 !important; } /* Dive */
#cardWrapper3 .cw3-acontent .updater3,
#cardWrapper3 .cw3-acontent .updater14{ order:2 !important; } /* Select / Select2 */

/* =========================================================
   Pagination footer (CW1 + CW3)
   ========================================================= */
#cardWrapper .footer-pagination,
#cardWrapper3 .footer-pagination{
  display:grid !important;
  grid-template-columns:auto 1fr auto !important;
  align-items:center !important;
  column-gap:12px !important;
  width:100% !important;
  margin-top:10px;
}
#cardWrapper .footer-pagination form,
#cardWrapper3 .footer-pagination form{
  margin:0 !important;
  display:contents !important;
}
#cardWrapper .footer-pagination__status,
#cardWrapper3 .footer-pagination__status{
  min-width:0 !important;
  text-align:center;
  font-size:12px;
  opacity:.85;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* =========================================================
   Cards / Sidebar / Layout
   ========================================================= */
.card{
  border-radius:4px;
  box-shadow:var(--shadow);
  background:var(--card);
  margin-bottom:24px;
  padding:0;
}
.card .content{ padding:16px; }
.card .header{ padding:14px 16px 0; }
.card .category,.card label{ font-size:13px; color:var(--muted); margin-bottom:2px; }
.card .title{ margin:0; color:var(--text); font-weight:500; font-size:18px; }

/* Sidebar */
.sidebar{
  position:absolute;
  top:0; bottom:0; left:0;
  width:260px;
  color:#fff;
  background:#222;
  z-index:1;
}
.sidebar .sidebar-wrapper{
  width:260px;
  min-height:100%;
  overflow:hidden;
}
.sidebar .logo{
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.sidebar .logo .simple-text{
  text-transform:uppercase;
  display:block;
  font-size:16px;
  color:#fff;
  text-align:center;
  font-weight:500;
}
.sidebar .nav{ margin-top:20px; padding-left:0; list-style:none; }
.sidebar .nav li > a,
.sidebar .nav li > button{
  display:block;
  margin:4px 10px;
  border-radius:3px;
  padding:8px 12px;
  color:#fff;
  background:transparent;
  border:0;
  opacity:.85;
  cursor:pointer;
  text-align:left;
}
.sidebar .nav li > a:hover,
.sidebar .nav li > button:hover{
  background:rgba(255,255,255,.14);
  opacity:1;
}
.sidebar .nav li.active > a,
.sidebar .nav li.active > button{
  background:var(--blue);
  opacity:1;
}

/* Main panel */
.main-panel{
  background:rgba(203,203,210,.15);
  float:right;
  width:calc(100% - 260px);
  min-height:100%;
  overflow:auto;
}
.main-panel > .content{ padding:24px 18px; }

/* Minimal grid */
.row{ margin-right:-15px; margin-left:-15px; }
.row::after{ content:""; display:table; clear:both; }
[class*="col-"]{ padding-right:15px; padding-left:15px; min-height:1px; }
@media (min-width: 992px){
  .col-md-3{ width:25%; float:left; }
  .col-md-4{ width:33.3333%; float:left; }
  .col-md-6{ width:50%; float:left; }
  .col-md-12{ width:100%; float:left; }
}

/* =========================================================
   CW4 Notifications
   ========================================================= */
.cw4{
  max-height:360px;
  overflow:hidden;
  background:#fff;
  border:1px solid #ddd;
  border-radius:6px;
  padding:10px;
}
.cw4-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}
.cw4-log{
  max-height:300px;
  overflow-y:auto;
  padding-right:8px;
  border-top:1px solid #eee;
  padding-top:8px;
}
.cw4-item{
  padding:6px 8px;
  border-radius:4px;
  margin-bottom:6px;
  font-size:13px;
}
.cw4-time{ font-size:11px; opacity:.7; margin-bottom:2px; }
.cw4-ok{ background:#f0fff4; }
.cw4-warn{ background:#fffbea; }
.cw4-err{ background:#fff5f5; }

/* =========================================================
   PATCH: CW3 (no blue fill rows) + CW1 (remove indentation)
   Paste at END of CSS
   ========================================================= */

/* ---------- CW3: remove the blue "row fill" (Summers off should NOT be blue) ---------- */
#cardWrapper3 .cw3-qcontent > .cw3-answer-row:nth-child(odd),
#cardWrapper3 .cw3-qcontent > .cw3-answer-row:nth-child(even){
  background: var(--bg) !important; /* all rows gray like CW1 base */
}

/* CW3: make buttons match CW1 size/box-model */
#cardWrapper3 .cw3-qcontent > .cw3-answer-row > button.collapsible.options.cw3-abtn{
  /* CW1-ish option sizing */
  padding: 10px 14px !important;
  font-size: 14px !important;
  font-weight: 400 !important; /* CW1 .options isn't bold */
  line-height: normal !important;

  /* remove gaps */
  margin: 0 !important;

  /* behave like CW1 .options */
  background: var(--bg) !important;
  color: var(--text) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;

  /* rails default = gray */
  box-shadow:
    inset 0 4px 0 var(--lineDark),
    inset 0 -4px 0 var(--lineDark)
    !important;
}

/* CW3: even rows = BLUE rails (but NOT blue fill) */
#cardWrapper3 .cw3-qcontent > .cw3-answer-row:nth-child(even)
> button.collapsible.options.cw3-abtn{
  box-shadow:
    inset 0 4px 0 var(--cwBandBlue),
    inset 0 -4px 0 var(--cwBandBlue)
    !important;
}

/* CW3: hover/chosen override rails cleanly */
#cardWrapper3 .cw3-qcontent > .cw3-answer-row > button.collapsible.options.cw3-abtn:hover{
  background: var(--red) !important;
  color: #fff !important;
  box-shadow: none !important;
  border-bottom-color: transparent !important;
}
#cardWrapper3 .cw3-qcontent > .cw3-answer-row > button.collapsible.options.cw3-abtn.chosen{
  background: var(--yellow) !important;
  color: var(--text) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
#cardWrapper3 .cw3-qcontent > .cw3-answer-row > button.collapsible.options.cw3-abtn.chosen:hover{
  background: var(--amber) !important;
  color:#fff !important;
}

/* ---------- CW1: remove indentation so it matches CW3 (flush edges) ---------- */
/* CW1 answers dropdown container currently adds padding; kill it */
#cardWrapper .dropdown-content2{
  padding: 0 !important;
}

/* CW1 content block (if it adds side padding in your build) */
#cardWrapper .content2{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* CW3: make answer option text bold like CW1 */
#cardWrapper3 .cw3-qcontent > .cw3-answer-row > button.collapsible.options.cw3-abtn{
  font-weight: 600 !important;
}