/* تنظیمات کلی صفحه */
body {
    margin: 0;
    padding: 0;
    min-height: 100vh; /* ارتفاع کل صفحه */
    display: flex;
    flex-direction: column; /* چینش عمودی */
    background-color: aliceblue;
    font-family: sans-serif;
}

/* نوار ناوبری */
.navbar {
    width: 100%;
    background-color: #f00;
    overflow: auto;
}

    .navbar a {
        float: right;
        text-align: center;
        padding: 12px;
        color: white;
        text-decoration: none;
        font-size: 17px;
    }

        .navbar a:hover {
            background-color: darkorange;
        }

.active {
    background-color: white;
    color: #f00;
}

/* محتوای اصلی */
.content {
    flex: 1; /* پر کردن فضای خالی بین هدر و فوتر */
    padding: 20px;
}

/* فوتر */
.footer {
    background: #f8f9fa;
    padding: 20px;
    text-align: center;
    border-top: 1px solid #ccc;
    margin-top: auto; /* همیشه پایین صفحه */
}

/* دکمه‌ها */
.btn-group .button {
    background-color: #f00; /* قرمز */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
}

    .btn-group .button:hover {
        background-color: #3e8e41; /* سبز */
    }

/* دکمه‌های منو: داخل سفید، دور آبی */
.btn-nav.btn-outline-primary {
    background-color: #fff;
    color: #0d6efd;
    border: 1px solid #0d6efd;
}

    .btn-nav.btn-outline-primary:hover {
        background-color: #0d6efd;
        color: #fff;
    }

/* ریسپانسیو */
@media screen and (max-width: 500px) {
    .navbar a {
        float: none;
        display: block;
    }

    /* کنترل بار در موبایل */
    .control-bar {
        display: block;
        text-align: center;
    }

        /* چهار دکمه اول */
        .control-bar button[id^="Optionbutton3_"]:not(#Optionbutton3_5) {
            display: block;
            width: 60%;
            margin: 6px auto;
            font-size: 16px;
        }

    /* کلمات کلیدی */
    #SearchItems {
        display: block;
        width: 60%;
        margin: 6px auto;
    }

    /* وضعیت و تعداد درخواستی */
    #SearchOpenLoveSelector,
    #SearchItemsCountSelector {
        display: block;
        width: 60%;
        margin: 6px auto;
    }

    /* دکمه جستجو */
    #Optionbutton3_5 {
        display: block;
        width: 60%;
        margin: 12px auto;
        font-size: 16px;
    }
}

.control-bar {
    background-color: #394e30; /* آبی نفتی */
    color: #fff; /* متن سفید */
    padding: 10px;
    width: 100%;
    margin: 0px;
    display: flex; /* 👈 اضافه شود */
    flex-wrap: wrap; /* 👈 اضافه شود */
    align-items: center; /* 👈 اضافه شود */
    gap: 8px; /* 👈 اضافه شود */
    direction: rtl; /* 👈 اضافه شود */
}

    .control-bar button,
    .control-bar input,
    .control-bar select {
        margin: 2px;
        flex: 0 0 auto;
        min-width: 80px;
        font-size: 14px;
    }

/* واکنش‌گرایی برای موبایل */
@media (max-width: 768px) {
    .control-bar {
        flex-direction: column;
        align-items: stretch;
    }

        .control-bar button,
        .control-bar input,
        .control-bar select,
        .control-bar span {
            width: 100%;
            text-align: center;
        }
}

/* مدیریت لینک‌ها و متن‌های طولانی - راه حل ۴ کامل */
.breakable-link,
.long-url,
#ListPositionOutput a,
#ListPositionOutput td a,
.table a,
#ReportTable a {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    display: inline-block !important;
    max-width: 100% !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    -ms-hyphens: auto !important;
}

/* برای کل جدول نتایج */
#ListPositionOutput {
    overflow-x: auto !important;
    width: 100% !important;
    -webkit-overflow-scrolling: touch !important;
}

    #ListPositionOutput table,
    #ReportTable,
    #ListPositionOutput .table {
        min-width: 100% !important;
        table-layout: fixed !important;
        border-collapse: collapse !important;
    }

        #ListPositionOutput td,
        #ReportTable td,
        #ListPositionOutput .table td,
        #ListPositionOutput table td {
            word-wrap: break-word !important;
            overflow-wrap: break-word !important;
            word-break: break-word !important;
            max-width: 100vw !important;
            hyphens: auto !important;
            -webkit-hyphens: auto !important;
            -ms-hyphens: auto !important;
            white-space: normal !important;
            overflow: hidden !important;
        }

    #ListPositionOutput table,
    #ReportTable {
        width: 100% !important;
    }

        #ListPositionOutput tr,
        #ReportTable tr {
            display: table-row !important;
            width: 100% !important;
        }

        #ListPositionOutput td,
        #ReportTable td {
            display: table-cell !important;
            vertical-align: top !important;
            padding: 10px 8px !important;
            border: 1px solid #dee2e6 !important;
        }

/* برای موبایل‌ها - بهینه‌سازی نمایش در دستگاه‌های کوچک */
@media (max-width: 768px) {
    #ListPositionOutput table,
    #ReportTable {
        font-size: 14px !important;
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

        #ListPositionOutput td,
        #ReportTable td {
            padding: 8px 6px !important;
            font-size: 13px !important;
            min-width: 50px !important;
            max-width: calc(100vw - 20px) !important;
        }

        #ListPositionOutput a,
        #ReportTable a,
        .table a {
            font-size: 12px !important;
            padding: 3px 0 !important;
            line-height: 1.4 !important;
        }

            /* بهبود نمایش لینک‌های بسیار طولانی در موبایل */
            #ListPositionOutput a[href^="http"],
            #ReportTable a[href^="http"],
            .table a[href^="http"] {
                background-color: #f8f9fa !important;
                border-radius: 4px !important;
                padding: 4px 6px !important;
                margin: 2px 0 !important;
                border: 1px solid #e9ecef !important;
                font-family: 'Courier New', monospace !important;
                font-size: 11px !important;
            }

            /* برای لینک‌های ایمیل */
            #ListPositionOutput a[href^="mailto:"],
            #ReportTable a[href^="mailto:"] {
                direction: ltr !important;
                unicode-bidi: embed !important;
            }

    /* اگر می‌خواهید لینک‌ها به صورت چند خطی نمایش داده شوند */
    .mobile-break {
        display: block !important;
        white-space: normal !important;
        word-break: break-all !important;
    }
}

/* برای تبلت‌ها */
@media (min-width: 769px) and (max-width: 1024px) {
    #ListPositionOutput table,
    #ReportTable {
        font-size: 15px !important;
    }

        #ListPositionOutput td,
        #ReportTable td {
            padding: 10px 8px !important;
            font-size: 14px !important;
        }

        #ListPositionOutput a,
        #ReportTable a {
            font-size: 13px !important;
        }
}

/* جلوگیری از بیرون زدن محتوا از کانتینر */
.container,
.row,
#3 {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* استایل برای iframe‌ها */
#ListPositionOutput iframe,
#ReportTable iframe {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    min-height: 400px !important;
}

@media (max-width: 768px) {
    #ListPositionOutput iframe,
    #ReportTable iframe {
        min-height: 300px !important;
        height: 300px !important;
    }
}

/* بهبود نمایش متن‌های فارسی و انگلیسی با هم */
#ListPositionOutput td,
#ReportTable td {
    text-align: justify !important;
    line-height: 1.6 !important;
}

/* استایل برای لینک‌های فعال */
#ListPositionOutput a:active,
#ListPositionOutput a:focus,
#ReportTable a:active,
#ReportTable a:focus {
    outline: 2px solid #1a73e8 !important;
    outline-offset: 2px !important;
}

/* حذف اسکرول افقی غیرضروری */
body {
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative !important;
}

/* پشتیبانی از مرورگرهای مختلف */
@supports (-webkit-hyphens: auto) {
    #ListPositionOutput td,
    #ListPositionOutput a {
        -webkit-hyphens: auto !important;
    }
}

@supports (hyphens: auto) {
    #ListPositionOutput td,
    #ListPositionOutput a {
        hyphens: auto !important;
    }
}

/* fallback برای مرورگرهای قدیمی */
.no-hyphens {
    word-break: break-all !important;
}

/* کلاس کمکی برای مواقع ضروری */
.force-break {
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
}

/* برای نمایش URLها به صورت تمیزتر */
.pretty-url {
    font-family: 'Courier New', Consolas, monospace !important;
    background: #f5f5f5 !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
    border: 1px solid #ddd !important;
}

/* راه حل فوری برای مشکل راست‌چینی */
#ListPositionOutput td[style*="width: 100%; font-size:16px"] {
    text-align: right !important;
    direction: rtl !important;
}

    #ListPositionOutput td[style*="width: 100%; font-size:16px"] > span:first-child {
        display: inline-block !important;
        min-width: 120px !important;
        text-align: right !important;
        font-weight: bold !important;
    }

    #ListPositionOutput td[style*="width: 100%; font-size:16px"] > a {
        direction: ltr !important;
        text-align: left !important;
        display: inline !important;
    }

/* ========== اصلاحات جدید برای تراز عناوین ========== */

/* راه حل قوی برای تراز کردن عناوین و مقادیر - با استثنا برای iframe */
#ReportTable tr td:not(:has(iframe)) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    text-align: right !important;
    direction: rtl !important;
    padding: 10px 8px !important;
    border: 1px solid #dee2e6 !important;
}

    #ReportTable tr td:not(:has(iframe)) span:first-of-type {
        flex: 0 0 120px !important;
        min-width: 120px !important;
        max-width: 120px !important;
        font-weight: bold !important;
        text-align: right !important;
        padding-left: 10px !important;
        color: #0d47a1 !important;
    }

    #ReportTable tr td:not(:has(iframe)) span:not(:first-of-type):not(a) {
        flex: 1 !important;
        min-width: 0 !important;
        text-align: right !important;
        word-break: break-word !important;
        padding-right: 5px !important;
    }

/* برای tdهای دارای iframe - حالت عادی */
#ReportTable tr td:has(iframe) {
    display: table-cell !important;
    padding: 10px 8px !important;
    border: 1px solid #dee2e6 !important;
    text-align: center !important;
}

    #ReportTable tr td:has(iframe) iframe {
        width: 98% !important;
        height: 400px !important;
        border: none !important;
    }

/* استثنا برای لینک‌ها - نباید flex باشند */
#ReportTable tr td a {
    display: inline !important;
    flex: none !important;
    direction: ltr !important;
    text-align: left !important;
    word-break: break-all !important;
}

/* برای موبایل */
@media (max-width: 768px) {
    #ReportTable tr td:not(:has(iframe)) span:first-of-type {
        flex: 0 0 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;
        font-size: 13px !important;
        padding-left: 5px !important;
    }

    #ReportTable tr td {
        padding: 8px 6px !important;
    }

        #ReportTable tr td:has(iframe) iframe {
            height: 300px !important;
        }
}

/* اگر مرورگر :has() را پشتیبانی نمی‌کند، این جایگزین */
.has-iframe {
    display: table-cell !important;
}

/* تنظیم جهت متن برای عناوین فارسی */
#ReportTable tr td:not(:has(iframe)) span:first-of-type {
    direction: rtl !important;
    unicode-bidi: embed !important;
}

/* تنظیم جهت برای مقادیر */
#ReportTable tr td:not(:has(iframe)) span:not(:first-of-type):not(a) {
    direction: rtl !important;
    unicode-bidi: embed !important;
}

/* استایل برای لینک‌های انگلیسی */
#ReportTable tr td a[href^="http"],
#ReportTable tr td a[href^="https"] {
    direction: ltr !important;
    unicode-bidi: embed !important;
}