/* --- فونت وزیر لوکال --- */
@font-face {
    font-family: 'Vazir';
    src: url('../fonts/Vazir.woff2') format('woff2'),
         url('../fonts/Vazir.woff') format('woff'),
         url('../fonts/Vazir.ttf') format('truetype');
    font-weight: normal; font-style: normal;
}




:root {
    --white: #ffffff;
    --black: #000;
    --primary: #bcc7d2;
    --primary_dark: #495057;
    --primary_light: #e8e8e8;
    --primary_lighter: #f8fafc;
    --body_background: #d1d8e0;
    
    
    --input_border: #e2e8f0;
    --input_background: #f9fbff;
    --input_label: #636e72;
    --input_danger: #ef4444;
    --input_dangerbody: #fff5f5;
    --form_btn-ok1: #b94141;
    --form_btn-ok2: #636e72;
    --form_btn-warning: #d63031;
    --form_btn-cancel: #fff0f0;
    --form_btn-cancel-text: #d63031;
    --form_btn-cancel-border: #ffdede;
    
    --alert_bg_error: #fff5f5;
    --alert_text_error: #e74c3c;
    --alert_border_error: #ffe3e3;
    --alert_bg_success: #dcfce7;
    --alert_text_success: #15803d;
    --alert_border_success: #b9f6ca;
    
    --form_title: #5584d2;
    --card_bg: #ffffff;
    --card_border: #eef2f6;
    --text_btn: #64748b;
    --lineitem_bg: #f0f7ff;
    
    --text_color_black: #000;
    --text_color_gray_light: #899ba2;
    --text_color_gray_white: #fff;
    
}

* { font-family: 'Vazir','Font Awesome 6 Pro', sans-serif !important; box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent;}

body {
    background-color: var(--body_background);
    margin: 0;
    padding: 0; /* اضافه شد */
    height: 100vh; 
    height: 100dvh; 
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* تغییر از center به flex-start برای چسبیدن به بالا */
    user-select: none;
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none;
}


.login-container {
    background: var(--white);
    width: 90%;
    max-width: 400px;
    padding: 45px 35px;
    border-radius: 30px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
    text-align: center;
    margin-top: 30px;
}

.login-logo {
    max-width: 130px;
    margin-bottom: 5px;
    margin-top: 10px;
}

.login-header p {
    color: #b2bec3;
    font-size: 13px;
    margin-bottom: 30px;
}


.form-field { text-align: right; margin-bottom: 10px; }

.form-field label {
    display: block;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 5px;
    color: var(--input_label);
    padding-right: 5px;
    font-weight: bold;
    font-size: 14px;
}

.form-input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--input_border);
    border-radius: 12px;
    background: var(--input_background);
    outline: none;
    transition: all 0.3s ease;
    text-align: right;
    resize: none;
}
    
 .form-input:focus {
    border-color: #5c67f2;
    box-shadow: 0 0 0 4px rgba(92, 103, 242, 0.1);
}

.error-text {
    color: var(--input_danger); font-size: 11px; display: none; margin-top: 3px;
}

.input-error { border: 2px solid var(--input_danger) !important; background: var(--input_dangerbody) !important; animation: shake 0.3s; }
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.btn-form {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 15px;
    color: var(--white);
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: 0.3s;
    margin-top: 25px;
    text-decoration: none;
}

.btn-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(92, 103, 242, 0.3);
}

/* استایل آیکون SVG داخل دکمه */
.btn-form svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.3s;
}

.btn-hover:hover svg {
    transform: translateX(-5px);
}

.btn-form-ok {
    background: var(--primary);
    color: var(--primary_dark);
}

.btn-form-ok1 {
    background: var(--form_btn-ok1);
}

.btn-form-ok2 {
    background: var(--form_btn-ok2);
}
.btn-form-cancel {
    background: var(--form_btn-cancel);
    color: var(--form_btn-cancel-text);
    border: 1px solid var(--form_btn-cancel-border);
}
.btn-form-warning {
    background-color: transparent;
    color: var(--form_btn-warning);
    border: 2px solid var(--form_btn-warning);
    transition: 0.3s;
}

.btn-form-warning:hover {
    background-color: var(--form_btn-warning);
    color: var(--white);
}

.btn-form-view { background: #fff; color: #5c67f2; border: 2px solid #5c67f2; }

.btn-form-edit { background: #1e293b; color: #fff; }
.btn-form-edit:hover { background: #334155; color: #fff; }


.btn-small { flex: 1; padding: 12px; border-radius: 15px; font-size: 13px; font-weight: bold; text-align: center; text-decoration: none; cursor: pointer;}
.btn-edit { background: #dee5ec; color: #475569; }
.btn-delete { background: #ffe1e1; color: #ff5e5e; }

.text-btn {
    display: block;
    text-align: center;
    margin-top: 15px;
    color: var(--text_btn);
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer
}


.alert {
padding: 10px 12px;
border-radius: 12px;
margin-bottom: 20px;
font-size: 13px;
display: flex;
align-items: center;
gap: 10px;
animation: slideIn 0.5s ease-out;
}

@keyframes slideIn {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.alert-error {
    background: var(--alert_bg_error);
    color: var(--alert_text_error);
    border: 1px solid var(--alert_border_error);
}

.alert-success {
    background: var(--alert_bg_success);
    color: var(--alert_text_success);
    border: 1px solid var(--alert_border_success);
}




.form-container {
    margin: 20px;
}

/* استایل کارت فرم ‌ */
.form-card { 
    background: var(--card_bg);
    padding: 20px;
    border-radius: 20px;
    margin-bottom: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.03); border: 1px solid var(--card_border);
}
.form-card-warning { margin-top: 50px; border: 1px solid var(--form_btn-cancel-border);}

.form-title { font-weight: 900; font-size: 20px; margin-bottom: 25px; color: var(--form_title); border-right: 5px solid var(--form_title); padding-right: 15px; }
.form-title-black { color: var(--black);}
.form-title-warning { color: var(--form_btn-warning); border-right-color: var(--form_btn-warning);}
.required-star { color: var(--input_danger); margin-right: 3px; font-size: 14px; }

.title { margin: 0; font-size: 22px; font-weight: bold;}
.sub-title {font-size: 15px; font-weight: 800; color: #64748b; margin-bottom: 15px;}


/* تنظیم گرید برای پاسخگو بودن (Responsive) */
.form-grid {
    display: grid;
    grid-template-columns: 1fr; /* پیش‌فرض برای موبایل: تک ستونه */
    gap: 5px 15px;
}

.form-field.full-width {
    grid-column: span 2;
}

.form-field.full-width-m {
    grid-column: span 2;
}

.form-grid-2-1 {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
}
.form-field-1 {
  grid-column: 1 / -1;
}



.checkbox-field { display: flex; align-items: center; gap: 10px; padding: 10px; background: #f8fafc; border-radius: 14px; cursor: pointer; border: 1px solid transparent; transition: 0.2s; }
.checkbox-field:has(input:checked) { background: #f0f3ff; border-color: #dbeafe; }

.profile-img { width: 120px; height: 120px; border-radius: 40px; object-fit: cover; border: 5px solid var(--card_border); }

.profile-action-btn {position: absolute; bottom: 0;  color: var(--white); width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 2px solid var(--white);}
.action-btn-add {background: #5c67f2; right: 0;}
.action-btn-remove {background: var(--input_danger); left: 0;}



/* برای نمایشگرهای بزرگتر از 600 پیکسل (دسکتاپ و تبلت) */
@media (min-width: 600px) {
    .form-grid {
        grid-template-columns: 1fr 1fr; /* دو ستونه شدن */
    }
    
    .form-field.full-width {
        grid-column: span 2; /* در دسکتاپ فیلدهای عریض دو ستون را پر کنند */
    }
    
    .form-field.full-width-m {
        grid-column: span 1; /* در دسکتاپ فیلدهای عریض دو ستون را پر کنند */
    }
    
    .form-grid-2-1 {
        grid-template-columns: 2fr 1fr 1fr;
    }
    .form-field-1 {
        grid-column: 1
        
    }
}



.username-box {background:var(--primary_light); padding:10px 15px; border-radius:15px; color:var(--primary_dark); border-right: 5px solid var(--primary_dark); font-weight: 800; }
.changeline-box {font-size:12px; background:#f1f5f9; border:none; padding:5px 10px; border-radius:8px; cursor:pointer; color:var(--text_btn);}


 /* استایل بیعانه */
.dashed-box { background: #fdfdfd; border: 2px dashed var(--input_border); padding: 20px; border-radius: 20px; margin-top: 15px; }
.price_words { font-size: 12px; color: #5964f0; font-weight: bold; margin: 0px 5px 10px; min-height: 15px; }


    /* استایل دکمه‌های انتخاب شغل -   */
    .job-card-select { 
        display: flex; justify-content: space-between; align-items: center; 
        background: #fff; padding: 20px; border-radius: 20px; margin: 15px; 
        border: 1.5px solid var(--input_border); color: #1e293b; text-decoration: none; 
        transition: 0.2s; cursor: pointer;
    }
    .job-card-select:hover { border-color: var(--primary); background: #f8fbff; }
    .job-card-select.active { background: var(--card_border); border-color: var(--primary); transform: scale(0.98); }
    .job-card-select.active svg { stroke: var(--primary); }




    .search-item { padding: 12px; border-bottom: 1px solid #f8fafc; cursor: pointer; }
    .search-item:hover { background: var(--lineitem_bg); }

    .clear-btn {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 22px;
        height: 22px;
        background: var(--input_border);
        color: var(--text_btn);
        border-radius: 50%;
        display: none; 
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 16px;
        font-weight: bold;
        transition: 0.2s;
        user-select: none;
    }

    .clear-btn:hover {
        background: #cbd5e1;
        color: #1e293b;
    }

    .search-results { 
        position: absolute; 
        background: white; 
        width: 100%; 
        border-radius: 12px; 
        box-shadow: 0 10px 25px rgba(0,0,0,0.15); 
        z-index: 999; 
        display: none; 
        border: 1px solid var(--input_border);
        max-height: 220px; 
        overflow-y: auto;  
        margin-top: 5px;
    }

    .search-results::-webkit-scrollbar { width: 6px; }
    .search-results::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
    .search-results::-webkit-scrollbar-track { background: #f1f5f9; }
    
    input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
    
    
    
        /* استایل وضعیت نوبت (Chips) */
    .status-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 25px; }
    .status-chip { 
        padding: 12px 5px; border-radius: 12px; border: 2px solid #f1f5f9; text-align: center; 
        cursor: pointer; transition: 0.3s; font-size: 13px; font-weight: bold; color: #64748b;
    }
    .status-chip input { display: none; }
    .status-chip.active[data-status="pending"] { border-color: #f59e0b; background: #fffbeb; color: #b45309; }
    .status-chip.active[data-status="confirmed"] { border-color: #3b82f6; background: #eff6ff; color: #1d4ed8; }
    .status-chip.active[data-status="attended"] { border-color: #10b981; background: #ecfdf5; color: #047857; }
    .status-chip.active[data-status="cancelled"] { border-color: #ef4444; background: #fef2f2; color: #b91c1c; }
    .status-chip.active[data-status="no_show"] { border-color: #6b7280; background: #f9fafb; color: #374151; }
    
    
.warning-box { 
        background: #fff1f2; border: 1.5px solid #fda4af; color: #9f1239; 
        padding: 15px; border-radius: 15px; margin-bottom: 20px; font-size: 13px; 
        line-height: 1.6; display: none; /* در ابتدا مخفی است */
    }
    .warning-box i { font-size: 18px; margin-left: 8px; }
    
    
    
    
        /* لیست آیتم های فرم های پایه */
    .label-tag { font-size: 12px; padding: 4px 8px; border-radius: 8px; font-weight: bold; display: inline-block; text-decoration: none;}
    .tag-blue { background: #e0f2fe; color: #0369a1; }
    .tag-orange { background: #fef3c7; color: #92400e; }
    .tag-green { background: #dcfce7; color: #166534; }
    .tag-red { background: #fed4c7; color: #ba0808; }
    

    .info-card { text-align: center; padding: 40px 20px; background: #fff; border-radius: 28px; border: 1px solid #eef2f6; box-shadow: 0 10px 25px rgba(0,0,0,0.03); }
    .item-card { background: #fff; border-radius: 20px; padding: 18px; margin-bottom: 15px; border: 1px solid #f1f5f9; position: relative; }
    .item-text { font-weight: 700; font-size: 14px; color: #1e293b; line-height: 1.5; }
    .item-meta { font-size: 11px; color: #94a3b8; margin-top: 5px; }
    .box-actions { display: flex; gap: 8px; margin-top: 10px; border-top: 1px solid #f8fafc; padding-top: 10px; justify-content: flex-end; }
    .action-btn { font-size: 12px; padding: 6px 12px; border-radius: 8px; text-decoration: none; font-weight: bold; border: none;}

    .edit-action-btn {background: #f0f3ff; color: #5c67f2;}
    .delete-action-btn {background: #fff1f1; color: #ff5e5e;}
    .edit1-action-btn {background: #ffe6d1; color: #e97f3e;}
    .manage-action-btn {background: #d9fde2; color: #10b981; width: auto; padding: 8px 12px; font-size: 13px; font-weight: bold; margin-top: 10px; display: inline-block; border-radius: 8px; text-decoration: none; }
    .btn-skip { background: #fee2e2; color: #b91c1c; border: none; padding: 8px 15px; border-radius: 12px; font-size: 12px; font-weight: 900; cursor: pointer; transition: 0.2s; }
    .btn-skip:active { transform: scale(0.95); background: #fecaca; }
    
    
    .link-action-btn {display: inline-block; margin-top: 8px; font-size: 12px; color: #5c67f2; text-decoration: none; font-weight: bold;}
    .btn-delete-small {width: 38px; height: 38px; border-radius: 12px; background: #fff1f1; color: #ff5e5e; display: flex; align-items: center; justify-content: center; text-decoration: none;}
    .btn-edit-small  {width: 38px; height: 38px; border-radius: 12px; background: #f0f3ff; color: #5c67f2; display: flex; align-items: center; justify-content: center; text-decoration: none;}
        /* نشانگر وضعیت پرسشنامه در لیست */
    .survey-badge { font-size: 10px; padding: 3px 8px; border-radius: 6px; font-weight: bold; }
    .badge-needed { background: #e0f2fe; color: #0369a1; }
    .badge-none { background: #f1f5f9; color: #94a3b8; }
    
    
    
        /* پرنده مشتری */

    .info-title { font-weight: 900; color: #64748b; font-size: 14px; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
    .title-col1 { color: #0891b2; }
    .title-col2 { color: #5c67f2; }
    .title-bottom-line { padding-bottom: 8px; border-bottom: 2px solid #eee; }
    .customer-name { font-size: 24px; font-weight: 900; color: #1e293b; margin-bottom: 5px; }
    .info-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #ebf5ff; }
    .info-row:last-child { border: none; }
    .info-label { color: #94a3b8; font-size: 13px; }
    .info-value { color: #1e293b; font-weight: 700; font-size: 13px; text-align: left; }
    .box-row {background: var(--input_background); border-radius: 15px; padding: 20px; margin: 20px 0; }
    
    
    
            /* پذیرش  */ 
    .section-header { font-weight: 900; font-size: 16px; margin: 30px 0 15px; padding: 12px; background: #fff; border-radius: 15px; text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
    .q-row { margin-bottom: 20px; background: #fff; padding: 20px 10px 20px 10px; border-radius: 20px; border-top: 1px solid #f1f5f9; border-left: 1px solid #f1f5f9; border-bottom: 1px solid #f1f5f9; box-shadow: 0 4px 12px rgba(0,0,0,0.02); }
    .q-label { display: block; font-weight: 800; font-size: 15px; color: #1e293b; margin-bottom: 15px; line-height: 1.6; }
    
    .q-show-row { margin-bottom: 18px; position: relative; }
    /* استایل شماره‌گذاری سوالات */
    .q-show-number { background: #f1f5f9; color: #64748b; width: 25px; height: 25px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 14px; margin-left: 8px; vertical-align: middle; }
    
    .question { font-size: 13px; color: #64748b; font-weight: bold; margin-bottom: 6px; display: block; }
    .answer-box { background: #f8fafc; padding: 12px 15px; border-radius: 12px; font-size: 14px; color: #1e293b; font-weight: 800; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    
    .badge-alert { color: #ef4444; background: #fee2e2; padding: 2px 8px; border-radius: 6px; font-size: 10px; white-space: nowrap; }
    .badge-safe { color: #10b981; background: #dcfce7; padding: 2px 8px; border-radius: 6px; font-size: 10px; white-space: nowrap; }
    
    
    
    
    .form-header { background: linear-gradient(135deg, #d4dee7, #e6f2ff); border-radius: 25px; padding: 20px; margin-bottom: 25px; border-right: 5px solid #5c67f2; }
    .form-header-title { font-size: 18px; font-weight: 900; color: #1e293b; margin-bottom: 5px; }
    .form-header-subtitle { font-size: 14px; color: #64748b; }
    
    
    
    .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1005; justify-content: center; align-items: center; backdrop-filter: blur(4px); }

















.app-container {
    width: 100%;
    max-width: 1024px;
    background-color: #f4f7fe;
    display: flex;
    flex-direction: column;
    /* فیکس کردن ارتفاع بر اساس کل صفحه */
    height: 100vh;
    height: 100dvh;
    position: relative;
    box-shadow: 0 0 50px rgba(0,0,0,0.1);
}

/* هدر فیکس شده در بالا */
.main-header {
    background-color: var(--primary_dark);
    color: white;
    padding: 15px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 65px;
    flex-shrink: 0;
    z-index: 1000;
}

/* محتوای میانی که قابلیت اسکرول دارد */
.main-content-area {
    flex: 1 1 auto; /* رشد کردن و پر کردن فضا */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* اسکرول نرم در iOS */
    padding-bottom: 20px;
}


.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-logo {
    height: 35px;
    width: auto;
}

.site-name {
    font-weight: bold;
    font-size: 20px;
}

.icon-bell {
    width: 26px;
    height: 26px;
    color: #ffc107;
    cursor: pointer;
}

/* فوتر فیکس شده در پایین */
.main-footer {
    background: #fff;
    border-top: 1px solid var(--input_border);
    padding: 5px;
    text-align: center;
    font-size: 13px;
    color: #7f8c8d;
    height: 35px;
    flex-shrink: 0; /* مانع از غیب شدن یا فشرده شدن فوتر می‌شود */
}



/* منوی ناوبری پایین */
.bottom-nav {
    position: sticky; /* یا absolute نسبت به کانتینر اصلی */
    bottom: 0;
    width: 100%;
    background-color: #ffffff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 0 15px 0;
    border-top: 1px solid #f1f3f5;
    box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.05); /* سایه ملایم بالا */
    z-index: 1001;
    flex-shrink: 0;
}

.nav-item {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #b2bec3; /* رنگ غیرفعال */
    transition: all 0.3s ease;
    flex: 1;
}

.nav-item.active {
    color: #5c67f2; /* رنگ آبی طبق تصویر */
}

.nav-item svg {
    width: 26px;
    height: 26px;
    transition: transform 0.2s;
}

.nav-item:active svg {
    transform: scale(0.9);
}

.nav-item span {
    font-size: 12px;
    font-weight: bold;
}

/* اصلاح فوتر متنی برای اینکه زیر منو نرود */
.main-footer {
    display: none; /* در صورت داشتن منوی باتوم، فوتر متنی معمولاً حذف می‌شود */
}


   .alert-main { 
      padding: 12px 12px;
      border-radius: 12px;
      background: #fff;
      display: flex;
      align-items: center;
      gap: 10px;
      animation: slideIn 0.5s ease-out;
      max-width: 80%;
      z-index: 200;
   }
   
   .alert-success-main { 
        color: #375241;
        border: 1px solid #d0d0d0;
        box-shadow: 0 0px 9px rgba(0, 0, 0, 0.19);
   }