/**
 * Global Standard Text Field Styles
 * Apply karein poore project mein consistent look ke liye
 * Created: November 24, 2025
 * Updated: Professional & Clean Design for All Pages
 */

/* ============================================
   STANDARD TEXT INPUT FIELDS
   ============================================ */

/* Base styling for all text inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select.form-control,
.form-control {
    /* Size and spacing */
    height: 42px !important;
    padding: 10px 15px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-family: 'Roboto', 'Segoe UI', Arial, sans-serif !important;
    font-weight: 400 !important;
    
    /* Border styling - Professional look */
    border: 2px solid #d2d6de !important;
    border-radius: 6px !important;
    
    /* Colors */
    background-color: #ffffff !important;
    color: #333333 !important;
    
    /* Transition effects */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    
    /* Box properties */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    outline: none !important;
    width: 100%;
    display: block;
}

/* Textarea specific height */
textarea,
textarea.form-control {
    height: auto !important;
    min-height: 100px !important;
    resize: vertical;
    padding: 12px 15px !important;
    line-height: 1.6 !important;
}

/* Select dropdown specific height */
select,
select.form-control {
    height: 42px !important;
    padding: 10px 15px !important;
    cursor: pointer !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="%23333333" d="M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 35px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

/* ============================================
   FOCUS STATE - Jab user input mein click kare
   ============================================ */

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
textarea:focus,
select:focus,
select.form-control:focus,
.form-control:focus {
    border-color: #3c8dbc !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(60, 141, 188, 0.15), 0 2px 5px rgba(0, 0, 0, 0.1) !important;
    outline: none !important;
    transform: translateY(-1px);
}

/* ============================================
   HOVER STATE - Jab user mouse le jaye
   ============================================ */

input[type="text"]:hover:not(:disabled),
input[type="email"]:hover:not(:disabled),
input[type="password"]:hover:not(:disabled),
input[type="number"]:hover:not(:disabled),
input[type="tel"]:hover:not(:disabled),
input[type="url"]:hover:not(:disabled),
input[type="search"]:hover:not(:disabled),
input[type="date"]:hover:not(:disabled),
input[type="time"]:hover:not(:disabled),
input[type="datetime-local"]:hover:not(:disabled),
textarea:hover:not(:disabled),
select.form-control:hover:not(:disabled) {
    border-color: #a8b4c0 !important;
    cursor: text;
}

/* ============================================
   DISABLED STATE - Jab input disable ho
   ============================================ */

input[type="text"]:disabled,
input[type="email"]:disabled,
input[type="password"]:disabled,
input[type="number"]:disabled,
input[type="tel"]:disabled,
input[type="url"]:disabled,
input[type="search"]:disabled,
input[type="date"]:disabled,
input[type="time"]:disabled,
input[type="datetime-local"]:disabled,
textarea:disabled,
select.form-control:disabled {
    background-color: #f4f4f4 !important;
    color: #999999 !important;
    cursor: not-allowed !important;
    opacity: 0.7;
}

/* ============================================
   READONLY STATE - Jab input readonly ho
   ============================================ */

input[type="text"][readonly],
input[type="email"][readonly],
input[type="password"][readonly],
input[type="number"][readonly],
input[type="tel"][readonly],
input[type="url"][readonly],
input[type="search"][readonly],
input[type="date"][readonly],
input[type="time"][readonly],
input[type="datetime-local"][readonly],
textarea[readonly],
select.form-control[readonly] {
    background-color: #f9f9f9 !important;
    color: #666666 !important;
    cursor: default !important;
    border-color: #e0e0e0 !important;
}

/* ============================================
   ERROR/VALIDATION STATE - Clear Visual Feedback
   ============================================ */

input.error,
input.is-invalid,
input.input-error,
textarea.error,
textarea.is-invalid,
select.error,
select.is-invalid,
.has-error .form-control {
    border-color: #e74c3c !important;
    background-color: #fff5f5 !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23e74c3c" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 40px !important;
}

input.error:focus,
input.is-invalid:focus,
input.input-error:focus,
textarea.error:focus,
textarea.is-invalid:focus,
select.error:focus,
select.is-invalid:focus,
.has-error .form-control:focus {
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.15), 0 2px 5px rgba(231, 76, 60, 0.2) !important;
    border-color: #e74c3c !important;
}

/* ============================================
   SUCCESS STATE - Positive Feedback
   ============================================ */

input.success,
input.is-valid,
textarea.success,
textarea.is-valid,
select.success,
select.is-valid,
.has-success .form-control {
    border-color: #27ae60 !important;
    background-color: #f0fff4 !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%2327ae60" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 40px !important;
}

input.success:focus,
input.is-valid:focus,
textarea.success:focus,
textarea.is-valid:focus,
select.success:focus,
select.is-valid:focus,
.has-success .form-control:focus {
    box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.15), 0 2px 5px rgba(39, 174, 96, 0.2) !important;
    border-color: #27ae60 !important;
}

/* ============================================
   PLACEHOLDER STYLING - Subtle & Professional
   ============================================ */

input::placeholder,
textarea::placeholder,
select::placeholder {
    color: #95a5a6 !important;
    opacity: 1 !important;
    font-style: normal !important;
    font-weight: 400 !important;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
select::-webkit-input-placeholder {
    color: #95a5a6 !important;
    font-style: normal !important;
}

input::-moz-placeholder,
textarea::-moz-placeholder,
select::-moz-placeholder {
    color: #95a5a6 !important;
    opacity: 1 !important;
    font-style: normal !important;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder,
select:-ms-input-placeholder {
    color: #95a5a6 !important;
    font-style: normal !important;
}

/* ============================================
   INPUT GROUP ADDON STYLING - Professional Grouping
   ============================================ */

.input-group-addon {
    border: 2px solid #d2d6de !important;
    border-radius: 6px !important;
    background-color: #ecf0f1 !important;
    padding: 10px 15px !important;
    font-size: 14px !important;
    color: #555555 !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    display: flex !important;
    align-items: center !important;
    height: 42px !important;
}

.input-group-btn .btn {
    height: 42px !important;
    border-radius: 6px !important;
}

/* Input group ke saath border radius fix */
.input-group input[type="text"]:first-child,
.input-group input[type="email"]:first-child,
.input-group input[type="password"]:first-child,
.input-group select:first-child,
.input-group .form-control:first-child {
    border-top-left-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group input[type="text"]:last-child,
.input-group input[type="email"]:last-child,
.input-group input[type="password"]:last-child,
.input-group select:last-child,
.input-group .form-control:last-child {
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Middle elements in input groups */
.input-group input:not(:first-child):not(:last-child),
.input-group select:not(:first-child):not(:last-child),
.input-group .form-control:not(:first-child):not(:last-child),
.input-group-addon:not(:first-child):not(:last-child) {
    border-radius: 0 !important;
}

/* First addon */
.input-group-addon:first-child {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none !important;
}

/* Last addon */
.input-group-addon:last-child {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left: none !important;
}

/* ============================================
   SMALL SIZE INPUTS
   ============================================ */

input.input-sm,
select.input-sm,
textarea.input-sm,
.input-sm.form-control,
.form-control-sm {
    height: 36px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
}

/* ============================================
   LARGE SIZE INPUTS
   ============================================ */

input.input-lg,
select.input-lg,
textarea.input-lg,
.input-lg.form-control,
.form-control-lg {
    height: 50px !important;
    padding: 12px 20px !important;
    font-size: 16px !important;
}

/* ============================================
   SEARCH FORM SPECIFIC
   ============================================ */

.search-form {
    border-radius: 30px 0px 0px 30px !important;
    border-right: none !important;
}

/* ============================================
   DATEPICKER INPUTS
   ============================================ */

input.date,
input.datetime,
input[type="date"],
input[type="datetime-local"] {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23999999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 35px !important;
}

/* ============================================
   RESPONSIVE DESIGN - Mobile devices
   ============================================ */

@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    textarea,
    select.form-control {
        font-size: 16px !important; /* iOS zoom prevent karne ke liye */
        height: 44px !important; /* Touch targets ke liye better height */
        padding: 10px 15px !important;
    }
    
    textarea.form-control {
        min-height: 120px !important;
    }
}

/* ============================================
   FORM GROUP LABELS - Professional Typography
   ============================================ */

.form-group label,
label {
    font-weight: 600 !important;
    color: #2c3e50 !important;
    margin-bottom: 8px !important;
    display: inline !important;
    font-size: 13px !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    font-family: 'Roboto', 'Segoe UI', Arial, sans-serif !important;
    vertical-align: middle !important;
}

/* Force label container to stay on one line */
.form-group label,
.form-group > label {
    white-space: nowrap !important;
}

/* Required field indicator - asterisk */
.req,
small.req,
.required {
    color: #e74c3c !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    margin-left: 2px !important;
    display: inline !important;
    vertical-align: middle !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* Required field indicator */
.form-group label.required:after,
label.required:after {
    content: " *" !important;
    color: #e74c3c !important;
    font-weight: bold !important;
}

/* Optional subtle labels */
.form-group label.text-muted,
label.text-muted {
    font-weight: 400 !important;
    text-transform: none !important;
    color: #7f8c8d !important;
}

/* Label for sr-only (screen readers) */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ============================================
   HELPER TEXT
   ============================================ */

.help-block,
.form-text {
    display: block;
    margin-top: 5px;
    margin-bottom: 0;
    color: #777777;
    font-size: 12px;
}

.help-block.error,
.form-text.error {
    color: #dd4b39;
}

.help-block.success,
.form-text.success {
    color: #00a65a;
}

/* ============================================
   AUTOCOMPLETE STYLING
   ============================================ */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    box-shadow: 0 0 0 30px white inset !important;
}

/* ============================================
   CUSTOM CLASSES - Special use cases
   ============================================ */

/* Inline form elements */
.form-inline input[type="text"],
.form-inline input[type="email"],
.form-inline input[type="password"],
.form-inline select {
    display: inline-block;
    width: auto;
    margin-right: 10px;
}

/* Full width inputs */
.input-full-width {
    width: 100% !important;
}

/* Centered text in inputs */
.input-text-center {
    text-align: center !important;
}

/* Uppercase inputs */
.input-uppercase {
    text-transform: uppercase !important;
}

/* ============================================
   MODERN FLOATING LABEL STYLE (Optional)
   ============================================ */

.floating-label-group {
    position: relative;
    margin-bottom: 25px;
}

.floating-label-group input,
.floating-label-group textarea,
.floating-label-group select {
    padding-top: 22px !important;
    padding-bottom: 8px !important;
}

.floating-label-group label {
    position: absolute;
    left: 15px;
    top: 14px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    color: #95a5a6;
    font-weight: normal !important;
    text-transform: none !important;
    font-size: 14px !important;
}

.floating-label-group input:focus + label,
.floating-label-group input:not(:placeholder-shown) + label,
.floating-label-group textarea:focus + label,
.floating-label-group textarea:not(:placeholder-shown) + label,
.floating-label-group select:focus + label,
.floating-label-group select:not([value=""]) + label {
    top: 6px;
    font-size: 11px !important;
    color: #3c8dbc;
    font-weight: 600 !important;
    text-transform: uppercase !important;
}

/* ============================================
   FORM GROUP SPACING & STRUCTURE
   ============================================ */

.form-group {
    margin-bottom: 20px;
    position: relative;
}

.form-group:last-child {
    margin-bottom: 0;
}

/* Form horizontal layout */
.form-horizontal .form-group {
    margin-left: 0;
    margin-right: 0;
}

/* ============================================
   ICON FEEDBACK IN INPUTS (has-feedback)
   ============================================ */

.has-feedback .form-control-feedback {
    position: absolute;
    top: 8px;
    right: 15px;
    z-index: 2;
    display: block;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    pointer-events: none;
    color: #555555;
    font-size: 16px;
}

.has-feedback label ~ .form-control-feedback {
    top: 36px;
}

/* ============================================
   CHECKBOX & RADIO BUTTONS - Modern Style
   ============================================ */

input[type="checkbox"],
input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
}

.checkbox label,
.radio label {
    font-weight: 400 !important;
    text-transform: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* ============================================
   BUTTONS - Consistent with Inputs
   ============================================ */

.btn {
    padding: 7px 14px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    border: 2px solid transparent !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

.btn:active {
    transform: translateY(0) !important;
}

/* ============================================
   FILE UPLOAD INPUTS
   ============================================ */

input[type="file"] {
    padding: 8px !important;
    height: auto !important;
    border: 2px dashed #d2d6de !important;
    background-color: #fafafa !important;
    cursor: pointer !important;
}

input[type="file"]:hover {
    border-color: #3c8dbc !important;
    background-color: #f0f8ff !important;
}

/* ============================================
   SPECIAL INPUT TYPES
   ============================================ */

/* Number input - Hide spinner buttons */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* Search input */
input[type="search"] {
    -webkit-appearance: none;
}

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}