/* ═══════════════════════════════════════════════════════════════
   VendMap — app.css
   Global custom styles that complement Tailwind CSS
   ═══════════════════════════════════════════════════════════════ */

/* ── Base / Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

:root {
    --primary:       #4f46e5;
    --primary-light: #6366f1;
    --primary-dark:  #4338ca;
    --sidebar-w:     16rem;   /* 256px = w-64 */
    --mobile-nav-h:  5.25rem;
}

html, body { height: 100%; }

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #f8fafc;
}

/* ── Scrollbar ────────────────────────────────────────────────── */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: #cbd5e1; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── Animations ───────────────────────────────────────────────── */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0);    }
}
@keyframes pulse-ring {
    0%   { transform: scale(.95); box-shadow: 0 0 0 0 rgba(79,70,229,.4); }
    70%  { transform: scale(1);   box-shadow: 0 0 0 8px rgba(79,70,229,0); }
    100% { transform: scale(.95); box-shadow: 0 0 0 0 rgba(79,70,229,0);  }
}

.animate-fade-in  { animation: fadeIn  .3s ease both; }
.animate-slide-up { animation: slideUp .4s ease both; }
.animate-pulse-ring { animation: pulse-ring 1.8s ease-in-out infinite; }

/* ── Focus styles ─────────────────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ── Cards / Glass ────────────────────────────────────────────── */
.card {
    background: #ffffff;
    border-radius: 1rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    transition: box-shadow .2s;
}
.card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); }

.glass {
    background: rgba(255,255,255,.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.5);
}

/* ── Sidebar offset for desktop ───────────────────────────────── */
@media (min-width: 1024px) {
    .main-content { margin-left: var(--sidebar-w); }
}

/* ── Mobile bottom nav clearance ──────────────────────────────── */
@media (max-width: 1023px) {
    body.has-mobile-nav {
        overflow: hidden;
        --mobile-nav-h: calc(5.25rem + env(safe-area-inset-bottom, 0px));
    }
    body.has-mobile-nav:not(.map-builder-fullscreen) #app-layout {
        padding-bottom: var(--mobile-nav-h);
        overflow: hidden;
        height: 100%;
        max-height: 100%;
    }
    body.has-mobile-nav:not(.map-builder-fullscreen) main {
        min-height: 0 !important;
        -webkit-overflow-scrolling: touch;
    }
    body.has-mobile-nav:not(.map-builder-fullscreen) main.overflow-y-auto {
        padding-bottom: 1.5rem;
        scroll-padding-bottom: 1.5rem;
    }
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    nav.bottom-nav,
    #mobile-bottom-nav { padding-bottom: env(safe-area-inset-bottom); }
}

/* ── Form inputs ──────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
    transition: border-color .15s, box-shadow .15s;
}
input[type="color"] {
    padding: 2px;
    cursor: pointer;
}

/* ── Stat card shimmer (loading placeholder) ──────────────────── */
.shimmer {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
}
@keyframes shimmer {
    0%   { background-position:  200% center; }
    100% { background-position: -200% center; }
}

/* ── Badge ────────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .2rem .55rem;
    border-radius: 99px;
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.4;
}

/* ── Button base ──────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    padding: .5rem 1.25rem;
    border-radius: .75rem;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }

/* ── Tooltip ──────────────────────────────────────────────────── */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: #fff;
    font-size: .7rem;
    font-weight: 500;
    padding: .3rem .6rem;
    border-radius: .375rem;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
    z-index: 50;
}
[data-tooltip]:hover::after { opacity: 1; }

/* ── Print ────────────────────────────────────────────────────── */
@media print {
    aside, nav, header, .no-print { display: none !important; }
    main { margin: 0 !important; }
}