@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap');

/* ================== المتغيرات والثيمات ================== */
/* color-scheme يرسم عناصر المتصفح الأصلية (قوائم السيلكت وشارات
   التمرير) بألوان الثيم نفسه — فلا يبدو أي حقل «غريقاً» بمظهر
   أبيض معكوس وسط واجهة داكنة */
:root {
    color-scheme: dark;
    --bg: #0b1220;
    --card: #16213a;
    --text: #ffffff;
    --border: #2c3e5d;
    --inner-bg: #0e1830;
    --item-bg: #12203c;
    --muted-text: #94a3b8;
    --tab-inactive: #1b2947;
    --primary: #3b82f6;
    --primary-dark: #2563eb;
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --radius: 12px;
    --shadow-sm: 0 2px 8px rgba(2, 6, 23, 0.32);
    --shadow-md: 0 10px 28px rgba(2, 6, 23, 0.45);
    /* عناصر موحدة تتبع الثيم */
    --thead-bg: linear-gradient(180deg, #1d3a8f, #16307c);
    --thead-text: #ffffff;
    --thead-line: #3b82f6;
    --row-even: rgba(148, 163, 184, 0.05);
    --row-hover: rgba(59, 130, 246, 0.09);
    --hl-bg: #93c5fd;
    --hl-text: #12315e;
    --btn2-text: #ffffff;
    --tint: rgba(59, 130, 246, 0.1);
    --tint-line: rgba(59, 130, 246, 0.32);
}

body.theme-dark {
    --bg: #000000;
    --card: #0d0d10;
    --text: #f8fafc;
    --border: #26262b;
    --inner-bg: #111114;
    --item-bg: #18181b;
    --muted-text: #a1a1aa;
    --tab-inactive: #18181b;
    --primary: #3b82f6;
    --primary-dark: #2563eb;
    --success: #34d399;
    --danger: #f87171;
    --warning: #fbbf24;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.6);
    --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.7);
    --thead-bg: linear-gradient(180deg, #1c2742, #141d33);
    --thead-text: #e2e8f0;
    --thead-line: #3b82f6;
    --row-even: rgba(148, 163, 184, 0.05);
    --row-hover: rgba(59, 130, 246, 0.14);
    --hl-bg: #93c5fd;
    --hl-text: #12315e;
    --btn2-text: #ffffff;
    --tint: rgba(59, 130, 246, 0.09);
    --tint-line: rgba(59, 130, 246, 0.3);
}

body.theme-light {
    color-scheme: light;
    --bg: #eef1f6;
    --card: #ffffff;
    --text: #0f172a;
    --border: #d5dce8;
    --inner-bg: #f5f7fb;
    --item-bg: #f0f3f9;
    --muted-text: #52627b;
    --tab-inactive: #e2e8f0;
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --success: #059669;
    --danger: #dc2626;
    --warning: #d97706;
    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 10px 28px rgba(15, 23, 42, 0.13);
    --thead-bg: linear-gradient(180deg, #e9eef7, #dce5f1);
    --thead-text: #1e3a8a;
    --thead-line: #2563eb;
    --row-even: rgba(15, 23, 42, 0.035);
    --row-hover: rgba(37, 99, 235, 0.09);
    --hl-bg: #bfdbfe;
    --hl-text: #1e40af;
    --btn2-text: #1e293b;
    --tint: rgba(37, 99, 235, 0.07);
    --tint-line: rgba(37, 99, 235, 0.28);
}

/* ================== أساسيات ================== */
* {
    box-sizing: border-box;
}

body {
    background: radial-gradient(1200px 600px at 80% -10%, rgba(59, 130, 246, 0.08), transparent), var(--bg);
    color: var(--text);
    padding: 20px;
    font-family: 'Cairo', sans-serif;
    line-height: 1.6;
    transition: background 0.3s, color 0.3s;
    min-height: 100vh;
}

button {
    font-family: inherit;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.hidden {
    display: none !important;
}

.container {
    max-width: 1060px;
    margin: 0 auto;
    background: var(--card);
    padding: 28px;
    border-radius: 20px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    position: relative;
}

/* ================== شريط التنقل ================== */
.nav-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 30px;
    gap: 12px;
}

.nav-buttons button {
    background: var(--tab-inactive);
    border: 1px solid var(--border);
    color: var(--muted-text);
    padding: 10px 20px;
    font-size: 14px;
    cursor: pointer;
    font-weight: 700;
    border-radius: 12px;
    transition: background-color .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
    box-shadow: var(--shadow-sm);
    -webkit-tap-highlight-color: transparent;
}

.nav-buttons button:hover {
    color: var(--text);
    border-color: var(--primary);
    background: var(--card);
    transform: translateY(-2px);
}

.nav-buttons button.active {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 5px 16px rgba(59, 130, 246, 0.35);
    transform: translateY(-2px);
}

/* ================== ترويسة الصفحات ================== */
.page {
    display: none;
}

.page.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

.page-header {
    position: relative;
    margin-bottom: 22px;
}

.page-header h1 {
    margin: 0 0 4px 0;
    font-size: 24px;
    font-weight: 800;
}

.page-header p {
    margin: 0;
    color: var(--muted-text);
    font-size: 14px;
}

/* ================== أزرار الإضافة والحفظ ================== */
.btn-add {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #ffffff;
    padding: 11px 18px;
    border: none;
    border-radius: 11px;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    transition: background-color .2s, transform .2s, box-shadow .2s;
    box-sizing: border-box;
    white-space: nowrap;
    box-shadow: 0 3px 12px rgba(37, 99, 235, 0.25);
}

.btn-add:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
}

.btn-add:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ================== النماذج والأزرار ================== */
/* حقول الاختيار (select): سهم مخصص موضع دقيق ومحاذاة عمودية سوية
   بذات ارتفاع حقول الإدخال — فلا يبدو النص غريقاً ولا يختلف ارتفاع
   الحقل عن جيرانه في أي نافذة (إصلاح شامل للثيمات كلها) */
input,
select,
textarea {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--inner-bg);
    color: var(--text);
    transition: border-color 0.3s, box-shadow 0.3s;
    box-sizing: border-box;
    width: 100%;
    font-family: inherit;
    line-height: 1.5;
}

select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 12px center;
    background-size: 13px;
    padding-left: 34px;
    min-height: 47px;
    cursor: pointer;
}

/* سيلكتات مدمجة (أوقات الدوام والنوع) — سهم أصغر بمساحة أضيق */
.shift-ts,
.shift-debt-kind,
.shift-select {
    background-position: left 8px center;
    background-size: 10px;
    padding-left: 26px;
}

/* قوائم الخيارات بلون الثيم على المتصفحات التي تدعمها */
select option {
    background-color: var(--card);
    color: var(--text);
}

/* حلقة تركيز لوحة المفاتيح لا تُلغى أبداً — التنقل بـTab يبقى مرئياً */
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 5px rgba(59, 130, 246, 0.3);
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.grid-form-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}

.section-select-dropdown {
    width: 100%;
    padding: 12px;
    font-size: 15px;
}


.btn-cancel {
    background-color: var(--danger);
    color: white;
    padding: 12px;
    display: none;
    font-weight: bold;
    border-radius: 10px;
    border: none;
    transition: background-color .2s, transform .2s;
}

.btn-cancel.visible {
    display: block;
}

.btn-cancel:hover {
    background-color: #dc2626;
    transform: translateY(-2px);
}

.btn-renew {
    background: linear-gradient(135deg, var(--success), #059669);
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    transition: transform .2s, box-shadow .2s;
}

.btn-renew:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.btn-secondary {
    background-color: var(--border);
    color: white;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: 0.2s;
    font-weight: bold;
}

.btn-secondary:hover {
    background-color: var(--muted-text);
}

.btn-sm {
    padding: 8px 15px !important;
    font-size: 14px;
}

.btn-danger {
    background: linear-gradient(135deg, var(--danger), #dc2626);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    transition: transform .2s, box-shadow .2s;
}

.btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.btn-qty {
    padding: 4px 10px;
    background: var(--border);
    color: var(--text);
    cursor: pointer;
    border-radius: 6px;
    border: none;
    transition: 0.2s;
}

.btn-qty:hover {
    background: var(--muted-text);
}

.btn-delete {
    background-color: var(--danger);
    color: white;
    border-radius: 6px;
    border: none;
    padding: 6px 12px;
}

.btn-delete:hover:not(:disabled) {
    background-color: #dc2626;
}

.btn-edit {
    background-color: var(--success);
    color: white;
    margin-inline-start: 5px;
    border-radius: 6px;
    border: none;
    padding: 6px 12px;
}

.btn-edit:hover {
    background-color: #059669;
}

.row-actions-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* ================== شريط الأدوات والبحث ================== */
.table-toolbar {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.search-container {
    position: relative;
    z-index: 100;
    flex: 1;
    min-width: 180px;
}

.search-input-field {
    width: 100%;
    padding: 11px 12px;
    font-size: 14px;
}

.search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    z-index: 9999;
    max-height: 220px;
    overflow-y: auto;
    box-shadow: var(--shadow-md);
    display: none;
}

.search-dropdown.show {
    display: block;
    animation: dropDownAnim 0.18s ease;
}

.search-item {
    padding: 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    transition: background 0.2s;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.search-item:last-child {
    border-bottom: none;
}

.search-item:hover {
    background: var(--border);
}

.search-item-price {
    color: var(--muted-text);
    font-size: 13px;
}

.search-item.no-result {
    color: var(--muted-text);
    cursor: default;
    justify-content: center;
}

.search-hl {
    color: var(--primary);
    font-weight: 800;
}

.dropdown-container {
    position: relative;
    display: flex;
    align-items: center;
}

.btn-menu {
    background: transparent;
    border: none;
    color: var(--muted-text);
    font-size: 26px;
    cursor: pointer;
    padding: 5px 10px;
    transition: color 0.2s, background 0.2s;
    border-radius: 8px;
}

.btn-menu:hover {
    color: var(--text);
    background: var(--border);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    min-width: 180px;
    box-shadow: var(--shadow-md);
    z-index: 9999;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.dropdown-menu.show {
    display: flex;
    animation: dropDownAnim 0.2s ease;
}

.dropdown-menu button {
    background: none;
    border: none;
    color: var(--text);
    padding: 14px 18px;
    text-align: right;
    cursor: pointer;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
    border-bottom: 1px solid var(--border);
}

.dropdown-menu button:last-child {
    border-bottom: none;
}

.dropdown-menu button:hover {
    background: var(--border);
}

.menu-section-title {
    padding: 10px 18px 6px;
    font-size: 12px;
    color: var(--muted-text);
    font-weight: bold;
    border-bottom: 1px solid var(--border);
}

.mi-blue {
    color: #60a5fa;
    font-size: 16px;
}


.mi-red {
    color: #f87171;
    font-size: 16px;
}

.mi-red-text {
    color: #f87171;
}

/* ================== شريط الإجراءات الجماعية ================== */
.bulk-actions-bar {
    background: var(--card);
    border: 1px solid var(--primary);
    padding: 12px 20px;
    border-radius: 10px;
    display: none;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
    animation: fadeIn 0.3s ease;
    position: sticky;
    top: 0;
    z-index: 20;
    margin-bottom: 10px;
}

.bulk-actions-bar.visible {
    display: flex;
}

.bulk-actions-bar button:disabled,
.bulk-actions-bar select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--border) !important;
}

.bulk-actions-bar .section-select-dropdown {
    width: auto;
    padding: 8px 12px;
    margin-bottom: 0;
}

.selected-count-text {
    font-weight: bold;
    color: var(--primary);
    font-size: 15px;
}

.selected-sum-badge {
    display: none;
    background-color: rgba(16, 185, 129, 0.15);
    color: var(--success);
    border: 1px solid var(--success);
    padding: 6px 15px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 14px;
    margin-inline-start: auto;
    align-items: center;
    gap: 5px;
}

.selected-sum-badge.show-badge {
    display: flex;
    animation: fadeIn 0.3s ease;
}

.selected-sum-badge span {
    font-size: 16px;
    color: var(--text);
}

/* ================== الجداول ================== */
.table-wrapper {
    max-height: 500px;
    overflow-y: auto;
    overflow-x: auto;
    border-radius: 12px;
    background-color: var(--inner-bg);
    box-shadow: var(--shadow-sm);
    margin-top: 15px;
    position: relative;
    border: 1px solid var(--border);
}

.table-wrapper::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.table-wrapper::-webkit-scrollbar-track {
    background: var(--bg);
    border-radius: 10px;
}

.table-wrapper::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 10px;
}

.table-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--muted-text);
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 12px 10px;
    border: 1px solid var(--border);
    text-align: center;
}

/* سطر العناوين متجمد دائماً: يبقى ظاهراً أعلى الجدول أثناء تمرير
   الصفوف داخله — أسلوب العرض الوحيد المعتمد لكل جداول التطبيق.
   الخلفية معتمة (thead-bg) فلا يظهر خلفها أي محتوى عند التمرير. */
.table-wrapper thead th {
    position: sticky;
    top: 0;
    z-index: 5;
}


tbody tr {
    transition: background 0.15s;
}

tbody tr:hover {
    background: rgba(59, 130, 246, 0.07);
}

tbody tr:nth-child(even) {
    background: rgba(148, 163, 184, 0.04);
}

tbody tr:hover:nth-child(even) {
    background: rgba(59, 130, 246, 0.07);
}

.cell-name {
    font-weight: 600;
}

.empty-state-row td {
    border: none !important;
}

.empty-state-box {
    padding: 34px 20px;
    text-align: center;
    color: var(--muted-text);
    font-size: 14.5px;
    border: 1.5px dashed var(--border);
    border-radius: 12px;
    margin: 10px;
    background: var(--card);
    line-height: 1.9;
}

.selection-col {
    display: none;
    width: 40px;
    cursor: pointer;
}

.selection-mode-active .selection-col {
    display: table-cell;
}

.selection-mode-active {
    user-select: none;
    -webkit-user-select: none;
}

.custom-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary);
}


/* ================== الشريط السفلي ================== */
.bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    gap: 12px;
}

#totalProfit {
    font-weight: bold;
    font-size: 15px;
}

/* ================== التبويبات ================== */
.tabs-flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 25px;
    justify-content: center;
    background: var(--inner-bg);
    padding: 12px;
    border-radius: 12px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

.tab-button-item {
    padding: 10px 22px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
    background: var(--tab-inactive);
    color: var(--text);
    transition: background-color .2s, transform .2s, box-shadow .2s;
    box-shadow: var(--shadow-sm);
}

.tab-button-item:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.tab-button-item.tab-active {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #ffffff;
}

/* ================== بطاقات الملخص (المحاسبة) ================== */
.summary-cards-group {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.summary-card h4 {
    margin: 0 0 8px 0;
    color: var(--muted-text);
    font-size: 15px;
    font-weight: normal;
}

.summary-value {
    font-size: 24px;
    font-weight: 800;
}

.text-green {
    color: var(--success);
}

.text-blue {
    color: var(--primary);
}

.text-danger {
    color: var(--danger);
    font-weight: bold;
}

.text-warning {
    color: var(--warning);
    font-weight: bold;
}

/* ================== بطاقات المبيعات ================== */
.sales-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.sales-card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    cursor: pointer;
    transition: transform .2s, border-color .2s, box-shadow .2s;
}

.sales-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

.sales-card-select {
    display: none;
    position: absolute;
    top: 12px;
    left: 12px;
}

.selection-mode-active .sales-card-select {
    display: block;
}

.sales-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.sales-card-day {
    font-weight: 800;
    font-size: 16px;
}

.sales-card-date {
    color: var(--muted-text);
    font-size: 13px;
}

.sales-card-body {
    margin: 14px 0;
    display: grid;
    gap: 6px;
    font-size: 14px;
}

.sales-card-body div {
    display: flex;
    justify-content: space-between;
}

.sales-card-body span {
    color: var(--muted-text);
}

.sales-card-foot {
    border-top: 1px dashed var(--border);
    padding-top: 10px;
    color: var(--muted-text);
    font-size: 13px;
}

/* ================== صفحة الصندوق ================== */
.cash-lock {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 20px;
}

.cash-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

.cash-period-tabs {
    display: flex;
    gap: 8px;
    background: var(--inner-bg);
    padding: 8px;
    border-radius: 12px;
}

.cash-period-tabs .tab-button-item {
    margin: 0;
}

.cash-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    margin-bottom: 22px;
}

.cash-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 15px;
    text-align: center;
}

.cash-card.balance {
    border-color: var(--success);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.12);
}

.cash-card h4 {
    margin: 0 0 8px 0;
    color: var(--muted-text);
    font-size: 14px;
    font-weight: normal;
}

/* عنوان قسم يفصل الإجراءات عن بطاقات الإحصائيات */
.cash-section-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 12px 0;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--border);
}

.cash-section-head h3 {
    margin: 0;
    font-size: 16px;
    position: relative;
    padding-inline-start: 12px;
}

.cash-section-head h3::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 16px;
    border-radius: 4px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.cash-section-head p {
    margin: 0;
    font-size: 12.5px;
    color: var(--muted-text);
}

.cash-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}

.cash-act {
    padding: 13px 12px;
    border: none;
    border-radius: 12px;
    color: #ffffff;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-align: center;
}

.cash-act:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.cash-act-title {
    font-size: 15px;
    font-weight: 800;
}

.cash-act-desc {
    font-size: 11.5px;
    font-weight: 600;
    opacity: 0.85;
    line-height: 1.4;
}

.act-expense {
    background: linear-gradient(135deg, var(--danger), #dc2626);
}

.act-deposit {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.act-debt {
    background: linear-gradient(135deg, var(--warning), #d97706);
}

.act-receiv {
    background: linear-gradient(135deg, var(--success), #059669);
}

.cash-filter-select {
    width: auto;
    min-width: 170px;
}

.cash-kind {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
}

.k-profit {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
}

.k-expense {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger);
}

.k-deposit {
    background: rgba(59, 130, 246, 0.15);
    color: var(--primary);
}

/* حالة العطلة — يوم راحة مسجَّل بوضوح: لون هادئ محايد يتمايز عن
   الحضور الأخضر والغياب الأحمر، ويعمل في كل الثيمات */
.k-vacation {
    background: rgba(148, 163, 184, 0.16);
    color: #64748b;
}

.w-vac-text {
    color: #64748b;
    font-weight: 700;
}

.k-debt {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
}

.k-receiv {
    background: rgba(6, 182, 212, 0.15);
    color: #06b6d4;
}

.cash-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
}

.st-done {
    background: rgba(148, 163, 184, 0.15);
    color: var(--muted-text);
}

.st-pending {
    background: rgba(245, 158, 11, 0.2);
    color: var(--warning);
}

.amt-pos {
    color: var(--success);
    font-weight: bold;
}

.amt-neg {
    color: var(--danger);
    font-weight: bold;
}

.amt-pend {
    color: var(--muted-text);
    font-weight: bold;
}

.cash-modal-body {
    text-align: right;
    margin-bottom: 18px;
    display: grid;
    gap: 14px;
    /* منطقة التمرير داخل النافذة — الأزرار أسفلها لا تغرق أبداً */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-inline-end: 4px;
}

.cash-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--muted-text);
    font-weight: 600;
}

.modal-buttons-row {
    display: flex;
    gap: 12px;
    /* شريط الحسم: يبقى مثبتاً أسفل النافذة مهما طال المحتوى فوقه */
    flex-shrink: 0;
}

.modal-buttons-row button {
    flex: 1;
}

/* ================== الإعدادات ================== */
#settingsMainView {
    background: var(--inner-bg);
    border-radius: 14px;
    padding: 10px 0;
    margin-top: 20px;
    box-shadow: var(--shadow-sm);
}

.setting-item {
    padding: 20px;
    cursor: pointer;
    transition: background 0.2s, padding 0.2s;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 15px;
}

.setting-item:last-child {
    border-bottom: none;
}

.setting-item:hover {
    background: var(--card);
    padding-right: 26px;
}

.setting-item-text {
    flex: 1;
}

.setting-item h3 {
    margin: 0 0 6px 0;
    font-size: 16px;
    color: var(--text);
}

.setting-item p {
    margin: 0;
    font-size: 13px;
    color: var(--muted-text);
}

.setting-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.setting-arrow {
    color: var(--muted-text);
    font-size: 18px;
}

#settingsDynamicView {
    margin-top: 20px;
}

.flex-header-container {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    gap: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border);
}

.tight-header {
    margin-bottom: 15px;
}

.settings-title {
    margin: 0;
    font-size: 20px;
}

.back-navigation-btn {
    background: var(--border);
    border: none;
    border-radius: 8px;
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
    font-weight: bold;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color .2s, transform .2s;
    box-shadow: var(--shadow-sm);
}

.back-navigation-btn:hover {
    background: var(--primary);
    transform: translateX(3px);
}

.management-input-field {
    flex: 1;
}

.deactivate-full-btn {
    width: 100%;
    cursor: pointer;
    padding: 15px;
    margin-top: 10px;
}

/* ================== الاستيراد ================== */
.import-instructions {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid var(--primary);
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    color: var(--text);
    font-size: 14px;
    line-height: 1.6;
}

.import-instructions ul {
    margin-top: 10px;
    margin-bottom: 0;
    padding-inline-start: 20px;
}

.import-section-picker {
    margin-bottom: 15px;
}

.import-section-picker label {
    display: block;
    margin-bottom: 8px;
    color: var(--muted-text);
    font-size: 14px;
}

.import-textarea {
    width: 100%;
    height: 150px;
    background: var(--inner-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 15px;
    font-family: monospace;
    font-size: 14px;
    resize: none;
    overflow-y: auto;
    margin-bottom: 15px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.import-textarea:focus {
    outline: none;
    border-color: var(--success);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
}

.import-textarea::placeholder {
    color: var(--muted-text);
}

.btn-import {
    width: 100%;
    padding: 14px;
}

.backup-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ================== بطاقات المظهر ================== */
.theme-selection-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.theme-select-card {
    background: var(--item-bg);
    border: 1px solid var(--border);
    padding: 18px 22px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, padding .2s;
}

.theme-select-card:hover {
    border-color: var(--primary);
    padding-right: 28px;
}

.theme-select-card.active-theme {
    border-color: var(--primary);
    background: rgba(59, 130, 246, 0.08);
}

.theme-card-info h4 {
    margin: 0 0 6px 0;
    font-size: 16px;
}

.theme-card-info p {
    margin: 0;
    font-size: 13px;
    color: var(--muted-text);
}

.theme-checkmark {
    font-size: 20px;
    color: var(--primary);
    font-weight: bold;
    width: 24px;
    text-align: center;
}

/* ================== المحاسبة (نقطة البيع) ================== */
.pos-layout-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-top: 15px;
}

.pos-invoice-area {
    background: var(--card);
    border-radius: 14px;
    border: 1px solid var(--border);
    padding: 15px;
    box-shadow: var(--shadow-sm);
}

.pos-sidebar-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pos-invoice-actions {
    background: var(--card);
    border-radius: 14px;
    border: 1px solid var(--primary);
    padding: 20px;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.15);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.pos-invoice-actions .pos-total-card {
    background: var(--inner-bg);
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    border: none;
    box-shadow: none;
}

.btn-sell-invoice {
    background: linear-gradient(135deg, var(--success), #059669);
    color: white;
    padding: 14px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
    transition: transform .2s, box-shadow .2s;
    width: 100%;
}

.btn-sell-invoice:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.pos-total-card {
    background: var(--card);
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    border: 1px solid var(--primary);
    box-shadow: inset 0 0 10px rgba(59, 130, 246, 0.1);
}

.pos-total-card h4 {
    margin: 0 0 10px 0;
    color: var(--muted-text);
}

.pos-total-card .summary-value {
    font-size: 28px;
    font-weight: 800;
}

.qty-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.qty-value {
    min-width: 28px;
    text-align: center;
    font-weight: bold;
}

/* ================== النوافذ المنبثقة ================== */
.modal-backdrop-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 6, 23, 0.72);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    direction: rtl;
}

.modal-backdrop-layer.show {
    display: flex;
}

.modal-box-content {
    background: var(--card);
    padding: 26px 24px;
    border-radius: 18px;
    max-width: 450px;
    width: 90%;
    text-align: center;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    animation: popIn 0.25s ease;
    /* النافذة لا تتجاوز الشاشة أبداً: بنية عمودية — العنوان ثابت أعلى،
       المحتوى الطويل يتمرر داخله، وشريط أزرار الإلغاء/التأكيد يبقى
       مثبتاً في متناول اليد دائماً حتى على أصغر الشاشات — لا زر غائر
       تحت حد الشاشة بعد اليوم في أي نافذة كانت */
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow: hidden;
}

.modal-title {
    flex-shrink: 0;
    margin: 0 0 10px 0;
    font-size: 18px;
}

/* حقول نماذج النوافذ (نماذج العمال والصندوق وغيرها): حدود أوضح
   وتوحيد تام بين الحقول كافة — فلا يبدو أي حقل غائراً في خلفية
   النافذة ولا تختفي حدوده السفلية بين بقية العناصر */
.cash-modal-body input,
.cash-modal-body select,
.cash-modal-body textarea {
    border: 1.5px solid var(--border);
    background: var(--inner-bg);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.10), 0 1px 2px rgba(2, 6, 23, 0.18);
}
.cash-modal-body input:focus,
.cash-modal-body select:focus,
.cash-modal-body textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16);
}

.modal-description-text {
    font-size: 15px;
    margin-bottom: 18px;
    color: var(--muted-text);
    line-height: 1.6;
    white-space: pre-line;
    /* منطقة التمرير داخل النافذة — أزرار الحسم تبقى ظاهرة أسفلها دوماً */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-inline-end: 4px;
}

.modal-description-text.modal-html-mode {
    white-space: normal;
}

.modal-buttons-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* شريط الحسم: يبقى مثبتاً أسفل النافذة مهما طال المحتوى فوقه */
    flex-shrink: 0;
}

.modal-action-danger,
.modal-action-primary,
.modal-action-secondary {
    border: none;
    padding: 14px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    font-family: inherit;
    transition: transform .2s, box-shadow .2s;
}

.modal-action-danger {
    background: var(--danger);
    color: white;
}

.modal-action-danger:hover {
    background: #dc2626;
    transform: translateY(-2px);
}

.modal-action-primary {
    background: var(--primary);
    color: white;
}

.modal-action-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

.modal-action-secondary {
    background: var(--border);
    color: white;
}

.modal-action-secondary:hover {
    background: var(--muted-text);
}

/* ================== التنبيهات (Toast) ================== */
#toast-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    /* أعلى من كل البوابات (بوابة السحابة 100000، بوابة الخطة 100001، نافذة المفتاح 100002)
       كي تظهر التنبيهات — نجاح التفعيل وغيره — فوقها جميعاً */
    z-index: 100003;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast-msg {
    color: white;
    padding: 12px 24px;
    border-radius: 11px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    font-weight: bold;
    font-size: 14.5px;
    opacity: 0;
    transition: opacity 0.28s, transform 0.28s;
    transform: translateY(-14px) scale(0.97);
    border: 1px solid rgba(255, 255, 255, 0.12);
    max-width: min(480px, calc(100vw - 40px));
    text-align: center;
}

.toast-msg.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.toast-success {
    background: linear-gradient(135deg, var(--success), #059669);
}

.toast-error {
    background: linear-gradient(135deg, var(--danger), #dc2626);
}

.toast-info {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

/* ================== أزرار التراجع وزر عمود الربح ================== */
.history-controls {
    position: fixed;
    top: 20px;
    left: 20px;
    display: flex;
    flex-direction: row;
    gap: 12px;
    z-index: 1000;
}

.btn-history {
    background-color: var(--card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 20px;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: background-color .2s, color .2s, border-color .2s, transform .2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-history:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-color: var(--primary);
    color: #ffffff;
    transform: translateY(-3px);
}

.btn-history:disabled {
    background-color: var(--inner-bg);
    color: var(--border);
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.7;
}

/* زر عمود الربح: ظهور صريح على صفحتي البضاعة والمبيعات فقط،
   وغياب كامل عن بقية الصفحات عبر صنف .hidden (خارج التخطيط لا شفافية خادعة).
   الحالة المفعّلة خضراء توحّد لغة الربح الخضراء في عمود الجدول */
.profit-btn.on {
    background: linear-gradient(135deg, var(--success), #059669);
    border-color: var(--success);
    color: #ffffff;
    box-shadow: 0 5px 16px rgba(16, 185, 129, 0.35);
}

.profit-btn.on:hover {
    background: linear-gradient(135deg, var(--success), #059669);
    border-color: var(--success);
    color: #ffffff;
}

/* ================== العلامة المائية ================== */
.watermark {
    position: fixed;
    bottom: 15px;
    left: 20px;
    color: var(--muted-text);
    opacity: 0.35;
    font-size: 15px;
    font-weight: bold;
    pointer-events: none;
    letter-spacing: 2px;
}

/* ================== الحركات ================== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes dropDownAnim {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(6px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* =========================================================
   ====== إضافات الإصدار الحالي ======
   ========================================================= */

/* ================== شريط الإحصائيات ================== */
.stats-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    background: var(--inner-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 15px;
}

.stats-bar.hidden {
    display: none !important;
}

.stats-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--muted-text);
    margin-inline-end: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 30px;
    padding: 6px 14px;
    font-size: 13px;
    color: var(--muted-text);
    white-space: nowrap;
    transition: border-color .2s;
}

.stat-chip b {
    color: var(--text);
    font-size: 14px;
}

.stat-chip.stat-blue {
    border-color: rgba(59, 130, 246, 0.45);
}

.stat-chip.stat-blue b {
    color: var(--primary);
}

.stat-chip.stat-green {
    border-color: rgba(16, 185, 129, 0.45);
}

.stat-chip.stat-green b {
    color: var(--success);
}

.stat-chip.stat-amber {
    border-color: rgba(245, 158, 11, 0.55);
    background: rgba(245, 158, 11, 0.08);
}

.stat-chip.stat-amber b {
    color: var(--warning);
}

.stat-chip.stat-red {
    border-color: rgba(239, 68, 68, 0.55);
    background: rgba(239, 68, 68, 0.08);
}

.stat-chip.stat-red b {
    color: var(--danger);
}

.stat-chip.stat-muted {
    opacity: 0.6;
}

.stat-sep {
    width: 1px;
    height: 20px;
    background: var(--border);
    margin: 0 4px;
}

/* رقاقات قابلة للنقر تعمل كفلاتر عرض */
.stat-chip.chip-clickable {
    cursor: pointer;
    transition: transform .15s ease, border-color .2s, background .2s;
}

.stat-chip.chip-clickable:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
}

.stat-chip.chip-active {
    border-color: var(--primary);
    background: rgba(59, 130, 246, 0.12);
}

/* قائمة تصفية موحّدة للجداول (بنمط قائمة الصندوق) */
.table-filter-select {
    width: auto;
    min-width: 165px;
    flex-shrink: 0;
}

/* ================== لمسات الصقل ================== */
.container::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    opacity: 0.85;
    pointer-events: none;
}

.page-header h1 {
    position: relative;
    padding-bottom: 10px;
}

.page-header h1::after {
    content: "";
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    width: 52px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(to left, var(--primary), transparent);
}

/* ================== حالة الحفظ التلقائي (شريط الإعدادات) ================== */
.cloud-status {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13.5px;
    line-height: 1.7;
    border: 1px solid var(--border);
    background: var(--inner-bg);
    color: var(--muted-text);
    margin: 15px 20px 10px 20px;
}

.cloud-status.ok {
    border-color: rgba(16, 185, 129, 0.45);
    background: rgba(16, 185, 129, 0.08);
    color: var(--success);
}

.cloud-status.warn {
    border-color: rgba(245, 158, 11, 0.45);
    background: rgba(245, 158, 11, 0.07);
    color: var(--warning);
}

/* ================== الإضاءة المحيطية للمساحات الجانبية ================== */
body::before,
body::after {
    content: "";
    position: fixed;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}

body::before {
    top: -170px;
    left: -170px;
    width: 580px;
    height: 580px;
    background: radial-gradient(circle at center, rgba(59, 130, 246, 0.11), transparent 62%);
    animation: ambientFloatA 34s ease-in-out infinite alternate;
}

body::after {
    bottom: -190px;
    right: -190px;
    width: 640px;
    height: 640px;
    background: radial-gradient(circle at center, rgba(16, 185, 129, 0.09), transparent 62%);
    animation: ambientFloatB 40s ease-in-out infinite alternate;
}

@keyframes ambientFloatA {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform: translate3d(70px, 60px, 0) scale(1.06);
    }
}

@keyframes ambientFloatB {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform: translate3d(-80px, -55px, 0) scale(1.08);
    }
}

@media (prefers-reduced-motion: reduce) {

    body::before,
    body::after {
        animation: none;
    }
}

/* ================== سجل آخر النشاطات ================== */
.activity-widget {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9990;
}

.activity-toggle {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--border);
    font-size: 20px;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}

.activity-toggle:hover {
    border-color: var(--primary);
    transform: translateY(-3px);
}

.activity-toggle.open {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-color: var(--primary);
    color: #ffffff;
    transform: translateY(-3px);
}

.activity-badge {
    position: absolute;
    top: -4px;
    left: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--danger);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}

.activity-badge.show {
    display: flex;
}

.activity-panel {
    position: fixed;
    top: 20px;
    right: 80px;
    transform: translateX(16px);
    width: 330px;
    max-width: calc(100vw - 100px);
    max-height: min(72vh, 640px);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, transform .25s;
}

.activity-panel.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

.activity-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--inner-bg);
    flex-shrink: 0;
}

.activity-head h4 {
    margin: 0;
    font-size: 15px;
}

.activity-clear {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    opacity: 0.6;
    transition: opacity .2s, transform .2s;
    font-family: inherit;
}

.activity-clear:hover {
    opacity: 1;
    transform: scale(1.12);
}

.activity-list {
    overflow-y: auto;
    padding: 8px 0;
}

.activity-list::-webkit-scrollbar {
    width: 6px;
}

.activity-list::-webkit-scrollbar-track {
    background: transparent;
}

.activity-list::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 10px;
}

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px dashed var(--border);
    animation: fadeIn 0.25s ease;
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    margin-top: 7px;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.activity-item-body {
    flex: 1;
    min-width: 0;
}

.activity-msg {
    font-size: 13.5px;
    line-height: 1.55;
    word-break: break-word;
}

.activity-time {
    font-size: 11.5px;
    color: var(--muted-text);
    margin-top: 2px;
}

.activity-empty {
    padding: 30px 20px;
    text-align: center;
    color: var(--muted-text);
    font-size: 13.5px;
    line-height: 1.7;
}

/* ================== إدخال البيانات ================== */
.import-dup-picker {
    margin-bottom: 15px;
}

.import-dup-picker label {
    display: block;
    margin-bottom: 8px;
    color: var(--muted-text);
    font-size: 14px;
    font-weight: 600;
}

.import-policy-hint {
    font-size: 12.5px;
    color: var(--muted-text);
    line-height: 1.6;
    margin: 8px 0 0 0;
}

.import-mapping-box {
    background: var(--item-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 15px;
}

.import-mapping-box.hidden {
    display: none !important;
}

.mapping-note {
    font-size: 13px;
    color: var(--muted-text);
    margin-bottom: 12px;
    line-height: 1.6;
}

.mapping-note b {
    color: var(--success);
}

.mapping-row {
    display: grid;
    grid-template-columns: 74px 1fr 190px;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed var(--border);
}

.mapping-row:last-child {
    border-bottom: none;
}

.mapping-col-badge {
    background: rgba(59, 130, 246, 0.12);
    color: var(--primary);
    border: 1px solid rgba(59, 130, 246, 0.3);
    font-size: 12px;
    font-weight: 800;
    border-radius: 8px;
    padding: 4px 6px;
    text-align: center;
}

.mapping-col-head {
    font-size: 13.5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mapping-col-head i {
    color: var(--muted-text);
    font-weight: normal;
}

.mapping-select {
    padding: 8px 10px;
    font-size: 13.5px;
}

.mapping-preview-title {
    font-size: 13px;
    color: var(--muted-text);
    margin: 14px 0 8px;
    font-weight: 600;
}

.mapping-preview-scroll {
    max-height: 240px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.mapping-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.mapping-preview-table th {
    position: static;
    background: var(--card);
    color: var(--muted-text);
    border: none;
    border-bottom: 2px solid var(--primary);
    padding: 9px 10px;
    font-size: 12px;
}

.mapping-preview-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.mapping-preview-table tr:last-child td {
    border-bottom: none;
}

.mapping-ignored-cell {
    opacity: 0.4;
}

/* ================== نافذة مقارنة تعارضات الاستيراد ================== */
.modal-compare-intro {
    font-size: 14px;
    color: var(--text);
    margin: 0 0 12px 0;
    line-height: 1.7;
    text-align: right;
}

.modal-compare-scroll {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 16px;
}

.modal-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.modal-compare-table th {
    position: static;
    background: var(--inner-bg);
    color: var(--muted-text);
    border: none;
    border-bottom: 2px solid var(--primary);
    padding: 9px 8px;
    font-size: 12.5px;
}

.modal-compare-table td {
    border: none;
    border-bottom: 1px dashed var(--border);
    padding: 9px 8px;
}

.modal-compare-table tr:last-child td {
    border-bottom: none;
}

.modal-compare-old {
    color: var(--muted-text);
}

.modal-compare-new {
    color: var(--success);
    font-weight: 700;
}

.modal-apply-all-check {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    font-size: 13px;
    color: var(--muted-text);
    cursor: pointer;
    font-weight: 600;
}

.modal-apply-all-check input {
    width: auto;
}

/* ================== استجابة الإضافات ================== */
@media (max-width: 768px) {
    .activity-widget {
        right: 12px;
    }

    .activity-toggle {
        width: 42px;
        height: 42px;
        font-size: 17px;
    }

    .activity-panel {
        right: 62px;
        width: min(320px, calc(100vw - 80px));
    }

    .mapping-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .mapping-select {
        width: 100%;
    }

    .stats-bar {
        gap: 6px;
        padding: 9px 10px;
    }

    .stat-chip {
        padding: 5px 11px;
        font-size: 12px;
    }

    .table-filter-select {
        min-width: 130px;
    }
}

/* ================== بوابة تسجيل الدخول ================== */
.auth-gate-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(2, 6, 23, 0.92);
    backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    direction: rtl;
}

.auth-gate-overlay.show {
    display: flex;
}

.auth-gate-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow-md);
    padding: 35px 30px;
    width: 100%;
    max-width: 380px;
    text-align: center;
    display: grid;
    gap: 12px;
    animation: popIn 0.25s ease;
    /* الشاشات القصيرة: البطاقة لا تتجاوز الشاشة وتتمرر داخلياً —
       زر الدخول وزر «لاحقاً» يبقيان في المتناول */
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.auth-gate-icon {
    font-size: 42px;
}

.auth-gate-title {
    margin: 0;
    font-size: 21px;
    font-weight: 800;
}

.auth-gate-desc {
    margin: 0;
    font-size: 13.5px;
    color: var(--muted-text);
    line-height: 1.7;
}

.auth-gate-card input {
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--inner-bg);
    color: var(--text);
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    text-align: right;
}

.auth-gate-card input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 5px rgba(59, 130, 246, 0.3);
}

.auth-gate-err {
    min-height: 18px;
    font-size: 13px;
    color: var(--danger);
    font-weight: 700;
}

.auth-gate-btn {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 13px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    font-family: inherit;
    transition: transform .2s, box-shadow .2s;
    /* زر الحسم الأساسي يبقى مرئياً عند تمرير البطاقة على الشاشات
       القصيرة — يلتصق أسفل منطقة الرؤية وخلفيته صلبة معتمة */
    position: sticky;
    bottom: 0;
    z-index: 2;
}

.auth-gate-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

.auth-gate-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

.auth-gate-note {
    margin: 4px 0 0 0;
    font-size: 12px;
    color: var(--muted-text);
    line-height: 1.6;
}

/* =========================================================
   ====== إضافات التحديث: الأقسام + المحاسبة + حماية الصفحات ======
   ========================================================= */

/* ================== إدارة الأقسام — واجهة محسّنة ================== */
.sec-count-badge {
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.35);
    color: var(--primary);
    font-size: 12.5px;
    font-weight: 800;
    border-radius: 20px;
    padding: 4px 13px;
    white-space: nowrap;
}

.sec-add-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--inner-bg);
    border: 1px dashed var(--border);
    border-radius: 14px;
    padding: 13px 15px;
    margin-bottom: 18px;
    transition: border-color .2s, box-shadow .2s;
}

.sec-add-card:focus-within {
    border-color: var(--primary);
    border-style: solid;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.sec-add-icon {
    font-size: 21px;
}

.sec-add-card .btn-add {
    white-space: nowrap;
}

.sec-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sec-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--item-bg);
    border: 1px solid var(--border);
    border-radius: 13px;
    padding: 11px 14px;
    transition: border-color .15s, transform .15s, box-shadow .15s, opacity .15s;
}

.sec-row:hover {
    border-color: rgba(59, 130, 246, 0.55);
    box-shadow: var(--shadow-sm);
}

.sec-grip {
    cursor: grab;
    color: var(--muted-text);
    font-size: 17px;
    line-height: 1;
    padding: 6px 2px;
    user-select: none;
}

.sec-row:active .sec-grip {
    cursor: grabbing;
}

.sec-avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 16px;
    flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.3);
}

.sec-main {
    flex: 1;
    min-width: 0;
}

.sec-name {
    font-weight: 700;
    font-size: 14.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sec-meta {
    font-size: 12px;
    color: var(--muted-text);
    margin-top: 2px;
}

.sec-row-actions {
    display: flex;
    gap: 6px;
}

.sec-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--muted-text);
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .15s, border-color .15s, background .15s, transform .15s;
    padding: 0;
}

.sec-icon-btn:hover:not(:disabled) {
    color: var(--text);
    border-color: var(--primary);
    background: rgba(59, 130, 246, 0.08);
    transform: translateY(-1px);
}

.sec-icon-btn:disabled {
    opacity: .3;
    cursor: not-allowed;
}

.sec-icon-del:hover:not(:disabled) {
    color: var(--danger) !important;
    border-color: var(--danger) !important;
    background: rgba(239, 68, 68, 0.08) !important;
}

.sec-row.sec-dragging {
    opacity: .35;
    transform: scale(.985);
}

.sec-row.sec-drop-above {
    box-shadow: 0 -3px 0 -1px var(--primary);
}

.sec-row.sec-drop-below {
    box-shadow: 0 3px 0 -1px var(--primary);
}

.sec-empty {
    border: 1px dashed var(--border);
    border-radius: 14px;
    padding: 38px 20px;
    text-align: center;
}

.sec-empty-icon {
    font-size: 34px;
    margin-bottom: 10px;
}

.sec-empty-title {
    font-weight: 800;
    font-size: 15px;
    margin-bottom: 6px;
}

.sec-empty-desc {
    color: var(--muted-text);
    font-size: 13px;
    line-height: 1.9;
    max-width: 430px;
    margin: 0 auto;
}

/* ================== المحاسبة — تصميم محسّن ================== */
.pos-area-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.pos-area-title {
    font-size: 15px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 9px;
}

.pos-area-title::before {
    content: "";
    width: 4px;
    height: 17px;
    border-radius: 4px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.pos-invoice-stats {
    display: flex;
    gap: 8px;
    margin-inline-start: auto;
    flex-wrap: wrap;
}

.pos-stat-chip {
    background: var(--inner-bg);
    border: 1px solid var(--border);
    border-radius: 30px;
    padding: 5px 13px;
    font-size: 12.5px;
    color: var(--muted-text);
    font-weight: 700;
    white-space: nowrap;
}

.pos-clear-btn {
    background: transparent;
    border: 1px solid var(--danger);
    color: var(--danger);
    border-radius: 9px;
    padding: 7px 14px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, transform .15s;
}

.pos-clear-btn:hover {
    background: rgba(239, 68, 68, 0.12);
    transform: translateY(-1px);
}

td.pos-stock-ok {
    color: var(--muted-text);
    font-size: 13.5px;
}

.pos-missing {
    color: var(--danger);
    font-size: 11.5px;
    font-weight: 800;
    white-space: nowrap;
}

.qty-input {
    width: 62px;
    text-align: center;
    padding: 7px 5px;
    font-weight: 800;
    font-size: 14px;
}

/* --- الحاسبة — تصميم هادئ متقن قابل للكتابة بلوحة المفاتيح --- */
.pos-calc-widget {
    background: var(--inner-bg);
    border-radius: 16px;
    border: 1px solid var(--border);
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.calc-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.calc-head-title {
    font-weight: 800;
    font-size: 14px;
}

.calc-head-hint {
    font-size: 11px;
    color: var(--muted-text);
}

.calc-preview {
    min-height: 19px;
    font-size: 13.5px;
    color: var(--success);
    font-weight: 800;
    text-align: left;
    direction: ltr;
    padding: 0 6px;
    margin-bottom: 3px;
    font-variant-numeric: tabular-nums;
}

.calc-screen-container input {
    width: 100%;
    height: 58px;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 23px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: .4px;
    text-align: left;
    padding: 6px 14px;
    direction: ltr;
    margin-bottom: 12px;
    font-family: inherit;
    caret-color: var(--primary);
    transition: border-color .15s, box-shadow .15s;
}

.calc-screen-container input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

.calc-screen-container input::placeholder {
    color: var(--muted-text);
    opacity: .45;
    font-weight: 600;
}

.calc-buttons-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
}

.calc-buttons-grid button {
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 0;
    height: 48px;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .15s, transform .1s, box-shadow .15s, border-color .15s;
}

.calc-buttons-grid button:hover {
    background: var(--border);
    transform: translateY(-1px);
}

.calc-buttons-grid button:active {
    transform: translateY(1px) scale(0.97);
}

.calc-buttons-grid button:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.calc-op {
    color: var(--primary) !important;
    border-color: rgba(59, 130, 246, 0.4) !important;
    background: rgba(59, 130, 246, 0.08) !important;
}

.calc-op:hover {
    background: rgba(59, 130, 246, 0.16) !important;
    border-color: rgba(59, 130, 246, 0.65) !important;
}

/* مفاتيح المسح بإطار هادئ بدل الخلفيات الصاخبة — عين مريحة */
.calc-btn-danger {
    background: transparent !important;
    color: var(--danger) !important;
    border: 1px solid rgba(239, 68, 68, 0.45) !important;
}

.calc-btn-danger:hover {
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: var(--danger) !important;
}

.calc-btn-warning {
    background: transparent !important;
    color: var(--warning) !important;
    border: 1px solid rgba(245, 158, 11, 0.45) !important;
}

.calc-btn-warning:hover {
    background: rgba(245, 158, 11, 0.12) !important;
    border-color: var(--warning) !important;
}

.calc-equal {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}

.calc-equal:hover {
    filter: brightness(1.07);
}

.calc-btn-tall {
    grid-row: span 2;
    height: auto !important;
}

.calc-btn-zero {
    grid-column: span 2;
}

/* سطر إرشاد لوحة المفاتيح أسفل الآلة */
.calc-kbd-hint {
    margin-top: 11px;
    text-align: center;
    font-size: 11.5px;
    color: var(--muted-text);
    line-height: 1.8;
}

.calc-kbd-hint b {
    color: var(--text);
    font-weight: 700;
    font-size: 10.5px;
    background: var(--border);
    border-radius: 6px;
    padding: 1px 7px;
    margin: 0 2px;
    white-space: nowrap;
}

@media (max-width: 860px) {
    .pos-layout-wrapper {
        grid-template-columns: 1fr;
    }
}

/* ================== حماية الصفحات (الإعدادات) ================== */
.pg-badge {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: var(--success);
    font-size: 12.5px;
    font-weight: 800;
    border-radius: 20px;
    padding: 4px 13px;
    white-space: nowrap;
}

/* بطاقات الشاشة: كلمة المرور الموحّدة وحالة الجلسة */
.pg-pass-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--item-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 20px;
}

.pg-pass-text {
    flex: 1;
    min-width: 0;
}

.pg-pass-title {
    font-weight: 800;
    font-size: 14.5px;
    margin-bottom: 3px;
}

.pg-pass-status {
    font-size: 12.5px;
}

.pg-pass-status.ok {
    color: var(--success);
    font-weight: 700;
}

.pg-pass-status.warn {
    color: var(--warning);
    font-weight: 700;
}

/* =========================================================
   شاشة الحماية الموحّدة «حماية الصفحات» — ثلاثة صناديق جنب بعض:
   حماية جماعية + حماية فردية + حماية الإعدادات. الشبكة ذاتية الانهيار
   تتكدس عمودياً على الشاشات الضيقة، والصفوف مدمجة بلا فراغ ضخم بين
   الاسم وزر on/off
   ========================================================= */
.pg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
    align-items: start;
    margin-bottom: 14px;
}

.pg-grid .pg-group-card {
    margin: 0;
    padding: 14px;
}

/* بطاقة حالة الجلسة داخل صندوق حماية الإعدادات — مضغوطة بلا حدّ */
.pg-session-card {
    margin-bottom: 10px;
    padding: 10px 12px;
    background: var(--card);
}

.pg-session-card .pg-pass-status {
    font-size: 12px;
    line-height: 1.7;
}

.pg-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pg-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--item-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 9px 12px;
    transition: border-color .2s, background .2s;
}

.pg-row.on {
    border-color: rgba(16, 185, 129, 0.55);
    background: rgba(16, 185, 129, 0.05);
}

.pg-row-icon {
    font-size: 19px;
}

.pg-row-name {
    flex: 1;
    font-weight: 700;
    font-size: 14.5px;
}

.pg-default-tag {
    background: rgba(59, 130, 246, 0.14);
    color: var(--primary);
    border-radius: 20px;
    font-size: 10.5px;
    padding: 3px 10px;
    font-weight: 800;
    white-space: nowrap;
}

.pg-toggle {
    width: 46px;
    height: 26px;
    border-radius: 20px;
    background: var(--border);
    border: none;
    cursor: pointer;
    position: relative;
    transition: background .2s;
    flex-shrink: 0;
    padding: 0;
}

.pg-toggle.on {
    background: linear-gradient(135deg, var(--success), #059669);
}

.pg-toggle-knob {
    position: absolute;
    top: 3px;
    inset-inline-start: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    transition: inset-inline-start .2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.pg-toggle.on .pg-toggle-knob {
    inset-inline-start: 23px;
}

.pg-note {
    font-size: 12px;
    color: var(--muted-text);
    margin-top: 14px;
    line-height: 1.8;
}

/* القفل الجماعي — عدة صفحات بقفل واحد (الصندوق الأول من الشبكة) */
.pg-group-card {
    background: var(--item-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    margin: 22px 0 6px 0;
}

.pg-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.pg-group-title {
    font-weight: 800;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.pg-group-count {
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.35);
    color: var(--primary);
    font-size: 11.5px;
    font-weight: 800;
    border-radius: 20px;
    padding: 3px 12px;
    white-space: nowrap;
}

.pg-group-desc {
    font-size: 12.5px;
    color: var(--muted-text);
    line-height: 1.9;
    margin-bottom: 13px;
}

.pg-group-card .pg-list {
    gap: 8px;
}

.pg-group-row.on-grp {
    border-color: rgba(59, 130, 246, 0.55);
    background: rgba(59, 130, 246, 0.05);
}

.pg-toggle-grp.on {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.pg-grp-tag {
    background: rgba(59, 130, 246, 0.14);
    color: var(--primary);
    border-radius: 20px;
    font-size: 10.5px;
    padding: 3px 10px;
    font-weight: 800;
    white-space: nowrap;
}

.pg-group-card .pg-note {
    margin-top: 12px;
}

/* ملاحظة المجموعة داخل بوابة القفل */
.auth-gate-note.grp {
    color: var(--primary);
    font-weight: 700;
}

/* =========================================================
   إشعار الخطة المجانية — بطاقة شريطية أعلى شاشة الحماية الموحّدة
   (حماية الصفحات). هوية «تحذير معلوماتي»
   كهرمانية هادئة من عائلة cloud-status.warn / lic-chip-warn /
   plan-badge-free — بمقاييس pg-info-card نفسها. يُحقن عبر
   freePlanGuardsNoteHtml() فقط في حالة trial_active.
   ========================================================= */
.free-plan-note {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: rgba(245, 158, 11, 0.07);
    border: 1px solid rgba(245, 158, 11, 0.45);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 16px;
}

.free-plan-note-ico {
    font-size: 25px;
    line-height: 1.2;
    flex-shrink: 0;
}

.free-plan-note-body {
    flex: 1;
    min-width: 0;
}

.free-plan-note-title {
    font-weight: 800;
    font-size: 14.5px;
    color: var(--warning);
    margin-bottom: 5px;
}

.free-plan-note-text {
    margin: 0;
    font-size: 13px;
    color: var(--muted-text);
    line-height: 1.9;
}

/* الثيم الفاتح — تدرج lic-chip-warn الفاتح نفسه للتباين الصحيح */
body.theme-light .free-plan-note {
    background: rgba(217, 119, 6, 0.08);
    border-color: rgba(217, 119, 6, 0.45);
}

body.theme-light .free-plan-note-title {
    color: #b45309;
}

/* استجابة الشاشات الصغيرة */
@media (max-width: 600px) {
    .sec-row {
        flex-wrap: wrap;
    }

    .sec-row-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .pg-pass-card {
        flex-wrap: wrap;
    }

    /* بشارة الترويسة تتمدد بلا فيض: التفاف النص بدل مدّ الصف خارج الشاشة */
    .flex-header-container .pg-badge {
        font-size: 11px;
        padding: 3px 10px;
        white-space: normal;
        line-height: 1.6;
    }

    /* زر استعادة المجموعة: صف كامل داخل بطاقة القفل الجماعي — نصه
       طويل فلا يفيض خارج البطاقة على الشاشات الضيقة */
    .pg-restore-btn {
        width: 100%;
        white-space: normal;
    }
}

/* =========================================================
   ====== شارات قفل الصفحات في شريط التنقل (توحيد C3/C9 — كتلة أ) ======
   لغة تحذير معلوماتي واحدة: كهرماني الهوية القائم نفسه — بلا أي لون جديد.
   ========================================================= */

/* الشارة: كبسولة 🔒 بجوار اسم الصفحة لكل صفحة محمية لم تُفتح بعد.
   مقادير pg-badge نفسها (خلفية 0.12 + حد 0.4) على حجم مدمج */
.nav-lock-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 10px;
    margin-inline-start: 6px;
    padding: 2px 5px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.4);
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    animation: pgBadgeIn .18s ease;
}

/* الزر النشط خلفيته متدرجة زرقاء: حجاب داكن من عائلة الأغطية يفصل
   الشارة عن التدرج ويُبقي الكهرماني نقي الوضوح في الثيمات الثلاثة */
.nav-buttons button.nav-locked.active {
    background-image: linear-gradient(rgba(2, 6, 23, 0.25), rgba(2, 6, 23, 0.25)), linear-gradient(135deg, var(--primary), var(--primary-dark));
}

/* بشارة حماية الصفحات بحالة التحذير: لا كلمة مرور معرّفة بعد */
.pg-badge.warn {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.4);
    color: var(--warning);
}

/* زر استعادة المجموعة الافتراضية داخل بطاقة القفل الجماعي — فاصل
   علوي بإيقاع pg-note نفسه، وأسفله حشوة البطاقة وحدها فلا يتضاعف */
.pg-restore-btn {
    margin: 14px 0 0 0;
}

@keyframes pgBadgeIn {
    from { opacity: 0; transform: scale(.6); }
    to { opacity: 1; transform: scale(1); }
}

/* توافق الثيم الفاتح — وصفة lic-chip-warn الفاتحة نفسها حرفياً */
body.theme-light .nav-lock-badge {
    color: #b45309;
    background: rgba(217, 119, 6, 0.10);
    border-color: rgba(217, 119, 6, 0.45);
}

body.theme-light .pg-badge.warn {
    color: #b45309;
    background: rgba(217, 119, 6, 0.10);
    border-color: rgba(217, 119, 6, 0.45);
}

/* احترام تفضيل تقليل الحركة — سكون الشارات إضافة للقاعدة العامة */
@media (prefers-reduced-motion: reduce) {
    .nav-lock-badge { animation: none; }
}

/* =========================================================
   ====== روابط البوابات وبوابة الاستعادة وحماية الإعدادات (C9 — كتلة ب) ======
   ========================================================= */

/* روابط «نسيت كلمة المرور؟» داخل البوابات ونافذة كلمة المرور — حشوة
   لهالة لمس أوسع يلغيها الهامش السالب: بصريّاً الحجم نفسه للمس أصح */
.auth-gate-link {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    padding: 4px 8px;
    margin: -4px -8px;
    text-decoration: none;
}

.auth-gate-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.auth-gate-link-row {
    margin-top: -4px;
}

.cash-field-link {
    text-align: center;
    margin-top: 6px;
}

/* بوابة استعادة كلمة المرور — فوق بوابة قفل الصفحة بخلفية معتمة
   (نمط نافذة مفتاح التفعيل نفسه: z-index 100002) */
#recoverGateOverlay {
    z-index: 100002;
    background: rgba(2, 6, 23, 0.94);
}

#recoverGateOverlay .auth-gate-card {
    box-shadow: 0 30px 80px rgba(2, 6, 23, 0.55), 0 10px 30px rgba(2, 6, 23, 0.35);
}

body.theme-light #recoverGateOverlay {
    background: rgba(241, 245, 249, 0.84);
}

body.theme-light #recoverGateOverlay .auth-gate-card {
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35), 0 8px 24px rgba(15, 23, 42, 0.22);
}

/* حماية الإعدادات: راية 🔒 في الصف المقفول — لا تنكمش داخل الصف المرن */
.sg-row-lock {
    font-size: 15px;
    line-height: 1;
    flex-shrink: 0;
}

/* خفوت محتوى الصف المقفول: 0.72 يوازن إيقاع النص الثانوي muted-text
   دون إيهام التعطيل — النقر ما زال متاحاً (يفتح بوابة كلمة المرور)،
   والراية والأيقونة والسهم خارج الخفوت فتبقى حاملة الدلالة بكامل وضوحها */
.setting-item.sg-locked .setting-icon,
.setting-item.sg-locked .setting-item-text {
    opacity: .72;
    transition: opacity .2s;
}

.setting-item.sg-locked:hover .setting-icon,
.setting-item.sg-locked:hover .setting-item-text {
    opacity: .85;
}

/* الثيم الفاتح: أساس التباين أضعف — رفع طفيف يعيد سطر الشرح فوق العتبة */
body.theme-light .setting-item.sg-locked .setting-icon,
body.theme-light .setting-item.sg-locked .setting-item-text {
    opacity: .78;
}

body.theme-light .setting-item.sg-locked:hover .setting-icon,
body.theme-light .setting-item.sg-locked:hover .setting-item-text {
    opacity: .88;
}

/* =========================================================
   ====== إضافات التحديث: زر الإغلاق + زر القفل + أداء الجداول ======
   ========================================================= */

/* زر ✕ أعلى نوافذ القفل والتحقق */
.auth-gate-card {
    position: relative;
}

.gate-close-btn {
    position: absolute;
    top: 14px;
    inset-inline-start: 14px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--inner-bg);
    color: var(--muted-text);
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .15s, border-color .15s, background .15s;
    padding: 0;
    font-family: inherit;
}

.gate-close-btn:hover {
    color: var(--danger);
    border-color: var(--danger);
    background: rgba(239, 68, 68, 0.08);
}

/* زر قفل الصفحة المحقون تلقائياً في شريط أدوات الصفحات المحمية */
.table-toolbar .page-lock-inject {
    flex-shrink: 0;
}

/* أداء: تخطي رسم صفوف الجداول غير الظاهرة على الشاشة
   (يُفعَّل تلقائياً عبر JS للجداول الكبيرة فقط — فوق 400 مادة) */
/* =========================================================
   ====== توحيد ألوان العناصر مع الثيمات + المحرك الافتراضي ======
   ========================================================= */

/* رؤوس الجداول تتبع الثيم الحالي */
th {
    background: var(--thead-bg);
    color: var(--thead-text);
    border-bottom: 2px solid var(--thead-line);
}

/* تظليل الصفوف والتمرير فوقها بتناسق مع كل ثيم */
tbody tr:nth-child(even) {
    background: var(--row-even);
}

tbody tr:hover {
    background: var(--row-hover);
}

tbody tr:hover:nth-child(even) {
    background: var(--row-hover);
}

/* صف التمييز (البحث والقفز) — نص مقروء في كل الثيمات */
.row-highlight {
    background-color: var(--hl-bg) !important;
    color: var(--hl-text) !important;
    transition: background-color 0.4s ease;
}

/* الأزرار الثانوية — نصها يتبع الثيم بدل الأبيض الثابت */
.btn-secondary {
    color: var(--btn2-text);
}

.btn-secondary:hover {
    color: #ffffff;
}

.modal-action-secondary {
    color: var(--btn2-text);
}

.back-navigation-btn {
    color: var(--btn2-text);
}

.back-navigation-btn:hover {
    color: #ffffff;
    background: var(--primary);
}

/* لمسات المظهر الفاتح */
body.theme-light .modal-backdrop-layer {
    background: rgba(15, 23, 42, 0.45);
}

body.theme-light .auth-gate-overlay {
    background: rgba(241, 245, 249, 0.75);
}

body.theme-light .pos-calc-widget {
    box-shadow: inset 0 2px 6px rgba(15, 23, 42, 0.06);
}

/* حشوات المحرك الافتراضي — شفافة تماماً */
tr.vt-spacer,
tr.vt-spacer td {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.vt-grid-pad {
    grid-column: 1 / -1;
    width: 100%;
}

/* في الوضع الافتراضي (القوائم الضخمة): ارتفاعات صفوف موحدة لدقة الحشوات */
table.vt-on td {
    white-space: nowrap;
}

table.vt-on .cell-name {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================================================
   ====== إضافات التحديث: الكاشير + إدارة العملة ======
   ========================================================= */

/* شريط حالات المزامنة */
.cloud-status.sync {
    border-color: rgba(59, 130, 246, 0.45);
    background: rgba(59, 130, 246, 0.07);
    color: var(--primary);
}

/* ================== إدارة العملة ================== */
.currency-current {
    background: var(--item-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 13px 16px;
    margin-bottom: 14px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.currency-sym-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.35);
    color: var(--primary);
    border-radius: 8px;
    padding: 2px 10px;
    font-weight: 800;
    font-size: 13px;
    min-width: 44px;
}

.currency-search {
    margin-bottom: 12px;
}

.currency-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}

.currency-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 12px;
    background: var(--item-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 15px;
    cursor: pointer;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}

.currency-row:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.currency-row.active {
    border-color: var(--success);
    background: rgba(16, 185, 129, 0.06);
}

.currency-row.active::before {
    content: "✓ ";
    color: var(--success);
    font-weight: 800;
}

.currency-row-name {
    font-weight: 700;
    font-size: 14.5px;
}

.currency-row-code {
    color: var(--muted-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

.currency-empty {
    border: 1px dashed var(--border);
    border-radius: 12px;
    padding: 22px;
    text-align: center;
    color: var(--muted-text);
    font-size: 13.5px;
}

.currency-custom-card {
    border: 1px dashed var(--border);
    border-radius: 14px;
    padding: 16px;
    background: var(--inner-bg);
}

.currency-custom-title {
    font-weight: 800;
    font-size: 14.5px;
    margin-bottom: 5px;
}

.currency-custom-desc {
    color: var(--muted-text);
    font-size: 13px;
    margin: 0 0 12px 0;
    line-height: 1.7;
}

.currency-custom-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.currency-custom-row input {
    flex: 1;
    min-width: 140px;
}

@media (max-width: 600px) {
    .currency-row {
        grid-template-columns: 1fr auto;
    }

    .currency-row-code {
        display: none;
    }
}

/* =========================================================
   ====== إضافات التحديث: نظام الفرز الحديث ======
   ========================================================= */

/* مجموعة أزرار الفرز داخل القوائم المنسدلة */
.dropdown-menu .sort-segment {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    padding: 12px 14px 14px 14px;
}

.dropdown-menu .sort-segment .sort-seg-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: var(--inner-bg);
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--text);
    padding: 10px 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    text-align: center;
    white-space: nowrap;
    transition: border-color .15s, background-color .15s, color .15s, transform .15s, box-shadow .15s;
}

.dropdown-menu .sort-segment .sort-seg-btn:hover {
    background: var(--inner-bg);
    border-color: var(--primary);
    transform: translateY(-1px);
}

.dropdown-menu .sort-segment .sort-seg-btn.active,
.dropdown-menu .sort-segment .sort-seg-btn.active:hover {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-color: var(--primary);
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.35);
    transform: none;
}

/* القوائم الزمنية (السجل / الصندوق / بطاقات المبيعات): زران بحسب التاريخ فقط */
.dropdown-menu.no-alpha-sort .sort-alpha-btn {
    display: none;
}

@media (max-width: 600px) {
    .dropdown-menu .sort-segment .sort-seg-btn {
        font-size: 12px;
        padding: 9px 4px;
    }
}

/* =========================================================
   نقر الصفوف أثناء التحديد + ربح الوحدة قبل أول بيع
   ========================================================= */
.selection-mode-active tbody tr {
    cursor: pointer;
}

.sales-cards-grid.selection-mode-active .sales-card {
    cursor: pointer;
}

.text-muted {
    color: var(--muted-text);
}

/* =========================================================
   تمييز صف نتيجة البحث والقفز — لون فاتح ناعم يختلف تماماً عن رؤوس الأعمدة
   ========================================================= */
.row-highlight td {
    color: inherit;
}

/* منع تحديد النص أثناء سحب التحديد */
body.drag-selecting {
    user-select: none;
    -webkit-user-select: none;
}

/* =========================================================
   صفحة العمال + ودجت دوام الكاشير
   ========================================================= */
.worker-pay-badge {
    font-size: 11px;
    font-weight: 800;
    border-radius: 20px;
    padding: 2px 10px;
}

.pb-hourly {
    background: rgba(59, 130, 246, 0.14);
    color: var(--primary);
}

.pb-daily {
    background: rgba(245, 158, 11, 0.14);
    color: var(--warning);
}

.pb-monthly {
    background: rgba(16, 185, 129, 0.14);
    color: var(--success);
}

/* عناوين أقسام الصفحة — فاصل علوي ثم العنوان التابع للجدول الذي تحته */
.workers-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin: 26px 0 12px 0;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.workers-head h3 {
    margin: 0;
    font-size: 16px;
    position: relative;
    padding-inline-start: 12px;
}

.workers-head h3::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 16px;
    border-radius: 4px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.workers-head p {
    margin: 0;
    font-size: 12.5px;
    color: var(--muted-text);
}

/* ودجت الدوام بالكاشير */
.shift-widget {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--inner-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 15px;
}

.shift-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.shift-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--muted-text);
}

.shift-select {
    width: auto;
    min-width: 170px;
}

.shift-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    border-top: 1px dashed var(--border);
    padding-top: 10px;
}

.shift-date {
    font-size: 13.5px;
    font-weight: 800;
}

.shift-time-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.shift-lbl {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--muted-text);
}

.shift-ts {
    width: auto;
    min-width: 86px;
    padding: 8px 10px;
    font-size: 13.5px;
}

.shift-ts-min {
    min-width: 64px;
}

.shift-note-input {
    flex: 1;
    min-width: 200px;
    padding: 9px 12px;
    font-size: 13px;
    min-height: 44px;
    line-height: 1.8;
    resize: none;
    overflow: hidden;
    display: block;
}

.shift-info {
    font-size: 12.5px;
    color: var(--muted-text);
    width: 100%;
}

.shift-hint {
    color: var(--muted-text);
    font-size: 12.5px;
}

.shift-start-btn {
    background: linear-gradient(135deg, var(--success), #059669) !important;
    color: #ffffff !important;
    font-weight: 800;
    padding: 9px 18px !important;
}

.shift-end-btn {
    background: linear-gradient(135deg, var(--danger), #dc2626) !important;
    color: #ffffff !important;
    font-weight: 800;
    padding: 9px 18px !important;
}

.shift-att-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.att-toggle {
    padding: 9px 20px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--muted-text);
    font-family: inherit;
    font-weight: 800;
    font-size: 13.5px;
    cursor: pointer;
    transition: all .15s;
}

.att-toggle:hover {
    border-color: var(--primary);
    color: var(--text);
}

.att-toggle.att-present.att-on {
    background: linear-gradient(135deg, var(--success), #059669);
    border-color: transparent;
    color: #ffffff;
}

.att-toggle.att-absent.att-on {
    background: linear-gradient(135deg, var(--danger), #dc2626);
    border-color: transparent;
    color: #ffffff;
}

.att-toggle.att-vacation.att-on {
    background: linear-gradient(135deg, #64748b, #475569);
    border-color: transparent;
    color: #ffffff;
}

/* زر إرسال حالة العطلة بالودجت */
.shift-vac-btn {
    background: linear-gradient(135deg, #64748b, #475569) !important;
    color: #ffffff !important;
    font-weight: 800;
    padding: 9px 18px !important;
}

/* =========================================================
   إضافات صفحة العمال: البطاقات الموجزة + التسجيل اليدوي + اختيار النظام
   ========================================================= */
.ws-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 15px;
    margin-bottom: 22px;
}

.ws-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 15px 15px;
    text-align: center;
}

.ws-icon {
    font-size: 25px;
    margin-bottom: 6px;
}

.ws-value {
    font-size: 24px;
    font-weight: 800;
}

.ws-label {
    font-size: 12.5px;
    color: var(--muted-text);
    margin-top: 5px;
}

/* صناديق التسجيل اليدوي */
/* صناديق اختيار نظام الراتب داخل النافذة */
.w-type-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.w-type-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--item-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 13px 15px;
    cursor: pointer;
    font-family: inherit;
    text-align: right;
    transition: border-color .15s, box-shadow .15s;
}

.w-type-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.w-type-card.w-type-cur {
    border-color: rgba(16, 185, 129, 0.55);
}

.w-type-icon {
    font-size: 22px;
}

.w-type-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.w-type-body b {
    font-size: 14.5px;
    color: var(--text);
}

.w-type-body i {
    font-size: 12.5px;
    color: var(--muted-text);
    font-style: normal;
}

.w-type-tag {
    background: rgba(16, 185, 129, 0.14);
    color: var(--success);
    font-size: 10.5px;
    font-weight: 800;
    border-radius: 20px;
    padding: 3px 10px;
}

/* زر تسجيل الحضور بحالة الانتظار */
.shift-pend-btn {
    background: var(--border) !important;
    color: var(--muted-text) !important;
    font-weight: 800;
    padding: 9px 18px !important;
}

/* =========================================================
   كشف الدوام + زر تغيير نوع الدوام
   ========================================================= */
.sheet-list {
    max-height: 460px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--inner-bg);
}

.sheet-line {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    border-bottom: 1px dashed var(--border);
}

.sheet-line:last-child {
    border-bottom: none;
}

.sheet-line-day {
    width: 74px;
    font-weight: 700;
    font-size: 13.5px;
}

.sheet-line-date {
    color: var(--muted-text);
    font-size: 13px;
    flex: 1;
}

.sheet-line-status {
    font-size: 13px;
}

.sheet-none {
    color: var(--muted-text);
}

/* زر تغيير نوع الدوام داخل نافذة التعديل */
.w-change-type-btn {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid var(--primary);
    background: rgba(59, 130, 246, 0.12);
    color: var(--primary);
    font-family: inherit;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
    transition: background .15s, transform .15s;
}

.w-change-type-btn:hover {
    background: rgba(59, 130, 246, 0.2);
    transform: translateY(-1px);
}

/* =========================================================
   شارة الدوام الأسبوعي + أيام الكشف القادمة
   ========================================================= */
.pb-weekly {
    background: rgba(6, 182, 212, 0.14);
    color: #06b6d4;
}

.sheet-future {
    opacity: 0.45;
}
/* =========================================================
   زر قفل الصفحة داخل ترويسة الصفحة — بموازاة العنوان وبالجهة المقابلة له
   ========================================================= */
.page-lock-btn {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid rgba(59, 130, 246, 0.35);
    background: rgba(59, 130, 246, 0.10);
    color: var(--primary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s, transform .15s;
}

.page-lock-btn .page-lock-ico {
    font-size: 14px;
    line-height: 1;
}

.page-lock-btn:hover {
    background: rgba(59, 130, 246, 0.18);
    border-color: var(--primary);
}

.page-lock-btn:active {
    transform: scale(0.97);
}

@media (max-width: 640px) {
    .page-lock-btn {
        position: static;
        margin-bottom: 10px;
    }
}

/* =========================================================
   جدول العمال — خلايا مضبوطة بدل البطاقات القديمة
   ========================================================= */
.w-cell-name {
    font-weight: 800;
    font-size: 14px;
}

.w-cell-note {
    font-size: 11.5px;
    color: var(--muted-text);
    margin-top: 2px;
}

.w-cell-rate {
    font-size: 13px;
    color: var(--muted-text);
    white-space: nowrap;
}

.w-cell-owed {
    white-space: nowrap;
}

.w-cell-owed .w-cur {
    font-size: 12px;
    color: var(--muted-text);
}

/* مفتاح طريقة الحساب أسفل كشف الدوام */
.sheet-legend {
    margin: 10px 0 0 0;
    font-size: 12px;
    color: var(--muted-text);
    background: var(--inner-bg);
    border: 1px dashed var(--border);
    border-radius: 10px;
    padding: 9px 13px;
    line-height: 1.8;
}

/* =========================================================
   الجولة الثالثة — فقرة التسجيل اليدوي + تلوين المستحق + بطاقة معلومات الكشف
   ========================================================= */

/* فاصل واضح بين فقرة التسجيل وبقية فقرات صفحة العمال */
.w-section-divider {
    height: 1px;
    margin: 24px 0 18px;
    background: linear-gradient(90deg, transparent, var(--border) 18%, var(--border) 82%, transparent);
    position: relative;
}

/* فقرة التسجيل اليدوي — نصفان متكافئان */
.w-rec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    margin-bottom: 4px;
}

.w-rec-part {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px 16px 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.w-rec-part-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.w-rec-part-desc {
    font-size: 12.8px;
    color: var(--muted-text);
    line-height: 1.9;
    margin: 0;
    flex: 1;
}

.w-rec-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.w-rec-actions .btn-add {
    padding: 9px 16px;
}

/* شارة المستحق الآن — اللون يحمل المعنى (منطق المرحلة 5):
   أخضر جاهز للصرف، برتقالي تراكم قبل وقت الدورة، رمادي لا مستحق، أزرق سلفة */
.w-owed-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.w-owed-due {
    background: rgba(16, 185, 129, 0.16);
    color: var(--success);
    box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.4);
}

.w-owed-pending {
    background: rgba(245, 158, 11, 0.2);
    color: var(--warning);
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.5);
}

.w-owed-advance {
    background: rgba(59, 130, 246, 0.13);
    color: var(--primary);
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.3);
}

/* الصفر رمادي محايد واضح — لا أخضر يوهم استحقاقاً بلا عمل */
.w-owed-none {
    background: rgba(148, 163, 184, 0.16);
    color: var(--muted-text);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.5);
}

/* بطاقة معلومات الكشف: تاريخ بدء العمل + محرر الملاحظات */
.w-sheet-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin: 4px 0 14px;
}

.w-info-row {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.w-info-lbl {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--muted-text);
}

.w-info-date {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.w-info-date b {
    font-size: 17px;
    color: var(--text);
}

.w-info-src,
.w-info-hint {
    font-size: 11.5px;
    color: var(--muted-text);
}

.w-sheet-notes {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--inner-bg);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.7;
    padding: 9px 12px;
    resize: none;
    overflow: hidden;
    min-height: 56px;
}

.w-sheet-notes:focus {
    outline: none;
    border-color: var(--primary);
}

.w-notes-save {
    align-self: flex-start;
}

@media (max-width: 640px) {
    .w-rec-grid {
        grid-template-columns: 1fr;
    }

    .w-rec-actions .btn-secondary,
    .w-rec-actions .btn-add {
        width: 100%;
    }

    .w-section-divider {
        margin: 18px 0 14px;
    }
}
/* ================== [الجولة 4] حقول البحث المحترفة ================== */
/* أيقونة عدسة داخل الحقل + زر مسح (✕) يظهر عند وجود نص — بأسلوب
   التطبيقات العالمية، مع إبقاء التوافق الكامل مع القوائم المنسدلة */
.search-enhanced .search-input-field {
    padding-inline-start: 40px;
    padding-inline-end: 38px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%23999aa3' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.6' y1='16.6' x2='21' y2='21'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 17px 17px;
}

.search-clear-btn {
    position: absolute;
    inset-inline-end: 9px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: var(--border);
    color: var(--muted-text);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s, color 0.2s;
}

.search-clear-btn.show {
    display: flex;
}

.search-clear-btn:hover {
    background: #ef4444;
    color: #fff;
}

[dir="ltr"] .search-enhanced .search-input-field {
    background-position: left 13px center;
}

@media (max-width: 640px) {
    .search-enhanced .search-input-field {
        padding-inline-start: 36px;
        padding-inline-end: 34px;
    }
}
/* ==================== الجولة 5: ملاحظات متعددة وشارات ما بعد الصرف ==================== */
/* ملاحظات الدوام داخل كشف العامل — سطر هادئ تحت أوقات الدوام */
.w-note-muted {
    display: inline-block;
    font-size: 11.5px;
    color: var(--muted-text);
    line-height: 1.7;
}

/* شارة «بعد الصرف» — يوم قبل بداية الدورة فيه تسجيل جرى بعد لحظة الصرف */
.w-postpay-badge {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 600;
    color: #2563eb;
    background: rgba(37, 99, 235, 0.1);
    border: 1px solid rgba(37, 99, 235, 0.25);
    border-radius: 20px;
    padding: 1px 8px;
    margin-inline-start: 4px;
    white-space: nowrap;
    vertical-align: middle;
}
/* =========================================================
   ====== لمسات الإتقان النهائية — الوصول والاستجابة والصفحات ======
   ========================================================= */

/* تحديد النص بلون الهوية */
::selection {
    background: rgba(59, 130, 246, 0.35);
    color: inherit;
}

/* حقول الإدخال — نص الشرح هادئ وموحّد في كل الصفحات */
input::placeholder,
textarea::placeholder {
    color: var(--muted-text);
    opacity: 0.75;
}

/* احترام تفضيل تقليل الحركات لدى المستخدم */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* أزرار إجراءات الجداول — هدف لمس مريح */
.row-actions-group .btn-qty {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* لمسات صفحة العمال — إيقاع بصري مرتب */
.ws-card {
    transition: border-color 0.15s, transform 0.15s;
}

.ws-card:hover {
    border-color: rgba(59, 130, 246, 0.4);
    transform: translateY(-2px);
}

#workersTableElement td {
    vertical-align: middle;
}

#workersTableElement .row-actions-group {
    gap: 6px;
    flex-wrap: wrap;
}

.w-rec-part {
    transition: border-color 0.15s, box-shadow 0.15s;
}

.w-rec-part:hover {
    border-color: rgba(59, 130, 246, 0.35);
    box-shadow: var(--shadow-sm);
}

/* الاستجابة للشاشات الضيقة — إيقاع مريح للمس */
@media (max-width: 640px) {
    body {
        padding: 12px;
    }

    .container {
        padding: 16px 14px;
        border-radius: 16px;
    }

    .nav-buttons button {
        flex: 1 1 calc(50% - 6px);
        padding: 11px 10px;
        font-size: 14px;
    }

    .nav-lock-badge {
        font-size: 10px;
        padding: 2px 4px;
        margin-inline-start: 3px;
    }

    .bottom-bar {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .bottom-bar .btn-renew {
        width: 100%;
    }

    .table-wrapper {
        max-height: 65vh;
    }

    .modal-box-content {
        padding: 22px 18px;
    }
}

/* شارة القفل على الشاشات الضيقة جداً (≤360px): تُرفع فوق الزر كي لا تكسر
   سطره — شبكة النصفين تبقى سليمة مهما طالت التسمية. حجز مساحة الشارة
   يخص أزرار القفل وحدها فتبقى بقية الأزرار متناظرة الحشوات */
@media (max-width: 360px) {
    .nav-buttons button.nav-locked {
        position: relative;
        padding-inline-end: 22px;
    }

    .nav-lock-badge {
        position: absolute;
        top: 3px;
        inset-inline-end: 5px;
        margin: 0;
        font-size: 10px;
    }
}

/* =========================================================
   ====== طبقة الإتقان الموحّدة — مظهر متسق في كل الثيمات ======
   ========================================================= */

/* ---------- حاسبة المحاسبة — مظهر هادئ متقن ---------- */
.pos-calc-widget {
    background: linear-gradient(180deg, var(--inner-bg), var(--item-bg));
    border-radius: 16px;
    border: 1px solid var(--tint-line);
    padding: 16px;
    box-shadow: var(--shadow-sm);
}

.calc-head-title {
    font-size: 13.5px;
    color: var(--text);
}

.calc-head-hint {
    font-size: 10.5px;
    letter-spacing: .2px;
}

.calc-preview {
    font-size: 14px;
    font-weight: 800;
    min-height: 21px;
    opacity: .95;
}

.calc-screen-container input {
    height: 56px;
    font-size: 24px;
    border-radius: 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    box-shadow: inset 0 2px 6px rgba(2, 6, 23, 0.25);
}

body.theme-light .calc-screen-container input {
    box-shadow: inset 0 2px 6px rgba(15, 23, 42, 0.08);
}

.calc-buttons-grid {
    gap: 8px;
}

.calc-buttons-grid button {
    height: 46px;
    border-radius: 11px;
    font-size: 16.5px;
    background: var(--card);
    box-shadow: var(--shadow-sm);
}

.calc-num {
    font-variant-numeric: tabular-nums;
}

.calc-op {
    font-weight: 800;
}

.calc-kbd-hint {
    font-size: 11px;
    opacity: .9;
}

/* ---------- تعليمات الاستيراد — بطاقة خطوات مرقّمة ---------- */
.import-guide {
    background: var(--tint);
    border: 1px solid var(--tint-line);
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 20px;
}

.import-guide-head {
    font-weight: 800;
    font-size: 14.5px;
    margin-bottom: 10px;
    color: var(--text);
}

.import-guide-steps {
    margin: 0 0 10px 0;
    padding: 0;
    list-style: none;
    counter-reset: guide-step;
    display: grid;
    gap: 7px;
}

.import-guide-steps li {
    counter-increment: guide-step;
    position: relative;
    padding-inline-start: 34px;
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--text);
}

.import-guide-steps li::before {
    content: counter(guide-step);
    position: absolute;
    inset-inline-start: 0;
    top: 2px;
    width: 22px;
    height: 22px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.import-guide-note {
    font-size: 12.5px;
    color: var(--muted-text);
    line-height: 1.9;
    border-top: 1px dashed var(--tint-line);
    padding-top: 10px;
    margin: 0;
}

/* ---------- ملخص نافذة الصرف — أسطر واضحة داخل النموذج ---------- */
.cash-form-intro {
    margin-bottom: 4px;
}

.cfi-rows {
    background: var(--inner-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 14px;
    display: grid;
    gap: 7px;
}

.cfi-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--muted-text);
    line-height: 1.7;
}

.cfi-row b {
    color: var(--text);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.cfi-row.cfi-renewal span {
    color: var(--primary);
    font-weight: 700;
}

/* ---------- حضور اليوم — تسجيل جماعي بنقرة واحدة ---------- */
.w-att-card {
    background: var(--card);
    border: 1px solid var(--tint-line);
    border-radius: 14px;
    padding: 15px 16px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}

.w-att-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.w-att-title {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--text);
}

.w-att-all {
    padding: 9px 16px;
    font-size: 13.5px;
    border-radius: 10px;
}

.w-att-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.w-att-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--item-bg);
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 8px 13px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .15s, transform .12s, box-shadow .15s;
}

.w-att-chip:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
}

.w-att-chip-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
}

.w-att-chip-state {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted-text);
}

.w-att-chip.att-present {
    border-color: rgba(16, 185, 129, 0.5);
    background: rgba(16, 185, 129, 0.08);
}

.w-att-chip.att-present .w-att-chip-state {
    color: var(--success);
}

.w-att-chip.att-absent {
    border-color: rgba(239, 68, 68, 0.5);
    background: rgba(239, 68, 68, 0.07);
}

.w-att-chip.att-absent .w-att-chip-state {
    color: var(--danger);
}

.w-att-chip.att-vacation {
    border-color: rgba(148, 163, 184, 0.55);
    background: rgba(148, 163, 184, 0.1);
}

.w-att-chip.att-vacation .w-att-chip-state {
    color: #64748b;
    font-weight: 800;
}

.w-att-hint {
    margin: 10px 0 0 0;
    font-size: 11.5px;
    color: var(--muted-text);
    line-height: 1.8;
}

/* ---------- ترويسات الفرز القابلة للنقر ---------- */
th.th-sortable {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color .15s;
}

th.th-sortable:hover {
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.22), rgba(59, 130, 246, 0.1));
}

body.theme-light th.th-sortable:hover {
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.14), rgba(37, 99, 235, 0.06));
}

th.sorted {
    color: var(--primary) !important;
    text-shadow: none;
}

body.theme-light th.sorted {
    color: #1d4ed8 !important;
}

.sort-ind {
    font-size: 10px;
    margin-inline-start: 3px;
}

/* ---------- أدوات التحكم بالفترة داخل أشرطة جدولي العمال ---------- */
.w-period-tabs {
    flex-shrink: 0;
}

.w-period-tabs .tab-button-item {
    padding: 8px 14px;
    font-size: 12.5px;
    border-radius: 9px;
}

/* شريط أدوات لاصق داخل صفحة العمال الطويلة — يبقى التحكم بالمتناول */
/* رقاقة عدّ أيام العطلة بكشف الدوام */
.stat-chip.stat-vac {
    border-color: rgba(148, 163, 184, 0.55);
    background: rgba(148, 163, 184, 0.1);
}

.stat-chip.stat-vac b {
    color: #64748b;
}

/* فاصل نهاية الطول الاسمي للدورة — ما بعده يتراكم حتى الصرف */
.sheet-cycle-end td,
.sheet-cycle-end {
    text-align: center;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--muted-text);
    background: rgba(148, 163, 184, 0.1);
    letter-spacing: .3px;
    padding: 7px 10px;
}

.sheet-cycle-end td {
    border-inline: none;
}

tr.sheet-beyond td {
    background: rgba(148, 163, 184, 0.05);
}

.w-sticky-toolbar {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: var(--shadow-sm);
}

/* ---------- عناصر سجل الدوام الموحّد ---------- */
.w-cell-det {
    white-space: nowrap;
}

.w-dur {
    color: var(--muted-text);
    font-size: 12.5px;
}

.w-dur-sep {
    color: var(--border);
    margin: 0 3px;
}

.w-incomplete-note {
    color: var(--warning);
}

/* شارة الدورة التقويمية في جدول العمال */
.w-cal-tag {
    display: inline-block;
    margin-inline-start: 5px;
    font-size: 10px;
    font-weight: 700;
    color: #06b6d4;
    background: rgba(6, 182, 212, 0.11);
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 20px;
    padding: 1px 8px;
    vertical-align: middle;
    white-space: nowrap;
}

/* ---------- نافذة كشف الدوام ---------- */
.sheet-window-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    background: var(--tint);
    border: 1px dashed var(--tint-line);
    border-radius: 11px;
    padding: 9px 13px;
    margin: 4px 0 12px;
    font-size: 12.5px;
    color: var(--muted-text);
    line-height: 1.7;
}

.w-sheet-expand {
    padding: 7px 14px;
    font-size: 12.5px;
    border-radius: 9px;
    white-space: nowrap;
}

/* ---------- زر إجراءات الجوال ---------- */
.w-mobile-actions-btn {
    display: none;
}

/* ---------- بطاقات الجداول على الشاشات الضيقة ---------- */
@media (max-width: 700px) {

    #workersTableElement thead {
        display: none;
    }

    #workersTableElement,
    #workersTableElement tbody,
    #workersTableElement tr,
    #workersTableElement td {
        display: block;
        width: 100%;
    }

    #workersTableElement tbody tr {
        background: var(--item-bg);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 10px 14px;
        margin-bottom: 10px;
        overflow: hidden;
    }

    #workersTableElement tbody td {
        border: none;
        text-align: start;
        padding: 5px 0;
    }

    #workersTableElement tbody td[data-label]::before {
        content: attr(data-label);
        display: inline-block;
        min-width: 86px;
        font-size: 11.5px;
        font-weight: 700;
        color: var(--muted-text);
    }

    #workersTableElement tbody td[data-label] {
        display: flex;
        align-items: baseline;
        gap: 10px;
    }

    #workersTableElement tbody td[data-label] > * {
        flex: 1;
    }

    .w-desktop-actions {
        display: none !important;
    }

    .w-mobile-actions-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 10px 12px;
        margin-top: 4px;
    }

    .w-cell-owed .w-cell-note {
        font-size: 11px;
    }

    .w-sticky-toolbar {
        position: static;
    }

    .w-period-tabs {
        width: 100%;
    }

    .w-period-tabs .tab-button-item {
        flex: 1;
    }
}

/* ---------- صقل البطاقات والإحصاءات ---------- */
.ws-card,
.cash-card,
.summary-card {
    border-radius: 16px;
    transition: border-color .15s, transform .15s;
}

.ws-card:hover,
.cash-card:not(.balance):hover {
    border-color: var(--tint-line);
    transform: translateY(-2px);
}

.cash-card.balance {
    border-width: 1.5px;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.14);
}

.stats-bar {
    border-radius: 14px;
}

.stat-chip {
    border-radius: 24px;
    padding: 6px 13px;
    font-size: 12.5px;
}

.stat-chip b {
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
}

/* ---------- الأزرار: اتساق الارتفاع واللمس ---------- */
.btn-add,
.btn-danger,
.btn-renew,
.btn-sell-invoice,
.auth-gate-btn {
    min-height: 44px;
}

.btn-secondary {
    min-height: 38px;
    padding: 8px 16px;
}

.btn-qty {
    min-height: 32px;
    border-radius: 8px;
    font-size: 12.5px;
}

.row-actions-group .btn-qty {
    padding: 6px 12px;
}

/* ---------- حقول التاريخ داخل النماذج ---------- */
.cash-field input[type="date"] {
    direction: ltr;
    text-align: right;
    font-family: inherit;
}

/* ---------- ترويسات الجداول — إيقاع هادئ ---------- */
th {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .2px;
}

/* ---------- بطاقات المبيعات ---------- */
.sales-card {
    border-radius: 16px;
}

.sales-card:hover {
    box-shadow: var(--shadow-md);
}

/* ---------- (أُلغي الوضع الممتد — أسلوب عرض واحد بترويسة متجمدة) ---------- */

/* =========================================================
   بوابة الخطة والترخيص — «اختيار الخطة أولًا»
   نفس هوية الثيم القائمة: متغيرات --card/--border/--primary
   مع بطاقات مرتفعة فوق بوابة السحابة (100001) ونافذة المفتاح
   فوق البوابة (100002) — والجوال عمود واحد دون تمرير أفقي.
========================================================= */

/* ---------- الغطاء العام للبوابة ---------- */
.plangate-overlay {
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: none;
    overflow-y: auto;
    padding: 30px 14px 40px;
    background: radial-gradient(900px 420px at 50% -8%, rgba(59, 130, 246, 0.10), transparent 70%), rgba(3, 7, 18, 0.94);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    direction: rtl;
    animation: fadeIn .25s ease;
}
.plangate-overlay.show { display: block; }
.plangate-inner {
    position: relative;
    width: 100%;
    max-width: 940px;
    margin: 0 auto;
}
.plangate-close {
    position: absolute;
    top: -6px;
    inset-inline-start: -6px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--muted-text);
    font-size: 15px;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: all .2s ease;
    z-index: 2;
}
.plangate-close:hover { color: var(--danger); border-color: var(--danger); transform: rotate(90deg); }

/* ---------- الترويسة ---------- */
.plangate-head { text-align: center; margin-bottom: 10px; }
.plangate-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    font-size: 38px;
    line-height: 1;
    margin: 0 0 12px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--tint), transparent), var(--card);
    border: 1px solid var(--tint-line);
    box-shadow: 0 0 0 10px rgba(59, 130, 246, 0.05), var(--shadow-sm);
}
.plangate-appname { font-size: 15px; font-weight: 600; color: var(--muted-text); margin: 0 0 6px; letter-spacing: .3px; }
.plangate-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--text);
    margin: 0 0 12px;
}
.plangate-sub {
    font-size: 14px;
    color: var(--muted-text);
    line-height: 1.9;
    max-width: 560px;
    margin: 0 auto;
}
.plangate-exp-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    font-size: 36px;
    line-height: 1;
    margin: 0 0 14px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.10), transparent), var(--card);
    border: 1px solid rgba(245, 158, 11, 0.35);
    box-shadow: 0 0 0 10px rgba(245, 158, 11, 0.05), var(--shadow-sm);
}

/* ---------- عدّادات البيانات وحزمة الانتهاء ---------- */
.plangate-datalbl { font-size: 13px; font-weight: 700; color: var(--text); margin: 20px 0 10px; }
.plangate-counts {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.10), rgba(16, 185, 129, 0.03));
    border: 1px solid rgba(16, 185, 129, 0.30);
    border-radius: 999px;
    padding: 9px 20px;
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.08);
}
.plangate-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 16px 0 4px; }
.plangate-actbtn {
    min-height: 44px;
    padding: 10px 22px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: transform .26s cubic-bezier(.22, .61, .36, 1), box-shadow .26s cubic-bezier(.22, .61, .36, 1), border-color .2s ease;
}
.plangate-actbtn:not(.plangate-actbtn-ghost) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16); }
.plangate-actbtn:hover { transform: translateY(-2px); }
.plangate-actbtn:not(.plangate-actbtn-ghost):hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), var(--shadow-md); }
.plangate-actbtn:active:not(:disabled) { transform: translateY(0) scale(0.985); }
.plangate-actbtn-ghost {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
}
.plangate-actbtn-ghost:hover { border-color: var(--primary); color: var(--primary); box-shadow: none; }
.plangate-mig { font-size: 12.5px; color: var(--success); line-height: 1.9; margin: 12px 0 0; }
.plangate-mig-sub { font-size: 12.5px; color: var(--muted-text); line-height: 1.9; margin: 4px 0 0; }
.plangate-sec {
    font-size: 18px;
    font-weight: 800;
    color: var(--text);
    margin: 30px 0 4px;
    padding-top: 22px;
    border-top: 1px dashed var(--border);
}
.plangate-sec-sub { font-size: 13px; color: var(--muted-text); margin: 0 0 6px; }

/* ---------- شبكة البطاقات ---------- */
.plangate-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: 16px;
    margin: 20px 0 14px;
}
.plan-card {
    display: flex;
    flex-direction: column;
    gap: 9px;
    position: relative;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 18px;
    transition: transform .28s cubic-bezier(.22, .61, .36, 1), box-shadow .28s cubic-bezier(.22, .61, .36, 1), border-color .28s ease;
}
.plan-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.plan-card-free {
    border-color: rgba(245, 158, 11, 0.55);
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.10), rgba(245, 158, 11, 0.02) 45%, transparent), var(--card);
    box-shadow: 0 10px 34px rgba(245, 158, 11, 0.10), var(--shadow-sm);
    overflow: hidden;
}
.plan-card-free::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(to left, rgba(245, 158, 11, 0.9), rgba(245, 158, 11, 0.15) 75%, transparent);
    pointer-events: none;
}
.plan-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan-card-head h3 { margin: 0; font-size: 16.5px; font-weight: 800; color: var(--text); }
.plan-badge-free {
    font-size: 11.5px;
    font-weight: 800;
    color: #fbbf24;
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.22), rgba(245, 158, 11, 0.12));
    border: 1px solid rgba(245, 158, 11, 0.45);
    border-radius: 999px;
    padding: 4px 14px;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.14);
}
.plan-price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plan-price { font-size: 21px; font-weight: 800; color: var(--text); }
.plan-dur { font-size: 12.5px; font-weight: 600; color: var(--muted-text); }
.plan-note {
    font-size: 12px;
    color: var(--muted-text);
    line-height: 1.8;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--inner-bg);
    border-inline-start: 3px solid var(--border);
}
.plan-note-storage { border-inline-start-color: var(--warning); color: var(--text); }
.plan-note-mig { border-inline-start-color: var(--success); }
.plan-note-after { border-inline-start-color: rgba(239, 68, 68, 0.55); }
.plan-feats { list-style: none; margin: 2px 0 4px; padding: 0; flex: 1; }
.plan-feats li {
    position: relative;
    padding: 5px 20px 5px 26px;
    font-size: 12.5px;
    color: var(--muted-text);
    line-height: 1.7;
}
.plan-feats li::before {
    content: "✓";
    position: absolute;
    inset-inline-end: 0;
    color: var(--success);
    font-weight: 800;
}
.plan-cta {
    min-height: 44px;
    width: 100%;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
    transition: transform .26s cubic-bezier(.22, .61, .36, 1), box-shadow .26s cubic-bezier(.22, .61, .36, 1);
    margin-top: auto;
}
.plan-cta:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 6px 18px rgba(59, 130, 246, 0.35); }
.plan-cta:active { transform: translateY(0) scale(0.985); }
.plan-cta-help { text-align: center; font-size: 11.5px; color: var(--muted-text); }
.plan-keyline { font-size: 11.5px; color: var(--muted-text); line-height: 1.8; text-align: center; }

/* ---------- شريط «لدي مفتاح تفعيل» ---------- */
.plangate-keystrip {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    width: 100%;
    padding: 15px 20px;
    padding-inline-end: 58px;
    margin: 8px 0 0;
    border-radius: var(--radius);
    border: 1px solid var(--tint-line);
    background: var(--tint);
    color: var(--text);
    font-family: inherit;
    cursor: pointer;
    transition: border-color .25s ease, transform .25s cubic-bezier(.22, .61, .36, 1);
    text-align: start;
}
.plangate-keystrip::after {
    content: "❮";
    position: absolute;
    inset-inline-end: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary);
    font-size: 15px;
    font-weight: 800;
    transition: transform .25s cubic-bezier(.22, .61, .36, 1), color .25s ease;
}
.plangate-keystrip:hover { border-color: var(--primary); transform: translateY(-1px); }
.plangate-keystrip:hover::after { transform: translateY(-50%) translateX(-4px); color: var(--primary-dark); }
.plangate-keystrip:active { transform: translateY(0); }
.plangate-keystrip-title { font-size: 14.5px; font-weight: 800; }
.plangate-keystrip-title::before {
    content: "🔑";
    font-size: 15px;
    margin-inline-end: 8px;
}
.plangate-keystrip-sub { font-size: 12px; color: var(--muted-text); }

/* ---------- رقاقات الثقة ---------- */
.plangate-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    margin: 20px 0 0;
}
.plangate-trust span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: var(--muted-text);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 14px;
}
.plangate-trust span::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
    opacity: 0.75;
    flex-shrink: 0;
}

/* ---------- الأسئلة الشائعة ---------- */
.plangate-faq {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin-top: 18px;
}
.plangate-faq h3 { margin: 0 0 8px; font-size: 14.5px; font-weight: 800; color: var(--text); }
.plangate-faq details { border-bottom: 1px solid var(--tint-line); padding: 11px 0; }
.plangate-faq details:last-child { border-bottom: none; }
.plangate-faq summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    list-style: none;
    position: relative;
    padding-inline-end: 34px;
    transition: color .2s ease;
}
.plangate-faq summary:hover { color: var(--primary); }
.plangate-faq summary::-webkit-details-marker { display: none; }
.plangate-faq summary::after {
    content: "+";
    position: absolute;
    inset-inline-end: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--tint);
    border: 1px solid var(--tint-line);
    color: var(--primary);
    font-weight: 800;
    font-size: 14px;
    transition: background .2s ease, color .2s ease;
}
.plangate-faq details[open] summary::after {
    content: "−";
    background: rgba(59, 130, 246, 0.16);
}
.plangate-faq p { margin: 8px 0 2px; font-size: 12.5px; color: var(--muted-text); line-height: 1.9; }
@keyframes plangateFaqIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}
.plangate-faq details[open] p { animation: plangateFaqIn .3s ease; }

/* ---------- الدعم الختامي ---------- */
.plangate-support { text-align: center; font-size: 12.5px; color: var(--muted-text); line-height: 1.9; margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--border); }
.plangate-support p { margin: 3px 0; }
.plangate-sitelink { color: var(--primary); font-weight: 700; text-decoration: none; }
.plangate-sitelink:hover { text-decoration: underline; }

/* ---------- نافذة إدخال مفتاح التفعيل ---------- */
.plangate-keywrap {
    position: fixed;
    inset: 0;
    z-index: 100002;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(3, 7, 18, 0.82);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    direction: rtl;
}
.plangate-keywrap.show { display: flex; animation: fadeIn .2s ease; }
.plangate-keycard {
    position: relative;
    width: 100%;
    max-width: 470px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 26px 24px 24px;
    box-shadow: 0 30px 80px rgba(2, 6, 23, 0.55), 0 10px 30px rgba(2, 6, 23, 0.35);
    animation: popIn .22s ease;
    /* سقف ارتفاع مع تمرير داخلي: بطاقة المفتاح بلا سقف كانت تبتلع زر
       «تفعيل/متابعة» تحت حد الشاشات القصيرة مع رسالة خطأ طويلة */
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
.plangate-keycard::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(to left, var(--primary), var(--primary-dark) 55%, transparent 92%);
    pointer-events: none;
}
.plangate-keyclose {
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted-text);
    font-size: 13px;
    cursor: pointer;
    transition: all .2s ease;
}
.plangate-keyclose:hover { color: var(--danger); border-color: var(--danger); }
.plangate-keytitle { margin: 0 0 6px; font-size: 18px; font-weight: 800; color: var(--text); }
.plangate-keydesc { margin: 0 0 14px; font-size: 12.5px; color: var(--muted-text); line-height: 1.8; }
.plangate-keyfield { position: relative; }
#licKeyInput {
    width: 100%;
    box-sizing: border-box;
    background: var(--inner-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    letter-spacing: .4px;
    padding: 14px 14px 14px 46px;
    transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
#licKeyInput:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--item-bg);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.16);
}
#licKeyInput.lic-key-ok {
    border-color: var(--success);
    background: rgba(16, 185, 129, 0.06);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.14);
}
.plangate-paste {
    position: absolute;
    inset-inline-end: 7px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--item-bg);
    cursor: pointer;
    font-size: 14px;
    transition: border-color .2s ease;
}
.plangate-paste:hover { border-color: var(--primary); background: var(--tint); }
.plangate-keyhint { margin: 9px 0 4px; font-size: 11.5px; color: var(--muted-text); line-height: 1.8; }
.plangate-keyerr {
    min-height: 20px;
    margin: 6px 0 10px;
    font-size: 12.5px;
    color: var(--danger);
    line-height: 1.8;
}
.plangate-keyok {
    border: 1px solid rgba(16, 185, 129, 0.4);
    background: rgba(16, 185, 129, 0.09);
    border-radius: 10px;
    padding: 14px;
    margin: 6px 0 12px;
    animation: popIn .2s ease;
}
.plangate-keyok-title { font-size: 14px; font-weight: 800; color: var(--success); line-height: 1.8; }
.plangate-keyok-sub { font-size: 12.5px; color: var(--muted-text); margin-top: 4px; }
.plangate-keygo {
    width: 100%;
    min-height: 46px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
    transition: transform .26s cubic-bezier(.22, .61, .36, 1), box-shadow .26s cubic-bezier(.22, .61, .36, 1);
}
.plangate-keygo:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 6px 18px rgba(59, 130, 246, 0.35); }
.plangate-keygo:active:not(:disabled) { transform: translateY(0) scale(0.985); }
.plangate-keygo:disabled { opacity: .65; cursor: default; transform: none; box-shadow: none; }

/* ---------- رقاقة الحالة في شريط التنقل ---------- */
.lic-chip {
    align-self: center;
    flex-shrink: 0;
    font-size: 11.5px;
    font-weight: 700;
    font-family: inherit;
    color: var(--muted-text);
    background: var(--item-bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 5px 13px;
    cursor: pointer;
    transition: transform .25s cubic-bezier(.22, .61, .36, 1), border-color .2s ease;
    white-space: nowrap;
}
.lic-chip::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    margin-inline-end: 7px;
    vertical-align: 1px;
}
.lic-chip.lic-chip-cal { color: #93c5fd; border-color: rgba(59, 130, 246, 0.45); }
.lic-chip.lic-chip-warn { color: #fbbf24; border-color: rgba(245, 158, 11, 0.5); background: rgba(245, 158, 11, 0.09); }
.lic-chip.lic-chip-danger { color: #f87171; border-color: rgba(239, 68, 68, 0.5); background: rgba(239, 68, 68, 0.09); }
.lic-chip:hover { transform: translateY(-1px); }
.lic-chip:active { transform: none; }

/* ---------- شاشة «الترخيص والاشتراك» في الإعدادات ---------- */
.lic-status-card {
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.05), transparent 60%), var(--card);
    border: 1px solid var(--border);
    border-inline-start: 3px solid var(--primary);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
}
.lic-status-name { font-size: 15.5px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.lic-status-dates { font-size: 13px; color: var(--muted-text); line-height: 1.9; }
.lic-status-remain {
    display: inline-block;
    margin-top: 12px;
    font-size: 12.5px;
    font-weight: 700;
    color: #93c5fd;
    background: var(--tint);
    border: 1px solid var(--tint-line);
    border-radius: 999px;
    padding: 5px 15px;
}
.lic-status-expired {
    border-color: rgba(239, 68, 68, 0.45);
    border-inline-start-color: var(--danger);
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.06), transparent 60%), var(--card);
}
.lic-status-expired .lic-status-name { color: var(--danger); }
.lic-note {
    font-size: 12.5px;
    color: var(--muted-text);
    line-height: 1.9;
    background: var(--inner-bg);
    border-inline-start: 3px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 10px;
}
.lic-note-storage { border-inline-start-color: var(--warning); color: var(--text); }
.lic-note-mig { border-inline-start-color: var(--success); }
.lic-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.lic-device { font-size: 12.5px; color: var(--muted-text); margin-top: 4px; }
.lic-device bdi { color: var(--text); font-weight: 700; letter-spacing: .5px; }
.lic-pwa-note {
    font-size: 12px;
    color: var(--muted-text);
    line-height: 1.9;
    border-top: 1px dashed var(--border);
    margin-top: 18px;
    padding-top: 14px;
}

/* ---------- استجابة الجوال: عمود واحد دون تمرير أفقي ---------- */
@media (max-width: 768px) {
    .plangate-overlay { padding: 18px 12px 30px; }
    .plangate-title { font-size: 22px; }
    .plangate-sub { font-size: 13px; }
    .plangate-logo { width: 64px; height: 64px; font-size: 31px; box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.05), var(--shadow-sm); }
    .plangate-exp-ico { width: 64px; height: 64px; font-size: 30px; box-shadow: 0 0 0 8px rgba(245, 158, 11, 0.05), var(--shadow-sm); }
    .plangate-grid { grid-template-columns: 1fr; gap: 14px; }
    .plangate-actions { margin: 14px 0 4px; }
    .plangate-actbtn { flex: 1 1 100%; max-width: 340px; }
    .plangate-counts { font-size: 13px; padding: 8px 16px; }
    .plangate-keycard { padding: 20px 16px 18px; }
    .plangate-keystrip { padding-inline-end: 52px; }
    .plangate-keystrip::after { inset-inline-end: 14px; }
    .lic-chip { max-width: 130px; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
}

/* =========================================================
   طبقة الصقل البصري — العضو 12
   نفس متغيرات الهوية القائمة: --primary/--tint/--success… لا جديد خارجها
========================================================= */

/* دخول البطاقات بتدرّج زمني ناعم عند فتح البوابة */
@keyframes plangateCardIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}
.plangate-grid > .plan-card { animation: plangateCardIn .45s cubic-bezier(.22, .61, .36, 1) backwards; }
.plangate-grid > .plan-card:nth-child(2) { animation-delay: .07s; }
.plangate-grid > .plan-card:nth-child(3) { animation-delay: .14s; }
.plangate-grid > .plan-card:nth-child(n + 4) { animation-delay: .21s; }

/* عنوان البوابة بتدرّج الهوية — مع تراجع آمن للمتصفحات القديمة */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .plangate-title {
        background: linear-gradient(120deg, var(--primary), var(--primary-dark) 75%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

/* البطاقة المجانية نجم الشاشة: التوهج الكهرماني يشتد بهدوء عند المرور */
.plan-card-free:hover {
    border-color: rgba(245, 158, 11, 0.8);
    box-shadow: 0 16px 44px rgba(245, 158, 11, 0.16), var(--shadow-md);
}
/* البطاقات المدفوعة: لمسة زرقاء هادئة على الحد عند المرور — توازن بلا صراخ */
.plan-card:not(.plan-card-free):hover { border-color: rgba(59, 130, 246, 0.45); }

/* الرقاقة داخل شريط التنقل: الشريط يحمل صنفي nav-bar وnav-buttons معًا
   فتلتقط الرقاقة أنماط أزرار التبويب (وزن 0,1,1) وتكبر كزر — هذا الاستثناء
   يعيد إليها دقّتها المُدمجة دون المساس بألوان حالاتها الثلاث. */
.nav-bar .lic-chip,
.nav-bar .lic-chip:hover {
    font-size: 11.5px;
    font-weight: 700;
    padding: 5px 13px;
    border-radius: 999px;
    box-shadow: none;
    background: var(--item-bg);
    border: 1px solid var(--border);
    color: var(--muted-text);
    transition: transform .25s cubic-bezier(.22, .61, .36, 1), border-color .2s ease;
}
.nav-bar .lic-chip:hover { transform: translateY(-1px); }
.nav-bar .lic-chip:active { transform: none; }
.nav-bar .lic-chip.lic-chip-cal { color: #93c5fd; border-color: rgba(59, 130, 246, 0.45); background: var(--item-bg); }
.nav-bar .lic-chip.lic-chip-warn { color: #fbbf24; border-color: rgba(245, 158, 11, 0.5); background: rgba(245, 158, 11, 0.09); }
.nav-bar .lic-chip.lic-chip-danger { color: #f87171; border-color: rgba(239, 68, 68, 0.5); background: rgba(239, 68, 68, 0.09); }
.nav-bar .lic-chip.lic-chip-cal:hover { color: #93c5fd; border-color: var(--primary); background: var(--item-bg); }
.nav-bar .lic-chip.lic-chip-warn:hover { color: #fbbf24; border-color: var(--warning); background: rgba(245, 158, 11, 0.09); }
.nav-bar .lic-chip.lic-chip-danger:hover { color: #f87171; border-color: var(--danger); background: rgba(239, 68, 68, 0.09); }

/* توافق الثيم الفاتح — تباين مريح للشارات والرقاقات والغطاءين */
body.theme-light .plan-badge-free {
    color: #b45309;
    background: linear-gradient(180deg, rgba(217, 119, 6, 0.16), rgba(217, 119, 6, 0.08));
    border-color: rgba(217, 119, 6, 0.45);
}
body.theme-light .plangate-overlay {
    background: radial-gradient(900px 420px at 50% -8%, rgba(37, 99, 235, 0.08), transparent 70%), rgba(241, 245, 249, 0.78);
}
body.theme-light .plangate-keywrap { background: rgba(241, 245, 249, 0.62); }
body.theme-light .plangate-keycard {
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35), 0 8px 24px rgba(15, 23, 42, 0.22);
}
body.theme-light .lic-chip.lic-chip-cal { color: #1d4ed8; border-color: rgba(37, 99, 235, 0.4); }
body.theme-light .lic-chip.lic-chip-warn { color: #b45309; background: rgba(217, 119, 6, 0.08); border-color: rgba(217, 119, 6, 0.45); }
body.theme-light .lic-chip.lic-chip-danger { color: #b91c1c; background: rgba(220, 38, 38, 0.06); border-color: rgba(220, 38, 38, 0.45); }
body.theme-light .lic-status-remain { color: #1d4ed8; }
body.theme-light .plangate-counts {
    background: linear-gradient(180deg, rgba(5, 150, 105, 0.09), rgba(5, 150, 105, 0.02));
    border-color: rgba(5, 150, 105, 0.35);
}
body.theme-light #licKeyInput.lic-key-ok {
    background: rgba(5, 150, 105, 0.05);
    box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.12);
}

/* احترام تفضيل تقليل الحركة — تتوقف حركات هذه الطبقة فقط (إضافة إلى الطبقة العامة للمشروع) */
@media (prefers-reduced-motion: reduce) {
    .plangate-grid > .plan-card,
    .plangate-faq details[open] p { animation: none; }
    .plangate-grid > .plan-card:hover { transform: none; }
}

/* الرقاقة على الجوال: خط أصغر مع الحفاظ على الشكل المدمج فوق أنماط أزرار التبويب */
@media (max-width: 768px) {
    .nav-bar .lic-chip,
    .nav-bar .lic-chip:hover { font-size: 11px; }
}

/* =========================================================
   [دفعة الديون والدفعات] بوكس الديون في الكاشير: عمودان
   بشبكة ذاتية الانهيار — قسم ديون دائم وعمود عمال شرطي
   ========================================================= */
.shift-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px 16px;
}

.shift-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

/* فاصل خفيف بين العمودين: أفقي متقطع عند التكدس (الجوال) */
.shift-col + .shift-col {
    border-top: 1px dashed var(--border);
    padding-top: 12px;
}

/* عند الوقوف جنبًا إلى جنب: فاصل عمودي بدل الأفقي — الحد 620px هو نقطة
   الالتفاف الفعلية للشبكة (240×2 + فجوة 16 + حشوات الحاوية والودجت) */
@media (min-width: 620px) {
    .shift-col + .shift-col {
        border-top: none;
        padding-top: 0;
        border-inline-start: 1px dashed var(--border);
        padding-inline-start: 16px;
    }
}

.shift-col .shift-head { gap: 8px; }

/* رأس قسم الديون: العنوان وزر «إضافة دَيْن» كتلة واحدة ملاصقة — لا يبقى
   الزر معلقاً بوسط الرأس مهما اتسع العمود، بوجود العمال أو بغيابهم */
.shift-head-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

/* زر «إضافة دَيْن» / «تسجيل» — نسخة مضغوطة من هوية .btn-add الزرقاء.
   !important بنمط عائلة أزرار الودجت shift-*-btn ضد أساس .btn-qty */
.shift-add-btn {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    color: #ffffff !important;
    font-weight: 800;
    font-size: 13px;
    padding: 8px 14px !important;
    border-radius: 10px !important;
    white-space: nowrap;
    transition: filter .15s, transform .15s;
}

.shift-add-btn:hover:not(:disabled) {
    filter: brightness(1.12);
    transform: translateY(-1px);
}

.shift-add-btn:active:not(:disabled) {
    filter: brightness(0.92);
    transform: translateY(0);
}

/* عند فتح السطر: الزر يصبح «إلغاء» بمظهر محايد كأساس .btn-qty */
.shift-add-btn.is-open {
    background: var(--border) !important;
    color: var(--text) !important;
}

/* زر «عرض الديون المعلقة» — شبح محايد */
.shift-ghost-btn {
    padding: 7px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--muted-text);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s;
}

.shift-ghost-btn:hover {
    border-color: var(--primary);
    color: var(--text);
}

/* شارة عدد الديون المعلقة — بلون انتظار st-pending نفسه حرفياً */
.shift-debt-count {
    display: inline-block;
    min-width: 19px;
    text-align: center;
    background: rgba(245, 158, 11, 0.2);
    color: var(--warning);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.5;
    border-radius: 20px;
    padding: 1px 7px;
    margin-inline-start: 6px;
}

/* سطر إدخال الدين المضمّن — إيقاع .shift-form نفسه */
.shift-debt-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    border-top: 1px dashed var(--border);
    padding-top: 10px;
    animation: shiftRowIn 0.18s ease;
}

.shift-debt-row input,
.shift-debt-row select {
    padding: 8px 10px;
    font-size: 13.5px;
}

.shift-debt-name,
.shift-debt-note { flex: 1 1 150px; min-width: 130px; }

.shift-debt-amt { flex: 0 1 96px; min-width: 84px; text-align: center; }

.shift-debt-kind { flex: 0 1 130px; min-width: 120px; }

@keyframes shiftRowIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* قائمة الديون المعلقة داخل النافذة — مكتفية بحدودها وتمريرها */
.shift-debt-list {
    max-height: min(50vh, 320px);
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 10px;
    text-align: start;
}

.shift-debt-list::-webkit-scrollbar { width: 6px; }
.shift-debt-list::-webkit-scrollbar-track { background: transparent; }
.shift-debt-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }

/* سطر الدين: البيان يتمدد ويُقص بثلاث نقاط — min-width:0 شرط القص في flex */
.shift-debt-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 8px 10px;
    border-radius: 8px;
    text-align: start;
}

.shift-debt-line:nth-child(even) { background: var(--row-even); }
.shift-debt-line:hover { background: var(--row-hover); }

.shift-debt-line .shift-debt-name {
    flex: 1 1 110px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
    font-size: 13px;
}

.shift-debt-date {
    font-size: 11px;
    color: var(--muted-text);
    white-space: nowrap;
}

/* الحالة الفارغة المصغرة — سطر واحد خافت */
.shift-debt-empty {
    font-size: 12.5px;
    color: var(--muted-text);
    text-align: center;
    border: 1px dashed var(--border);
    border-radius: 10px;
    padding: 9px 12px;
    line-height: 1.7;
}

/* السطر التوجيهي أسفل قائمة الديون */
.shift-debt-foot {
    font-size: 12px;
    color: var(--muted-text);
    text-align: center;
    padding: 2px 0 4px;
}

/* =========================================================
   [دفعة الدفعات] التسديد الجزئي ومدير الدفعات — هوية من
   متغيرات القائمة حصراً (وصفة الشفافية 0.15 المعتمدة للشارات)
   ========================================================= */

/* كتلة معلومات الدين داخل نموذج التسديد — فوق .cfi-rows القائمة */
.settle-info {
    margin-bottom: 10px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--border);
}

/* سطر المتبقي البارز — رقم القرار الذي يُبنى عليه مبلغ الدفعة */
.cfi-row.cfi-remaining {
    margin-top: 3px;
    padding-top: 9px;
    border-top: 1px dashed var(--tint-line);
}

.cfi-row.cfi-remaining span,
.cfi-row.cfi-remaining b {
    color: var(--primary);
    font-weight: 800;
}

.cfi-row.cfi-remaining b { font-size: 15.5px; }

/* شارة «مسدَّد جزئياً» — سلّم الحالة: أصفر لا شيء مدفوع،
   أزرق التسديد بدأ (قيد التنفيذ)، رمادي أُغلق */
.st-partial {
    background: rgba(59, 130, 246, 0.15);
    color: var(--primary);
}

/* جسم الملاحظة داخل العارض — تمرير داخلي عند الطول، يراعي الأسطر الجديدة
   ويسدّ تسرب السلاسل الطويلة بلا فراغات */
.note-view-box {
    max-height: min(45vh, 300px);
    overflow-y: auto;
    background: var(--inner-bg);
    border: 1px dashed var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    margin-top: 12px;
    text-align: start;
    font-size: 14px;
    line-height: 1.8;
    color: var(--text);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* الحالة الفارغة الدفاعية داخل العارض — الحد المتقطع بسمك note-view-box
   نفسه (1px) فتبقى البطاقتان في الموضع الواحد أخوين بصريين */
.note-view-empty {
    margin-top: 12px;
    padding: 18px 14px;
    text-align: center;
    color: var(--muted-text);
    font-size: 13px;
    line-height: 1.8;
    border: 1px dashed var(--border);
    border-radius: 10px;
}

/* صفحة الصندوق: قد تبلغ الأزرار خمسة في الخلية — التفاف نظيف على
   الشاشات الضيقة (النمط نفسه المعتمد لجدول العمال) */
#cashTableElement .row-actions-group {
    gap: 6px;
    flex-wrap: wrap;
}

/* مدير الدفعات داخل نافذة showModal — عناصر html تهرب من وسم p
   فتحمل محاذاتها بنفسها */
.cash-pay-summary {
    text-align: right;
    margin-bottom: 12px;
}

.cash-pay-list {
    max-height: min(50vh, 320px);
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--inner-bg);
    margin-bottom: 12px;
    text-align: right;
}

.cash-pay-line {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-bottom: 1px dashed var(--border);
}

.cash-pay-line:last-child { border-bottom: none; }

.cash-pay-amt {
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.cash-pay-note {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    color: var(--muted-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cash-pay-date {
    font-size: 11.5px;
    color: var(--muted-text);
    white-space: nowrap;
}

.cash-pay-del {
    flex-shrink: 0;
    background: var(--danger);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s, transform .12s;
}

.cash-pay-del:hover {
    background: #dc2626;
    transform: translateY(-1px);
}

.cash-pay-empty {
    padding: 18px 14px;
    margin-bottom: 12px;
    text-align: center;
    color: var(--muted-text);
    font-size: 13px;
    line-height: 1.8;
    border: 1.5px dashed var(--border);
    border-radius: 10px;
}

/* زر «إضافة دفعة» داخل html — لا يغلق المدير وتعلوه نافذة التسديد */
.cash-pay-add {
    width: 100%;
    padding: 10px 12px;
    border: 1px dashed var(--tint-line);
    border-radius: 10px;
    background: var(--tint);
    color: var(--primary);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .15s;
}

.cash-pay-add:hover {
    border-color: var(--primary);
    border-style: solid;
    transform: translateY(-1px);
}

/* البطاقة الخامسة: الديون المعلقة — لمسة كهرمانية كبطاقة الرصيد */
.cash-card.cash-card-debts {
    border-color: rgba(245, 158, 11, 0.45);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.1);
}

.cash-debt-rows {
    display: grid;
    gap: 5px;
    margin-top: 4px;
}

.cash-debt-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 0 6px;
    font-size: 13px;
    color: var(--muted-text);
}

.cash-debt-row b {
    font-size: 15.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* =========================================================
   [دفعة الكمية] زر ＋ بصف البضاعة وسطر النتيجة الحي بالنافذة
   ========================================================= */

/* سطر النتيجة الحي داخل نافذة openCashForm — مرآة .cfi-rows
   والإطار المتقطع = قيمة مشتقة حية */
.aq-preview {
    background: var(--tint);
    border: 1px dashed var(--tint-line);
    border-radius: 12px;
    padding: 10px 14px;
    display: grid;
    gap: 7px;
    text-align: right;
}

.aqp-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--muted-text);
    line-height: 1.7;
}

.aqp-row b {
    color: var(--primary);
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* =========================================================
   [v16] سجل الدوام والحضور — شريط أيام أفقي بسطر واحد
   رقائق (chips) بتمرير أفقي طبيعي، وأحدث يوم مفتوح بتفاصيله
   مباشرة تحت الشريط — بلا حدود أسطر ولا شروح إضافية.
   ========================================================= */
.w-days-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    /* صفوف تلتف رأسياً: ثلاثة إلى أربعة أسطر ظاهرة، وما زاد يُمرَّر
       عمودياً بسكرول منسق مطابق لسكرولات الجداول — لا سطر واحد أفقي */
    max-height: 188px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding: 4px 4px 8px;
    position: relative;
    scrollbar-width: thin;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* سكرول عمودي رقيق بنفس هوية سكرول الجداول (table-wrapper) */
.w-days-strip::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.w-days-strip::-webkit-scrollbar-track {
    background: var(--bg);
    border-radius: 10px;
}

.w-days-strip::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 10px;
}

.w-days-strip::-webkit-scrollbar-thumb:hover {
    background: var(--muted-text);
}

/* تلميح هادئ حين تكون لوزة اليوم مطوية — الشريط وحده ظاهر */
.w-days-hint {
    margin-top: 4px;
    padding: 10px 14px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    text-align: center;
    color: var(--muted-text);
    font-size: 12.5px;
}

.w-day-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 7px 14px;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    min-height: 38px;
    transition: border-color .15s, background .15s, box-shadow .15s, transform .15s;
}

.w-day-chip:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
}

.w-day-chip:active {
    transform: translateY(0);
}

.w-day-chip:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.w-chip-name {
    font-weight: 800;
    font-size: 12.5px;
    color: var(--text);
}

.w-chip-date {
    font-size: 11.5px;
    color: var(--muted-text);
    font-variant-numeric: tabular-nums;
}

.w-chip-count {
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.12);
    color: var(--primary);
    font-size: 10.5px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}

.w-chip-count-warn {
    background: rgba(245, 158, 11, 0.16);
    color: var(--warning);
}

.w-day-chip.w-chip-inc {
    border-color: rgba(245, 158, 11, 0.55);
    background: rgba(245, 158, 11, 0.06);
}

.w-day-chip.w-chip-inc:hover {
    border-color: var(--warning);
}

.w-day-chip.w-chip-open {
    border-color: var(--primary);
    background: rgba(59, 130, 246, 0.08);
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.28);
}

.w-day-chip.w-chip-inc.w-chip-open {
    border-color: var(--warning);
    background: rgba(245, 158, 11, 0.10);
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.30);
}

.w-days-empty {
    background: var(--item-bg);
    border: 1px dashed var(--border);
    border-radius: 12px;
    padding: 18px 16px;
    text-align: center;
    color: var(--muted-text);
    font-size: 13.5px;
    line-height: 1.8;
}

.w-day-panel-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.w-day-panel-title {
    font-weight: 800;
    font-size: 15px;
    flex: 1;
    min-width: 0;
}

.w-day-panel-count {
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.35);
    color: var(--primary);
    font-size: 11.5px;
    font-weight: 800;
    border-radius: 20px;
    padding: 4px 13px;
    white-space: nowrap;
}

/* أزرار حالة اليوم المصغّرة داخل كشف العامل — نفس هوية att-toggle
   بقياس مدمج لصفوف الجدول والأسطر */
.w-day-att-row {
    display: inline-flex;
    gap: 5px;
    margin-top: 5px;
    flex-wrap: wrap;
}

.att-toggle.w-day-att {
    padding: 4px 11px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.5;
}

.att-toggle.w-day-att:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.w-day-att-cell .w-day-att-row {
    margin-top: 0;
}

.sheet-line .w-day-att-row {
    margin-top: 0;
}

/* ملاحظة فرعية داخل بطاقات ملخص العمال — سطر هادئ تحت القيمة */
.ws-sub-note {
    font-size: 11px;
    color: var(--muted-text);
    margin-top: 4px;
    line-height: 1.6;
    font-weight: 600;
}

/* =========================================================
   [المرحلة 5] قائمة الديون المعلقة — بحث فوري وسطر بترتيب جديد:
   الاسم بارز أولاً (مع تاريخه أسفله) ثم اتجاه الدين ثم المبلغ ثم الخيار
   ========================================================= */
.shift-debt-search {
    margin-bottom: 10px;
}

.shift-debt-search .search-input-field {
    width: 100%;
}

.shift-debt-main {
    flex: 1 1 150px;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.shift-debt-main .shift-debt-name {
    flex: none;
    min-width: 0;
    font-weight: 800;
    font-size: 13.5px;
    color: var(--text);
}

/* =========================================================
   [المرحلة 5] سجل النشاطات — علامات التراجع/التقدّم + توستهما
   إدخالا «تم التراجع عن العملية» و«تم التقدّم» دخلا السجل بعلامة
   مميزة (↩ كهرماني / ↪ أخضر) بدل النقطة العامة، وللتنبيه نفسه لون
   ========================================================= */
.activity-dot.act-dot-undo,
.activity-dot.act-dot-redo {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    background: transparent;
    box-shadow: none;
}

.activity-dot.act-dot-undo {
    color: var(--warning);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.14);
    background: rgba(245, 158, 11, 0.12);
}

.activity-dot.act-dot-redo {
    color: var(--success);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.14);
    background: rgba(16, 185, 129, 0.12);
}

/* توست التراجع/التقدّم — نفس هوية عائلة toast-success بلون دلالي */
.toast-msg.toast-undo {
    background: linear-gradient(135deg, #b45309, #92400e);
}

.toast-msg.toast-redo {
    background: linear-gradient(135deg, #047857, #065f46);
}

/* =========================================================
   [نظام .act-btn] أزرار إجراءات الصفوف — أيقونية هادئة
   المبدأ: هدوء في السكون، وضوح في المرور، والتدمير يُعلن عن
   نفسه عند الاقتراب فقط. كل الألوان من متغيرات الثيم حصراً،
   فيعمل النظام في الداكن والفاتح تلقائياً. الأيقونات SVG بخط
   stroke أحادي يرث currentColor — لا تتأثر بالثيم إطلاقاً.
   ========================================================= */

/* ---------- 0) مقاسات النظام (تُورَّث لكل الثيمات) ---------- */
:root {
    --act-size: 36px;     /* هدف لمس مكتبي مريح */
    --act-icon: 16px;     /* بصريات الأيقونة */
    --act-gap: 6px;       /* تباعد الأزرار داخل الخلية */
    --act-radius: 10px;   /* متناسقة مع --radius */
}

/* ---------- 1) الأساس: زر أيقوني شبح ---------- */
.act-btn {
    position: relative;                /* مرجع شارة العدد */
    box-sizing: border-box;
    width: var(--act-size);
    height: var(--act-size);
    min-width: var(--act-size);        /* لا يتمدد ولا ينكمش داخل flex */
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--act-radius);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted-text);
    cursor: pointer;
    transition: background-color .15s ease,
                border-color     .15s ease,
                color            .15s ease,
                box-shadow       .15s ease,
                transform        .10s ease;
    -webkit-tap-highlight-color: transparent;
}

/* الأيقونة: خط stroke موحد يرث لون الزر — حجمه وسمكه من هنا فقط */
.act-btn svg {
    width: var(--act-icon);
    height: var(--act-icon);
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;              /* النقر يُسجَّل على الزر كاملاً */
}

/* ---------- 2) الحالات العامة ---------- */
.act-btn:hover:not(:disabled) {
    background: rgba(59, 130, 246, 0.10);
    border-color: rgba(59, 130, 246, 0.40);
    color: var(--primary);
    box-shadow: var(--shadow-sm);
}
.act-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    border-color: color-mix(in srgb, var(--primary) 40%, transparent);
}

.act-btn:active:not(:disabled) {
    transform: scale(.92);             /* لمسة ضغط ملموسة */
}

.act-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-color: var(--primary);      /* مزامنة الإطار مع حلقة التركيز */
}

.act-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* ---------- 3) المتغيرات الدلالية ---------- */

/* تعديل — أزرق الفعل (لا أخضر المال؛ الأخضر للصرف والتسديد حصراً) */
.act-btn.act-edit:hover:not(:disabled) {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.45);
    color: var(--primary);
}
.act-btn.act-edit:hover:not(:disabled) {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    border-color: color-mix(in srgb, var(--primary) 45%, transparent);
}

/* حذف — كامن تماماً في السكون؛ إعلان أحمر كامل عند المرور فقط */
.act-btn.act-delete:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.50);
    color: var(--danger);
    box-shadow: 0 2px 10px rgba(239, 68, 68, 0.30);
}
.act-btn.act-delete:hover:not(:disabled) {
    background: color-mix(in srgb, var(--danger) 14%, transparent);
    border-color: color-mix(in srgb, var(--danger) 50%, transparent);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--danger) 30%, transparent);
}

/* صرف/تسديد/تحصيل — أخضر المال: أيقونة خضراء سكوناً وتوهج أخضر مروراً */
.act-btn.act-money {
    color: var(--success);
    border-color: rgba(16, 185, 129, 0.35);
}
.act-btn.act-money {
    border-color: color-mix(in srgb, var(--success) 35%, transparent);
}
.act-btn.act-money:hover:not(:disabled) {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.55);
    color: var(--success);
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.28);
}
.act-btn.act-money:hover:not(:disabled) {
    background: color-mix(in srgb, var(--success) 15%, transparent);
    border-color: color-mix(in srgb, var(--success) 55%, transparent);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--success) 28%, transparent);
}

/* كشف/دفعات — معلوماتي أزرق */
.act-btn.act-info,
.act-btn.act-pays { color: var(--primary); }
.act-btn.act-info:hover:not(:disabled),
.act-btn.act-pays:hover:not(:disabled) {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.45);
    color: var(--primary);
}
.act-btn.act-info:hover:not(:disabled),
.act-btn.act-pays:hover:not(:disabled) {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    border-color: color-mix(in srgb, var(--primary) 45%, transparent);
}

/* ملاحظة — كهرماني هادئ (عائلة الديون القائمة في التطبيق) */
.act-btn.act-note { color: var(--warning); }
.act-btn.act-note:hover:not(:disabled) {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.50);
    color: var(--warning);
}
.act-btn.act-note:hover:not(:disabled) {
    background: color-mix(in srgb, var(--warning) 14%, transparent);
    border-color: color-mix(in srgb, var(--warning) 50%, transparent);
}

/* إضافة كمية ＋ — الفعل البنائي الوحيد: يمتلئ بهدوء */
.act-btn.act-add {
    color: var(--primary);
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.40);
}
.act-btn.act-add {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    border-color: color-mix(in srgb, var(--primary) 40%, transparent);
}
.act-btn.act-add:hover:not(:disabled) {
    background: rgba(59, 130, 246, 0.24);
    border-color: var(--primary);
}
.act-btn.act-add:hover:not(:disabled) {
    background: color-mix(in srgb, var(--primary) 24%, transparent);
}

/* ---------- 4) شارة العدد لزر «دفعات (N)» ---------- */
.act-badge {
    position: absolute;
    top: -5px;
    inset-inline-end: -5px;            /* خاصية منطقية — RTL/LTR صحيحان */
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--primary-dark);   /* أبيض على #2563eb = 4.8:1 */
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--inner-bg);   /* حلقة فاصلة عن خلفية الصف */
    pointer-events: none;
}

/* ---------- 5) حاوية الإجراءات — إيقاع موحد لكل الجداول ---------- */
.row-actions-group {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--act-gap);
    flex-wrap: wrap;                   /* شبكة أمان لخلية ضيقة جداً */
}

/* =========================================================
   [تباين AA للثيمات الداكنة] الأزرار الرئيسية بنص أبيض تحتاج خلفية
   أغمق من طرف التدرج الفاتح — امتثال 1.4.3 (≥4.5:1) في الداكنين
   حصراً؛ الثيم الفاتح سليم بألوانه الحالية فلا يُمس
   ========================================================= */
body:not(.theme-light) .btn-add {
    background: var(--primary-dark);
}
body:not(.theme-light) .btn-renew {
    background: #047857;
}
body:not(.theme-light) .modal-action-primary {
    background: var(--primary-dark);
}
body:not(.theme-light) .modal-action-danger {
    background: #dc2626;
}
body:not(.theme-light) .toast-success {
    background: #047857;
}
body:not(.theme-light) .toast-error {
    background: #dc2626;
}

/* تعزيز الثيم الفاتح: الأزرار الأيقونية الهادئة تحتاج حضوراً أوضح
   على الخلفيات الفاتحة — لون أعمق وإطار أوضح بلا صخب */
body.theme-light .act-btn {
    color: #475569;
    border-color: #c3cddc;
}
body.theme-light .act-btn.act-note { color: #b45309; }

/* =========================================================
   [أزرار النافذة المثبتة] مهما طال محتوى النافذة تبقى إجراءات
   الإلغاء/التأكيد مرئية بلا أي تمرير — تمدد بعرض الصندوق بخلفية
   صلبة تعلو المحتوى المار تحتها (زخرفة ظلية خفيفة عند الالتصاق)
   ========================================================= */
.modal-buttons-row,
.modal-buttons-stack {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 6px -24px -26px;
    padding: 12px 24px 20px;
    background: var(--card);
    border-radius: 0 0 18px 18px;
    box-shadow: 0 -6px 14px -10px rgba(2, 6, 23, 0.55);
}

@media (max-width: 640px) {
    .modal-buttons-row,
    .modal-buttons-stack {
        margin: 6px -18px -22px;
        padding: 10px 18px 16px;
    }
}

/* =========================================================
   [v16] معالج قاعدة البيانات السحابية الخاصة (cloud-wizard.js)
   ========================================================= */
.cw-overlay {
    position: fixed;
    inset: 0;
    z-index: 320;
    background: rgba(2, 6, 23, 0.82);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 14px;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}
.cw-overlay.show { opacity: 1; pointer-events: auto; }
.cw-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow-md);
    width: 100%;
    max-width: 640px;
    margin: auto;
    padding: 26px 24px 20px;
    position: relative;
    animation: popIn .25s ease;
    /* بنية عمودية: الرأس وخطوات المؤشر ثابتان، جسم الخطوة يتمرر،
       وشريط أزرار الحسم (رجوع/تنفيذ) مثبت أسفل النافذة دائماً —
       فلا تغرق أزرار المعالج تحت حد الشاشة في أي خطوة طويلة */
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
}
.cw-close {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--item-bg);
    border: 1px solid var(--border);
    color: var(--muted-text);
    font-size: 15px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.cw-close:hover { background: var(--border); color: var(--text); }
.cw-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding-inline-end: 40px; flex-shrink: 0; }
.cw-head-ico {
    width: 52px; height: 52px; border-radius: 15px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 27px;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.3);
}
.cw-title { margin: 0; font-size: 18px; font-weight: 800; }
.cw-sub { margin: 3px 0 0; font-size: 12.5px; color: var(--muted-text); line-height: 1.7; }
.cw-steps { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; flex-shrink: 0; }
.cw-dot {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; color: var(--muted-text);
    padding: 4px 10px; border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--inner-bg);
    transition: color .2s, border-color .2s, background .2s;
}
.cw-dot i {
    font-style: normal;
    width: 17px; height: 17px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--border); font-size: 10px; font-weight: 800;
    transition: background .2s;
}
.cw-dot-on { color: var(--text); border-color: rgba(59, 130, 246, 0.45); background: rgba(59, 130, 246, 0.08); }
.cw-dot-on i { background: var(--primary); color: #fff; }
.cw-dot-cur { border-color: var(--primary); box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.3); }
.cw-steps-sep { flex: 0 0 14px; height: 1px; background: var(--border); }
.cw-steps-manual {
    font-size: 12px; font-weight: 700; color: var(--warning);
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.35);
    padding: 6px 14px; border-radius: 20px;
}
.cw-body {
    /* جسم الخطوة: منطقة التمرير — أزرار الحسم أسفله لا تغرق أبداً.
       حد أدنى مرن يخمد قفزة ارتفاع البطاقة بين خطوة طويلة وأخرى قصيرة */
    flex: 1 1 auto;
    min-height: clamp(120px, 28dvh, 220px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-inline-end: 4px;
}
.cw-foot {
    display: flex; gap: 9px; flex-wrap: wrap;
    margin-top: 20px; padding-top: 16px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.cw-btn {
    border: none; border-radius: 11px; padding: 11px 18px;
    font-family: inherit; font-size: 13.5px; font-weight: 800;
    cursor: pointer; transition: transform .15s, box-shadow .15s, opacity .15s;
}
.cw-btn:disabled { opacity: .55; cursor: wait; transform: none; }
.cw-btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff; box-shadow: var(--shadow-sm); flex: 1; min-width: 160px;
}
.cw-btn-primary:not(:disabled):hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.cw-btn-ghost {
    background: var(--item-bg); color: var(--text);
    border: 1px solid var(--border);
}
.cw-btn-ghost:hover { border-color: var(--primary); }
.cw-btn-manual {
    background: rgba(245, 158, 11, 0.1); color: var(--warning);
    border: 1px solid rgba(245, 158, 11, 0.4);
}
.cw-btn-manual:hover { background: rgba(245, 158, 11, 0.16); }
.cw-btn-big { padding: 14px 22px; font-size: 15px; }

/* شرائط التمرير الموحدة داخل نوافذ التطبيق — رفيع متلون مع الثيم في كل
   المتصفحات (وليس في الحديث منها حصراً) */
.modal-description-text::-webkit-scrollbar,
.cash-modal-body::-webkit-scrollbar,
.cw-body::-webkit-scrollbar,
.auth-gate-card::-webkit-scrollbar,
.plangate-keycard::-webkit-scrollbar,
.modal-scroll::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.modal-description-text::-webkit-scrollbar-thumb,
.cash-modal-body::-webkit-scrollbar-thumb,
.cw-body::-webkit-scrollbar-thumb,
.auth-gate-card::-webkit-scrollbar-thumb,
.plangate-keycard::-webkit-scrollbar-thumb,
.modal-scroll::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 99px;
}
.modal-description-text::-webkit-scrollbar-thumb:hover,
.cash-modal-body::-webkit-scrollbar-thumb:hover,
.cw-body::-webkit-scrollbar-thumb:hover,
.auth-gate-card::-webkit-scrollbar-thumb:hover,
.plangate-keycard::-webkit-scrollbar-thumb:hover,
.modal-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--muted-text);
}

/* بطاقتا خياري ربط قاعدة سابقة (دمج / اعتماد القاعدة) داخل نافذة الحسم */
.cw-link-choices {
    display: grid;
    gap: 10px;
    text-align: start;
    margin-bottom: 6px;
}
.cw-link-choice {
    background: var(--inner-bg);
    border: 1px solid var(--border);
    border-inline-start: 3px solid var(--primary);
    border-radius: 13px;
    padding: 13px 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.cw-link-choice b {
    font-size: 13.5px;
    color: var(--text);
}
.cw-link-choice span {
    font-size: 12px;
    color: var(--muted-text);
    line-height: 1.75;
}

.cw-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cw-hero-cell {
    background: var(--inner-bg);
    border: 1px solid var(--border);
    border-radius: 13px;
    padding: 13px 14px;
    display: flex; flex-direction: column; gap: 5px;
    font-size: 12px; color: var(--muted-text); line-height: 1.7;
}
.cw-hero-cell b { color: var(--text); font-size: 13.5px; }
.cw-hero-ico { font-size: 21px; }
.cw-pre {
    margin-top: 12px;
    background: rgba(16, 185, 129, 0.07);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 13px;
    padding: 13px 15px;
    font-size: 12.5px; line-height: 1.8;
    display: flex; flex-direction: column; gap: 4px;
}
.cw-pre b { color: var(--success); }
.cw-pre-actions { display: flex; gap: 8px; margin-top: 5px; }
.cw-adv { margin-top: 12px; border: 1px dashed var(--border); border-radius: 12px; padding: 10px 14px; }
.cw-adv summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--muted-text); }
.cw-adv-body { font-size: 12px; color: var(--muted-text); line-height: 1.8; margin-top: 8px; }
.cw-adv-body p { margin: 0 0 8px; }
.cw-row { display: flex; gap: 8px; align-items: center; }
.cw-row .cw-input { flex: 1; min-width: 0; }

.cw-token-steps { margin: 0; padding-inline-start: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.cw-token-steps li {
    counter-increment: cwstep;
    background: var(--inner-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    /* حشوة بادئ الخط المنطقية (يمين الصفحة في RTL) — كانت فيزيائية يسار
       فارتكز رقم الخطوة فوق النص بدل جانبه */
    padding-inline-start: 46px;
    position: relative;
    font-size: 13px; line-height: 1.8;
    display: flex; flex-direction: column; gap: 7px;
}
.cw-token-steps li::before {
    content: counter(cwstep);
    position: absolute;
    inset-inline-start: 13px; top: 13px;
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(59, 130, 246, 0.14);
    color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800;
}
.cw-field { margin-bottom: 13px; }
.cw-label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 6px; }
.cw-input {
    width: 100%;
    background: var(--inner-bg);
    border: 1px solid var(--border);
    border-radius: 11px;
    color: var(--text);
    padding: 11px 13px;
    font-family: inherit; font-size: 14px;
}
.cw-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); }
.cw-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.cw-err {
    color: var(--danger); font-size: 12.5px; font-weight: 700;
    line-height: 1.8; margin: 10px 0; min-height: 0;
    background: rgba(239, 68, 68, 0.07);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 11px; padding: 10px 13px;
}
.cw-err:empty { display: none; }
.cw-err-help { color: var(--warning); background: rgba(245, 158, 11, 0.07); border-color: rgba(245, 158, 11, 0.35); }
.cw-err code { direction: ltr; unicode-bidi: embed; display: inline-block; font-size: 11px; background: var(--inner-bg); border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; margin-top: 4px; }
.cw-sec-note {
    margin-top: 12px;
    font-size: 12px; color: var(--muted-text); line-height: 1.8;
    background: var(--inner-bg); border: 1px solid var(--border);
    border-radius: 11px; padding: 11px 13px;
}
.cw-warn-note { font-size: 11.5px; color: var(--warning); margin: 7px 0 0; line-height: 1.7; }
.cw-sec-title { font-size: 13.5px; font-weight: 800; margin: 14px 0 9px; }
.cw-or-sep { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; color: var(--muted-text); font-size: 12px; }
.cw-or-sep::before, .cw-or-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.cw-proj-list { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; }
.cw-proj {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--inner-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer; text-align: start; font-family: inherit;
    transition: border-color .15s, background .15s, transform .15s;
}
.cw-proj:hover { border-color: var(--primary); transform: translateY(-1px); }
.cw-proj-sel { border-color: var(--primary); background: rgba(59, 130, 246, 0.08); box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.25); }
.cw-proj-off { opacity: .55; cursor: not-allowed; transform: none !important; }
.cw-proj-name { font-weight: 800; font-size: 14px; flex: 1; min-width: 120px; }
.cw-proj-meta { font-size: 11.5px; color: var(--muted-text); font-family: ui-monospace, Menlo, Consolas, monospace; }
.cw-proj-status { font-size: 11px; font-weight: 800; border-radius: 20px; padding: 3px 10px; border: 1px solid; }
.cw-proj-status.st-ok { color: var(--success); border-color: rgba(16, 185, 129, 0.4); background: rgba(16, 185, 129, 0.08); }
.cw-proj-status.st-warn { color: var(--warning); border-color: rgba(245, 158, 11, 0.4); background: rgba(245, 158, 11, 0.08); }

.cw-newproj { border: 1px dashed var(--border); border-radius: 14px; padding: 4px 14px 14px; margin-top: 6px; }
.cw-progress-wrap { margin: 14px 0 4px; }
.cw-progress {
    height: 9px; border-radius: 20px;
    background: var(--inner-bg);
    border: 1px solid var(--border);
    overflow: hidden;
}
.cw-progress i {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--primary), #60a5fa);
    border-radius: 20px;
    transition: width .3s ease;
}
.cw-progress-txt { font-size: 12.5px; font-weight: 700; margin: 9px 0 0; }
.cw-tip { font-size: 11.5px; color: var(--muted-text); margin: 5px 0 0; line-height: 1.7; }

.cw-setup-list { display: flex; flex-direction: column; gap: 7px; }
.cw-setup-item {
    display: flex; align-items: center; gap: 10px;
    background: var(--inner-bg);
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 11px 13px;
    font-size: 13px; font-weight: 600;
}
.cw-setup-ico { font-size: 17px; }
.cw-setup-txt { flex: 1; min-width: 0; line-height: 1.6; }
.cw-setup-state { font-size: 15px; font-weight: 800; width: 24px; text-align: center; }
.cw-setup-state.st-ok { color: var(--success); }
.cw-setup-state.st-err { color: var(--danger); }
.cw-setup-state.st-wait { color: var(--muted-text); animation: softPulse 1.4s ease-in-out infinite; }
.cw-keyfallback {
    margin-top: 12px;
    background: rgba(245, 158, 11, 0.06);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 12px;
    padding: 13px 15px;
    font-size: 12.5px; line-height: 1.8;
}
.cw-mini-steps { color: var(--muted-text); font-size: 12px; }

.cw-acc-note {
    background: rgba(59, 130, 246, 0.07);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 12.5px; line-height: 1.8;
    margin-bottom: 14px;
}
.cw-acc-note b { color: var(--primary); }

.cw-done { text-align: center; padding: 6px 0 2px; }
.cw-done-ico { font-size: 44px; line-height: 1; margin-bottom: 8px; }
.cw-done-title { margin: 0 0 14px; font-size: 17px; font-weight: 800; color: var(--success); }
.cw-done-note { font-size: 12.5px; color: var(--muted-text); line-height: 1.8; margin: 12px 0 0; }

.cw-manual-step {
    display: flex; gap: 12px;
    background: var(--inner-bg);
    border: 1px solid var(--border);
    border-radius: 13px;
    padding: 14px;
    margin-bottom: 10px;
}
.cw-manual-n {
    flex-shrink: 0;
    width: 30px; height: 30px; border-radius: 10px;
    background: rgba(245, 158, 11, 0.14);
    color: var(--warning);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 14px;
}
.cw-manual-body { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.8; }
.cw-manual-body b { display: block; margin-bottom: 5px; font-size: 13.5px; }
.cw-manual-body p { margin: 0 0 9px; color: var(--muted-text); }
.cw-manual-body .cw-row { margin-top: 4px; flex-wrap: wrap; }
.cw-sql-view {
    width: 100%; margin-top: 8px;
    background: var(--bg, #0b1220);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--muted-text);
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 10.5px;
    padding: 10px;
    resize: vertical;
    direction: ltr; text-align: left;
}
.cw-seg { display: flex; gap: 7px; }
.cw-seg-btn {
    flex: 1;
    background: var(--inner-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--muted-text);
    padding: 9px 12px;
    font-family: inherit; font-size: 12.5px; font-weight: 700;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.cw-seg-btn:hover { border-color: var(--primary); }
.cw-seg-on {
    border-color: var(--primary);
    color: var(--text);
    background: rgba(59, 130, 246, 0.09);
}

/* بطاقات شاشة إعدادات قاعدة البيانات السحابية */
.cw-settings-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    padding: 18px 18px 16px;
    margin-bottom: 14px;
}
.cw-settings-head { font-size: 14.5px; font-weight: 800; margin-bottom: 10px; }
.cw-settings-note { font-size: 12.5px; color: var(--muted-text); line-height: 1.9; }
.cw-settings-grid { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.cw-settings-row {
    display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
    font-size: 12.5px;
    background: var(--inner-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 9px 12px;
}
.cw-settings-row span { color: var(--muted-text); font-weight: 700; flex: 0 0 110px; }
.cw-settings-row b { font-weight: 700; word-break: break-all; flex: 1; min-width: 150px; }
.cw-settings-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.cw-ok-card { border-color: rgba(16, 185, 129, 0.45); background: linear-gradient(180deg, rgba(16, 185, 129, 0.06), transparent), var(--card); }
.cw-cta-card { border-color: rgba(59, 130, 246, 0.45); background: linear-gradient(180deg, rgba(59, 130, 246, 0.07), transparent), var(--card); }
.cw-privacy-card { border-style: dashed; }

@media (max-width: 560px) {
    .cw-overlay { padding: 10px 6px; }
    .cw-card { padding: 20px 14px 16px; border-radius: 14px; }
    .cw-hero-grid { grid-template-columns: 1fr; }
    .cw-steps-sep { flex-basis: 8px; }
    .cw-dot { padding: 3px 8px; font-size: 10px; }
    .cw-dot i { width: 15px; height: 15px; }
    .cw-btn-primary { min-width: 0; }
}

/* =========================================================
   بوابة الدخول — زر «لاحقاً» (العمل المحلي دون مزامنة)
   ========================================================= */
.auth-gate-later {
    margin-top: 10px;
    background: transparent;
    border: 1px dashed var(--border);
    color: var(--muted-text);
    border-radius: 10px;
    padding: 11px 14px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .2s, color .2s, background .2s;
    width: 100%;
}

.auth-gate-later:hover {
    border-color: var(--primary);
    color: var(--text);
    background: var(--tint);
}

/* =========================================================
   شاشة «إدارة حسابك» — بطاقة الحساب ونموذج الدخول
   ========================================================= */
.acc-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px;
    margin: 14px 0;
}

.acc-card.acc-ok {
    border-color: rgba(16, 185, 129, 0.45);
}

.acc-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.acc-ico {
    font-size: 26px;
    line-height: 1;
    margin-top: 2px;
}

.acc-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}

.acc-sub {
    font-size: 13px;
    color: var(--muted-text);
    margin-top: 3px;
    line-height: 1.7;
}

.acc-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.acc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: var(--inner-bg);
    border: 1px solid var(--border);
    border-radius: 9px;
    font-size: 13.5px;
}

.acc-row span {
    color: var(--muted-text);
    flex-shrink: 0;
}

.acc-row b {
    color: var(--text);
    text-align: left;
    word-break: break-all;
    font-weight: 600;
}

.acc-row .acc-mono {
    font-family: ui-monospace, monospace;
    font-size: 12.5px;
}

.acc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.acc-actions .btn-secondary,
.acc-actions .btn-delete,
.acc-actions .btn-add {
    flex: 1 1 auto;
    min-width: 130px;
    padding: 10px 14px;
}

.acc-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
}

.acc-note {
    font-size: 13px;
    color: var(--muted-text);
    line-height: 1.8;
    margin-top: 8px;
}

.acc-link {
    background: none;
    border: none;
    color: var(--primary);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

.acc-modal-desc {
    font-size: 14px;
    color: var(--muted-text);
    line-height: 1.7;
    margin: 0 0 12px;
    text-align: right;
}

/* =========================================================
   بطاقات مساري المعالج (إنشاء جديد / قاعدة سابقة)
   ========================================================= */
.cw-path-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

@media (max-width: 560px) {
    .cw-path-grid {
        grid-template-columns: 1fr;
    }
}

.cw-path-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 7px;
    padding: 18px 14px;
    background: var(--item-bg);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

.cw-path-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.cw-path-card-alt:hover {
    border-color: var(--success);
}

.cw-path-ico {
    font-size: 24px;
    line-height: 1;
}

.cw-path-card b {
    font-size: 15px;
    color: var(--text);
}

.cw-path-card span:last-child {
    font-size: 12.5px;
    color: var(--muted-text);
    line-height: 1.7;
}

/* =========================================================
   شاشة الأجهزة — قائمة مرتبة بالأولوية
   ========================================================= */
.dev-loading {
    color: var(--muted-text);
    text-align: center;
    padding: 26px 0;
    font-size: 14px;
}

.dev-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 10px;
    max-height: 420px;
    overflow-y: auto;
    padding-left: 2px;
    scrollbar-width: thin;
}

.dev-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    background: var(--inner-bg);
    border: 1px solid var(--border);
    border-radius: 11px;
    transition: border-color .15s;
}

.dev-row-mine {
    border-color: rgba(16, 185, 129, 0.5);
}

.dev-row-blocked {
    opacity: 0.6;
}

.dev-prio {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    background: var(--tint);
    border: 1px solid var(--tint-line);
    color: var(--text);
    font-weight: 800;
    font-size: 14px;
    border-radius: 10px;
}

.dev-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dev-main b {
    font-size: 14px;
    color: var(--text);
}

.dev-you {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--success);
    background: rgba(16, 185, 129, 0.14);
    border-radius: 20px;
    padding: 2px 8px;
    margin-inline-start: 6px;
}

.dev-meta {
    font-size: 12px;
    color: var(--muted-text);
}

.dev-actions {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}

.dev-actions .btn-secondary,
.dev-actions .btn-delete {
    padding: 7px 10px;
    font-size: 13px;
    min-width: 36px;
}

.dev-empty {
    color: var(--muted-text);
    font-size: 13.5px;
    text-align: center;
    padding: 18px 8px;
    line-height: 1.8;
}

/* =========================================================
   سجل المتعارضات — بطاقة بنسختيها
   ========================================================= */
.conf-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.conf-list-done {
    opacity: 0.75;
}

.conf-sec-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--muted-text);
    margin: 18px 0 6px;
}

.conf-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 13px 14px;
}

.conf-card-done {
    border-style: dashed;
}

.conf-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 9px;
}

.conf-head b {
    color: var(--text);
    font-size: 14.5px;
}

.conf-date {
    font-size: 12px;
    color: var(--muted-text);
}

.conf-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

@media (max-width: 560px) {
    .conf-body {
        grid-template-columns: 1fr;
    }
}

.conf-side {
    background: var(--inner-bg);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 9px 11px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: var(--text);
    line-height: 1.7;
    word-break: break-word;
}

.conf-side-win {
    border-color: rgba(16, 185, 129, 0.45);
}

.conf-lbl {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--muted-text);
}

.conf-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.conf-actions .btn-secondary,
.conf-actions .btn-add {
    padding: 8px 14px;
    font-size: 13px;
}

.conf-done-note {
    font-size: 12.5px;
    color: var(--muted-text);
}