/* ===== Modern look & feel (drop in after Bootstrap) ===== */

:root{
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-1: 0 2px 10px rgba(0,0,0,.06);
  --shadow-2: 0 8px 24px rgba(0,0,0,.10);
  --shadow-pressed: 0 1px 4px rgba(0,0,0,.12) inset, 0 0 0 1px rgba(0,0,0,.06);
  --primary: #007bff;          /* Bootstrap 4 primary */
  --primary-rgb: 0,123,255;
}

/* Prefer-reduced-motion respect */
@media (prefers-reduced-motion: reduce){
  * { transition: none !important; animation: none !important; }
}

/* ----- Sections & cards ----- */
section.bg-light.rounded {
  border: 1px solid rgba(0,0,0,.05);
  box-shadow: var(--shadow-1);
}

.card{
  border: 0 !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  transition: transform .18s ease, box-shadow .18s ease;
  overflow: hidden; /* for header rounding */
}

.card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.card.bg-light{
  background: #f9fafb; /* slightly cooler than #f8f9fa */
}

.card-header{
  border-bottom: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,0));
  font-weight: 600;
  padding-top: .9rem;
  padding-bottom: .9rem;
}

/* Nested cards (like your News + Participants items) */
.card .card{
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
}
.card .card:hover{
  box-shadow: var(--shadow-2);
}

/* ----- Buttons: hover/press/focus “feel” ----- */
.btn{
  border-radius: 10px;
  transition: transform .08s ease, box-shadow .12s ease, background-color .12s ease, color .12s ease, border-color .12s ease;
  position: relative; /* also enables optional ripple below */
}

/* Primary-filled */
.btn-primary{
  box-shadow: 0 6px 16px rgba(var(--primary-rgb), .25);
}
.btn-primary:hover{
  box-shadow: 0 10px 24px rgba(var(--primary-rgb), .32);
  transform: translateY(-1px);
}
.btn-primary:active{
  transform: translateY(1px) scale(.99);
  box-shadow: var(--shadow-pressed);
}

/* Outline variant */
.btn-outline-primary{
  border-color: rgba(var(--primary-rgb), .5);
  color: rgb(var(--primary-rgb));
  background-color: transparent;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.btn-outline-primary:hover{
  background-color: rgba(var(--primary-rgb), .06);
  border-color: rgba(var(--primary-rgb), .8);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.btn-outline-primary:active{
  transform: translateY(1px) scale(.99);
  box-shadow: var(--shadow-pressed);
}

/* Small buttons still feel tactile */
.btn-sm{ border-radius: 9px; }

/* Accessible focus ring */
.btn:focus, .btn.focus{
  outline: 0;
  box-shadow:
    0 0 0 .2rem rgba(var(--primary-rgb), .25),
    0 6px 16px rgba(0,0,0,.12);
}

/* ----- Optional CSS ripple (add class .btn-ripple to any .btn) ----- */
.btn-ripple{ overflow: hidden; }
.btn-ripple::after{
  content:"";
  position:absolute; inset:auto;
  width:10px; height:10px; border-radius:50%;
  background: rgba(255,255,255,.35);
  transform: scale(0);
  opacity: 0;
  transition: transform .45s ease, opacity .6s ease;
}
.btn-ripple:active::after{
  left: var(--x,50%); top: var(--y,50%);  /* falls back to center */
  transform: scale(30);
  opacity: 1;
}

/* (Optional) If you want ripple centered without JS, use this variant: */
/*
.btn-ripple:active::after{
  left: 50%; top: 50%; transform: translate(-50%,-50%) scale(30);
  opacity: 1;
}
*/

/* ----- Avatars / social icons subtle pop ----- */
.hover_img_round{
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.hover_img_round:hover{
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  filter: saturate(1.05);
}

/* ----- Utility: tidy small text color inside cards ----- */
.card .small{ color: rgba(0,0,0,.6); }


/* ===== Universal Bootstrap button modernizer ===== */

/* Base style for all buttons */
.btn{
  border-radius: 10px;
  transition: transform .08s ease, box-shadow .12s ease, filter .12s ease, background-color .12s ease, color .12s ease;
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* Hover = gentle lift */
.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}

/* Active (press) = dip in */
.btn:active{
  transform: translateY(1px) scale(.99);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.15);
}

/* Keep accessibility focus ring */
.btn:focus, .btn.focus{
  outline: 0;
  box-shadow:
    0 0 0 .2rem rgba(0,123,255,.25),
    0 6px 14px rgba(0,0,0,.12);
}

/* Filled buttons (primary, success, danger, etc.) → white text always */
.btn[class*="btn-"]:not([class*="outline"]):not(.btn-light):not(.btn-link){
  color: #fff !important;
}

/* Outline buttons → white background + colored text */
.btn[class*="btn-outline-"]{
  background: #fff !important;
}
.btn[class*="btn-outline-"]:hover,
.btn[class*="btn-outline-"]:focus{
  background: linear-gradient(180deg, rgba(0,0,0,.03), #fff) !important;
}

/* Special cases */
.btn-light{
  color: #212529 !important;
  background: #f8f9fa !important;
}
.btn-link{
  box-shadow: none !important;
  transform: none !important;
}

/* Keep outline button text colored (never white) across hover/focus */
.btn-outline-primary,
.btn-outline-primary:hover,
.btn-outline-primary:focus{
  color: #007bff !important;
}

.btn-outline-secondary,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus{
  color: #6c757d !important;
}

.btn-outline-success,
.btn-outline-success:hover,
.btn-outline-success:focus{
  color: #28a745 !important;
}

.btn-outline-danger,
.btn-outline-danger:hover,
.btn-outline-danger:focus{
  color: #dc3545 !important;
}

.btn-outline-warning,
.btn-outline-warning:hover,
.btn-outline-warning:focus{
  color: #ffc107 !important;
}

.btn-outline-info,
.btn-outline-info:hover,
.btn-outline-info:focus{
  color: #17a2b8 !important;
}

.btn-outline-dark,
.btn-outline-dark:hover,
.btn-outline-dark:focus{
  color: #343a40 !important;
}

/* Optional: outline-light on white bg is low contrast — make it readable */
.btn-outline-light,
.btn-outline-light:hover,
.btn-outline-light:focus{
  color: #495057 !important;        /* readable gray */
  border-color: #dee2e6 !important; /* subtle border */
}

/* 1) When a modal is open, kill hover transforms to avoid flicker */
.modal-open .card:hover,
.modal-open .btn:hover,
.modal-open .hover_img_round:hover{
  transform: none !important;
  box-shadow: inherit !important;
}

/* 2) Constrain big images inside modals so they never exceed viewport */
.modal-body img{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;

  /* keep within viewport height minus header/footer paddings */
  max-height: calc(100vh - 6rem);
  object-fit: contain;
}

/* 3) Allow modal content to scroll instead of resizing the whole page */
.modal-body{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* 4) Reduce compositing glitches on fade transitions (helps on Safari/Chrome) */
.modal,
.modal-backdrop{
  will-change: opacity, transform;
  backface-visibility: hidden;
}

/* Let dropdowns escape the card */
.card{ overflow: visible; }

/* Still keep nice rounded header visuals */
.card-header{
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  overflow: hidden;
}

.modern-header {
  padding: 0.75rem 1rem;        /* Bootstrap-like spacing */
  border: none;                 /* remove harsh border */
  border-bottom: 1px solid rgba(0,0,0,0.05); /* subtle separation */
  border-radius: 0.75rem 0.75rem 0 0;        /* rounded top edges */
  background: #fff;             /* clean background */
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.06); /* softer modern line */
}

/* Base item look (always rounded, white tiles on grey panel) */
.modern-list-item{
  padding: 0.75rem 1rem;
  background: #fff;
  border: none;
  border-radius: 12px;               /* <- always rounded */
  margin: 6px 0;                     /* spacing between pills */
  box-shadow: 0 1px 0 rgba(0,0,0,.04) inset;
  transition: background-color .2s ease, box-shadow .2s ease, transform .05s ease;
}

/* Hover/active feedback */
.modern-list-item:hover{
  background: #fafafa;
}
.modern-list-item:active{
  transform: translateY(1px);
}

/* Modern focus ring that follows the radius (instead of square outline) */
.modern-list-item:focus,
.modern-list-item:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,113,227,.28); /* accessible focus */
}

/* If any child (like a button/a) shows square focus outlines, soften them too */
.modern-list-item a:focus-visible,
.modern-list-item button:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,113,227,.28);
  border-radius: 10px;
}

/* Soft grey panel like your footer */
.panel-soft{
  background: #f6f7f9;              /* adjust to your footer grey */
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 12px;
}

/* Reset the UL so it doesn't paint white behind items */
.modern-list-group{
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
}

/* Hang-wrap: indent all wrapped lines by the same offset as the first-line lead */
:root { --wrap-indent: 56px; }        /* tweak this to taste (e.g., 48–64px) */
.hang-wrap {
  padding-left: var(--wrap-indent);
  text-indent: calc(-1 * var(--wrap-indent));
  margin: 0;                           /* optional: keep heading tight */
  line-height: 1.2;                    /* optional: nicer wrap */
}

/* 
Purpose: Minimal, non-invasive press and optional ripple effects for interactive elements.
Scope:   .tapfx = press only; add .tapfx-ripple to also enable ripple (safe opt-in).
*/

/* Press effect (tiny scale), no layout changes */
.tapfx {
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms ease;
}
.tapfx:active { transform: scale(0.98); }

/* Pointer cursor just for spans you mark .tapfx */
span.tapfx,
span[role="button"].tapfx,
span[onclick].tapfx { cursor: pointer; }

/* Optional ripple: only when you also add .tapfx-ripple */
.tapfx-ripple { position: relative; overflow: hidden; }
.tapfx-ripple .ripple {
  position: absolute;
  border-radius: 9999px;
  transform: scale(0);
  pointer-events: none;
  background: currentColor;
  opacity: .18;
  animation: ua-ripple 450ms ease-out;
}
@keyframes ua-ripple { to { transform: scale(12); opacity: 0; } }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .tapfx { transition: none; }
  .tapfx-ripple .ripple { animation: none; display: none; }
}

/* Ripple animation */
@keyframes ua-ripple{ to{ transform: scale(12); opacity: 0; } }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .tapfx{ transition: none; }
  .tapfx .ripple{ animation: none; display: none; }
}

/* Optional: disabled state helper */
.tapfx[aria-disabled="true"],
.tapfx.disabled{
  pointer-events: none;
  opacity: .5;
}

/* This is the pull to refresh feature */
/* container hidden above the top */
#ptr{
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0; right: 0;
  height: 64px;                   /* matches your THRESH */
  transform: translateY(-64px);   /* JS animates this value */
  transition: transform 180ms ease;
  z-index: 1050;
  /* center the inner pill; keep container transparent */
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

#ptr.ready   .ptr-text{ content:"Release to refresh"; }
#ptr.refresh .ptr-text{ content:"Refreshing…"; }

/* The pill */
#ptr .ptr-inner{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 10px 14px;
  border-radius: 16px;            /* <-- rounded */
  background: rgba(255,255,255,.92);
  box-shadow: 0 6px 20px rgba(0,0,0,.12), inset 0 0 0 1px rgba(0,0,0,.06);
  backdrop-filter: saturate(180%) blur(8px);  /* subtle glass effect */
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  color: #1a1a1a;
  pointer-events: none;           /* avoid intercepting touches */
}

.ptr-spinner{
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(0,0,0,.15);
  border-top-color: rgba(0,0,0,.55);
  animation: ptrspin 800ms linear infinite; display:none;
}
#ptr.refresh .ptr-spinner{ display:block; }
@keyframes ptrspin{ to{ transform: rotate(360deg); } }

/* avoid native overscroll behaviors that fight the gesture */
html, body { overscroll-behavior-y: contain; }

.ptr-icon{
  width: 20px; height: 20px;
  color: rgba(0,0,0,.6);
  margin-right: .4rem;
  transform: translateY(0);
  transition: transform 180ms ease, opacity 180ms ease;
  animation: ptr-chev 900ms ease-in-out infinite;
}

/* Pause arrows during refresh (spinner shows) */
#ptr.refresh .ptr-icon{ opacity: 0; animation-play-state: paused; }

/* When user has pulled enough, give a subtle nudge */
#ptr.ready .ptr-icon{ transform: translateY(2px); }

/* simple up-down float */
@keyframes ptr-chev{
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(4px); }
}

@media (prefers-color-scheme: dark){
  #ptr .ptr-inner{
    background: rgba(28,28,30,.85);
    color: #f2f2f7;
    box-shadow: 0 6px 20px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
  }
}

/* give every input-group a positioning context */
.input-group { position: relative; }

/* keep widgets above modals/backdrops */
.bootstrap-datetimepicker-widget,
.tempus-dominus-widget { z-index: 200000 !important; }

/* avoid clipping */
/* .modal .modal-body { overflow: visible; } */

.card{
  margin-top: 10px !important;
}