/* assets/css/client_dashboard_style.css */
@font-face {
    font-family: 'Estedad';
    src: url('../fonts/Estedad[KSHD,wght].ttf') format('truetype-variations');
    font-weight: 100 900;
    font-display: swap;
}
a > svg:hover {
    color: white;
}
.ai-title {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

body {
    margin: 0 !important;
    font-family: 'Estedad', sans-serif;
    direction: rtl;
    background-image: repeating-linear-gradient(45deg, #fafafa, #fafafa 30px, #fff 0, #fff 60px);
    text-align: right;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    align-content: center;
    align-items: center;
}





.vibrate {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ff4f5d;
    transform: scale(1);
    box-shadow: 0 0 0 rgba(0, 0, 0, 1);
    animation: anim-vibrate 2s infinite;
    display: inline-block;
    margin-right: 8px !important; /* فاصله از متن */
  }
  
  @keyframes anim-vibrate {
    0% {
      transform: scale(0.95);
      box-shadow: 0 0 0 0 rgb(225 91 98 / 61%);
    }
    70% {
      transform: scale(1);
      box-shadow: 0 0 0 0.6rem rgba(0, 0, 0, 0);
    }
    100% {
      transform: scale(0.95);
      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
  }
  
a svg {
    width: 20px;
    color: #b3b3b3;
    height: 20px;
}

a > svg:hover {
    color: #ffffff;
}
a > svg:active {
    color: #ffffff;
}
.message-container > .message--icon {
    width: 16px;
    height: 16px;
    margin-top: 4px;
}

.message-container.message-info {
    background: rgba(37,177,213,0.12);
    color: #25b1d5;
    border-color: #63c6df;
}

.message-container {
    align-items: center;
    gap: 6px;
    margin: 7px 0 7px;
    padding: 5px 11px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    border-radius: 8px;
    box-shadow: 0 3px 14px rgb(0 0 0 / 1%);
    border: solid 1px #ccc;
    flex-direction: row;
    justify-content: flex-start;
}

.login-container {
    background-color: #2c3e50;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    width: 380px;
    margin: 80px auto;
}
.login-container h2 { text-align: center; margin-bottom: 15px; color: #0067c0; }
.login-container label {
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 500;
    color: #bcccdc !important;
}.login-container input[type="email"], .login-container input[type="password"] {
    width: calc(100% - 24px); padding: 12px; margin-bottom: 18px;
    border: 1px solid #bcccdc; border-radius: 5px; font-family: 'Estedad', sans-serif;
}
.login-container input[type="submit"] {
    background-color: #bcccdc;
    color: #2c3e50;
    padding: 12px 20px;
    border: none;
    font-family: unset;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    transition: background-color 0.2s;
}
.login-container input[type="submit"]:hover {
    background-color: #ffffff;
}

.login-container .error {
    color: #ff4f5d;
    background-color: #ffd6d9;
    margin-bottom: 15px;
    border-radius: 5px;
    font-size: 14px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
}
.client-main-footer a {
    color: #ff4f5d;
    font-weight: 700;
    text-decoration: none;
}

.page-footer a:hover { text-decoration: underline; }


.client-dashboard-layout { display: flex; min-height: 100vh; width: 100%; }
.client-sidebar {
    width: 260px;
    background-color: #292826;
    color: #bdbdbd;
    padding-top: 25px;
    flex-shrink: 0;
    display: flex;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    flex-direction: column;
}
.client-sidebar-header {
    padding-bottom: 20px;
    text-align: center;
    border-bottom: 1px solid #454545;
}
.client-sidebar-header h3 { margin: 0; color: #fff; font-weight: 600; font-size: 1.5em; }
.client-sidebar-nav ul {
    list-style: none;
    padding: 15px;
    display: flex;
    margin: 25px 0 0 0;
    gap: 5px;
    flex-direction: column;
}
.client-sidebar-nav li a {
    color: #bdc3c7;
    width: 100%;
    text-decoration: none;
    border-right: 4px solid transparent;
    font-size: 15px;
    border-radius: 8px;
    transition: all 0.3s ease;
    display: flex;
    gap: 10px;
    padding: 12px 12px 12px 10px;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
}
.client-sidebar-nav li.active {
    background-color: #141414;
    color: #fff;
    display: flex;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}
.client-sidebar-footer {
    padding: 20px;
    font-size: 0.8em;
    color: #7f8c8d;
    text-align: center;
    border-top: 1px solid #34495e;
    margin-top: auto; /* به پایین می‌چسبد */
}


.client-main-content { flex-grow: 1; display: flex; flex-direction: column; }
.client-main-header {
    background-color: #fff;
    display: flex;
    gap: 10px;
    padding: 20px 35px;
    border-bottom: 1px solid #dde4e9;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
}
.client-main-header h1 { margin: 0; font-size: 26px; color: #2c3e50; font-weight: 600; text-align: right; }
.client-content-area { padding: 35px; background-color: #f4f6f8; flex-grow: 1; }
.client-main-footer {
    text-align: center; padding: 18px; background-color: #fff;
    border-top: 1px solid #dde4e9; font-size: 0.95em; color: #566573;
}
.client-main-footer a:hover { text-decoration: underline; }

.stats-boxes { display: flex; gap: 20px; margin-bottom: 30px; flex-wrap: wrap; }
.stat-box {
    background-color: #fff;
    padding: 20px;
    border-radius: 6px;
    flex: 1;
    box-shadow: 1px 1px 7px rgb(0 0 0 / 2%);
    min-width: 200px;
}
.stat-box h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #34495e;
    font-size: 17px;
    font-weight: 600;
}
li a:hover {
    font-weight: 600;
    color: #fff;
    background-color: #1a1919;
}
li {
    border-radius: 8px;
    transition: all 0.2s ease;
}
li a {
    border-radius: 8px;
    transition: all 0.2s ease;
}
li a:active {
font-weight: 700;    color: #fff;
}
.stat-box p { margin: 0; font-size: 15px; font-weight: 500; color: #54667a; }
.stat-box p.status-inactive { color: #ff4f5d;   font-weight: 700; }
.stat-box p.status-active {
    color: #43d343;
    font-weight: 700;
}

.client-log-table, .account-info-table {
    width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 0.9em;
    background-color: #fff; box-shadow: 0 1px 5px rgba(0,0,0,0.06); border-radius: 5px; overflow:hidden;
}
.client-log-table th, .client-log-table td,
.account-info-table th, .account-info-table td {
    border: 1px solid #e7eaec; padding: 12px 15px; text-align: right;
}
.client-log-table th, .account-info-table th {
    background-color: #f9fafb; font-weight: 500; color: #4a5568;
}
.log-text-cell { /* مشابه ادمین، اما شاید با کمی تغییر */
    max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account-info-table th { width: 200px; } /* برای جدول اطلاعات اکانت */


/* Styles for "Other Products" Tab (prumapp classes) */
/* Updated Styles for "Other Products" Tab (prumapp classes) */
.client-content-area #other_products_content > h2 { /* استایل برای عنوان اصلی تب */
    color: #2c3e50; 
    margin-bottom: 25px; 
    font-size: 22px; 
    text-align: right; 
}

.client-content-area #other_products_content .prumapp-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.client-content-area #other_products_content .prumapp-product-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: #333;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.client-content-area #other_products_content .prumapp-product-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.client-content-area #other_products_content .prumapp-product-image-wrapper {
    position: relative;
    margin-bottom: 15px;
}

.client-content-area #other_products_content .prumapp-product-image-wrapper img {
    width: 80px;
    height: 80px;
    object-fit: cover; /* یا contain اگر نمی‌خواهید تصویر برش بخورد */
    border-radius: 8px;
}

.client-content-area #other_products_content .prumapp-product-badge {
    position: absolute;
    top: -10px;
    right: -10px; 
    background: #34d399; /* رنگ سبز برای نشان "رایگان" */
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 12px; /* گردی بیشتر برای بج */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.client-content-area #other_products_content .prumapp-product-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 10px;
    color: #1f2937;
}

.client-content-area #other_products_content .prumapp-product-description {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

.client-content-area #other_products_content .prumapp-products-footer {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px; /* کمی فاصله از بالا */
    border-top: 1px solid #e5e7eb; /* خط جداکننده */
    font-size: 14px;
    color: #4b5563;
}

.client-content-area #other_products_content .prumapp-products-footer p {
    margin: 5px 0;
}

.client-content-area #other_products_content .prumapp-products-footer a {
    color: #0073aa; /* رنگ لینک استاندارد وب‌پریمیوم */
    text-decoration: none;
    font-weight: 600;
}

.client-content-area #other_products_content .prumapp-products-footer a:hover {
    text-decoration: underline;
}

.client-content-area #other_products_content .prumapp-product-badge.soon {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #ffcf33; /* رنگ زرد برای "به‌زودی" */
    color: #1f2937; /* رنگ متن تیره‌تر برای خوانایی بهتر روی زرد */
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.client-content-area #other_products_content .prumapp-product-badge.special {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #2a99e3; /* رنگ آبی برای "ویژه" */
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Styles for "Documentation" Tab */
.client-content-area h2 { /* For documentation tab title if not already styled */
    color: #2c3e50;
    margin-bottom: 20px;
    font-size: 22px; /* Slightly smaller than main page title */
}
.client-content-area p {
    line-height: 1.7;
    margin-bottom: 15px;
    color: #333;
}
.client-content-area ul { /* For documentation list */
    list-style: disc;
    margin-right: 20px; 
    margin-bottom: 20px;
    padding-right: 20px; 
}
.client-content-area ul li {
    margin-bottom: 10px;
    line-height: 1.6;
}

/* Hamburger Toggle Button */
.sidebar-toggle {
    display: none; /* Hidden by default, shown on mobile */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    margin-left: 15px; /* For RTL: space from right-aligned title */
    z-index: 1001; 
}
.sidebar-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #2c3e50;
    margin: 5px 0;
    transition: all 0.3s ease;
    border-radius: 3px;
}

/* Overlay for mobile menu */
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999; /* Below sidebar, above content */
    cursor: pointer;
}
.overlay.active {
    display: block;
}


/* Responsive Sidebar for Mobile */
@media (max-width: 768px) {
    .client-dashboard-layout {
        /* flex-direction: column; Remove this if header should stay fixed at top */
    }
    .client-sidebar {
        position: fixed;
        top: 0;
        right: -280px; /* Start off-screen for RTL */
        width: 260px; /* Ensure this is not wider than desired */
        height: 100vh; /* Full height */
        z-index: 1000;
        transition: right 0.3s ease-in-out;
        overflow-y: auto; /* Allow sidebar scroll if content is long */
        box-shadow: -2px 0 5px rgba(0,0,0,0.2); /* Shadow on the left edge for RTL */
    }
    .client-sidebar.open {
        right: 0; /* Slide in from right */
    }
    .client-main-content {
        width: 100%;
        /* transition: margin-right 0.3s ease-in-out; /* Removed as sidebar will overlay */
        /* margin-right: 0 !important; /* Ensure no margin when sidebar is closed */
    }
    /* When sidebar is open, you might want to push content or dim it.
       For overlay, no push is needed. For push:
    .client-sidebar.open + .client-main-content {
        margin-right: 260px;
    }
    */

    .sidebar-toggle {
        display: block; /* Show hamburger on mobile */
    }

    .client-main-header {
        /* Adjust padding if toggle button causes layout issues */
        padding-right: 15px; /* Less padding on right if toggle is on left */
        padding-left: 15px;
        position: relative; /* For stacking context */
    }

    /* Make login container and its footer more responsive */
    .login-container {
        width: 90% !important;
        max-width: 300px; /* Optional max width */
        margin: 40px auto; /* Less margin on mobile */
        padding: 20px;
    }
    .page-footer {
        width: 90% !important;
        max-width: 300px;
        padding: 15px;
    }

    .stats-boxes .stat-box {
        min-width: calc(50% - 10px); /* Two columns on mobile */
        flex-basis: calc(50% - 10px);
    }
    .client-log-table td, .client-log-table th {
        padding: 8px 10px; /* Smaller padding for table cells */
        font-size: 0.85em;
    }
    .log-text-cell {
        max-width: 100px; /* Adjust for smaller screens */
    }
    .client-content-area {
        padding: 20px;
    }
    .client-main-header h1 {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .stats-boxes .stat-box {
        max-width: 300px;
    }
}


/* Badge for menu items like Support */
.client-sidebar-nav li a .prumapp-badge-soon { /* اسکوپ دقیق‌تر برای بج منو */
    position: absolute;
    top: 50%;
    left: 10px; /* در سمت چپ آیتم منو قرار می‌گیرد (مناسب RTL) */
    transform: translateY(-50%);
    background: #ff4f5d;
    color: #fff;
    font-size: 10px;
    font-weight: 500; /* کمی خواناتر */
    padding: 2px 6px;
    border-radius: 4px; /* کمی گردی بیشتر */
    transition: all 0.3s ease;
    z-index: 1; /* برای اطمینان از نمایش روی سایر محتواها در صورت همپوشانی احتمالی */
}

/* Styles for the new Support Tab content */
.client-content-area .support-ticket-section-wrapper {
    position: relative; /* برای موقعیت‌دهی لایه پیام */
    padding: 20px; /* کمی پدینگ داخلی */
    border: 1px dashed #ddd; /* یک حاشیه برای جداسازی */
    border-radius: 8px;
    background-color: #fdfdfd;
    margin-top: 15px;
}

.client-content-area .ticket-form-placeholder {
    filter: blur(1px); /* میزان محو شدگی */
    opacity: 0.5;      /* میزان شفافیت */
    pointer-events: none; /* غیرفعال کردن هرگونه تعامل با محتوای محو شده */
    user-select: none; /* جلوگیری از انتخاب متن */
}

/* اطمینان از اینکه نشانگر موس روی تمام بخش محو شده "not-allowed" باشد */
.client-content-area .ticket-form-placeholder,
.client-content-area .ticket-form-placeholder * { /* اعمال به خود و تمام فرزندان */
    cursor: not-allowed !important; /* مهم برای بازنویسی نشانگرهای دیگر */
}

.client-content-area .under-development-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    z-index: 10; /* بالاتر از محتوای محو شده */
    backdrop-filter: blur(1px); /* اعمال کمی بلور روی پس‌زمینه این لایه نیز (اختیاری) */
}

.client-content-area .under-development-overlay p {
    background-color: #d7e1ec; /* پس‌زمینه نیمه‌شفاف برای خوانایی پیام */
    padding: 25px 35px;
    border-radius: 8px;
    font-size: 1.1em; /* اندازه فونت پیام */
    color: #2c3e50; /* رنگ متن پیام */
    box-shadow: 0 5px 20px #bcccdc91;
    max-width: 90%;
    line-height: 1.7;
}

.client-content-area .under-development-overlay p a {
    color: #2c3e50; /* رنگ لینک مطابق با سایر بخش‌ها */
    font-weight: 600;
    text-decoration: none;
}
.client-content-area .under-development-overlay p a:hover {
    text-decoration: underline;
}

/* استایل‌های اولیه برای کلاس‌های عمومی استفاده شده در HTML فرم (اگر از قبل تعریف نشده‌اند) */
/* اگر این کلاس‌ها در جای دیگری از CSS شما تعریف شده‌اند، نیازی به اضافه کردن مجدد آن‌ها نیست */
.client-content-area .w-100 { width: 100%; }
.client-content-area .flex { display: flex; }
.client-content-area .flex-c { flex-direction: column; }
.client-content-area .flex-r { flex-direction: row; }
.client-content-area .flex-icenter { align-items: center; }
.client-content-area .flex-center { justify-content: center; align-items: center; } /* ترکیب دو مورد */
.client-content-area .flex-1 { flex: 1; }
.client-content-area .relative { position: relative; }
.client-content-area .disabled { opacity: 0.6; pointer-events: none; }


/* استایل‌دهی به ظاهر select ها در فرم نمایشی */
.client-content-area .label.select-input-label {
    font-size: 14px;
    margin-bottom: 8px;
    color: #34495e;
    font-weight: 500;
}
.client-content-area .select-input-holder {
    border: 1px solid #bdc3c7;
    padding: 10px 12px;
    border-radius: 5px;
    background-color: #ecf0f1; /* رنگ برای نشان دادن حالت غیرفعال */
    color: #7f8c8d;
    justify-content: space-between; /* برای قرارگیری آیکون در سمت چپ (برای RTL) */
    min-height: 40px; /* ارتفاع یکسان با سایر فیلدها */
}
.client-content-area .select-input-holder svg {
    width: 16px;
    height: 16px;
    fill: #7f8c8d;
}
.client-content-area .ticket-form-field.disabled .select-input-holder {
    background-color: #e9ecef;
    color: #95a5a6;
}
.client-content-area .ticket-form-field.disabled .select-input-label {
    color: #95a5a6;
}
.client-content-area .field_required_style { 
    color: #e74c3c;
    margin-right: 3px;
}

/* استایل برای بخش placeholder (تصویر SVG و متن‌های زیر آن) */
.client-content-area #ticket-new-placeholder-wrapper {
    padding: 30px 0; /* کمی فاصله عمودی */
    text-align: center;
}
.client-content-area #ticket-new-placeholder-wrapper svg {
    width: 80px; /* اندازه مناسب برای SVG */
    height: 80px;
    margin-bottom: 20px;
    opacity: 0.7; /* کمی شفاف‌تر */
}
.client-content-area .ticket-new-placeholder-title {
    font-size: 1.15em;
    color: #34495e;
    margin-bottom: 10px;
    font-weight: 500;
}
.client-content-area .ticket-new-placeholder-desc {
    font-size: 0.95em;
    color: #7f8c8d;
    max-width: 450px; /* جلوگیری از کشیدگی زیاد متن */
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}
.client-content-area .ticket-form-select-department {
    gap: 20px; /* فاصله بین دو select */
    margin-bottom: 30px; /* فاصله از بخش placeholder */
}
.client-content-area .ticket-form-select-department-item {
    flex: 1; /* عرض مساوی برای دو select */
}

input#client_site_url {
    width: calc(100% - 24px);
    padding: 12px;
    margin-bottom: 18px;
    border: 1px solid #bcccdc;
    border-radius: 5px;
    font-family: 'Estedad', sans-serif;
}