/* Custom UI Extensions for CleanFlow */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

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

/* Signature Pad Canvas */
.signature-canvas-container {
    position: relative;
    border: 2px dashed #cbd5e1;
    border-radius: 0.75rem;
    background-color: #ffffff;
    touch-action: none;
}
.signature-canvas {
    width: 100%;
    height: 180px;
    display: block;
    cursor: crosshair;
}

/* Modal Animations */
.modal-enter {
    opacity: 0;
    transform: scale(0.95);
}
.modal-enter-active {
    opacity: 1;
    transform: scale(1);
    transition: opacity 200ms ease-out, transform 200ms ease-out;
}

/* Toast Notification Styles */
#toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateY(1rem);
    opacity: 0;
}
.toast.show {
    transform: translateY(0);
    opacity: 1;
}

/* Print Invoice Styling */
@media print {
    aside, header, nav, #toast-container, .no-print, button, .btn-print {
        display: none !important;
    }
    body {
        background: #ffffff !important;
        color: #0f172a !important;
        font-size: 12pt !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    main {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .print-container {
        border: none !important;
        box-shadow: none !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
}