/*
 * 💹 حاسبةُ سعر البيع وهامش الربح (siea.sa/tools/profit-margin-calculator) — ما يخصّها وحدَها.
 * مكوّناتُ الحقول والنتيجة والأزرار من أنماط `vc-` في site-blog.css (شكلُ حاسبة الضريبة) ⇒ الحاسبتان بشكلٍ واحد.
 * ألوانُ الشريط رموزٌ لها قيمةٌ في الوضعين (القشرةُ تضع data-theme على الجذر دائماً).
 * ⛔ لا أصنافَ تبدأ بـ«bi-» أو «ri-» — حارسُ الأيقونات يمسح القوالب.
 */
:root {
    --pc-cost: #405189;
    --pc-exp: #8f99c2;
    --pc-profit: #15803d;
    --pc-vat: #cfd3df;
    --pc-loss-bg: #fef3f2;
    --pc-loss-line: #fecdca;
    --pc-cur: #eef0f8;
}
:root[data-theme="dark"] {
    --pc-cost: #9aabeb;
    --pc-exp: #56628c;
    --pc-profit: #4ade80;
    --pc-vat: #475569;
    --pc-loss-bg: #2b1716;
    --pc-loss-line: #6b2a24;
    --pc-cur: #1c2740;
}

/* التخطيط: عمودٌ واحدٌ على الجوّال (الوضع ⟵ الحقول ⟵ النتيجة ⟵ الهوامش) · وعمودان من 768px والجدولُ تحتهما بعرض البطاقة */
.vc.pc {
    grid-template-areas: "mode" "fields" "res" "scen";
}
.pc-fields {
    grid-area: fields;
    display: grid;
    grid-template-columns: minmax(0, 1fr);   /* عمودٌ «auto» يأخذ عرضَ الحقل الطبيعيّ (≈340px) فيُقصّ على الجوّال */
    gap: 18px;
    min-width: 0;
}
.pc-res {
    min-width: 0;
}
/* المعادلةُ كتلةٌ واحدةٌ لا تنقسم: انقسامُ عزلٍ لاتينيٍّ على سطرين في فقرةٍ عربيّة يُبعثر ترتيبَ أجزائه */
.pc-res .vc-formula bdi {
    display: inline-block;
    max-width: 100%;
}
.pc-scen {
    grid-area: scen;
    min-width: 0;
}
.pc-opt {
    color: var(--muted);
    font-weight: 400;
    font-size: 14px;
}

/* خانةُ الضريبة: مربّعُ اختيارٍ حقيقيّ — والتسميةُ كلُّها منطقةُ لمس */
.pc-vat {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 6px 12px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--soft);
}
.pc-vat input {
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--ink);
    cursor: pointer;
}
.pc-vat input:disabled {
    cursor: default;   /* بلا JavaScript — يفتحه السكربت */
}
.pc-vat label {
    min-height: 32px;
    display: flex;
    align-items: center;
    color: var(--ink);
    font-weight: 500;
    cursor: pointer;
}
.pc-vat .vc-hint {
    grid-column: 1 / -1;
    margin: 0;
}

/* الهامش: الحقلُ والأزرارُ الجاهزة في صفٍّ يلتفّ */
.pc-margin-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.pc-input-pct {
    width: 130px;
}
.pc-input-pct input {
    height: 46px;
    font-size: 18px;
}
.pc-margin-row .vc-chips {
    flex-wrap: wrap;
}

/* النتيجة: صفُّ الربح أحمرُ في الخسارة */
.vc-row.is-loss .vc-num,
.vc-row.is-loss dt {
    color: var(--vc-err);
}

/* النسبتان جنباً إلى جنب: الربحُ نفسُه من أساسين */
.pc-pcts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}
.pc-pct {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg);
}
.pc-pct p {
    margin: 0;
}
.pc-pct-k {
    color: var(--ink);
    font-size: 15px;
    font-weight: 500;
}
.pc-pct-v {
    margin-top: 2px;
    color: var(--ink);
    font-size: 26px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
}
.pc-pct-f {
    margin-top: 4px;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.6;
}
.pc-pct-f bdi {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}
.pc-pct.is-loss .pc-pct-v {
    color: var(--vc-err);
}

/* الفكرة 2 — الربحُ نفسُه على أساسين: شريطان متطابقان (التكلفة + الربح بمقياسٍ واحد) والقوسُ تحتهما هو الأساس.
   القوسُ والفاصلُ بـflex-grow وفجوةِ الشريط نفسِها فيحاذيان أجزاءه · و`min-width: 0` وإلّا منع النصُّ القوسَ من الانكماش فانزاح */
.pc-cmp {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--bg);
}
.pc-cmp p {
    margin: 0;
}
.pc-cmp .pc-cmp-h {
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 14px;
}
.pc-cmp-h bdi,
.pc-cmp-k bdi,
.pc-cmp-brace bdi {
    color: var(--ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.pc-cmp-row + .pc-cmp-row {
    margin-top: 14px;
}
.pc-cmp .pc-cmp-k {
    margin-bottom: 6px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 500;
}
.pc-cmp-bar {
    display: flex;
    gap: 2px;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--soft);
}
.pc-cmp-base {
    display: flex;
    gap: 2px;
    margin-top: 3px;
}
.pc-cmp-brace {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    padding-top: 11px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}
.pc-cmp-brace::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 7px;
    border: 1.5px solid var(--muted);
    border-top: 0;
    border-radius: 0 0 6px 6px;
}
.pc-cmp-brace > span {
    display: block;
    white-space: nowrap;
}
.pc-cmp-gap {
    flex: 1 1 0;
    min-width: 0;
}
/* انتقالُ أجزاء الشريط نفسُه: وإلّا قفز القوسُ وانزلق الشريطُ فافترقا ربعَ ثانيةٍ مع كلّ تغيير */
.pc-cmp-brace,
.pc-cmp-gap {
    transition: flex-grow .25s ease;
}

.pc-loss {
    margin: 14px 0 0;
    padding: 10px 14px;
    border: 1px solid var(--pc-loss-line);
    border-radius: 12px;
    background: var(--pc-loss-bg);
    color: var(--vc-err);
    font-size: 15px;
    line-height: 1.7;
}

/* شريطُ تركيب السعر: التكلفة ⟵ المصاريف ⟵ الربح ⟵ الضريبة (من جهة البداية) — والأسطورةُ نصٌّ يقرؤه قارئُ الشاشة */
.pc-comp {
    margin-top: 16px;
}
.pc-comp-h {
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 14px;
}
.pc-comp-h bdi {
    color: var(--ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.pc-bar {
    display: flex;
    gap: 2px;
    height: 14px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--soft);
}
.pc-seg {
    display: block;
    flex: 1 1 0;      /* النسبةُ من flex-grow بالهللات (من الخادم ثمّ السكربت) — الفواصلُ لا تقصّ آخرَ جزء */
    min-width: 0;
    height: 100%;
    transition: flex-grow .25s ease;
}
.pc-seg-cost { background: var(--pc-cost); }
.pc-seg-exp { background: var(--pc-exp); }
.pc-seg-profit { background: var(--pc-profit); }
.pc-seg-vat { background: var(--pc-vat); }
.pc-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 10px 0 0;
    padding: 0;
    color: var(--muted);
    font-size: 14px;
    list-style: none;
}
.pc-legend li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.pc-legend li[hidden] {
    display: none;
}
.pc-legend bdi {
    color: var(--ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.pc-sw {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

/* «أسعارك عند هوامش أخرى» */
.pc-scen {
    padding-top: 4px;
}
.pc-scen h3 {
    margin: 0;
    color: var(--ink);
    font-size: 18px;
    font-weight: 600;
}
.pc-scen .vc-hint {
    margin: 4px 0 12px;
}
.pc-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 12px;
}
.pc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}
.pc-table th,
.pc-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-weight: 400;
    text-align: start;
    white-space: nowrap;
}
.pc-table thead th {
    background: var(--soft);
    color: var(--muted);
    font-size: 13.5px;
    font-weight: 500;
}
.pc-table tbody tr:last-child > * {
    border-bottom: 0;
}
.pc-table tr.is-cur > * {
    background: var(--pc-cur);
    font-weight: 600;
}
.pc-novat .pc-col-gross {
    display: none;
}
.pc-try {
    min-width: 72px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--bg);
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.pc-try:hover {
    border-color: var(--ink);
}
.pc-try:disabled {
    cursor: default;
}
.pc-try:disabled:hover {
    border-color: var(--line-strong);
}
.pc-try:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
.pc-table tr.is-cur .pc-try {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--on-ink);
}

/* روابطُ الأدوات الأخرى آخرَ الصفحة */
.pc-related {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin: 40px 0 0;
}
.pc-related a {
    color: var(--brand);
    font-weight: 500;
    text-decoration: none;
}
.pc-related a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (min-width: 768px) {
    .vc.pc {
        grid-template-rows: auto 1fr auto;
        grid-template-areas: "mode res" "fields res" "scen scen";
    }
}
@media (max-width: 767.98px) {
    .pc-fields {
        gap: 16px;
    }
    .pc-pct {
        padding: 10px 12px;
    }
    .pc-pct-v {
        font-size: 22px;
    }
    .pc-table th,
    .pc-table td {
        padding: 8px 10px;
        font-size: 14.5px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .pc-seg,
    .pc-cmp-brace,
    .pc-cmp-gap {
        transition: none;
    }
}