/* =====================================================================
   bs_compat.css — Bootstrap utility compatibility layer
   ---------------------------------------------------------------------
   The move from bslib to shinyMobile removed Bootstrap 5 from the page.
   Framework7 replaces every Bootstrap COMPONENT (cards, modals, tabs,
   buttons, lists), and those call sites were rewritten. What Framework7
   does not replace is Bootstrap's utility classes, which appear inside
   HTML strings generated across roughly 1,900 lines of server code
   (routine cards, admin panels, reward rows).

   Rewriting those 83 call sites would touch generated markup in the
   hottest code paths for no user-visible gain and real regression risk.
   Instead this file implements exactly the utility subset the app uses,
   so that markup keeps rendering as it did.

   Scope is deliberately narrow: only classes actually present in this
   codebase. It is not a Bootstrap reimplementation.

   To retire this file: grep for each class below, convert the remaining
   call sites to Framework7 components, delete the rule.
   ===================================================================== */

/* ---- Layout ------------------------------------------------------- */
.d-flex          { display: flex; }
.d-grid          { display: grid; }
.d-none          { display: none; }
.d-block         { display: block; }
.d-inline-block  { display: inline-block; }
.flex-wrap       { flex-wrap: wrap; }
.flex-column     { flex-direction: column; }
.align-items-center     { align-items: center; }
.align-items-start      { align-items: flex-start; }
.align-items-end        { align-items: flex-end; }
.justify-content-center  { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-end     { justify-content: flex-end; }
.justify-content-start   { justify-content: flex-start; }
.text-center     { text-align: center; }
.text-start      { text-align: left; }
.text-end        { text-align: right; }
.w-100           { width: 100%; }
.h-100           { height: 100%; }
.position-relative { position: relative; }

/* ---- Spacing (Bootstrap scale: 0,.25,.5,1,1.5,3 rem) -------------- */
.gap-1 { gap: 0.25rem; } .gap-2 { gap: 0.5rem; }
.gap-3 { gap: 1rem; }    .gap-4 { gap: 1.5rem; }

.m-0 { margin: 0; }
.mb-0 { margin-bottom: 0; }      .mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mt-0 { margin-top: 0; }         .mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }    .mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.ms-1 { margin-left: 0.25rem; }  .ms-2 { margin-left: 0.5rem; }
.me-1 { margin-right: 0.25rem; } .me-2 { margin-right: 0.5rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.my-3 { margin-top: 1rem; margin-bottom: 1rem; }

.p-0 { padding: 0; }  .p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; } .p-3 { padding: 1rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem;  padding-bottom: 0.5rem; }
.py-3 { padding-top: 1rem;    padding-bottom: 1rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 1rem;   padding-right: 1rem; }

/* ---- Type --------------------------------------------------------- */
.fw-bold    { font-weight: 700; }
.fw-semibold { font-weight: 600; }
.fw-normal  { font-weight: 400; }
.small      { font-size: 0.875em; }
/* #557C8D clears 4.5 on white but only reaches 4.01 on the tinted prize-goal
   card, where muted text also appears. One step darker covers both. */
.text-muted { color: #4F7383; }
.text-white { color: #FFFFFF; }
.fst-italic { font-style: italic; }

/* ---- Buttons ------------------------------------------------------ */
/* Sized to the 44px minimum touch target the rubric requires. Colours
   come from the brand tokens in islamic_theme.css, not Bootstrap's. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1.5px solid transparent;
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  color: var(--text, #1A3040);
  -webkit-tap-highlight-color: transparent;
  transition: background-color .12s ease, border-color .12s ease;
}
.btn:disabled, .btn.disabled { opacity: 0.6; cursor: default; }

.btn-sm { min-height: 36px; padding: 5px 12px; font-size: 0.84rem; border-radius: 10px; }
.btn-lg { min-height: 52px; padding: 13px 22px; font-size: 1.05rem; border-radius: 16px; }

.btn-primary   { background: var(--sky, #008196);    color: #fff; border-color: var(--sky, #008196); }
.btn-primary:active   { background: var(--sky-dark, #007A94); border-color: var(--sky-dark, #007A94); }
.btn-secondary { background: #557C8D; color: #fff; border-color: #557C8D; }
.btn-success   { background: var(--green, #4CAF50);  color: #fff; border-color: var(--green, #4CAF50); }
.btn-success:active   { background: var(--green-dk, #388E3C); }
.btn-danger    { background: var(--coral, #FF6B6B);  color: #fff; border-color: var(--coral, #FF6B6B); }
.btn-danger:active    { background: var(--coral-dk, #E03E3E); }
.btn-warning   { background: #FF9800; color: #fff; border-color: #FF9800; }
.btn-info      { background: var(--purple, #9C27B0); color: #fff; border-color: var(--purple, #9C27B0); }
.btn-light     { background: #F1F8FB; color: var(--text, #1A3040); border-color: var(--border, #D8F0F7); }
.btn-dark      { background: var(--text, #1A3040); color: #fff; border-color: var(--text, #1A3040); }

.btn-outline-primary   { color: var(--sky-dark, #007A94); border-color: var(--sky, #008196); background: transparent; }
.btn-outline-primary:active { background: var(--sky-light, #E0F7FA); }
.btn-outline-secondary { color: #4A7080; border-color: #B9D9E4; background: transparent; }
.btn-outline-success   { color: var(--green-dk, #388E3C); border-color: var(--green, #4CAF50); background: transparent; }
.btn-outline-danger    { color: var(--coral-dk, #E03E3E); border-color: var(--coral, #FF6B6B); background: transparent; }
.btn-outline-warning   { color: #C44500; border-color: #FF9800; background: transparent; }

/* ---- Alerts ------------------------------------------------------- */
.alert {
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: 0.9rem;
  line-height: 1.5;
}
.alert-primary { background: #E0F7FA; border-color: #A5E4EF; color: #005E72; }
.alert-info    { background: #E0F7FA; border-color: #A5E4EF; color: #005E72; }
.alert-success { background: #E8F5E9; border-color: #A5D6A7; color: #1B5E20; }
.alert-warning { background: #FFF8E1; border-color: #FFE082; color: #A15C00; }
.alert-danger  { background: #FFEBEE; border-color: #FFAFB6; color: #B3121F; }
.alert-secondary { background: #F1F8FB; border-color: #D8F0F7; color: #4A7080; }

/* The login screen and PIN popup use these names so their styling does not
   depend on the compat layer surviving a later cleanup. */
.fc-alert { padding: 10px 14px; border-radius: 12px; border: 1px solid transparent;
            font-size: 0.9rem; line-height: 1.5; margin-top: 0.5rem; }
.fc-alert-info    { background: #E0F7FA; border-color: #A5E4EF; color: #005E72; }
.fc-alert-warning { background: #FFF8E1; border-color: #FFE082; color: #A15C00; }
.fc-alert-danger  { background: #FFEBEE; border-color: #FFAFB6; color: #B3121F; }

/* ---- Badges ------------------------------------------------------- */
.badge {
  display: inline-block;
  padding: 0.32em 0.6em;
  border-radius: 50px;
  font-size: 0.74em;
  font-weight: 800;
  line-height: 1;
  color: #fff;
}
.bg-primary   { background: var(--sky, #008196); }
.bg-secondary { background: #557C8D; }
.bg-success   { background: var(--green, #4CAF50); }
.bg-danger    { background: var(--coral, #FF6B6B); }
.bg-warning   { background: #FF9800; }
.bg-info      { background: var(--purple, #9C27B0); }
.bg-light     { background: #F1F8FB; color: var(--text, #1A3040); }
.bg-dark      { background: var(--text, #1A3040); }

/* ---- Form controls ------------------------------------------------ */
/* Standard Shiny inputs (textInput, selectInput, dateInput, ...) still
   emit .form-control / .form-select. They work without Bootstrap, they
   just lose their styling, so the styling is restored here.
   16px font size prevents iOS Safari from zooming the page on focus. */
.form-control, .form-select, .shiny-input-container input[type="text"],
.shiny-input-container input[type="number"], .shiny-input-container select,
.shiny-input-container textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 9px 14px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
  color: var(--text, #1A3040);
  background: #FFFFFF;
  border: 1.5px solid var(--border, #D8F0F7);
  border-radius: 12px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.form-control:focus, .form-select:focus { border-color: var(--sky, #008196); }
.form-control-lg { min-height: 52px; font-size: 1.1rem; border-radius: 16px; }
.form-control-sm { min-height: 36px; font-size: 0.9rem; border-radius: 10px; padding: 5px 10px; }
.form-select {
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%234A7080' d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
}
.form-label, .control-label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-soft, #4A7080);
}
.form-check { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.form-check-input { width: 20px; height: 20px; accent-color: var(--sky, #008196); }

/* Shiny wraps inputs in .shiny-input-container; give them consistent spacing
   and let them fill the width, matching how they behaved under bslib. */
.shiny-input-container { width: 100%; margin-bottom: 10px; }
.shiny-input-container:last-child { margin-bottom: 0; }

/* ---- fileInput ---------------------------------------------------- */
/* shiny::fileInput emits an .input-group with a .btn-file label wrapping a
   hidden <input type="file">, plus a readonly .form-control showing the file
   name and a .progress bar. Used for child avatars (server_routine.R) and
   prize images (server_rewards.R). All Bootstrap-only classes. */
.input-group {
  display: flex;
  align-items: stretch;
  width: 100%;
  gap: 0;
}
.input-group > .form-control {
  flex: 1 1 auto;
  min-width: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group-btn, .input-group-prepend { display: flex; }
.btn-file {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  border: 1.5px solid var(--sky, #008196);
  border-right: none;
  border-radius: 12px 0 0 12px;
  background: var(--sky, #008196);
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.btn-file input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.btn-default { background: #F1F8FB; color: var(--text, #1A3040); border-color: var(--border, #D8F0F7); }
.progress {
  height: 6px;
  margin-top: 6px;
  border-radius: 4px;
  background: var(--sky-light, #E0F7FA);
  overflow: hidden;
}
.progress-bar { height: 100%; background: var(--sky, #008196); transition: width .2s ease; }
.progress-bar-striped { background-image: none; }

/* ---- Misc --------------------------------------------------------- */
.rounded    { border-radius: 12px; }
.rounded-pill { border-radius: 50px; }
.border     { border: 1px solid var(--border, #D8F0F7); }
.border-0   { border: 0; }
.shadow-sm  { box-shadow: 0 2px 8px rgba(0,120,160,.10); }
.shadow     { box-shadow: var(--shadow, 0 4px 16px rgba(0,120,160,.12)); }
.overflow-auto { overflow: auto; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}