/* catalog-nopui.css — self-contained styling for CourseCatalog / WEBSRQ08 / CCMaterials
   when PrimeUI + jQuery-UI are NOT loaded. Runs alongside jQuery 4.0.0.
   Grid metrics copied verbatim from assets/primeui-4.1.15/primeui.css.
   The old datetimepicker / buttonLoader jQuery plugins are NOT loaded on these pages
   (they call jQuery utilities removed in jQuery 4), so the time-picker and button-spinner
   styling used by the jQuery-4 reimplementations in coursecatalog.js is defined here. */

/* ---- Grid (verbatim PrimeUI 4.1.15) ---- */
.ui-grid { clear: both; padding: 0; margin: 0; }
.ui-grid:before, .ui-grid:after { content: ""; display: table; }
.ui-grid:after { clear: both; }
.ui-grid .ui-grid-row { display: flex; clear: both; }
.ui-grid-row:after { clear: both; content: ""; display: table; }
.ui-grid-col-1, .ui-grid-col-2, .ui-grid-col-3, .ui-grid-col-4,
.ui-grid-col-5, .ui-grid-col-6, .ui-grid-col-7, .ui-grid-col-8,
.ui-grid-col-9, .ui-grid-col-10, .ui-grid-col-11, .ui-grid-col-12 {
  float: left; box-sizing: border-box;
}
.ui-grid-col-1  { width: 8.33333%; }
.ui-grid-col-2  { width: 16.66666%; }
.ui-grid-col-3  { width: 25%; }
.ui-grid-col-4  { width: 33.33333%; }
.ui-grid-col-5  { width: 41.66666%; }
.ui-grid-col-6  { width: 50%; }
.ui-grid-col-7  { width: 58.33333%; }
.ui-grid-col-8  { width: 66.66666%; }
.ui-grid-col-9  { width: 75%; }
.ui-grid-col-10 { width: 83.33333%; }
.ui-grid-col-11 { width: 91.66666%; }
.ui-grid-col-12 { width: 100%; }
@media (max-width: 640px) {
  .ui-grid-responsive .ui-grid-row { display: block; }
  .ui-grid-responsive .ui-grid-col-1, .ui-grid-responsive .ui-grid-col-2,
  .ui-grid-responsive .ui-grid-col-3, .ui-grid-responsive .ui-grid-col-4,
  .ui-grid-responsive .ui-grid-col-5, .ui-grid-responsive .ui-grid-col-6,
  .ui-grid-responsive .ui-grid-col-7, .ui-grid-responsive .ui-grid-col-8,
  .ui-grid-responsive .ui-grid-col-9, .ui-grid-responsive .ui-grid-col-10,
  .ui-grid-responsive .ui-grid-col-11, .ui-grid-responsive .ui-grid-col-12 {
    width: 100%; float: none;
  }
}

/* ---- .ui-widget font ----
   jQuery-UI used to HARDCODE Arial 1em on .ui-widget and on its form controls. We instead
   let the widget text INHERIT the site template's font (from style.css) so the catalog matches
   the rest of the app for every tenant (arial, HelveticaNeue, etc.). The display still sets the
   widget font-size via g_PARAM.COURSECATALOG. Form controls (input/select/textarea/button) do
   NOT inherit font by default, so force them to inherit — otherwise they fall back to the
   browser's default face and size, which is the mismatch we saw after dropping jQuery-UI. */
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button { font-family: inherit; font-size: inherit; }

/* ---- PDF / Excel export buttons ----
   Their wrappers are nested .ui-grid-col-1 divs, so the grid rule floats them left and
   shrinks them to ~8%, which lets the two buttons overlap (the <br/> between the fpdf/fexcel
   forms can't clear a float). Un-float / un-shrink just these so each button gets its own
   block, stacked and right-aligned (the divs carry align="right"). */
#fpdf .ui-grid-col-1, #fexcel .ui-grid-col-1 { float: none; width: auto; }

/* ---- Fieldset panels (replaces puifieldset chrome). Calibrate hex in Step 3. ---- */
fieldset#control, fieldset#content, fieldset#materials {
  border: 1px solid #c5c5c5;
  background: #ffffff;
  padding: 0.6em 1em;
  margin: 0 0 10px 0;
  border-radius: 3px;
}

/* ---- Popover (replaces puioverlaypanel) ---- */
.cc-popover {
  position: absolute;
  z-index: 1000;
  display: none;
  background: #ffffff;
  border: 1px solid #c5c5c5;
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  padding: 0.5em 1em;
  max-width: 360px;
  opacity: 0;
  transition: opacity 120ms ease-in;
}
.cc-popover.cc-open { display: block; opacity: 1; }
/* Popover text fixed at 10px (overrides the inherited .ui-widget size). The compound
   .cc-popover.ui-widget selector (and the explicit b override) out-specifies the display's
   inline .ui-widget{font-size:...} and the global b{font-size:...} rules. */
.cc-popover.ui-widget,
.cc-popover.ui-widget b { font-size: 10px; }
/* Close icon sits on the top-right CORNER, just outside the panel (as PrimeUI's
   puioverlaypanel did) so it clears the content's own top-right icon instead of overlapping it. */
.cc-popover-close {
  position: absolute; top: -8px; right: -8px;
  width: 16px; height: 16px; line-height: 14px; text-align: center;
  background: #ffffff; border: 1px solid #c5c5c5; border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  cursor: pointer; font-size: 12px; color: #666;
}
.cc-popover-close:hover { color: #000; }

/* ---- Time picker (jQuery 4 replacement for xdan datetimepicker) ---- */
.cc-timepicker-wrap { position: relative; display: inline-block; }
.cc-timepicker {
  position: absolute; z-index: 1001; display: none;
  top: 100%; left: 0; width: 90px; max-height: 180px; overflow-y: auto;
  background: #ffffff; border: 1px solid #c5c5c5; border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.cc-timepicker.cc-open { display: block; }
.cc-timepicker-item { padding: 3px 8px; cursor: pointer; font-size: 0.85em; }
.cc-timepicker-item:hover { background: #eaeaea; }

/* ---- Button spinner (jQuery 4 replacement for jquery.buttonLoader) ---- */
.btn.loading, button.loading { position: relative; pointer-events: none; opacity: 0.8; }
.cc-spinner {
  display: inline-block; width: 12px; height: 12px; margin-left: 6px;
  border: 2px solid rgba(0,0,0,0.25); border-top-color: rgba(0,0,0,0.7);
  border-radius: 50%; animation: cc-spin 0.7s linear infinite; vertical-align: middle;
}
@keyframes cc-spin { to { transform: rotate(360deg); } }