/* Custom icon styles for sidebar icons */

/* Dashboard and Product Menu icons - blue by default, gray on hover */
.icon-sidebar {
    width: 1.25rem !important; /* w-5 */
    height: 1.25rem !important; /* h-5 */
    transition: all 75ms ease-in-out;
    color: #1d4ed8 !important; /* text-blue-700 */
    flex-shrink: 0;
}

/* Customer menu Font Awesome icon - blue by default, gray on hover */
.fas.fa-users {
    color: #1d4ed8 !important; /* text-blue-700 */
    transition: all 75ms ease-in-out;
    width: 1.25rem !important;
    height: 1.25rem !important;
}

/* Customer menu icons - different styling */
.icon-sidebar-company {
    width: 1.5rem !important; /* w-6 */
    height: 1.5rem !important; /* h-6 */
    color: #2563eb; /* text-blue-600 */
    transition: all 75ms ease-in-out;
    flex-shrink: 0;
}

.icon-sidebar-menu3 {
    width: 1.25rem !important; /* w-5 */
    height: 1.25rem !important; /* h-5 */
    color: #6b7280; /* text-gray-500 */
    transition: all 75ms ease-in-out;
    flex-shrink: 0;
}

/* Hover states - Dashboard and Product Menu SVGs turn gray on hover */
.group:hover .icon-sidebar {
    color: #374151 !important; /* text-gray-700 */
}

/* Customer menu Font Awesome icon turns gray on hover */
.group:hover .fas.fa-users {
    color: #374151 !important; /* text-gray-700 */
}

/* Customer menu other icons turn white on hover */
.group:hover .icon-sidebar-company,
.group:hover .icon-sidebar-menu3 {
    color: white !important;
}

/* Custom input search styles */
.custom-input-search {
    padding-left: 2.5rem !important; /* pl-10 */
    height: 2rem !important;         /* h-8 */
    border: 1px solid #dbeafe !important; /* border-blue-100 */
    border-radius: 0.5rem !important;     /* rounded */
    width: 100% !important;              /* w-full */
    padding-top: 0.375rem !important;     /* py-1.5 */
    padding-bottom: 0.375rem !important;
    padding-right: 0.75rem !important;    /* pr-3 */
    font-size: 0.875rem !important;       /* text-sm */
    outline: none !important;
    background-color: white !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.custom-input-search:focus {
    border-color: #60a5fa !important;     /* focus:border-blue-400 */
    box-shadow: 0 0 0 1px #60a5fa !important; /* focus:ring-1 focus:ring-blue-400 */
}

/* Chrome-specific fixes */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: white !important;
}

/* Fix Chrome's button rendering */
button {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    border: none;
    background: none;
    cursor: pointer;
}

/* Ensure consistent font rendering in Chrome */
body, input, button, select, textarea {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Fix Chrome's default select arrow */
select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.7rem center !important;
    background-size: 1.2em !important;
    padding-right: 2.5rem !important;
}

/* Fix Chrome's checkbox and radio rendering */
input[type="checkbox"],
input[type="radio"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 1rem !important;
    height: 1rem !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.25rem !important;
    background-color: white !important;
    cursor: pointer !important;
}

input[type="checkbox"]:checked {
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='20,6 9,17 4,12'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 0.75rem !important;
}

/* Ensure proper spacing and layout consistency */
.rounded-xl {
    border-radius: 0.75rem !important;
}

.rounded-lg {
    border-radius: 0.5rem !important;
}

.rounded-md {
    border-radius: 0.375rem !important;
}