/* ==================================================
   🚀 PROPOKIT FLOATING ACTION BUTTONS (FABs)
   ================================================== */

/* ==================================================
   FAB SLIDE-IN ANIMATION
   ================================================== */

@keyframes fabSlideIn {
    0% {
        opacity: 0;
        transform: translateX(60px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ==================================================
   BASE FAB STYLING & ANIMATIONS
   ================================================== */

.action-fab {
    position: fixed;
    z-index: 1000;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 18px;
    border: none;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    overflow: hidden;
    transition: width 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
                filter 0.3s ease,
                box-shadow 0.3s ease;
    gap: 0; /* Ensure no extra gap between icon and text */
    /* Slide-in animation on page load */
    animation: fabSlideIn 0.4s ease-out backwards;
}

/* Stagger animation delays for Cover Page FABs (5 buttons) */
#newCustomerFab { animation-delay: 0.02s; }
#enterDetailsBtn { animation-delay: 0.06s; }
#toggleImageButton { animation-delay: 0.1s; }
#generateQrButton { animation-delay: 0.14s; }
#editInfoButton { animation-delay: 0.18s; }

/* Stagger animation delays for Company Intro FABs (3 buttons) */
#openCropModalBtn { animation-delay: 0.02s; }
#editTextButton { animation-delay: 0.06s; }
#editFooterButton { animation-delay: 0.1s; }

/* Stagger animation delays for Products & Services FABs (8 buttons) */
#epicAddProductButton { animation-delay: 0.02s; }
#addDividerButton { animation-delay: 0.06s; }
#applyDiscountButton { animation-delay: 0.1s; }
#laborCostButton { animation-delay: 0.14s; }
#adjustTaxButton { animation-delay: 0.18s; }
#applyDownPaymentButton { animation-delay: 0.22s; }
#openFirebaseExplorerModal { animation-delay: 0.26s; }
#cleanProjectButton { animation-delay: 0.3s; }

/* Stagger animation delays for Scope of Work FABs (Clear, Project Manager only) */
#sow-clear-btn { animation-delay: 0.05s; }
#sow-open-project-manager { animation-delay: 0.1s; }

/* Stagger animation delays for Objectives FABs (Clear, Project Manager only) */
#obj-clear-btn { animation-delay: 0.05s; }
#obj-open-project-manager { animation-delay: 0.1s; }

/* Stagger animation delays for Terms & Conditions FABs */
#tc-edit-company-btn { animation-delay: 0.02s; }
#tc-edit-client-btn { animation-delay: 0.05s; }
#tc-edit-terms-btn { animation-delay: 0.08s; }
#tc-edit-clauses-btn { animation-delay: 0.11s; }
#tc-open-project-manager { animation-delay: 0.14s; }

/* Stagger animation delays for Price Summary FAB */
#ps-edit-note-btn { animation-delay: 0.05s; }

/* FAB icon styling */
.action-fab i {
    font-size: 20px;
    flex-shrink: 0;
}

/* FAB text styling */
.action-fab span {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    margin-left: 12px;
    opacity: 0;
    transition: opacity 0.3s ease 0.1s;
    flex-shrink: 0; /* Prevent text from shrinking */
}

/* FAB hover effects */
.action-fab:hover span {
    opacity: 1;
}

.action-fab:hover {
    filter: brightness(1.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* ==================================================
   FAB POSITIONING & SIZING
   ================================================== */

/* Individual button positioning - Centered vertically in viewport (50vh) */
/* Standard spacing: 70px between buttons for consistency */

/* Cover Page: 5 FABs centered around viewport center */
#newCustomerFab { top: calc(50vh - 140px); }
#enterDetailsBtn { top: calc(50vh - 70px); }
#toggleImageButton { top: calc(50vh); }
#generateQrButton { top: calc(50vh + 70px); }
#editInfoButton { top: calc(50vh + 140px); }

/* Company Intro: 3 FABs centered around viewport center */
#openCropModalBtn { top: calc(50vh - 70px); }
#editTextButton { top: calc(50vh); }
#editFooterButton { top: calc(50vh + 70px); }

/* Products & Services: 8 FABs centered around viewport center */
#epicAddProductButton { top: calc(50vh - 245px); }
#addDividerButton { top: calc(50vh - 175px); }
#applyDiscountButton { top: calc(50vh - 105px); }
#laborCostButton { top: calc(50vh - 35px); }
#adjustTaxButton { top: calc(50vh + 35px); }
#applyDownPaymentButton { top: calc(50vh + 105px); }
#openFirebaseExplorerModal { top: calc(50vh + 175px); }
#cleanProjectButton { top: calc(50vh + 245px); }

/* Scope of Work: 2 FABs centered (Clear Editor, Project Manager) */
#sow-clear-btn { top: calc(50vh - 40px); }
#sow-open-project-manager { top: calc(50vh + 40px); }

/* Objectives: 2 FABs centered (Clear Editor, Project Manager) */
#obj-clear-btn { top: calc(50vh - 40px); }
#obj-open-project-manager { top: calc(50vh + 40px); }

/* Price Summary: 1 FAB (Edit Note) - centered */
#ps-edit-note-btn { top: calc(50vh); }

/* Terms & Conditions: 5 FABs centered */
#tc-edit-company-btn { top: calc(50vh - 140px); }
#tc-edit-client-btn { top: calc(50vh - 70px); }
#tc-edit-terms-btn { top: calc(50vh); }
#tc-edit-clauses-btn { top: calc(50vh + 70px); }
#tc-open-project-manager { top: calc(50vh + 140px); }

/* Hover width animations */
#printButton:hover { width: 110px; }
#newCustomerFab:hover { width: 170px; } /* "New Customer" - 13 chars */
#enterDetailsBtn:hover { width: 170px; } /* "Edit Customer" - 13 chars */
#toggleImageButton:hover { width: 230px; } /* "Cover Image Manager" - 19 chars */
#downloadPdfButton:hover { width: 180px; }
#generateQrButton:hover { width: 210px; } /* "QR Code Generator" - 17 chars */
#editInfoButton:hover { width: 240px; } /* "Company Information" - 20 chars */
#editTextButton:hover { width: 210px; } /* "Edit Text Content" - 17 chars */
#editFooterButton:hover { width: 220px; } /* "Edit Footer Content" - 18 chars */
#openCropModalBtn:hover { width: 260px; } /* "Company Image Manager" - 20 chars, increased for better fit */

/* Scope of Work FAB hover widths */
#sow-clear-btn:hover { width: 160px; } /* "Clear Editor" */
#sow-open-project-manager:hover { width: 205px; } /* "Project Manager" */

/* Objectives FAB hover widths */
#obj-clear-btn:hover { width: 160px; } /* "Clear Editor" */
#obj-open-project-manager:hover { width: 205px; } /* "Project Manager" */

/* Terms & Conditions FAB hover widths */
#tc-edit-company-btn:hover { width: 230px; } /* "Edit Company Info" */
#tc-edit-client-btn:hover { width: 210px; } /* "Edit Client Info" */
#tc-edit-terms-btn:hover { width: 190px; } /* "Edit Terms" */
#tc-edit-clauses-btn:hover { width: 210px; } /* "Edit Clauses" */
#tc-open-project-manager:hover { width: 205px; } /* "Project Manager" */

/* Price Summary FAB hover width */
#ps-edit-note-btn:hover { width: 150px; } /* "Edit Note" */

/* Products & Services FAB hover widths */
#epicAddProductButton:hover { width: 170px; } /* "Add Product" */
#addDividerButton:hover { width: 165px; } /* "Add Divider" */
#applyDiscountButton:hover { width: 195px; } /* "Apply Discount" */
#laborCostButton:hover { width: 200px; } /* "Services & Fees" */
#adjustTaxButton:hover { width: 175px; } /* "Tax Settings" */
#applyDownPaymentButton:hover { width: 190px; } /* "Down Payment" */
#openFirebaseExplorerModal:hover { width: 205px; } /* "Project Manager" */
#cleanProjectButton:hover { width: 180px; } /* "Clean Project" */

/* ==================================================
   FAB THEME COLORS - Semantic Color System
   ================================================== */

/* PRIMARY ACTIONS - Blue (Edit, View, Info) */
.action-fab.nav-color-cover-page,
.action-fab.nav-color-scope {
    background-color: #5499C7; /* Blue - Primary actions */
    color: #FFFFFF;
}

/* CONTENT EDITING - Light Blue (Text, Content) */
.action-fab.nav-color-objectives {
    background-color: #5DADE2; /* Light Blue - Content editing */
    color: #FFFFFF;
}

/* SUCCESS/CONFIRM - Green (Save, Add, Create) */
.action-fab.nav-color-terms,
.action-fab.nav-color-product-list {
    background-color: #28A745; /* Green - Add/Create actions */
    color: #FFFFFF;
}

/* WARNING/CAUTION - Orange (Settings, Adjust) */
.action-fab.nav-color-about-us,
.action-fab.nav-color-pdf-combiner {
    background-color: #F5B041; /* Orange - Settings/Adjustments */
    color: #FFFFFF;
}

/* FINANCIAL - Red (Pricing, Payment, Tax) */
.action-fab.nav-color-pricing {
    background-color: #E74C3C; /* Red - Financial actions */
    color: #FFFFFF;
}

/* MANAGEMENT - Purple (Project Manager, Clean) */
.action-fab.nav-color-product-management {
    background-color: #9B59B6; /* Purple - Management actions */
    color: #FFFFFF;
}

/* ==================================================
   COMPANY INTRO FAB POSITIONING
   ================================================== */

.company-intro-fab {
    position: fixed;
    right: 20px;
    z-index: 1000;
}

/* ==================================================
   RESPONSIVE FAB BEHAVIOR
   ================================================== */

/* Mobile responsiveness */
@media (max-width: 768px) {
    .action-fab {
        width: 48px;
        height: 48px;
        border-radius: 24px;
        right: 15px;
    }

    .action-fab i {
        font-size: 18px;
    }

    .action-fab span {
        font-size: 12px;
    }

    /* Mobile: centered in viewport with 60px spacing */
    
    /* Cover Page - 5 FABs */
    #newCustomerFab { top: calc(50vh - 120px); }
    #enterDetailsBtn { top: calc(50vh - 60px); }
    #toggleImageButton { top: calc(50vh); }
    #generateQrButton { top: calc(50vh + 60px); }
    #editInfoButton { top: calc(50vh + 120px); }
    
    /* Company Intro - 3 FABs */
    #openCropModalBtn { top: calc(50vh - 60px); }
    #editTextButton { top: calc(50vh); }
    #editFooterButton { top: calc(50vh + 60px); }
    
    /* Products & Services - 8 FABs */
    #epicAddProductButton { top: calc(50vh - 210px); }
    #addDividerButton { top: calc(50vh - 150px); }
    #applyDiscountButton { top: calc(50vh - 90px); }
    #laborCostButton { top: calc(50vh - 30px); }
    #adjustTaxButton { top: calc(50vh + 30px); }
    #applyDownPaymentButton { top: calc(50vh + 90px); }
    #openFirebaseExplorerModal { top: calc(50vh + 150px); }
    #cleanProjectButton { top: calc(50vh + 210px); }
    
    /* Scope of Work - 2 FABs */
    #sow-clear-btn { top: calc(50vh - 40px); }
    #sow-open-project-manager { top: calc(50vh + 40px); }
    
    /* Objectives - 2 FABs */
    #obj-clear-btn { top: calc(50vh - 40px); }
    #obj-open-project-manager { top: calc(50vh + 40px); }
    
    /* Price Summary - 1 FAB */
    #ps-edit-note-btn { top: calc(50vh); }
    
    /* Terms & Conditions - 5 FABs */
    #tc-edit-company-btn { top: calc(50vh - 120px); }
    #tc-edit-client-btn { top: calc(50vh - 60px); }
    #tc-edit-terms-btn { top: calc(50vh); }
    #tc-edit-clauses-btn { top: calc(50vh + 60px); }
    #tc-open-project-manager { top: calc(50vh + 120px); }
    
    /* Products & Services buttons - mobile hover widths */
    #epicAddProductButton:hover { width: 150px; }
    #addDividerButton:hover { width: 145px; }
    #applyDiscountButton:hover { width: 175px; }
    #laborCostButton:hover { width: 180px; }
    #adjustTaxButton:hover { width: 160px; }
    #applyDownPaymentButton:hover { width: 170px; }
    #openFirebaseExplorerModal:hover { width: 185px; }
    #cleanProjectButton:hover { width: 165px; }
    
    /* Cover Page & Company Intro buttons - mobile hover widths */
    #enterDetailsBtn:hover { width: 200px; } /* "Customer Information" */
    #toggleImageButton:hover { width: 190px; } /* "Cover Image Manager" */
    #generateQrButton:hover { width: 170px; } /* "QR Code Generator" */
    #editInfoButton:hover { width: 200px; } /* "Company Information" */
    #editTextButton:hover { width: 170px; } /* "Edit Text Content" */
    #editFooterButton:hover { width: 180px; } /* "Edit Footer Content" */
    #openCropModalBtn:hover { width: 220px; } /* "Company Image Manager" - mobile */
    #sow-clear-btn:hover { width: 140px; }
    #sow-open-project-manager:hover { width: 180px; }
    #obj-clear-btn:hover { width: 140px; }
    #obj-open-project-manager:hover { width: 180px; }
    #tc-edit-company-btn:hover { width: 200px; }
    #tc-edit-client-btn:hover { width: 180px; }
    #tc-edit-terms-btn:hover { width: 160px; }
    #tc-edit-clauses-btn:hover { width: 180px; }
    #tc-open-project-manager:hover { width: 180px; }
    #ps-edit-note-btn:hover { width: 130px; }
}

/* Tablet responsiveness */
@media (max-width: 1024px) and (min-width: 769px) {
    .action-fab {
        right: 15px;
    }

    /* Tablet hover widths - slightly reduced from desktop */
    #newCustomerFab:hover { width: 160px; }
    #enterDetailsBtn:hover { width: 160px; }
    #toggleImageButton:hover { width: 220px; }
    #generateQrButton:hover { width: 200px; }
    #editInfoButton:hover { width: 230px; }
    #editTextButton:hover { width: 200px; }
    #editFooterButton:hover { width: 210px; }
    #openCropModalBtn:hover { width: 250px; }
    
    /* Products & Services buttons - tablet hover widths */
    #epicAddProductButton:hover { width: 160px; }
    #addDividerButton:hover { width: 155px; }
    #applyDiscountButton:hover { width: 185px; }
    #laborCostButton:hover { width: 190px; }
    #adjustTaxButton:hover { width: 165px; }
    #applyDownPaymentButton:hover { width: 180px; }
    #openFirebaseExplorerModal:hover { width: 195px; }
    #cleanProjectButton:hover { width: 170px; }
    
    /* Scope of Work & Objectives - tablet hover widths */
    #sow-clear-btn:hover { width: 150px; }
    #sow-open-project-manager:hover { width: 195px; }
    #obj-clear-btn:hover { width: 150px; }
    #obj-open-project-manager:hover { width: 195px; }
    
    /* Terms & Conditions - tablet hover widths */
    #tc-edit-company-btn:hover { width: 220px; }
    #tc-edit-client-btn:hover { width: 200px; }
    #tc-edit-terms-btn:hover { width: 180px; }
    #tc-edit-clauses-btn:hover { width: 200px; }
    #tc-open-project-manager:hover { width: 195px; }
    
    /* Price Summary - tablet hover width */
    #ps-edit-note-btn:hover { width: 140px; }
}

/* Hide floating action buttons when printing */
@media print {
    .action-fab,
    .vertical-nav-button {
        display: none !important;
    }
}