/* ==========================================================================
   Caawiye — Sitewide mobile polish + icon motion layer
   Loaded on every page (public + all dashboards) alongside main.css.
   Pure additive enhancement — does not override existing layout rules.
   ========================================================================== */

/* ---------- Smooth global motion baseline ---------- */
*{ -webkit-tap-highlight-color: transparent; }
a, button, .btn, .nav-link, .fin-tab, .status-badge, .mini-card, .pricing-card,
.plan-admin-card, .data-table tbody tr, .form-section, i.bi {
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease,
              color .18s ease, opacity .18s ease, border-color .18s ease;
}

/* ---------- Touch-friendly tap targets (mobile accessibility) ---------- */
@media (max-width: 767px){
  .btn, .form-control, .form-select, .nav-link, .fin-tab, button{
    min-height: 42px;
  }
  .btn-xs{ min-height: 34px; }
  .data-table table{ font-size:.82rem; }
  .dash-content{ padding: 14px !important; }
  .dash-topbar{ flex-wrap: wrap; gap: 10px; padding: 12px 14px !important; }
  .dash-topbar h5{ font-size: 1rem; }
  .modal-dialog{ margin: 10px; }
  .row.g-3 > [class*="col-"]{ margin-bottom: 4px; }
}

/* ---------- Icon micro-interactions ---------- */
.btn:hover i.bi, a:hover i.bi{ transform: translateX(1px) scale(1.08); }
.btn:active{ transform: scale(.96); }
.btn-teal:hover, .btn-outline-teal:hover{ box-shadow: 0 4px 14px rgba(13,148,136,.28); }

/* Pulsing call-to-action icon (use class="icon-pulse" on a button/link) */
.icon-pulse i.bi{ animation: caawiye-pulse 2.2s ease-in-out infinite; display:inline-block; }
@keyframes caawiye-pulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.18); }
}

/* Gentle bounce for notification / alert icons */
.icon-bounce i.bi, .bi-bell-fill{ animation: caawiye-bounce 2.6s ease-in-out infinite; }
@keyframes caawiye-bounce{
  0%,20%,50%,80%,100%{ transform: translateY(0); }
  40%{ transform: translateY(-3px); }
  60%{ transform: translateY(-1px); }
}

/* Spinning icons for loading / sync states (use class="icon-spin") */
.icon-spin{ animation: caawiye-spin 1s linear infinite; display:inline-block; }
@keyframes caawiye-spin{ to{ transform: rotate(360deg); } }

/* Status badges get a subtle breathing glow while pending/awaiting */
.status-pending{ animation: caawiye-glow 2.4s ease-in-out infinite; }
@keyframes caawiye-glow{
  0%,100%{ box-shadow: 0 0 0 0 rgba(217,119,6,.0); }
  50%{ box-shadow: 0 0 0 4px rgba(217,119,6,.12); }
}

/* ---------- Card lift on hover (desktop) ---------- */
@media (hover:hover){
  .mini-card:hover, .pricing-card:hover, .plan-admin-card:hover, .form-section:hover{
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(15,23,42,.08);
  }
  .data-table tbody tr:hover{ background: var(--teal-xlight,#F0FDFA); }
}

/* ---------- Fade/slide-in on load ---------- */
.dash-content, .pricing-card, .mini-card, .plan-admin-card, .form-section{
  animation: caawiye-fade-up .35s ease both;
}
@keyframes caawiye-fade-up{
  from{ opacity:0; transform: translateY(8px); }
  to{ opacity:1; transform: translateY(0); }
}
/* Stagger cards in a row slightly for a livelier feel */
.row.g-3 > [class*="col-"]:nth-child(1) .mini-card{ animation-delay: .02s; }
.row.g-3 > [class*="col-"]:nth-child(2) .mini-card{ animation-delay: .06s; }
.row.g-3 > [class*="col-"]:nth-child(3) .mini-card{ animation-delay: .10s; }
.row.g-3 > [class*="col-"]:nth-child(4) .mini-card{ animation-delay: .14s; }

/* ---------- Button ripple effect ---------- */
.btn{ position: relative; overflow: hidden; }
.btn .caawiye-ripple{
  position:absolute; border-radius:50%; transform:scale(0);
  background: rgba(255,255,255,.55); animation: caawiye-ripple .55s ease-out;
  pointer-events:none;
}
@keyframes caawiye-ripple{ to{ transform: scale(2.6); opacity:0; } }

/* ---------- Mobile bottom tab bar for dashboards ---------- */
.caawiye-mobile-tabbar{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:1040;
  background:#fff; border-top:1px solid var(--border,#E2E8F0);
  box-shadow: 0 -4px 16px rgba(15,23,42,.08);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
@media (max-width: 991px){
  .caawiye-mobile-tabbar.is-active{ display:flex; }
  body.has-mobile-tabbar .dashboard-main{ padding-bottom: 70px; }
}
.caawiye-mobile-tabbar a{
  flex:1; text-align:center; color:var(--slate,#475569); font-size:.68rem; font-weight:600;
  display:flex; flex-direction:column; align-items:center; gap:2px; padding:4px 2px; border-radius:10px;
}
.caawiye-mobile-tabbar a i{ font-size:1.25rem; transition: transform .18s ease, color .18s ease; }
.caawiye-mobile-tabbar a.active{ color: var(--teal,#0D9488); }
.caawiye-mobile-tabbar a.active i{ transform: translateY(-2px) scale(1.12); }
.caawiye-mobile-tabbar a:active i{ transform: scale(.9); }

/* ---------- Mobile-friendly data tables: collapse to stacked cards ---------- */
@media (max-width: 575px){
  .data-table table thead{ display:none; }
  .data-table table, .data-table tbody, .data-table tr, .data-table td{ display:block; width:100%; }
  .data-table tr{
    border:1px solid var(--border,#E2E8F0); border-radius:12px; margin-bottom:10px; padding:8px 12px;
  }
  .data-table td{ border:none !important; padding:6px 0 !important; display:flex; justify-content:space-between; align-items:center; gap:8px; text-align:right; }
  .data-table td:before{
    content attr(data-label); font-weight:600; font-size:.72rem; color:var(--slate,#475569);
    text-transform:uppercase; letter-spacing:.02em; flex-shrink:0; text-align:left;
  }
  /* Cells without a data-label (most pages today) just stack full-width left-aligned —
     still far more usable than a horizontally-scrolling table. */
  .data-table td:not([data-label]){ justify-content:flex-start; text-align:left; }
  .data-table td:empty{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}