/* ============ General Input Styles ============ */
.input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}

.input-group.dark {
    color: var(--color-text-light);
}

.input-group label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
}

.input-group .input-wrapper {
    display: flex;
    align-items: center;
    border: 2px solid var(--color-slate-300);
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-slate-50);
    transition: var(--transition-smooth);
    width: 100%;
}

.input-group .input-wrapper input[type="number"] {
    appearance: textfield;
}

.input-group .input-wrapper input[type="number"]::-webkit-outer-spin-button,
.input-group .input-wrapper input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.input-group.dark .input-wrapper {
    background: var(--color-slate-900);
    border-color: var(--color-slate-700);
}

.input-group .input-wrapper:focus-within {
    border-color: var(--color-primary-500);
    box-shadow: var(--shadow-small-focus);
}

.input-group.dark .input-wrapper:focus-within {
    border-color: var(--color-secondary-400);
    box-shadow: var(--shadow-small-focus);
}

.input-group .input-wrapper input,
.input-group .input-wrapper textarea,
.input-group .input-wrapper input[type="date"] {
    flex: 1;
    border: none;
    padding: 12px 16px;
    font-size: 1rem;
    background: transparent;
    color: var(--color-text);
}

.input-group.dark .input-wrapper input,
.input-group.dark .input-wrapper textarea,
.input-group.dark .input-wrapper input[type="date"] {
    color: var(--color-text-light);
}

.input-group .input-wrapper input:focus,
.input-group .input-wrapper textarea:focus,
.input-group .input-wrapper input[type="date"]:focus {
    outline: none;
}

.input-group .input-wrapper input::placeholder,
.input-group .input-wrapper textarea::placeholder,
.input-group .input-wrapper input[type="date"]::placeholder {
    color: var(--color-slate-400);
    transition: var(--transition-smooth);
}

.input-group.dark .input-wrapper input::placeholder,
.input-group.dark .input-wrapper textarea::placeholder,
.input-group.dark .input-wrapper input[type="date"]::placeholder {
    color: var(--color-slate-500);
}

/* ============ Prefix Input ============ */
.input-group.prefix .input-wrapper {
    display: flex;
}

.input-group.prefix .prefix-icon {
    background: var(--color-slate-200);
    padding: 12px 16px;
    color: var(--color-text);
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    height: 100%;
}

.input-group.prefix.dark .prefix-icon {
    background: var(--color-secondary-800);
    color: var(--color-secondary-50);
}

/* ============ Textarea ============ */

.input-group.textarea .input-wrapper textarea {
    resize: vertical;
    min-height: 120px;
}

/* ============ File Upload ============ */
.input-group.file-upload {
    align-items: center;
    gap: 12px;
}

.input-group.file-upload .input-wrapper {
    gap: 12px;
}

.input-group.file-upload input[type="file"] {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.input-group.file-upload .file-name {
    flex: 1;
    padding: 12px;
    border-radius: 6px;
    font-size: 1rem;
    text-align: start;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.input-group.file-upload .file-name.valid-file {
    color: var(--color-primary-600);
    font-weight: bold;
}

.input-group.dark.file-upload .file-name {
    color: var(--color-text-light);
}

.input-group.file-upload .file-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--color-primary-50);
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition-smooth);
    font-size: 1rem;
    white-space: nowrap;
}

.input-group.dark.file-upload .file-label {
    background: var(--color-secondary-800);
    color: var(--color-secondary-50);
}

.input-group.file-upload .file-label:hover {
    background: var(--color-primary-100);
}

.input-group.dark.file-upload .file-label:hover {
    background: var(--color-secondary-700);
}

.input-group.file-upload .file-label svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}
/* ============ Floating Label ============ */
.input-group.floating {
    position: relative;
}

.input-group.floating .input-wrapper:has(input:focus),
.input-group.floating .input-wrapper:has(textarea:focus),
.input-group.floating .input-wrapper:has(input:not(:placeholder-shown)),
.input-group.floating .input-wrapper:has(textarea:not(:placeholder-shown)) {
    border: none;
    border-bottom: 2px solid var(--color-slate-300);
}

.input-group.dark.floating:has(.input-wrapper input:focus),
.input-group.dark.floating:has(.input-wrapper textarea:focus),
.input-group.dark.floating:has(.input-wrapper input:not(:placeholder-shown)),
.input-group.dark.floating
    :has(.input-wrapper textarea:not(:placeholder-shown)) {
    border-bottom: 2px solid var(--color-slate-700);
}

.input-group.dark.floating .input-wrapper {
}

.input-group.floating label {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    transition: var(--transition-smooth);
    padding: 0 5px;
    font-size: 1rem;
    color: var(--color-slate-500);
    pointer-events: none;
    background: transparent;
}

.input-group.dark.floating label {
    color: var(--color-slate-400);
}

.input-group.floating .input-wrapper input,
.input-group.floating .input-wrapper textarea {
    padding-top: 20px; /* علشان يكون فيه مساحة للـ label */
}

.input-group.floating .input-wrapper input:focus + label,
.input-group.floating .input-wrapper textarea:focus + label,
.input-group.floating .input-wrapper input:not(:placeholder-shown) + label,
.input-group.floating .input-wrapper textarea:not(:placeholder-shown) + label {
    top: 8px;
    right: 12px;
    font-size: 0.75rem;
    color: var(--color-primary-500);
    padding: 0 4px;
}

.input-group.dark.floating .input-wrapper input:focus + label,
.input-group.dark.floating .input-wrapper textarea:focus + label,
.input-group.dark.floating .input-wrapper input:not(:placeholder-shown) + label,
.input-group.dark.floating
    .input-wrapper
    textarea:not(:placeholder-shown)
    + label {
    color: var(--color-secondary-400);
}

/* ============ Disabled & Readonly Inputs ============ */
.input-group
    .input-wrapper:has(
        input:disabled,
        textarea:disabled,
        input[type="date"]:disabled
    ),
.input-group
    .input-wrapper:has(
        input:read-only,
        textarea:read-only,
        input[type="date"]:read-only
    ) {
    background: var(--color-slate-200);
    border-color: var(--color-slate-300);
    color: var(--color-slate-500);
    cursor: not-allowed;
    box-shadow: none;
}

/* New styles for disabled prefix icons */
.input-group.prefix
    .input-wrapper:has(
        input:disabled,
        textarea:disabled,
        input[type="date"]:disabled
    )
    .prefix-icon,
.input-group.prefix
    .input-wrapper:has(
        input:read-only,
        textarea:read-only,
        input[type="date"]:read-only
    )
    .prefix-icon {
    background: var(--color-slate-300);
    color: var (--color-slate-500);
    opacity: 0.7;
}

/* Dark mode styles for disabled prefix icons */
.input-group.prefix.dark
    .input-wrapper:has(
        input:disabled,
        textarea:disabled,
        input[type="date"]:disabled
    )
    .prefix-icon,
.input-group.prefix.dark
    .input-wrapper:has(
        input:read-only,
        textarea:read-only,
        input[type="date"]:read-only
    )
    .prefix-icon {
    background: var(--color-slate-700);
    color: var (--color-slate-500);
    opacity: 0.7;
}

.input-group.dark
    .input-wrapper:has(
        input:disabled,
        textarea:disabled,
        input[type="date"]:disabled
    ),
.input-group.dark
    .input-wrapper:has(
        input:read-only,
        textarea:read-only,
        input[type="date"]:read-only
    ) {
    background: var(--color-slate-800);
    border-color: var(--color-slate-700);
    color: var(--color-slate-600);
    box-shadow: none;
}

.input-group .input-wrapper:has(input:disabled, input:read-only):focus-within {
    box-shadow: none;
    border-color: var(--color-slate-300);
}

.input-group.dark
    .input-wrapper:has(input:disabled, input:read-only):focus-within {
    box-shadow: none;
    border-color: var(--color-slate-700);
}

/* ============ Checkbox Input ============ */
.input-group.checkbox {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 10px;
}

.input-group.checkbox label {
    cursor: pointer;
    margin-bottom: 0;
}

/* RTL support */
[dir="rtl"] .input-group.checkbox {
    flex-direction: row;
}

.input-group.checkbox .checkbox-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* Basic checkbox style */
.input-group.checkbox .checkbox-wrapper input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-slate-300);
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    margin: 0;
    background-color: var(--color-slate-200);
    transition: var(--transition-smooth);
}

.input-group.checkbox.dark .checkbox-wrapper input[type="checkbox"] {
    border-color: var(--color-slate-600);
    background-color: var(--color-slate-800);
}

.input-group.checkbox .checkbox-wrapper input[type="checkbox"]:checked {
    background-color: var(--color-primary-500);
    border-color: var(--color-primary-500);
}

.input-group.checkbox.dark .checkbox-wrapper input[type="checkbox"]:checked {
    background-color: var(--color-secondary-500);
    border-color: var(--color-secondary-400);
}

/* Checkmark */
.input-group.checkbox .checkbox-wrapper input[type="checkbox"]:checked::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 6px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* RTL checkmark position adjustment */
[dir="rtl"]
    .input-group.checkbox
    .checkbox-wrapper
    input[type="checkbox"]:checked::before {
    left: auto;
    right: 6px;
}

/* Focus state */
.input-group.checkbox .checkbox-wrapper input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-primary-200);
}

.input-group.checkbox.dark .checkbox-wrapper input[type="checkbox"]:focus {
    box-shadow: 0 0 0 2px var(--color-secondary-700);
}

/* Disabled state */
.input-group.checkbox .checkbox-wrapper input[type="checkbox"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: var(--color-slate-200);
}

.input-group.checkbox.dark .checkbox-wrapper input[type="checkbox"]:disabled {
    background-color: var(--color-slate-700);
}

/* ============ Switch Style Checkbox ============ */
.input-group.checkbox.switch .checkbox-wrapper input[type="checkbox"] {
    width: 44px;
    height: 24px;
    border-radius: 12px;
    transition: var(--transition-smooth);
}

.input-group.checkbox.switch .checkbox-wrapper input[type="checkbox"]::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: white;
    transition: var(--transition-smooth);
    transform: none;
    border: none;
}

/* RTL switch knob position adjustment */
[dir="rtl"]
    .input-group.checkbox.switch
    .checkbox-wrapper
    input[type="checkbox"]::before {
    left: auto;
    right: 2px;
}

.input-group.checkbox.switch
    .checkbox-wrapper
    input[type="checkbox"]:checked::before {
    transform: translateX(20px);
    background-color: white;
}

/* RTL switch knob movement when checked */
[dir="rtl"]
    .input-group.checkbox.switch
    .checkbox-wrapper
    input[type="checkbox"]:checked::before {
    transform: translateX(-20px);
}

/* Responsive styles for checkbox */
@media (max-width: 600px) {
    .input-group.checkbox .checkbox-wrapper input[type="checkbox"] {
        width: 18px;
        height: 18px;
    }

    .input-group.checkbox
        .checkbox-wrapper
        input[type="checkbox"]:checked::before {
        top: 2px;
        left: 5px;
        width: 5px;
        height: 9px;
    }

    .input-group.checkbox.switch .checkbox-wrapper input[type="checkbox"] {
        width: 36px;
        height: 20px;
    }

    .input-group.checkbox.switch
        .checkbox-wrapper
        input[type="checkbox"]::before {
        width: 14px;
        height: 14px;
    }

    .input-group.checkbox.switch
        .checkbox-wrapper
        input[type="checkbox"]:checked::before {
        transform: translateX(16px);
    }

    [dir="rtl"]
        .input-group.checkbox.switch
        .checkbox-wrapper
        input[type="checkbox"]:checked::before {
        transform: translateX(-16px);
    }
}

/* Responsive Styles */
@media (max-width: 600px) {
    .input-group label {
        font-size: 0.8rem;
    }

    .input-group .input-wrapper input,
    .input-group .input-wrapper textarea,
    .input-group .input-wrapper input[type="date"] {
        padding: 10px 14px;
        font-size: 0.9rem;
    }

    .input-group.prefix .prefix-icon {
        padding: 10px 14px;
        font-size: 0.9rem;
    }

    .input-group.file-upload .file-name {
        padding: 10px;
        font-size: 0.9rem;
    }

    .input-group.file-upload .file-label {
        padding: 8px 12px;
        font-size: 0.8rem;
    }
    .input-group.file-upload .file-label {
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    .input-group.floating label {
        font-size: 0.9rem;
        font-weight: 700;
    }

    .input-group.floating .input-wrapper input,
    .input-group.floating .input-wrapper textarea {
        padding-top: 18px;
    }

    .input-group.floating .input-wrapper input:focus + label,
    .input-group.floating .input-wrapper textarea:focus + label,
    .input-group.floating .input-wrapper input:not(:placeholder-shown) + label,
    .input-group.floating
        .input-wrapper
        textarea:not(:placeholder-shown)
        + label {
        font-size: 0.7rem;
    }
}

/* Example Usage */

/* <!-- ========== Input عادي ========== --> */

/* 
<div class="input-group dark">
  <label for="name">الاسم</label>
  <div class="input-wrapper">
    <input type="text" id="name" placeholder="أدخل اسمك">
  </div>
</div>
*/

/* <!-- ========== Input مع Prefix ========== --> */

/*
<div class="input-group dark prefix">
  <label for="price">السعر المطلوب</label>
  <div class="input-wrapper">
    <span class="prefix-icon">💰</span>
    <input type="number" id="price" placeholder="أدخل المبلغ">
  </div>
</div>
*/

/* <!-- ========== Textarea ========== --> */

/*
<div class="input-group dark">
  <label for="notes">الملاحظات</label>
  <div class="input-wrapper">
    <textarea id="notes" placeholder="أدخل ملاحظاتك هنا"></textarea>
  </div>
</div>
*/

/* <!-- ========== Floating Input ========== --> */

/*
<div class="input-group dark floating">
  <div class="input-wrapper">
    <input type="text" id="username" placeholder=" " required>
    <label for="username">اسم المستخدم</label>
  </div>
</div>
*/

/* <!-- ========== Floating Textarea ========== --> */

/*
<div class="input-group dark floating">
  <div class="input-wrapper">
    <textarea id="message" placeholder=" " required></textarea>
    <label for="message">الرسالة</label>
  </div>
</div> 
*/

/* <!-- ========== Date ========== --> */

/* <div class="input-group date-input">
 <label for="date">اختر التاريخ</label> 
<div class="input-wrapper">
    <input type="date" @change="getorders" id="date" />
</div>
</div> */

/* <!-- ========== File Upload ========== --> */

/*
<div class="input-group dark file-upload">
  <div class="input-wrapper">
    <input type="file" id="fileInput" class="file-input" />
    <label for="fileInput" class="file-label">
        <svg viewBox="0 0 24 24">
            <path d="M12 2L6 8h4v4h4V8h4l-6-6zm-6 16v2h12v-2H6z"/>
        </svg>
      <span>اختر ملف</span></label>
  </div>
</div>
*/

/* Add this javascript to display uploaded file name  */
/* document.addEventListener("DOMContentLoaded", function() {
    document.querySelector(".file-input").addEventListener("change", function () {
    const fileName = this.files.length > 0 ? this.files[0].name : "اختر ملف";
    this.nextElementSibling.querySelector('span').textContent = fileName; // Update span within label
  });
}); */

/* <!-- ========== Checkbox Input ========== --> */

/* 
<div class="input-group checkbox">
  <div class="checkbox-wrapper">
    <input type="checkbox" id="termsCheckbox">
  </div>
  <label for="termsCheckbox">أوافق على الشروط والأحكام</label>
</div>
*/

/* <!-- ========== Switch Example ========== --> */

/* 
<div class="input-group checkbox switch">
  <div class="checkbox-wrapper">
    <input type="checkbox" id="pinSwitch">
  </div>
  <label for="pinSwitch">تفعيل PIN Code</label>
</div>
*/