/* Fix signature pad styling issues */

/* Make canvas full width and proper height with border */
[x-data*="signaturePadFormComponent"] canvas {
    width: 100% !important;
    height: 9rem !important; /* h-36 = 144px = 9rem */
    display: block;
    touch-action: none;
    border: 1px solid #d1d5db !important; /* border-gray-300 */
    border-radius: 0.5rem !important; /* rounded-lg */
    background-color: #fff;
}

/* Dark mode support */
.dark [x-data*="signaturePadFormComponent"] canvas {
    background-color: rgb(17 24 39); /* dark:bg-gray-900 */
    border-color: rgba(255, 255, 255, 0.1) !important; /* dark:border-white/10 */
}

/* Fix buttons container - ensure flex layout */
[x-data*="signaturePadFormComponent"] > div:last-child {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-top: 0.75rem !important; /* mt-3 */
    gap: 0.5rem !important; /* space-x-2 */
}

/* Responsive grid utilities for company settings - scoped to form content */
.fi-fo-component-ctn .grid {
    display: grid;
}

.fi-fo-component-ctn .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.fi-fo-component-ctn .gap-4 {
    gap: 1rem;
}

.fi-fo-component-ctn .mt-4 {
    margin-top: 1rem;
}

@media (min-width: 768px) {
    .fi-fo-component-ctn .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fi-fo-component-ctn .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}