/* آلة حاسبة الحاويات — كل التنسيقات محصورة داخل .cc-root حتى لا تتعارض مع تصميم الموقع */
.cc-root{--cc-card:#fff;--cc-ink:#1d2433;--cc-mut:#6b7385;--cc-pri:#0f5bd8;--cc-pri2:#e8f0ff;--cc-ok:#16834a;--cc-okbg:#e7f6ee;--cc-warn:#9a5b00;--cc-warnbg:#fff4e0;--cc-bad:#c62828;--cc-badbg:#fdecec;--cc-line:#e4e7ef;
  direction:rtl;text-align:right;font-family:Cairo,Tahoma,sans-serif;color:var(--cc-ink);line-height:1.6}
.cc-root.cc-internal{--cc-pri:#7a2e0e;--cc-pri2:#fbeee6}
.cc-root *{box-sizing:border-box}
.cc-root h3{font-size:17px;margin:18px 0 8px}
.cc-root .cc-card{background:var(--cc-card);border:1px solid var(--cc-line);border-radius:12px;padding:12px}
.cc-root .cc-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cc-root .cc-ports{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.cc-root .cc-ports button,.cc-root .cc-filters button{font:inherit;font-size:13px;border:1px solid var(--cc-line);background:#fff;border-radius:999px;padding:5px 12px;cursor:pointer;color:var(--cc-ink)}
.cc-root .cc-ports button.on,.cc-root .cc-filters button.on{background:var(--cc-pri);color:#fff;border-color:var(--cc-pri)}
.cc-root input[type=number]{font:inherit;width:110px;padding:5px 8px;border:1px solid var(--cc-line);border-radius:8px}
.cc-root .cc-combos{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.cc-root .cc-combo{background:#fff;border:1px solid var(--cc-line);border-radius:10px;padding:9px;cursor:pointer;text-align:right;font:inherit;color:var(--cc-ink)}
.cc-root .cc-combo:hover,.cc-root .cc-combo.on{border-color:var(--cc-pri);box-shadow:0 0 0 2px var(--cc-pri2)}
.cc-root .cc-ic{font-size:24px;letter-spacing:2px}
.cc-root .cc-t{font-weight:700;font-size:14px}
.cc-root .cc-pill{display:inline-block;border-radius:6px;padding:1px 8px;font-size:12px;font-weight:700;margin-top:3px}
.cc-root .p4{background:var(--cc-okbg);color:var(--cc-ok)}.cc-root .p3{background:#e8f0ff;color:#0f5bd8}.cc-root .pb{background:var(--cc-badbg);color:var(--cc-bad)}.cc-root .pw{background:var(--cc-warnbg);color:var(--cc-warn)}
.cc-root .cc-scroll{overflow-x:auto}
.cc-root table{width:100%;border-collapse:collapse;font-size:14px}
.cc-root th,.cc-root td{padding:8px 7px;border-bottom:1px solid var(--cc-line);text-align:right}
.cc-root th{background:#f0f2f7;font-weight:700}
.cc-root td.num,.cc-root th.num{text-align:center;white-space:nowrap}
.cc-root tr.hl td{background:var(--cc-pri2)}
.cc-root .cc-builder{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:8px}
.cc-root .cc-cat{border:1px solid var(--cc-line);border-radius:10px;padding:9px;background:#fff}
.cc-root .cc-cat .n{font-weight:700}.cc-root .cc-cat .d{font-size:12px;color:var(--cc-mut);min-height:30px}
.cc-root .cc-cat .p{font-weight:800;color:var(--cc-pri);font-size:17px}
.cc-root .cc-ctr{display:flex;align-items:center;gap:8px;margin-top:5px}
.cc-root .cc-ctr button{width:32px;height:32px;border-radius:8px;border:1px solid var(--cc-line);background:#f3f5fa;font-size:19px;cursor:pointer;color:var(--cc-ink)}
.cc-root .cc-ctr span{min-width:22px;text-align:center;font-weight:800;font-size:17px}
.cc-root .cc-alert{border-radius:10px;padding:10px 12px;margin:8px 0;line-height:1.9}
.cc-root .cc-alert.bad{background:var(--cc-badbg);color:var(--cc-bad);border:1px solid #f3b9b9}
.cc-root .cc-alert.warn{background:var(--cc-warnbg);color:var(--cc-warn);border:1px solid #f1d29a}
.cc-root .cc-alert.ok{background:var(--cc-okbg);color:var(--cc-ok);border:1px solid #b6e2c8}
.cc-root .pos{color:var(--cc-ok);font-weight:800}.cc-root .neg{color:var(--cc-bad);font-weight:800}
.cc-root .cc-kpi{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-top:8px}
.cc-root .cc-kpi div{background:#f7f8fb;border-radius:10px;padding:8px}.cc-root .cc-kpi small{color:var(--cc-mut);display:block}.cc-root .cc-kpi b{font-size:19px}
.cc-root .cc-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.cc-root .cc-note{font-size:13px;color:var(--cc-mut);margin-top:8px}
.cc-root ol{margin:0;padding-right:20px;line-height:2}
.cc-root .cc-link{font:inherit;border:0;background:none;color:var(--cc-pri);cursor:pointer;text-decoration:underline;padding:0}
/* التبويبات */
.cc-tabs{direction:rtl;font-family:Cairo,Tahoma,sans-serif}
.cc-tabs .cc-tabbar{display:flex;gap:6px;border-bottom:2px solid #e4e7ef;margin-bottom:14px;flex-wrap:wrap}
.cc-tabs .cc-tabbar button{font:inherit;font-weight:700;border:0;background:none;padding:10px 16px;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;color:#6b7385}
.cc-tabs .cc-tabbar button.on{color:#0f5bd8;border-bottom-color:#0f5bd8}
.cc-tabs .cc-tabpane{display:none}.cc-tabs .cc-tabpane.on{display:block}
/* اللوحة الجانبية للموظفين داخل صفحة تشكيل الحاوية */
.cc-drawer-btn{font-family:Cairo,Tahoma,sans-serif;font-weight:700;background:#7a2e0e;color:#fff;border:0;border-radius:10px;padding:9px 16px;cursor:pointer}
.cc-drawer{position:fixed;top:0;bottom:0;left:0;width:min(760px,100vw);background:#f4f5f8;box-shadow:0 0 30px rgba(0,0,0,.25);z-index:9999;overflow-y:auto;padding:14px;transform:translateX(-105%);transition:transform .25s}
.cc-drawer.open{transform:none}
.cc-drawer-head{display:flex;justify-content:space-between;align-items:center;direction:rtl;font-family:Cairo,Tahoma,sans-serif;margin-bottom:6px}
.cc-drawer-head button{font-size:22px;border:0;background:none;cursor:pointer}
/* ٤ نوفمبر ٢٠٢٦ — فوق شريط تنبيهات لوحة الإدارة الأحمر (قِيس في صفحة تشكيل الحاويات) */
.cc-drawer{z-index:2147483647}