/* ==========================================================================
   KinVault Custom Mobile App & Shell Styling
   Complementary CSS for base.html & Tailwind CSS
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Root & System Level Adjustments
   -------------------------------------------------------------------------- */
:root {
    /* Smooth scrolling for timeline / list views */
    scroll-behavior: smooth;
    /* Custom theme colors to match slate header */
    --brand-dark: #0F172A;
    --brand-accent: #3B82F6;
}

body {
    /* Prevent unwanted horizontal scrolling on mobile */
    overflow-x: hidden;
    /* Native system font stack fallback */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* Optimize font rendering on high-DPI mobile screens */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Prevent gray highlight box when tapping links on mobile WebKit */
    -webkit-tap-highlight-color: transparent;
}

/* --------------------------------------------------------------------------
   2. Native Mobile / TWA Safe Area Support (Notch & Home Bar)
   -------------------------------------------------------------------------- */
/* Ensures header doesn't get overlapped by mobile status bar / notch */
header {
    padding-top: env(safe-area-inset-top, 0px);
}

/* Ensures bottom nav stays above native home bar indicator on iOS / Android */
nav.fixed {
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
}

/* --------------------------------------------------------------------------
   3. Mobile App UX / Touch Feel Fixes
   -------------------------------------------------------------------------- */
/* Disable text highlighting on app header & navigation elements */
header, 
nav, 
button, 
.no-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Style active press states for buttons & bottom nav items */
nav a:active,
header button:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
}

/* --------------------------------------------------------------------------
   4. Search Input Enhancements
   -------------------------------------------------------------------------- */
/* Remove default WebKit search clear cross icon for custom styling */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

/* Soft transition when tapping search bar */
#global-search {
    transition: all 0.2s ease-in-out;
}

#global-search:focus {
    background-color: #1E293B; /* Slightly lighter slate background on focus */
}

/* --------------------------------------------------------------------------
   5. Custom Scrollbar Styling (Minimal & Sleek)
   -------------------------------------------------------------------------- */
/* Thin scrollbar for category tabs / main container */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

/* --------------------------------------------------------------------------
   6. Micro-Animations & Badges
   -------------------------------------------------------------------------- */
/* Pulse effect for unread notifications */
@keyframes pulse-dot {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

.notif-active {
    animation: pulse-dot 2s infinite ease-in-out;
}

/* Smooth fade-in animation for page content blocks */
.fade-in {
    animation: fadeIn 0.25s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}