/*!
 * JFP Tick v${revision}
 * Enhanced checkbox styling for JFP2 applications
 * Licensed for internal use only
 */

/* ============================================
   JFP Tick - Checkbox Styling
   ============================================ */

/**
 * Enhanced checkbox styling with consistent appearance
 * and improved accessibility across all browsers
 */
input[type="checkbox"] {
    /* Remove native browser styling */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Standard checkbox dimensions and styling */
    width: 13px;
    height: 13px;
    border: 1px solid #53565a;
    border-radius: 0px;
    background-color: #ffffff;
    cursor: pointer;
    position: relative;
    transition: all 0.15s ease;

    /* Clean spacing and alignment */
    outline: none;
    margin: 0 6px 0 0;
    padding: 0;
    vertical-align: middle;
}

/**
 * Hover state - subtle visual feedback
 */
input[type="checkbox"]:hover {
    border-color: #424548;
    background-color: #f2f2f2;
}

/**
 * Checked state - maintains white background with colored checkmark
 */
input[type="checkbox"]:checked {
    background-color: #ffffff;
    border-color: #53565a;
}

/**
 * CSS-drawn checkmark using pseudo-element
 * Positioned for optimal visual alignment
 */
input[type="checkbox"]::after {
    content: '';
    position: absolute;
    left: 4px;
    top: -2px;
    width: 4px;
    height: 8px;
    border: solid #22c6f4;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg) scale(0);
    opacity: 0;
    transition: all 0.15s ease;
}

/**
 * Show checkmark with smooth animation when checked
 */
input[type="checkbox"]:checked::after {
    transform: rotate(45deg) scale(1);
    opacity: 1;
}

/**
 * Focus state for keyboard accessibility
 * Subtle outline matching original imageTick behavior
 */
input[type="checkbox"]:focus {
    outline: 1px dotted #3a3c3f;
    outline-offset: 1px;
}

/**
 * Disabled state styling
 * Matches imageTick disabled appearance with reduced opacity
 */
input[type="checkbox"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #e6e6e6;
    border-color: #6c7075;
}

input[type="checkbox"]:disabled:hover {
    background-color: #e6e6e6;
    border-color: #6c7075;
}

input[type="checkbox"]:disabled:checked {
    background-color: #e6e6e6;
    border-color: #6c7075;
}

input[type="checkbox"]:disabled:checked::after {
    border-color: #33ffff;
}

/* ============================================
   Legacy Compatibility
   ============================================ */

/**
 * Support for existing .checkbox class usage
 * Maintains backward compatibility
 */
input[type="checkbox"].checkbox {
    /* Inherits all styles from input[type="checkbox"] above */
}

/* ============================================
   Responsive Design
   ============================================ */

/**
 * Mobile/tablet optimization
 * Slightly larger checkboxes for touch interfaces
 */
@media (max-width: 768px) {
    input[type="checkbox"] {
        width: 16px;
        height: 16px;
        margin: 0 8px 0 0;
    }

    /* Proportionally adjust checkmark for larger mobile checkboxes */
    input[type="checkbox"]::after {
        left: 5px;
        top: -2px;
        width: 5px;
        height: 10px;
    }
}

/**
 * High-DPI display support
 * Ensures crisp rendering on retina/high-resolution displays
 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    input[type="checkbox"] {
        /* CSS vectors scale perfectly - no additional changes needed */
    }
}

/* ============================================
   Browser Compatibility
   ============================================ */

/**
 * WebKit-specific optimizations
 */
@supports (-webkit-appearance: none) {
    input[type="checkbox"] {
        -webkit-appearance: none;
    }
}

/**
 * Firefox-specific optimizations
 */
@-moz-document url-prefix() {
    input[type="checkbox"] {
        -moz-appearance: none;
    }
}

/**
 * Print styles - fallback to native checkbox for printing
 */
@media print {
    input[type="checkbox"] {
        -webkit-appearance: checkbox;
        -moz-appearance: checkbox;
        appearance: checkbox;
        width: auto;
        height: auto;
        border: none;
        background: none;
        margin: 0;
    }

    input[type="checkbox"]::after {
        display: none;
    }
}

/* ============================================
   End of JFP Tick Styles
   ============================================ */