/**
 * فایل استایل (CSS) یکپارچه برای اپلیکیشن محتوای شرطی (SPA)
 * نسخه: 2.1.2 (بهبود استایل فرم‌ها، دکمه‌ها، تب‌ها و وسط‌چینی تاریخ)
 * توضیحات: این فایل تمام ظاهر اپلیکیشن را در بخش مدیریت و کاربری کنترل می‌کند.
 * طراحی شده به صورت RTL-first و کاملاً ایزوله.
 */

/* --- ۱. تنظیمات پایه، فونت و متغیرهای رنگ --- */

@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700&display=swap');

:root {
    /* Font */
    --ccp-font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;

    /* Colors */
    --ccp-color-primary: #0073e6;       /* آبی اصلی */
    --ccp-color-primary-dark: #005bb5;  /* هاور آبی */
    --ccp-color-secondary: #f0f2f5;   /* خاکستری خیلی روشن (پس‌زمینه آیتم‌ها) */
    --ccp-color-background: #f9fafb;  /* خاکستری روشن‌تر (پس‌زمینه کلی صفحه) */
    --ccp-color-text: #333;
    --ccp-color-text-light: #555;
    --ccp-color-border: #dcdcde;
    --ccp-color-border-light: #e5e7eb;
    --ccp-color-success: #10b981;     /* سبز */
    --ccp-color-danger: #ef4444;      /* قرمز */
    --ccp-color-warning: #f59e0b;     /* نارنجی */
    --ccp-color-info: #3b82f6;       /* آبی اطلاعاتی */
    --ccp-color-success-bg: #d1fae5;
    --ccp-color-danger-bg: #fee2e2;
    --ccp-color-warning-bg: #fffbeb;
    --ccp-color-info-bg: #dbeafe;

    /* Shadows & Radius */
    --ccp-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --ccp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --ccp-border-radius: 8px;
    --ccp-border-radius-sm: 4px;

    /* Spacing */
    --ccp-spacing-xs: 0.25rem; /* 4px */
    --ccp-spacing-sm: 0.5rem;  /* 8px */
    --ccp-spacing-md: 1rem;    /* 16px */
    --ccp-spacing-lg: 1.5rem;  /* 24px */
    --ccp-spacing-xl: 2rem;    /* 32px */
}

/* ایزوله‌سازی کامل اپلیکیشن */
#ccp-app-root {
    font-family: var(--ccp-font-family);
    direction: rtl;
    text-align: right;
    color: var(--ccp-color-text);
    background-color: var(--ccp-color-background); /* پس‌زمینه کلی صفحه */
    padding: 1px; /* جلوگیری از margin collapse */
    line-height: 1.6;
}

/* ریست باکس مدلینگ */
#ccp-app-root *,
#ccp-app-root *::before,
#ccp-app-root *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* --- ۲. چیدمان اصلی و ناوبری (Layout & Navigation) --- */

#ccp-app-root .ccp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--ccp-spacing-sm) var(--ccp-spacing-lg);
    background-color: #fff;
    border-bottom: 1px solid var(--ccp-color-border-light);
    flex-wrap: wrap; /* اجازه شکستن در موبایل */
    gap: var(--ccp-spacing-md);
    box-shadow: var(--ccp-shadow-sm);
}

#ccp-app-root .ccp-header h1 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--ccp-color-primary);
}

#ccp-app-root .ccp-nav {
    display: flex;
    gap: var(--ccp-spacing-sm);
    flex-wrap: wrap;
}

#ccp-app-root .ccp-nav a {
    text-decoration: none;
    padding: var(--ccp-spacing-sm) var(--ccp-spacing-md);
    border-radius: var(--ccp-border-radius-sm);
    color: var(--ccp-color-text-light);
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
}
#ccp-app-root .ccp-nav-icon {
    display: inline-block;
    margin-inline-end: 0.4em;
    vertical-align: middle;
    font-size: 1.1em;
}

#ccp-app-root .ccp-nav a:hover {
    background-color: var(--ccp-color-secondary);
    color: var(--ccp-color-text);
}

#ccp-app-root .ccp-nav a.active {
    background-color: var(--ccp-color-primary);
    color: #fff;
    box-shadow: 0 2px 5px rgba(0, 115, 230, 0.2);
}

#ccp-app-root .ccp-page-content {
    padding: var(--ccp-spacing-lg);
    min-height: 80vh;
}

#ccp-app-root .ccp-admin-wrapper {
    max-width: 1400px;
    margin: 0 auto;
}

/* --- ۳. تایپوگرافی (Typography) --- */

#ccp-app-root h1,
#ccp-app-root h2,
#ccp-app-root h3,
#ccp-app-root h4,
#ccp-app-root h5 {
    font-weight: 600;
    margin-block-start: 1.5em;
    margin-block-end: 0.75em;
    line-height: 1.3;
}
#ccp-app-root h2 { font-size: 1.6rem; border-bottom: 2px solid var(--ccp-color-primary); padding-bottom: 0.5rem; font-weight: 700;}
#ccp-app-root h3 { font-size: 1.3rem; color: var(--ccp-color-text); font-weight: 600;}
#ccp-app-root h4 { font-size: 1.1rem; font-weight: 600; color: var(--ccp-color-text-light); margin-block-start: 1.2em; margin-block-end: 0.6em;}
#ccp-app-root p { line-height: 1.7; margin-block-end: var(--ccp-spacing-md); }
#ccp-app-root hr { border: none; border-top: 1px solid var(--ccp-color-border-light); margin-block: var(--ccp-spacing-lg); }
#ccp-app-root small { font-size: 0.85em; color: var(--ccp-color-text-light); display: block; margin-top: var(--ccp-spacing-xs);}

/* --- ۴. کامپوننت: دکمه‌ها (Buttons) --- */

#ccp-app-root .ccp-button {
    font-family: var(--ccp-font-family);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ccp-spacing-xs); /* فاصله کمتر بین آیکون و متن دکمه */
    padding: 0.6rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: var(--ccp-border-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
}
#ccp-app-root .ccp-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

#ccp-app-root .ccp-button-primary {
    background-color: var(--ccp-color-primary);
    color: #fff;
    box-shadow: var(--ccp-shadow-sm);
}
#ccp-app-root .ccp-button-primary:hover:not(:disabled) {
    background-color: var(--ccp-color-primary-dark);
    box-shadow: var(--ccp-shadow-md);
    transform: translateY(-1px);
}

#ccp-app-root .ccp-button-secondary {
    background-color: #fff;
    color: var(--ccp-color-text);
    border-color: var(--ccp-color-border);
    box-shadow: var(--ccp-shadow-sm);
}
#ccp-app-root .ccp-button-secondary:hover:not(:disabled) {
    background-color: var(--ccp-color-secondary);
    border-color: #bbb;
    box-shadow: var(--ccp-shadow-md);
}

#ccp-app-root .ccp-button-danger {
    background-color: var(--ccp-color-danger);
    color: #fff;
    box-shadow: var(--ccp-shadow-sm);
}
#ccp-app-root .ccp-button-danger:hover:not(:disabled) {
    background-color: #dc2626;
    box-shadow: 0 2px 5px rgba(220, 53, 69, 0.3);
}

#ccp-app-root .ccp-button-link {
    background: none;
    border: none;
    color: var(--ccp-color-primary);
    padding: var(--ccp-spacing-xs);
    font-weight: 500;
    box-shadow: none;
}
#ccp-app-root .ccp-button-link:hover:not(:disabled) {
    color: var(--ccp-color-primary-dark);
    text-decoration: underline;
}
#ccp-app-root .ccp-button-link.ccp-button-danger {
     background: none;
     border: none;
     color: var(--ccp-color-danger);
}
#ccp-app-root .ccp-button-link.ccp-button-danger:hover:not(:disabled) {
     color: #dc2626;
     background-color: var(--ccp-color-danger-bg);
     text-decoration: none;
}

#ccp-app-root .ccp-button-sm {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    gap: var(--ccp-spacing-xs);
}

#ccp-app-root .ccp-button-group {
    display: flex;
    gap: var(--ccp-spacing-sm); /* حفظ فاصله پیش‌فرض */
    align-items: center;
    flex-wrap: wrap;
}
/* استایل خاص برای گروه دکمه‌های فوتر کارت‌ها */
#ccp-app-root .ccp-card-footer .ccp-button-group {
    width: 100%; /* گرفتن تمام عرض فوتر */
    justify-content: flex-end; /* دکمه‌ها در انتهای فوتر */
}

/* --- ۵. کامپوننت: فرم‌ها (Forms) --- */

#ccp-app-root .ccp-form {
    background: #fff;
    padding: var(--ccp-spacing-lg);
    border-radius: var(--ccp-border-radius);
    box-shadow: var(--ccp-shadow-sm);
    border: 1px solid var(--ccp-color-border-light);
}

#ccp-app-root .ccp-form-field {
    margin-bottom: var(--ccp-spacing-md);
}

#ccp-app-root .ccp-form-field label {
    display: block;
    font-weight: 500;
    margin-bottom: var(--ccp-spacing-sm);
    color: var(--ccp-color-text);
    font-size: 0.9em;
}

/* استایل مشترک برای اکثر ورودی‌های فرم */
#ccp-app-root input[type="text"],
#ccp-app-root input[type="number"],
#ccp-app-root input[type="search"],
#ccp-app-root input[type="email"],
#ccp-app-root input[type="password"],
#ccp-app-root input[type="date"],
#ccp-app-root input[type="datetime-local"],
#ccp-app-root select,
#ccp-app-root textarea {
    font-family: var(--ccp-font-family);
    width: 100%;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--ccp-color-border);
    border-radius: var(--ccp-border-radius-sm);
    background-color: #fff;
    font-size: 0.95rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    line-height: 1.5;
}
/* Placeholder style */
#ccp-app-root ::placeholder {
    color: #aaa;
    opacity: 1;
}

#ccp-app-root input:focus,
#ccp-app-root select:focus,
#ccp-app-root textarea:focus {
    outline: none;
    border-color: var(--ccp-color-primary);
    box-shadow: 0 0 0 3px rgba(0, 115, 230, 0.15);
}
#ccp-app-root input:read-only,
#ccp-app-root select:disabled,
#ccp-app-root textarea:read-only {
    background-color: var(--ccp-color-secondary);
    opacity: 0.7;
    cursor: not-allowed;
}


#ccp-app-root textarea {
    min-height: 100px;
    resize: vertical;
}

/* برای input های کوچک مثل اولویت */
#ccp-app-root .small-text {
    max-width: 80px;
    text-align: center;
}

/* برای فرم‌های چند ستونه (مثل آیتم‌های غذا، جزئیات روز تمرین) */
#ccp-app-root .form-grid {
    display: grid;
    gap: var(--ccp-spacing-md);
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    align-items: end;
}
/* استایل خاص ردیف فرم لاگ */
#ccp-app-root .ccp-log-form-row {
    display: flex;
    align-items: center; /* تراز عمودی وسط */
    gap: var(--ccp-spacing-sm);
    margin-bottom: var(--ccp-spacing-sm);
}
#ccp-app-root .ccp-log-form-row label {
    flex-basis: 30px; /* عرض ثابت برای لیبل */
    flex-shrink: 0;
    margin-bottom: 0;
    text-align: left; /* تراز چپ لیبل */
}
#ccp-app-root .ccp-log-form-row input {
    flex-grow: 1; /* اینپوت فضای باقی‌مانده را بگیرد */
}
#ccp-app-root .ccp-log-form-row button {
    flex-shrink: 0; /* دکمه کوچک نشود */
}


/* استایل برای checkbox ها */
#ccp-app-root .ccp-form-field-checkbox label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    gap: var(--ccp-spacing-sm);
}
#ccp-app-root .ccp-form-field-checkbox input[type="checkbox"] {
    width: auto;
    height: auto;
    accent-color: var(--ccp-color-primary);
}

/* استایل برای خطای اعتبارسنجی */
#ccp-app-root input:invalid,
#ccp-app-root select:invalid,
#ccp-app-root textarea:invalid {
    /* border-color: var(--ccp-color-danger); */
}
#ccp-app-root .ccp-row-error,
#ccp-app-root .ccp-card-error {
    border: 2px solid var(--ccp-color-danger) !important;
    background-color: var(--ccp-color-danger-bg);
    border-radius: var(--ccp-border-radius);
}
#ccp-app-root .ccp-card.ccp-card-error .ccp-card-header {
    background-color: #fee2e2;
}

/* --- ۶. کامپوننت: کارت (Card) --- */

#ccp-app-root .ccp-card {
    background-color: #fff;
    border: 1px solid var(--ccp-color-border-light);
    border-radius: var(--ccp-border-radius);
    box-shadow: var(--ccp-shadow-sm);
    margin-bottom: var(--ccp-spacing-lg);
    overflow: hidden;
}

#ccp-app-root .ccp-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--ccp-spacing-md) var(--ccp-spacing-lg);
    background-color: #fcfcfc;
    border-bottom: 1px solid var(--ccp-color-border-light);
    gap: var(--ccp-spacing-md);
}

#ccp-app-root .ccp-card-header h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
}

/* ورودی نام شرط در هدر کارت */
#ccp-app-root .ccp-card-header input[type="text"].ccp-condition-name {
    font-size: 1.15rem;
    font-weight: 600;
    border: none;
    padding: var(--ccp-spacing-xs);
    background: transparent;
    flex-grow: 1;
    margin-inline-end: var(--ccp-spacing-md);
    border-bottom: 1px solid transparent;
}
#ccp-app-root .ccp-card-header input[type="text"].ccp-condition-name:hover {
     border-bottom-color: var(--ccp-color-border);
}
#ccp-app-root .ccp-card-header input[type="text"].ccp-condition-name:focus {
    box-shadow: none;
    background: #fff;
    border-bottom-color: var(--ccp-color-primary);
}

#ccp-app-root .ccp-card-body {
    padding: var(--ccp-spacing-lg);
}

#ccp-app-root .ccp-card-footer {
    padding: var(--ccp-spacing-md) var(--ccp-spacing-lg);
    background-color: #fcfcfc;
    border-top: 1px solid var(--ccp-color-border-light);
    display: flex; /* برای استفاده از .ccp-button-group */
    /* justify-content و gap توسط .ccp-button-group مدیریت می‌شود */
}

/* --- ۷. کامپوننت: ردیف آیتم و گروه‌بندی (Item Row & Group) --- */

#ccp-app-root .ccp-item-row {
    display: flex;
    align-items: flex-end;
    gap: var(--ccp-spacing-sm);
    padding: var(--ccp-spacing-md);
    background-color: var(--ccp-color-secondary);
    border-radius: var(--ccp-border-radius-sm);
    margin-bottom: var(--ccp-spacing-sm);
    flex-wrap: wrap;
    position: relative;
}
#ccp-app-root .ccp-item-row input,
#ccp-app-root .ccp-item-row select {
    flex: 1 1 150px;
    margin-bottom: 0;
}
#ccp-app-root .ccp-item-row .ccp-remove-row {
    background: none;
    border: none;
    color: var(--ccp-color-danger);
    padding: 0.5rem;
    line-height: 1;
    font-size: 1.2rem;
    flex-shrink: 0;
    align-self: center;
    margin-right: auto;
    margin-left: 0;
}
#ccp-app-root .ccp-item-row .ccp-remove-row:hover {
    background-color: var(--ccp-color-danger-bg);
    border-radius: 50%;
}

#ccp-app-root .ccp-item-group {
    border: 1px solid var(--ccp-color-border-light);
    border-radius: var(--ccp-border-radius-sm);
    margin-bottom: var(--ccp-spacing-md);
    background: #fff;
    box-shadow: var(--ccp-shadow-sm);
    overflow: hidden;
}
#ccp-app-root .ccp-item-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--ccp-spacing-sm) var(--ccp-spacing-md);
    background: #f9f9f9;
    border-bottom: 1px solid var(--ccp-color-border-light);
    gap: var(--ccp-spacing-sm);
}
#ccp-app-root .ccp-item-group-header input {
    flex-grow: 1;
    border: none;
    background: transparent;
    font-weight: 600;
    padding: var(--ccp-spacing-xs);
    font-size: 1em;
}
#ccp-app-root .ccp-item-group-header input:focus { box-shadow: none; background: #fff; }
#ccp-app-root .ccp-item-group-header .ccp-remove-row { font-size: 1rem; padding: 0.3rem;}

#ccp-app-root .ccp-meal-items-container,
#ccp-app-root .ccp-workout-exercises-container {
    padding: var(--ccp-spacing-md);
}

#ccp-app-root .ccp-plan-section {
    margin-top: var(--ccp-spacing-lg);
    padding-top: var(--ccp-spacing-lg);
    border-top: 1px dashed var(--ccp-color-border);
}


/* --- ۸. کامپوننت: جدول (Table) --- */

#ccp-app-root .ccp-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    box-shadow: var(--ccp-shadow-sm);
    border-radius: var(--ccp-border-radius-sm);
    overflow: hidden;
    border: 1px solid var(--ccp-color-border-light);
    font-size: 0.9rem;
}

#ccp-app-root .ccp-table th,
#ccp-app-root .ccp-table td {
    padding: var(--ccp-spacing-sm) var(--ccp-spacing-md);
    border-bottom: 1px solid var(--ccp-color-border-light);
    text-align: right;
    vertical-align: middle;
}

#ccp-app-root .ccp-table th {
    background-color: #f9fafb;
    font-weight: 600;
    color: var(--ccp-color-text-light);
}

#ccp-app-root .ccp-table tbody tr:last-child td {
    border-bottom: none;
}

#ccp-app-root .ccp-table tbody tr:nth-child(even) {
    background-color: #fcfcfc;
}

#ccp-app-root .ccp-table tbody tr:hover {
    background-color: var(--ccp-color-secondary);
}

/* --- ۹. کامپوننت: مودال (Modal) --- */

/* لیست بانک غذا در مودال */
#ccp-app-root .ccp-food-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 350px;
    overflow-y: auto;
    border: 1px solid var(--ccp-color-border);
    border-radius: var(--ccp-border-radius-sm);
}
#ccp-app-root .ccp-food-list li {
    padding: var(--ccp-spacing-sm) var(--ccp-spacing-md);
    border-bottom: 1px solid var(--ccp-color-border-light);
    cursor: pointer;
    transition: background-color 0.2s;
}
#ccp-app-root .ccp-food-list li:last-child { border-bottom: none; }
#ccp-app-root .ccp-food-list li:hover { background-color: var(--ccp-color-secondary); }
#ccp-app-root .ccp-food-list li.selected {
    background-color: var(--ccp-color-primary);
    color: #fff;
    font-weight: 500;
}

/* --- ۱۰. کامپوننت: پیام‌ها و لودر (Messages & Loader) --- */

#ccp-app-root .ccp-message {
    padding: var(--ccp-spacing-md) var(--ccp-spacing-lg);
    border-radius: var(--ccp-border-radius-sm);
    border: 1px solid;
    margin-bottom: var(--ccp-spacing-md);
    font-weight: 500;
    font-size: 0.9rem;
}
#ccp-app-root .ccp-message strong { font-weight: 600; }
#ccp-app-root .ccp-message-success { background-color: var(--ccp-color-success-bg); border-color: #a7f3d0; color: #047857; }
#ccp-app-root .ccp-message-error   { background-color: var(--ccp-color-danger-bg); border-color: #fecaca; color: #b91c1c; }
#ccp-app-root .ccp-message-info    { background-color: var(--ccp-color-info-bg); border-color: #bfdbfe; color: #1e40af; }
#ccp-app-root .ccp-message-warning { background-color: var(--ccp-color-warning-bg); border-color: #fde68a; color: #b45309; }

/* پیام شناور (Toast) */
#ccp-app-root .ccp-global-message {
    position: fixed;
    bottom: var(--ccp-spacing-lg);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    box-shadow: var(--ccp-shadow-md);
    min-width: 280px;
    max-width: 90%;
    text-align: center;
    border-radius: var(--ccp-border-radius-sm);
}

/* لودر اسپینر */
#ccp-app-root .ccp-loader {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border: 3px solid rgba(0, 115, 230, 0.2);
    border-top-color: var(--ccp-color-primary);
    border-radius: 50%;
    animation: ccp-spin 0.8s linear infinite;
}
@keyframes ccp-spin { to { transform: rotate(360deg); } }

/* محفظه لودر */
#ccp-app-root .ccp-loader-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    width: 100%;
}

/* --- ۱۱. استایل‌های بخش کاربری (User Frontend) --- */

/* تحلیل و توصیه‌ها */
#ccp-app-root .ccp-analysis-content {
    background-color: var(--ccp-color-info-bg);
    border-inline-start: 4px solid var(--ccp-color-info);
    padding: var(--ccp-spacing-lg);
    border-radius: 0 var(--ccp-border-radius-sm) var(--ccp-border-radius-sm) 0;
    line-height: 1.8;
    margin-bottom: var(--ccp-spacing-lg);
    font-size: 0.95rem;
}

/* محتوای متنی شرط */
#ccp-app-root .ccp-content-block {
    background-color: #fff;
    padding: var(--ccp-spacing-lg);
    border-radius: var(--ccp-border-radius);
    box-shadow: var(--ccp-shadow-sm);
    margin-bottom: var(--ccp-spacing-lg);
    border: 1px solid var(--ccp-color-border-light);
}

/* کانتینر نمودار */
#ccp-app-root .ccp-charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--ccp-spacing-lg);
}

#ccp-app-root .ccp-chart-container {
    position: relative;
    height: 350px;
    width: 100%;
}
#ccp-app-root .ccp-chart-container.ccp-card .ccp-card-body {
    height: calc(100% - 50px);
    padding-bottom: 0;
}
#ccp-app-root .ccp-chart-container canvas {
     max-height: 100%;
}


/* چک‌باکس سفارشی و لیست برنامه کاربر */
#ccp-app-root .ccp-plan-display {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--ccp-spacing-lg) 0;
    background-color: #fff;
    border: 1px solid var(--ccp-color-border-light);
    border-radius: var(--ccp-border-radius-sm);
    box-shadow: var(--ccp-shadow-sm);
    overflow: hidden;
}

#ccp-app-root .ccp-plan-item {
    display: flex;
    border-bottom: 1px solid var(--ccp-color-border-light);
    transition: background-color 0.2s;
}
#ccp-app-root .ccp-plan-item:last-child {
    border-bottom: none;
}
#ccp-app-root .ccp-plan-item:hover {
    background-color: var(--ccp-color-secondary);
}

#ccp-app-root .ccp-plan-item-label-container {
    display: flex;
    align-items: center;
    gap: var(--ccp-spacing-md);
    padding: var(--ccp-spacing-md);
    cursor: pointer;
    flex-grow: 1;
}

/* !مهم: استایل مخفی‌سازی چک‌باکس اصلی! */
#ccp-app-root .ccp-plan-item input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

#ccp-app-root .ccp-custom-checkbox {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: 2px solid var(--ccp-color-border);
    border-radius: var(--ccp-border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    transition: all 0.2s ease-in-out;
}

#ccp-app-root .ccp-custom-checkbox svg {
    width: 14px;
    height: 14px;
    stroke: #fff;
    stroke-width: 3;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s ease-in-out;
}

#ccp-app-root .ccp-plan-item input[type="checkbox"]:checked + .ccp-custom-checkbox {
    background-color: var(--ccp-color-success);
    border-color: var(--ccp-color-success);
}
#ccp-app-root .ccp-plan-item input[type="checkbox"]:checked + .ccp-custom-checkbox svg {
    opacity: 1;
    transform: scale(1);
}

#ccp-app-root .ccp-plan-item-text {
    flex-grow: 1;
    line-height: 1.5;
    transition: color 0.2s ease-in-out, text-decoration 0.2s ease-in-out;
}
#ccp-app-root .ccp-plan-item-text strong {
    font-weight: 600;
    color: var(--ccp-color-text);
    display: block;
    margin-bottom: var(--ccp-spacing-xs);
}
#ccp-app-root .ccp-plan-item-text span {
    display: block;
    font-size: 0.85rem;
    color: var(--ccp-color-text-light);
}

#ccp-app-root .ccp-plan-item input[type="checkbox"]:checked ~ .ccp-plan-item-text {
    text-decoration: line-through;
    color: var(--ccp-color-text-light);
}
#ccp-app-root .ccp-plan-item input[type="checkbox"]:checked ~ .ccp-plan-item-text strong {
    color: inherit;
    font-weight: 500;
}

#ccp-app-root .ccp-plan-item.ccp-item-saving {
    opacity: 0.6;
    pointer-events: none;
    background-color: var(--ccp-color-warning-bg);
}

/* --- بهبود بخش انتخابگر تاریخ --- */
#ccp-app-root .ccp-date-picker-field {
    /* max-width: 300px; */ /* حذف محدودیت عرض */
    margin-bottom: var(--ccp-spacing-lg);
    display: flex; /* استفاده از flex برای وسط‌چین کردن */
    flex-direction: column; /* لیبل بالا، گروه کنترل پایین */
    align-items: center; /* وسط‌چین کردن افقی */
}
#ccp-app-root .ccp-date-picker-field label {
    margin-bottom: var(--ccp-spacing-sm); /* فاصله لیبل از گروه */
}
#ccp-app-root .ccp-date-control-group {
    display: inline-flex; /* جلوگیری از کشیده شدن عرضی */
    align-items: center;
    gap: var(--ccp-spacing-xs); /* فاصله کمتر بین دکمه‌ها و تاریخ */
    background-color: #fff; /* پس زمینه سفید برای گروه */
    border: 1px solid var(--ccp-color-border); /* بوردر دور گروه */
    border-radius: var(--ccp-border-radius-sm);
    padding: var(--ccp-spacing-xs); /* کمی پدینگ داخلی */
    box-shadow: var(--ccp-shadow-sm); /* سایه کم */
}
#ccp-app-root .ccp-date-control-group .ccp-date-nav {
    font-size: 1rem; /* اندازه فونت دکمه */
    padding: 0.5rem; /* پدینگ دکمه */
    line-height: 1;
    flex-shrink: 0;
    border: none; /* حذف بوردر پیش‌فرض دکمه */
    background: none; /* حذف پس‌زمینه پیش‌فرض */
    color: var(--ccp-color-primary); /* رنگ دکمه */
}
#ccp-app-root .ccp-date-control-group .ccp-date-nav:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    color: var(--ccp-color-text-light); /* رنگ متفاوت برای غیرفعال */
}
#ccp-app-root .ccp-date-control-group .ccp-date-display {
    flex-grow: 1;
    text-align: center;
    min-width: 130px; /* حداقل عرض کمتر */
    padding: 0.5rem 0.75rem; /* پدینگ هماهنگ با دکمه */
    border: none; /* حذف بوردر span */
    background-color: transparent; /* حذف پس زمینه span */
    font-weight: 500; /* کمی برجسته‌تر */
    color: var(--ccp-color-text);
}


/* --- ۱۲. Grid Layouts --- */
/* چیدمان گرید برای صفحه جزئیات کاربر ادمین */
#ccp-app-root .ccp-admin-details-grid {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) 2fr;
    gap: var(--ccp-spacing-lg);
}
/* چیدمان گرید برای صفحه ثبت لاگ */
#ccp-app-root .ccp-logs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--ccp-spacing-lg);
}


/* --- ۱۳. واکنش‌گرایی (Responsive) --- */

@media (max-width: 960px) {
    #ccp-app-root .ccp-admin-details-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 782px) {
    #ccp-app-root .ccp-header {
        flex-direction: column;
        align-items: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: var(--ccp-spacing-sm);
    }
     #ccp-app-root .ccp-header h1 {
          white-space: nowrap;
     }

    #ccp-app-root .ccp-nav {
         display: flex;
         width: auto;
         position: static;
         background-color: transparent;
         padding: 0;
         flex-wrap: wrap;
         gap: var(--ccp-spacing-xs);
         transform: none;
    }
    #ccp-app-root .ccp-nav a {
         font-size: 0.85rem;
         padding: var(--ccp-spacing-sm) var(--ccp-spacing-xs);
    }

    #ccp-app-root .ccp-page-content {
        padding: var(--ccp-spacing-md);
    }
    #ccp-app-root .ccp-charts-grid {
        grid-template-columns: 1fr;
    }
    #ccp-app-root .ccp-logs-grid {
        grid-template-columns: 1fr;
    }
    #ccp-app-root .ccp-item-row {
        flex-direction: column;
        align-items: stretch;
        padding: var(--ccp-spacing-sm);
    }
    #ccp-app-root .ccp-item-row input,
    #ccp-app-root .ccp-item-row select {
        width: 100%;
        flex-basis: auto;
    }
    #ccp-app-root .ccp-item-row .ccp-remove-row {
         position: absolute;
         top: 5px;
         left: 5px;
         margin: 0;
         padding: 0.3rem;
         background-color: #fff;
    }
     #ccp-app-root .ccp-modal {
         width: 95%;
         max-width: none;
     }
      /* بهبود نمایش گروه تاریخ در موبایل */
      #ccp-app-root .ccp-date-control-group {
           width: 100%; /* گرفتن تمام عرض موجود */
           max-width: 350px; /* حداکثر عرض */
      }
      #ccp-app-root .ccp-date-control-group .ccp-date-display {
           min-width: 100px; /* حداقل عرض کمتر در موبایل */
      }
}

/* --- ۱۴. استایل‌های اضافی (از JS) --- */

/* لودر کلی */
.ccp-global-loader {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.75);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
}
.ccp-global-loader[style*="opacity: 1"] {
     pointer-events: auto;
}


/* مودال */
.ccp-modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.ccp-modal {
    background-color: #fff;
    border-radius: var(--ccp-border-radius);
    box-shadow: var(--ccp-shadow-md);
    width: 90%;
    max-width: 600px;
    z-index: 1001;
    overflow: hidden;
    transform: translate(-50%, -60%) scale(0.95);
    position: fixed;
    top: 50%;
    left: 50%;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
.ccp-modal-backdrop[style*="opacity: 1"] .ccp-modal {
    transform: translate(-50%, -50%) scale(1);
}

#ccp-app-root .ccp-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--ccp-spacing-md) var(--ccp-spacing-lg);
    border-bottom: 1px solid var(--ccp-color-border-light);
}
#ccp-app-root .ccp-modal-header h3 { margin: 0; font-size: 1.2rem; }
#ccp-app-root .ccp-modal-body {
    padding: var(--ccp-spacing-lg);
    max-height: 70vh;
    overflow-y: auto;
}
#ccp-app-root .ccp-modal-footer {
    display: flex; justify-content: flex-end; gap: var(--ccp-spacing-sm);
    padding: var(--ccp-spacing-md) var(--ccp-spacing-lg);
    background-color: #f9fafb;
    border-top: 1px solid var(--ccp-color-border-light);
}

/* --- ۱۵. Import/Export Page Styles --- */
#ccp-app-root #ccp-import-form .ccp-form-field {
     margin-bottom: var(--ccp-spacing-md);
}
#ccp-app-root #ccp-import-form input[type="file"] {
     border: 1px solid var(--ccp-color-border);
     padding: var(--ccp-spacing-sm);
     border-radius: var(--ccp-border-radius-sm);
     width: 100%;
}
#ccp-app-root #ccp-import-form button[type="submit"] {
     margin-top: var(--ccp-spacing-sm);
}

/* --- استایل‌های جدید برای تب‌ها و تاریخ --- */

/* استایل تب‌ها برای فرم لاگ غذا */
.ccp-tabs {
    display: flex;
    border-bottom: 1px solid var(--ccp-color-border);
    margin-bottom: var(--ccp-spacing-md); /* کمی فاصله بیشتر */
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;

}
.ccp-tab-link {
    background: none;
    border: none;
    padding: 0.75rem 1.25rem; /* پدینگ بیشتر */
    cursor: pointer;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--ccp-color-text-light);
    border-bottom: 3px solid transparent;
    margin-bottom: -1px; /* برای اتصال به خط */
    transition: all 0.2s ease-in-out; /* انیمیشن نرم */
}
.ccp-tab-link:hover {
    background-color: var(--ccp-color-secondary);
    color: var(--ccp-color-text); /* رنگ متن در هاور */
}
.ccp-tab-link.active {
    color: var(--ccp-color-primary);
    border-bottom-color: var(--ccp-color-primary);
    font-weight: 600;
}
.ccp-tab-content {
    padding-top: var(--ccp-spacing-md); /* کمی فاصله بیشتر */
}

/* حالت آیتم‌های آینده در برنامه کاربر */
.ccp-plan-item.ccp-item-future {
    background-color: #fafafa;
}
.ccp-plan-item.ccp-item-future .ccp-plan-item-label-container {
    cursor: default;
    opacity: 0.7;
}
.ccp-plan-item.ccp-item-future .ccp-custom-checkbox {
    background-color: #eee;
    border-color: #ddd;
}
.ccp-plan-item.ccp-item-future .ccp-plan-item-text {
    color: #888;
}

/* چک‌باکس‌های روز هفته در پنل ادمین */
.ccp-day-name-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding: 0.75rem;
    background-color: #f9f9f9;
    border-radius: var(--ccp-border-radius-sm);
    border: 1px solid var(--ccp-color-border-light);
}
.ccp-day-name-checkboxes .ccp-checkbox-label {
    font-size: 0.9em;
    display: inline-flex; /* اطمینان از هم‌ترازی */
    align-items: center;
    gap: 0.4em; /* فاصله چک‌باکس و متن */
    cursor: pointer;
}
.ccp-day-name-checkboxes input[type="checkbox"] {
    width: auto;
    height: auto;
    accent-color: var(--ccp-color-primary);
    cursor: pointer;
}