/* ==========================================
   UI PRO MAX — shared design-system layer
   Enhances the existing .card/.btn/table/etc.
   selectors already used across every page —
   no markup changes required, no new class
   names to adopt. Pure CSS, zero dependencies.
   Linked at the end of <head> (after each
   page's own <style> block) so these rules win
   ties on shared properties while leaving each
   page's own colors/copy untouched.
========================================== */

:root {
    --uipro-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
    --uipro-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.10);
    --uipro-shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.16);
    --uipro-radius: 14px;
    --uipro-radius-sm: 10px;
    --uipro-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* ---------- Cards: rounded, soft-shadowed, hover-lift, reveal-on-scroll ---------- */
.card {
    border-radius: var(--uipro-radius) !important;
    box-shadow: var(--uipro-shadow-sm) !important;
    transition: transform 0.35s var(--uipro-ease), box-shadow 0.35s var(--uipro-ease);
    will-change: transform;
}
.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--uipro-shadow-md) !important;
}

/* Reveal-on-scroll: ui-pro.js toggles .uipro-visible when a .card scrolls into view */
.card.uipro-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.55s var(--uipro-ease), transform 0.55s var(--uipro-ease);
}
.card.uipro-reveal.uipro-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .card.uipro-reveal { opacity: 1; transform: none; transition: none; }
    .card:hover { transform: none; }
}

/* ---------- Buttons: smooth, ripple-ready, gentle press feedback ---------- */
button,
.btn,
.btn-success,
.btn-success-lg,
.btn-danger,
.btn-print,
.btn-whatsapp,
.btn-logout,
.submit-btn {
    position: relative;
    overflow: hidden;
    border-radius: var(--uipro-radius-sm) !important;
    transition: transform 0.15s var(--uipro-ease), box-shadow 0.25s var(--uipro-ease), filter 0.2s ease;
}
button:hover,
.btn:hover,
.btn-success:hover,
.btn-success-lg:hover,
.btn-danger:hover,
.btn-print:hover,
.btn-whatsapp:hover,
.btn-logout:hover,
.submit-btn:hover {
    filter: brightness(1.06);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
}
button:active,
.btn:active,
.btn-success:active,
.btn-danger:active,
.submit-btn:active {
    transform: scale(0.97);
}

/* Ripple circle injected by ui-pro.js on click */
.uipro-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    transform: scale(0);
    animation: uipro-ripple-anim 0.6s var(--uipro-ease);
    pointer-events: none;
}
@keyframes uipro-ripple-anim {
    to { transform: scale(2.6); opacity: 0; }
}

/* ---------- Responsive tables: horizontal scroll instead of squishing/sliding on mobile ---------- */
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}
.table-wrapper table {
    min-width: 600px;
    border-collapse: collapse;
}
/* Existing per-page scrollable table containers only had vertical scroll wired up */
.scrollable-table-container,
.table-scroll-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.scrollable-table-container table,
.table-scroll-container table {
    min-width: 600px;
}

/* ---------- Inputs: smoother focus transitions ---------- */
input, select, textarea {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input:focus, select:focus, textarea:focus {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* ---------- Glassmorphism — headers, modals, floating panels only ---------- */
.header,
.login-card,
#kidBg ~ .login-card {
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
}
.login-card {
    background: rgba(255, 255, 255, 0.85) !important;
    box-shadow: var(--uipro-shadow-lg) !important;
    border-radius: 18px !important;
    animation: uipro-fade-slide-up 0.5s var(--uipro-ease);
}
[data-theme="dark"] .header {
    background: rgba(30, 41, 59, 0.75) !important;
}

/* ---------- Page entrance: fade/slide-in for the main container ---------- */
@keyframes uipro-fade-slide-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.container {
    animation: uipro-fade-slide-up 0.5s var(--uipro-ease);
}

/* ---------- Tables: rounded container, subtle row hover ---------- */
table {
    border-radius: var(--uipro-radius-sm);
    overflow: hidden;
}
tbody tr {
    transition: background-color 0.15s ease;
}
tbody tr:hover {
    background-color: rgba(37, 99, 235, 0.06);
}

/* ---------- Loading skeleton (shimmer) ---------- */
.uipro-skeleton {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(148,163,184,0.18) 25%, rgba(148,163,184,0.32) 37%, rgba(148,163,184,0.18) 63%);
    background-size: 400% 100%;
    animation: uipro-shimmer 1.4s ease infinite;
    border-radius: var(--uipro-radius-sm);
    color: transparent !important;
    min-height: 1em;
    display: inline-block;
}
@keyframes uipro-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ---------- Share button (used by shareApp(), see ui-pro.js) ---------- */
.btn-share {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s;
}
.btn-share:hover { background: rgba(255, 255, 255, 0.32); }

/* ---------- Notification toast (used by UIPro.toast()) ---------- */
.uipro-toast-stack {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 4000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(340px, calc(100vw - 32px));
}
.uipro-toast {
    background: rgba(15, 23, 42, 0.92);
    color: #fff;
    padding: 12px 16px;
    border-radius: var(--uipro-radius-sm);
    box-shadow: var(--uipro-shadow-md);
    font-size: 0.88rem;
    font-weight: 600;
    backdrop-filter: blur(6px);
    animation: uipro-toast-in 0.35s var(--uipro-ease);
    border-left: 4px solid #2563eb;
}
.uipro-toast.success { border-left-color: #16a34a; }
.uipro-toast.error   { border-left-color: #dc2626; }
.uipro-toast.warn    { border-left-color: #f59e0b; }
.uipro-toast.leaving { animation: uipro-toast-out 0.3s var(--uipro-ease) forwards; }
@keyframes uipro-toast-in {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes uipro-toast-out {
    to { opacity: 0; transform: translateX(24px); }
}

/* ---------- Badges/status pills: consistent rounding ---------- */
.status-approved, .status-rejected, .status-pending,
.badge-red, .badge-light-red, .badge-light-pink, .badge-dark-pink, .badge-light-blue, .badge-dark-blue {
    border-radius: 999px;
    padding-inline: 0.6em;
}

/* ---------- Responsive spacing polish ---------- */
@media (max-width: 480px) {
    .card { padding: 16px !important; }
    .header, .header-btns { gap: 8px !important; }
}
