/* دفتر برش — طراحی مینیمال، ساده و مناسب افراد مسن، موبایل‌محور */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root{
    --ink:#111111;
    --white:#FFFFFF;
    --primary:#5C4633;
    --primary-hover:#46341F;
    --gold:#B88A44;
    --bg:#FAF8F5;
    --border:rgba(17,17,17,0.10);
    --muted:rgba(17,17,17,0.55);
    --danger:#B23A4A;
    --danger-bg:#FBEAEC;
    --success:#2E7D4F;
    --success-bg:#E9F6EF;
}

html, body{ height:100%; }

body{
    font-family:'Far Dinar Two', system-ui, sans-serif;
    background:var(--bg);
    color:var(--ink);
    font-size:17px;
    line-height:1.7;
    min-height:100vh;
}

a{ color:inherit; text-decoration:none; }
button, input, select, textarea{ font-family:inherit; font-size:inherit; }

/* ===== هدر ===== */
.cb-header{
    position:sticky; top:0; z-index:50;
    background:var(--white);
    border-bottom:1px solid var(--border);
    box-shadow:0 2px 12px rgba(17,17,17,0.04);
}
.cb-header-inner{
    max-width:900px; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 18px;
}
.cb-header-start{ display:flex; align-items:center; gap:10px; min-width:0; }
.cb-header-back-btn{
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; width:38px; height:38px; border-radius:12px;
    border:1.5px solid var(--border); background:var(--bg);
    color:var(--primary); font-size:22px; font-weight:800; line-height:1;
}
.cb-header-back-btn:active{ background:var(--border); }
.cb-brand{ display:flex; align-items:center; gap:8px; font-size:19px; font-weight:800; color:var(--primary); }
.cb-brand-icon{ font-size:20px; }
.cb-header-user{ display:flex; align-items:center; gap:14px; }
.cb-user-name{ font-size:14px; font-weight:700; color:var(--muted); }

/* ===== پیام‌ها ===== */
.cb-messages{ max-width:900px; margin:14px auto 0; padding:0 18px; display:flex; flex-direction:column; gap:8px; }
.cb-message{ padding:12px 16px; border-radius:12px; font-size:14.5px; font-weight:600; }
.cb-message-success{ background:var(--success-bg); color:var(--success); }
.cb-message-error{ background:var(--danger-bg); color:var(--danger); }

.cb-main{ max-width:900px; margin:0 auto; padding:22px 18px 60px; }

/* ===== کارت / سطح پایه ===== */
.cb-card{
    background:var(--white); border:1px solid var(--border); border-radius:18px;
    padding:20px; margin-bottom:16px;
}
.cb-page-title{ font-size:23px; font-weight:800; margin-bottom:6px; }
.cb-page-sub{ font-size:14px; color:var(--muted); margin-bottom:20px; }

/* لینک‌های متنیِ «‹ بازگشت ...» بالای صفحات — قبلاً فقط متن ساده و کم‌دیدنی بود */
.cb-back-link{
    display:inline-flex; align-items:center; gap:6px;
    font-size:14.5px; font-weight:700; color:var(--primary);
    background:var(--white); border:1.5px solid var(--border); border-radius:12px;
    padding:9px 16px; margin-bottom:4px;
}
.cb-back-link:active{ background:var(--bg); }

/* ===== دکمه‌های بزرگ ===== */
.cb-btn{
    display:flex; align-items:center; justify-content:center; gap:10px;
    width:100%; padding:20px 18px; border-radius:16px; border:none; cursor:pointer;
    background:var(--primary); color:var(--white);
    font-size:18px; font-weight:800;
    box-shadow:0 10px 22px rgba(92,70,51,0.22);
    transition:transform .12s, box-shadow .12s;
}
.cb-btn:active{ transform:scale(.98); }
.cb-btn.cb-btn-gold{ background:var(--gold); box-shadow:0 10px 22px rgba(184,138,68,0.28); }
.cb-btn.cb-btn-outline{ background:var(--white); color:var(--primary); border:2px solid var(--primary); box-shadow:none; }
.cb-btn.cb-btn-danger{ background:var(--danger); box-shadow:0 10px 22px rgba(178,58,74,0.22); }
.cb-btn.cb-btn-sm{ padding:12px 16px; font-size:15px; width:auto; }
.cb-btn:disabled{ opacity:.55; cursor:not-allowed; }

.cb-btn-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:520px){ .cb-btn-grid{ grid-template-columns:1fr 1fr; } }

/* ===== فرم‌ها ===== */
.cb-field{ margin-bottom:18px; }
.cb-field label{ display:block; font-size:14.5px; font-weight:700; color:var(--primary); margin-bottom:8px; }
.cb-field input[type=text], .cb-field input[type=number], .cb-field input[type=password],
.cb-field input[type=search], .cb-field textarea, .cb-field select{
    width:100%; padding:14px 16px; border-radius:13px;
    border:1.5px solid var(--border); background:var(--bg);
    font-size:16px; color:var(--ink);
}
.cb-field input:focus, .cb-field textarea:focus, .cb-field select:focus{
    outline:none; border-color:var(--gold); background:var(--white);
    box-shadow:0 0 0 4px rgba(184,138,68,0.12);
}
.cb-field textarea{ min-height:90px; resize:vertical; }
.cb-hint{ font-size:12.5px; color:var(--muted); margin-top:6px; }

/* ===== سرچ ثابت بالای صفحه ===== */
.cb-search-bar{
    position:sticky; top:64px; z-index:40;
    background:var(--bg); padding:10px 0 14px;
}
.cb-search-bar input{
    width:100%; padding:14px 44px 14px 16px; border-radius:14px;
    border:1.5px solid var(--border); background:var(--white);
    font-size:16px;
}

/* ===== لیست مشتری‌ها ===== */
.cb-customer-item{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    background:var(--white); border:1px solid var(--border); border-radius:16px;
    padding:18px; margin-bottom:12px;
}
.cb-customer-name{ font-size:17.5px; font-weight:800; }
.cb-customer-meta{ font-size:13px; color:var(--muted); margin-top:4px; }
.cb-chevron{ font-size:20px; color:var(--gold); }
.cb-empty{ text-align:center; padding:50px 20px; color:var(--muted); }

/* ===== چیپ‌های چندانتخابی (برش‌کار) ===== */
.cb-chip-select{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.cb-chip{
    padding:9px 16px; border-radius:20px; border:1.5px solid var(--border);
    background:var(--bg); font-size:14px; font-weight:700; cursor:pointer;
}
.cb-chip.active{ background:var(--primary); color:var(--white); border-color:var(--primary); }
.cb-chip-add{ border-style:dashed; color:var(--primary); }

/* ===== جدول‌های دینامیک ===== */
.cb-table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:14px; margin-bottom:8px; }
table.cb-table{ width:100%; border-collapse:collapse; min-width:640px; }
table.cb-table th{
    background:var(--bg); font-size:13px; font-weight:800; color:var(--primary);
    padding:12px 10px; text-align:center; border-bottom:1.5px solid var(--border); white-space:nowrap;
}
table.cb-table td{ padding:6px; border-bottom:1px solid var(--border); text-align:center; }
table.cb-table td input{
    width:100%; min-width:70px; padding:10px 8px; border-radius:10px;
    border:1.5px solid var(--border); background:var(--white); text-align:center; font-size:15px;
}
table.cb-table td input:focus{ outline:none; border-color:var(--gold); }
table.cb-table td.cb-row-num{ font-weight:800; color:var(--muted); }
table.cb-table td.cb-row-del{ cursor:pointer; color:var(--danger); font-weight:800; }

.cb-table-title{ font-size:15.5px; font-weight:800; margin:22px 0 10px; }

/* ===== خلاصه/آمار ===== */
.cb-stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:6px; }
@media (min-width:520px){ .cb-stat-grid{ grid-template-columns:repeat(4,1fr); } }
.cb-stat-box{ background:var(--bg); border-radius:14px; padding:16px 10px; text-align:center; }
.cb-stat-box b{ display:block; font-size:20px; font-weight:800; color:var(--primary); }
.cb-stat-box span{ display:block; font-size:12.5px; color:var(--muted); margin-top:4px; }

.cb-color-row{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:12px 14px; border-bottom:1px solid var(--border); font-size:14px;
}
.cb-color-row:last-child{ border-bottom:none; }
.cb-color-name{ font-weight:800; }
.cb-color-vals{ color:var(--muted); font-size:13px; text-align:left; }

/* ===== آمار رنگ در فرم ویرایش (کارت‌های خوانا به‌جای یک خط طولانی) ===== */
.cb-color-stat-code-section{ margin-bottom:16px; }
.cb-color-stat-code-section:last-child{ margin-bottom:0; }
.cb-color-stat-code-head{
    display:flex; align-items:center; gap:6px; font-size:13px; font-weight:800; color:var(--gold);
    background:var(--bg); border-radius:10px; padding:8px 12px; margin-bottom:8px;
}
.cb-color-stat-card{
    background:var(--white); border:1.5px solid var(--border); border-radius:14px;
    padding:12px 14px; margin-bottom:10px;
}
.cb-color-stat-card:last-child{ margin-bottom:0; }
.cb-color-stat-head{ display:flex; align-items:center; margin-bottom:10px; }
.cb-color-stat-name{ font-weight:800; font-size:14.5px; color:var(--primary); }
.cb-color-stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cb-stat-chip{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    background:var(--bg); border-radius:10px; padding:9px 6px; text-align:center;
}
.cb-stat-chip-label{ font-size:11px; color:var(--muted); }
.cb-stat-chip-value{ font-size:15px; font-weight:800; color:var(--primary); }

/* «تعداد کار» یک رنگ به‌ازای هر کد جداگانه (وقتی برش چند کد دارد) + جمع کل —
   یک لیستِ زیر هم (نه کنار هم) تا با چند کد هم قابل‌خواندن و مرتب بماند */
.cb-color-stat-workbycode{
    display:flex; flex-direction:column; gap:6px; margin-bottom:8px;
}
.cb-workbycode-row{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    background:var(--bg); border-radius:10px; padding:8px 12px;
}
.cb-workbycode-label{ font-size:12.5px; color:var(--muted); }
.cb-workbycode-value{ font-size:14.5px; font-weight:800; color:var(--primary); flex-shrink:0; }
.cb-workbycode-row-total{ background:var(--gold-10, rgba(191,161,74,.12)); }
.cb-workbycode-row-total .cb-workbycode-label{ color:var(--gold); font-weight:700; }
.cb-workbycode-row-total .cb-workbycode-value{ color:var(--gold); }
.cb-stat-chip-total{ background:var(--gold-10, rgba(191,161,74,.12)); }
.cb-stat-chip-total .cb-stat-chip-value{ color:var(--gold); }

/* --- توضیحات برش، بالای صفحه‌ی مشاهده --- */
.cb-detail-desc{ font-size:14.5px; line-height:1.9; color:var(--ink); }

/* ===== انتخابگر کد برش روی هر کارتِ رنگ (فقط وقتی چند کد داریم) ===== */
.cb-color-group-code-row{
    display:flex; align-items:center; gap:8px; margin:-2px 0 10px; padding:0 2px;
}
.cb-color-group-code-label{ font-size:12.5px; color:var(--muted); flex-shrink:0; }
.cb-color-group-code-select{
    flex:1 1 0%; min-width:0; font-size:12.5px; font-weight:700; color:var(--primary);
    background:var(--bg); border:1.5px solid var(--border); border-radius:8px; padding:6px 8px;
}

/* ===== لیست برش‌های قبلی ===== */
.cb-cut-item{
    display:flex; align-items:stretch; gap:14px;
    background:var(--white); border:1.5px solid rgba(17,17,17,0.16);
    border-radius:16px; padding:14px; margin-bottom:12px;
    box-shadow:0 2px 10px rgba(17,17,17,0.05);
    transition:border-color .15s, box-shadow .15s;
}
.cb-cut-item:active{ border-color:var(--gold); box-shadow:0 2px 10px rgba(184,138,68,0.18); }

/* شماره‌ی برش (بدون کد مشتری) — بزرگ و بولد، سمت راستِ کارت
   نکته: این باکس کلاسِ عمومیِ cb-code-ltr هم دارد (برای اینکه عدد همیشه چپ‌به‌راست
   خوانده شود)، ولی آن کلاس یک display:inline-block هم با خودش می‌آورد که رویِ
   display:flex اینجا سوار می‌شد و عدد را از وسط به گوشه‌ی چپِ کادر می‌چسباند.
   با نوشتنِ ترکیبِ دو کلاس (اختصاصیت بالاتر) این تداخل رفع شده. */
.cb-cut-seq-badge{
    flex-shrink:0; width:52px; height:52px;
    background:var(--primary); color:var(--white);
    font-size:22px; font-weight:800; border-radius:12px;
    align-self:center;
}
.cb-cut-seq-badge.cb-code-ltr{
    display:flex; align-items:center; justify-content:center;
    text-align:center;
}

.cb-cut-item-main{ flex:1; min-width:0; }
.cb-cut-item-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.cb-cut-title{ font-size:16.5px; font-weight:800; }
.cb-cut-date{ font-size:13px; color:var(--muted); flex-shrink:0; }
.cb-cut-item-bottom{ display:flex; gap:14px; margin-top:8px; font-size:13px; color:var(--ink); opacity:.72; flex-wrap:wrap; }

/* --- برش‌های «در حال برش» (عنوان هنوز پیش‌فرض است) --- */
.cb-cut-item-inprogress{
    border-color:var(--danger);
    background:linear-gradient(90deg, var(--danger-bg) 0%, var(--white) 90px);
    box-shadow:0 2px 10px rgba(178,58,74,0.12);
}
.cb-cut-item-inprogress .cb-cut-title{ color:var(--danger); }
.cb-cut-item-inprogress .cb-cut-seq-badge{ background:var(--danger); color:var(--white); }
.cb-inprogress-chip{
    display:inline-flex; align-items:center; gap:4px; background:var(--danger);
    color:var(--white); font-size:11.5px; font-weight:800; padding:3px 9px;
    border-radius:20px; white-space:nowrap; flex-shrink:0;
}

/* --- فیلد عنوان: حالت «در حال برش» --- */
.cb-title-input-wrap{ position:relative; }
.cb-title-inprogress-icon{
    position:absolute; inset-inline-end:14px; top:50%; transform:translateY(-50%);
    font-size:18px; display:none; pointer-events:none; animation:cbTitlePulse 1.6s ease-in-out infinite;
}
.cb-title-input-wrap.in-progress .cb-title-inprogress-icon{ display:inline-block; }
.cb-title-input-wrap.in-progress input{
    border-color:var(--danger); background:var(--danger-bg); color:var(--danger);
    font-weight:800; padding-inline-end:44px;
}
@keyframes cbTitlePulse{ 0%,100%{ opacity:1; transform:translateY(-50%) scale(1); } 50%{ opacity:.6; transform:translateY(-50%) scale(1.12); } }
.cb-title-inprogress-hint{
    display:none; font-size:12.5px; color:var(--danger); font-weight:700; margin-top:8px; line-height:1.8;
}
.cb-title-inprogress-hint.visible{ display:block; }

/* --- بنر بزرگ هشدار قرمز: برش «در حال برش» --- */
.cb-danger-banner{
    display:flex; align-items:flex-start; gap:12px;
    background:var(--danger-bg); border:1.5px solid var(--danger); border-radius:16px;
    padding:16px 18px; margin-bottom:16px;
}
.cb-danger-banner-icon{ font-size:26px; line-height:1; flex-shrink:0; }
.cb-danger-banner-title{ font-size:15.5px; font-weight:800; color:var(--danger); }
.cb-danger-banner-text{ font-size:13px; color:var(--danger); margin-top:4px; line-height:1.8; opacity:.92; }

/* ===== لاگ ===== */
.cb-log-item{ font-size:13px; color:var(--muted); padding:8px 0; border-bottom:1px dashed var(--border); }
.cb-log-item:last-child{ border-bottom:none; }

/* ===== فیلترها ===== */
.cb-filter-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.cb-filter-chip{
    padding:9px 16px; border-radius:20px; border:1.5px solid var(--border);
    background:var(--white); font-size:13.5px; font-weight:700; cursor:pointer;
}
.cb-filter-chip.active{ background:var(--gold); color:var(--white); border-color:var(--gold); }

/* ===== چاپ ===== */
@media print{
    .cb-header, .cb-messages, .cb-no-print{ display:none !important; }
    body{ background:#fff; }
    .cb-main{ max-width:none; padding:0; }
    .cb-card{ border:none; box-shadow:none; }
}

/* ===== لاگین ===== */
.cb-login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.cb-login-card{ width:100%; max-width:380px; background:var(--white); border-radius:22px; padding:36px 28px; box-shadow:0 20px 50px rgba(92,70,51,0.12); }
.cb-login-title{ font-size:22px; font-weight:800; text-align:center; margin-bottom:4px; }
.cb-login-sub{ font-size:13.5px; color:var(--muted); text-align:center; margin-bottom:26px; }

/* ============================================================
   افزودن‌های نسخه ۲ — کارت‌های ردیف، فیلدهای فشرده + مودال،
   تقویم شمسی، انتخاب واحد، بازطراحی آمار
   ============================================================ */

/* --- سرصفحه‌ی کارت مشتری: نام سمت راست، دکمه‌ی ویرایش سمت چپ --- */
.cb-customer-header-row{
    display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.cb-edit-info-btn{
    background:none; border:none; cursor:pointer; font-size:13.5px; font-weight:700;
    color:var(--gold); padding:6px 4px; border-radius:8px; white-space:nowrap;
    transition:opacity .15s;
}
.cb-edit-info-btn:hover{ opacity:.75; }
.cb-edit-info-btn::before{ content:'✎ '; }

/* --- کد یک‌عددی/دو‌بخشی مشتری یا برش: همیشه چپ‌به‌راست نمایش داده شود --- */
.cb-code-ltr{ direction:ltr; unicode-bidi:embed; display:inline-block; }

/* --- فرم افزودن مشتری جدید: ریسپانسیو، بدون اسکرول افقی --- */
.cb-add-customer-form{ margin-bottom:18px; }
.cb-add-customer-row{ display:flex; gap:8px; flex-wrap:wrap; }
.cb-add-customer-name{
    flex:1 1 160px; min-width:0; padding:14px 16px; border-radius:13px;
    border:1.5px solid var(--border); background:var(--white); font-size:15px;
}
.cb-add-customer-code{
    flex:0 0 64px; min-width:0; padding:14px 8px; border-radius:13px;
    border:1.5px solid var(--border); background:var(--white); font-size:15px; text-align:center;
}
.cb-add-customer-submit{ flex:1 1 100%; }
@media (min-width:480px){
    .cb-add-customer-submit{ flex:0 0 auto; }
}

/* --- فیلدهای فشرده (تاریخ/برش‌کار) که با ضربه مودال باز می‌کنند --- */
.cb-compact-row{ display:flex; gap:10px; margin-bottom:18px; }
.cb-compact-field{
    flex:1; background:var(--bg); border:1.5px solid var(--border); border-radius:13px;
    padding:11px 14px; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.cb-compact-field:active{ background:var(--white); }
.cb-compact-field-label{ font-size:11px; color:var(--muted); font-weight:700; }
.cb-compact-field-value{ font-size:14.5px; font-weight:800; color:var(--ink); margin-top:2px; }
.cb-compact-field-icon{ font-size:15px; opacity:.55; }

/* --- مودال عمومی --- */
.cb-modal-overlay{
    position:fixed; inset:0; background:rgba(17,17,17,0.45); z-index:200;
    display:none; align-items:flex-end; justify-content:center; backdrop-filter:blur(2px);
}
.cb-modal-overlay.open{ display:flex; }
.cb-modal{
    background:var(--white); width:100%; max-width:420px; border-radius:22px 22px 0 0;
    padding:20px; max-height:85vh; overflow-y:auto; overflow-x:hidden;
    animation:cbModalUp .22s ease;
}
@media (min-width:640px){
    .cb-modal-overlay{ align-items:center; }
    .cb-modal{ border-radius:22px; }
}
@keyframes cbModalUp{ from{ transform:translateY(30px); opacity:0; } to{ transform:none; opacity:1; } }
.cb-modal-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.cb-modal-title{ font-size:16.5px; font-weight:800; }
.cb-modal-close{ background:var(--bg); border:none; border-radius:10px; width:32px; height:32px; font-size:15px; cursor:pointer; }
.cb-modal-footer{ display:flex; gap:10px; margin-top:16px; }

/* --- مودال نصب PWA --- */
.cb-pwa-modal{ text-align:center; padding:26px 20px; }
.cb-pwa-modal-icon{ width:72px; height:72px; border-radius:18px; box-shadow:0 8px 20px rgba(92,70,51,0.18); margin-bottom:14px; }
.cb-pwa-modal-title{ font-size:17px; font-weight:800; margin-bottom:8px; }
.cb-pwa-modal-text{ font-size:13.5px; color:var(--muted); line-height:1.9; margin-bottom:4px; }

/* --- تقویم شمسی --- */
.cb-cal-nav{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.cb-cal-nav button{ background:var(--bg); border:none; border-radius:10px; width:36px; height:36px; font-size:16px; cursor:pointer; }
.cb-cal-title{ font-size:15.5px; font-weight:800; }
.cb-cal-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:11px; color:var(--muted); font-weight:700; margin-bottom:6px; }
.cb-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cb-cal-day{
    aspect-ratio:1; display:flex; align-items:center; justify-content:center;
    border-radius:10px; font-size:14px; cursor:pointer; background:var(--bg);
}
.cb-cal-day.empty{ background:none; cursor:default; }
.cb-cal-day.today{ box-shadow:inset 0 0 0 1.5px var(--gold); font-weight:800; }
.cb-cal-day.selected{ background:var(--primary); color:var(--white); font-weight:800; }
.cb-cal-day:not(.empty):active{ background:var(--gold); color:var(--white); }

/* --- انتخاب برش‌کار در مودال --- */
.cb-worker-modal-list{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }

/* --- انتخاب واحد اندازه‌گیری (سگمنت) --- */
.cb-unit-toggle{ display:flex; background:var(--bg); border-radius:13px; padding:4px; margin-bottom:18px; }
.cb-unit-opt{
    flex:1; text-align:center; padding:10px 6px; border-radius:10px; font-size:14px; font-weight:700;
    cursor:pointer; color:var(--muted);
}
.cb-unit-opt.active{ background:var(--white); color:var(--primary); box-shadow:0 3px 10px rgba(17,17,17,0.08); }

/* --- کارت‌های ردیف (به‌جای جدول) --- */
.cb-row-card{
    background:var(--bg); border:1.5px solid var(--border); border-radius:16px;
    padding:14px; margin-bottom:12px; position:relative;
}
.cb-row-card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.cb-row-card-num{ font-size:12.5px; font-weight:800; color:var(--gold); }
.cb-row-card-del{
    background:none; border:none; color:var(--danger); font-size:13px; font-weight:800; cursor:pointer;
    padding:3px 8px; border-radius:8px;
}
.cb-row-card-del:active{ background:var(--danger-bg); }

.cb-row-field-color input{ width:100%; padding:11px 12px; border-radius:11px; border:1.5px solid var(--border); background:var(--white); font-size:14.5px; margin-bottom:8px; }
.cb-row-small-fields{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-bottom:8px; }
.cb-row-small-fields .cb-small-field{ display:flex; flex-direction:column; gap:4px; }
.cb-row-small-fields label{ font-size:10.5px; color:var(--muted); font-weight:700; text-align:center; }
.cb-row-small-fields input{
    width:100%; padding:10px 4px; border-radius:10px; border:1.5px solid var(--border);
    background:var(--white); font-size:15px; text-align:center;
}
.cb-row-field-desc textarea{
    width:100%; padding:11px 12px; border-radius:11px; border:1.5px solid var(--border);
    background:var(--white); font-size:14px; min-height:52px; resize:vertical;
}
.cb-row-field-desc label, .cb-row-field-color label{ font-size:10.5px; color:var(--muted); font-weight:700; display:block; margin-bottom:4px; }

.cb-add-row-btn{
    width:100%; padding:13px; border-radius:13px; border:1.5px dashed var(--border);
    background:none; color:var(--primary); font-weight:700; font-size:14px; cursor:pointer; margin-top:4px;
}

/* --- هشدار اختلاف محاسبه --- */
.cb-warning-banner{
    background:#FFF6E8; color:#8A5A00; border:1px solid rgba(184,138,68,0.35);
    border-radius:13px; padding:12px 14px; font-size:13px; font-weight:600; margin-top:12px; line-height:1.8;
}

/* ============================================================
   بازطراحی آمار
   ============================================================ */
.cb-stats-hero{
    background:linear-gradient(135deg, var(--primary), #46341F);
    color:var(--white); border-radius:20px; padding:22px 20px; margin-bottom:18px;
    display:grid; grid-template-columns:repeat(3,1fr); gap:10px; text-align:center;
}
.cb-stats-hero .hstat b{ display:block; font-size:22px; font-weight:800; }
.cb-stats-hero .hstat span{ display:block; font-size:11.5px; opacity:.75; margin-top:4px; }

.cb-filter-segment{ display:flex; background:var(--bg); border-radius:13px; padding:4px; margin-bottom:12px; }
.cb-filter-segment button{
    flex:1; padding:10px 6px; border:none; background:none; border-radius:10px;
    font-size:13.5px; font-weight:700; color:var(--muted); cursor:pointer;
}
.cb-filter-segment button.active{ background:var(--white); color:var(--primary); box-shadow:0 3px 10px rgba(17,17,17,0.08); }

.cb-unit-section{ margin-bottom:22px; }
.cb-unit-section-title{
    display:flex; align-items:center; gap:8px; font-size:15px; font-weight:800; color:var(--primary);
    margin-bottom:10px;
}
.cb-unit-section-badge{ background:var(--bg); color:var(--muted); font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; }

.cb-color-bar-row{ padding:12px 0; border-bottom:1px solid var(--border); }
.cb-color-bar-row:last-child{ border-bottom:none; }
.cb-color-bar-top{ display:flex; justify-content:space-between; font-size:13.5px; margin-bottom:6px; }
.cb-color-bar-name{ font-weight:800; }
.cb-color-bar-val{ color:var(--muted); font-size:12px; }
.cb-color-bar-track{ background:var(--bg); border-radius:20px; height:8px; overflow:hidden; }
.cb-color-bar-fill{ height:100%; border-radius:20px; background:var(--gold); }

.cb-chart-card{ background:var(--white); border:1px solid var(--border); border-radius:16px; padding:16px; margin-bottom:16px; }
.cb-chart-card canvas{ max-height:220px; }
@media (min-width:720px){ .cb-charts-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } }

/* --- بنر اطلاعاتی خنثی (برای وزن تخمینی / یادداشت‌ها) --- */
.cb-info-banner{
    background:#EFF5F1; color:#2E5D45; border:1px solid rgba(46,93,69,0.22);
    border-radius:13px; padding:12px 14px; font-size:12.5px; font-weight:600; margin-top:12px; line-height:1.8;
}

/* ============================================================
   تفکیک بصری «خرج کار» از «جدول برش» — کارت جدا + رنگ/آیکون متفاوت
   ============================================================ */
.cb-section-card{ margin-bottom:16px; }
.cb-section-card-expense{
    border-color:rgba(184,138,68,0.4);
    background:linear-gradient(180deg, #FFFCF7 0%, var(--white) 90px);
}
.cb-section-heading{ display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.cb-section-heading .cb-section-icon{ font-size:19px; }
.cb-section-heading .cb-section-name{ font-size:17px; font-weight:800; }
.cb-section-heading.expense .cb-section-name{ color:var(--gold); }
.cb-section-sub{ font-size:12px; color:var(--muted); margin-bottom:14px; }

.cb-row-card-expense{
    border-right:4px solid var(--gold);
    background:#FFFBF3;
}

/* ============================================================
   نوار عملیات ثابت پایین صفحه (ذخیره/لغو در فرم، ویرایش/چاپ/اشتراک در جزئیات)
   ============================================================ */
.cb-actionbar{
    position:fixed; right:0; left:0; bottom:0; z-index:45;
    display:flex; gap:10px; background:var(--white);
    padding:12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
    margin-bottom:0; max-width:900px; margin-inline:auto;
    box-shadow:0 -6px 20px rgba(92,70,51,0.10);
    border-top:1.5px solid var(--border);
}
/* فضای کافی زیر محتوا تا نوار ثابت پایین چیزی را نپوشاند */
body:has(.cb-actionbar) .cb-main{ padding-bottom:96px; }
.cb-actionbar-btn{
    flex:1; padding:14px; border-radius:14px; border:none; cursor:pointer;
    font-size:15px; font-weight:800; text-align:center; text-decoration:none;
    display:flex; align-items:center; justify-content:center; gap:6px;
}
.cb-actionbar-save{ background:var(--primary); color:var(--white); box-shadow:0 8px 18px rgba(92,70,51,0.22); }
.cb-actionbar-cancel{ background:var(--white); color:var(--danger); border:1.5px solid var(--danger); flex:0 0 96px; }
.cb-actionbar-icon-btn{
    width:50px; height:50px; border-radius:14px; border:1.5px solid var(--border);
    background:var(--white); font-size:19px; display:flex; align-items:center; justify-content:center;
    cursor:pointer; text-decoration:none; color:var(--ink); flex-shrink:0; padding:0;
}
.cb-actionbar-icon-btn:active{ background:var(--bg); }

/* --- کد مشتری (بج کوچک) --- */
.cb-customer-code{ font-size:12px; color:var(--gold); font-weight:800; }

/* --- مودال تایید لغو --- */
.cb-modal-text{ font-size:14px; color:var(--ink); line-height:1.9; margin-bottom:4px; }

/* --- کارت‌های نمایشی فقط‌خواندنی (صفحه‌ی جزئیات برش) --- */
.cb-row-view-color{ font-size:15.5px; font-weight:800; margin-bottom:10px; display:flex; align-items:center; }
.cb-row-view-small-fields{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:8px; }
.cb-row-view-small-fields.single{ grid-template-columns:1fr; max-width:140px; }
.cb-row-view-small-fields > div{ background:var(--white); border-radius:10px; padding:8px 4px; text-align:center; }
.cb-row-view-small-fields label{ display:block; font-size:10px; color:var(--muted); font-weight:700; margin-bottom:2px; }
.cb-row-view-small-fields span{ font-size:14.5px; font-weight:700; }
.cb-row-view-desc{ font-size:13px; color:var(--ink); background:var(--white); border-radius:10px; padding:9px 11px; margin-top:2px; line-height:1.7; }

/* ============================================================
   جدول برش — کارت رنگ + چند «جای وزن» داخل هر کارت
   ============================================================ */
.cb-color-group-card{
    background:var(--bg); border:1.5px solid var(--border); border-radius:16px;
    padding:14px; margin-bottom:14px;
}
.cb-color-group-head{ display:flex; align-items:center; gap:8px; margin-bottom:10px; max-width:100%; }
.cb-color-group-color-input{
    flex:1 1 0%; min-width:0; padding:12px 14px; border-radius:12px; border:1.5px solid var(--border);
    background:var(--white); font-size:15.5px; font-weight:800; color:var(--primary);
}
.cb-color-group-color-input:focus{ outline:none; border-color:var(--gold); }
.cb-color-group-del{
    flex-shrink:0; background:none; border:1.5px solid var(--border); color:var(--danger);
    font-size:15px; width:40px; height:40px; border-radius:10px; cursor:pointer;
}
.cb-color-group-del:active{ background:var(--danger-bg); }

.cb-weight-lines{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.cb-weight-line{
    display:flex; align-items:center; gap:8px;
    background:var(--white); border:1px solid var(--border); border-radius:11px; padding:4px 4px 4px 8px;
}
.cb-weight-line-num{ font-size:11px; font-weight:800; color:var(--gold); text-align:center; flex:0 0 20px; }
.cb-weight-line-input{
    flex:1 1 auto; min-width:0; padding:11px 10px; border-radius:9px; border:none; background:transparent;
    font-size:15px; text-align:center; font-weight:700; color:var(--primary);
}
.cb-weight-line-input:focus{ outline:none; }
.cb-weight-line-del{
    background:none; border:none; color:var(--danger); font-size:14px; font-weight:800;
    cursor:pointer; flex:0 0 34px; width:34px; height:34px; border-radius:8px;
}
.cb-weight-line-del:active{ background:var(--danger-bg); }

/* --- ردیفِ بی‌وزنی که وزنش تقریبی/تخمینی نشان داده می‌شود --- */
.cb-weight-line.cb-weight-line-estimated{ background:#FFF6E8; border-color:#E3C381; border-style:dashed; }
.cb-weight-line-est-badge{
    flex:0 0 auto; font-size:11px; font-weight:800; color:#8A5A00; background:#FCEBC7;
    border-radius:7px; padding:4px 8px; white-space:nowrap;
}

.cb-color-group-extra{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:6px; }
.cb-color-group-extra .cb-small-field{ display:flex; flex-direction:column; gap:3px; }
.cb-color-group-extra label{
    font-size:10.5px; color:var(--muted); font-weight:700; text-align:center;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; line-height:1.35; min-height:2.7em; padding:0 2px;
}
.cb-color-group-extra input{
    width:100%; padding:10px 4px; border-radius:9px; border:1.5px solid var(--border);
    background:var(--white); font-size:14.5px; text-align:center;
}
.cb-color-group-desc{
    width:100%; padding:9px 12px; border-radius:9px; border:1.5px solid var(--border);
    background:var(--white); font-size:13px;
}

/* ============================================================
   تصاویر توضیحات برش — کارتِ عکس + توضیح زیرش
   ============================================================ */
.cb-image-section{ margin-top:16px; }
.cb-image-section > label{ display:block; font-size:14.5px; font-weight:700; color:var(--primary); margin-bottom:8px; }
.cb-image-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:10px; margin-bottom:10px; }
.cb-image-card{ display:flex; flex-direction:column; gap:6px; }
.cb-image-card-thumb-wrap{ position:relative; aspect-ratio:1; border-radius:12px; overflow:hidden; border:1.5px solid var(--border); }
.cb-image-card-thumb{
    width:100%; height:100%; padding:0; margin:0; border:none; background:none; cursor:pointer; display:block;
}
.cb-image-card-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.cb-image-card-caption-input{
    width:100%; padding:7px 9px; border-radius:9px; border:1.5px solid var(--border);
    background:var(--bg); font-size:12.5px; color:var(--ink);
}
.cb-image-card-caption-input:focus{ outline:none; border-color:var(--gold); background:var(--white); }
.cb-image-card-caption{ font-size:12.5px; color:var(--muted); line-height:1.6; padding:0 2px; overflow-wrap:anywhere; }
/* سازگاری با کدِ قدیمی (کلاس‌های قبلی) در صورت استفاده‌ی جایی دیگر */
.cb-image-item{ position:relative; aspect-ratio:1; border-radius:12px; overflow:hidden; border:1.5px solid var(--border); }
.cb-image-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.cb-image-item-del{
    position:absolute; top:4px; left:4px; width:24px; height:24px; border-radius:8px;
    background:rgba(17,17,17,0.55); color:var(--white); border:none; font-size:12px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; z-index:2;
}
.cb-image-add-btn{
    display:flex; align-items:center; justify-content:center; gap:6px;
    padding:13px; border-radius:13px; border:1.5px dashed var(--border);
    background:none; color:var(--primary); font-weight:700; font-size:14px; cursor:pointer;
}
.cb-image-add-btn.uploading{ opacity:.6; pointer-events:none; }
.cb-image-add-btn.uploading::after{ content:' ...در حال آپلود'; }

/* --- مودال تمام‌صفحه‌ی نمایش عکس --- */
.cb-image-viewer-overlay{ background:rgba(10,10,10,0.94); align-items:center; justify-content:center; z-index:300; }
.cb-image-viewer{
    position:relative; width:100%; height:100%; max-width:100vw; max-height:100vh;
    display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px;
}
.cb-image-viewer img{ max-width:100%; max-height:78vh; object-fit:contain; border-radius:8px; display:block; }
.cb-image-viewer-caption{
    color:var(--white); font-size:14.5px; line-height:1.85; margin-top:16px; text-align:center;
    max-width:640px; padding:0 10px; overflow-wrap:anywhere;
}
.cb-image-viewer-close{
    position:absolute; top:18px; left:18px; width:42px; height:42px; border-radius:50%;
    background:rgba(255,255,255,0.14); color:var(--white); border:none; font-size:19px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px);
}

/* ============================================================
   ویرایشگر متنِ غنی (توضیحات برش / خرج کار) — پشتیبانی از HTML
   ============================================================ */
.cb-rich-preview{
    border:1.5px solid var(--border); border-radius:13px; padding:12px 14px; min-height:46px;
    font-size:14.5px; line-height:1.85; background:var(--bg); color:var(--ink); overflow-wrap:anywhere; cursor:pointer;
}
.cb-rich-preview.cb-rich-preview-empty{ color:var(--muted); }
.cb-rich-preview img{ max-width:100%; border-radius:8px; }
.cb-rich-edit-btn{
    background:none; border:none; color:var(--primary); font-weight:700; font-size:13px; cursor:pointer; padding:4px 2px; flex-shrink:0;
}
.cb-rich-content{ font-size:14.5px; line-height:1.9; color:var(--ink); overflow-wrap:anywhere; }
.cb-rich-content img{ max-width:100%; border-radius:8px; }

.cb-modal-richeditor{ max-width:640px; }
.cb-rich-toolbar{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.cb-rich-tool-btn{
    min-width:34px; height:34px; padding:0 10px; border-radius:9px; border:1.5px solid var(--border);
    background:var(--bg); color:var(--ink); font-size:14px; cursor:pointer;
}
.cb-rich-tool-btn:active{ background:var(--white); }
.cb-rich-html-toggle{ width:auto; font-size:12.5px; font-weight:700; padding:0 12px; }
.cb-rich-html-toggle.active{ background:var(--primary); color:var(--white); border-color:var(--primary); }
.cb-rich-color-btn{
    width:26px; height:26px; border-radius:50%; border:2px solid var(--white); box-shadow:0 0 0 1.5px var(--border);
    cursor:pointer; padding:0;
}
.cb-rich-tool-sep{ width:1px; height:22px; background:var(--border); margin:0 2px; }

.cb-statbox-row{ display:flex; gap:12px; direction:rtl; margin:8px 0; }
.cb-statbox-item{ flex:1; background:var(--bg); border-radius:14px; padding:18px 10px; text-align:center; }
.cb-statbox-item b{ display:block; font-size:22px; font-weight:800; color:var(--primary); line-height:1.3; }
.cb-statbox-item span{ display:block; font-size:13px; color:var(--muted); margin-top:5px; }
.cb-rich-editable{
    min-height:160px; max-height:40vh; overflow-y:auto; border:1.5px solid var(--border); border-radius:13px;
    padding:12px 14px; font-size:15px; line-height:1.9; background:var(--bg);
}
.cb-rich-editable:focus{ outline:none; border-color:var(--gold); background:var(--white); }
.cb-rich-editable img{ max-width:100%; border-radius:8px; }
.cb-rich-html-area{
    width:100%; min-height:160px; max-height:40vh; border:1.5px solid var(--border); border-radius:13px;
    padding:12px 14px; font-size:13.5px; font-family:'Courier New', monospace; background:var(--bg); color:var(--ink);
    resize:vertical;
}

/* --- دکمه چاپ غیرفعال (پیش از اولین ذخیره) --- */
.cb-actionbar-icon-btn-disabled{
    width:50px; height:50px; border-radius:14px; border:1.5px solid var(--border);
    background:var(--bg); font-size:19px; display:flex; align-items:center; justify-content:center;
    color:var(--muted); flex-shrink:0; opacity:.55;
}

/* --- نمایش وزن‌های یک رنگ در جزئیات برش (چیپ‌های کوچک) --- */
.cb-row-view-weights{ display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.cb-row-view-weight-chip{
    background:var(--white); border:1.5px solid var(--border); border-radius:9px;
    padding:5px 10px; font-size:13px; font-weight:700; color:var(--primary);
}
/* --- وزنِ تخمینی (ردیفی که وزنش ثبت نشده و بر اساس «وزن هر قد» تقریب زده شده) --- */
.cb-row-view-weight-chip-est{
    background:#FFF6E8; border:1.5px dashed #E3C381; color:#8A5A00;
}

/* --- فیلد کد برش در صفحه‌ی جزئیات (مودالِ مدیریتِ کدهای یک برشِ ازقبل‌ذخیره‌شده) --- */
.cb-code-list-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 4px; border-bottom:1px solid var(--border); }
.cb-code-list-item:last-child{ border-bottom:none; }
.cb-code-list-info{ min-width:0; }
.cb-code-list-code{ font-weight:800; color:var(--primary); font-size:14.5px; }
.cb-code-list-desc{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.cb-code-list-meta{ font-size:10.5px; color:var(--muted); opacity:.75; margin-top:3px; }
.cb-code-list-actions{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.cb-code-action-btn{
    width:32px; height:32px; border-radius:9px; border:1.5px solid var(--border); background:var(--bg);
    font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.cb-code-action-btn:active{ background:var(--border); }
.cb-code-action-btn-danger{ color:var(--danger); border-color:var(--danger); background:var(--danger-bg); }
.cb-code-list-item-editing{ display:flex; align-items:center; gap:8px; }
.cb-code-edit-input{
    flex:1 1 0%; min-width:0; padding:9px 10px; border-radius:9px; border:1.5px solid var(--border);
    background:var(--white); font-size:13.5px;
}
.cb-code-add-box{ margin-top:12px; display:none; }
.cb-code-add-box.open{ display:block; }

/* --- کارت‌های «مدل‌های کار» در فرمِ ثبت/ویرایشِ برش — زیر هم، بدون مودال --- */
.cb-cutcode-badge{
    font-size:12.5px; font-weight:800; color:var(--white); background:var(--primary);
    border-radius:20px; padding:5px 14px; white-space:nowrap;
}
.cb-cutcode-badge b{ color:var(--gold); font-weight:800; }
.cb-code-cards-tablehead{
    display:grid; grid-template-columns:1fr 52px; gap:8px; padding:7px 10px;
    margin-bottom:6px; font-size:12.5px; color:var(--white); font-weight:800;
    background:var(--primary); border-radius:9px;
}
.cb-code-card{
    display:flex; align-items:flex-start; gap:8px; background:var(--bg);
    border:1.5px solid var(--border); border-radius:12px; padding:10px; margin-bottom:10px;
}
.cb-code-card:last-child{ margin-bottom:0; }
.cb-code-card-fields{ flex:1; min-width:0; display:grid; grid-template-columns:1fr 52px; gap:8px; }
.cb-code-card-desc, .cb-code-card-wph{
    padding:9px 10px; border-radius:9px; border:1.5px solid var(--border);
    background:var(--white); font-size:13.5px; width:100%; box-sizing:border-box;
}
.cb-code-card-wph{ text-align:center; padding-left:2px; padding-right:2px; }
.cb-code-card-meta{ grid-column:1 / -1; font-size:11px; color:var(--muted); opacity:.8; }
.cb-code-card-del{
    width:34px; height:34px; border-radius:9px; border:1.5px solid var(--border); background:var(--white);
    color:var(--danger); flex-shrink:0; font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.cb-code-card-del:active{ background:var(--danger-bg); }

/* ============================================================
   صفحه‌ی جزئیات برش — سربرگ زیبا (هدر گرادیانی) برای نمای مشتری/برش‌کار
   ============================================================ */
.cb-cut-hero{
    background:linear-gradient(135deg, var(--primary) 0%, #3C2D1E 100%);
    color:var(--white); border-radius:20px; padding:22px 20px; margin-bottom:16px;
    box-shadow:0 16px 32px rgba(92,70,51,0.28); position:relative; overflow:hidden;
}
.cb-cut-hero::after{
    content:''; position:absolute; inset:0;
    background:radial-gradient(circle at 100% 0%, rgba(184,138,68,0.35), transparent 55%);
    pointer-events:none;
}
.cb-cut-hero-top{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; position:relative; }
.cb-cut-hero-chip{
    font-size:12.5px; font-weight:700; background:rgba(255,255,255,0.15);
    padding:6px 12px; border-radius:20px; backdrop-filter:blur(4px);
}
.cb-cut-hero-chip-code{ background:var(--gold); color:var(--primary); font-weight:800; }
.cb-cut-hero-title{ font-size:22px; font-weight:800; line-height:1.5; position:relative; }
.cb-cut-hero-workers{ font-size:13px; opacity:.85; margin-top:10px; font-weight:600; position:relative; }

/* --- ردیف چیپ‌های اطلاعاتی (کار در هر قد / وزن هر قد) --- */
.cb-cut-meta-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.cb-cut-meta-chip{ background:var(--bg); border-radius:13px; padding:12px 10px; text-align:center; }
.cb-cut-meta-chip span{ display:block; font-size:11px; color:var(--muted); font-weight:700; margin-bottom:4px; }
.cb-cut-meta-chip b{ font-size:15.5px; color:var(--primary); font-weight:800; }

/* --- نقطه‌ی رنگی کنار نام هر رنگ در جدول برش (نمای مشاهده) --- */
.cb-color-dot{
    display:inline-block; width:12px; height:12px; border-radius:50%;
    margin-left:8px; flex-shrink:0; box-shadow:0 0 0 2px var(--white), 0 0 0 3px var(--border);
}
.cb-color-dot-unknown{
    background:var(--white) !important; border:1.5px dashed var(--muted); box-shadow:none;
    display:inline-flex; align-items:center; justify-content:center; font-size:8px; color:var(--muted); font-weight:800;
}
.cb-color-dot-unknown::after{ content:'؟'; }

/* ============================================================
   شناسایی رنگ پارچه — نشانگر (سوییچ) کنار فیلد رنگ در ویرایش برش
   ============================================================ */
.cb-color-swatch{
    flex-shrink:0; width:40px; height:40px; border-radius:12px; cursor:default;
    border:1.5px solid var(--border); box-shadow:inset 0 0 0 3px var(--white);
    display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:800;
    padding:0; transition:transform .12s ease;
}
.cb-color-swatch-empty{ background:var(--bg); border-style:dashed; }
.cb-color-swatch-found{ box-shadow:inset 0 0 0 3px var(--white), 0 3px 10px rgba(17,17,17,0.14); cursor:pointer; }
.cb-color-swatch-found:active{ transform:scale(0.94); }
.cb-color-swatch-notfound{
    background:var(--danger-bg); color:var(--danger); border-color:var(--danger); border-style:dashed; cursor:pointer;
}
.cb-color-swatch-notfound:active{ transform:scale(0.94); }

/* در کارت رنگ اصلی: بوم/نشانگر قبل از فیلد نام رنگ */
.cb-color-group-head .cb-color-swatch{ order:-1; }

/* در ردیف‌های خرج کار: نشانگر کنار اینپوت رنگ */
.cb-row-field-color-input-row{ display:flex; align-items:center; gap:8px; max-width:100%; }
.cb-row-field-color-input-row input{ flex:1 1 0%; min-width:0; margin-bottom:0 !important; }

/* نقطه‌ی کوچک کنار نام رنگ در جدول «تفکیک بر اساس رنگ» */
.cb-color-dot-sm{
    display:inline-block; width:10px; height:10px; border-radius:50%; margin-left:7px;
    flex-shrink:0; vertical-align:middle; box-shadow:0 0 0 2px var(--white), 0 0 0 3px var(--border);
}
.cb-color-dot-sm-unknown{
    background:var(--white); border:1.5px dashed var(--muted); box-shadow:none;
}

/* --- بوم ساده‌ی انتخاب رنگ: شبکه‌ای از پیکسل‌های رنگی، از سفید تا مشکی --- */
.cb-color-picker-box{ position:relative; margin-top:6px; border-radius:14px; overflow:hidden; border:1.5px solid var(--border); }
.cb-color-picker-canvas{ display:block; width:100%; height:280px; touch-action:none; cursor:pointer; }
.cb-color-picker-cursor{
    position:absolute; display:none; border-radius:5px; box-sizing:border-box;
    border:3px solid var(--white); box-shadow:0 0 0 2px rgba(17,17,17,0.55), 0 2px 8px rgba(17,17,17,0.35);
    pointer-events:none;
}
.cb-color-picker-result{
    display:flex; align-items:center; gap:10px; margin-top:12px; background:var(--bg);
    border-radius:12px; padding:10px 12px;
}
.cb-color-picker-result-swatch{
    width:34px; height:34px; border-radius:10px; flex-shrink:0; border:1.5px solid var(--border);
    box-shadow:inset 0 0 0 3px var(--white);
}
.cb-color-picker-result-text{ font-size:13.5px; color:var(--muted); }
.cb-color-picker-result-text b{ color:var(--primary); font-weight:800; }

/* --- شماره‌ی سراسری روی هر چیپ وزن در نمای فقط‌خواندنی --- */
.cb-row-view-weight-chip{ display:inline-flex; align-items:center; gap:6px; }
.cb-row-view-weight-num{
    display:inline-flex; align-items:center; justify-content:center;
    width:16px; height:16px; border-radius:50%; background:var(--gold); color:var(--white);
    font-size:9.5px; font-weight:800; flex-shrink:0;
}