/* ChequePro shared styles: SweetAlert2 dark theme, splash screen, brand logo */

/* ---------- SweetAlert2 theme ---------- */
.swal2-popup.cp-swal { border: 1px solid #dcdfe4; border-radius: 14px; font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif; box-shadow: 0 20px 50px rgba(20,30,60,.14); }
.swal2-popup.cp-swal .swal2-title { font-size: 20px; font-weight: 600; }
.swal2-popup.cp-swal .swal2-html-container { color: #4b5563; font-size: 14px; }
.swal2-popup.cp-swal .swal2-input,
.swal2-popup.cp-swal .swal2-select { background: #f7f8fa; color: #1c1e21; border: 1px solid #dcdfe4; box-shadow: none; }
.swal2-popup.cp-swal .swal2-input:focus { border-color: #4f8cff; box-shadow: 0 0 0 3px rgba(79,140,255,.25); }
.swal2-popup.cp-swal .swal2-validation-message { background: #fdecec; color: #c0392b; }
.swal2-popup.cp-swal .swal2-styled { border-radius: 999px; font-size: 14px; padding: 9px 20px; }
.swal2-popup.cp-swal .swal2-styled.swal2-cancel { color: #1c1e21; background: transparent; border: 1.5px solid #1c1e21; }
.swal2-popup.cp-swal .swal2-timer-progress-bar { background: rgba(79,140,255,.6); }
.swal2-popup.swal2-toast.cp-swal { padding: 10px 14px; }
.swal2-popup.swal2-toast.cp-swal .swal2-title { font-size: 14px; }
.cp-form { text-align: left; }
.cp-form label { display: block; color: #6b7280; font-size: 12px; margin: 10px 0 3px; }
.cp-form input, .cp-form select { width: 100%; box-sizing: border-box; padding: 9px; background: #f7f8fa; border: 1px solid #dcdfe4; color: #1c1e21; border-radius: 6px; font-size: 14px; }
.cp-form input:focus, .cp-form select:focus { outline: none; border-color: #4f8cff; }
.cp-review { width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; margin-top: 6px; }
.cp-review td { padding: 7px 4px; border-bottom: 1px solid #dcdfe4; vertical-align: top; }
.cp-review td:first-child { color: #6b7280; width: 38%; }
.cp-review tr.big td:last-child { font-size: 18px; font-weight: 700; color: #2ecc71; }
@media print { .swal2-container { display: none !important; } }

/* ---------- Brand logo (nav / login) ---------- */
.brand-logo { height: 26px; width: auto; vertical-align: middle; margin-right: 6px; border-radius: 4px; }

/* ---------- Splash screen ---------- */
.cp-splash {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  background: #0f1117;
  color: #1c1e21; font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  animation: cpSplashIn .35s ease-out both;
  cursor: pointer; overflow: hidden;
}
.cp-splash.cp-out { animation: cpSplashOut .6s ease-in forwards; pointer-events: none; }

.cp-logo-stage { position: relative; width: 340px; height: 340px; display: flex; align-items: center; justify-content: center; z-index: 1; }

/* soft pulsing glow behind the logo */
.cp-glow {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(79,140,255,.35), transparent 70%);
  animation: cpPulse 1.8s ease-in-out infinite;
}
/* float wrapper (idle motion) + image (entrance motion) */
.cp-logo-float { position: relative; width: 300px; height: 300px; display: flex; align-items: center; justify-content: center; animation: cpFloat 2.6s ease-in-out 1s infinite; }
.cp-logo {
  max-width: 100%; max-height: 100%; object-fit: contain; display: block;
  filter: drop-shadow(0 8px 22px rgba(79,140,255,.55));
  animation: cpLogoIn 1.05s cubic-bezier(.34,1.56,.64,1) .15s both, cpGlowShadow 2.2s ease-in-out 1.2s infinite;
}
.cp-logo-fallback {
  display: none; width: 240px; height: 240px; border-radius: 48px; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #4f8cff, #2ecc71); color: #fff; font-size: 110px; font-weight: 800;
  animation: cpLogoIn 1.05s cubic-bezier(.34,1.56,.64,1) .15s both;
}

@keyframes cpSplashIn  { from { opacity: 0 } to { opacity: 1 } }
@keyframes cpSplashOut { to { opacity: 0; transform: scale(1.04); visibility: hidden } }
@keyframes cpLogoIn   { 0% { opacity: 0; transform: scale(.15) rotate(-28deg) } 60% { opacity: 1; transform: scale(1.12) rotate(6deg) } 100% { opacity: 1; transform: scale(1) rotate(0) } }
@keyframes cpFloat    { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-9px) } }
@keyframes cpPulse    { 0%,100% { transform: scale(.9); opacity: .55 } 50% { transform: scale(1.12); opacity: 1 } }
@keyframes cpGlowShadow { 0%,100% { filter: drop-shadow(0 8px 18px rgba(79,140,255,.45)) } 50% { filter: drop-shadow(0 10px 30px rgba(46,204,113,.75)) } }

@media (prefers-reduced-motion: reduce) {
  .cp-splash *, .cp-splash::before, .cp-splash::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; }
}

/* ---------- Motion: page changes + button clicks ---------- */
@keyframes cpPageIn { from { opacity: 0; transform: translateY(10px); } }
@keyframes cpRowIn  { from { opacity: 0; transform: translateX(-8px); } }
@keyframes cpRing   { 0% { box-shadow: 0 0 0 0 rgba(79,140,255,.6); } 100% { box-shadow: 0 0 0 12px rgba(79,140,255,0); } }

/* content glides in when a page opens (backwards fill so the fade-out below still works) */
body > .wrap, body > .page, body > .app, form.box { animation: cpPageIn .45s cubic-bezier(.2,.7,.2,1) backwards; }
tbody tr { animation: cpRowIn .4s cubic-bezier(.2,.7,.2,1) backwards; }
tbody tr:nth-child(2) { animation-delay: .04s; } tbody tr:nth-child(3) { animation-delay: .08s; }
tbody tr:nth-child(4) { animation-delay: .12s; } tbody tr:nth-child(5) { animation-delay: .16s; }
tbody tr:nth-child(6) { animation-delay: .2s; }  tbody tr:nth-child(7) { animation-delay: .24s; }
tbody tr:nth-child(n+8) { animation-delay: .28s; }

/* leaving a page via the top navigation */
body > .wrap, body > .page, body > .app { transition: opacity .22s ease, transform .22s ease; }
body.cp-leaving > .wrap, body.cp-leaving > .page, body.cp-leaving > .app { opacity: 0; transform: translateY(-8px); }

/* buttons: lift on hover, squash on press, ring pulse after a click */
button, a.btn, label.btn { -webkit-tap-highlight-color: transparent; transition: transform .14s ease, background-color .18s, border-color .18s, filter .18s, box-shadow .2s; }
button.btn:not(:disabled):hover, a.btn:hover, label.btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
button:not(:disabled):not(.link):not(.cn-user-btn):active, a.btn:active, label.btn:active { transform: scale(.95); filter: brightness(.95); }
.actions button:active, button.link:active { transform: none; filter: none; }
.cp-pulse { animation: cpRing .55s ease-out; }
.swal2-popup.cp-swal .swal2-styled { transition: transform .14s ease, filter .18s; }
.swal2-popup.cp-swal .swal2-styled:hover { transform: translateY(-1px); }
.swal2-popup.cp-swal .swal2-styled:active { transform: scale(.95); }

@media (prefers-reduced-motion: reduce) {
  body > .wrap, body > .page, body > .app, form.box, tbody tr, .cp-pulse { animation: none !important; }
  button, a.btn, label.btn, body > .wrap, body > .page, body > .app { transition: none !important; }
}

/* ---------- Offline banner (assets/js/app.js) ---------- */
@keyframes cpObIn { from { transform: translateY(120%); } }
@keyframes cpDotPulse { 0%,100% { opacity: .5; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } }
.cp-offline-bar {
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 0); z-index: 9999;
  display: none; align-items: center; gap: 8px;
  background: #1c1e21; color: #f2f3f5; font: 500 12.5px/1.3 -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  padding: 10px 16px; border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,.28);
  animation: cpObIn .3s cubic-bezier(.2,.7,.2,1);
  max-width: calc(100vw - 32px); text-align: left;
}
.cp-offline-bar.show { display: flex; }
.cp-offline-bar .cp-ob-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff9d3f; flex: none; animation: cpDotPulse 1.6s ease-in-out infinite; }
.cp-offline-bar .cp-ob-pending { color: #9aa0ac; }
@media print { .cp-offline-bar { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .cp-offline-bar, .cp-offline-bar .cp-ob-dot { animation: none !important; } }