/* ============ الثيمات (متغيرات CSS) — مطابقة للملف المرجعي بالمليمتر ============ */
:root {
    --bdw: 0px;
    --bg: #fcfaf8;
    --text: #2f2927;
    --muted: #78716c;
    --muted-2: #a8a29e;
    --row-name: #2f2927;
    --cell-3: #2f2927;
    --auth-pad: 0.25rem 0.5rem;
    --pill-pad: 0.25rem 0.5rem;
    --meta: #2f2927;
    --sidebar-bg: #fffdfb;
    --sidebar-border: #efdeda;
    --header-bg: rgba(252, 250, 248, 0.9);
    --header-border: #f0e3de;
    --header-icon-bg: #ffffff;
    --header-avatar-bg: #d8eadf;
    --header-avatar-text: #47765a;
    --header-avatar-border: transparent;
    --nav-text: #78716c;
    --nav-hover: #faf1ed;
    --nav-active-bg: #fbe8ea;
    --nav-active-text: #9c5360;
    --card-bg: #ffffff;
    --card-border: #f0e4df;
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
    --panel-bg: #ffffff;
    --panel-chart-bg: #ffffff;
    --panel-soft-bg: #fcf7f4;
    --table-head-bg: #fffaf8;
    --thead-border: transparent;
    --panel-head-border: #f4eae6;
    --table-row-border: #f5f5f4;
    --row-hover: #fffaf8;
    --kicker: #ba7b77;
    --accent-span: #d88891;
    --accent-deep: #9c5360;
    --accent-soft: #fbe8ea;
    --accent-soft2: #fdebed;
    --accent-border: #ecd8d1;
    --accent-icon-bg: #fff0f3;
    --accent-icon-text: #c97883;
    --accent-icon-border: transparent;
    --btn-accent: #c97883;
    --btn-hover: #c97883;
    --btn-shadow: none;
    --btn-text: #ffffff;
    --edit-border: #ecd8d1; --edit-bg: transparent; --edit-text: #a9636c; --edit-hover: #fbe8ea;
    --del-border: #fecaca; --del-bg: transparent; --del-text: #dc2626; --del-hover: #fecaca;
    --input-bg: #ffffff;
    --input-border: #e8d9d4;
    --input-soft-bg: #f9f4f0;
    --focus: #c97883;
    --file-border: #e7ccc5;
    --switch-border: transparent;
    --switch-accent: #c97883;
    --modal-overlay: rgba(33, 24, 22, 0.6);
    --modal-bg: #ffffff;
    --modal-border: transparent;
    --modal-head-border: transparent;
    --modal-title: #2f2927;
    --label: #2f2927;
    --up: #559673;
    --positive: #4d8b68;
    --success-text: #23734b;
    --success-soft: #dff5e7;
    --success-border: transparent;
    --amber: #a36d18;
    --amber-text: #a36d18;
    --amber-soft: #fff3d8;
    --amber-border: transparent;
    --purple-text: #8868b8;
    --purple-soft: #eee8fa;
    --purple-border: transparent;
    --blue-text: #356bb2;
    --blue-soft: #e5efff;
    --blue-border: transparent;
    --order-id: #b56e79;
    --chart-1: #f5cbd0;
    --chart-2: #efb3bb;
    --chart-3: #efb3bb;
    --chart-4: #e99fa9;
    --chart-5: #df929d;
    --chart-6: #c97883;
    --chart-border: #e7e5e4;
    --avatar-1-bg: #ffe7eb; --avatar-1-text: #a34e62; --avatar-1-border: transparent;
    --avatar-2-bg: #e6f5ed; --avatar-2-text: #2c7a57; --avatar-2-border: transparent;
    --avatar-3-bg: #fff2d9; --avatar-3-text: #a76f21; --avatar-3-border: transparent;
    --avatar-4-bg: #eee8fa; --avatar-4-text: #7455aa; --avatar-4-border: transparent;
    --toast-bg: #47765a;
    --badge-accent-bg: #fdebed; --badge-accent-text: #c96c79; --badge-accent-border: transparent;
    --logo-bg: #e9a7ad; --logo-border: transparent;
    --badge-green-bg: #eaf6ee; --badge-green-text: #5a9b75; --badge-green-border: transparent;
    --badge-amber-bg: #fff4e5; --badge-amber-text: #bd8837; --badge-amber-border: transparent;
    --badge-purple-bg: #f2ecfb; --badge-purple-text: #8868b8; --badge-purple-border: transparent;
    --tip-bg: #eef8f2; --tip-border: transparent; --tip-icon-bg: #ffffff; --tip-icon-text: #589874;
    --tip-title: #47765a; --tip-text: #668473;
    --tip2-icon-bg: #fbe1d7; --tip2-icon-text: #be725a; --tip2-icon-border: transparent;
    --tip-em: #ad6870;
    --sat-bg: #ffffff; --sat-border: transparent; --sat-pad: 12px; --sat-mt: 48px;
    --grade-border: #dceee3; --grade-width: 4px; --grade-bg: transparent; --grade-text: #589874;
    --scrollbar: #e8d9d4;
}

html.dark {
    --bdw: 1px;
    --bg: #0f172a;
    --text: #f1f5f9;
    --muted: #94a3b8;
    --muted-2: #64748b;
    --row-name: #e2e8f0;
    --cell-3: #cbd5e1;
    --auth-pad: 0.25rem 0.625rem;
    --pill-pad: 0.25rem 0.625rem;
    --meta: #94a3b8;
    --sidebar-bg: rgba(15, 23, 42, 0.95);
    --sidebar-border: #1e293b;
    --header-bg: rgba(15, 23, 42, 0.8);
    --header-border: #1e293b;
    --header-icon-bg: #1e293b;
    --header-avatar-bg: rgba(6, 78, 59, 0.5);
    --header-avatar-text: #6ee7b7;
    --header-avatar-border: rgba(4, 120, 87, 0.3);
    --nav-text: #94a3b8;
    --nav-hover: #1e293b;
    --nav-active-bg: #331e24;
    --nav-active-text: #f472b6;
    --card-bg: rgba(30, 41, 59, 0.4);
    --card-border: #1e293b;
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --panel-bg: rgba(30, 41, 59, 0.4);
    --panel-chart-bg: rgba(30, 41, 59, 0.5);
    --panel-soft-bg: rgba(30, 41, 59, 0.3);
    --table-head-bg: rgba(15, 23, 42, 0.6);
    --thead-border: #1e293b;
    --panel-head-border: #1e293b;
    --table-row-border: rgba(30, 41, 59, 0.6);
    --row-hover: rgba(30, 41, 59, 0.4);
    --kicker: #f472b6;
    --accent-span: #f472b6;
    --accent-deep: #f472b6;
    --accent-soft: #331e24;
    --accent-soft2: #331e24;
    --accent-border: #7f1d1d;
    --accent-icon-bg: rgba(80, 7, 36, 0.6);
    --accent-icon-text: #f472b6;
    --accent-icon-border: rgba(157, 23, 77, 0.4);
    --btn-accent: #db2777;
    --btn-hover: #ec4899;
    --btn-shadow: 0 10px 15px -3px rgba(131, 24, 67, 0.2), 0 4px 6px -4px rgba(131, 24, 67, 0.2);
    --btn-text: #ffffff;
    --edit-border: rgba(131, 24, 67, 0.6); --edit-bg: rgba(80, 7, 36, 0.3); --edit-text: #f9a8d4; --edit-hover: rgba(131, 24, 67, 0.5);
    --del-border: rgba(127, 29, 29, 0.6); --del-bg: rgba(69, 10, 10, 0.3); --del-text: #f87171; --del-hover: rgba(127, 29, 29, 0.5);
    --input-bg: #0f172a;
    --input-border: #334155;
    --input-soft-bg: rgba(15, 23, 42, 0.6);
    --focus: #ec4899;
    --file-border: #475569;
    --switch-border: rgba(51, 65, 85, 0.6);
    --switch-accent: #db2777;
    --modal-overlay: rgba(15, 23, 42, 0.93);
    --modal-bg: #1e293b;
    --modal-border: #334155;
    --modal-head-border: #334155;
    --modal-title: #f8fafc;
    --label: #cbd5e1;
    --up: #34d399;
    --positive: #34d399;
    --success-text: #6ee7b7;
    --success-soft: rgba(2, 44, 34, 0.8);
    --success-border: rgba(6, 95, 70, 0.5);
    --amber: #fbbf24;
    --amber-text: #fcd34d;
    --amber-soft: rgba(69, 26, 3, 0.8);
    --amber-border: rgba(146, 64, 14, 0.5);
    --purple-text: #c084fc;
    --purple-soft: rgba(59, 7, 100, 0.8);
    --purple-border: rgba(107, 33, 168, 0.5);
    --blue-text: #93c5fd;
    --blue-soft: rgba(23, 37, 84, 0.8);
    --blue-border: rgba(30, 64, 175, 0.5);
    --order-id: #f472b6;
    --chart-1: rgba(131, 24, 67, 0.6);
    --chart-2: rgba(157, 23, 77, 0.6);
    --chart-3: rgba(157, 23, 77, 0.6);
    --chart-4: rgba(190, 24, 93, 0.6);
    --chart-5: rgba(219, 39, 119, 0.6);
    --chart-6: rgba(236, 72, 153, 0.8);
    --chart-border: #334155;
    --avatar-1-bg: rgba(80, 7, 36, 0.8); --avatar-1-text: #f9a8d4; --avatar-1-border: rgba(157, 23, 77, 0.4);
    --avatar-2-bg: rgba(6, 78, 59, 0.8); --avatar-2-text: #6ee7b7; --avatar-2-border: rgba(6, 95, 70, 0.4);
    --avatar-3-bg: rgba(69, 26, 3, 0.8); --avatar-3-text: #fcd34d; --avatar-3-border: rgba(146, 64, 14, 0.4);
    --avatar-4-bg: rgba(59, 7, 100, 0.8); --avatar-4-text: #c084fc; --avatar-4-border: rgba(107, 33, 168, 0.4);
    --toast-bg: #059669;
    --badge-accent-bg: rgba(80, 7, 36, 0.6); --badge-accent-text: #f472b6; --badge-accent-border: rgba(157, 23, 77, 0.4);
    --logo-bg: rgba(219, 39, 119, 0.3); --logo-border: rgba(236, 72, 153, 0.2);
    --badge-green-bg: rgba(2, 44, 34, 0.6); --badge-green-text: #34d399; --badge-green-border: rgba(6, 95, 70, 0.4);
    --badge-amber-bg: rgba(69, 26, 3, 0.6); --badge-amber-text: #fbbf24; --badge-amber-border: rgba(146, 64, 14, 0.4);
    --badge-purple-bg: rgba(59, 7, 100, 0.6); --badge-purple-text: #c084fc; --badge-purple-border: rgba(107, 33, 168, 0.4);
    --tip-bg: rgba(6, 78, 59, 0.4); --tip-border: rgba(6, 95, 70, 0.3); --tip-icon-bg: rgba(6, 78, 59, 0.5);
    --tip-icon-text: #6ee7b7; --tip-title: #34d399; --tip-text: rgba(167, 243, 208, 0.6);
    --tip2-icon-bg: rgba(69, 26, 3, 0.5); --tip2-icon-text: #fbbf24; --tip2-icon-border: rgba(146, 64, 14, 0.3);
    --tip-em: #f472b6;
    --sat-bg: rgba(30, 41, 59, 0.8); --sat-border: rgba(51, 65, 85, 0.5); --sat-pad: 16px; --sat-mt: 32px;
    --grade-border: rgba(16, 185, 129, 0.4); --grade-width: 2px; --grade-bg: rgba(2, 44, 34, 0.6); --grade-text: #34d399;
    --scrollbar: #334155;
}

/* ============ أساسيات (مثل Tailwind preflight) ============ */
/* Saudi Riyal symbol font for U+20C1 — file: fonts/saudi-riyal(.bold).woff2
   (Saudi Riyal Font (c) Emran Alhaddad, SIL OFL 1.1).
   unicode-range restricts it to the riyal sign only; all other text keeps the site fonts. */
@font-face {
    font-family: 'SaudiRiyal';
    src: url('fonts/saudi-riyal.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+20C1;
}
@font-face {
    font-family: 'SaudiRiyal';
    src: url('fonts/saudi-riyal-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+20C1;
}
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { line-height: 1.5; }
html, body { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
body {
    font-family: 'SaudiRiyal', Tahoma, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}
::selection { background: var(--btn-accent); color: #fff; }
/* شرائط تمرير نحيفة وأنيقة — تتماشى مع كل مكان */
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); border-radius: 999px; border: 1px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }
/* الشريط الجانبي — أنحف وأنعم */
.sidebar::-webkit-scrollbar, .nav-list::-webkit-scrollbar { width: 4px; height: 4px; }
.sidebar::-webkit-scrollbar-thumb, .nav-list::-webkit-scrollbar-thumb { background: var(--sidebar-border); border-radius: 999px; border: 1px solid transparent; background-clip: content-box; }
.sidebar::-webkit-scrollbar-thumb:hover, .nav-list::-webkit-scrollbar-thumb:hover { background: var(--muted); }
/* المودال — متناسق مع الخلفية */
.modal-box::-webkit-scrollbar { width: 5px; }
.modal-box::-webkit-scrollbar-thumb { background: var(--input-border); }
/* الجداول — أفقي نحيف */
.table-wrap::-webkit-scrollbar { height: 5px; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--input-border); }

.accent-text { color: var(--accent-span); }
.accent-green { color: var(--positive); }
.accent-amber { color: var(--amber); }
.accent-red { color: #dc2626; }
.accent-purple { color: var(--purple-text); }
.muted { color: var(--muted); }
.hidden { display: none !important; }

/* أيقونة التلميح — ذكية: لا تُقص ولا تسبب سكرول أفقي، تقلب تلقائياً */
.info-tip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%); border: 1.5px solid #a78bfa; color: white; font-size: 12px; font-weight: 900; cursor: help; flex: none; vertical-align: middle; margin-inline-start: 7px; box-shadow: 0 2px 8px rgba(124,58,237,0.35), 0 0 0 2px rgba(167,139,250,0.15); transition: transform 0.15s, box-shadow 0.15s; animation: infoPulse 2.5s infinite; }
.info-tip-icon { line-height: 1; pointer-events: none; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
@keyframes infoPulse { 0%, 100% { box-shadow: 0 2px 8px rgba(124,58,237,0.35), 0 0 0 2px rgba(167,139,250,0.15); } 50% { box-shadow: 0 2px 12px rgba(124,58,237,0.5), 0 0 0 4px rgba(167,139,250,0.2); } }
.info-tip-bubble { position: fixed; background: #1e293b; color: #f8fafc; font-size: 11px; line-height: 1.6; font-weight: 500; padding: 10px 12px; border-radius: 10px; width: 260px; max-width: min(90vw, 320px); text-align: right; box-shadow: 0 10px 25px rgba(0,0,0,0.22), 0 4px 10px rgba(0,0,0,0.15); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.15s; z-index: 9999; white-space: pre-wrap; word-break: break-word; will-change: top, left; }
.info-tip-bubble::after { content: ""; position: absolute; left: var(--arrow-left, 50%); transform: translateX(-50%); border: 6px solid transparent; }
.info-tip-bubble[data-placement="top"]::after { top: 100%; border-top-color: #1e293b; }
.info-tip-bubble[data-placement="bottom"]::after { bottom: 100%; top: auto; border-bottom-color: #1e293b; border-top-color: transparent; }
html.dark .info-tip { background: linear-gradient(135deg, #7c3aed 0%, #4c1d95 100%); border-color: #a78bfa; color: white; box-shadow: 0 2px 10px rgba(124,58,237,0.4), 0 0 0 2px rgba(167,139,250,0.2); }
html.dark .info-tip-bubble { background: #0f172a; color: #e2e8f0; border: 1px solid #334155; }
html.dark .info-tip-bubble[data-placement="top"]::after { border-top-color: #0f172a; }
html.dark .info-tip-bubble[data-placement="bottom"]::after { border-bottom-color: #0f172a; }
/* إخفاء الفقاعة الافتراضية عند عدم وجود JS — نعتمد على JS فقط لمنع القص */
.info-tip:hover .info-tip-bubble, .info-tip:focus .info-tip-bubble { /* يُدار عبر JS positionInfoTip */ }

/* ============ الشريط الجانبي ============ */
.sidebar {
    position: fixed; top: 0; bottom: 0; right: 0; width: 18rem; z-index: 40;
    display: flex; flex-direction: column; padding: 1.25rem;
    background: var(--sidebar-bg);
    border-left: 1px solid var(--sidebar-border);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    box-sizing: border-box;
}
html.dark .sidebar {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
}
.sidebar-head { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 0.75rem; }
.logo-icon {
    width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center;
    border-radius: 1rem; background: var(--logo-bg); color: var(--accent-text);
    border: 1px solid var(--logo-border); font-size: 1.25rem; flex: none;
}
.brand b { font-size: 1.125rem; line-height: 28px; }
.brand-sub { margin: 0; font-size: 0.75rem; line-height: 16px; color: var(--muted); }
.side-close {
    display: none; background: none; border: 0; color: var(--muted);
    font-size: 1.1rem; cursor: pointer; padding: 0.25rem;
}
.nav-list { margin-top: 3rem; display: flex; flex-direction: column; gap: 0.5rem; }
.nav {
    display: block; width: 100%; padding: 0.75rem 1rem; border-radius: 0.75rem;
    text-align: right; font-weight: 700; font-size: 1rem;
    color: var(--nav-text); text-decoration: none; transition: all 0.2s;
    box-sizing: border-box;
}
.nav:hover { background: var(--nav-hover); color: var(--text); }
.nav.active { background: var(--nav-active-bg); color: var(--nav-active-text); }

.tip-card {
    margin-top: auto; border-radius: 1rem; padding: 1rem;
    background: var(--tip-bg); border: var(--bdw) solid var(--tip-border);
}
.tip-icon {
    width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center;
    border-radius: 0.75rem; background: var(--tip-icon-bg); color: var(--tip-icon-text); font-size: 1rem;
}
.tip-title { display: block; margin-top: 0.75rem; font-size: 0.875rem; line-height: 20px; color: var(--tip-title); }
.tip-text { margin: 0.25rem 0 0; font-size: 0.75rem; line-height: 20px; color: var(--tip-text); }

.overlay {
    position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, 0.3);
    cursor: pointer;
}
html.dark .overlay {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}
@media (min-width: 1024px) {
    .overlay { display: none !important; }
    .sidebar { transform: none !important; }
}
@media (max-width: 1023px) {
    .sidebar { transform: translateX(100%); }
    .sidebar.open { transform: translateX(0); }
    .side-close { display: block; }
}

/* ============ التطبيق والهيدر ============ */
.app { min-height: 100vh; }
@media (min-width: 1024px) { .app { margin-right: 18rem; } }
.content { max-width: 1500px; margin: 0 auto; padding: 1.25rem; }
@media (min-width: 640px) { .content { padding: 2rem; } }

.header {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
    backdrop-filter: blur(8px);
}
@media (min-width: 640px) { .header { padding: 1rem 2rem; } }
.header-left, .header-right { display: flex; align-items: center; gap: 0.75rem; }
.menu-btn { display: none; background: none; border: 0; color: var(--muted); font-size: 1rem; cursor: pointer; padding: 0; }
@media (max-width: 1023px) { .menu-btn { display: block; } }
.search-box {
    display: none;
    border: 1px solid var(--sidebar-border); background: rgba(30, 41, 59, 0.8);
    border-radius: 0.75rem; padding: 0.5rem 0.75rem;
    font-size: 0.875rem; line-height: 20px; color: var(--muted);
}
html:not(.dark) .search-box {
    background: #ffffff;
}
@media (min-width: 768px) { .search-box { display: block; } }
.search-box input { width: 10rem; background: transparent; border: 0; outline: none; color: var(--muted); font-family: inherit; }
html.dark .search-box input { color: #e2e8f0; }
.search-box input::placeholder { color: var(--muted-2); }
.header-icon {
    width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center;
    border-radius: 0.75rem; background: var(--header-icon-bg); color: var(--muted);
    font-size: 0.9rem; cursor: pointer; transition: all 0.2s;
    box-sizing: border-box;
}
html.dark .header-icon:not(.theme-btn) { color: #cbd5e1; }
.header-icon:hover { color: var(--text); border-color: var(--accent-border); }
.user-info { display: none; }
@media (min-width: 640px) { .user-info { display: block; } }
.user-name { display: block; font-size: 0.875rem; line-height: 20px; font-weight: 700; }
.user-role { margin: 0; font-size: 0.75rem; line-height: 16px; color: var(--muted); }
.avatar {
    width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center;
    border-radius: 9999px; background: var(--header-avatar-bg); color: var(--header-avatar-text);
    border: 1px solid var(--header-avatar-border); font-size: 0.875rem; font-weight: 700; flex: none;
    box-sizing: border-box;
}

/* ============ البطاقات والشبكات ============ */
.card {
    border: 1px solid var(--card-border); border-radius: 1rem; background: var(--card-bg);
    padding: 1.25rem; box-shadow: var(--card-shadow); box-sizing: border-box;
}
.card p { margin: 1.25rem 0 0; font-size: 0.875rem; line-height: 21px; color: var(--muted); }
.card b { display: block; margin-top: 0.25rem; font-size: 1.5rem; color: var(--text); }
.card .meta { float: left; font-weight: 700; color: var(--meta); font-size: 0.8rem; }
.card .meta.up { color: var(--up); }
.card .badge { margin-left: 0.5rem; }

.grid-4 { display: grid; gap: 1rem; }
@media (min-width: 640px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }
.grid-3 { display: grid; gap: 1rem; }
@media (min-width: 640px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.grid-2 { display: grid; gap: 1.5rem; }
@media (min-width: 1280px) { .grid-2 { grid-template-columns: 1.55fr 0.85fr; } }

.badge {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 1rem; padding: 0.75rem; font-weight: bold; font-size: 1rem;
    border: var(--bdw) solid transparent; vertical-align: middle;
}
.badge-accent { background: var(--badge-accent-bg); color: var(--badge-accent-text); border-color: var(--badge-accent-border); }
.badge-green { background: var(--badge-green-bg); color: var(--badge-green-text); border-color: var(--badge-green-border); }
.badge-amber { background: var(--badge-amber-bg); color: var(--badge-amber-text); border-color: var(--badge-amber-border); }
.badge-purple { background: var(--badge-purple-bg); color: var(--badge-purple-text); border-color: var(--badge-purple-border); }

/* ============ اللوحات والرسوم البيانية ============ */
.panel {
    border: 1px solid var(--card-border); border-radius: 1rem;
    background: var(--panel-bg); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    overflow: hidden;
}
.panel--chart { background: var(--panel-chart-bg); padding: 1.5rem; overflow: visible; }
.panel-head { border-bottom: 1px solid var(--panel-head-border); padding: 1.5rem; }
.panel-head h2 { font-size: 1.125rem; line-height: 28px; margin: 0; }
.panel-head p { margin: 0.25rem 0 0; font-size: 0.875rem; line-height: 20px; color: var(--muted); }
.panel-body { padding: 1.5rem; }
.panel-soft { background: var(--panel-soft-bg); padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; overflow: visible; }
html:not(.dark) .panel-soft { justify-content: flex-start; }

.chart-title { font-size: 1.125rem; line-height: 28px; font-weight: 700; margin: 0; }
.chart-sub { margin: 0.25rem 0 0; font-size: 0.875rem; line-height: 20px; color: var(--muted); }
.chart { display: flex; align-items: flex-end; gap: 0.75rem; height: 16rem; margin-top: 2rem; border-bottom: 1px dashed var(--chart-border); }
.bar { display: block; flex: 1; border-radius: 0.75rem 0.75rem 0 0; cursor: pointer; }
html.dark .bar:hover { filter: brightness(1.15); }
.chart-labels { display: grid; grid-template-columns: repeat(6, 1fr); text-align: center; margin-top: 0.75rem; font-size: 0.75rem; line-height: 16px; color: var(--muted); }

.tip2-icon {
    width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center;
    border-radius: 1rem; background: var(--tip2-icon-bg); color: var(--tip2-icon-text);
    border: 1px solid var(--tip2-icon-border); font-size: 1.25rem; flex: none;
}
.tip-title.big { margin-top: 1.25rem; font-size: 1.125rem; line-height: 28px; color: var(--text); }
.tip-text.big { margin-top: 0.5rem; line-height: 24px; color: var(--muted); font-size: 1rem; }
.tip-text.big b { color: var(--tip-em); }
.satisfaction {
    margin-top: var(--sat-mt); display: flex; justify-content: space-between; align-items: center;
    background: var(--sat-bg); border: var(--bdw) solid var(--sat-border);
    border-radius: 0.75rem; padding: var(--sat-pad);
}
.satisfaction small { color: var(--muted); font-size: 0.8rem; }
.satisfaction b { display: block; font-size: 1.25rem; line-height: 28px; }
.grade {
    width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center;
    border-radius: 9999px; border: var(--grade-width) solid var(--grade-border);
    background: var(--grade-bg); color: var(--grade-text); font-weight: 700; flex: none;
    box-sizing: border-box;
}

/* ============ عناوين الصفحات والأزرار ============ */
.page-kicker { margin: 0 0 0.5rem; font-size: 0.875rem; line-height: 20px; color: var(--kicker); }
.page-title { margin: 0; font-size: 1.875rem; font-weight: 700; line-height: 36px; }
@media (min-width: 640px) { .page-title { font-size: 2.25rem; line-height: 40px; } }
.page-title--sm { font-size: 1.875rem; line-height: 36px; }
@media (min-width: 640px) { .page-title--sm { font-size: 1.875rem; line-height: 36px; } }
.page-sub { margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 20px; color: var(--muted); }
.page-row { display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; }
@media (min-width: 640px) { .page-row { flex-direction: row; align-items: flex-end; } }

.stack { display: flex; flex-direction: column; gap: 2rem; }
.stack6 { display: flex; flex-direction: column; gap: 1.5rem; }

.btn-primary {
    display: inline-block; border: 0; border-radius: 0.75rem;
    background: var(--btn-accent); color: var(--btn-text); font-weight: 700;
    padding: 0.75rem 1.25rem; cursor: pointer; transition: all 0.2s;
    font-family: inherit; font-size: 1rem; line-height: 24px; box-shadow: var(--btn-shadow);
}
.btn-primary:hover { background: var(--btn-hover); }
.btn-ghost {
    border: 1px solid var(--input-border); background: transparent; color: var(--muted);
    padding: 0 1rem; border-radius: 0.75rem; cursor: pointer; line-height: 24px;
    font-family: inherit; font-size: 0.95rem; transition: all 0.2s;
}
.btn-ghost:hover { background: var(--nav-hover); color: var(--text); }
.btn-edit, .btn-del {
    border-radius: 0.5rem; padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 400;
    line-height: 16px; cursor: pointer; transition: all 0.2s; font-family: inherit;
}
.btn-edit { border: 1px solid var(--edit-border); background: var(--edit-bg); color: var(--edit-text); }
.btn-edit:hover { background: var(--edit-hover); color: var(--edit-text); }
.btn-del { border: 1px solid var(--del-border); background: var(--del-bg); color: var(--del-text); margin-right: 0.5rem; }
.btn-del:hover { background: var(--del-hover); color: #fff; }

/* ============ الجداول ============ */
.table-wrap { overflow-x: auto; }
table { width: 100%; min-width: 38.75rem; text-align: right; font-size: 0.875rem; border-collapse: collapse; }
.tbl-products { min-width: 51.25rem; }
.tbl-orders { min-width: 42.5rem; }
.tbl-customers { min-width: 38.75rem; }
thead th { background: var(--table-head-bg); color: var(--muted); font-weight: 700; padding: 1rem; white-space: nowrap; border-bottom: 1px solid var(--thead-border); line-height: 20px; }
thead th:first-child { padding-right: 1.5rem; }
thead th:last-child { padding-left: 1.5rem; text-align: left; }
tbody tr { border-bottom: 1px solid var(--table-row-border); transition: background 0.2s; }
tbody tr:last-child { border-bottom: 0; }
tbody tr:hover { background: var(--row-hover); }
tbody td { padding: 0; vertical-align: middle; }
tbody td:first-child { padding: 1rem 1.5rem 1rem 1rem; }
tbody td:last-child { padding: 1rem 1rem 1rem 1.5rem; text-align: left; }

.cell-user { display: flex; align-items: center; gap: 0.75rem; }
.product-thumb { width: 2.75rem; height: 2.75rem; border-radius: 1rem; object-fit: cover; border: 1px solid var(--card-border); flex: none; }
.product-icon {
    width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center;
    border-radius: 1rem; background: var(--accent-icon-bg); color: var(--accent-icon-text);
    border: 1px solid var(--accent-icon-border); flex: none;
}
.cell-name b { display: block; line-height: 20px; color: var(--row-name); }
.cell-name p { margin: 0; max-width: 12rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.75rem; line-height: 16px; color: var(--muted); }
.row-name { color: var(--row-name); }
.cell-3 { color: var(--cell-3); }
.order-id { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.75rem; line-height: 16px; font-weight: 700; color: var(--order-id); white-space: nowrap; }
.price { font-weight: 700; white-space: nowrap; }
.stock-low { font-weight: 700; color: var(--amber); }
.stock-ok { color: var(--cell-3); }

.avatar-circle {
    width: 2.5rem; height: 2.5rem; border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 700; flex: none; box-sizing: border-box;
}
.avatar-1 { background: var(--avatar-1-bg); color: var(--avatar-1-text); border: 1px solid var(--avatar-1-border); }
.avatar-2 { background: var(--avatar-2-bg); color: var(--avatar-2-text); border: 1px solid var(--avatar-2-border); }
.avatar-3 { background: var(--avatar-3-bg); color: var(--avatar-3-text); border: 1px solid var(--avatar-3-border); }
.avatar-4 { background: var(--avatar-4-bg); color: var(--avatar-4-text); border: 1px solid var(--avatar-4-border); }

.pill {
    display: inline-block; padding: var(--pill-pad); border-radius: 9999px;
    font-size: 0.75rem; font-weight: 700; white-space: nowrap; line-height: 16px;
}
.pill-green { background: var(--success-soft); color: var(--success-text); border: var(--bdw) solid var(--success-border); }
.pill-blue { background: var(--blue-soft); color: var(--blue-text); border: var(--bdw) solid var(--blue-border); }
.pill-amber { background: var(--amber-soft); color: var(--amber-text); border: var(--bdw) solid var(--amber-border); }
.pill-red { background: #fef2f2; color: #dc2626; border: var(--bdw) solid #fecaca; }
.pill-pending { background: #fef3c7; color: #92400e; border: var(--bdw) solid #fde68a; }
.pill-ready { background: #dcfce7; color: #065f46; border: var(--bdw) solid #6ee7b7; }
.pill-done { background: #e0e7ff; color: #3730a3; border: var(--bdw) solid #c7d2fe; }
.pill-cancelled { background: #f3f4f6; color: #6b7280; border: var(--bdw) solid #e5e7eb; }
.auth-badge {
    display: inline-block; background: var(--success-soft); color: var(--success-text);
    border: var(--bdw) solid var(--success-border); border-radius: 9999px;
    padding: var(--auth-pad); font-size: 0.75rem; font-weight: 700; white-space: nowrap; line-height: 16px;
}
.no-auth { color: var(--muted-2); }

/* ============ المودال والنماذج ============ */
.modal-overlay {
    position: fixed; inset: 0; z-index: 50;
    display: flex; align-items: center; justify-content: center; padding: 1rem;
    background: var(--modal-overlay);
}
.modal-box {
    width: 100%; max-width: 36rem; max-height: 92vh; overflow-y: auto;
    border-radius: 1rem; border: 1px solid var(--modal-border);
    background: var(--modal-bg); padding: 1.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
}
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid var(--modal-head-border); padding-bottom: 1rem; }
.modal-head h2 { margin: 0; font-size: 1.25rem; line-height: 28px; color: var(--modal-title); font-weight:900; letter-spacing:-0.02em; }
.modal-head p { margin: 0.3rem 0 0; font-size: 0.84rem; line-height: 20px; color: var(--muted); font-weight:500; }
.modal-close { background: none; border: 0; color: var(--text); font-size: 1rem; cursor: pointer; }
html.dark .modal-close { color: var(--muted); }
.modal-close:hover { color: var(--text); }
.form { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.field label { display: block; margin-bottom: 0.5rem; font-weight: 800; font-size: 0.88rem; line-height: 20px; color: var(--label); letter-spacing: -0.01em; }
.input, .select, .textarea {
    width: 100%; border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text);
    border-radius: 0.75rem; padding: 0.75rem; font-family: inherit; font-size: 1rem; line-height: 24px;
    outline: none; box-sizing: border-box;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--focus); }
.textarea { height: 5rem; resize: vertical; }
.select {
    cursor: pointer;
    background-color: var(--input-bg);
    color: var(--text);
    border: 1px solid var(--input-border);
}
.select option {
    background-color: #ffffff;
    color: #2f2927;
}
html.dark .select {
    background-color: #1e293b;
    color: #f1f5f9;
    border-color: #334155;
    color-scheme: dark;
}
html.dark .select option {
    background-color: #1e293b;
    color: #f1f5f9;
}
html.dark .select:focus { border-color: var(--focus); }
/* القوائم المنسدلة العريضة — تأكد من وضوحها في الوضع الداكن */
.select { max-width: 100%; text-overflow: ellipsis; }
.select option { padding: 8px 12px; }
.grid-2sm { display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .grid-2sm { grid-template-columns: 1fr 1fr; } }
.file-input {
    width: 100%; border: 1px dashed var(--file-border); background: var(--input-bg); color: var(--muted);
    border-radius: 0.75rem; padding: 0.75rem; font-family: inherit; font-size: 0.875rem; box-sizing: border-box;
    cursor: pointer;
}
.file-input::file-selector-button {
    border: 0; border-radius: 0.5rem; background: var(--accent-soft2); color: var(--accent-deep);
    padding: 0.4rem 0.75rem; font-weight: 700; font-family: inherit; cursor: pointer; margin-left: 0.75rem;
}
.preview-img { margin-top: 0.75rem; width: 7rem; height: 7rem; border-radius: 0.75rem; object-fit: cover; border: 1px solid var(--card-border); display: block; }
.switch-row {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--input-soft-bg); border: 1px solid var(--switch-border);
    border-radius: 0.75rem; padding: 0.75rem; cursor: pointer;
}
.switch-row b { font-size: 0.875rem; }
.switch-row small { display: block; margin-top: 0.15rem; color: var(--muted); }
.switch { width: 1.25rem; height: 1.25rem; accent-color: var(--switch-accent); cursor: pointer; }
.form-actions { display: flex; gap: 0.5rem; padding-top: 0.5rem; }
.form-actions .btn-primary { flex: 1; }

/* ============ التوست ============ */
.toast-wrap { position: fixed; bottom: 1.25rem; left: 1.25rem; z-index: 60; display: flex; flex-direction: column; gap: 0.5rem; }
.toast {
    background: var(--toast-bg); color: #fff; font-weight: 700;
    padding: 0.75rem 1rem; border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
.toast-error { background: #dc2626; }
.input-mt { margin-top: 0.5rem; }

/* ============ مؤشر التحميل واختيار الحالة ============ */
.loading-block { display: flex; align-items: center; justify-content: center; min-height: 60vh; }
.loading-spinner {
    width: 2.5rem; height: 2.5rem; border-radius: 50%;
    border: 3px solid var(--muted-2, #d1d5db);
    border-top-color: var(--accent, #f472b6);
    animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.pill-select {
    display: inline-block; padding: 0.25rem 0.5rem; border-radius: 9999px;
    font-size: 0.75rem; font-weight: 700; border: var(--bdw, 1px) solid transparent;
    background: transparent; color: inherit; cursor: pointer; font-family: inherit;
}
.pill-select.pill-green { background: var(--success-soft); color: var(--success-text); border-color: var(--success-border); }
.pill-select.pill-blue { background: var(--blue-soft); color: var(--blue-text); border-color: var(--blue-border); }
.pill-select.pill-amber { background: var(--amber-soft); color: var(--amber-text); border-color: var(--amber-border); }
.pill-select.pill-red { background: #fef2f2; color: #dc2626; border-color: #fecaca; }

/* ============ تفاصيل الطلب (قابلة للتوسيع) ============ */
.btn-detail {
    display: inline-grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid var(--panel-border, #ddd);
    border-radius: 0.5rem;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 0.7rem;
}
.btn-detail:hover { background: var(--panel-head-border, #eee); }
.order-details-row td { background: var(--panel-soft-bg, transparent); }
.order-details { padding: 0.25rem 0.5rem; }
.order-details-title { margin: 0 0 0.5rem; font-size: 0.8rem; color: var(--muted); font-weight: 700; }
.order-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.4rem 0;
    border-bottom: 1px dashed var(--panel-head-border, #eee);
    font-size: 0.85rem;
    color: var(--text);
}
.order-item:last-of-type { border-bottom: none; }
.order-item small { color: var(--muted); }
.order-notes { margin: 0.5rem 0 0; font-size: 0.8rem; color: var(--amber-text); background: var(--amber-soft); border-radius: 0.5rem; padding: 0.5rem 0.75rem; }

/* ============ شريط البحث في الجداول ============ */
.table-toolbar { display: flex; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--panel-border, #eee); flex-wrap: wrap; }
.table-toolbar .input { max-width: 22rem; }
.table-toolbar .select { padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px solid var(--panel-border, #ddd); background: transparent; color: inherit; font-family: inherit; }
.chart-empty { margin-top: 0.75rem; color: var(--muted, #888); font-size: 0.85rem; text-align: center; }
.tbl-empty { text-align: center; color: var(--muted, #888); padding: 2rem 1rem !important; font-weight: 500; }
.api-error { display: flex; align-items: center; gap: 0.75rem; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; border-radius: 0.75rem; padding: 0.75rem 1rem; margin-bottom: 1rem; }
.api-error b { display: block; font-size: 0.9rem; }
.api-error p { font-size: 0.8rem; margin: 0; }
.api-error .btn-primary { margin-inline-start: auto; white-space: nowrap; }
.api-error .btn-primary:hover { background: var(--color-primary-dark, #1d4ed8); color: #fff; }

/* ============ اختيار الأيقونات والألوان ============ */
.icon-search { position: relative; display: flex; align-items: center; }
.icon-search-icon {
    position: absolute; right: 0.75rem; font-size: 1rem; pointer-events: none; opacity: 0.75;
}
.icon-search-input { padding-right: 2.4rem; }
.icon-search-clear {
    position: absolute; left: 0.5rem; width: 1.6rem; height: 1.6rem; border-radius: 50%;
    border: none; background: var(--muted-soft, rgba(120, 120, 120, 0.18)); color: var(--muted);
    cursor: pointer; font-size: 0.8rem; display: flex; align-items: center; justify-content: center;
}
.icon-search-clear:hover { background: rgba(120, 120, 120, 0.32); }
.icon-search-count { margin: 0.45rem 0 0.7rem; font-size: 0.78rem; color: var(--purple-text); font-weight: 700; background: var(--purple-soft); display:inline-block; padding:4px 10px; border-radius:999px; border:1px solid var(--card-border); }
.icon-empty {
    padding: 1.6rem 1.2rem; text-align: center; border: 1.5px dashed var(--input-border);
    border-radius: 0.9rem; color: var(--muted); font-size: 0.86rem; font-weight:600; background: var(--panel-soft-bg);
}
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.4rem, 1fr)); gap: 0.42rem; max-height: 12rem; overflow-y: auto; padding: 0.2rem; }
.icon-tile {
    display: flex; align-items: center; justify-content: center; aspect-ratio: 1;
    border-radius: 0.85rem; cursor: pointer; font-size: 1.45rem;
    border: 1px solid var(--input-border); background: linear-gradient(135deg, var(--input-bg), var(--card-bg));
    padding: 0; transition: transform 0.18s cubic-bezier(.16,1,.3,1), border-color 0.18s, box-shadow 0.18s;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}
.icon-tile:hover { border-color: #c4b5fd; transform: translateY(-3px) scale(1.03); box-shadow: 0 8px 18px rgba(122, 95, 208, 0.18); background: var(--card-bg); }
.icon-tile.selected { border: 2px solid #7a5fd0; box-shadow: 0 0 0 4px rgba(122,95,208,0.18), 0 8px 18px rgba(122,95,208,0.22); transform: scale(1.04); }
.icon-tabs { display: flex; gap: 8px; margin: 12px 0 10px; }
.icon-tab { flex:1; padding: 9px 12px; border-radius: 999px; border: 1.5px solid var(--input-border); background: var(--card-bg); font-size: 12.5px; font-weight: 800; cursor: pointer; transition: all .2s; color: var(--text); box-shadow:0 1px 4px rgba(122,95,208,0.06); }
.icon-tab:hover { border-color:#c4b5fd; background: var(--nav-hover); transform: translateY(-1px); }
.icon-tab.active { background: linear-gradient(135deg,#7a5fd0,#a78bfa); color:#fff; border-color:#7a5fd0; box-shadow: 0 8px 18px rgba(122,95,208,0.30); }
.icon-grid--3d { grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr)); max-height: 14rem; }
.icon-tile--3d { padding: 2px; background: var(--card-bg); }
.icon-tile--3d img { border-radius: 0.6rem; }
.color-swatches { display: flex; flex-wrap: wrap; gap: 0.55rem; padding: 2px; }
.color-swatch {
    width: 2.35rem; height: 2.35rem; border-radius: 9999px; cursor: pointer;
    border: 2px solid #fff; padding: 0; transition: transform 0.18s, box-shadow 0.18s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.06);
}
html.dark .color-swatch { border-color: rgba(255, 255, 255, 0.15); }
.color-swatch:hover { transform: scale(1.14); box-shadow: 0 6px 14px rgba(0,0,0,0.14); }
.color-swatch.selected { box-shadow: 0 0 0 3px #7a5fd0, 0 6px 14px rgba(122,95,208,0.22); transform: scale(1.12); border-color:#fff; }
.cat-tile {
    width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center;
    border-radius: 0.9rem; font-size: 1.5rem; flex: none;
    border: 1px solid rgba(0, 0, 0, 0.06);
}
html.dark .cat-tile { border-color: rgba(255, 255, 255, 0.12); }
.picker-preview {
    display: flex; align-items: center; gap: 0.85rem;
    background: linear-gradient(135deg, var(--card-bg), var(--panel-soft-bg)); border: 1.5px solid var(--card-border);
    border-radius: 0.9rem; padding: 0.85rem 0.9rem; box-shadow: 0 4px 14px rgba(122,95,208,0.08);
}
.picker-preview b { font-size: 0.96rem; font-weight: 800; color: var(--text); letter-spacing: -0.01em; }
.picker-preview small { display: block; margin-top: 0.18rem; color: var(--muted); font-size: 0.78rem; font-weight: 600; }
.tbl-categories { min-width: 24rem; }
.modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 640px) {
    .modal-grid { grid-template-columns: 1fr; }
}
.field-hint { display: block; margin-top: 0.4rem; font-size: 0.78rem; color: var(--muted); }

/* ============ Blazor error ui ============ */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 0.6rem 1.25rem 0.7rem;
    background: #fef2f2;
    color: #991b1b;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
}
html.dark #blazor-error-ui {
    background: #1e293b;
    color: #f87171;
}
#blazor-error-ui .reload { color: inherit; font-weight: 700; }
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ============ صفحة تسجيل الدخول (مطابقة للملف المرجعي) ============ */
.login-main {
    font-family: "Cairo", sans-serif;
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background: #0B0F19;
    color: #fff;
    box-sizing: border-box;
}
.login-grid {
    background-image:
        linear-gradient(rgba(148, 163, 184, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.035) 1px, transparent 1px);
    background-size: 42px 42px;
}

.login-blob { position: absolute; border-radius: 9999px; pointer-events: none; }
.login-blob--1 { top: -9rem; right: -8rem; width: 24rem; height: 24rem; background: rgba(162, 28, 175, 0.25); filter: blur(120px); }
.login-blob--2 { bottom: -9rem; left: -7rem; width: 28rem; height: 28rem; background: rgba(159, 18, 57, 0.25); filter: blur(135px); }
.login-blob--3 { top: 50%; left: 50%; width: 20rem; height: 20rem; transform: translate(-50%, -50%); background: rgba(107, 33, 168, 0.1); filter: blur(110px); }

.login-card {
    position: relative;
    width: 100%;
    max-width: 28rem;
    background: rgba(15, 23, 42, 0.64);
    border: 1px solid rgba(148, 163, 184, 0.16);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: 1.5rem;
    padding: 1.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
}
@media (min-width: 640px) { .login-card { padding: 2.25rem; } }

.login-head { text-align: center; margin-bottom: 0.5rem; }
.login-logo-wrap { position: relative; display: flex; align-items: center; justify-content: center; }
.login-logo-glow {
    position: absolute;
    width: 16rem;
    height: 16rem;
    background: rgba(244, 63, 94, 0.3);
    border-radius: 9999px;
    filter: blur(64px);
    pointer-events: none;
}
.login-logo {
    position: relative;
    height: 16rem;
    width: auto;
    max-width: 440px;
    object-fit: contain;
    filter: brightness(2) contrast(1.5) drop-shadow(0 0 22px rgba(236, 72, 153, 0.75));
    transition: transform 0.3s;
}
.login-logo:hover { transform: scale(1.05); }

.login-title { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: 0.025em; }
.login-sub { margin: 0.25rem 0 0; font-size: 0.875rem; color: #94a3b8; }

.login-form { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 1.25rem; }

.login-label { display: block; margin-bottom: 0.5rem; font-size: 0.875rem; font-weight: 500; color: #e2e8f0; }

.login-input-wrap { position: relative; }
.login-input-icon {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding-right: 1rem;
    color: #94a3b8;
    pointer-events: none;
}
.login-input {
    width: 100%;
    border: 1px solid rgba(51, 65, 85, 0.8);
    background: rgba(2, 6, 23, 0.45);
    border-radius: 0.75rem;
    padding: 0.875rem 2.75rem 0.875rem 1rem;
    font-size: 0.875rem;
    color: #fff;
    outline: none;
    transition: all 0.15s;
    font-family: inherit;
    box-sizing: border-box;
}
.login-input::placeholder { color: #64748b; }
.login-input:focus { border-color: #f43f5e; box-shadow: 0 0 0 4px rgba(244, 63, 94, 0.2); }
.login-input--pw { padding-left: 3rem; }

.login-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    color: #94a3b8;
    background: none;
    border: 0;
    cursor: pointer;
    transition: color 0.15s;
    font-size: 1rem;
}
.login-toggle:hover { color: #fda4af; }
.login-toggle:focus { outline: none; }

.login-remember { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.875rem; }
.login-remember-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; color: #cbd5e1; }
.login-checkbox {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    appearance: none;
    border-radius: 0.25rem;
    border: 1px solid #475569;
    background: #0f172a;
    accent-color: #e11d48;
    margin: 0;
}
.login-checkbox:checked { border-color: #e11d48; background: #e11d48; }
.login-checkbox:focus { box-shadow: 0 0 0 2px rgba(244, 63, 94, 0.4); }
.login-forgot { font-weight: 500; color: #fda4af; text-decoration: none; transition: all 0.15s; background: none; border: 0; padding: 0; font-family: inherit; font-size: inherit; cursor: pointer; }
.login-forgot:hover { color: #fecdd3; text-decoration: underline; }

.login-submit {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 0;
    border-radius: 0.75rem;
    background: linear-gradient(to left, #9D174D, #BE185D, #7e22ce);
    padding: 0.875rem 1.25rem;
    font-weight: 700;
    font-family: inherit;
    font-size: 1rem;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 15px 45px rgba(190, 24, 93, 0.38);
    transition: transform 0.3s, box-shadow 0.3s;
}
.login-submit:hover { transform: translateY(-2px); box-shadow: 0 18px 55px rgba(190, 24, 93, 0.58); }
.login-submit:focus { outline: none; box-shadow: 0 0 0 4px rgba(244, 63, 94, 0.3); }
.login-submit:active { transform: translateY(0); }
.login-arrow { font-size: 0.875rem; transition: transform 0.3s; }
.login-submit:hover .login-arrow { transform: translateX(-0.25rem); }

.login-footer { margin-top: 2rem; border-top: 1px solid rgba(51, 65, 85, 0.5); padding-top: 1.25rem; text-align: center; }
.login-footer-text { margin: 0; font-size: 0.75rem; line-height: 1.5rem; color: #64748b; }
.login-shield { margin-left: 0.25rem; color: rgba(251, 113, 133, 0.8); }
.btn-whatsapp {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.45rem 0.8rem; border-radius: 0.6rem;
    background: rgba(37, 211, 102, 0.12); color: #25d366;
    border: 1px solid rgba(37, 211, 102, 0.35);
    font-size: 0.75rem; font-weight: 700; text-decoration: none; white-space: nowrap;
    transition: all 0.15s;
}
.btn-whatsapp:hover { background: rgba(37, 211, 102, 0.22); }

.file-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }

.tbl-slides { min-width: 40rem; }
.slide-thumb {
    display: inline-block; width: 160px; height: 64px; object-fit: cover;
    border-radius: 0.6rem; border: 1px solid var(--line, #333);
}
.slide-thumb-empty {
    display: inline-flex; align-items: center; justify-content: center;
    width: 160px; height: 64px; background: var(--panel-soft-bg, #222);
    color: var(--muted, #888); font-size: 0.75rem;
}
.preview-img--banner { max-height: 140px; }
.slide-link {
    display: inline-block; max-width: 16rem; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; vertical-align: bottom; font-size: 0.78rem; color: var(--accent-deep, #7c3aed);
}
.pill-link {
    display: inline-block; margin-right: 0.4rem; padding: 0.15rem 0.55rem; border-radius: 9999px;
    background: var(--accent-soft2, #f3e8ff); color: var(--accent-deep, #6d28d9);
    border: 1px solid var(--card-border, #e9d5ff); font-size: 0.7rem; font-weight: 700; white-space: nowrap;
}

.order-address {
    display: flex; flex-direction: column; gap: 0.35rem;
    padding: 0.75rem 0.9rem; border: 1px solid var(--line, #333);
    border-radius: 0.6rem; background: var(--panel-soft-bg, #1c1c24);
    font-size: 0.8rem; margin-top: 0.5rem;
}

.customer-order {
    padding: 0.85rem 0; border-top: 1px dashed var(--line, #333);
}
.customer-order:first-of-type { border-top: 0; padding-top: 0.4rem; }
.customer-order-head {
    display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.customer-order-head .pill-select { pointer-events: none; }
.customer-order-foot {
    display: flex; justify-content: space-between; gap: 0.75rem;
    margin-top: 0.6rem; font-size: 0.8rem;
}
.customer-order-foot b { color: var(--accent, #e0c3ff); }

/* ============ آراء الزبائن ============ */
.tbl-testimonials { min-width: 46rem; }
.stars {
    color: var(--amber-text, #fbbf24); letter-spacing: 2px;
    direction: ltr; font-size: 0.95rem; white-space: nowrap;
}
.cell-comment {
    max-width: 26rem; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; color: var(--muted, #888);
}
@media (max-width: 640px) { .cell-comment { white-space: normal; } }
.btn-proof-thumb {
    display: inline-block; padding: 0; border: none; background: none;
    cursor: pointer; border-radius: 0.5rem; overflow: hidden;
    border: 1px solid var(--line, #333);
}
.btn-proof-thumb img {
    display: block; width: 84px; height: 56px; object-fit: cover;
    transition: transform 0.15s ease;
}
.btn-proof-thumb:hover img { transform: scale(1.06); }
.proof-preview {
    display: block; max-width: 260px; max-height: 180px; object-fit: contain;
    border-radius: 0.6rem; border: 1px solid var(--line, #333);
}
.preview-box { max-width: min(90vw, 880px); width: 100%; }
.preview-full {
    display: block; width: 100%; max-height: 70vh; object-fit: contain;
    border-radius: 0.5rem;
}
.btn-spinner {
    display: inline-block; width: 15px; height: 15px;
    border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff;
    border-radius: 50%; animation: dash-spin 0.7s linear infinite;
    vertical-align: middle; margin-left: 6px;
}
@keyframes dash-spin { to { transform: rotate(360deg); } }
.btn-primary:disabled, .btn-ghost:disabled { opacity: 0.55; cursor: not-allowed; }

/* =========================================================
   إصلاحات الوضع الداكن الشاملة — الحوارات والكروت والقوائم المنسدلة
   ========================================================= */

/* --- api-error كانت حمراء فاتحة بدون دارك --- */
html.dark .api-error { background: rgba(69,10,10,0.3); border-color: rgba(127,29,29,0.6); color: #f87171; }
html.dark .api-error p { color: #fca5a5; }

/* --- Select / Dropdown قوائم منسدلة --- */
html.dark .table-toolbar .select { background: var(--input-bg); border-color: var(--card-border); color: var(--text); }
html.dark .select { background: var(--input-bg); border-color: var(--input-border); color: var(--text); }
html.dark .select option { background: #1e293b; color: #f1f5f9; }
html.dark .pill-select { border-color: transparent; }

/* --- Modal overlay already uses var but ensure text readable --- */
html.dark .modal-box { background: var(--modal-bg); border-color: var(--modal-border); }
html.dark .modal-head { border-bottom-color: var(--modal-head-border); }

/* --- WhatsappOrders مودال inline (background:#fff) تجاوز قوي --- */
html.dark div[style*="background:#fff"],
html.dark div[style*="background: #fff"] {
  background: var(--modal-bg) !important;
  border-color: var(--modal-border) !important;
  color: var(--text) !important;
}
html.dark div[style*="background:#f8fafc"] { background: var(--panel-soft-bg) !important; border-color: var(--card-border) !important; }
html.dark label[style*="background:#fff"],
html.dark label[style*="background: #fff"],
html.dark label[style*="background:#f5f3ff"] {
  background: var(--panel-bg) !important;
  border-color: var(--card-border) !important;
  color: var(--text) !important;
}
html.dark label[style*="#f5f3ff"] { background: rgba(80, 7, 36, 0.4) !important; border-color: var(--accent-border) !important; }
html.dark label[style*="#fef3c7"] { background: rgba(69, 26, 3, 0.5) !important; border-color: rgba(146,64,14,0.3) !important; }
html.dark label[style*="#f0fdf4"] { background: rgba(6,78,59,0.4) !important; border-color: rgba(6,95,70,0.3) !important; }

/* --- OTO shipment panel --- */
html.dark .oto-shipment-panel { background: rgba(6,78,59,0.3) !important; border-color: rgba(6,95,70,0.4) !important; }
html.dark .oto-shipment-panel h4 { color: #6ee7b7 !important; }
html.dark div[style*="background:white"],
html.dark div[style*="background: white"] { background: var(--panel-bg) !important; border-color: var(--card-border) !important; }
html.dark pre[style*="background:white"],
html.dark pre[style*="background: white"],
html.dark pre[style*="background:#fff"] { background: #0f172a !important; color: #e2e8f0 !important; border: 1px solid #334155 !important; }
html.dark span[style*="background:white"],
html.dark span[style*="background: white"] { background: var(--card-bg) !important; color: var(--text) !important; border-color: var(--card-border) !important; }
html.dark a[style*="background:white"],
html.dark a[style*="background: white"] { background: var(--card-bg) !important; color: var(--text) !important; border-color: var(--card-border) !important; }
html.dark a[style*="background:#065f46"] { color: #fff !important; }
html.dark label img[style*="background"] { background: var(--card-bg) !important; border-color: var(--card-border) !important; }

/* --- Order details expand --- */
html.dark .order-details-row td { background: var(--panel-soft-bg) !important; }
html.dark .order-item { border-bottom-color: var(--panel-head-border) !important; color: var(--text) !important; }
html.dark .order-address { background: var(--panel-soft-bg) !important; border-color: var(--card-border) !important; }

/* --- Generic fix for any remaining white cards --- */
html.dark .panel { background: var(--panel-bg); border-color: var(--card-border); }
html.dark .card { background: var(--card-bg); border-color: var(--card-border); }

/* --- تغطية إضافية للشارات الفاتحة (#f3f4f6, #f1f5f9, #e5e7eb...) --- */
html.dark [style*="#f3f4f6"] { background: #1e293b !important; color: #e2e8f0 !important; border-color: #334155 !important; }
html.dark [style*="#f8fafc"] { background: var(--panel-soft-bg) !important; border-color: var(--card-border) !important; color: var(--text) !important; }
html.dark [style*="#dcfce7"] { background: rgba(6,78,59,0.5) !important; color: #6ee7b7 !important; border-color: rgba(6,95,70,0.4) !important; }
html.dark [style*="#ecfdf5"] { background: rgba(6,78,59,0.4) !important; color: #6ee7b7 !important; border-color: rgba(6,95,70,0.4) !important; }
html.dark [style*="#d1fae5"] { border-color: rgba(6,95,70,0.4) !important; }

/* --- Ensure dropdown options visible --- */
html.dark select option { background: #1e293b; color: #f1f5f9; }

/* ============ مراحل الشحن (Order Steps) للداشبورد ============ */
.order-steps { display: flex; align-items: flex-start; margin-top: 10px; gap: 0; }
.order-step { flex: 1; text-align: center; position: relative; }
.order-step:not(:last-child)::after {
    content: ""; position: absolute; top: 15px; inset-inline-start: 50%;
    width: 100%; height: 2px; background: #e5e7eb;
}
.order-step.done:not(:last-child)::after { background: var(--btn-accent); }
.order-step-dot {
    position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%; font-size: 13px; font-weight: 700;
    background: #f3f4f6; color: #9ca3af; border: 2px solid #e5e7eb;
}
.order-step.done .order-step-dot { background: var(--btn-accent); border-color: var(--btn-accent); color: #fff; }
.order-step.current .order-step-dot { background: var(--btn-accent); border-color: var(--btn-accent); color: #fff; box-shadow: 0 0 0 4px rgba(220,39,119,0.18); }
.order-step.cancelled .order-step-dot { background: #fef2f2; border-color: #fecaca; color: #ef4444; }
.order-step.cancelled:not(:last-child)::after { background: #fecaca; }
.order-step span { display: block; margin-top: 8px; font-size: 11px; font-weight: 600; color: var(--muted); }
.order-step.done span { color: var(--text); }
.order-step.current span { color: var(--btn-accent); font-weight: 800; }
.order-step.cancelled span { color: #ef4444; }
.added-note{margin-top:10px;font-size:13px;color:#065f46;font-weight:700;text-align:center}.added-note.error{color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;border-radius:10px;padding:10px 12px}html.dark .added-note.error{color:#fca5a5;background:rgba(127,29,29,.35);border-color:rgba(239,68,68,.5)}
.ship-rate{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px;border-radius:10px;cursor:pointer;border:1.5px solid var(--card-border,#e5e7eb);background:var(--card-bg,#fff);transition:all .15s}.ship-rate.selected{border-color:#7c3aed;background:rgba(124,58,237,.07)}.ship-rate .ship-main{display:flex;align-items:center;gap:8px;min-width:0}.ship-rate .ship-logo{width:28px;height:28px;object-fit:contain;border-radius:6px;background:#fff;border:1px solid #f1f5f9;flex-shrink:0}.ship-rate .ship-name{font-size:12px;font-weight:800;color:var(--text,#0f172a)}.ship-rate .ship-sub{font-size:11px;color:var(--muted,#6b7280)}.ship-rate .ship-meta{font-size:11px;color:var(--muted,#6b7280)}.ship-rate .ship-price{color:#065f46;background:#d1fae5;padding:4px 8px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap}.ship-pickup-ok{font-size:11px;font-weight:700;color:#065f46}.ship-door{font-size:11px;font-weight:700;color:#1d4ed8}.ship-branch{font-size:11px;font-weight:700;color:#7c3aed}.ship-rates{border:0;padding:0;margin:0}.ship-rates>summary{cursor:pointer;font-size:12px;font-weight:800;color:var(--text,#0f172a);padding:4px 2px;list-style:none;display:flex;align-items:center;gap:6px;flex-wrap:wrap}.ship-rates>summary::-webkit-details-marker{display:none}.ship-rates>summary::before{content:'?';color:#7c3aed}.ship-rates:not([open])>summary::before{content:'?'}html.dark .ship-rate{background:#0f172a;border-color:#334155}html.dark .ship-rate.selected{background:rgba(124,58,237,.16);border-color:#a78bfa}html.dark .ship-rate .ship-name{color:#f1f5f9}html.dark .ship-rate .ship-price{background:#14301f;color:#4cd787}html.dark .ship-pickup-ok{color:#4cd787}html.dark .ship-door{color:#8fb3ff}html.dark .ship-branch{color:#c4b5fd}
.ship-rate .ship-price{margin-inline-start:auto;flex-shrink:0}
.ship-rate{align-items:flex-start}.ship-rate .ship-price{margin-top:2px}
.ship-card{display:flex;align-items:flex-start;gap:8px;padding:10px;border-radius:10px;cursor:pointer;border:1.5px solid #e5e7eb;background:#ffffff;transition:border-color .15s,box-shadow .15s}.ship-card.selected{border-color:#7c3aed;background:#f5f3ff;box-shadow:0 2px 10px rgba(124,58,237,.15)}.ship-card input[type=radio]{margin:4px 0 0;flex-shrink:0}.ship-card .ship-logo{width:32px;height:32px;object-fit:contain;border-radius:8px;background:#ffffff;border:1px solid #f1f5f9;flex-shrink:0}.ship-card .ship-body{flex:1;min-width:0}.ship-card .ship-top{display:flex;align-items:center;gap:8px}.ship-card .ship-name{flex:1;min-width:0;color:#0f172a;font-size:13px;font-weight:800}.ship-card .ship-opt{font-weight:400;font-size:11px;color:#6b7280}.ship-card .ship-price{margin-inline-start:auto;flex-shrink:0;color:#065f46;background:#d1fae5;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap}.ship-card .ship-meta{display:block;color:#6b7280;font-size:11px;margin-top:2px}.ship-card .ship-badges{display:block;margin-top:3px}.ship-rates>summary::before{content:'+';color:#7c3aed;font-size:12px;font-weight:800}.ship-rates[open]>summary::before{content:'-';color:#7c3aed;font-size:12px;font-weight:800}html.dark .ship-card{background:#0f172a;border-color:#334155}html.dark .ship-card.selected{background:rgba(124,58,237,.16);border-color:#a78bfa}html.dark .ship-card .ship-name{color:#f1f5f9}html.dark .ship-card .ship-opt,html.dark .ship-card .ship-meta{color:#94a3b8}html.dark .ship-card .ship-price{background:#14301f;color:#4cd787}
.ship-card{text-align:start}.ship-card .ship-top .ship-logo{width:28px;height:28px}
label.ship-card{display:flex;align-items:flex-start;gap:8px;padding:10px;border-radius:10px;cursor:pointer;border:1.5px solid #e5e7eb;background:#ffffff;margin:0;font-weight:400;font-size:inherit}label.ship-card.selected{border-color:#7c3aed;background:#f5f3ff;box-shadow:0 2px 10px rgba(124,58,237,.15)}html.dark label.ship-card{background:#0f172a;border-color:#334155}html.dark label.ship-card.selected{background:rgba(124,58,237,.16);border-color:#a78bfa}
.cf-modal{background:#ffffff;color:#0f172a}.cf-head{background:#ffffff;border-bottom:1px solid #f1f5f9}.cf-headgrad{background:linear-gradient(135deg,#f8fafc 0%,#ffffff 100%);border-bottom:1px solid #e5e7eb}.cf-headgreen{background:linear-gradient(135deg,#f0fdf4 0%,#ffffff 100%);border-bottom:1px solid #e5e7eb}.cf-body{background:#fafafa}.cf-foot{background:#ffffff;border-top:1px solid #f1f5f9}.cf-card{background:#f8fafc;border:1px solid #e5e7eb;border-radius:10px;padding:12px}.cf-cardw{background:#ffffff;border:1px solid #e5e7eb;border-radius:10px;padding:12px}.cf-title{margin:0 0 8px;font-size:13px;color:#334155;font-weight:800}.cf-lab{font-size:12px;color:#334155}.cf-muted{color:#6b7280}.cf-small{font-size:11px;color:#6b7280}.cf-total{background:#f8fafc;border:1px solid #e5e7eb;border-radius:10px;padding:10px}.cf-note-ok{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;padding:8px;font-size:13px;color:#065f46}.cf-detail{background:#ffffff;border:1px solid #e5e7eb;border-radius:8px;padding:8px 10px}.cf-detail summary{cursor:pointer;font-weight:700;font-size:12px;color:#334155}.cf-code{background:#f1f5f9;padding:2px 6px;border-radius:6px;font-size:11px;border:1px solid #e5e7eb;font-family:monospace}.cf-btn{background:#ffffff;border:1px solid #e5e7eb;border-radius:8px}.cf-inputrow{background:#ffffff;border:1px solid #e5e7eb;border-radius:10px;padding:12px}html.dark .cf-modal{background:#0f172a;color:#e2e8f0}html.dark .cf-head{background:#0f172a;border-color:#334155}html.dark .cf-headgrad{background:linear-gradient(135deg,#111c30 0%,#0f172a 100%);border-color:#334155}html.dark .cf-headgreen{background:linear-gradient(135deg,#052e22 0%,#0f172a 100%);border-color:#334155}html.dark .cf-body{background:#0b1220}html.dark .cf-foot{background:#0f172a;border-color:#334155}html.dark .cf-card{background:#111c30;border-color:#334155}html.dark .cf-cardw{background:#0f172a;border-color:#334155}html.dark .cf-title{color:#f1f5f9}html.dark .cf-lab{color:#e2e8f0}html.dark .cf-muted{color:#94a3b8}html.dark .cf-small{color:#94a3b8}html.dark .cf-total{background:#111c30;border-color:#334155}html.dark .cf-note-ok{background:rgba(6,78,59,.4);border-color:rgba(6,95,70,.6);color:#6ee7b7}html.dark .cf-detail{background:#0f172a;border-color:#334155}html.dark .cf-detail summary{color:#e2e8f0}html.dark .cf-code{background:#1e293b;border-color:#334155;color:#e2e8f0}html.dark .cf-btn{background:#1e293b;border-color:#334155;color:#e2e8f0}.added-note.error{color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;border-radius:10px;padding:10px 12px;font-size:12px}html.dark .added-note.error{color:#fca5a5;background:rgba(127,29,29,.35);border-color:rgba(239,68,68,.5)}
.cf-lab{font-size:12px;color:#334155}html.dark .cf-lab{color:#e2e8f0}
.cf-pay{border:1.5px solid #e5e7eb;background:#fff;padding:10px 12px;border-radius:12px;display:flex;align-items:flex-start;gap:10px;cursor:pointer}.cf-pay.selected{border-color:#7c3aed;background:rgba(124,58,237,.05)}.cf-pay b{font-size:13px}.cf-pay small{display:block;margin-top:2px;color:#6b7280}html.dark .cf-pay{background:#0f172a;border-color:#334155}html.dark .cf-pay.selected{border-color:#a78bfa;background:rgba(167,139,250,.08)}html.dark .cf-pay small{color:#94a3b8}
.cf-customer-pick{font-size:12px;color:#57534e}html.dark .cf-customer-pick{color:#a8a29e}
.cf-pick-badge{display:inline-block;font-size:10px;font-weight:800;padding:2px 8px;border-radius:999px;border:1px solid #d6d3d1;color:#57534e;margin-inline-start:6px;white-space:nowrap}html.dark .cf-pick-badge{border-color:#44403c;color:#a8a29e}
.cf-selected-note{font-size:13px;font-weight:700}html.dark .cf-selected-note{color:#e7e5e4}
.nav{position:relative;display:flex;align-items:center;gap:8px}.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;font-size:11px;font-weight:800;line-height:1}.nav-badge--warn{background:#fef3c7;color:#92400e;border:1px solid #fde68a}html.dark .nav-badge--warn{background:rgba(251,191,36,.18);color:#fcd34d;border-color:rgba(251,191,36,.35)}
.cs-purchase-net{display:flex;justify-content:space-between;align-items:center;background:#f5f3ff;border:1px solid #ddd6fe;border-radius:10px;padding:10px}.cs-purchase-net b{font-size:16px;color:#7c3aed}html.dark .cs-purchase-net{background:#1e1b3a;border-color:#4c1d95}html.dark .cs-purchase-net b{color:#c4b5fd}