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

:root {
    --app-font-family: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
    --bs-font-sans-serif: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
    --page-bg: #f3f1ec;
    --surface: #faf9f6;
    --surface-secondary: #efede7;
    --text-primary: #25303c;
    --text-secondary: #6f7780;
    --border: #d9d6cf;
    --primary: #41658a;
    --primary-hover: #365675;
    --input-bg: #f7f6f2;
    --danger: #a94d4d;
    --shadow: 0 14px 40px rgba(44, 50, 56, 0.08);
    --card-hover-shadow: 0 10px 26px rgba(44, 50, 56, 0.10);
}

html[data-theme="dark"] {
    --page-bg: #18212a;
    --surface: #202b35;
    --surface-secondary: #26333e;
    --text-primary: #e3e7ea;
    --text-secondary: #aeb7bf;
    --border: #34434e;
    --primary: #6f91b2;
    --primary-hover: #80a2c2;
    --input-bg: #1b252e;
    --danger: #d17a7a;
    --shadow: 0 14px 40px rgba(0, 0, 0, 0.15);
    --card-hover-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}

html {
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--page-bg);
    color: var(--text-primary);
    font-family: var(--app-font-family);
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* الخط الموحد للنظام */
button,
input,
select,
textarea,
option,
table,
th,
td,
a,
label,
.badge,
.btn,
.form-control,
.form-select {
    font-family: var(--app-font-family);
}


/* الشريط العلوي */
.app-header {
    height: 64px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.header-inner {
    height: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.app-name {
    font-size: 18px;
    font-weight: 600;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-button {
    min-width: 44px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-secondary);
    color: var(--text-primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

    .header-button:hover {
        background: var(--input-bg);
        color: var(--text-primary);
    }

.current-user {
    margin-inline: 8px;
    color: var(--text-secondary);
}

.main-content {
    min-height: calc(100vh - 64px);
}

/* صفحة تسجيل الدخول */
.login-page {
    min-height: calc(100vh - 64px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 32px 20px;
}

.login-card {
    width: 100%;
    max-width: 430px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 36px;
    box-shadow: var(--shadow);
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
}

.brand-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: var(--primary);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
}

.login-brand h1 {
    margin: 0 0 5px 0;
    font-size: 22px;
    font-weight: 650;
}

.login-brand p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .form-group label {
        font-size: 14px;
        font-weight: 600;
    }

.form-control {
    height: 46px;
    background: var(--input-bg);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 8px 12px;
}

    .form-control:focus {
        background: var(--input-bg);
        color: var(--text-primary);
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(80, 115, 150, 0.12);
    }

.password-box {
    position: relative;
}

    .password-box .form-control {
        padding-right: 52px;
    }

.password-toggle {
    position: absolute;
    right: 7px;
    top: 5px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}

.login-options {
    min-height: 24px;
}

.remember-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}

.btn-login {
    height: 48px;
    border: 0;
    border-radius: 9px;
    background: var(--primary);
    color: #ffffff;
    font-weight: 600;
    cursor: pointer;
}

    .btn-login:hover {
        background: var(--primary-hover);
    }

.login-footer {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
}

.validation-summary,
.field-validation {
    color: var(--danger);
    font-size: 13px;
}

    .validation-summary ul {
        margin: 0;
        padding-left: 20px;
    }

/* صفحة الرسائل */
.simple-message-page {
    min-height: calc(100vh - 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
}

.simple-message-card {
    width: 100%;
    max-width: 500px;
    padding: 36px;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

    .simple-message-card p {
        color: var(--text-secondary);
    }

.btn-primary-soft {
    display: inline-flex;
    padding: 10px 18px;
    border-radius: 8px;
    background: var(--primary);
    color: #ffffff;
    text-decoration: none;
}

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

/* لوحة التحكم */
.dashboard-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 24px;
}

.dashboard-header {
    margin-bottom: 32px;
}

    .dashboard-header h1 {
        margin: 0 0 8px;
        font-size: 2rem;
        font-weight: 700;
        color: var(--text-primary);
    }

    .dashboard-header p {
        margin: 0;
        color: var(--text-secondary);
        font-size: 1rem;
    }

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.dashboard-card {
    display: block;
    min-height: 150px;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text-primary);
    text-decoration: none;
    box-shadow: var(--shadow);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.2s ease;
}

    .dashboard-card:hover {
        transform: translateY(-2px);
        border-color: var(--primary);
        box-shadow: var(--card-hover-shadow);
        color: var(--text-primary);
        text-decoration: none;
    }

    .dashboard-card h2 {
        margin: 0 0 10px;
        font-size: 1.15rem;
        font-weight: 650;
        color: var(--text-primary);
    }

    .dashboard-card p {
        margin: 0;
        line-height: 1.7;
        color: var(--text-secondary);
    }

@media (max-width: 900px) {
    .dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .login-card {
        padding: 26px 22px;
    }

    .header-inner {
        padding: 0 14px;
    }

    .current-user {
        display: none;
    }

    .dashboard-page {
        padding: 28px 16px;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}
/* إدارة المشتركين */
.subscribers-page {
    max-width: 1250px;
    margin: 0 auto;
    padding: 40px 24px;
}

.page-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}

    .page-header-row h1 {
        margin: 0 0 7px;
        color: var(--text-primary);
        font-size: 2rem;
    }

    .page-header-row p {
        margin: 0;
        color: var(--text-secondary);
    }

.subscriber-toolbar {
    margin-bottom: 20px;
}

.subscriber-search-form {
    display: flex;
    gap: 10px;
    max-width: 520px;
}

.btn-secondary-soft {
    min-height: 42px;
    padding: 8px 18px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-secondary);
    color: var(--text-primary);
    cursor: pointer;
}

    .btn-secondary-soft:hover {
        background: var(--input-bg);
    }

.subscriber-add-panel {
    display: none;
    margin-bottom: 22px;
    padding: 22px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

    .subscriber-add-panel.is-visible {
        display: block;
    }

.subscriber-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.subscriber-form-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.subscriber-table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

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

    .subscriber-table th,
    .subscriber-table td {
        padding: 14px 16px;
        border-bottom: 1px solid var(--border);
        text-align: start;
        vertical-align: middle;
    }

    .subscriber-table th {
        background: var(--surface-secondary);
        color: var(--text-primary);
        font-weight: 650;
    }

    .subscriber-table td {
        color: var(--text-primary);
    }

    .subscriber-table tbody tr:last-child td {
        border-bottom: 0;
    }

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}

.status-active {
    background: rgba(67, 130, 91, 0.13);
    color: #4d8c62;
}

html[data-theme="dark"] .status-active {
    color: #83c39a;
}

.status-inactive {
    background: rgba(169, 77, 77, 0.12);
    color: var(--danger);
}

.table-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.inline-form {
    margin: 0;
}

.btn-table-action {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface-secondary);
    color: var(--text-primary);
    cursor: pointer;
}

    .btn-table-action:hover {
        border-color: var(--primary);
    }

.empty-table-message {
    padding: 36px !important;
    text-align: center !important;
    color: var(--text-secondary) !important;
}

.success-message {
    margin-bottom: 18px;
    padding: 12px 15px;
    border: 1px solid rgba(67, 130, 91, 0.25);
    border-radius: 9px;
    background: rgba(67, 130, 91, 0.08);
    color: var(--text-primary);
}

/* نافذة التعديل */
.modal-backdrop-custom {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(16, 22, 28, 0.42);
    z-index: 1000;
}

    .modal-backdrop-custom.is-visible {
        display: flex;
    }

.modal-card-custom {
    width: 100%;
    max-width: 500px;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.modal-header-custom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

    .modal-header-custom h2 {
        margin: 0;
        font-size: 1.25rem;
    }

.modal-close-button {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 7px;
    background: var(--surface-secondary);
    color: var(--text-primary);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

@media (max-width: 700px) {
    .page-header-row {
        align-items: stretch;
        flex-direction: column;
    }

    .subscriber-search-form {
        max-width: none;
    }

    .subscriber-form-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   صفحة الجرد اليومي
   ========================================================= */

.daily-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 36px 24px;
}

.daily-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

    .daily-header h1 {
        margin: 0 0 7px;
        color: var(--text-primary);
        font-size: 2rem;
        font-weight: 700;
    }

    .daily-header p {
        margin: 0;
        color: var(--text-secondary);
    }

.daily-status {
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-primary);
    font-weight: 600;
}


/* ملخص المبالغ */

.daily-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.summary-card {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

    .summary-card span {
        display: block;
        margin-bottom: 8px;
        color: var(--text-secondary);
        font-size: 14px;
    }

    .summary-card strong {
        color: var(--text-primary);
        font-size: 1.55rem;
    }


/* أقسام الوارد والصادر */

.daily-section {
    margin-bottom: 24px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    overflow: hidden;
}

.daily-section-header {
    padding: 18px 20px;
    background: var(--surface-secondary);
    border-bottom: 1px solid var(--border);
}

    .daily-section-header h2 {
        margin: 0;
        color: var(--text-primary);
        font-size: 1.2rem;
    }


/* نماذج الإدخال */

.daily-form {
    padding: 20px;
}

.income-form-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 2fr auto;
    gap: 10px;
    align-items: start;
}

.expense-form-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 2fr auto;
    gap: 10px;
    align-items: start;
}

.daily-form .form-group {
    min-width: 0;
}

.daily-form .form-control {
    width: 100%;
}

.required-star {
    margin-inline-start: 3px;
    color: var(--danger);
}

.field-validation {
    display: block;
    min-height: 18px;
    margin-top: 5px;
    color: var(--danger);
    font-size: 12px;
}

.daily-add-button {
    min-height: 46px;
    margin-top: 28px;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    background: var(--primary);
    color: #ffffff;
    cursor: pointer;
    font-weight: 600;
    white-space: nowrap;
}

    .daily-add-button:hover {
        background: var(--primary-hover);
    }


/* جدول الجرد */

.daily-table-wrapper {
    overflow-x: auto;
}

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

    .daily-table th,
    .daily-table td {
        padding: 13px 14px;
        border-top: 1px solid var(--border);
        text-align: start;
        vertical-align: middle;
        color: var(--text-primary);
    }

    .daily-table th {
        background: var(--surface-secondary);
        font-weight: 650;
        white-space: nowrap;
    }

    .daily-table td {
        background: var(--surface);
    }

.daily-empty {
    padding: 32px !important;
    text-align: center !important;
    color: var(--text-secondary) !important;
}

.daily-total-row {
    display: flex;
    justify-content: flex-end;
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    background: var(--surface-secondary);
    color: var(--text-primary);
    font-weight: 700;
}

    .daily-total-row strong {
        margin-inline-start: 12px;
    }

.receipt-value {
    font-family: Consolas, monospace;
}


/* أزرار تعديل وحذف العمليات */

.daily-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.daily-action-button {
    padding: 6px 11px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface-secondary);
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

    .daily-action-button:hover {
        border-color: var(--primary);
        background: var(--input-bg);
    }

.daily-delete-button {
    color: var(--danger);
}


/* =========================================================
   نوافذ الجرد
   تنبيه - نجاح - تعديل - حذف
   ========================================================= */

.daily-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(10, 16, 22, 0.28);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

    .daily-modal-overlay.visible {
        display: flex;
    }

.daily-modal {
    width: 100%;
    max-width: 430px;
    padding: 26px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface);
    color: var(--text-primary);
    box-shadow: var(--shadow);
}

    .daily-modal h3 {
        margin: 0 0 12px;
        color: var(--text-primary);
        font-size: 1.25rem;
    }

    .daily-modal p {
        margin: 0;
        line-height: 1.8;
        color: var(--text-secondary);
    }


/* رمز التنبيه أو النجاح */

.modal-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 24px;
    font-weight: 700;
}

.modal-success .modal-icon {
    background: rgba(67, 130, 91, 0.14);
    color: #4d8c62;
}

html[data-theme="dark"] .modal-success .modal-icon {
    color: #83c39a;
}

.modal-warning .modal-icon {
    background: rgba(169, 77, 77, 0.13);
    color: var(--danger);
}


/* أزرار النوافذ */

.daily-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
}

.modal-primary,
.modal-secondary,
.modal-danger {
    min-height: 40px;
    padding: 8px 18px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}

.modal-primary {
    border: 0;
    background: var(--primary);
    color: #ffffff;
}

    .modal-primary:hover {
        background: var(--primary-hover);
    }

.modal-secondary {
    border: 1px solid var(--border);
    background: var(--surface-secondary);
    color: var(--text-primary);
}

    .modal-secondary:hover {
        background: var(--input-bg);
    }

.modal-danger {
    border: 0;
    background: var(--danger);
    color: #ffffff;
}


/* نموذج التعديل داخل النافذة */

.edit-modal-body {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1050px) {

    .income-form-grid,
    .expense-form-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {

    .daily-page {
        padding: 24px 14px;
    }

    .daily-header {
        flex-direction: column;
    }

    .daily-summary {
        grid-template-columns: 1fr;
    }

    .income-form-grid,
    .expense-form-grid {
        grid-template-columns: 1fr;
    }

    .daily-actions {
        flex-wrap: wrap;
    }
}

@media (max-width: 600px) {

    .daily-modal {
        max-width: 100%;
        padding: 20px;
    }

    .daily-modal-actions {
        flex-wrap: wrap;
    }
}
/* إبراز الحقل الذي يحتوي على خطأ */
.input-error-highlight {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 3px rgba(169, 77, 77, 0.14) !important;
}

    .input-error-highlight:focus {
        border-color: var(--danger) !important;
        box-shadow: 0 0 0 3px rgba(169, 77, 77, 0.18) !important;
    }
/* =========================================================
   البحث عن المشترك
   ========================================================= */

.subscriber-picker {
    position: relative;
}

.subscriber-search-results {
    position: absolute;
    top: calc(100% - 17px);
    inset-inline-start: 0;
    inset-inline-end: 0;
    z-index: 200;
    display: none;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

    .subscriber-search-results.visible {
        display: block;
    }

.subscriber-search-option {
    display: block;
    width: 100%;
    padding: 11px 12px;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-primary);
    text-align: start;
    cursor: pointer;
}

    .subscriber-search-option:last-child {
        border-bottom: 0;
    }

    .subscriber-search-option:hover {
        background: var(--surface-secondary);
    }

.subscriber-search-empty {
    padding: 14px;
    color: var(--text-secondary);
    text-align: center;
}


/* الحقل الذي يحتاج تصحيحًا */
.input-error-highlight {
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 3px rgba(169, 77, 77, 0.14) !important;
}

    .input-error-highlight:focus {
        border-color: var(--danger) !important;
        box-shadow: 0 0 0 3px rgba(169, 77, 77, 0.18) !important;
    }
/* =========================================================
   حالة وإغلاق الجرد
   ========================================================= */

.daily-status-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.daily-status.open {
    border-color: rgba(55, 145, 85, 0.35);
}

.daily-status.closed {
    border-color: rgba(169, 77, 77, 0.45);
}

.daily-close-button {
    min-height: 40px;
    padding: 8px 18px;
    border: 0;
    border-radius: 8px;
    background: var(--danger);
    color: #ffffff;
    font-weight: 600;
    cursor: pointer;
}

    .daily-close-button:hover {
        opacity: 0.9;
    }


/* رسالة الجرد المغلق */

.daily-closed-notice {
    margin: 18px 20px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-secondary);
    color: var(--text-secondary);
    text-align: center;
}

.daily-locked-text {
    color: var(--text-secondary);
    font-weight: 600;
}


/* =========================================================
   عداد إغلاق الجرد
   ========================================================= */

.close-countdown-modal {
    text-align: center;
}

.close-countdown-number {
    margin: 24px 0 18px;
    color: var(--text-primary);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
}

.close-progress-track {
    width: 100%;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-secondary);
}

.close-progress-bar {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--primary);
    transition: width 0.1s linear;
}

.close-countdown-caption {
    margin-top: 10px;
    color: var(--text-secondary);
    font-size: 14px;
}

.close-countdown-actions {
    justify-content: center;
}

.close-cancel-button {
    min-width: 190px;
}
/* =========================================================
   الشكل المبسط لرأس صفحة الجرد
   ========================================================= */

.daily-compact-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
    padding: 14px 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.daily-compact-title {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

    .daily-compact-title h1 {
        margin: 0;
        color: var(--text-primary);
        font-size: 1.45rem;
        font-weight: 700;
    }

.daily-date {
    color: var(--text-secondary);
    font-size: 14px;
}

.daily-compact-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}


/* حالة الجرد */

.daily-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-secondary);
    font-size: 14px;
    font-weight: 600;
}

.daily-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.daily-status.open .daily-status-dot {
    background: #5c9b70;
}

.daily-status.closed .daily-status-dot {
    background: var(--danger);
}


/* شريط المجاميع */

.daily-summary-strip {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    margin-bottom: 18px;
    padding: 12px 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.daily-summary-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 0;
}

    .daily-summary-item > span {
        color: var(--text-secondary);
        font-size: 14px;
    }

    .daily-summary-item strong {
        color: var(--text-primary);
        font-size: 1.1rem;
        font-weight: 700;
        white-space: nowrap;
    }

        .daily-summary-item strong small {
            font-size: 12px;
            font-weight: 500;
            color: var(--text-secondary);
        }

.daily-summary-net strong {
    color: var(--primary);
}

.daily-summary-divider {
    width: 1px;
    height: 30px;
    background: var(--border);
}


/* تقليل الفراغات داخل صفحة الجرد */

.daily-page {
    padding-top: 24px;
}

.daily-section {
    margin-bottom: 18px;
}

.daily-section-header {
    padding: 13px 18px;
}

.daily-form {
    padding: 16px 18px;
}

.daily-table th,
.daily-table td {
    padding: 10px 12px;
}


/* الشاشات الصغيرة */

@media (max-width: 800px) {

    .daily-compact-header {
        align-items: stretch;
        flex-direction: column;
    }

    .daily-compact-actions {
        justify-content: space-between;
    }

    .daily-summary-strip {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .daily-summary-item {
        justify-content: space-between;
    }

    .daily-summary-divider {
        width: 100%;
        height: 1px;
    }
}

/* =========================================================
   تثبيت رأس الجرد + المجاميع
   ========================================================= */

.daily-sticky-summary {
    position: sticky;
    top: 0;
    z-index: 120;
    padding-top: 8px;
    padding-bottom: 6px;
    background: var(--page-bg);
}


/* =========================================================
   تقسيم الوارد والصادر إلى عمودين
   ========================================================= */

.daily-workspace-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}


    /* كل قسم يأخذ ارتفاعه الطبيعي */
    .daily-workspace-grid .daily-section {
        min-width: 0;
        margin-bottom: 0;
    }


    /* =========================================================
   نموذج الوارد داخل المساحة الجديدة
   ========================================================= */

    .daily-workspace-grid .income-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

        .daily-workspace-grid .income-form-grid .subscriber-picker {
            grid-column: 1 / -1;
        }

        .daily-workspace-grid .income-form-grid .daily-add-button {
            align-self: end;
        }


    /* =========================================================
   نموذج الصادر
   ========================================================= */

    .daily-workspace-grid .expense-form-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }


    /* =========================================================
   الجداول
   ========================================================= */

    .daily-workspace-grid .daily-table-wrapper {
        max-height: 430px;
        overflow: auto;
    }

    .daily-workspace-grid .daily-table {
        font-size: 13px;
    }

        .daily-workspace-grid .daily-table th,
        .daily-workspace-grid .daily-table td {
            padding: 9px 8px;
        }


        /* إبقاء رأس الجدول ظاهرًا أثناء نزول السجلات */
        .daily-workspace-grid .daily-table thead th {
            position: sticky;
            top: 0;
            z-index: 5;
            background: var(--surface-secondary);
        }


    /* أزرار التعديل والحذف أصغر */
    .daily-workspace-grid .daily-action-button {
        padding: 5px 8px;
        font-size: 12px;
    }


/* =========================================================
   الشاشات المتوسطة والصغيرة
   ========================================================= */

@media (max-width: 1150px) {

    .daily-workspace-grid {
        grid-template-columns: 1fr;
    }

        .daily-workspace-grid .income-form-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .daily-workspace-grid .expense-form-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
}


@media (max-width: 700px) {

    .daily-workspace-grid .income-form-grid,
    .daily-workspace-grid .expense-form-grid {
        grid-template-columns: 1fr;
    }

    .daily-sticky-summary {
        position: static;
    }
}

/* =========================================================
   رأس أقسام الوارد والصادر
   ========================================================= */

.daily-section-header-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.daily-section-add-button {
    min-height: 36px;
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

    .daily-section-add-button:hover {
        background: var(--primary-hover);
    }

.expense-add-button {
    background: var(--surface-secondary);
    color: var(--text-primary);
}

    .expense-add-button:hover {
        background: var(--input-bg);
    }


/* =========================================================
   نافذة إضافة الوارد والصادر
   ========================================================= */

.daily-entry-modal {
    width: min(680px, calc(100vw - 32px));
    max-width: 680px;
}

.daily-entry-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

    .daily-entry-modal-header h3 {
        margin: 0;
    }

.daily-modal-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: var(--surface-secondary);
    color: var(--text-primary);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

    .daily-modal-close:hover {
        background: var(--input-bg);
    }

.daily-entry-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.daily-entry-full {
    grid-column: 1 / -1;
}


/* البحث يبقى فوق النافذة */
.daily-entry-modal .subscriber-search-results {
    z-index: 500;
}


/* الهاتف */
@media (max-width: 650px) {

    .daily-entry-grid {
        grid-template-columns: 1fr;
    }

    .daily-entry-full {
        grid-column: auto;
    }

    .daily-section-header-actions {
        align-items: stretch;
    }
}
/* =========================================================
   اللمسات النهائية المعتمدة لصفحة الجرد اليومي
   ========================================================= */

/* نسبة الوارد والصادر: الوارد أوسع لأنه يحتوي أعمدة أكثر */
.daily-workspace-grid {
    grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr);
    gap: 18px;
}

/* توحيد زرّي إضافة الوارد والصادر */
.daily-section-add-button,
.expense-add-button {
    min-height: 36px;
    padding: 7px 14px;
    border: 1px solid var(--primary);
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

    .daily-section-add-button:hover,
    .expense-add-button:hover {
        background: var(--primary-hover);
        border-color: var(--primary-hover);
        color: #fff;
    }

/* إبراز المطلوب تسليمه بهدوء */
.daily-summary-net {
    padding: 8px 14px;
    border-radius: 9px;
    background: var(--surface-secondary);
}

    .daily-summary-net strong {
        font-size: 1.18rem;
        font-weight: 750;
        color: var(--primary);
    }

/* تثبيت رأس الجرد وشريط المجاميع معًا */
.daily-sticky-summary {
    position: sticky;
    top: 0;
    z-index: 120;
    padding-top: 8px;
    padding-bottom: 6px;
    background: var(--page-bg);
}

/* الجداول تتحرك داخليًا عند كثرة السجلات */
.daily-workspace-grid .daily-table-wrapper {
    max-height: 430px;
    overflow: auto;
}

.daily-workspace-grid .daily-table thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--surface-secondary);
}

/* تثبيت مجموع كل قسم خارج منطقة تمرير السجلات */
.daily-workspace-grid .daily-total-row {
    position: relative;
    z-index: 6;
    min-height: 52px;
    align-items: center;
}

/* ترتيب عمود التسلسل */
.daily-workspace-grid .daily-table th:first-child,
.daily-workspace-grid .daily-table td:first-child {
    width: 46px;
    min-width: 46px;
    max-width: 46px;
    text-align: center;
    white-space: nowrap;
}

/* زر إغلاق اليوم أخف بصريًا */
.daily-close-button {
    min-height: 40px;
    padding: 8px 18px;
    border: 1px solid rgba(169, 77, 77, .48);
    border-radius: 8px;
    background: rgba(169, 77, 77, .08);
    color: var(--danger);
    font-weight: 650;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

    .daily-close-button:hover {
        opacity: 1;
        background: rgba(169, 77, 77, .14);
        border-color: var(--danger);
    }

html[data-theme="dark"] .daily-close-button {
    background: rgba(209, 122, 122, .10);
    border-color: rgba(209, 122, 122, .42);
}

    html[data-theme="dark"] .daily-close-button:hover {
        background: rgba(209, 122, 122, .16);
        border-color: var(--danger);
    }

@media (max-width: 1150px) {
    .daily-workspace-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .daily-sticky-summary {
        position: static;
    }

    .daily-summary-net {
        padding: 8px 10px;
    }
}


/* =========================================================
   اللمسات النهائية لصفحة الجرد
   ========================================================= */

.daily-workspace-grid .daily-table {
    font-size: 14px;
}

    .daily-workspace-grid .daily-table th {
        font-size: 14px;
        font-weight: 700;
    }

    .daily-workspace-grid .daily-table td {
        font-size: 14px;
    }

.daily-total-row {
    font-size: 15px;
}

    .daily-total-row strong {
        font-size: 16px;
    }

.daily-workspace-grid .daily-table th:last-child,
.daily-workspace-grid .daily-table td:last-child {
    min-width: 112px;
    padding-inline: 16px;
}

.daily-icon-button {
    width: 36px;
    height: 36px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
}

    .daily-icon-button svg {
        width: 17px;
        height: 17px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.edit-income-btn.daily-icon-button,
.edit-expense-btn.daily-icon-button {
    color: var(--primary);
    border-color: rgba(65, 101, 138, 0.42);
}

    .edit-income-btn.daily-icon-button:hover,
    .edit-expense-btn.daily-icon-button:hover {
        background: rgba(65, 101, 138, 0.08);
        border-color: var(--primary);
    }

.daily-delete-button.daily-icon-button {
    color: var(--danger);
    border-color: rgba(169, 77, 77, 0.42);
}

    .daily-delete-button.daily-icon-button:hover {
        background: rgba(169, 77, 77, 0.08);
        border-color: var(--danger);
    }

/* المطلوب تسليمه - هاي لايتر أصفر */
.daily-summary-net {
    padding: 10px 18px;
    border: 1px solid rgba(213, 160, 24, 0.40);
    border-radius: 10px;
    background: rgba(255, 224, 116, 0.28);
}

    .daily-summary-net > span {
        color: var(--text-primary);
        font-weight: 600;
    }

    .daily-summary-net strong {
        color: #8f6500;
        font-size: 1.25rem;
    }

        .daily-summary-net strong small {
            color: #8f6500;
        }

html[data-theme="dark"] .daily-summary-net {
    border-color: rgba(230, 183, 66, 0.34);
    background: rgba(221, 177, 61, 0.16);
}

    html[data-theme="dark"] .daily-summary-net strong,
    html[data-theme="dark"] .daily-summary-net strong small {
        color: #e5be5b;
    }

.daily-workspace-grid .daily-table th:first-child,
.daily-workspace-grid .daily-table td:first-child {
    width: 44px;
    min-width: 44px;
    text-align: center;
}


/* =========================================================
   Scrollbar جداول الجرد
   ========================================================= */

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

.daily-workspace-grid .daily-table-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.daily-workspace-grid .daily-table-wrapper::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 999px;
}

    .daily-workspace-grid .daily-table-wrapper::-webkit-scrollbar-thumb:hover {
        background: var(--text-secondary);
    }

.daily-workspace-grid .daily-table-wrapper {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}


/* =========================================================
   التثبيت النهائي للشريط العلوي وشريط المجاميع
   ========================================================= */

.app-header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

.daily-compact-header {
    position: static;
}

.daily-sticky-summary {
    position: sticky;
    top: 64px;
    z-index: 900;
    padding-top: 6px;
    padding-bottom: 6px;
    background: var(--page-bg);
}

.daily-summary-strip {
    min-height: 52px;
    margin-bottom: 12px;
    padding: 7px 14px;
    border-radius: 10px;
}

.daily-summary-item {
    gap: 9px;
}

    .daily-summary-item > span {
        font-size: 13px;
    }

    .daily-summary-item strong {
        font-size: 1.02rem;
    }

        .daily-summary-item strong small {
            font-size: 0.72rem;
        }

.daily-summary-net {
    padding: 7px 14px;
    border-radius: 8px;
}

    .daily-summary-net strong {
        font-size: 1.12rem;
    }

@media (max-width: 700px) {
    .daily-sticky-summary {
        position: sticky;
        top: 64px;
    }

    .daily-summary-strip {
        padding: 7px 10px;
    }
}


/* =========================================================
   وضع شاشة الجرد المكتبية
   الصفحة ثابتة والتمرير داخل الجداول فقط
   ========================================================= */

body:has(.daily-page) {
    overflow: hidden;
}

.daily-page {
    box-sizing: border-box;
    height: calc(100vh - 64px);
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-top: 18px;
    padding-bottom: 18px;
    overflow: hidden;
}

.daily-compact-header {
    flex: 0 0 auto;
    margin-bottom: 12px;
}

.daily-sticky-summary {
    position: static;
    flex: 0 0 auto;
    padding-top: 0;
    padding-bottom: 0;
}

.daily-summary-strip {
    min-height: 48px;
    margin-bottom: 12px;
    padding: 6px 12px;
}

.daily-workspace-grid {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
}

    .daily-workspace-grid .daily-section {
        min-width: 0;
        min-height: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
        margin-bottom: 0;
    }

    .daily-workspace-grid .daily-section-header {
        flex: 0 0 auto;
    }

    .daily-workspace-grid .daily-table-wrapper {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        width: 100%;
        overflow-x: auto;
        overflow-y: auto;
        scrollbar-gutter: auto;
    }

    .daily-workspace-grid .daily-table thead th {
        position: sticky;
        top: 0;
        z-index: 6;
        background: var(--surface-secondary);
    }

    .daily-workspace-grid .daily-total-row {
        flex: 0 0 auto;
    }

    .daily-workspace-grid .daily-empty {
        height: 110px;
    }

.app-header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

@media (max-width: 1150px) {
    body:has(.daily-page) {
        overflow: auto;
    }

    .daily-page {
        height: auto;
        min-height: calc(100vh - 64px);
        overflow: visible;
    }

    .daily-workspace-grid {
        display: grid;
        grid-template-columns: 1fr;
    }

        .daily-workspace-grid .daily-section {
            height: auto;
        }

        .daily-workspace-grid .daily-table-wrapper {
            max-height: 430px;
        }
}


/* =========================================================
   نوافذ الإضافة - مناسبة للشاشات القصيرة
   ========================================================= */

.daily-modal-overlay {
    overflow-y: auto;
    align-items: flex-start;
    padding-top: 20px;
    padding-bottom: 20px;
}

.daily-entry-modal {
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    margin: auto;
}

/* تنبيهات الجرد تبقى في منتصف الشاشة، بخلاف نوافذ الإدخال الطويلة. */
#notificationOverlay,
#deleteOverlay,
#closeInventoryConfirmationOverlay,
#closeInventoryCountdownOverlay {
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#notificationModal,
#deleteOverlay .daily-modal,
#closeInventoryConfirmationOverlay .daily-modal,
#closeInventoryCountdownOverlay .daily-modal {
    margin: auto;
    text-align: center;
}

#notificationModal .modal-icon,
#deleteOverlay .modal-icon,
#closeInventoryConfirmationOverlay .modal-icon {
    margin-inline: auto;
}

#notificationModal .daily-modal-actions,
#deleteOverlay .daily-modal-actions,
#closeInventoryConfirmationOverlay .daily-modal-actions,
#closeInventoryCountdownOverlay .daily-modal-actions {
    justify-content: center;
}

.daily-entry-modal-header {
    position: sticky;
    top: -1px;
    z-index: 10;
    padding-bottom: 12px;
    background: var(--surface);
}

.daily-entry-modal .daily-modal-actions {
    position: sticky;
    bottom: -1px;
    z-index: 10;
    padding-top: 12px;
    padding-bottom: 2px;
    background: var(--surface);
}


/* =========================================================
   صفحة إعدادات النظام
   ========================================================= */

.settings-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 36px 24px;
}

.settings-header {
    margin-bottom: 24px;
}

    .settings-header h1 {
        margin: 0 0 8px;
        font-size: 1.8rem;
        color: var(--text-primary);
    }

    .settings-header p {
        margin: 0;
        color: var(--text-secondary);
    }

.settings-card {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    overflow: hidden;
}

.settings-card-header {
    padding: 20px 22px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-secondary);
}

    .settings-card-header h2 {
        margin: 0 0 6px;
        font-size: 1.2rem;
        color: var(--text-primary);
    }

    .settings-card-header p {
        margin: 0;
        color: var(--text-secondary);
    }

.settings-form {
    padding: 24px 22px;
}

.settings-field {
    max-width: 460px;
}

.settings-number-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings-number-input {
    width: 140px;
}

.settings-unit {
    color: var(--text-secondary);
}

.settings-help {
    margin: 8px 0 0;
    color: var(--text-secondary);
    font-size: 13px;
}

.settings-actions {
    margin-top: 24px;
}

.settings-save-button {
    min-height: 42px;
    padding: 8px 18px;
    border: 0;
    border-radius: 8px;
    background: var(--primary);
    color: #ffffff;
    font-weight: 600;
    cursor: pointer;
}

    .settings-save-button:hover {
        background: var(--primary-hover);
    }

.settings-success-message {
    margin-bottom: 18px;
    padding: 12px 16px;
    border: 1px solid rgba(67, 130, 91, 0.25);
    border-radius: 9px;
    background: rgba(67, 130, 91, 0.08);
    color: var(--text-primary);
}

@media (max-width: 600px) {
    .settings-page {
        padding: 24px 14px;
    }

    .settings-number-row {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-number-input {
        width: 100%;
    }
}


/* =========================================================
   صفحة استلام الجرد
   ========================================================= */

.manager-receipts-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 30px 24px;
}

.manager-receipts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

    .manager-receipts-header h1 {
        margin: 0 0 6px;
        color: var(--text-primary);
        font-size: 1.8rem;
        font-weight: 700;
    }

    .manager-receipts-header p {
        margin: 0;
        color: var(--text-secondary);
    }

.manager-receipts-count {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-secondary);
}

    .manager-receipts-count strong {
        color: var(--text-primary);
        font-size: 1.05rem;
    }

.manager-receipts-table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
}

.manager-receipts-table {
    width: 100%;
    border-collapse: collapse;
}

    .manager-receipts-table th,
    .manager-receipts-table td {
        padding: 14px 16px;
        border-bottom: 1px solid var(--border);
        text-align: start;
        vertical-align: middle;
        color: var(--text-primary);
        white-space: nowrap;
    }

    .manager-receipts-table th {
        background: var(--surface-secondary);
        font-size: 14px;
        font-weight: 700;
    }

    .manager-receipts-table td {
        background: var(--surface);
        font-size: 14px;
    }

    .manager-receipts-table tbody tr:last-child td {
        border-bottom: 0;
    }

.receipt-employee {
    font-weight: 650;
}

.receipt-income {
    color: #4d8c62 !important;
    font-weight: 650;
}

.receipt-expense {
    color: var(--danger) !important;
    font-weight: 650;
}

.receipt-expected {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border: 1px solid rgba(213, 160, 24, 0.38);
    border-radius: 8px;
    background: rgba(255, 224, 116, 0.28);
    color: #8f6500;
    font-weight: 700;
}

html[data-theme="dark"] .receipt-expected {
    border-color: rgba(230, 183, 66, 0.34);
    background: rgba(221, 177, 61, 0.16);
    color: #e5be5b;
}

.receipt-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(65, 101, 138, 0.09);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
}

.receipt-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
}

.receipt-open-button {
    min-height: 36px;
    padding: 7px 14px;
    border: 0;
    border-radius: 8px;
    background: var(--primary);
    color: #ffffff;
    font-weight: 600;
    cursor: pointer;
}

    .receipt-open-button:hover {
        background: var(--primary-hover);
    }

.manager-receipts-empty {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 30px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    text-align: center;
}

.manager-receipts-empty-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(67, 130, 91, 0.13);
    color: #4d8c62;
    font-size: 24px;
    font-weight: 700;
}

.manager-receipts-empty strong {
    color: var(--text-primary);
}

.manager-receipts-empty span {
    color: var(--text-secondary);
}


/* نافذة استلام المبلغ */
.receipt-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 6000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(10, 16, 22, 0.30);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

    .receipt-modal-overlay.visible {
        display: flex;
    }

.receipt-modal {
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface);
    color: var(--text-primary);
    box-shadow: var(--shadow);
}

.receipt-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

    .receipt-modal-header h2 {
        margin: 0 0 6px;
        font-size: 1.35rem;
        font-weight: 700;
    }

    .receipt-modal-header p {
        margin: 0;
        color: var(--text-secondary);
        font-size: 14px;
    }

.receipt-modal-close {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border: 0;
    border-radius: 8px;
    background: var(--surface-secondary);
    color: var(--text-primary);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

    .receipt-modal-close:hover {
        background: var(--input-bg);
    }

.receipt-expected-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid rgba(213, 160, 24, 0.38);
    border-radius: 10px;
    background: rgba(255, 224, 116, 0.28);
}

    .receipt-expected-box > span {
        color: var(--text-primary);
        font-weight: 600;
    }

    .receipt-expected-box strong {
        color: #8f6500;
        font-size: 1.35rem;
        font-weight: 750;
        white-space: nowrap;
    }

    .receipt-expected-box small {
        font-size: 12px;
    }

html[data-theme="dark"] .receipt-expected-box {
    border-color: rgba(230, 183, 66, 0.34);
    background: rgba(221, 177, 61, 0.16);
}

    html[data-theme="dark"] .receipt-expected-box strong {
        color: #e5be5b;
    }

.receipt-form-group {
    margin-bottom: 16px;
}

.receipt-note {
    min-height: 90px;
    height: auto;
    resize: vertical;
}

.receipt-difference-box {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-secondary);
    color: var(--text-primary);
}

    .receipt-difference-box strong {
        font-size: 1.15rem;
    }

.receipt-match-label {
    margin-inline-start: auto;
    font-size: 13px;
    font-weight: 700;
}

.receipt-difference-box.match {
    border-color: rgba(67, 130, 91, 0.30);
    background: rgba(67, 130, 91, 0.09);
}

    .receipt-difference-box.match strong,
    .receipt-difference-box.match .receipt-match-label {
        color: #4d8c62;
    }

.receipt-difference-box.shortage {
    border-color: rgba(169, 77, 77, 0.32);
    background: rgba(169, 77, 77, 0.08);
}

    .receipt-difference-box.shortage strong,
    .receipt-difference-box.shortage .receipt-match-label {
        color: var(--danger);
    }

.receipt-difference-box.extra {
    border-color: rgba(213, 160, 24, 0.35);
    background: rgba(255, 224, 116, 0.18);
}

    .receipt-difference-box.extra strong,
    .receipt-difference-box.extra .receipt-match-label {
        color: #8f6500;
    }

html[data-theme="dark"] .receipt-difference-box.extra strong,
html[data-theme="dark"] .receipt-difference-box.extra .receipt-match-label {
    color: #e5be5b;
}

#receiptDifferenceNoteGroup {
    display: none;
}

.receipt-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
}

.receipt-cancel-button,
.receipt-confirm-button {
    min-height: 40px;
    padding: 8px 18px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

.receipt-cancel-button {
    border: 1px solid var(--border);
    background: var(--surface-secondary);
    color: var(--text-primary);
}

    .receipt-cancel-button:hover {
        background: var(--input-bg);
    }

.receipt-confirm-button {
    border: 0;
    background: var(--primary);
    color: #ffffff;
}

    .receipt-confirm-button:hover {
        background: var(--primary-hover);
    }


/* رسالة نجاح / تحذير */
.receipt-alert-overlay {
    position: fixed;
    inset: 0;
    z-index: 7000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(10, 16, 22, 0.30);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

    .receipt-alert-overlay.visible {
        display: flex;
    }

.receipt-alert {
    width: min(430px, calc(100vw - 32px));
    padding: 26px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface);
    color: var(--text-primary);
    box-shadow: var(--shadow);
    text-align: center;
}

.receipt-alert-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    border-radius: 50%;
    font-size: 24px;
    font-weight: 700;
}

    .receipt-alert-icon.success {
        background: rgba(67, 130, 91, 0.14);
        color: #4d8c62;
    }

    .receipt-alert-icon.warning {
        background: rgba(169, 77, 77, 0.13);
        color: var(--danger);
    }

.receipt-alert h3 {
    margin: 0 0 10px;
    color: var(--text-primary);
}

.receipt-alert p {
    margin: 0 0 20px;
    color: var(--text-secondary);
    line-height: 1.7;
}

.receipt-alert button {
    display: block;
    min-height: 40px;
    margin-inline: auto;
    padding: 8px 18px;
    border: 0;
    border-radius: 8px;
    background: var(--primary);
    color: #ffffff;
    font-weight: 600;
    cursor: pointer;
}

@media (max-width: 750px) {
    .manager-receipts-page {
        padding: 22px 14px;
    }

    .manager-receipts-header {
        align-items: stretch;
        flex-direction: column;
    }

    .manager-receipts-count {
        align-self: flex-start;
    }

    .receipt-modal-actions {
        flex-wrap: wrap;
    }
}


/* =========================================================
   قسم فروقات الجرد بانتظار التسوية
   ========================================================= */

.receipt-differences-section {
    margin-top: 28px;
}

.receipt-differences-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

    .receipt-differences-header h2 {
        margin: 0 0 5px;
        color: var(--text-primary);
        font-size: 1.25rem;
        font-weight: 700;
    }

    .receipt-differences-header p {
        margin: 0;
        color: var(--text-secondary);
        font-size: 14px;
    }

.difference-count {
    flex-shrink: 0;
}

.difference-value {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 8px;
    font-weight: 700;
}

    .difference-value.shortage {
        border: 1px solid rgba(169, 77, 77, 0.30);
        background: rgba(169, 77, 77, 0.09);
        color: var(--danger);
    }

    .difference-value.extra {
        border: 1px solid rgba(213, 160, 24, 0.35);
        background: rgba(255, 224, 116, 0.20);
        color: #8f6500;
    }

html[data-theme="dark"] .difference-value.extra {
    background: rgba(221, 177, 61, 0.15);
    color: #e5be5b;
}

.difference-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

    .difference-type.shortage {
        background: rgba(169, 77, 77, 0.10);
        color: var(--danger);
    }

    .difference-type.extra {
        background: rgba(255, 224, 116, 0.20);
        color: #8f6500;
    }

html[data-theme="dark"] .difference-type.extra {
    background: rgba(221, 177, 61, 0.15);
    color: #e5be5b;
}

.difference-note-cell {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap !important;
    color: var(--text-secondary) !important;
}

.resolve-difference-button {
    min-height: 36px;
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-secondary);
    color: var(--text-primary);
    font-weight: 650;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

    .resolve-difference-button:hover {
        border-color: var(--primary);
        background: var(--input-bg);
    }

.resolve-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.resolve-summary-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-secondary);
}

    .resolve-summary-item > span {
        color: var(--text-secondary);
        font-size: 12px;
        font-weight: 600;
    }

    .resolve-summary-item strong {
        color: var(--text-primary);
        font-size: 1rem;
        font-weight: 700;
        white-space: nowrap;
    }

    .resolve-summary-item small {
        font-size: 11px;
    }

.resolve-difference-highlight.shortage {
    border-color: rgba(169, 77, 77, 0.32);
    background: rgba(169, 77, 77, 0.08);
}

    .resolve-difference-highlight.shortage > span,
    .resolve-difference-highlight.shortage strong {
        color: var(--danger);
    }

.resolve-difference-highlight.extra {
    border-color: rgba(213, 160, 24, 0.35);
    background: rgba(255, 224, 116, 0.18);
}

    .resolve-difference-highlight.extra > span,
    .resolve-difference-highlight.extra strong {
        color: #8f6500;
    }

html[data-theme="dark"] .resolve-difference-highlight.extra {
    background: rgba(221, 177, 61, 0.15);
}

    html[data-theme="dark"] .resolve-difference-highlight.extra > span,
    html[data-theme="dark"] .resolve-difference-highlight.extra strong {
        color: #e5be5b;
    }

.resolve-original-note {
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-secondary);
}

    .resolve-original-note > span {
        display: block;
        margin-bottom: 6px;
        color: var(--text-secondary);
        font-size: 12px;
        font-weight: 650;
    }

    .resolve-original-note p {
        margin: 0;
        color: var(--text-primary);
        line-height: 1.6;
        overflow-wrap: anywhere;
    }

@media (max-width: 750px) {
    .receipt-differences-header {
        align-items: stretch;
        flex-direction: column;
    }

    .difference-count {
        align-self: flex-start;
    }

    .resolve-summary-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   شريط اختيار الشهر + عدادات الأيقونات
   النسخة النهائية المصححة
   ========================================================= */

.receipt-month-toolbar {
    width: 100%;
    margin: 18px 0 16px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.receipt-month-form {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.receipt-month-field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .receipt-month-field label {
        color: var(--text-secondary);
        font-size: .82rem;
        font-weight: 650;
    }

    .receipt-month-field .form-control {
        width: 112px !important;
        min-width: 112px;
        height: 42px;
        padding: 7px 10px;
        border-color: var(--border);
        background: var(--input-bg);
        color: var(--text-primary);
    }

#receiptYear {
    width: 104px !important;
    min-width: 104px;
}

/* زر عرض مستقل عن زر فتح نافذة الاستلام */
.receipt-month-submit {
    min-width: 76px;
    min-height: 42px;
    padding: 8px 16px;
    border: 0;
    border-radius: 9px;
    background: var(--primary);
    color: #fff;
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease, transform .15s ease;
}

    .receipt-month-submit:hover {
        background: var(--primary-hover);
    }

    .receipt-month-submit:active {
        transform: translateY(1px);
    }

.receipt-current-month-button {
    min-height: 42px;
    padding: 8px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-secondary);
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 650;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease;
}

    .receipt-current-month-button:hover {
        border-color: var(--primary);
        background: var(--input-bg);
        color: var(--text-primary);
        text-decoration: none;
    }


/* العدادات في الجهة المقابلة */
.receipt-toolbar-counters {
    display: flex;
    align-items: center;
    gap: 10px;
    align-self: flex-end;
    margin-inline-start: auto;
}

.receipt-toolbar-counter {
    min-width: 66px;
    height: 42px;
    padding: 5px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface);
    color: var(--text-primary);
    cursor: help;
    box-shadow: 0 2px 8px rgba(44, 50, 56, .04);
    transition: border-color .15s ease, background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

    .receipt-toolbar-counter:hover {
        transform: translateY(-1px);
        border-color: var(--primary);
        box-shadow: 0 5px 14px rgba(44, 50, 56, .08);
    }

html[data-theme="dark"] .receipt-toolbar-counter {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

    html[data-theme="dark"] .receipt-toolbar-counter:hover {
        box-shadow: 0 5px 14px rgba(0, 0, 0, .16);
    }

.receipt-toolbar-counter strong {
    min-width: 16px;
    color: var(--text-primary);
    text-align: center;
    font-size: 1rem;
    font-weight: 750;
    line-height: 1;
}

.receipt-counter-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

    .receipt-counter-icon svg {
        width: 17px;
        height: 17px;
        display: block;
    }

.receipt-toolbar-counter.waiting .receipt-counter-icon {
    background: rgba(65, 101, 138, .11);
    color: var(--primary);
}

.receipt-toolbar-counter.difference .receipt-counter-icon {
    background: rgba(213, 160, 24, .14);
    color: #9a6d00;
}

html[data-theme="dark"] .receipt-toolbar-counter.difference .receipt-counter-icon {
    background: rgba(230, 183, 66, .14);
    color: #e5be5b;
}

/* بطاقات العدادات القديمة ملغاة */
.receipt-summary-cards {
    display: none !important;
}

@media (max-width: 760px) {
    .receipt-month-toolbar {
        align-items: stretch;
        gap: 12px;
    }

    .receipt-month-form {
        flex: 1 1 100%;
        width: 100%;
    }

    .receipt-month-field {
        flex: 1 1 120px;
    }

        .receipt-month-field .form-control,
        #receiptYear {
            width: 100% !important;
            min-width: 0;
        }

    .receipt-month-submit {
        flex: 0 0 auto;
    }

    .receipt-current-month-button {
        flex: 1 1 auto;
    }

    .receipt-toolbar-counters {
        margin-inline-start: auto;
    }
}

@media (max-width: 520px) {
    .receipt-month-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: end;
    }

    .receipt-month-submit {
        grid-column: 1 / -1;
        width: 100%;
    }

    .receipt-current-month-button {
        width: 100%;
    }
}

/* =========================================================
   صفحة المشتركين - شريط مضغوط + تبويبات + حذف
   ========================================================= */

/* تقليل الفراغات العامة في أعلى صفحة المشتركين */
.subscribers-page {
    padding-top: 24px;
    padding-bottom: 28px;
}

.page-header-row {
    margin-bottom: 16px;
}

/* البحث والتبويبات في صف واحد وقريبان من الجدول */
.subscriber-controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 12px;
}

.subscriber-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(520px, 100%);
    max-width: 520px;
    margin: 0;
}

    .subscriber-search-form .form-control {
        min-width: 0;
    }

.subscriber-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 4px;
    width: fit-content;
    max-width: 100%;
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface-secondary);
}

.subscriber-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 116px;
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 700;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

    .subscriber-tab:hover {
        color: var(--text-primary);
        background: var(--surface);
    }

    .subscriber-tab.is-active {
        color: var(--primary);
        background: var(--surface);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    }

.subscriber-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--surface-secondary);
    color: var(--text-primary);
    font-size: 0.78rem;
    line-height: 1;
}

.subscriber-tab.is-active .subscriber-tab-count {
    color: var(--primary);
}

/* الجدول يبدأ مباشرة بعد شريط التحكم */
.subscriber-table-wrapper {
    margin-top: 0;
}

/* تقليل ارتفاع حالة عدم وجود بيانات */
.subscriber-table .empty-table-message {
    height: 86px;
    padding-block: 20px;
    text-align: center;
    color: var(--text-secondary);
}

.btn-table-delete {
    color: #b42318;
}

    .btn-table-delete:hover {
        background: rgba(180, 35, 24, 0.08);
    }

.btn-danger-soft {
    border: 1px solid rgba(180, 35, 24, 0.28);
    border-radius: 9px;
    padding: 9px 16px;
    background: rgba(180, 35, 24, 0.09);
    color: #b42318;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: 0.18s ease;
}

    .btn-danger-soft:hover {
        background: rgba(180, 35, 24, 0.15);
    }

.subscriber-error-message {
    margin: 10px 0 12px;
    padding: 10px 14px;
    border: 1px solid rgba(180, 35, 24, 0.24);
    border-radius: 10px;
    background: rgba(180, 35, 24, 0.08);
    color: #b42318;
    font-weight: 600;
}

.subscriber-delete-modal {
    max-width: 520px;
}

.subscriber-delete-message {
    margin: 0 0 10px;
    color: var(--text-primary);
    line-height: 1.8;
}

.subscriber-delete-note {
    margin: 0 0 18px;
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: 0.92rem;
}

@media (max-width: 760px) {
    .subscribers-page {
        padding-top: 20px;
    }

    .subscriber-controls-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .subscriber-tabs {
        width: 100%;
    }

    .subscriber-tab {
        flex: 1;
        min-width: 0;
    }

    .subscriber-search-form {
        width: 100%;
        max-width: none;
    }
}

/* ============================================================
   Special Days - متوافق مع Light / Dark Theme الحالي
   ============================================================ */

.special-days-page {
    box-sizing: border-box;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: var(--text-primary);
}

/* ============================================================
   رأس الصفحة
   ============================================================ */

.special-days-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

    .special-days-header h1 {
        margin: 0;
        color: var(--text-primary);
        font-size: 1.45rem;
        font-weight: 700;
    }

    .special-days-header p {
        margin: 4px 0 0;
        color: var(--text-secondary);
        font-size: .9rem;
    }

/* ============================================================
   التبويبات + اختيار الشهر
   ============================================================ */

.special-days-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.special-days-tabs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}

.special-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 9px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 700;
    transition: background-color .18s ease, color .18s ease;
}

    .special-tab:hover {
        background: var(--surface-secondary);
        color: var(--text-primary);
        text-decoration: none;
    }

    .special-tab.active {
        background: var(--primary);
        color: #fff;
    }

        .special-tab.active:hover {
            background: var(--primary-hover);
            color: #fff;
        }

.special-month-filter {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .special-month-filter .form-control {
        width: auto;
        min-width: 92px;
        height: 42px;
    }

.special-view-button,
.special-primary-button,
.special-secondary-button,
.special-danger-button,
.special-approve-button {
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 9px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, opacity .18s ease;
}

.special-view-button,
.special-primary-button,
.special-approve-button {
    border: 1px solid var(--primary);
    background: var(--primary);
    color: #fff;
}

    .special-view-button:hover,
    .special-primary-button:hover,
    .special-approve-button:hover {
        border-color: var(--primary-hover);
        background: var(--primary-hover);
    }

.special-secondary-button {
    border: 1px solid var(--border);
    background: var(--surface-secondary);
    color: var(--text-primary);
}

    .special-secondary-button:hover {
        background: var(--input-bg);
    }

.special-danger-button {
    border: 1px solid var(--danger);
    background: var(--danger);
    color: #fff;
}

    .special-danger-button:hover {
        opacity: .9;
    }

.special-expense-button {
    white-space: nowrap;
}

.special-current-context {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: .9rem;
}

    .special-current-context strong {
        color: var(--text-primary);
    }

/* ============================================================
   شريط المجاميع
   ============================================================ */

.special-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.special-summary-card {
    min-width: 0;
    padding: 13px 15px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

    .special-summary-card span {
        color: var(--text-secondary);
        font-size: .88rem;
    }

    .special-summary-card strong {
        color: var(--text-primary);
        font-size: 1.05rem;
        white-space: nowrap;
    }

    .special-summary-card small {
        color: var(--text-secondary);
        font-size: .72rem;
        font-weight: 600;
    }

.special-summary-net {
    border-color: rgba(213, 160, 24, .40);
    background: rgba(255, 224, 116, .22);
}

    .special-summary-net strong {
        color: #8f6500;
    }

html[data-theme="dark"] .special-summary-net {
    border-color: rgba(230, 183, 66, .34);
    background: rgba(221, 177, 61, .14);
}

    html[data-theme="dark"] .special-summary-net strong {
        color: #e5be5b;
    }

/* ============================================================
   الوارد والصادر
   ============================================================ */

.special-workspace-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.special-section {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
    overflow: hidden;
}

.special-section-header {
    min-height: 64px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-secondary);
}

    .special-section-header h2 {
        margin: 0;
        color: var(--text-primary);
        font-size: 1rem;
        font-weight: 700;
    }

    .special-section-header small {
        display: block;
        margin-top: 3px;
        color: var(--text-secondary);
        font-size: .78rem;
    }

.special-separator {
    margin-inline: 5px;
}

.special-table-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

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

    .special-table-wrapper::-webkit-scrollbar-track {
        background: transparent;
    }

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

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

.special-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 650px;
}

    .special-table th,
    .special-table td {
        padding: 10px 10px;
        border-bottom: 1px solid var(--border);
        color: var(--text-primary);
        text-align: start;
        vertical-align: middle;
        white-space: nowrap;
    }

    .special-table th {
        background: var(--surface-secondary);
        color: var(--text-primary);
        font-size: .82rem;
        font-weight: 700;
    }

    .special-table td {
        background: var(--surface);
        font-size: .86rem;
    }

    .special-table tbody tr:last-child td {
        border-bottom: 0;
    }

.special-empty {
    height: 110px;
    padding: 26px 12px !important;
    text-align: center !important;
    color: var(--text-secondary) !important;
}

.special-total-row {
    min-height: 48px;
    padding: 10px 14px;
    border-top: 1px solid var(--border);
    background: var(--surface-secondary);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    color: var(--text-secondary);
}

    .special-total-row strong {
        color: var(--text-primary);
        font-size: 1rem;
    }

.special-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
}

    .special-status.active,
    .special-status.available {
        background: rgba(67, 130, 91, .13);
        color: #4d8c62;
    }

html[data-theme="dark"] .special-status.active,
html[data-theme="dark"] .special-status.available {
    color: #83c39a;
}

.special-status.cancelled {
    background: rgba(169, 77, 77, .10);
    color: var(--danger);
}

.special-status.partial {
    background: rgba(214, 137, 36, .14);
    color: #a66616;
}

html[data-theme="dark"] .special-status.partial {
    color: #e4b15f;
}

.special-source-status-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.special-partial-transfer-button {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-secondary);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.special-partial-transfer-button:hover {
    border-color: #d68924;
    background: rgba(214, 137, 36, .10);
    color: #b6701b;
}

.special-partial-transfer-button svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.special-row-cancelled {
    opacity: .62;
}

.special-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.special-icon-button {
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

    .special-icon-button:hover {
        border-color: var(--primary);
        background: var(--input-bg);
    }

    .special-icon-button svg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.edit-expense-btn.special-icon-button {
    color: var(--primary);
}

.special-delete-button,
.cancel-transfer-btn {
    color: var(--danger);
}

    .special-delete-button:hover,
    .cancel-transfer-btn:hover {
        border-color: var(--danger);
        background: rgba(169, 77, 77, .08);
    }

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

/* ============================================================
   النوافذ
   ============================================================ */

.special-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    background: rgba(10, 16, 22, .30);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

    .special-modal-overlay.visible {
        display: flex;
    }

.special-modal {
    width: min(520px, 100%);
    max-height: calc(100vh - 40px);
    margin: auto;
    padding: 20px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface);
    color: var(--text-primary);
    box-shadow: var(--shadow);
}

.special-source-modal {
    width: min(1180px, 100%);
}

.special-entry-modal {
    width: min(620px, 100%);
}

.special-partial-modal {
    width: min(520px, 100%);
}

.special-partial-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 4px 0 16px;
}

.special-partial-summary > div {
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-secondary);
}

.special-partial-summary span,
.special-partial-summary strong {
    display: block;
}

.special-partial-summary span {
    color: var(--text-secondary);
    font-size: .76rem;
}

.special-partial-summary strong {
    margin-top: 5px;
    color: var(--text-primary);
    font-size: .95rem;
}

.special-partial-summary strong small {
    display: inline;
    color: var(--text-secondary);
    font-size: .72rem;
}

.special-partial-summary .available {
    border-color: rgba(67, 130, 91, .35);
    background: rgba(67, 130, 91, .08);
}

.special-partial-summary .available strong {
    color: #4d8c62;
}

html[data-theme="dark"] .special-partial-summary .available strong {
    color: #83c39a;
}

.special-partial-input label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-primary);
    font-weight: 700;
}

.special-partial-error {
    display: block;
    min-height: 18px;
    margin-top: 5px;
    color: var(--danger);
    line-height: 1.5;
}

.special-confirm-modal {
    width: min(470px, 100%);
    text-align: center;
}

.special-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

    .special-modal-header h3,
    .special-confirm-modal h3 {
        margin: 0;
        color: var(--text-primary);
    }

    .special-modal-header p,
    .special-confirm-modal p {
        margin: 4px 0 0;
        color: var(--text-secondary);
        line-height: 1.7;
    }

.special-modal-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    background: var(--surface-secondary);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

    .special-modal-close:hover {
        background: var(--input-bg);
    }

.special-modal-actions {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.special-confirm-modal .special-modal-actions {
    justify-content: center;
}

.special-warning-icon,
.special-notification-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(169, 77, 77, .12);
    color: var(--danger);
    font-size: 1.25rem;
    font-weight: 800;
}

    .special-notification-icon.success {
        background: rgba(67, 130, 91, .14);
        color: #4d8c62;
    }

html[data-theme="dark"] .special-notification-icon.success {
    color: #83c39a;
}

.special-entry-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.special-entry-full {
    grid-column: 1 / -1;
}

/* ============================================================
   نافذة جلب الوارد + قائمة التجهيز
   ============================================================ */

.special-source-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

    .special-source-tools .form-control {
        flex: 1;
    }

.special-source-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr);
    gap: 12px;
    min-height: 410px;
}

.special-source-list,
.special-staging-panel {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    overflow: hidden;
}

.special-source-table-wrapper {
    max-height: 470px;
}

.special-check-column {
    width: 42px;
    min-width: 42px;
    text-align: center !important;
}

.source-row-disabled {
    opacity: .52;
}

.special-staging-panel {
    padding: 12px;
    display: flex;
    flex-direction: column;
}

.special-staging-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

    .special-staging-header h4 {
        margin: 0;
        color: var(--text-primary);
    }

    .special-staging-header small {
        display: block;
        margin-top: 3px;
        color: var(--text-secondary);
        font-size: .76rem;
    }

.special-text-button {
    padding: 3px 0;
    border: 0;
    background: transparent;
    color: var(--danger);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.special-staging-list {
    flex: 1;
    min-height: 220px;
    max-height: 330px;
    overflow-y: auto;
}

.special-staging-empty {
    min-height: 220px;
    padding: 20px;
    display: grid;
    place-items: center;
    color: var(--text-secondary);
    text-align: center;
    font-size: .84rem;
}

.special-staged-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 28px;
    align-items: center;
    gap: 8px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}

.special-staged-info {
    min-width: 0;
}

    .special-staged-info strong,
    .special-staged-info small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .special-staged-info strong {
        color: var(--text-primary);
    }

    .special-staged-info small {
        margin-top: 2px;
        color: var(--text-secondary);
    }

.special-staged-amount {
    color: var(--text-primary);
    font-weight: 700;
}

.special-staged-remove {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface-secondary);
    color: var(--danger);
    cursor: pointer;
}

    .special-staged-remove:hover {
        border-color: var(--danger);
        background: rgba(169, 77, 77, .08);
    }

.special-staging-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
}

    .special-staging-summary > div {
        padding: 9px;
        border: 1px solid var(--border);
        border-radius: 9px;
        background: var(--surface-secondary);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .special-staging-summary span {
        color: var(--text-secondary);
        font-size: .78rem;
    }

    .special-staging-summary strong {
        color: var(--text-primary);
    }

.special-approve-button {
    margin-top: 10px;
}

    .special-approve-button:disabled {
        opacity: .45;
        cursor: not-allowed;
    }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1100px) {
    .special-workspace-grid,
    .special-source-layout {
        grid-template-columns: 1fr;
    }

    .special-source-table-wrapper,
    .special-staging-list {
        max-height: 320px;
    }
}

@media (max-width: 760px) {
    .special-days-page {
        padding: 18px 14px;
    }

    .special-days-toolbar {
        align-items: stretch;
    }

    .special-days-tabs {
        width: 100%;
    }

    .special-tab {
        flex: 1;
        min-width: 0;
        text-align: center;
    }

    .special-month-filter {
        width: 100%;
    }

        .special-month-filter .form-control {
            flex: 1;
            min-width: 0;
        }

    .special-summary-grid {
        grid-template-columns: 1fr;
    }

    .special-source-tools {
        flex-direction: column;
        align-items: stretch;
    }

    .special-entry-grid {
        grid-template-columns: 1fr;
    }

    .special-partial-summary {
        grid-template-columns: 1fr;
    }

    .special-entry-full {
        grid-column: auto;
    }

    .special-section-header {
        align-items: stretch;
        flex-direction: column;
    }

        .special-section-header .special-primary-button {
            width: 100%;
        }

    .special-modal-actions {
        flex-wrap: wrap;
    }
}

/* ============================================================
   Special Days - Compact final adjustments
   ============================================================ */

/* تقليل المسافات العامة في الصفحة */
.special-days-page {
    padding-top: 18px;
    padding-bottom: 18px;
    gap: 10px;
}

.special-days-header {
    margin-bottom: 0;
}

    .special-days-header p {
        margin-top: 2px;
    }

.special-days-toolbar {
    margin-top: 0;
    margin-bottom: 0;
}

.special-current-context {
    min-height: 28px;
    margin: 0;
}

/* جعل شريط المجاميع أكثر اختصارًا */
.special-summary-grid {
    gap: 10px;
}

.special-summary-card {
    min-height: 48px;
    padding: 10px 14px;
}

    .special-summary-card span {
        font-size: .84rem;
    }

    .special-summary-card strong {
        font-size: 1rem;
    }

/* تقريب الجدولين من شريط المجاميع */
.special-workspace-grid {
    margin-top: 0;
    gap: 14px;
    align-items: stretch;
}

.special-section {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.special-section-header {
    min-height: 58px;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* تقليل مساحة الحالة الفارغة داخل الجداول */
.special-empty {
    height: 78px;
    padding: 18px 12px !important;
}

/* لا يوجد مجموع سفلي للوارد أو الصادر */
.special-total-row {
    display: none !important;
}

/* عند عدم وجود بيانات لا نمد الجدول دون حاجة */
.special-table-wrapper {
    max-height: 360px;
}

.special-section .special-table-wrapper {
    flex: 0 1 auto;
}

/* المحافظة على عرض مريح بدون فراغ سفلي كبير */
@media (min-width: 1101px) {
    .special-days-page {
        min-height: auto;
    }

    .special-workspace-grid {
        align-items: start;
    }

    .special-section {
        height: auto;
    }
}

/* ============================================================
   Special Days - Equal table height + no unnecessary horizontal scroll
   ============================================================ */

/* القسمان بنفس الارتفاع في سطح المكتب */
.special-workspace-grid {
    align-items: stretch;
}

    .special-workspace-grid .special-section {
        height: 100%;
    }

    /* منطقة الجدول بنفس الارتفاع في القسمين */
    .special-workspace-grid .special-table-wrapper {
        height: 112px;
        max-height: 112px;
        overflow-y: auto;
    }

    /* جدول الصادر لا يحتاج عرضًا أدنى كبيرًا */
    .special-workspace-grid .special-section:first-child .special-table {
        min-width: 0;
    }

    /* جدول الوارد يحتفظ بعرضه لأنه يحتوي أعمدة أكثر */
    .special-workspace-grid .special-section:last-child .special-table {
        min-width: 650px;
    }

    /* إخفاء الشريط الأفقي غير الضروري في جدول الصادر */
    .special-workspace-grid .special-section:first-child .special-table-wrapper {
        overflow-x: hidden;
    }

/* في الشاشات الصغيرة نعيد السماح بالتمرير الطبيعي */
@media (max-width: 1100px) {
    .special-workspace-grid .special-section {
        height: auto;
    }

    .special-workspace-grid .special-table-wrapper {
        height: auto;
        max-height: 320px;
    }

    .special-workspace-grid .special-section:first-child .special-table-wrapper {
        overflow-x: auto;
    }

    .special-workspace-grid .special-section:first-child .special-table {
        min-width: 650px;
    }
}

/* ============================================================
   Special Days - Tables match Management / Receipts
   ============================================================ */

/* نفس إطار جدول صفحة استلام الجرد */
.special-workspace-grid .special-section {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    overflow: hidden;
}

/* رأس القسم يبقى ضمن البطاقة لكن أخف مثل صفحة الاستلام */
.special-workspace-grid .special-section-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

/* نفس حاوية جدول صفحة استلام الجرد */
.special-workspace-grid .special-table-wrapper {
    width: 100%;
    height: 150px;
    max-height: 150px;
    overflow-x: auto;
    overflow-y: auto;
    border: 0;
    border-radius: 0;
    background: var(--surface);
}

/* لا نفرض عرض 650px على الصادر */
.special-workspace-grid .special-section:first-child .special-table {
    min-width: 0;
}

/* الوارد يحتوي أعمدة أكثر، لذلك نسمح له بالتمرير عند الحاجة فقط */
.special-workspace-grid .special-section:last-child .special-table {
    min-width: 760px;
}

/* نفس مقاسات وخطوط جدول استلام الجرد */
.special-workspace-grid .special-table {
    width: 100%;
    border-collapse: collapse;
}

    .special-workspace-grid .special-table th,
    .special-workspace-grid .special-table td {
        padding: 14px 16px;
        border-bottom: 1px solid var(--border);
        text-align: start;
        vertical-align: middle;
        color: var(--text-primary);
        white-space: nowrap;
    }

    .special-workspace-grid .special-table th {
        background: var(--surface-secondary);
        color: var(--text-primary);
        font-size: 14px;
        font-weight: 700;
    }

    .special-workspace-grid .special-table td {
        background: var(--surface);
        color: var(--text-primary);
        font-size: 14px;
    }

    .special-workspace-grid .special-table tbody tr:last-child td {
        border-bottom: 0;
    }

/* حالة الجدول الفارغ بنفس البساطة بدون تمدد زائد */
.special-workspace-grid .special-empty {
    height: 84px;
    padding: 28px 16px !important;
    text-align: center !important;
    color: var(--text-secondary) !important;
    background: var(--surface) !important;
}

/* إلغاء قاعدة إخفاء السكرول للصادر السابقة */
.special-workspace-grid .special-section:first-child .special-table-wrapper {
    overflow-x: auto;
}

/* لا يظهر شريط أفقي في الصادر ما دام العرض متاحًا */
@media (min-width: 1101px) {
    .special-workspace-grid .special-section:first-child .special-table-wrapper {
        overflow-x: hidden;
    }
}

/* الجداول على الهاتف تتصرف مثل صفحة الاستلام */
@media (max-width: 1100px) {
    .special-workspace-grid .special-section {
        height: auto;
    }

    .special-workspace-grid .special-table-wrapper {
        height: auto;
        max-height: 360px;
        overflow-x: auto;
        overflow-y: auto;
    }

    .special-workspace-grid .special-section:first-child .special-table {
        min-width: 650px;
    }

    .special-workspace-grid .special-section:last-child .special-table {
        min-width: 760px;
    }
}


/* ============================================================
   Special Days - Daily Inventory style
   يجعل الجدولين بنفس تنسيق وارتفاع صفحة الجرد اليومي
   ============================================================ */

body:has(.special-days-page) {
    overflow: hidden;
}

.special-days-page {
    box-sizing: border-box;
    height: calc(100vh - 64px);
    min-height: 0;
    max-width: 1500px;
    padding: 18px 24px;
    overflow: hidden;
    gap: 12px;
}

/* الجزء العلوي يبقى ثابتًا ومختصرًا */
.special-days-header,
.special-days-toolbar,
.special-current-context,
.special-summary-grid {
    flex: 0 0 auto;
}

    .special-days-header h1 {
        font-size: 1.45rem;
    }

    .special-days-header p {
        margin-top: 3px;
    }

/* نفس شريط المجاميع الهادئ */
.special-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.special-summary-card {
    min-height: 48px;
    padding: 8px 14px;
    border-radius: 10px;
}

/* مساحة العمل تأخذ بقية الشاشة */
.special-workspace-grid {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.38fr);
    gap: 18px;
    align-items: stretch;
}

    /* كل قسم مثل بطاقة الوارد/الصادر في صفحة الجرد */
    .special-workspace-grid .special-section {
        min-width: 0;
        min-height: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--surface);
        overflow: hidden;
    }

    /* رأس القسم بنفس إحساس daily-section-header */
    .special-workspace-grid .special-section-header {
        flex: 0 0 auto;
        min-height: 74px;
        padding: 14px 18px;
        border-bottom: 1px solid var(--border);
        background: var(--surface-secondary);
    }

        .special-workspace-grid .special-section-header h2 {
            font-size: 1.2rem;
            font-weight: 700;
        }

        .special-workspace-grid .special-section-header small {
            margin-top: 4px;
            font-size: 13px;
        }

    /* الزر بنفس حجم زر إضافة الوارد/الصادر */
    .special-workspace-grid .special-primary-button {
        min-height: 42px;
        padding: 8px 16px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
    }

    /* الجدول يملأ ارتفاع البطاقة والتمرير يكون داخليًا */
    .special-workspace-grid .special-table-wrapper {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        max-height: none;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-gutter: auto;
    }

    /* إلغاء أي min-width قديم يسبب Scroll أفقي */
    .special-workspace-grid .special-table {
        width: 100%;
        min-width: 0 !important;
        table-layout: auto;
        border-collapse: collapse;
        font-size: 14px;
    }

        .special-workspace-grid .special-table th,
        .special-workspace-grid .special-table td {
            padding: 13px 14px;
            border-bottom: 1px solid var(--border);
            color: var(--text-primary);
            text-align: start;
            vertical-align: middle;
            white-space: nowrap;
        }

        .special-workspace-grid .special-table th {
            position: sticky;
            top: 0;
            z-index: 6;
            background: var(--surface-secondary);
            font-size: 14px;
            font-weight: 700;
        }

        .special-workspace-grid .special-table td {
            background: var(--surface);
            font-size: 14px;
        }

            /* عمود التسلسل صغير مثل صفحة الجرد */
            .special-workspace-grid .special-table th:first-child,
            .special-workspace-grid .special-table td:first-child {
                width: 44px;
                min-width: 44px;
                max-width: 44px;
                text-align: center;
            }

            /* عمود الإجراءات */
            .special-workspace-grid .special-table th:last-child,
            .special-workspace-grid .special-table td:last-child {
                min-width: 105px;
            }

/* حالة عدم وجود بيانات تملأ القسم بدل الفراغ الصغير */
.special-empty {
    height: auto !important;
    padding: 0 !important;
    border-bottom: 0 !important;
}

.special-empty-state {
    min-height: 280px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 28px;
    color: var(--text-secondary);
    text-align: center;
    font-size: 14px;
}

    .special-empty-state svg {
        width: 46px;
        height: 46px;
        fill: none;
        stroke: var(--text-secondary);
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        opacity: .58;
    }

/* لا نعرض مجموعًا سفليًا */
.special-total-row {
    display: none !important;
}

/* Scrollbar داخلي هادئ */
.special-workspace-grid .special-table-wrapper::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.special-workspace-grid .special-table-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.special-workspace-grid .special-table-wrapper::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 999px;
}

    .special-workspace-grid .special-table-wrapper::-webkit-scrollbar-thumb:hover {
        background: var(--text-secondary);
    }

.special-workspace-grid .special-table-wrapper {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

/* على الشاشات الأصغر نرجع للتمرير الطبيعي */
@media (max-width: 1150px) {
    body:has(.special-days-page) {
        overflow: auto;
    }

    .special-days-page {
        height: auto;
        min-height: calc(100vh - 64px);
        overflow: visible;
    }

    .special-workspace-grid {
        grid-template-columns: 1fr;
    }

        .special-workspace-grid .special-section {
            height: 430px;
        }

        .special-workspace-grid .special-table-wrapper {
            overflow-x: auto;
        }

        .special-workspace-grid .special-table {
            min-width: 650px !important;
        }
}

@media (max-width: 760px) {
    .special-days-page {
        padding: 16px 14px;
    }

    .special-summary-grid {
        grid-template-columns: 1fr;
    }

    .special-workspace-grid .special-section {
        height: 400px;
    }
}


/* ============================================================
   Special Days - Final compact layout + scroll only when needed
   ============================================================ */

/* تقليل الفراغات الكبيرة أعلى الصفحة */
.special-days-page {
    padding-top: 10px;
    padding-bottom: 14px;
    gap: 8px;
}

.special-days-header {
    margin: 0;
}

    .special-days-header h1 {
        margin-bottom: 2px;
    }

    .special-days-header p {
        margin: 0;
    }

.special-days-toolbar {
    margin: 0;
    min-height: 44px;
}

.special-current-context {
    margin: 0;
    min-height: 24px;
}

.special-summary-grid {
    margin: 0;
    gap: 10px;
}

.special-summary-card {
    min-height: 44px;
    padding: 7px 12px;
}

/* تقريب الجداول من شريط المجاميع */
.special-workspace-grid {
    margin-top: 2px;
}

    /* ============================================================
   Scrollbar
   لا يظهر إلا عند تجاوز المحتوى ارتفاع الجدول
   ============================================================ */

    .special-workspace-grid .special-table-wrapper {
        overflow-x: hidden;
        overflow-y: auto;
        /* Firefox */
        scrollbar-width: none;
    }

        /* Chrome / Edge / Safari */
        .special-workspace-grid .special-table-wrapper::-webkit-scrollbar {
            width: 0;
            height: 0;
        }

        /* نعرض Scrollbar فقط عند وجود حركة فعلية داخل الجدول */
        .special-workspace-grid .special-table-wrapper.is-scrollable {
            scrollbar-width: thin;
            scrollbar-color: var(--border) transparent;
        }

            .special-workspace-grid .special-table-wrapper.is-scrollable::-webkit-scrollbar {
                width: 8px;
                height: 8px;
            }

            .special-workspace-grid .special-table-wrapper.is-scrollable::-webkit-scrollbar-track {
                background: transparent;
            }

            .special-workspace-grid .special-table-wrapper.is-scrollable::-webkit-scrollbar-thumb {
                background: var(--border);
                border-radius: 999px;
            }

                .special-workspace-grid .special-table-wrapper.is-scrollable::-webkit-scrollbar-thumb:hover {
                    background: var(--text-secondary);
                }

    /* لا يوجد سلايد أفقي على سطح المكتب */
    .special-workspace-grid .special-table {
        min-width: 0 !important;
    }

/* ============================================================
   Compact desktop
   ============================================================ */

@media (min-width: 1151px) {
    .special-days-page {
        height: calc(100vh - 64px);
    }

    .special-days-header {
        flex: 0 0 auto;
    }

    .special-days-toolbar,
    .special-current-context,
    .special-summary-grid {
        flex: 0 0 auto;
    }

    .special-workspace-grid {
        flex: 1 1 auto;
        min-height: 0;
    }
}


/* ============================================================
   Special Days - Equal columns + true conditional vertical scroll
   ============================================================ */

/* الوارد المرحّل والصادر الخاص بنفس العرض تمامًا */
.special-workspace-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
}

    /* القسمان بنفس الارتفاع */
    .special-workspace-grid .special-section {
        height: 100% !important;
        min-height: 0 !important;
    }

    /* منطقة الجدول تملأ نفس المساحة في القسمين */
    .special-workspace-grid .special-table-wrapper {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        /* لا نظهر أي Scroll بشكل افتراضي */
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
    }

        .special-workspace-grid .special-table-wrapper::-webkit-scrollbar {
            width: 0 !important;
            height: 0 !important;
        }

        /* يظهر التمرير العمودي فقط عند إضافة الكلاس من JavaScript */
        .special-workspace-grid .special-table-wrapper.is-scrollable {
            overflow-y: auto !important;
            scrollbar-width: thin !important;
            scrollbar-color: var(--border) transparent !important;
        }

            .special-workspace-grid .special-table-wrapper.is-scrollable::-webkit-scrollbar {
                width: 8px !important;
                height: 0 !important;
            }

            .special-workspace-grid .special-table-wrapper.is-scrollable::-webkit-scrollbar-track {
                background: transparent !important;
            }

            .special-workspace-grid .special-table-wrapper.is-scrollable::-webkit-scrollbar-thumb {
                background: var(--border) !important;
                border-radius: 999px !important;
            }

    /* الجداول نفسها لا تجبر على Scroll أفقي */
    .special-workspace-grid .special-table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed;
    }

        /* توزيع الأعمدة داخل كل جدول بدون تجاوز عرض البطاقة */
        .special-workspace-grid .special-table th,
        .special-workspace-grid .special-table td {
            overflow: hidden;
            text-overflow: ellipsis;
        }

/* عند الشاشات الأصغر نعيد الترتيب العمودي */
@media (max-width: 1150px) {
    .special-workspace-grid {
        grid-template-columns: 1fr !important;
    }

        .special-workspace-grid .special-section {
            height: 430px !important;
        }

        .special-workspace-grid .special-table-wrapper {
            overflow-x: auto !important;
        }

        .special-workspace-grid .special-table {
            min-width: 650px !important;
            table-layout: auto;
        }
}