/* ================================================================ */
/* BuildFlow OS — Mobile Design System v1.0                       */
/* Source: mobile_hub.html (verified & deployed)                  */
/* Applied to: project.html, office.html mobile workspaces        */
/* ================================================================ */

:root {
/* BuildFlow Identity Colors - Calm & Refined */
            --bf-navy: #0f172a;        /* Deep Midnight Navy */
            --bf-navy-card: #1e293b;   /* Hero Card Surface */
            --bf-blue: #0284c7;        /* Tech Blue / Cyan */
            --bf-blue-light: #f0f9ff;
            --bf-gold: #f59e0b;        /* Architectural Gold */
            --bf-gold-light: #fefce8;
            --bf-emerald: #10b981;     /* Success / Income */
            --bf-emerald-light: #ecfdf5;
            --bf-rose: #f43f5e;        /* Expenses */
            --bf-rose-light: #fff1f2;
            
            /* Surfaces & Typography */
            --bg-canvas: #f8fafc;
            --surface-card: #ffffff;
            --border-subtle: #f1f5f9;
            --border-light: #e2e8f0;
            --text-main: #0f172a;
            --text-muted: #64748b;
            --text-light: #94a3b8;
            
            /* Shadows & Apple-grade Fluid Curves */
            --shadow-subtle: 0 1px 3px rgba(15, 23, 42, 0.03);
            --shadow-card: 0 4px 16px -2px rgba(15, 23, 42, 0.05);
            --shadow-float: 0 12px 28px -4px rgba(15, 23, 42, 0.1);
            --shadow-dock: 0 -4px 20px rgba(15, 23, 42, 0.06);
            --shadow-fab: 0 8px 24px -2px rgba(2, 132, 199, 0.4);
            
            /* Apple iOS Sheet & Physics Timing */
            --ease-apple-sheet: cubic-bezier(0.32, 0.72, 0, 1);
            --spring-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
            --spring-smooth: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Apple iOS Sheet Physics — the core animation curve */
.bf-sheet-enter {
    transition: transform 0.35s var(--ease-apple-sheet);
}

/* Floating Dock Spring Entrance Animation */
@keyframes dockSpringEntrance {
    0% {
        opacity: 0;
        transform: translate(-50%, 40px) scale(0.92);
    }
    65% {
        opacity: 1;
        transform: translate(-50%, -4px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
}

/* Floating Pill Dock — safe-area aware */
.bf-floating-dock {
    position: fixed;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 410px;
    height: 64px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 999px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: var(--shadow-dock);
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 16px;
    z-index: 5000;
    animation: dockSpringEntrance 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* BOQ Flat 48px Row — Apple spring feel */
.bf-boq-row {
    height: 48px;
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow-subtle);
    cursor: pointer;
    transition: transform 0.2s var(--spring-bounce), border-color 0.2s;
}

.bf-boq-row:active {
    transform: scale(0.98);
    border-color: var(--bf-blue);
}

/* Bottom Sheet — dvh + safe-area + Apple physics */
.bf-bottom-sheet {
    max-height: 82vh;
    max-height: 82dvh;
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 24px));
    transition: transform 0.35s var(--ease-apple-sheet);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Sheet Backdrop — strict z-index 6000 */
.bf-sheet-backdrop {
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 6000;
}

/* Gliding Pill Segmented Control */
.bf-gliding-tabs {
    position: relative;
    background: #e2e8f0;
    border-radius: 12px;
    padding: 3px;
    display: flex;
    align-items: center;
    user-select: none;
}

.bf-gliding-pill {
    position: absolute;
    top: 3px;
    bottom: 3px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
    transition: all 0.28s var(--spring-smooth);
    z-index: 1;
}

/* Percentage badge color variants */
.bf-pct-green  { background: #d1fae5; color: #047857; }
.bf-pct-blue   { background: #e0f2fe; color: #0284c7; }
.bf-pct-amber  { background: #fef3c7; color: #b45309; }
.bf-pct-rose   { background: #ffe4e6; color: #be123c; }

/* Sheet handle bar */
.bf-handle-bar {
    width: 42px;
    height: 4.5px;
    background: #cbd5e1;
    border-radius: 999px;
    margin: 0 auto 8px;
}

/* Spring tap feedback - scoped to mobile elements only */
.bf-tap,
#mobile-workspace button,
#mob-fixed-dock button,
#mob-tools-modal button {
    transition: transform 0.25s var(--spring-bounce), box-shadow 0.25s ease, background 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.bf-tap:active,
#mobile-workspace button:active,
#mob-fixed-dock button:active,
#mob-tools-modal button:active {
    transform: scale(0.93) !important;
}

/* Calm Card Fade-In & Reveal Animation */
@keyframes calmCardFadeIn {
    0% {
        opacity: 0;
        transform: translateY(14px) scale(0.985);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* View fade-in animation */
@keyframes bfViewFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.bf-view-enter {
    animation: bfViewFadeIn 0.3s var(--spring-smooth);
}