/* Template Style Utilities - Shared across all views */
/* These styles match the TailAdmin template design system */

/* Buttons - Use Tailwind classes directly in HTML: btn-primary, btn-secondary, etc. */
/* This file contains fallback styles for elements that can't use Tailwind classes directly */

/* Additional utility classes if needed */
.text-title-sm {
    font-size: 30px;
    line-height: 38px;
}

.text-theme-sm {
    font-size: 14px;
    line-height: 20px;
}

.text-theme-xs {
    font-size: 12px;
    line-height: 18px;
}

/* Select/Dropdown Custom Template Design - Remove browser default styling */
select,
select.form-control {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23667085' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 20px 20px !important;
    padding-right: 44px !important;
    cursor: pointer !important;
}

/* Firefox specific fix */
select::-moz-focus-inner,
select.form-control::-moz-focus-inner {
    border: 0;
}

/* IE11 and Edge specific fix */
select::-ms-expand,
select.form-control::-ms-expand {
    display: none !important;
}

select:disabled,
select.form-control:disabled {
    background-color: #f9fafb !important;
    color: #98a2b3 !important;
    cursor: not-allowed !important;
    opacity: 0.6;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%2398a2b3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

select option,
select.form-control option {
    padding: 10px 16px;
    color: #101828;
    background-color: white;
}

select option:hover,
select option:checked,
select.form-control option:hover,
select.form-control option:checked {
    background-color: #f9fafb;
}