/* ════════════════════════════════════════════════════════════════════════════
BILLING — أنماط CSS لنظام الفواتير (الأدمن)
────────────────────────────────────────────────────────────────────────────
⚠️ ملف مستقل قابل للإزالة بالكامل (احذف من index.html).
⚠️ كل القواعد هنا مسمَّاة بـ namespace خاص (.bil-* أو [data-billing-*])
حتى لا تتعارض مع أي قاعدة موجودة في main.css.
⚠️ هذا الملف يُحمَّل بعد main.css دائماً (آخر link في )
ليفوز عند التعادل، ولكن لا يُغيِّر أي شيء بصرياً ما لم يُستخدم class
من هذا الملف فعلياً في DOM (وحالياً مع featureEnabled=false،
لا يوجد عنصر يستخدمها).
التنظيم:
§1 متغيرات النظام (CSS Variables)
§2 مكونات قوائم الفواتير
§3 مكونات تفاصيل الفاتورة
§4 مكونات المودالات
§5 مكونات الـ badges والشارات
§6 مكونات الدفع
§7 Responsive
════════════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════════════
§1 متغيرات النظام
════════════════════════════════════════════════════════════════════════════ */
:root {
/* لون الميزة الرئيسي (أخضر زمردي) */
--bil-primary: #10b981;
--bil-primary-dark: #059669;
--bil-primary-light: #6ee7b7;
--bil-primary-glow: rgba(16, 185, 129, 0.4);
--bil-primary-bg: rgba(16, 185, 129, 0.08);
--bil-primary-border: rgba(16, 185, 129, 0.28);
/* ألوان حالات الفاتورة (مطابقة لـ INVOICE_STATUS_COLORS في config) */
--bil-status-draft: #94a3b8;
--bil-status-sent: #0ea5e9;
--bil-status-paid: #22c55e;
--bil-status-failed: #ef4444;
--bil-status-refunded: #a78bfa;
--bil-status-cancelled: #64748b;
/* قياسات */
--bil-card-radius: 14px;
--bil-badge-radius: 999px;
--bil-row-gap: 10px;
}
/* ════════════════════════════════════════════════════════════════════════════
§2 قوائم الفواتير
════════════════════════════════════════════════════════════════════════════ */
.bil-list-wrap {
display: flex;
flex-direction: column;
gap: var(--bil-row-gap);
}
.bil-invoice-row {
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.bil-invoice-row:hover {
transform: translateY(-1px);
border-color: var(--bil-primary-border);
box-shadow: 0 4px 14px rgba(16, 185, 129, 0.12);
}
.bil-invoice-row[data-invoice-status="paid"] {
border-right: 3px solid var(--bil-status-paid);
}
.bil-invoice-row[data-invoice-status="failed"] {
border-right: 3px solid var(--bil-status-failed);
}
.bil-invoice-row[data-invoice-status="cancelled"] {
opacity: 0.65;
}
/* ════════════════════════════════════════════════════════════════════════════
§3 تفاصيل الفاتورة
════════════════════════════════════════════════════════════════════════════ */
.bil-detail-wrap {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
.bil-detail-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: 14px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
}
.bil-detail-number {
font-size: 1.4rem;
font-weight: 700;
color: var(--bil-primary);
letter-spacing: 0.5px;
}
.bil-detail-total {
font-size: 1.8rem;
font-weight: 700;
color: var(--bil-primary);
}
.bil-items-table {
width: 100%;
border-collapse: collapse;
font-size: 0.92rem;
}
.bil-items-table th,
.bil-items-table td {
padding: 10px 12px;
text-align: right;
border-bottom: 1px solid var(--border, rgba(0,0,0,0.06));
}
.bil-items-table th {
font-weight: 600;
color: var(--muted);
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.bil-items-table tr:last-child td {
border-bottom: none;
}
.bil-totals-grid {
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 18px;
padding: 14px;
background: rgba(0, 0, 0, 0.02);
border-radius: 10px;
font-size: 0.92rem;
}
.bil-totals-grid .bil-totals-label {
color: var(--muted);
}
.bil-totals-grid .bil-totals-value {
font-weight: 600;
text-align: left;
}
.bil-totals-grid .bil-totals-final {
color: var(--bil-primary);
font-size: 1.1rem;
font-weight: 700;
border-top: 1px solid var(--border, rgba(0,0,0,0.08));
padding-top: 8px;
margin-top: 4px;
}
/* ════════════════════════════════════════════════════════════════════════════
§4 المودالات
════════════════════════════════════════════════════════════════════════════ */
.bil-modal-section {
margin-bottom: 18px;
}
.bil-modal-section h6 {
font-weight: 600;
margin-bottom: 8px;
color: var(--bil-primary);
font-size: 0.92rem;
}
.bil-item-row {
display: grid;
grid-template-columns: 2fr 80px 100px 100px 32px;
gap: 6px;
align-items: center;
padding: 6px 0;
}
.bil-item-row + .bil-item-row {
border-top: 1px dashed var(--border, rgba(0,0,0,0.06));
}
.bil-item-add-btn {
width: 100%;
margin-top: 10px;
padding: 8px;
border: 1px dashed var(--bil-primary-border);
background: transparent;
color: var(--bil-primary);
border-radius: 8px;
cursor: pointer;
font-weight: 600;
transition: background 0.18s;
}
.bil-item-add-btn:hover {
background: var(--bil-primary-bg);
}
.bil-student-search-results {
max-height: 240px;
overflow-y: auto;
border: 1px solid var(--border, rgba(0,0,0,0.08));
border-radius: 8px;
margin-top: 6px;
}
.bil-student-result-item {
padding: 10px 12px;
cursor: pointer;
display: flex;
flex-direction: column;
gap: 2px;
transition: background 0.15s;
}
.bil-student-result-item:hover {
background: var(--bil-primary-bg);
}
.bil-student-result-item + .bil-student-result-item {
border-top: 1px solid var(--border, rgba(0,0,0,0.05));
}
/* ════════════════════════════════════════════════════════════════════════════
§5 Badges
════════════════════════════════════════════════════════════════════════════ */
.bil-badge {
display: inline-block;
padding: 3px 10px;
border-radius: var(--bil-badge-radius);
font-size: 0.75rem;
font-weight: 700;
white-space: nowrap;
}
.bil-badge--draft { background: rgba(148,163,184,0.15); color: var(--bil-status-draft); border: 1px solid rgba(148,163,184,0.35); }
.bil-badge--sent { background: rgba(14,165,233,0.15); color: var(--bil-status-sent); border: 1px solid rgba(14,165,233,0.35); }
.bil-badge--paid { background: rgba(34,197,94,0.15); color: var(--bil-status-paid); border: 1px solid rgba(34,197,94,0.35); }
.bil-badge--failed { background: rgba(239,68,68,0.15); color: var(--bil-status-failed); border: 1px solid rgba(239,68,68,0.35); }
.bil-badge--refunded { background: rgba(167,139,250,0.15); color: var(--bil-status-refunded); border: 1px solid rgba(167,139,250,0.35); }
.bil-badge--cancelled { background: rgba(100,116,139,0.15); color: var(--bil-status-cancelled); border: 1px solid rgba(100,116,139,0.35); }
/* ════════════════════════════════════════════════════════════════════════════
§6 Payments — مكونات سجل الدفع
════════════════════════════════════════════════════════════════════════════ */
.bil-payment-attempt {
padding: 12px;
border-radius: 10px;
border: 1px solid var(--border, rgba(0,0,0,0.08));
margin-bottom: 8px;
font-size: 0.88rem;
}
.bil-payment-attempt[data-status="paid"] { border-color: rgba(34,197,94,0.35); background: rgba(34,197,94,0.04); }
.bil-payment-attempt[data-status="failed"] { border-color: rgba(239,68,68,0.35); background: rgba(239,68,68,0.04); }
.bil-payment-method-icon {
width: 36px;
height: 36px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
background: rgba(0,0,0,0.05);
}
/* ════════════════════════════════════════════════════════════════════════════
§7 Responsive
════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
.bil-item-row {
grid-template-columns: 1fr 60px 80px 80px 28px;
gap: 4px;
font-size: 0.85rem;
}
.bil-items-table th,
.bil-items-table td {
padding: 8px 6px;
font-size: 0.85rem;
}
.bil-detail-total {
font-size: 1.4rem;
}
}
/* ════════════════════════════════════════════════════════════════════════════
§8 صفحة الفواتير v2 — Header / Stats / Filters / Table / Skeleton / Empty
════════════════════════════════════════════════════════════════════════════ */
/* ─── Header ─────────────────────────────────────────────────────────────── */
.bil-page-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}
.bil-page-head-text {
flex: 1;
min-width: 240px;
}
.bil-page-title {
display: flex;
align-items: center;
gap: 10px;
font-size: 1.4rem;
font-weight: 800;
margin: 0 0 6px 0;
line-height: 1.3;
}
.bil-page-icon {
background: linear-gradient(135deg, #3b82f6 30%, #fbbf24 90%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 1.3em;
filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.3));
}
.bil-page-desc {
color: var(--muted);
font-size: 0.88rem;
line-height: 1.6;
margin: 0;
max-width: 640px;
}
.bil-page-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
/* ─── Stats Grid (7 كروت) ─────────────────────────────────────────────────── */
.bil-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
margin-bottom: 20px;
}
.bil-stat-card {
display: flex;
align-items: center;
gap: 12px;
padding: 14px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
border: 1px solid rgba(148, 163, 184, 0.12);
border-radius: var(--bil-card-radius);
backdrop-filter: blur(6px);
transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.bil-stat-card:hover {
transform: translateY(-2px);
border-color: rgba(148, 163, 184, 0.25);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
.bil-stat-icon {
flex: 0 0 auto;
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
}
.bil-stat-body {
flex: 1;
min-width: 0;
}
.bil-stat-label {
font-size: 0.74rem;
color: var(--muted);
margin-bottom: 4px;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bil-stat-value {
font-size: 1.05rem;
font-weight: 700;
line-height: 1.3;
word-break: break-word;
}
/* ─── Filters Bar ─────────────────────────────────────────────────────────── */
.bil-filters-bar {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px;
margin-bottom: 16px;
padding: 12px;
background: rgba(15, 23, 42, 0.25);
border: 1px solid rgba(148, 163, 184, 0.12);
border-radius: var(--bil-card-radius);
}
.bil-filter-group {
position: relative;
}
.bil-filter-icon {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: var(--muted);
font-size: 0.85rem;
pointer-events: none;
}
.bil-filter-input,
.bil-filter-select {
width: 100%;
padding: 9px 32px 9px 10px;
background: rgba(15, 23, 42, 0.6);
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 8px;
color: inherit;
font-size: 0.85rem;
font-family: inherit;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.bil-filter-select {
padding-right: 10px;
cursor: pointer;
}
.bil-filter-input:focus,
.bil-filter-select:focus {
outline: none;
border-color: rgba(59, 130, 246, 0.6);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.bil-filter-input::placeholder {
color: var(--muted);
opacity: 0.7;
}
/* ─── Table ───────────────────────────────────────────────────────────────── */
.bil-table-wrap {
background: rgba(15, 23, 42, 0.18);
border: 1px solid rgba(148, 163, 184, 0.12);
border-radius: var(--bil-card-radius);
overflow: hidden;
}
.bil-table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.bil-table {
width: 100%;
border-collapse: collapse;
font-size: 0.82rem;
min-width: 1100px;
}
.bil-table thead th {
position: sticky;
top: 0;
background: rgba(15, 23, 42, 0.95);
backdrop-filter: blur(8px);
padding: 12px 10px;
text-align: right;
font-weight: 700;
font-size: 0.78rem;
color: var(--muted);
border-bottom: 1px solid rgba(148, 163, 184, 0.18);
white-space: nowrap;
}
.bil-table thead th.num,
.bil-table tbody td.num {
text-align: end;
font-variant-numeric: tabular-nums;
}
.bil-table tbody tr {
border-bottom: 1px solid rgba(148, 163, 184, 0.07);
transition: background-color 0.15s ease;
}
.bil-table tbody tr:hover {
background-color: rgba(59, 130, 246, 0.04);
}
.bil-table tbody td {
padding: 11px 10px;
vertical-align: middle;
}
.bil-table tbody tr:last-child {
border-bottom: none;
}
/* أعمدة محددة */
.bil-student-cell {
min-width: 140px;
}
.bil-student-name {
font-weight: 600;
}
.bil-student-phone {
font-size: 0.72rem;
color: var(--muted);
margin-top: 2px;
font-variant-numeric: tabular-nums;
}
.bil-courses-cell {
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--muted);
}
.bil-method-cell,
.bil-date-cell {
color: var(--muted);
font-size: 0.78rem;
white-space: nowrap;
}
.bil-discount {
color: #f59e0b;
font-weight: 600;
}
.bil-paid {
color: #22c55e;
font-weight: 600;
}
.bil-remaining {
color: #ef4444;
font-weight: 600;
}
/* Status badge */
.bil-status-badge {
display: inline-block;
padding: 3px 9px;
font-size: 0.72rem;
font-weight: 600;
border-radius: var(--bil-badge-radius);
white-space: nowrap;
}
/* Row actions */
.bil-row-actions {
display: flex;
gap: 4px;
}
.bil-action-btn {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(148, 163, 184, 0.18);
background: rgba(15, 23, 42, 0.4);
border-radius: 6px;
color: var(--muted);
cursor: pointer;
font-size: 0.78rem;
transition: all 0.15s ease;
}
.bil-action-btn:hover {
background: rgba(59, 130, 246, 0.15);
border-color: rgba(59, 130, 246, 0.4);
color: #60a5fa;
}
/* ─── Pagination ──────────────────────────────────────────────────────────── */
.bil-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 14px;
padding: 14px;
border-top: 1px solid rgba(148, 163, 184, 0.12);
}
.bil-page-btn {
padding: 7px 14px;
background: rgba(15, 23, 42, 0.6);
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 6px;
color: inherit;
font-size: 0.82rem;
font-family: inherit;
cursor: pointer;
transition: all 0.15s ease;
}
.bil-page-btn:hover:not(:disabled) {
background: rgba(59, 130, 246, 0.15);
border-color: rgba(59, 130, 246, 0.4);
}
.bil-page-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.bil-page-info {
color: var(--muted);
font-size: 0.82rem;
}
/* ─── Skeleton Loader ─────────────────────────────────────────────────────── */
@keyframes bil-skeleton-pulse {
0%, 100% { background-position: -200% 0; }
50% { background-position: 200% 0; }
}
.bil-skeleton-block {
background: linear-gradient(
90deg,
rgba(148, 163, 184, 0.08) 0%,
rgba(148, 163, 184, 0.18) 50%,
rgba(148, 163, 184, 0.08) 100%
);
background-size: 200% 100%;
border-radius: 4px;
animation: bil-skeleton-pulse 1.6s ease-in-out infinite;
}
.bil-stat-skeleton {
pointer-events: none;
}
.bil-row-skeleton td {
padding: 14px 10px !important;
}
/* ─── Empty State ─────────────────────────────────────────────────────────── */
.bil-empty-state {
padding: 60px 24px;
text-align: center;
background: linear-gradient(
135deg,
rgba(59, 130, 246, 0.03),
rgba(251, 191, 36, 0.02)
);
}
.bil-empty-icon {
font-size: 3.5rem;
margin-bottom: 18px;
background: linear-gradient(135deg, #3b82f6 30%, #fbbf24 90%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
opacity: 0.5;
}
.bil-empty-state h3 {
margin: 0 0 10px 0;
font-size: 1.15rem;
font-weight: 700;
}
.bil-empty-state p {
color: var(--muted);
font-size: 0.9rem;
line-height: 1.7;
max-width: 460px;
margin: 0 auto 18px auto;
}
/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
.bil-page-head {
flex-direction: column;
}
.bil-page-actions {
width: 100%;
}
.bil-page-actions .a-btn {
flex: 1;
}
.bil-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.bil-filters-bar {
grid-template-columns: 1fr;
}
.bil-stat-value {
font-size: 0.95rem;
}
.bil-stat-label {
font-size: 0.7rem;
}
}
@media (max-width: 480px) {
.bil-stats-grid {
grid-template-columns: 1fr;
}
}
/* ════════════════════════════════════════════════════════════════════════════
§9 مودال إنشاء فاتورة (Create Invoice Modal)
────────────────────────────────────────────────────────────────────────────
كل القواعد هنا تحت scope `#bilCreateModal` أو classes خاصة بالمودال
لتجنب التعارض مع .bil-item-row الموجودة في §3 (تفاصيل الفاتورة).
════════════════════════════════════════════════════════════════════════════ */
/* ─── Overlay ───────────────────────────────────────────────────────────── */
.bil-modal-overlay {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(2, 6, 23, 0.78);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
animation: bil-modal-fade-in 0.18s ease-out;
}
.bil-modal-overlay[hidden] {
display: none !important;
}
@keyframes bil-modal-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes bil-modal-slide-up {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* ─── Modal Box ─────────────────────────────────────────────────────────── */
.bil-modal-box {
background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 1));
border: 1px solid rgba(96, 165, 250, 0.22);
border-radius: 16px;
width: 100%;
max-width: 720px;
max-height: 90vh;
display: flex;
flex-direction: column;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(96, 165, 250, 0.08);
overflow: hidden;
animation: bil-modal-slide-up 0.22s ease-out;
}
/* ─── Header ────────────────────────────────────────────────────────────── */
.bil-modal-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid rgba(148, 163, 184, 0.15);
background: linear-gradient(135deg, rgba(59, 130, 246, 0.06), rgba(251, 191, 36, 0.03));
}
.bil-modal-head h3 {
margin: 0;
font-size: 1.05rem;
font-weight: 700;
display: flex;
align-items: center;
gap: 10px;
}
.bil-modal-head h3 i {
background: linear-gradient(135deg, #3b82f6 30%, #fbbf24 90%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.3));
}
.bil-modal-close {
width: 32px;
height: 32px;
border: 1px solid rgba(148, 163, 184, 0.18);
background: rgba(15, 23, 42, 0.6);
border-radius: 8px;
color: var(--muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
}
.bil-modal-close:hover {
background: rgba(239, 68, 68, 0.15);
border-color: rgba(239, 68, 68, 0.4);
color: #ef4444;
}
/* ─── Body (Scrollable) ─────────────────────────────────────────────────── */
.bil-modal-body {
flex: 1;
overflow-y: auto;
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 18px;
}
.bil-modal-body::-webkit-scrollbar {
width: 6px;
}
.bil-modal-body::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.15);
}
.bil-modal-body::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, 0.25);
border-radius: 3px;
}
.bil-modal-body::-webkit-scrollbar-thumb:hover {
background: rgba(148, 163, 184, 0.4);
}
/* ─── Form Section ──────────────────────────────────────────────────────── */
.bil-form-section {
display: flex;
flex-direction: column;
gap: 8px;
}
.bil-section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.bil-form-label {
font-size: 0.85rem;
font-weight: 600;
color: var(--muted);
display: flex;
align-items: center;
gap: 8px;
}
.bil-form-label i {
color: #60a5fa;
font-size: 0.9em;
}
.bil-required {
color: #ef4444;
font-weight: 700;
margin-right: 2px;
}
.bil-form-hint {
margin: 4px 0 0 0;
font-size: 0.74rem;
color: var(--muted);
opacity: 0.8;
line-height: 1.5;
display: flex;
align-items: flex-start;
gap: 6px;
}
.bil-form-hint i {
color: #60a5fa;
margin-top: 2px;
}
.bil-form-input {
width: 100%;
padding: 10px 12px;
background: rgba(15, 23, 42, 0.6);
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 8px;
color: inherit;
font-size: 0.88rem;
font-family: inherit;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bil-form-input:focus {
outline: none;
border-color: rgba(59, 130, 246, 0.6);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.bil-form-input::placeholder {
color: var(--muted);
opacity: 0.6;
}
/* ─── Student Search ────────────────────────────────────────────────────── */
.bil-search-wrap {
position: relative;
}
.bil-search-results {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
z-index: 10;
max-height: 280px;
overflow-y: auto;
background: rgba(15, 23, 42, 0.98);
border: 1px solid rgba(96, 165, 250, 0.3);
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.bil-search-loading,
.bil-search-empty {
padding: 14px;
text-align: center;
color: var(--muted);
font-size: 0.85rem;
}
.bil-search-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
cursor: pointer;
border-bottom: 1px solid rgba(148, 163, 184, 0.08);
transition: background-color 0.15s ease;
}
.bil-search-item:last-child {
border-bottom: none;
}
.bil-search-item:hover {
background-color: rgba(59, 130, 246, 0.1);
}
.bil-search-item-avatar {
flex: 0 0 auto;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(59, 130, 246, 0.15);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
color: #60a5fa;
}
.bil-search-item-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.bil-search-item-body {
flex: 1;
min-width: 0;
}
.bil-search-item-name {
font-size: 0.88rem;
font-weight: 600;
margin-bottom: 2px;
}
.bil-search-item-meta {
font-size: 0.74rem;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ─── Selected Student Card ─────────────────────────────────────────────── */
.bil-student-card {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(251, 191, 36, 0.04));
border: 1px solid rgba(96, 165, 250, 0.28);
border-radius: 10px;
}
.bil-student-card-avatar {
flex: 0 0 auto;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(59, 130, 246, 0.18);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
color: #60a5fa;
}
.bil-student-card-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.bil-student-card-body {
flex: 1;
min-width: 0;
}
.bil-student-card-name {
font-size: 0.95rem;
font-weight: 700;
margin-bottom: 4px;
}
.bil-student-card-meta {
display: flex;
flex-wrap: wrap;
gap: 4px 12px;
font-size: 0.74rem;
color: var(--muted);
}
.bil-student-card-meta span {
display: inline-flex;
align-items: center;
gap: 4px;
}
.bil-student-card-meta i {
font-size: 0.78em;
color: #60a5fa;
}
.bil-student-card-clear {
width: 28px;
height: 28px;
border: 1px solid rgba(148, 163, 184, 0.18);
background: rgba(15, 23, 42, 0.6);
border-radius: 6px;
color: var(--muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
}
.bil-student-card-clear:hover {
background: rgba(239, 68, 68, 0.15);
border-color: rgba(239, 68, 68, 0.4);
color: #ef4444;
}
/* ─── Courses Suggestions ───────────────────────────────────────────────── */
.bil-courses-suggestions {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.bil-courses-loading,
.bil-courses-empty {
font-size: 0.82rem;
color: var(--muted);
padding: 8px 0;
}
.bil-course-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: rgba(59, 130, 246, 0.08);
border: 1px solid rgba(96, 165, 250, 0.25);
border-radius: 999px;
color: inherit;
font-size: 0.78rem;
font-family: inherit;
cursor: pointer;
transition: all 0.15s ease;
}
.bil-course-chip:hover {
background: rgba(59, 130, 246, 0.18);
border-color: rgba(96, 165, 250, 0.5);
transform: translateY(-1px);
}
.bil-course-chip i {
color: #60a5fa;
font-size: 0.85em;
}
/* ─── Items List (داخل المودال — scoped لتجنب التعارض مع §3) ──────────── */
#bilCreateModal .bil-items-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.bil-empty-items {
margin: 0;
padding: 16px;
text-align: center;
color: var(--muted);
font-size: 0.82rem;
background: rgba(15, 23, 42, 0.4);
border: 1px dashed rgba(148, 163, 184, 0.2);
border-radius: 8px;
}
#bilCreateModal .bil-item-row {
display: flex;
gap: 8px;
align-items: flex-start;
padding: 12px;
background: rgba(15, 23, 42, 0.45);
border: 1px solid rgba(148, 163, 184, 0.12);
border-radius: 10px;
grid-template-columns: unset; /* إلغاء grid من §3 */
}
.bil-item-fields {
flex: 1;
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
.bil-item-numbers {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 8px;
}
.bil-item-line-total {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 8px;
margin-top: 4px;
border-top: 1px dashed rgba(148, 163, 184, 0.15);
font-size: 0.82rem;
}
.bil-item-line-label {
color: var(--muted);
}
.bil-item-line-value {
font-weight: 700;
color: #22c55e;
font-variant-numeric: tabular-nums;
}
.bil-item-remove {
width: 36px;
height: 36px;
flex: 0 0 auto;
border: 1px solid rgba(239, 68, 68, 0.25);
background: rgba(239, 68, 68, 0.06);
border-radius: 8px;
color: #ef4444;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
}
.bil-item-remove:hover {
background: rgba(239, 68, 68, 0.18);
border-color: rgba(239, 68, 68, 0.5);
}
/* ─── Payment Methods Grid ──────────────────────────────────────────────── */
.bil-payment-methods-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px;
}
.bil-method-option {
display: flex;
align-items: center;
gap: 10px;
padding: 12px;
background: rgba(15, 23, 42, 0.45);
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 10px;
cursor: pointer;
transition: all 0.15s ease;
}
.bil-method-option:hover {
border-color: rgba(96, 165, 250, 0.45);
background: rgba(59, 130, 246, 0.05);
}
.bil-method-option input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: #3b82f6;
cursor: pointer;
}
.bil-method-option:has(input:checked) {
border-color: rgba(96, 165, 250, 0.55);
background: rgba(59, 130, 246, 0.1);
}
.bil-method-icon {
width: 32px;
height: 32px;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
background: linear-gradient(135deg, #3b82f6 30%, #fbbf24 90%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.bil-method-name {
font-weight: 600;
font-size: 0.88rem;
}
/* ─── Status Radios ─────────────────────────────────────────────────────── */
.bil-status-radios {
display: flex;
flex-direction: column;
gap: 8px;
}
.bil-radio-option {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: rgba(15, 23, 42, 0.45);
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 8px;
cursor: pointer;
transition: all 0.15s ease;
}
.bil-radio-option:hover {
border-color: rgba(96, 165, 250, 0.45);
}
.bil-radio-option input[type="radio"] {
width: 18px;
height: 18px;
accent-color: #3b82f6;
cursor: pointer;
}
.bil-radio-option:has(input:checked) {
border-color: rgba(96, 165, 250, 0.55);
background: rgba(59, 130, 246, 0.08);
}
.bil-radio-option span {
font-size: 0.85rem;
line-height: 1.5;
}
/* ─── Footer (Totals + Actions) — sticky ────────────────────────────────── */
.bil-modal-foot {
border-top: 1px solid rgba(148, 163, 184, 0.15);
background: rgba(2, 6, 23, 0.6);
padding: 14px 20px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.bil-modal-totals {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 200px;
}
.bil-total-row {
display: flex;
justify-content: space-between;
gap: 16px;
font-size: 0.82rem;
color: var(--muted);
}
.bil-total-row strong {
font-variant-numeric: tabular-nums;
font-weight: 600;
}
.bil-total-final {
border-top: 1px solid rgba(148, 163, 184, 0.15);
padding-top: 4px;
margin-top: 2px;
font-size: 0.95rem;
color: inherit;
}
.bil-total-final strong {
font-weight: 800;
font-size: 1.1rem;
background: linear-gradient(135deg, #3b82f6 30%, #fbbf24 90%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.bil-modal-actions {
display: flex;
gap: 8px;
}
/* ─── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
.bil-modal-overlay {
padding: 0;
align-items: stretch;
}
.bil-modal-box {
max-height: 100vh;
border-radius: 0;
}
.bil-payment-methods-grid {
grid-template-columns: 1fr;
}
.bil-item-numbers {
grid-template-columns: 1fr;
}
.bil-modal-foot {
flex-direction: column;
align-items: stretch;
}
.bil-modal-actions {
width: 100%;
}
.bil-modal-actions .a-btn {
flex: 1;
}
}
/* ════════════════════════════════════════════════════════════════════════════
§10 حاسبة خصم حمدان (Discount Calculator Modal)
────────────────────────────────────────────────────────────────────────────
تستخدم نفس البنية الأساسية لمودال إنشاء الفاتورة (§9)، مع classes إضافية.
════════════════════════════════════════════════════════════════════════════ */
/* ─── Box أصغر قليلاً من مودال الإنشاء ─────────────────────────────────── */
.bil-discount-box {
max-width: 560px;
}
/* ─── معلومات الفاتورة (read-only) ──────────────────────────────────────── */
.bil-disc-invoice-info {
padding: 14px;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.06), rgba(251, 191, 36, 0.03));
border: 1px solid rgba(96, 165, 250, 0.22);
border-radius: 10px;
}
.bil-disc-loading,
.bil-disc-error {
text-align: center;
padding: 12px;
color: var(--muted);
font-size: 0.88rem;
}
.bil-disc-error {
color: #ef4444;
}
.bil-disc-error i,
.bil-disc-loading i {
margin-left: 6px;
}
.bil-disc-info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 16px;
}
.bil-disc-info-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
font-size: 0.85rem;
padding: 4px 0;
}
.bil-disc-info-row strong {
font-variant-numeric: tabular-nums;
}
.bil-disc-info-label {
color: var(--muted);
font-size: 0.78rem;
}
.bil-disc-info-base {
grid-column: 1 / -1;
padding-top: 8px;
margin-top: 4px;
border-top: 1px solid rgba(148, 163, 184, 0.15);
}
.bil-disc-info-base strong {
font-size: 1.05rem;
background: linear-gradient(135deg, #3b82f6 30%, #fbbf24 90%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ─── Label Presets ─────────────────────────────────────────────────────── */
.bil-disc-label-presets {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 4px;
}
.bil-disc-preset-btn {
padding: 5px 12px;
background: rgba(15, 23, 42, 0.45);
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 999px;
color: inherit;
font-size: 0.78rem;
font-family: inherit;
cursor: pointer;
transition: all 0.15s ease;
}
.bil-disc-preset-btn:hover {
background: rgba(59, 130, 246, 0.15);
border-color: rgba(96, 165, 250, 0.45);
transform: translateY(-1px);
}
/* ─── حقل النسبة المئوية ────────────────────────────────────────────────── */
.bil-disc-percent-wrap {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.bil-disc-percent-input {
width: 110px;
flex: 0 0 auto;
text-align: center;
font-weight: 700;
font-size: 1rem;
font-variant-numeric: tabular-nums;
}
.bil-disc-percent-symbol {
font-size: 1.1rem;
font-weight: 700;
color: #fbbf24;
margin-right: -4px;
}
.bil-disc-percent-equiv {
font-size: 0.82rem;
color: var(--muted);
padding: 6px 10px;
background: rgba(15, 23, 42, 0.4);
border-radius: 6px;
font-variant-numeric: tabular-nums;
}
/* ─── أزرار الخصم السريع (10/15/20/30%) ─────────────────────────────────── */
.bil-disc-quick-percents {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-top: 6px;
}
.bil-disc-quick-btn {
padding: 7px 16px;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(251, 191, 36, 0.05));
border: 1px solid rgba(96, 165, 250, 0.3);
border-radius: 8px;
color: inherit;
font-size: 0.85rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: all 0.15s ease;
min-width: 60px;
}
.bil-disc-quick-btn:hover {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(251, 191, 36, 0.1));
border-color: rgba(251, 191, 36, 0.5);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}
.bil-disc-quick-btn:active {
transform: translateY(0);
}
/* ─── ملخص الحساب ───────────────────────────────────────────────────────── */
.bil-disc-summary {
margin-top: 8px;
padding: 16px;
background: linear-gradient(180deg, rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0.4));
border: 1px solid rgba(96, 165, 250, 0.22);
border-radius: 12px;
}
.bil-disc-summary-title {
font-size: 0.88rem;
font-weight: 700;
color: #60a5fa;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(148, 163, 184, 0.12);
display: flex;
align-items: center;
gap: 8px;
}
.bil-disc-summary-grid {
display: flex;
flex-direction: column;
gap: 6px;
}
.bil-disc-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
font-size: 0.88rem;
padding: 4px 0;
font-variant-numeric: tabular-nums;
}
.bil-disc-row span:first-child {
color: var(--muted);
}
.bil-disc-row-detail {
font-size: 0.82rem;
padding-right: 12px;
opacity: 0.88;
}
.bil-disc-neg {
color: #f59e0b;
font-weight: 600;
}
.bil-disc-row-total {
padding-top: 10px;
margin-top: 6px;
border-top: 1px solid rgba(148, 163, 184, 0.15);
font-size: 0.92rem;
}
.bil-disc-row-final {
padding-top: 10px;
margin-top: 4px;
border-top: 2px solid rgba(34, 197, 94, 0.3);
font-size: 1.05rem;
font-weight: 700;
}
.bil-disc-final-amount {
font-size: 1.2rem;
background: linear-gradient(135deg, #22c55e 30%, #10b981 90%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.bil-disc-row-remain {
padding-top: 6px;
margin-top: 4px;
border-top: 1px dashed rgba(148, 163, 184, 0.18);
font-size: 0.92rem;
}
.bil-disc-row-remain strong {
color: #f59e0b;
}
/* ─── تحذيرات ──────────────────────────────────────────────────────────── */
.bil-disc-warning {
padding: 12px 14px;
border-radius: 10px;
font-size: 0.85rem;
line-height: 1.5;
display: flex;
align-items: flex-start;
gap: 8px;
}
.bil-disc-warning i {
margin-top: 2px;
flex-shrink: 0;
}
.bil-disc-warning-error {
background: rgba(239, 68, 68, 0.08);
border: 1px solid rgba(239, 68, 68, 0.3);
color: #fca5a5;
}
.bil-disc-warning-error i {
color: #ef4444;
}
.bil-disc-warning-info {
background: rgba(59, 130, 246, 0.08);
border: 1px solid rgba(59, 130, 246, 0.3);
color: #93c5fd;
}
.bil-disc-warning-info i {
color: #3b82f6;
}
/* ─── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
.bil-disc-info-grid {
grid-template-columns: 1fr;
}
.bil-disc-percent-wrap {
flex-direction: column;
align-items: stretch;
}
.bil-disc-percent-input {
width: 100%;
}
.bil-disc-percent-equiv {
text-align: center;
}
.bil-disc-quick-percents {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.bil-disc-quick-btn {
min-width: 0;
}
}
/* ════════════════════════════════════════════════════════════════════════════
§11 نظام إدارة الأقساط (Installments Management)
────────────────────────────────────────────────────────────────────────────
Timeline UI أنيقة + plan cards + status badges + sum verification.
كل القواعد scoped تحت #bilInstallmentsModal حيث يلزم لتجنب التعارض.
════════════════════════════════════════════════════════════════════════════ */
/* ─── Box (أعرض قليلاً لاستيعاب Timeline) ──────────────────────────────── */
.bil-installments-box {
max-width: 680px;
}
/* ─── شريط معلومات الفاتورة ─────────────────────────────────────────────── */
.bil-inst-invoice-strip {
padding: 12px 14px;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.06), rgba(251, 191, 36, 0.03));
border: 1px solid rgba(96, 165, 250, 0.22);
border-radius: 10px;
}
.bil-inst-strip-row {
display: flex;
flex-wrap: wrap;
gap: 14px 22px;
align-items: center;
}
.bil-inst-strip-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.85rem;
}
.bil-inst-strip-label {
color: var(--muted);
font-size: 0.78rem;
}
.bil-inst-strip-item strong {
font-variant-numeric: tabular-nums;
}
/* ─── Plan Cards (3 خيارات) ─────────────────────────────────────────────── */
.bil-plan-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.bil-plan-card {
padding: 14px 12px;
background: rgba(15, 23, 42, 0.45);
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 12px;
cursor: pointer;
text-align: center;
transition: all 0.18s ease;
position: relative;
}
.bil-plan-card:hover {
border-color: rgba(96, 165, 250, 0.45);
background: rgba(59, 130, 246, 0.06);
transform: translateY(-2px);
}
.bil-plan-card-active {
border-color: rgba(96, 165, 250, 0.6) !important;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(251, 191, 36, 0.06)) !important;
box-shadow: 0 6px 18px rgba(59, 130, 246, 0.18),
inset 0 0 0 1px rgba(96, 165, 250, 0.18);
}
.bil-plan-card-active::after {
content: '✓';
position: absolute;
top: 8px;
left: 8px;
width: 22px;
height: 22px;
border-radius: 50%;
background: linear-gradient(135deg, #3b82f6, #fbbf24);
color: #fff;
font-size: 0.78rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
}
.bil-plan-icon {
width: 44px;
height: 44px;
margin: 0 auto 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
background: linear-gradient(135deg, #3b82f6 30%, #fbbf24 90%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.25));
}
.bil-plan-card h4 {
margin: 0 0 4px 0;
font-size: 0.95rem;
font-weight: 700;
}
.bil-plan-card p {
margin: 0;
font-size: 0.74rem;
color: var(--muted);
line-height: 1.5;
}
/* ─── ملاحظة الخطة (للـ full / flexible) ────────────────────────────────── */
.bil-inst-plan-note {
padding: 14px 16px;
background: rgba(59, 130, 246, 0.06);
border: 1px solid rgba(96, 165, 250, 0.22);
border-radius: 10px;
font-size: 0.88rem;
line-height: 1.6;
}
.bil-inst-plan-note i {
color: #60a5fa;
margin-left: 6px;
}
/* ─── إعدادات عدد الأقساط ───────────────────────────────────────────────── */
.bil-inst-config {
display: flex;
flex-direction: column;
gap: 14px;
}
.bil-inst-count-row {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.bil-inst-count-row .bil-form-label {
flex: 0 0 auto;
}
.bil-inst-count-controls {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
}
.bil-inst-count-controls input {
width: 100px;
text-align: center;
font-weight: 700;
font-size: 1rem;
font-variant-numeric: tabular-nums;
}
/* ─── فحص المجموع ───────────────────────────────────────────────────────── */
.bil-inst-sum-check {
padding: 10px 14px;
border-radius: 8px;
font-size: 0.88rem;
}
.bil-inst-sum-row {
display: flex;
align-items: center;
gap: 10px;
font-variant-numeric: tabular-nums;
}
.bil-inst-sum-row span:first-child {
color: var(--muted);
}
.bil-inst-sum-row strong {
flex: 1;
font-weight: 700;
}
.bil-inst-sum-row.match {
background: rgba(34, 197, 94, 0.08);
border: 1px solid rgba(34, 197, 94, 0.3);
padding: 8px 12px;
border-radius: 8px;
}
.bil-inst-sum-row.match strong {
color: #22c55e;
}
.bil-inst-sum-row.mismatch {
background: rgba(245, 158, 11, 0.08);
border: 1px solid rgba(245, 158, 11, 0.3);
padding: 8px 12px;
border-radius: 8px;
}
.bil-inst-sum-row.mismatch strong {
color: #f59e0b;
}
.bil-inst-sum-diff {
font-weight: 700;
color: #ef4444;
font-size: 0.82rem;
padding: 3px 9px;
background: rgba(239, 68, 68, 0.1);
border-radius: 999px;
}
/* ─── Timeline UI ───────────────────────────────────────────────────────── */
.bil-inst-timeline {
display: flex;
flex-direction: column;
gap: 0;
position: relative;
padding-right: 24px; /* مساحة للـ dots والـ line */
}
.bil-inst-item {
position: relative;
padding: 16px 0 16px 0;
padding-right: 26px; /* مسافة من الـ dot */
}
/* الـ dot الرقمي */
.bil-inst-dot {
position: absolute;
right: -8px;
top: 18px;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 800;
font-size: 0.88rem;
z-index: 2;
border: 3px solid rgba(15, 23, 42, 1);
box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.15),
0 4px 12px rgba(0, 0, 0, 0.3);
}
/* الـ line بين الأقساط */
.bil-inst-line {
position: absolute;
right: 7px;
top: 50px;
bottom: -16px;
width: 2px;
background: linear-gradient(180deg,
rgba(148, 163, 184, 0.4) 0%,
rgba(148, 163, 184, 0.15) 100%);
z-index: 1;
}
/* محتوى القسط */
.bil-inst-content {
padding: 14px;
background: rgba(15, 23, 42, 0.5);
border: 1px solid rgba(148, 163, 184, 0.15);
border-radius: 12px;
transition: border-color 0.18s ease;
}
.bil-inst-item:hover .bil-inst-content {
border-color: rgba(96, 165, 250, 0.35);
}
/* القسط المدفوع — مقفل ومميز */
.bil-inst-content.bil-inst-locked {
background: linear-gradient(135deg, rgba(34, 197, 94, 0.05), rgba(34, 197, 94, 0.02));
border-color: rgba(34, 197, 94, 0.25);
opacity: 0.88;
}
.bil-inst-content.bil-inst-locked input {
opacity: 0.65;
cursor: not-allowed;
}
.bil-inst-content-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.bil-inst-content-title {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
}
.bil-inst-content-title strong {
font-size: 0.92rem;
}
.bil-inst-locked-icon {
color: #22c55e;
font-size: 0.85rem;
padding: 4px 8px;
background: rgba(34, 197, 94, 0.1);
border-radius: 6px;
cursor: help;
}
/* الحقول (مبلغ + تاريخ) */
.bil-inst-fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.bil-inst-field {
display: flex;
flex-direction: column;
gap: 4px;
}
.bil-inst-field label {
font-size: 0.72rem;
color: var(--muted);
font-weight: 600;
}
.bil-inst-field input {
font-variant-numeric: tabular-nums;
}
/* طرق الدفع لكل قسط */
.bil-inst-methods {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
margin-top: 12px;
padding-top: 10px;
border-top: 1px dashed rgba(148, 163, 184, 0.18);
}
.bil-inst-methods-label {
font-size: 0.74rem;
color: var(--muted);
font-weight: 600;
flex: 0 0 auto;
}
.bil-inst-method-toggle {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
background: rgba(15, 23, 42, 0.5);
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 999px;
cursor: pointer;
transition: all 0.15s ease;
font-size: 0.78rem;
}
.bil-inst-method-toggle:hover {
border-color: rgba(96, 165, 250, 0.4);
}
.bil-inst-method-toggle input {
width: 14px;
height: 14px;
accent-color: #3b82f6;
cursor: pointer;
}
.bil-inst-method-toggle:has(input:checked) {
border-color: rgba(96, 165, 250, 0.55);
background: rgba(59, 130, 246, 0.1);
}
.bil-inst-method-toggle i {
font-size: 0.92rem;
background: linear-gradient(135deg, #3b82f6 30%, #fbbf24 90%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ملاحظة الدفع */
.bil-inst-paid-note {
margin-top: 10px;
padding: 6px 10px;
background: rgba(34, 197, 94, 0.08);
border-radius: 6px;
font-size: 0.76rem;
color: #4ade80;
display: flex;
align-items: center;
gap: 6px;
}
.bil-inst-paid-note i {
color: #22c55e;
}
/* ─── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
.bil-plan-cards {
grid-template-columns: 1fr;
}
.bil-inst-count-row {
flex-direction: column;
align-items: stretch;
}
.bil-inst-count-controls {
width: 100%;
}
.bil-inst-count-controls input {
flex: 1;
}
.bil-inst-fields {
grid-template-columns: 1fr;
}
.bil-inst-strip-row {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
}
/* ════════════════════════════════════════════════════════════════════════════
§12 تحديث حالة الدفع (Payment Refresh Modal)
════════════════════════════════════════════════════════════════════════════ */
.bil-refresh-box {
max-width: 640px;
}
/* ─── شريط معلومات الفاتورة (نفس بنية الأقساط) ─────────────────────────── */
.bil-ref-invoice-strip {
padding: 12px 14px;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.06), rgba(251, 191, 36, 0.03));
border: 1px solid rgba(96, 165, 250, 0.22);
border-radius: 10px;
}
/* ─── عنوان قسم القائمة + زر إعادة التحميل ──────────────────────────────── */
.bil-ref-section-title {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 4px;
font-size: 0.92rem;
font-weight: 700;
border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}
.bil-ref-section-title i {
color: #60a5fa;
}
.bil-ref-section-title span {
flex: 1;
}
.bil-ref-reload-btn {
width: 30px;
height: 30px;
border: 1px solid rgba(148, 163, 184, 0.18);
background: rgba(15, 23, 42, 0.5);
border-radius: 6px;
color: var(--muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
font-size: 0.78rem;
}
.bil-ref-reload-btn:hover {
background: rgba(59, 130, 246, 0.15);
border-color: rgba(96, 165, 250, 0.4);
color: #60a5fa;
transform: rotate(45deg);
}
/* ─── قائمة الدفعات ─────────────────────────────────────────────────────── */
.bil-ref-payments-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.bil-ref-payment-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: rgba(15, 23, 42, 0.45);
border: 1px solid rgba(148, 163, 184, 0.15);
border-radius: 10px;
transition: border-color 0.15s ease;
}
.bil-ref-payment-item:hover {
border-color: rgba(96, 165, 250, 0.35);
}
/* تمييز بصري حسب الحالة */
.bil-ref-payment-item[data-status="paid"],
.bil-ref-payment-item[data-status="verified"] {
border-color: rgba(34, 197, 94, 0.22);
background: linear-gradient(135deg, rgba(34, 197, 94, 0.04), rgba(15, 23, 42, 0.45));
}
.bil-ref-payment-item[data-status="failed"] {
border-color: rgba(239, 68, 68, 0.22);
background: linear-gradient(135deg, rgba(239, 68, 68, 0.04), rgba(15, 23, 42, 0.45));
}
.bil-ref-payment-item[data-status="initiated"] {
opacity: 0.78;
}
/* أيقونة طريقة الدفع */
.bil-ref-payment-icon {
flex: 0 0 auto;
width: 44px;
height: 44px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
}
/* جسم المعلومات */
.bil-ref-payment-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 5px;
}
.bil-ref-payment-row1 {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.bil-ref-payment-method {
font-weight: 700;
font-size: 0.92rem;
}
.bil-ref-payment-id {
font-size: 0.74rem;
color: var(--muted);
}
.bil-ref-payment-id code {
font-family: 'Courier New', monospace;
background: rgba(15, 23, 42, 0.5);
padding: 2px 8px;
border-radius: 4px;
border: 1px solid rgba(148, 163, 184, 0.12);
font-size: 0.76rem;
letter-spacing: 0.5px;
}
.bil-ref-payment-row2 {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
font-size: 0.78rem;
color: var(--muted);
}
.bil-ref-payment-row2 i {
font-size: 0.85em;
margin-left: 4px;
opacity: 0.7;
}
.bil-ref-payment-amount {
font-weight: 600;
color: #fbbf24;
font-variant-numeric: tabular-nums;
}
.bil-ref-payment-time {
color: var(--muted);
}
.bil-ref-payment-error {
color: #fca5a5;
cursor: help;
}
.bil-ref-payment-error i {
color: #ef4444;
}
/* زر التحديث */
.bil-ref-payment-action {
flex: 0 0 auto;
}
.bil-ref-payment-btn {
padding: 8px 14px;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(251, 191, 36, 0.08));
border: 1px solid rgba(96, 165, 250, 0.35);
border-radius: 8px;
color: inherit;
font-size: 0.82rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 6px;
}
.bil-ref-payment-btn:hover:not(:disabled) {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(251, 191, 36, 0.15));
border-color: rgba(251, 191, 36, 0.55);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.18);
}
.bil-ref-payment-btn:active:not(:disabled) {
transform: translateY(0);
}
.bil-ref-payment-btn.loading {
background: rgba(59, 130, 246, 0.1);
border-color: rgba(96, 165, 250, 0.4);
cursor: wait;
pointer-events: none;
}
.bil-ref-payment-btn.disabled {
background: rgba(15, 23, 42, 0.4);
border-color: rgba(148, 163, 184, 0.15);
color: var(--muted);
cursor: not-allowed;
opacity: 0.6;
}
.bil-ref-payment-btn:disabled {
cursor: not-allowed;
}
/* ─── Empty state ───────────────────────────────────────────────────────── */
.bil-ref-empty {
padding: 40px 20px;
text-align: center;
}
.bil-ref-empty-icon {
font-size: 2.8rem;
margin-bottom: 14px;
background: linear-gradient(135deg, #3b82f6 30%, #fbbf24 90%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
opacity: 0.45;
}
.bil-ref-empty h4 {
margin: 0 0 8px;
font-size: 1rem;
font-weight: 700;
}
.bil-ref-empty p {
margin: 0;
font-size: 0.85rem;
color: var(--muted);
line-height: 1.6;
}
/* ─── ملاحظة الأمان ─────────────────────────────────────────────────────── */
.bil-ref-security-note {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 10px 12px;
background: rgba(34, 197, 94, 0.05);
border: 1px solid rgba(34, 197, 94, 0.18);
border-radius: 8px;
font-size: 0.74rem;
color: var(--muted);
line-height: 1.6;
}
.bil-ref-security-note i {
color: #22c55e;
font-size: 0.92rem;
margin-top: 2px;
}
/* ─── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
.bil-ref-payment-item {
flex-wrap: wrap;
}
.bil-ref-payment-action {
width: 100%;
margin-top: 8px;
}
.bil-ref-payment-btn {
width: 100%;
justify-content: center;
}
.bil-ref-payment-row1 {
gap: 6px;
}
}
/* ════════════════════════════════════════════════════════════════════════════
§13 السجل المالي (Audit Log Timeline)
════════════════════════════════════════════════════════════════════════════ */
.bil-audit-box {
max-width: 700px;
}
/* ─── شريط معلومات الفاتورة ─────────────────────────────────────────────── */
.bil-audit-strip {
padding: 12px 14px;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.06), rgba(251, 191, 36, 0.03));
border: 1px solid rgba(96, 165, 250, 0.22);
border-radius: 10px;
}
/* ─── شريط الفلاتر ──────────────────────────────────────────────────────── */
.bil-audit-filter-bar {
display: flex;
gap: 6px;
flex-wrap: wrap;
padding: 8px;
background: rgba(15, 23, 42, 0.4);
border: 1px solid rgba(148, 163, 184, 0.12);
border-radius: 10px;
}
.bil-audit-filter-btn {
flex: 1;
min-width: 90px;
padding: 8px 12px;
background: rgba(15, 23, 42, 0.55);
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 8px;
color: var(--muted);
font-size: 0.82rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: all 0.15s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.bil-audit-filter-btn:hover {
border-color: rgba(96, 165, 250, 0.4);
color: #60a5fa;
}
.bil-audit-filter-btn.active {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(251, 191, 36, 0.08));
border-color: rgba(96, 165, 250, 0.55);
color: #fff;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.18);
}
.bil-audit-filter-btn i {
font-size: 0.92em;
}
/* ─── الـ Timeline ──────────────────────────────────────────────────────── */
.bil-audit-timeline {
display: flex;
flex-direction: column;
gap: 0;
position: relative;
padding-right: 26px; /* مكان للـ dots */
}
.bil-audit-item {
position: relative;
padding: 12px 0;
}
/* الـ dot */
.bil-audit-dot {
position: absolute;
right: -6px;
top: 16px;
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 0.95rem;
z-index: 2;
border: 3px solid rgba(15, 23, 42, 1);
box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.15),
0 4px 14px rgba(0, 0, 0, 0.35);
}
/* الـ line */
.bil-audit-line {
position: absolute;
right: 11px;
top: 56px;
bottom: -12px;
width: 2px;
background: linear-gradient(180deg,
rgba(148, 163, 184, 0.4) 0%,
rgba(148, 163, 184, 0.12) 100%);
z-index: 1;
}
/* الـ card */
.bil-audit-card {
margin-right: 30px;
padding: 12px 14px;
background: rgba(15, 23, 42, 0.5);
border: 1px solid rgba(148, 163, 184, 0.15);
border-radius: 10px;
transition: border-color 0.18s ease, transform 0.18s ease;
}
.bil-audit-item:hover .bil-audit-card {
border-color: rgba(96, 165, 250, 0.35);
transform: translateX(-2px);
}
/* تمييز حسب نوع الحدث */
.bil-audit-item[data-event-type="invoice_created"] .bil-audit-card {
border-color: rgba(34, 197, 94, 0.18);
}
.bil-audit-item[data-event-type="invoice_discount_applied"] .bil-audit-card {
border-color: rgba(251, 191, 36, 0.18);
}
.bil-audit-item[data-event-type="payment_paid_applepay"] .bil-audit-card,
.bil-audit-item[data-event-type="payment_paid_card"] .bil-audit-card,
.bil-audit-item[data-event-type="payment_paid_stcpay"] .bil-audit-card {
border-color: rgba(34, 197, 94, 0.22);
background: linear-gradient(135deg, rgba(34, 197, 94, 0.04), rgba(15, 23, 42, 0.5));
}
.bil-audit-item[data-event-type="payment_failed"] .bil-audit-card,
.bil-audit-item[data-event-type="invoice_cancelled"] .bil-audit-card {
border-color: rgba(239, 68, 68, 0.22);
background: linear-gradient(135deg, rgba(239, 68, 68, 0.04), rgba(15, 23, 42, 0.5));
}
/* head: العنوان + الوقت */
.bil-audit-card-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.bil-audit-card-head strong {
font-size: 0.92rem;
font-weight: 700;
}
.bil-audit-card-time {
font-size: 0.74rem;
color: var(--muted);
white-space: nowrap;
cursor: help;
}
/* meta: الأدمن + الطريقة + الوقت الكامل */
.bil-audit-card-meta {
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
font-size: 0.74rem;
color: var(--muted);
padding-bottom: 8px;
margin-bottom: 8px;
border-bottom: 1px dashed rgba(148, 163, 184, 0.14);
}
.bil-audit-card-meta span {
display: inline-flex;
align-items: center;
gap: 5px;
}
.bil-audit-card-meta i {
font-size: 0.92em;
opacity: 0.75;
}
/* body: التفاصيل العامة */
.bil-audit-card-body {
font-size: 0.82rem;
line-height: 1.6;
padding: 4px 0;
display: flex;
align-items: center;
gap: 8px;
}
.bil-audit-card-body i {
color: var(--muted);
font-size: 0.92em;
}
.bil-audit-card-body strong {
font-variant-numeric: tabular-nums;
}
/* extra: بيانات البطاقة الآمنة */
.bil-audit-card-extra {
margin-top: 6px;
padding: 7px 10px;
background: rgba(99, 102, 241, 0.08);
border: 1px solid rgba(99, 102, 241, 0.2);
border-radius: 7px;
font-size: 0.78rem;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.bil-audit-card-extra i {
color: #818cf8;
}
.bil-audit-card-extra code {
font-family: 'Courier New', monospace;
background: rgba(15, 23, 42, 0.6);
padding: 2px 8px;
border-radius: 4px;
font-size: 0.78rem;
letter-spacing: 1px;
}
/* رسالة خطأ */
.bil-audit-card-error {
margin-top: 6px;
padding: 7px 10px;
background: rgba(239, 68, 68, 0.07);
border: 1px solid rgba(239, 68, 68, 0.2);
border-radius: 7px;
font-size: 0.78rem;
color: #fca5a5;
display: flex;
align-items: center;
gap: 8px;
}
.bil-audit-card-error i {
color: #ef4444;
}
/* قبل/بعد grid */
.bil-audit-before-after {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 10px;
align-items: center;
margin-top: 6px;
padding: 8px;
background: rgba(15, 23, 42, 0.3);
border: 1px solid rgba(148, 163, 184, 0.1);
border-radius: 8px;
}
.bil-audit-ba-cell {
display: flex;
flex-direction: column;
gap: 2px;
text-align: center;
padding: 4px;
}
.bil-audit-ba-label {
font-size: 0.7rem;
color: var(--muted);
font-weight: 600;
}
.bil-audit-ba-cell strong {
font-size: 0.92rem;
font-variant-numeric: tabular-nums;
}
.bil-audit-ba-arrow {
color: var(--muted);
font-size: 1rem;
}
/* ─── ملاحظة الأمان ─────────────────────────────────────────────────────── */
.bil-audit-security-note {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 10px 12px;
background: rgba(34, 197, 94, 0.05);
border: 1px solid rgba(34, 197, 94, 0.18);
border-radius: 8px;
font-size: 0.74rem;
color: var(--muted);
line-height: 1.6;
}
.bil-audit-security-note i {
color: #22c55e;
font-size: 0.92rem;
margin-top: 2px;
flex-shrink: 0;
}
/* ─── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
.bil-audit-filter-bar {
flex-direction: column;
}
.bil-audit-filter-btn {
width: 100%;
flex: none;
}
.bil-audit-card-head {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.bil-audit-card-meta {
gap: 6px 10px;
}
.bil-audit-before-after {
grid-template-columns: 1fr;
}
.bil-audit-ba-arrow {
transform: rotate(90deg);
}
.bil-audit-timeline {
padding-right: 20px;
}
.bil-audit-dot {
width: 28px;
height: 28px;
right: -4px;
font-size: 0.82rem;
}
.bil-audit-line {
right: 8px;
}
.bil-audit-card {
margin-right: 22px;
padding: 10px;
}
}
/* ════════════════════════════════════════════════════════════════════════════
§14 Visual Refinements — صقل بصري شامل
────────────────────────────────────────────────────────────────────────────
⚠️ تحسينات بصرية فقط بدون تغيير أي منطق أو HTML.
⚠️ يحافظ على الوضع الداكن ومتغيرات النظام الموجودة.
التغطية:
• لوحة ألوان مُوحَّدة (أزرق ثقة + ذهبي فواتير + أخضر مدفوع +
برتقالي جزئي + أحمر فشل/تأخر)
• شارات حالة مصقولة بنقطة مؤشر متوهِّجة
• مؤشر لون جانبي على صفوف الجدول حسب الحالة
• بطاقات إحصائية فخمة (تدرج خفيف + خط لمعان علوي + lift hover)
• Skeleton أنعم (5-stop gradient بدلاً من 3)
• Empty state أكثر دفئاً (radial-gradient + أيقونة بتدرج blue→gold)
• Header بخط ذهبي/أزرق دقيق سفلي
• RTL كامل (inset-inline-start/end)
• Mobile/small screens
════════════════════════════════════════════════════════════════════════════ */
/* ─── (1) Tokens موحَّدة للنظام البصري ─────────────────────────────────── */
:root {
/* تجاوز اللون الأساسي القديم (الأخضر الزمردي) ليصبح الأزرق (الثقة) */
--bil-primary: #3b82f6;
--bil-primary-dark: #2563eb;
--bil-primary-light: #60a5fa;
--bil-primary-glow: rgba(59, 130, 246, 0.34);
--bil-primary-bg: rgba(59, 130, 246, 0.08);
--bil-primary-border: rgba(96, 165, 250, 0.35);
/* الأزرق — الثقة (الأزرار الأساسية، التركيز، الإطارات) */
--bil-trust: #3b82f6;
--bil-trust-soft: rgba(59, 130, 246, 0.08);
--bil-trust-glow: rgba(59, 130, 246, 0.32);
--bil-trust-border: rgba(96, 165, 250, 0.35);
/* الذهبي — الفواتير (هوية الميزة، عنوان الصفحة) */
--bil-invoice: #fbbf24;
--bil-invoice-soft: rgba(251, 191, 36, 0.08);
--bil-invoice-glow: rgba(251, 191, 36, 0.32);
--bil-invoice-border: rgba(251, 191, 36, 0.32);
/* الأخضر — المدفوع */
--bil-paid: #22c55e;
--bil-paid-soft: rgba(34, 197, 94, 0.08);
--bil-paid-border: rgba(34, 197, 94, 0.32);
/* البرتقالي — الجزئي */
--bil-partial: #f97316;
--bil-partial-soft: rgba(249, 115, 22, 0.08);
--bil-partial-border: rgba(249, 115, 22, 0.32);
/* الأحمر — الفشل / التأخر */
--bil-error: #ef4444;
--bil-error-soft: rgba(239, 68, 68, 0.08);
--bil-error-border: rgba(239, 68, 68, 0.32);
}
/* ─── (2) شارات الحالة — نقطة مؤشر متوهِّجة ──────────────────────────── */
.bil-status-badge {
position: relative;
display: inline-flex;
align-items: center;
padding-inline-start: 22px; /* مكان للنقطة في البداية حسب الـ direction */
padding-inline-end: 11px;
padding-block: 4px;
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.2px;
line-height: 1.4;
border-radius: 999px;
white-space: nowrap;
}
/* النقطة المضيئة — تأخذ اللون من inline style عبر currentColor */
.bil-status-badge::before {
content: '';
position: absolute;
inset-inline-start: 8px;
top: 50%;
transform: translateY(-50%);
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 8px currentColor;
opacity: 0.92;
}
/* ─── (3) Cards إحصائية فخمة ───────────────────────────────────────── */
.bil-stat-card {
position: relative;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.036), rgba(255, 255, 255, 0.012));
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
overflow: hidden;
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
border-color 0.25s ease,
box-shadow 0.25s ease;
}
/* خط لمعان دقيق علوي */
.bil-stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
pointer-events: none;
}
.bil-stat-card:hover {
transform: translateY(-3px);
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28),
0 0 0 1px rgba(96, 165, 250, 0.18);
}
/* أيقونة الكرت — حلقة لمعان داخلية + ظل عميق */
.bil-stat-icon {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07),
0 4px 12px rgba(0, 0, 0, 0.18);
}
/* قيم الإحصاءات بألوان معبِّرة (تطبَّق على الكروت حسب ترتيبها) */
.bil-stats-grid > .bil-stat-card:nth-child(1) .bil-stat-value { /* إجمالي المستحقات */
color: var(--bil-invoice);
}
.bil-stats-grid > .bil-stat-card:nth-child(2) .bil-stat-value { /* المدفوع هذا الشهر */
color: var(--bil-paid);
}
.bil-stats-grid > .bil-stat-card:nth-child(4) .bil-stat-value, /* فواتير متأخرة */
.bil-stats-grid > .bil-stat-card:nth-child(5) .bil-stat-value { /* عمليات فاشلة */
color: var(--bil-error);
}
/* ─── (4) صفوف الجدول مع مؤشر لون جانبي حسب الحالة ──────────────── */
.bil-invoice-row {
position: relative;
}
/* الشريط الجانبي الملوَّن (RTL-aware) */
.bil-invoice-row::before {
content: '';
position: absolute;
inset-inline-start: 0;
top: 8px;
bottom: 8px;
width: 3px;
border-radius: 0 2px 2px 0;
background: transparent;
opacity: 0;
transition: background 0.18s ease, opacity 0.18s ease;
}
/* في RTL، الشريط يجب أن يكون من الجهة المقابلة */
[dir="rtl"] .bil-invoice-row::before {
border-radius: 2px 0 0 2px;
}
.bil-invoice-row[data-invoice-status="paid"]::before { background: var(--bil-paid); opacity: 0.7; }
.bil-invoice-row[data-invoice-status="partial"]::before { background: var(--bil-partial); opacity: 0.7; }
.bil-invoice-row[data-invoice-status="unpaid"]::before { background: var(--bil-invoice); opacity: 0.65; }
.bil-invoice-row[data-invoice-status="overdue"]::before { background: var(--bil-error); opacity: 0.85; }
.bil-invoice-row[data-invoice-status="failed"]::before { background: var(--bil-error); opacity: 0.75; }
.bil-invoice-row[data-invoice-status="cancelled"]::before{ background: #64748b; opacity: 0.5; }
.bil-invoice-row[data-invoice-status="refunded"]::before { background: #a78bfa; opacity: 0.6; }
/* hover للصف — gradient خفيف بلونَي النظام */
.bil-table tbody tr.bil-invoice-row:hover {
background: linear-gradient(90deg, rgba(59, 130, 246, 0.05), rgba(251, 191, 36, 0.022));
}
/* ─── (5) Skeleton أنعم — 5-stop gradient ──────────────────────────── */
@keyframes bil-skeleton-shimmer-v2 {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
.bil-skeleton-block {
background: linear-gradient(
90deg,
rgba(148, 163, 184, 0.04) 0%,
rgba(148, 163, 184, 0.14) 25%,
rgba(148, 163, 184, 0.22) 50%,
rgba(148, 163, 184, 0.14) 75%,
rgba(148, 163, 184, 0.04) 100%
);
background-size: 200% 100%;
animation: bil-skeleton-shimmer-v2 2s ease-in-out infinite;
border-radius: 5px;
}
/* ─── (6) Empty state أكثر دفئاً ──────────────────────────────────── */
.bil-empty-state {
padding: 72px 28px;
background:
radial-gradient(ellipse 80% 60% at center top, rgba(59, 130, 246, 0.045), transparent 70%),
linear-gradient(135deg, rgba(59, 130, 246, 0.018), rgba(251, 191, 36, 0.012));
position: relative;
overflow: hidden;
}
.bil-empty-icon {
font-size: 4rem;
margin-bottom: 22px;
background: linear-gradient(135deg, var(--bil-trust) 30%, var(--bil-invoice) 90%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
opacity: 0.55;
filter: drop-shadow(0 6px 18px rgba(59, 130, 246, 0.22));
}
.bil-empty-state h3 {
margin: 0 0 10px;
font-size: 1.2rem;
font-weight: 800;
background: linear-gradient(135deg, var(--bil-trust), var(--bil-invoice));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
opacity: 0.95;
}
.bil-empty-state p {
font-size: 0.92rem;
line-height: 1.7;
max-width: 500px;
}
/* ─── (7) Header — خط ذهبي/أزرق دقيق سفلي ─────────────────────────── */
.bil-page-head {
position: relative;
}
.bil-page-head::after {
content: '';
position: absolute;
bottom: -1px;
inset-inline-end: 0;
width: 140px;
height: 2px;
border-radius: 2px;
background: linear-gradient(
90deg,
transparent,
var(--bil-invoice) 40%,
var(--bil-trust) 90%
);
opacity: 0.6;
pointer-events: none;
}
/* في RTL، الـ gradient يجب أن يأتي من الجهة الصحيحة */
[dir="rtl"] .bil-page-head::after {
background: linear-gradient(
-90deg,
transparent,
var(--bil-invoice) 40%,
var(--bil-trust) 90%
);
}
/* ─── (8) أزرار الإجراءات — hover ملوَّن حسب الإجراء ────────────────── */
.bil-action-btn {
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.bil-action-btn:hover {
transform: translateY(-1px);
}
/* hover افتراضي (أزرق ثقة) */
.bil-action-btn:hover {
background: var(--bil-trust-soft);
border-color: var(--bil-trust-border);
color: var(--bil-trust);
box-shadow: 0 4px 10px rgba(59, 130, 246, 0.14);
}
/* hover خاص لزر الخصم (ذهبي) */
.bil-action-btn[data-perm="billing.apply_discount"]:hover {
background: var(--bil-invoice-soft);
border-color: var(--bil-invoice-border);
color: var(--bil-invoice);
box-shadow: 0 4px 10px rgba(251, 191, 36, 0.14);
}
/* hover خاص لزر التحديث (أخضر) */
.bil-action-btn[data-perm="billing.refresh_payment"]:hover {
background: var(--bil-paid-soft);
border-color: var(--bil-paid-border);
color: var(--bil-paid);
box-shadow: 0 4px 10px rgba(34, 197, 94, 0.14);
}
/* ─── (9) Filters bar + Inputs ──────────────────────────────────────── */
.bil-filters-bar {
background: linear-gradient(180deg, rgba(15, 23, 42, 0.42), rgba(15, 23, 42, 0.25));
}
.bil-filter-input:focus,
.bil-filter-select:focus {
background: rgba(15, 23, 42, 0.85);
border-color: var(--bil-trust-border);
box-shadow: 0 0 0 3px var(--bil-trust-soft);
}
/* ─── (10) Page header — أيقونة بتدرج محسَّن ───────────────────────── */
.bil-page-icon {
background: linear-gradient(135deg, var(--bil-trust) 30%, var(--bil-invoice) 90%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.32));
}
/* ─── (11) Pagination — أوضح ───────────────────────────────────────── */
.bil-pagination {
background: linear-gradient(180deg, transparent, rgba(15, 23, 42, 0.35));
}
.bil-page-btn:hover:not(:disabled) {
background: var(--bil-trust-soft);
border-color: var(--bil-trust-border);
color: var(--bil-trust);
}
/* ─── (12) رؤوس الجدول — أنيقة ─────────────────────────────────────── */
.bil-table thead th {
background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.95));
text-transform: none;
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.3px;
border-bottom: 1px solid rgba(96, 165, 250, 0.18);
box-shadow: 0 1px 0 rgba(96, 165, 250, 0.1);
}
/* ─── (13) RTL — تحسينات خاصة ──────────────────────────────────────── */
/* تأكيد أن الـ inputs النصية تعمل RTL بشكل صحيح */
.bil-filter-input,
.bil-form-input {
text-align: start; /* تتبع direction تلقائياً */
}
/* الأرقام يجب أن تبقى LTR حتى في RTL */
.bil-stat-value,
.bil-table td.num,
.bil-disc-row strong,
.bil-inst-strip-item strong {
direction: ltr;
text-align: end; /* اليسار في RTL، اليمين في LTR */
unicode-bidi: embed;
}
/* علامة الـ payment ID المُقنَّعة دائماً LTR */
.bil-ref-payment-id code,
.bil-audit-card-extra code {
direction: ltr;
display: inline-block;
}
/* ─── (14) Mobile + Small screens ──────────────────────────────────── */
@media (max-width: 768px) {
/* تعطيل الـ hover lift على الموبايل */
.bil-stat-card:hover,
.bil-action-btn:hover {
transform: none;
}
/* صفوف الجدول أقل padding */
.bil-table thead th,
.bil-table tbody td {
padding: 9px 8px;
font-size: 0.78rem;
}
/* شارات الحالة أصغر قليلاً */
.bil-status-badge {
padding-inline-start: 20px;
padding-inline-end: 9px;
font-size: 0.7rem;
}
.bil-status-badge::before {
inset-inline-start: 7px;
width: 6px;
height: 6px;
}
/* Empty state */
.bil-empty-state {
padding: 48px 20px;
}
.bil-empty-icon {
font-size: 3rem;
margin-bottom: 16px;
}
.bil-empty-state h3 {
font-size: 1.05rem;
}
.bil-empty-state p {
font-size: 0.85rem;
}
/* Header الصفحة */
.bil-page-head::after {
width: 100px;
}
}
@media (max-width: 480px) {
.bil-page-title {
font-size: 1.1rem;
}
.bil-page-desc {
font-size: 0.8rem;
}
/* جدول مع scroll أفقي أوضح */
.bil-table-wrap {
border-radius: 12px;
}
/* مؤشر صف صغير */
.bil-invoice-row::before {
width: 2px;
}
}
/* ─── (15) ضمان الوضع الداكن — قائمة فحص ─────────────────────────── */
/*
كل القيم اللونية هنا متوافقة مع الوضع الداكن:
✓ rgba() بقيم alpha منخفضة (0.04 → 0.35) للخلفيات
✓ #fff بـ alpha فقط (rgba(255,255,255,0.X))
✓ ألوان النظام (#3b82f6, #fbbf24, إلخ) بدرجات معتدلة
✓ النصوص تستخدم var(--muted) أو inherit من body
✓ الـ shadows سوداء (rgba(0,0,0,X)) — تظهر طبيعية على الداكن
✓ لا يوجد background: white خالص
✓ كل tier من الشفافية يبقى محسوساً لكن لا يكسر التباين
⚠️ لو لاحقاً أضيف وضع فاتح:
نلف القواعد بـ [data-theme="dark"] والـ light يأخذ مجموعة منفصلة.
*/
/* ════════════════════════════════════════════════════════════════════════════
§15 Realtime Status Badge — شارة المزامنة اللحظية (Admin)
────────────────────────────────────────────────────────────────────────────
نفس الـ states للطالب: idle / connecting / connected / disconnected / fallback
════════════════════════════════════════════════════════════════════════════ */
.bil-rt-badge {
display: inline-flex;
align-items: center;
gap: 6px;
margin-inline-start: 12px;
padding: 4px 11px;
border-radius: 999px;
background: rgba(148, 163, 184, 0.08);
border: 1px solid rgba(148, 163, 184, 0.2);
color: rgba(248, 250, 252, 0.7);
font-family: inherit;
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.2px;
cursor: default;
transition: all 0.18s ease;
vertical-align: middle;
white-space: nowrap;
}
.bil-rt-badge i {
font-size: 0.64rem;
flex-shrink: 0;
}
.bil-rt-badge:disabled {
cursor: default;
opacity: 0.7;
}
.bil-rt-idle {
color: rgba(148, 163, 184, 0.7);
background: rgba(148, 163, 184, 0.06);
border-color: rgba(148, 163, 184, 0.15);
}
.bil-rt-idle i { color: rgba(148, 163, 184, 0.5); }
.bil-rt-connecting {
color: #fcd34d;
background: rgba(251, 191, 36, 0.08);
border-color: rgba(251, 191, 36, 0.28);
}
.bil-rt-connecting i { color: #fbbf24; }
.bil-rt-connected {
color: #4ade80;
background: rgba(34, 197, 94, 0.08);
border-color: rgba(34, 197, 94, 0.3);
}
.bil-rt-connected i {
color: #22c55e;
animation: bil-rt-pulse 2.2s ease-in-out infinite;
}
@keyframes bil-rt-pulse {
0%, 100% {
opacity: 1;
transform: scale(1);
filter: drop-shadow(0 0 0 rgba(34, 197, 94, 0));
}
50% {
opacity: 0.7;
transform: scale(1.2);
filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.6));
}
}
.bil-rt-disconnected {
color: #fca5a5;
background: rgba(239, 68, 68, 0.08);
border-color: rgba(239, 68, 68, 0.3);
cursor: pointer;
}
.bil-rt-disconnected i { color: #ef4444; }
.bil-rt-disconnected:hover {
background: rgba(239, 68, 68, 0.14);
border-color: rgba(239, 68, 68, 0.4);
}
.bil-rt-fallback {
color: #fbbf24;
background: rgba(251, 191, 36, 0.1);
border-color: rgba(251, 191, 36, 0.32);
cursor: pointer;
}
.bil-rt-fallback i { color: #f59e0b; }
.bil-rt-fallback:hover {
background: rgba(251, 191, 36, 0.18);
border-color: rgba(251, 191, 36, 0.5);
transform: translateY(-1px);
}
.bil-rt-fallback:active {
transform: translateY(0);
}
@media (max-width: 768px) {
.bil-rt-badge {
font-size: 0.68rem;
padding: 3px 9px;
}
.bil-rt-badge i { font-size: 0.58rem; }
}
/* ════════════════════════════════════════════════════════════════════════════
§16 Payment Settings Modal — مودال إعدادات الدفع
────────────────────────────────────────────────────────────────────────────
• Toggle switches فخمة لـ Apple Pay / Card
• Radio cards للـ default methods
• Textarea لرسالة الطالب
• Badge للبيئة (test/live)
• Warning bar للأمان
════════════════════════════════════════════════════════════════════════════ */
/* ─── زر فتح الإعدادات في رأس الصفحة ─────────────────────────────────── */
.bil-settings-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
margin-inline-start: auto;
padding: 7px 14px;
border-radius: 10px;
background: rgba(96, 165, 250, 0.08);
border: 1px solid rgba(96, 165, 250, 0.25);
color: #93c5fd;
font-family: inherit;
font-size: 0.84rem;
font-weight: 600;
cursor: pointer;
transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.bil-settings-trigger:hover {
background: rgba(96, 165, 250, 0.14);
border-color: rgba(96, 165, 250, 0.4);
transform: translateY(-1px);
}
.bil-settings-trigger:active {
transform: translateY(0);
}
.bil-settings-trigger i {
font-size: 0.92em;
}
/* ─── مودال الإعدادات ─────────────────────────────────────────────────── */
.bil-settings-modal .bil-modal-box {
max-width: 640px;
width: 92%;
max-height: 92vh;
overflow: hidden;
display: flex;
flex-direction: column;
}
.bil-settings-box .bil-modal-body {
overflow-y: auto;
padding: 16px 18px;
}
/* ─── تحذير الأمان ────────────────────────────────────────────────────── */
.bil-settings-warn {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 14px;
margin-bottom: 16px;
background: linear-gradient(135deg, rgba(34, 197, 94, 0.06), rgba(15, 23, 42, 0.4));
border: 1px solid rgba(34, 197, 94, 0.25);
border-radius: 12px;
}
.bil-settings-warn > i {
flex: 0 0 auto;
font-size: 1.4rem;
color: #22c55e;
margin-top: 2px;
filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.35));
}
.bil-settings-warn > div {
flex: 1;
display: flex;
flex-direction: column;
gap: 3px;
}
.bil-settings-warn strong {
font-size: 0.92rem;
font-weight: 800;
color: #4ade80;
}
.bil-settings-warn small {
font-size: 0.8rem;
line-height: 1.5;
color: var(--muted, rgba(248, 250, 252, 0.65));
}
/* ─── أقسام الإعدادات ──────────────────────────────────────────────────── */
.bil-settings-section {
margin-bottom: 18px;
padding: 14px;
background: rgba(15, 23, 42, 0.4);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 12px;
}
.bil-settings-section h4 {
margin: 0 0 12px;
font-size: 0.95rem;
font-weight: 700;
display: flex;
align-items: center;
gap: 7px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.bil-settings-section h4 > i {
color: #fbbf24;
font-size: 0.92em;
}
.bil-settings-help {
margin: 0 0 12px;
font-size: 0.78rem;
line-height: 1.6;
color: var(--muted, rgba(248, 250, 252, 0.6));
}
/* ─── صف إعداد (label + value) ────────────────────────────────────────── */
.bil-settings-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 0;
border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
}
.bil-settings-row:last-child {
border-bottom: none;
}
.bil-settings-row > label {
flex: 1;
display: flex;
align-items: center;
gap: 10px;
font-size: 0.86rem;
color: var(--muted, rgba(248, 250, 252, 0.75));
}
.bil-settings-row > div {
flex: 0 0 auto;
}
.bil-settings-hint {
display: block;
margin-top: 4px;
font-size: 0.7rem;
color: var(--muted, rgba(248, 250, 252, 0.5));
}
/* ─── Toggle switch ───────────────────────────────────────────────────── */
.bil-toggle-row > label {
cursor: default;
}
.bil-toggle-row > label > div {
display: flex;
flex-direction: column;
gap: 2px;
}
.bil-toggle-row > label strong {
font-size: 0.9rem;
font-weight: 700;
color: rgba(248, 250, 252, 0.92);
}
.bil-toggle-row > label small {
font-size: 0.72rem;
color: var(--muted, rgba(248, 250, 252, 0.55));
line-height: 1.4;
}
.bil-toggle-wrap {
position: relative;
width: 50px;
height: 28px;
}
.bil-toggle-input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.bil-toggle-switch {
display: block;
width: 100%;
height: 100%;
border-radius: 999px;
background: rgba(148, 163, 184, 0.22);
border: 1px solid rgba(148, 163, 184, 0.32);
cursor: pointer;
transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.bil-toggle-switch::after {
content: '';
position: absolute;
top: 2px;
left: 2px; /* في LTR */
width: 22px;
height: 22px;
border-radius: 50%;
background: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
[dir="rtl"] .bil-toggle-switch::after {
left: auto;
right: 2px; /* في RTL: ابدأ من اليمين */
}
.bil-toggle-input:checked + .bil-toggle-switch {
background: linear-gradient(135deg, #22c55e, #16a34a);
border-color: rgba(34, 197, 94, 0.5);
box-shadow: 0 0 12px rgba(34, 197, 94, 0.32);
}
.bil-toggle-input:checked + .bil-toggle-switch::after {
left: 24px; /* LTR: ينزلق لليمين */
background: #fff;
}
[dir="rtl"] .bil-toggle-input:checked + .bil-toggle-switch::after {
left: auto;
right: 24px; /* RTL: ينزلق لليسار */
}
.bil-toggle-input:disabled + .bil-toggle-switch {
opacity: 0.5;
cursor: not-allowed;
}
.bil-toggle-input:focus-visible + .bil-toggle-switch {
outline: 2px solid rgba(96, 165, 250, 0.5);
outline-offset: 3px;
}
/* ─── Radio cards (الطرق الافتراضية) ────────────────────────────────── */
.bil-radio-group {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px;
}
.bil-radio-card {
position: relative;
padding: 14px 12px;
background: rgba(15, 23, 42, 0.5);
border: 2px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
cursor: pointer;
text-align: center;
transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.bil-radio-card > input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.bil-radio-card:hover:not(.checked) {
border-color: rgba(96, 165, 250, 0.32);
transform: translateY(-2px);
}
.bil-radio-card.checked {
border-color: rgba(96, 165, 250, 0.5);
background: linear-gradient(135deg, rgba(96, 165, 250, 0.1), rgba(15, 23, 42, 0.5));
box-shadow: 0 4px 14px rgba(59, 130, 246, 0.18),
inset 0 0 0 1px rgba(96, 165, 250, 0.22);
}
.bil-radio-content {
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
}
.bil-radio-content i {
font-size: 1.5rem;
margin-bottom: 4px;
color: #93c5fd;
}
.bil-radio-content strong {
font-size: 0.88rem;
font-weight: 700;
}
.bil-radio-content small {
font-size: 0.7rem;
line-height: 1.4;
color: var(--muted, rgba(248, 250, 252, 0.6));
}
/* ─── Textarea للرسالة ─────────────────────────────────────────────────── */
.bil-settings-textarea {
width: 100%;
padding: 10px 12px;
font-family: inherit;
font-size: 0.88rem;
line-height: 1.6;
background: rgba(15, 23, 42, 0.6);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
color: rgba(248, 250, 252, 0.92);
resize: vertical;
min-height: 70px;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.bil-settings-textarea:focus {
outline: none;
border-color: rgba(96, 165, 250, 0.4);
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.12);
}
.bil-settings-textarea:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* ─── Environment Badge ────────────────────────────────────────────────── */
.bil-env-badge {
display: inline-flex;
align-items: center;
gap: 5px;
margin-inline-start: 10px;
padding: 3px 11px;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.4px;
vertical-align: middle;
}
.bil-env-badge i {
font-size: 0.66rem;
}
.bil-env-test {
background: rgba(251, 191, 36, 0.12);
border: 1px solid rgba(251, 191, 36, 0.32);
color: #fcd34d;
}
.bil-env-test i { color: #fbbf24; }
.bil-env-live {
background: rgba(34, 197, 94, 0.12);
border: 1px solid rgba(34, 197, 94, 0.36);
color: #4ade80;
animation: bil-env-live-pulse 2.4s ease-in-out infinite;
}
.bil-env-live i { color: #22c55e; }
@keyframes bil-env-live-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
50% { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12); }
}
.bil-env-unknown {
background: rgba(148, 163, 184, 0.12);
border: 1px solid rgba(148, 163, 184, 0.28);
color: rgba(148, 163, 184, 0.85);
}
.bil-env-unknown i { color: #94a3b8; }
/* ─── Key Mask Display ─────────────────────────────────────────────────── */
.bil-key-mask {
display: inline-block;
padding: 4px 11px;
font-family: 'Courier New', monospace;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.5px;
background: rgba(96, 165, 250, 0.08);
border: 1px solid rgba(96, 165, 250, 0.22);
border-radius: 6px;
color: #93c5fd;
direction: ltr;
}
/* ─── Base Buttons (🆕 — تعريف فئات bil-btn المفقودة) ─────────────────── */
.bil-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 9px 18px;
font-family: inherit;
font-size: 0.86rem;
font-weight: 600;
border-radius: 9px;
border: 1px solid transparent;
background: transparent;
color: inherit;
cursor: pointer;
transition: background 0.18s ease, border-color 0.18s ease, transform 0.08s ease;
user-select: none;
text-decoration: none;
white-space: nowrap;
}
.bil-btn:hover:not(:disabled) {
transform: translateY(-1px);
}
.bil-btn:active:not(:disabled) {
transform: translateY(0);
}
.bil-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.bil-btn-sm {
padding: 6px 12px;
font-size: 0.78rem;
border-radius: 7px;
}
.bil-btn-primary {
background: linear-gradient(135deg, #3b82f6, #2563eb);
color: #ffffff;
border-color: rgba(59, 130, 246, 0.5);
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}
.bil-btn-primary:hover:not(:disabled) {
background: linear-gradient(135deg, #60a5fa, #3b82f6);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}
.bil-btn-ghost {
background: rgba(148, 163, 184, 0.08);
border-color: rgba(148, 163, 184, 0.22);
color: rgba(226, 232, 240, 0.85);
}
.bil-btn-ghost:hover:not(:disabled) {
background: rgba(148, 163, 184, 0.14);
border-color: rgba(148, 163, 184, 0.4);
color: #f1f5f9;
}
/* ─── Editable Publishable Key (🆕) ────────────────────────────────────── */
.bil-key-row > div.bil-key-edit-wrap {
display: flex;
flex-direction: column;
gap: 6px;
width: 100%;
}
.bil-key-display {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.bil-key-edit-btn {
font-size: 0.74rem !important;
padding: 4px 10px !important;
}
.bil-key-edit-btn i {
font-size: 0.7rem;
margin-inline-end: 4px;
}
.bil-settings-input,
.bil-key-input {
width: 100%;
padding: 10px 12px;
font-family: 'Courier New', monospace;
font-size: 0.86rem;
letter-spacing: 0.3px;
background: rgba(15, 23, 42, 0.6);
border: 1px solid rgba(96, 165, 250, 0.32);
border-radius: 10px;
color: #e0f2fe;
direction: ltr;
text-align: left;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.bil-settings-input:focus,
.bil-key-input:focus {
outline: none;
border-color: rgba(96, 165, 250, 0.6);
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}
.bil-settings-input::placeholder,
.bil-key-input::placeholder {
color: rgba(148, 163, 184, 0.45);
font-family: 'Tajawal', inherit;
}
.bil-key-actions {
display: flex;
gap: 8px;
margin-top: 2px;
}
.bil-key-actions .bil-btn-sm {
font-size: 0.78rem;
padding: 6px 14px;
}
.bil-key-actions .bil-btn-sm i {
font-size: 0.74rem;
margin-inline-end: 4px;
}
/* hint code styling داخل بلوك تعديل المفتاح */
.bil-key-edit-wrap .bil-settings-hint code {
display: inline-block;
padding: 1px 6px;
margin: 0 2px;
font-family: 'Courier New', monospace;
font-size: 0.78rem;
background: rgba(96, 165, 250, 0.1);
border: 1px solid rgba(96, 165, 250, 0.2);
border-radius: 4px;
color: #93c5fd;
direction: ltr;
}
/* ─── Footer Buttons ───────────────────────────────────────────────────── */
.bil-settings-modal .bil-modal-footer {
padding: 12px 18px;
display: flex;
gap: 8px;
justify-content: flex-end;
align-items: center;
border-top: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(15, 23, 42, 0.3);
}
/* ─── Mobile responsive ────────────────────────────────────────────────── */
@media (max-width: 600px) {
.bil-settings-modal .bil-modal-box {
width: 96%;
max-height: 96vh;
}
.bil-settings-trigger {
padding: 6px 10px;
font-size: 0.76rem;
}
.bil-settings-trigger > span {
display: none; /* الأيقونة فقط في الموبايل */
}
.bil-radio-group {
grid-template-columns: 1fr;
}
.bil-toggle-row > label small {
display: none; /* اختصار في الموبايل */
}
.bil-env-badge {
font-size: 0.62rem;
padding: 2px 9px;
}
}
/* ════════════════════════════════════════════════════════════════════════════
§17 Payment Links — روابط الدفع المشتركة
────────────────────────────────────────────────────────────────────────────
مودال إدارة الروابط:
• Status Card
• Tabs (Manage / Create)
• Create Form
• Active Links Table
• Last Created Box (يظهر بعد الإنشاء)
• Visits Modal (سجل الفتح)
════════════════════════════════════════════════════════════════════════════ */
.bil-pl-modal .bil-pl-box {
max-width: 760px;
width: 96%;
max-height: 94vh;
display: flex;
flex-direction: column;
}
.bil-pl-box .bil-modal-body {
overflow-y: auto;
padding: 14px 18px;
}
/* ─── زر الإجراء في صف الفاتورة (.bil-action-btn-pl) ──────────────────── */
.bil-action-btn-pl {
position: relative;
}
.bil-action-btn-pl:hover {
background: linear-gradient(135deg, rgba(168, 85, 247, 0.14), rgba(96, 165, 250, 0.1));
border-color: rgba(168, 85, 247, 0.4);
color: #c4b5fd;
}
/* ─── (A) Status Card ─────────────────────────────────────────────────── */
.bil-pl-status-card {
display: flex;
flex-direction: column;
gap: 12px;
padding: 14px 16px;
margin-bottom: 14px;
background: linear-gradient(135deg,
rgba(168, 85, 247, 0.06),
rgba(15, 23, 42, 0.5));
border: 1px solid rgba(168, 85, 247, 0.18);
border-radius: 14px;
}
.bil-pl-status-main {
display: flex;
align-items: center;
gap: 12px;
}
.bil-pl-status-icon {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: rgba(168, 85, 247, 0.14);
color: #c4b5fd;
font-size: 1.2rem;
flex-shrink: 0;
}
.bil-pl-status-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.bil-pl-status-hint {
font-size: 0.78rem;
color: rgba(248, 250, 252, 0.6);
line-height: 1.4;
}
.bil-pl-status-meta {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
padding-top: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.bil-pl-status-meta > div {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
text-align: center;
}
.bil-pl-status-meta strong {
font-size: 1.05rem;
font-weight: 700;
color: rgba(248, 250, 252, 0.92);
}
.bil-pl-status-meta small {
font-size: 0.7rem;
color: rgba(248, 250, 252, 0.55);
}
/* ─── Status pills (مفعَّلة/معطَّلة/إلخ) ──────────────────────────────── */
.bil-pl-status-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
border-radius: 999px;
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.2px;
}
.bil-pl-status-pill i { font-size: 0.6rem; }
.bil-pl-status-active {
background: rgba(34, 197, 94, 0.14);
border: 1px solid rgba(34, 197, 94, 0.35);
color: #4ade80;
}
.bil-pl-status-active i {
color: #22c55e;
animation: bil-pl-pulse 2.2s ease-in-out infinite;
}
.bil-pl-status-disabled,
.pl-stat-revoked,
.pl-stat-disabled {
background: rgba(239, 68, 68, 0.12);
border: 1px solid rgba(239, 68, 68, 0.3);
color: #fca5a5;
}
.pl-stat-active {
background: rgba(34, 197, 94, 0.14);
border: 1px solid rgba(34, 197, 94, 0.35);
color: #4ade80;
}
.pl-stat-expired {
background: rgba(251, 191, 36, 0.12);
border: 1px solid rgba(251, 191, 36, 0.3);
color: #fcd34d;
}
.pl-stat-paid {
background: rgba(96, 165, 250, 0.14);
border: 1px solid rgba(96, 165, 250, 0.35);
color: #93c5fd;
}
.bil-pl-status-none {
background: rgba(148, 163, 184, 0.1);
border: 1px solid rgba(148, 163, 184, 0.25);
color: rgba(248, 250, 252, 0.6);
}
@keyframes bil-pl-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
/* ─── (B) Last Created Box ─────────────────────────────────────────────── */
.bil-pl-created-box {
padding: 12px 14px;
margin-bottom: 14px;
background: linear-gradient(135deg,
rgba(34, 197, 94, 0.08),
rgba(15, 23, 42, 0.5));
border: 1px solid rgba(34, 197, 94, 0.32);
border-radius: 12px;
animation: bil-pl-slide-in 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes bil-pl-slide-in {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.bil-pl-created-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.bil-pl-created-head > i {
font-size: 1.4rem;
color: #22c55e;
filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.35));
}
.bil-pl-created-head > div {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.bil-pl-created-head strong {
font-size: 0.92rem;
font-weight: 700;
color: #4ade80;
}
.bil-pl-created-head small {
font-size: 0.74rem;
color: rgba(248, 250, 252, 0.6);
}
.bil-pl-created-close {
width: 26px; height: 26px;
border-radius: 6px;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(248, 250, 252, 0.6);
cursor: pointer;
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
}
.bil-pl-created-close:hover {
background: rgba(239, 68, 68, 0.1);
color: #ef4444;
}
.bil-pl-url-row {
display: flex;
gap: 6px;
align-items: center;
margin-bottom: 8px;
}
.bil-pl-url-input {
flex: 1;
padding: 8px 10px;
font-family: 'Courier New', monospace;
font-size: 0.78rem;
background: rgba(15, 23, 42, 0.7);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
color: rgba(248, 250, 252, 0.92);
direction: ltr;
cursor: text;
user-select: all;
}
.bil-pl-url-input:focus {
outline: none;
border-color: rgba(96, 165, 250, 0.5);
}
.bil-pl-copy-btn {
flex-shrink: 0;
}
.bil-pl-created-warning {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.72rem;
color: rgba(248, 250, 252, 0.6);
line-height: 1.5;
}
.bil-pl-created-warning > i {
color: #fbbf24;
}
/* ─── (C) Tabs ────────────────────────────────────────────────────────── */
.bil-pl-tabs {
display: flex;
gap: 4px;
margin-bottom: 14px;
padding: 4px;
background: rgba(15, 23, 42, 0.5);
border: 1px solid rgba(255, 255, 255, 0.04);
border-radius: 10px;
}
.bil-pl-tab {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 12px;
background: transparent;
border: none;
border-radius: 8px;
color: rgba(248, 250, 252, 0.6);
font-family: inherit;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
transition: all 0.18s ease;
}
.bil-pl-tab:hover:not(.active) {
background: rgba(255, 255, 255, 0.04);
color: rgba(248, 250, 252, 0.85);
}
.bil-pl-tab.active {
background: linear-gradient(135deg, rgba(168, 85, 247, 0.16), rgba(96, 165, 250, 0.12));
color: #c4b5fd;
box-shadow: inset 0 0 0 1px rgba(168, 85, 247, 0.28);
}
.bil-pl-tab-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: rgba(168, 85, 247, 0.2);
color: #c4b5fd;
font-size: 0.66rem;
font-weight: 700;
}
/* ─── (D) Create Form ─────────────────────────────────────────────────── */
.bil-pl-create-form {
display: flex;
flex-direction: column;
gap: 12px;
}
.bil-pl-section {
padding: 12px 14px;
background: rgba(15, 23, 42, 0.4);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 10px;
}
.bil-pl-section h4 {
margin: 0 0 10px;
font-size: 0.86rem;
font-weight: 700;
display: flex;
align-items: center;
gap: 6px;
color: rgba(248, 250, 252, 0.9);
}
.bil-pl-section h4 > i {
color: #c4b5fd;
font-size: 0.84em;
}
/* Radio cards (نوع الرابط) */
.bil-pl-radio-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 8px;
}
.bil-pl-radio-card {
position: relative;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: rgba(15, 23, 42, 0.5);
border: 2px solid rgba(255, 255, 255, 0.06);
border-radius: 10px;
cursor: pointer;
transition: all 0.18s ease;
}
.bil-pl-radio-card > input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.bil-pl-radio-card:hover:not(.checked) {
border-color: rgba(168, 85, 247, 0.3);
}
.bil-pl-radio-card.checked {
border-color: rgba(168, 85, 247, 0.5);
background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(15, 23, 42, 0.5));
box-shadow: inset 0 0 0 1px rgba(168, 85, 247, 0.22);
}
.bil-pl-radio-card > i {
font-size: 1.2rem;
color: #c4b5fd;
}
.bil-pl-radio-card > div {
display: flex;
flex-direction: column;
gap: 1px;
}
.bil-pl-radio-card strong {
font-size: 0.86rem;
font-weight: 700;
}
.bil-pl-radio-card small {
font-size: 0.7rem;
color: rgba(248, 250, 252, 0.55);
}
/* Installment picker */
.bil-pl-inst-picker {
display: flex;
align-items: center;
gap: 10px;
margin-top: 10px;
padding-top: 10px;
border-top: 1px dashed rgba(255, 255, 255, 0.05);
}
.bil-pl-inst-picker > label {
font-size: 0.78rem;
font-weight: 600;
color: rgba(248, 250, 252, 0.7);
}
.bil-pl-select,
.bil-pl-input {
flex: 1;
padding: 8px 11px;
background: rgba(15, 23, 42, 0.7);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
color: rgba(248, 250, 252, 0.92);
font-family: inherit;
font-size: 0.82rem;
transition: border-color 0.18s ease;
}
.bil-pl-select:focus,
.bil-pl-input:focus {
outline: none;
border-color: rgba(168, 85, 247, 0.4);
box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);
}
/* Pill row (مدة الصلاحية، طرق الدفع، عدد الاستخدامات) */
.bil-pl-pill-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 8px;
}
.bil-pl-pill {
padding: 6px 12px;
background: rgba(15, 23, 42, 0.6);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 999px;
color: rgba(248, 250, 252, 0.75);
font-family: inherit;
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
transition: all 0.18s ease;
}
.bil-pl-pill:hover:not(.active) {
background: rgba(168, 85, 247, 0.08);
border-color: rgba(168, 85, 247, 0.25);
color: rgba(248, 250, 252, 0.95);
}
.bil-pl-pill.active {
background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(96, 165, 250, 0.15));
border-color: rgba(168, 85, 247, 0.45);
color: #c4b5fd;
box-shadow: 0 2px 8px rgba(168, 85, 247, 0.18);
}
/* Toggle row (إعدادات العرض) */
.bil-pl-section-display {
background: rgba(15, 23, 42, 0.3);
}
.bil-pl-toggle-row {
display: flex;
flex-direction: column;
gap: 8px;
}
.bil-pl-toggle {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
font-size: 0.82rem;
color: rgba(248, 250, 252, 0.85);
}
.bil-pl-toggle > input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.bil-pl-toggle-track {
position: relative;
width: 38px;
height: 22px;
border-radius: 999px;
background: rgba(148, 163, 184, 0.2);
border: 1px solid rgba(148, 163, 184, 0.3);
transition: all 0.22s ease;
flex-shrink: 0;
}
.bil-pl-toggle-track::after {
content: '';
position: absolute;
top: 1px;
left: 1px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
[dir="rtl"] .bil-pl-toggle-track::after {
left: auto;
right: 1px;
}
.bil-pl-toggle > input:checked + .bil-pl-toggle-track {
background: linear-gradient(135deg, #a855f7, #8b5cf6);
border-color: rgba(168, 85, 247, 0.5);
}
.bil-pl-toggle > input:checked + .bil-pl-toggle-track::after {
left: 17px;
}
[dir="rtl"] .bil-pl-toggle > input:checked + .bil-pl-toggle-track::after {
left: auto;
right: 17px;
}
/* Create button */
.bil-pl-create-action {
display: flex;
justify-content: center;
padding-top: 8px;
}
.bil-pl-create-btn {
min-width: 200px;
background: linear-gradient(135deg, #a855f7, #8b5cf6);
border: 1px solid rgba(168, 85, 247, 0.5);
box-shadow: 0 4px 14px rgba(168, 85, 247, 0.25);
}
.bil-pl-create-btn:hover:not(:disabled) {
background: linear-gradient(135deg, #9333ea, #7c3aed);
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(168, 85, 247, 0.35);
}
.bil-pl-create-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
/* ─── (E) Active Links Table ──────────────────────────────────────────── */
.bil-pl-table-wrap {
overflow-x: auto;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.bil-pl-table {
width: 100%;
border-collapse: collapse;
font-size: 0.78rem;
}
.bil-pl-table thead {
background: rgba(15, 23, 42, 0.6);
}
.bil-pl-table th {
padding: 9px 10px;
text-align: start;
font-size: 0.72rem;
font-weight: 700;
color: rgba(248, 250, 252, 0.6);
letter-spacing: 0.4px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.bil-pl-table td {
padding: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
vertical-align: middle;
}
.bil-pl-row:hover {
background: rgba(168, 85, 247, 0.04);
}
.bil-pl-type {
display: flex;
flex-direction: column;
gap: 2px;
}
.bil-pl-type strong { font-weight: 600; }
.bil-pl-type small {
font-size: 0.66rem;
color: rgba(248, 250, 252, 0.5);
}
.bil-pl-preview {
display: inline-block;
padding: 2px 7px;
font-family: 'Courier New', monospace;
font-size: 0.74rem;
background: rgba(168, 85, 247, 0.1);
border: 1px solid rgba(168, 85, 247, 0.22);
border-radius: 5px;
color: #c4b5fd;
direction: ltr;
letter-spacing: 0.4px;
}
/* ─── Security Badges (مؤشرات بصرية في صف الجدول) ───────────────────── */
.bil-pl-badges {
display: inline-flex;
gap: 4px;
margin-inline-start: 6px;
vertical-align: middle;
}
.bil-pl-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 6px;
font-size: 0.72rem;
border: 1px solid transparent;
cursor: help;
transition: transform 0.15s ease;
}
.bil-pl-badge:hover {
transform: scale(1.1);
}
.bil-pl-badge-secure {
background: rgba(34, 197, 94, 0.14);
border-color: rgba(34, 197, 94, 0.32);
color: #4ade80;
}
.bil-pl-badge-soon {
background: rgba(251, 191, 36, 0.14);
border-color: rgba(251, 191, 36, 0.32);
color: #fcd34d;
animation: bil-pl-badge-pulse 2s ease-in-out infinite;
}
@keyframes bil-pl-badge-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
.bil-pl-badge-paid {
background: rgba(96, 165, 250, 0.14);
border-color: rgba(96, 165, 250, 0.32);
color: #93c5fd;
}
.bil-pl-badge-disabled {
background: rgba(239, 68, 68, 0.12);
border-color: rgba(239, 68, 68, 0.3);
color: #fca5a5;
}
.bil-pl-badge-expired {
background: rgba(148, 163, 184, 0.12);
border-color: rgba(148, 163, 184, 0.28);
color: rgba(248, 250, 252, 0.6);
}
.bil-pl-actions {
display: flex;
gap: 4px;
}
.bil-pl-act-btn {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 7px;
background: rgba(15, 23, 42, 0.7);
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(248, 250, 252, 0.7);
font-size: 0.78rem;
cursor: pointer;
transition: all 0.16s ease;
}
.bil-pl-act-btn:hover {
background: rgba(168, 85, 247, 0.14);
border-color: rgba(168, 85, 247, 0.3);
color: #c4b5fd;
transform: translateY(-1px);
}
.bil-pl-act-danger:hover {
background: rgba(239, 68, 68, 0.14);
border-color: rgba(239, 68, 68, 0.3);
color: #fca5a5;
}
/* ─── (F) Visits Modal ────────────────────────────────────────────────── */
.bil-pl-visits-modal .bil-pl-visits-box {
max-width: 600px;
}
.bil-pl-visits-table {
width: 100%;
border-collapse: collapse;
font-size: 0.8rem;
}
.bil-pl-visits-table thead {
background: rgba(15, 23, 42, 0.6);
}
.bil-pl-visits-table th {
padding: 8px 10px;
text-align: start;
font-size: 0.7rem;
font-weight: 700;
color: rgba(248, 250, 252, 0.6);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.bil-pl-visits-table td {
padding: 9px 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.bil-pl-visit-badge {
display: inline-flex;
align-items: center;
padding: 2px 9px;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
}
.pl-action-opened {
background: rgba(96, 165, 250, 0.12);
border: 1px solid rgba(96, 165, 250, 0.28);
color: #93c5fd;
}
.pl-action-started {
background: rgba(251, 191, 36, 0.12);
border: 1px solid rgba(251, 191, 36, 0.3);
color: #fcd34d;
}
.pl-action-success {
background: rgba(34, 197, 94, 0.14);
border: 1px solid rgba(34, 197, 94, 0.35);
color: #4ade80;
}
.pl-action-failed {
background: rgba(239, 68, 68, 0.12);
border: 1px solid rgba(239, 68, 68, 0.3);
color: #fca5a5;
}
.pl-action-blocked,
.pl-action-expired {
background: rgba(148, 163, 184, 0.1);
border: 1px solid rgba(148, 163, 184, 0.25);
color: rgba(248, 250, 252, 0.6);
}
/* ─── Mobile responsive ───────────────────────────────────────────────── */
@media (max-width: 700px) {
.bil-pl-modal .bil-pl-box {
width: 98%;
max-height: 96vh;
}
.bil-pl-status-meta {
grid-template-columns: 1fr;
}
.bil-pl-status-meta > div {
flex-direction: row;
justify-content: space-between;
}
.bil-pl-radio-row {
grid-template-columns: 1fr;
}
.bil-pl-url-row {
flex-direction: column;
align-items: stretch;
}
.bil-pl-table {
font-size: 0.7rem;
}
.bil-pl-table th,
.bil-pl-table td {
padding: 6px 7px;
}
.bil-pl-tabs .bil-pl-tab {
font-size: 0.74rem;
padding: 7px 8px;
}
}
/* ════════════════════════════════════════════════════════════════════════════
🔄 تحديث ١٢ مايو ٢٠٢٦ — إصلاح Dark Mode لحقول البحث والفلاتر
────────────────────────────────────────────────────────────────────────────
المشكلة: حقول "بحث باسم الطالب"، "بحث بالجوال"، "كل الحالات"، إلخ
كانت تعرض النص بلون أسود على خلفية داكنة (color: inherit
لم يكن كافياً لأن user-agent stylesheet يطبّق لون نصي
ثابت لـ /