/* =====================================================
   ورشات — طبقة التطبيق فوق brand-admin.css
   لا تعيد تعريف شيء من الهوية؛ تضيف فقط ما تحتاجه المنصة:
   بطاقات المؤشرات المالية، شارات أنواع العمليات، شريط الفلاتر،
   الرسوم البيانية، أوراق الطباعة، وتفتيح عارض المرفقات.
===================================================== */

:root {
    /* المتغيّرات التي يقرؤها filepreview.css — تُعاد لنسق فاتح متسق مع اللوحة */
    --brand: var(--admin-primary);
    --text: var(--admin-text);
    --text-muted: var(--admin-text-muted);
    --text-dim: #8a8a8a;
    --border: var(--admin-border);
    --border-strong: #cfd4da;
    --surface-2: #f8f9fa;
    --bg-850: #ffffff;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, .18);

    --money-in: #28a745;
    --money-out: #dc3545;
    --money-due: #f7b733;

    /*
       ألوان أنواع العمليات — مصدر واحد تقرؤه الشارات والنقاط والرسوم.
       اختيرت درجاتها متباعدة على عجلة الألوان (25° / 175° / 224° / 272°)
       لأن أي لونين متقاربين يصعب تمييزهما في النقاط الصغيرة —
       والتحصيل يحمل لون الهوية لأنه أهم الأنواع.
    */
    --t-payment: #f97316;      /* برتقالي  25° */
    --t-receipt: #16a34a;      /* أخضر    142° */
    --t-collection: #1B6CA8;   /* أزرق الهوية 206° */
    --t-expense: #9333ea;      /* بنفسجي  272° */
}

/* ==================== توحيد شكل الحقول ====================
   brand-admin.css يصمّم أنواعاً بعينها (text / date / number) فتبقى حقول
   البحث والبريد وكلمة المرور بشكل المتصفّح الافتراضي وتبدو دخيلة على
   الصفحة. القاعدة هنا تشمل كل حقل نصّي بالاستثناء بدل التعداد، فأي نوع
   يُضاف مستقبلاً يرث الشكل نفسه تلقائياً.
========================================================== */
.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.filter-bar input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
    width: 100%;
    max-width: 100%;
    padding: 12px 15px;
    border: 2px solid var(--admin-border);
    border-radius: var(--admin-radius);
    font-size: 1rem;
    font-family: inherit;
    color: var(--admin-text);
    background: #fff;
    box-sizing: border-box;
    transition: border-color .3s;
}

.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.filter-bar input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus {
    outline: none;
    border-color: var(--admin-primary);
}

.form-group input::placeholder,
.filter-bar input::placeholder { color: #9aa0a6; }

/* حقل البحث يأتي بمظهر وزر إلغاء خاصّين بالمتصفّح — يُحيَّدان ليطابق البقية. */
.form-group input[type="search"],
.filter-bar input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
}

.form-group input[type="search"]::-webkit-search-decoration,
.form-group input[type="search"]::-webkit-search-cancel-button,
.filter-bar input[type="search"]::-webkit-search-decoration,
.filter-bar input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

/* التاريخ يضع أيقونة التقويم في الطرف الخطأ ضمن RTL. */
.form-group input[type="date"]::-webkit-calendar-picker-indicator {
    margin-inline-start: 0;
    margin-inline-end: auto;
    cursor: pointer;
    opacity: .55;
}

.form-group input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: .9; }

/* ==================== القائمة المنسدلة القابلة للبحث ====================
   تحلّ محلّ <select> الأصلي في كل الموقع. ميزتها على القائمة الأصلية أنّ
   حجم خط خياراتها يتبع الموقع لا نظام التشغيل، فلا تظهر ضخمة بجوار بقية
   الحقول. الأصل يبقى شفافاً فوقها ليعمل الإرسال والتحقق بلا تغيير.
======================================================================= */
.ss { position: relative; width: 100%; }

.ss-native {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    /* لا تُخفَ بـ display:none حتى لا يتخطّاها التحقق من جانب العميل. */
}

.ss-toggle {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 15px;
    border: 2px solid var(--admin-border);
    border-radius: var(--admin-radius);
    background: #fff;
    color: var(--admin-text);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.2;
    text-align: start;
    cursor: pointer;
    transition: border-color .2s ease;
}

.ss-toggle:hover { border-color: #c9ced3; }
.ss.is-open .ss-toggle { border-color: var(--admin-primary); }
.ss-toggle:focus-visible { outline: none; border-color: var(--admin-primary); }
.ss.is-disabled .ss-toggle { background: var(--admin-bg); cursor: not-allowed; opacity: .7; }

.ss-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-value.is-placeholder { color: #9aa0a6; }

.ss-caret { width: 16px; height: 16px; flex-shrink: 0; fill: var(--admin-text-muted); transition: transform .2s ease; }
.ss.is-open .ss-caret { transform: rotate(180deg); }

/*
   اللوحة تُنقل إلى <body> عند الفتح وتُوضع بـ position:fixed.
   السبب أنّ أسلافها تقصّها أو تحبسها: .content-form و .form-section
   عليهما overflow:hidden، و .content-table-wrapper عليه overflow-x:auto —
   وأيٌّ منها يقصّ اللوحة مهما رُفع z-index. والنقل إلى الجذر يخرجها كذلك من
   أي سياق تراص، فتعلو الشريط الجانبي (100) وزر الأعلى (999) وزر واتساب (1000).
   الإحداثيات يحسبها searchselect.js من موضع الزر عند كل فتح وتمرير وتحجيم.
*/
.ss-panel {
    position: fixed;
    z-index: 2147483000;
    background: #fff;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .18);
    padding: 6px;
    overflow: hidden;
}

.ss-panel[hidden] { display: none; }

.ss-search {
    width: 100%;
    padding: 7px 10px;
    margin-bottom: 6px;
    border: 1px solid var(--admin-border);
    border-radius: 6px;
    font-family: inherit;
    font-size: .84rem;
    background: var(--admin-bg);
    box-sizing: border-box;
}

.ss-search:focus { outline: none; border-color: var(--admin-primary); background: #fff; }

.ss-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 232px;
    overflow-y: auto;
}

.ss-option {
    padding: 7px 10px;
    border-radius: 6px;
    font-size: .86rem;
    line-height: 1.45;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ss-option.is-active { background: rgba(27, 108, 168, .1); }
.ss-option.is-selected { background: var(--admin-primary); color: #fff; font-weight: 600; }
.ss-option.is-disabled { opacity: .45; cursor: not-allowed; }
.ss-empty { padding: 12px 10px; font-size: .82rem; color: var(--admin-text-muted); text-align: center; }


/* نجمة الحقل الإجباري — يلحقها requiredstars.js بتسمية كل حقل مطلوب. */
.req-star { color: var(--admin-danger, #dc3545); font-weight: 700; }

/* ==================== تنبيهات ==================== */
.flash {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: var(--admin-radius);
    margin-bottom: 20px;
    font-size: .92rem;
    font-weight: 500;
    border: 1px solid transparent;
}

.flash svg { width: 20px; height: 20px; flex-shrink: 0; fill: currentColor; }
.flash.success { background: #e8f8ee; color: #1e7e34; border-color: #b7e4c7; }
.flash.warning { background: #fff8e6; color: #9a6b00; border-color: #ffe3a3; }
.flash.error   { background: #fdecec; color: #b02a37; border-color: #f5c2c7; }

.field-errors {
    margin: 0 0 18px;
    padding: 14px 18px;
    border-radius: var(--admin-radius);
    background: #fdecec;
    border: 1px solid #f5c2c7;
    color: #b02a37;
    font-size: .9rem;
}

.field-errors ul { margin: 0; padding-inline-start: 18px; }
.field-error { display: block; color: var(--admin-danger); font-size: .82rem; margin-top: 6px; }

/* ==================== بطاقات المؤشرات ==================== */
.stat-icon.payments   { background: linear-gradient(135deg, #f97316, #fbbf24); }
.stat-icon.receipts   { background: linear-gradient(135deg, #16a34a, #4ade80); }
.stat-icon.expenses   { background: linear-gradient(135deg, #9333ea, #c084fc); }
.stat-icon.dues       { background: linear-gradient(135deg, #1B6CA8, #2E8CCB); }
.stat-icon.collected  { background: linear-gradient(135deg, #1B6CA8, #2E8CCB); }
.stat-icon.workshops  { background: linear-gradient(135deg, #0f766e, #14b8a6); }
.stat-icon.tenants    { background: linear-gradient(135deg, #667eea, #764ba2); }
.stat-icon.revenue    { background: linear-gradient(135deg, #11998e, #38ef7d); }

.stat-card .stat-number { direction: ltr; unicode-bidi: isolate; }
.stat-card .stat-sub {
    display: block;
    font-size: .75rem;
    color: var(--admin-text-muted);
    margin-top: 2px;
}

/* ==================== شارات أنواع العمليات ==================== */
.type-badge-t {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

/* النصّ أغمق قليلاً من لون النوع الخالص: القياس على التوين الفاتح أعطى
   4.18:1 للبرتقالي و4.48:1 للأخضر — أي دون حدّ WCAG — فخُفض السطوع
   إلى أقرب درجة تعبر 4.5:1 بلا تغيّر محسوس في درجة اللون. */
.type-payment    { background: #fff1e3; color: #b64e09; }
.type-receipt    { background: #e6f6ec; color: #157d3c; }
.type-collection { background: #E8F1F8; color: #175E90; }
.type-expense    { background: #f5e9fd; color: #7e22ce; }

.agreement-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 600;
    background: rgba(27, 108, 168, .1);
    color: var(--admin-primary-dark);
    direction: ltr;
    unicode-bidi: isolate;
}

/* مبالغ: أرقام لاتينية دائماً بترتيب صحيح داخل نص عربي */
.money { direction: ltr; unicode-bidi: isolate; font-weight: 600; white-space: nowrap; }
.money.pos { color: var(--money-in); }
.money.neg { color: var(--money-out); }
.money.due { color: var(--admin-primary-dark); }
.num { direction: ltr; unicode-bidi: isolate; }

/* ==================== التقويم الشهري ====================
   شبكة سبعة أعمدة تبدأ بالسبت. الاتجاه RTL يجعل السبت في أقصى اليمين
   تلقائياً، فلا حاجة لعكس الترتيب يدوياً.
======================================================== */
.cal-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: var(--admin-card);
    border-radius: var(--admin-radius);
    box-shadow: var(--admin-shadow);
    padding: 12px 16px;
    margin-bottom: 15px;
}

.cal-title { flex: 1; text-align: center; min-width: 160px; }
.cal-title strong { display: block; font-size: 1.05rem; color: var(--admin-secondary); }
.cal-title span { font-size: .74rem; color: var(--admin-text-muted); }

.cal-nav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--admin-border);
    border-radius: 50px;
    background: var(--admin-card);
    color: var(--admin-text);
    text-decoration: none;
    font-size: .83rem;
    font-weight: 600;
    transition: all .2s ease;
}

.cal-nav:hover { border-color: var(--admin-primary); color: var(--admin-primary); }
.cal-nav svg { width: 15px; height: 15px; fill: currentColor; }

.cal-today {
    padding: 7px 14px;
    border-radius: 50px;
    background: var(--admin-primary);
    color: #fff;
    text-decoration: none;
    font-size: .8rem;
    font-weight: 600;
}

/*
   الشبكة تبقى بسبعة أعمدة وبعرض الحاسوب في كل المقاسات، ويُمرَّر التقويم
   أفقياً على الشاشات الضيقة بدل أن ينهار إلى عمود واحد — فالتقويم يفقد
   معناه إن لم تُرَ أيام الأسبوع متجاورة. الترويسة والشبكة داخل حاوية
   تمرير واحدة كي ينزلقا معاً ويبقى اسم اليوم فوق عموده.
*/
.cal-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}

.cal-canvas { min-width: 920px; }

.cal-week,
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; }

.cal-week { margin-bottom: 7px; }

/* التلميح يظهر فقط حين يكون التمرير فعلياً ضرورياً. */
.cal-hint { display: none; font-size: .76rem; margin: 9px 0 0; }

@media (max-width: 980px) {
    .cal-hint { display: block; }
}

.cal-week-name {
    text-align: center;
    font-size: .74rem;
    font-weight: 700;
    color: var(--admin-text-muted);
    padding: 5px 0;
}

.cal-day {
    background: var(--admin-card);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
    padding: 7px 8px;
    min-height: 104px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    /* لا overflow:hidden — البطاقة تعرض كل عمليات اليوم فتطول بطولها،
       وخلايا الصف تتساوى تلقائياً بأطولها. */
}

.cal-day.is-padding { background: transparent; border-color: transparent; min-height: 0; }
.cal-day.is-weekend { background: var(--admin-bg); }
.cal-day.has-activity { border-color: rgba(27, 108, 168, .35); }
.cal-day.is-today { border-color: var(--admin-primary); box-shadow: 0 0 0 2px rgba(27, 108, 168, .18); }

.cal-day-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.cal-day-num { font-size: .84rem; font-weight: 700; color: var(--admin-text); }
.cal-day.is-today .cal-day-num { color: var(--admin-primary); }

.cal-day-count {
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 20px;
    background: rgba(27, 108, 168, .12);
    color: var(--admin-primary-dark);
    font-size: .68rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    direction: ltr;
}

.cal-day-count:hover { background: var(--admin-primary); color: #fff; }

/* شريط كثافة: طوله نسبة مبلغ اليوم إلى أعلى يوم في الشهر. */
.cal-day-bar { height: 3px; border-radius: 3px; background: var(--admin-border); overflow: hidden; }
.cal-day-bar span { display: block; height: 100%; background: var(--admin-primary); border-radius: 3px; }

.cal-day-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }

.cal-day-list a {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .7rem;
    color: var(--admin-text);
    text-decoration: none;
    padding: 2px 3px;
    border-radius: 4px;
}

.cal-day-list a:hover { background: rgba(27, 108, 168, .09); }
.cal-t-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-t-amount { direction: ltr; unicode-bidi: isolate; font-weight: 600; color: var(--admin-text-muted); }

.cal-day .dot,
.cal-legend .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

.dot.type-payment { background: var(--t-payment); }
.dot.type-receipt { background: var(--t-receipt); }
.dot.type-expense { background: var(--t-expense); }
.dot.type-collection { background: var(--t-collection); }

.cal-legend {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 13px;
    font-size: .75rem;
    color: var(--admin-text-muted);
}

.cal-legend span { display: inline-flex; align-items: center; gap: 5px; }

/* شريط تمرير أنحف وأوضح داخل التقويم على الأجهزة التي تُظهره. */
.cal-scroll::-webkit-scrollbar { height: 9px; }
.cal-scroll::-webkit-scrollbar-track { background: var(--admin-bg); border-radius: 9px; }
.cal-scroll::-webkit-scrollbar-thumb { background: #c3c8ce; border-radius: 9px; }
.cal-scroll::-webkit-scrollbar-thumb:hover { background: var(--admin-primary); }

/* ==================== ترويسة قسم بنطاق فلترة ====================
   لوحة المعلومات تعرض نظامَي أرقام مختلفَين: المستحقات (تتبع الورشة وحدها)
   والعمليات (تتبع كل الفلاتر). بلا فصل بصري وتسمية صريحة لكل قسم يظنّ
   المستخدم أنّ فلتراً لم يعمل. هذه الترويسة تعلن نطاق كل قسم قبل أرقامه.
================================================================= */
.scope-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 26px 0 13px;
}

.scope-head:first-child { margin-top: 0; }

.scope-head h2 {
    font-size: 1.06rem;
    color: var(--admin-secondary);
    margin: 0;
}

.scope-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 11px;
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 600;
    background: rgba(27, 108, 168, .1);
    color: var(--admin-primary-dark);
}

.scope-chip.is-partial { background: #fff4e0; color: #9a6b00; }
.scope-chip svg { width: 13px; height: 13px; fill: currentColor; }

.scope-head .spacer { flex: 1; }
.scope-head .scope-note { font-size: .76rem; color: var(--admin-text-muted); }

/* تسمية أثر كل فلتر أسفل حقله. */
.filter-grid .form-group .scope-tag {
    display: block;
    margin-top: 4px;
    font-size: .69rem;
    color: var(--admin-text-muted);
}

/* ==================== زر العودة ====================
   كان نصاً رمادياً بلا حدّ ولا خلفية فلا يُقرأ كزر. صار زراً واضحاً بحدّ
   وخلفية وحالة تحويم، والسهم يشير يميناً — فالعودة في RTL نحو اليمين.
=================================================== */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px 7px 13px;
    background: var(--admin-card);
    border: 1px solid var(--admin-border);
    border-radius: 50px;
    color: var(--admin-text);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    transition: all .2s ease;
}

.back-link:hover,
.back-link:focus-visible {
    background: rgba(27, 108, 168, .08);
    border-color: var(--admin-primary);
    color: var(--admin-primary-dark);
    outline: none;
}

.back-link svg { width: 17px; height: 17px; fill: currentColor; transition: transform .2s ease; }

/* السهم ينزلق نحو جهة العودة عند التحويم — تلميح بصري بأنه زر. */
.back-link:hover svg { transform: translateX(3px); }

/* ==================== خلية الإجراءات في الجداول ====================
   صنف .actions يوضَع على <td> نفسه، و brand-admin.css يجعله display:flex —
   فتفقد الخلية سلوك خلية الجدول ويسقط معه vertical-align، فتبدو الأزرار
   مرتفعة عن سطر الصف. إعادتها إلى table-cell تعيد التوسيط الرأسي، وتُصفّ
   الأزرار أفقياً بـ inline-flex بدل الاعتماد على flex الخلية.
=================================================================== */
.content-table td.actions {
    display: table-cell;
    vertical-align: middle;
    white-space: nowrap;
}

.content-table td.actions .action-btn,
.content-table td.actions form,
.content-table td.actions button {
    vertical-align: middle;
}

.content-table td.actions .action-btn { display: inline-flex; }
.content-table td.actions form { display: inline-block; margin: 0; }

/* الفراغ بين الأزرار كان من gap الخاص بـ flex؛ يُعوَّض بهامش. */
.content-table td.actions > *:not(:last-child) { margin-inline-end: 6px; }

/* لا خط تحت الأزرار — هي روابط، ويرثه بعضها من تنسيق روابط الجدول. */
.content-table td.actions .action-btn,
.content-table td.actions .action-btn:hover,
.content-table td.actions .action-btn:focus {
    text-decoration: none;
    border-bottom-width: 1px;
}

/* ==================== جدول تفصيلي عريض ====================
   جدول الورشات يحمل أعمدة كثيرة عمداً. الحاوية تمرّره أفقياً، وعمودا
   الاسم والإجراءات مثبّتان على الطرفين حتى يبقى الصف معروفاً أثناء التمرير.
========================================================== */
.content-table-wrapper { overflow-x: auto; }

.table-detailed { min-width: 1180px; }
.table-detailed th, .table-detailed td { white-space: nowrap; }
.table-detailed .text-center { text-align: center; }

.table-detailed tfoot td {
    background: var(--admin-bg);
    font-weight: 700;
    border-top: 2px solid var(--admin-border);
}

/* شريط تقدّم داخل خلية */
.cell-progress {
    display: flex;
    align-items: center;
    gap: 7px;
    justify-content: center;
}

.cell-progress .progress-track { width: 54px; margin: 0; flex-shrink: 0; }
.cell-progress span { font-size: .72rem; color: var(--admin-text-muted); min-width: 30px; }

/* تثبيت عمود اسم الورشة وعمود الإجراءات عند التمرير الأفقي */
@media (min-width: 769px) {
    .table-detailed th:first-child,
    .table-detailed td:first-child {
        position: sticky;
        inset-inline-start: 0;
        z-index: 2;
        background: var(--admin-card);
        box-shadow: 1px 0 0 var(--admin-border);
    }

    .table-detailed thead th:first-child { background: var(--admin-bg); z-index: 3; }
    .table-detailed tfoot td:first-child { background: var(--admin-bg); }
    .table-detailed tbody tr:hover td:first-child { background: #f7fbfb; }
}

/* ==================== شريط الفلاتر ==================== */
.filter-bar {
    background: var(--admin-card);
    border-radius: var(--admin-radius);
    box-shadow: var(--admin-shadow);
    padding: 20px;
    margin-bottom: 25px;
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 15px;
}

.filter-grid .form-group { margin-bottom: 0; }

/*
   الفلاتر مطوية افتراضياً: ثمانية حقول مفتوحة تدفع الجدول أسفل الطية
   فلا يُرى من النتائج شيء. تُفتح وحدها متى كان هناك فلتر سارٍ حتى يرى
   المستخدم فوراً لماذا القائمة مختصرة.
*/
details.filter-bar > summary {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    font-size: .87rem;
    color: var(--admin-secondary);
    user-select: none;
}

details.filter-bar > summary::-webkit-details-marker { display: none; }

details.filter-bar > summary .chevron {
    width: 16px;
    height: 16px;
    fill: var(--admin-text-muted);
    transition: transform .25s ease;
}

details.filter-bar[open] > summary .chevron { transform: rotate(180deg); }
details.filter-bar[open] > summary { margin-bottom: 15px; }

.filter-count {
    background: var(--admin-primary);
    color: #fff;
    border-radius: 20px;
    padding: 1px 8px;
    font-size: .7rem;
    font-weight: 700;
}

.filter-hint { color: var(--admin-text-muted); font-weight: 400; font-size: .78rem; }

.filter-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--admin-border);
}

.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    background: rgba(27, 108, 168, .1);
    color: var(--admin-primary-dark);
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
}

.filter-chip:hover { background: rgba(27, 108, 168, .2); }

/* ==================== شريط المجاميع ==================== */
.totals-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1px;
    background: var(--admin-border);
    border-radius: var(--admin-radius);
    overflow: hidden;
    margin-bottom: 25px;
    box-shadow: var(--admin-shadow);
}

.totals-strip > div { background: var(--admin-card); padding: 18px 20px; }
.totals-strip .label { display: block; font-size: .78rem; color: var(--admin-text-muted); margin-bottom: 4px; }
.totals-strip .value { display: block; font-size: 1.25rem; font-weight: 700; direction: ltr; unicode-bidi: isolate; }

/* ==================== لوحات وشبكات ==================== */
.panel {
    background: var(--admin-card);
    border-radius: var(--admin-radius);
    box-shadow: var(--admin-shadow);
    padding: 25px;
    margin-bottom: 25px;
}

.panel > h3 {
    font-size: 1.05rem;
    color: var(--admin-secondary);
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--admin-border);
}

/*
   ‎minmax(0, …)‎ لا ‎2fr 1fr‎ مجرّدة: المسار ‎1fr‎ يعني ‎minmax(auto, 1fr)‎،
   و‎auto‎ لا يهبط تحت أصغر عرض لمحتواه. وبطاقة الرسم البياني تضمّ SVG بـ
   ‎min-width: 520px‎، فكان المسار ينتفخ إلى 570px على شاشة عرضها 356px
   فيخرج القسم كلّه عن حافة الصفحة. تصفير الحدّ الأدنى يعيد المسار إلى عرض
   الحاوية، ويبقى الرسم قابلاً للتمرير أفقياً داخل ‎.chart-scroll‎ وحده.
*/
.grid-2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 25px; align-items: start; }
.grid-half { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 25px; align-items: start; }

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

.kv-list { list-style: none; margin: 0; padding: 0; }

.kv-list li {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 11px 0;
    border-bottom: 1px solid var(--admin-border);
    font-size: .9rem;
}

.kv-list li:last-child { border-bottom: 0; }
.kv-list .k { color: var(--admin-text-muted); }
.kv-list .v { font-weight: 600; text-align: end; }

/* ==================== بطاقة المستحق ==================== */
.due-panel {
    background: linear-gradient(135deg, #1B6CA8, #145585);
    color: #fff;
    border-radius: var(--admin-radius);
    padding: 25px;
    box-shadow: 0 8px 30px rgba(27, 108, 168, .25);
    margin-bottom: 25px;
}

.due-panel h3 { font-size: .95rem; font-weight: 600; opacity: .9; margin-bottom: 6px; }
.due-panel .amount { font-size: 2.4rem; font-weight: 700; line-height: 1.2; direction: ltr; unicode-bidi: isolate; }
.due-panel .meta { font-size: .82rem; opacity: .88; margin-top: 6px; }
.due-panel .actions-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

.due-panel .btn-white {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: var(--admin-primary-dark);
    padding: 9px 20px;
    border-radius: 50px;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    border: 0;
    cursor: pointer;
}

.due-panel .btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, .6);
    padding: 7px 18px;
    border-radius: 50px;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.due-panel .btn-white:hover { transform: translateY(-2px); }
.due-panel .btn-ghost:hover { background: rgba(255, 255, 255, .15); }

.progress-track {
    height: 8px;
    border-radius: 8px;
    background: var(--admin-border);
    overflow: hidden;
    margin-top: 8px;
}

.progress-track.on-teal { background: rgba(255, 255, 255, .3); }
.progress-fill { height: 100%; border-radius: 8px; background: var(--admin-primary); transition: width .4s ease; }
.progress-track.on-teal .progress-fill { background: #fff; }
.progress-fill.warn { background: var(--admin-warning); }
.progress-fill.danger { background: var(--admin-danger); }

/* ==================== الرسوم البيانية ==================== */
.chart-card { background: var(--admin-card); border-radius: var(--admin-radius); box-shadow: var(--admin-shadow); padding: 25px; }

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

.chart-head h3 { font-size: 1.05rem; color: var(--admin-secondary); }
.chart-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: .78rem; color: var(--admin-text-muted); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

.chart-scroll { overflow-x: auto; }
.chart-svg { display: block; min-width: 520px; width: 100%; height: auto; }
.chart-svg .grid-line { stroke: var(--admin-border); stroke-width: 1; }
.chart-svg .axis-line { stroke: #cfd4da; }
.chart-svg .axis-label { font-size: 10px; fill: var(--admin-text-muted); font-family: 'Cairo', sans-serif; }
.chart-svg .axis-year { font-size: 9px; font-weight: 600; fill: var(--admin-text); }

/*
   قيم المحور الرأسي أرقام لاتينية. نصّ SVG يرث direction:rtl من الصفحة،
   فيصير مرساة "start" هي الحافة اليمنى ويمتدّ الرقم يساراً فوق خط المحور
   والأعمدة. فرض direction:ltr يجعل المرساة الحافة اليسرى، فيمتدّ الرقم
   يميناً بعيداً عن المحور — وهو موضعه الصحيح.
*/
.chart-svg .axis-value { direction: ltr; unicode-bidi: isolate; }
.chart-svg .bar { transition: opacity .2s ease; }
.chart-svg .bar:hover { opacity: .75; }

/* توزيع البنود */
.breakdown-list { list-style: none; margin: 0; padding: 0; }
.breakdown-list li { margin-bottom: 16px; }

.breakdown-list .row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: .86rem;
    margin-bottom: 6px;
}

.breakdown-list .name { font-weight: 600; color: var(--admin-text); }
.breakdown-list .val { color: var(--admin-text-muted); }

/* ==================== منتقي نوع العملية ==================== */
.type-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.type-picker input { position: absolute; opacity: 0; pointer-events: none; }

.type-picker label {
    display: block;
    border: 2px solid var(--admin-border);
    border-radius: var(--admin-radius);
    padding: 14px 16px;
    cursor: pointer;
    transition: all .2s ease;
    background: #fff;
}

.type-picker label:hover { border-color: var(--admin-primary); }
.type-picker input:checked + label { border-color: var(--admin-primary); background: rgba(27, 108, 168, .06); }
.type-picker .t-name { display: block; font-weight: 600; font-size: .92rem; color: var(--admin-secondary); }
.type-picker .t-hint { display: block; font-size: .74rem; color: var(--admin-text-muted); margin-top: 3px; }

/* ==================== الترقيم ==================== */
.pager { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 25px; }

.pager a, .pager span {
    min-width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-radius: var(--admin-radius);
    background: var(--admin-card);
    border: 1px solid var(--admin-border);
    color: var(--admin-text);
    text-decoration: none;
    font-size: .86rem;
    font-weight: 600;
}

.pager a:hover { border-color: var(--admin-primary); color: var(--admin-primary); }
.pager .current { background: var(--admin-primary); border-color: var(--admin-primary); color: #fff; }
.pager .disabled { opacity: .45; pointer-events: none; }

/* ==================== أدوات صغيرة ==================== */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.toolbar .spacer { flex: 1; }

.tab-links { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }

.tab-links a {
    padding: 8px 18px;
    border-radius: 50px;
    background: var(--admin-card);
    border: 1px solid var(--admin-border);
    color: var(--admin-text-muted);
    text-decoration: none;
    font-size: .85rem;
    font-weight: 600;
}

.tab-links a.active { background: var(--admin-primary); border-color: var(--admin-primary); color: #fff; }

.muted { color: var(--admin-text-muted); }
.text-end { text-align: end; }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

.status-badge.trial    { background: #e6f4ff; color: #0083b0; }
.status-badge.active   { background: #e6ffe6; color: var(--admin-success); }
.status-badge.expired  { background: #fdecec; color: var(--admin-danger); }
.status-badge.cancelled{ background: #f0f0f0; color: #666; }
.status-badge.closed   { background: #f0f0f0; color: #666; }
.status-badge.open     { background: #e6fff5; color: #11998e; }

/* تاريخ نهاية الاشتراك — ثابت في الشريط الجانبي فيراه المشترك في كل صفحة. */
.sidebar-expiry {
    display: block;
    margin: 10px 13px 0;
    padding: 8px 11px;
    border-radius: var(--admin-radius);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    text-decoration: none;
    line-height: 1.45;
}

.sidebar-expiry span {
    display: block;
    font-size: .66rem;
    color: rgba(255, 255, 255, .55);
}

.sidebar-expiry strong {
    display: block;
    font-size: .84rem;
    color: var(--admin-primary);
    font-weight: 700;
}

.sidebar-expiry:hover { background: rgba(255, 255, 255, .11); }

/* ==================== خطط الاشتراك ==================== */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }

.plan-card {
    background: var(--admin-card);
    border: 2px solid var(--admin-border);
    border-radius: var(--admin-radius);
    padding: 25px;
    display: flex;
    flex-direction: column;
}

.plan-card.current { border-color: var(--admin-primary); box-shadow: 0 8px 30px rgba(27, 108, 168, .15); }
.plan-card h4 { font-size: 1.15rem; color: var(--admin-secondary); margin-bottom: 6px; }
.plan-card .price { font-size: 2rem; font-weight: 700; color: var(--admin-primary); direction: ltr; unicode-bidi: isolate; }
.plan-card .price small { font-size: .8rem; color: var(--admin-text-muted); font-weight: 500; }
.plan-card .desc { font-size: .85rem; color: var(--admin-text-muted); margin: 10px 0 16px; flex: 1; }
.plan-card ul { list-style: none; margin: 0 0 18px; padding: 0; font-size: .85rem; }
.plan-card ul li { padding: 6px 0; border-bottom: 1px dashed var(--admin-border); }
.plan-card ul li:last-child { border-bottom: 0; }

.plan-badge {
    align-self: flex-start;
    background: var(--admin-primary);
    color: #fff;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: .7rem;
    font-weight: 700;
    margin-bottom: 10px;
}

/* ==================== المرفقات ==================== */
.attach-list { display: flex; flex-direction: column; gap: 8px; }
.attach-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.attach-row .size { font-size: .75rem; color: var(--admin-text-muted); direction: ltr; unicode-bidi: isolate; }

.attach-row .remove-btn {
    background: transparent;
    border: 0;
    color: var(--admin-danger);
    cursor: pointer;
    font-size: .78rem;
    font-weight: 600;
    padding: 2px 6px;
}

/* ==================== أوراق الطباعة ====================
   قياسات مضغوطة ليتّسع في الورقة أكثر: الخط الأساس 12.5px والحشو أضيق،
   فيدخل في صفحة A4 ضِعف ما كان يدخل تقريباً دون أن يصغر النص عن حدّ القراءة.
======================================================== */
.print-body {
    background: #eef1f5;
    padding: 22px 12px;
    font-family: 'Cairo', 'Segoe UI', sans-serif;
    color: #222;
    font-size: 12.5px;
    line-height: 1.5;
}

.print-toolbar {
    max-width: 760px;
    margin: 0 auto 14px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.print-sheet {
    max-width: 760px;
    margin: 0 auto;
    background: #fff;
    padding: 26px 28px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .1);
    border-radius: 4px;
}

.print-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    padding-bottom: 13px;
    border-bottom: 2px solid #1B6CA8;
    margin-bottom: 16px;
}

.print-head .brand-block { display: flex; gap: 11px; align-items: center; }
.print-head img { max-height: 50px; max-width: 116px; object-fit: contain; }
.print-head h1 { font-size: 1.1rem; margin: 0 0 3px; color: #1A222C; line-height: 1.3; }
.print-head .contact { font-size: .69rem; color: #666; line-height: 1.5; }

.print-title {
    text-align: center;
    font-size: 1.12rem;
    font-weight: 700;
    color: #1B6CA8;
    border: 1.5px solid #1B6CA8;
    border-radius: 6px;
    padding: 5px 18px;
    display: inline-block;
}

.print-title-wrap { text-align: center; margin-bottom: 16px; }

.print-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: 6px 18px;
    margin-bottom: 16px;
    font-size: .76rem;
}

.print-meta div { display: flex; gap: 6px; }
.print-meta .k { color: #666; }
.print-meta .v { font-weight: 600; }

.print-amount-box {
    background: #EEF4FA;
    border: 1px solid #C7DCEC;
    border-radius: 6px;
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-bottom: 15px;
}

.print-amount-box .label { font-size: .78rem; color: #444; font-weight: 600; }
.print-amount-box .value { font-size: 1.35rem; font-weight: 700; color: #1B6CA8; direction: ltr; unicode-bidi: isolate; }

.print-table { width: 100%; border-collapse: collapse; font-size: .73rem; margin-bottom: 15px; }
.print-table th, .print-table td { border: 1px solid #dde3e8; padding: 5px 7px; text-align: start; }
.print-table th { background: #f5f7fa; font-weight: 700; }
.print-table td.num, .print-table th.num { direction: ltr; unicode-bidi: isolate; text-align: end; white-space: nowrap; }
.print-table tfoot td { background: #f5f7fa; font-weight: 700; }

/*
   بطاقات الملخّص. كانت الخلفية الرمادية تُرسم على الشبكة كلها وتُترك فجوات
   1px لتبدو كحدود — فأي خانة فارغة في السطر الأخير كانت تظهر كتلة رمادية
   بلا بطاقة. الآن لكل بطاقة حدّها الخاص والشبكة شفافة، فلا يبقى أثر للفراغ.
*/
/* عدد الأعمدة يضبطه _PrintSummary.cshtml حسب عدد البطاقات، فلا يبقى صف
   أخير ببطاقة يتيمة كما كان يفعل auto-fit. */
.print-summary {
    display: grid;
    grid-template-columns: repeat(var(--summary-cols, 3), 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.print-summary > div {
    background: #fff;
    border: 1px solid #dde3e8;
    border-radius: 6px;
    padding: 9px 11px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    text-align: center;
}

.print-summary .k {
    display: block;
    font-size: .67rem;
    color: #6b7480;
    line-height: 1.35;
    /* سطران متساويان لكل البطاقات فتستوي أرقامها على خط واحد. */
    min-height: 1.9em;
}

.print-summary .v { display: block; font-size: .95rem; font-weight: 700; direction: ltr; unicode-bidi: isolate; }
.print-summary .highlight { background: #EEF4FA; border-color: #A9C9E2; }
.print-summary .highlight .v { color: #1B6CA8; }

/* ==================== صندوق تخصيص الكشف ==================== */
.customize-box {
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
    padding: 10px 14px;
    margin-bottom: 14px;
    background: var(--admin-bg);
}

.customize-box > summary {
    cursor: pointer;
    font-size: .88rem;
    font-weight: 600;
    color: var(--admin-text);
}

.customize-section {
    font-size: .74rem;
    font-weight: 700;
    color: var(--admin-text-muted);
    margin: 12px 0 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--admin-border);
}

.customize-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 6px 16px;
    font-size: .84rem;
}

.customize-grid label {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    font-weight: 400;
}

.customize-grid.sig-grid input[type="text"] {
    padding: 8px 10px;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
    font-family: inherit;
    font-size: .84rem;
    width: 100%;
    box-sizing: border-box;
}

/* ==================== نافذة منبثقة خفيفة ====================
   غطاء position:fixed لا <dialog> أصلي عمداً: showModal يضع الحوار في
   الطبقة العليا للمتصفح فتُدفن تحته لوحات القوائم المنسدلة المحسّنة
   المنقولة إلى <body> مهما علا z-index لها. الغطاء العادي يبقى دونها
   (6000 < 2147483000) فتعمل القوائم داخل النافذة بلا عناء.
   الألوان من متغيّرات اللوحة فيتبع الوضع الليلي تلقائياً. */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 6000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(10, 14, 18, .55);
}

.modal-backdrop[hidden] { display: none; }

.modal-card {
    width: 100%;
    max-width: 460px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: var(--admin-card);
    color: var(--admin-text);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .35);
    padding: 20px 22px;
}

.modal-card h3 {
    font-size: 1rem;
    color: var(--admin-secondary);
    margin: 0 0 4px;
}

.modal-card .modal-sub { font-size: .8rem; color: var(--admin-text-muted); margin: 0 0 16px; }

.modal-card .modal-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 6px;
}

/* صندوقا الإيضاح في كشف الحساب: الذمة الجارية، ومستحق المتعهد.
   جدول أسطر بسيط: تسمية يميناً وقيمة يساراً وخط خفيف بينهما، وسطر
   خلاصة مميّز أسفل كل صندوق — لغة الطباعة نفسها في بقية الورقة. */
.print-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 15px; }
.print-box { border: 1px solid #dde3e8; border-radius: 8px; overflow: hidden; }
.print-box .box-title { background: #f5f7fa; font-size: .74rem; font-weight: 700; padding: 6px 10px; border-bottom: 1px solid #dde3e8; }
.print-box .box-row { display: flex; justify-content: space-between; gap: 10px; padding: 5px 10px; font-size: .72rem; border-bottom: 1px solid #eef1f4; }
.print-box .box-row:last-of-type { border-bottom: none; }
.print-box .box-row .num { direction: ltr; unicode-bidi: isolate; white-space: nowrap; font-weight: 600; }
.print-box .box-verdict { padding: 6px 10px; font-size: .74rem; font-weight: 700; background: #EEF4FA; color: #175E90; border-top: 1px solid #A9C9E2; }
.print-box .box-verdict .num { direction: ltr; unicode-bidi: isolate; }

@media (max-width: 560px) { .print-duo { grid-template-columns: 1fr; } }

.print-signatures {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 30px;
    text-align: center;
    font-size: .73rem;
}

.print-signatures .line { border-top: 1px solid #999; margin-top: 32px; padding-top: 6px; color: #555; }

.print-foot {
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid #e5e5e5;
    font-size: .65rem;
    color: #888;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

@media print {
    /* أشرطة «التوزيع حسب البند» داخل الكشف: المتصفح يسقط خلفيات العناصر
       عند الطباعة افتراضياً فتختفي الأشرطة — يُفرض طبعها بلونها. */
    .progress-track, .progress-fill { print-color-adjust: exact; -webkit-print-color-adjust: exact; }

    .print-body { background: #fff; padding: 0; font-size: 11.5px; }
    .print-toolbar, .no-print { display: none !important; }
    .print-sheet { box-shadow: none; max-width: none; padding: 0; border-radius: 0; }
    .print-table { page-break-inside: auto; }
    .print-table tr { page-break-inside: avoid; }
    .print-summary, .print-amount-box, .print-signatures { page-break-inside: avoid; }
    .print-head { page-break-after: avoid; }
    @page { size: A4; margin: 10mm; }
}

/* ==================== شاشات صغيرة ==================== */
@media (max-width: 768px) {
    .totals-strip { grid-template-columns: 1fr 1fr; }
    .due-panel .amount { font-size: 1.9rem; }
    .print-sheet { padding: 22px; }
    .print-signatures { grid-template-columns: 1fr; }

    /*
       أسماء الورشات في لوحة «أعلى الورشات مستحقاً» روابط بارتفاع 22px،
       وهو دون أصغر هدف لمس مريح. تُوسَّع رأسياً على الجوال وحده فيصير
       الهدف ~36px بلا تغيير في الشكل على سطح المكتب.
    */
    .breakdown-list .name {
        display: inline-block;
        padding-block: 7px;
    }
}

/* =====================================================
   كثافة لوحة التحكم
   ---------------------------------------------------
   لوحة التحكم سطح عمل لا واجهة عرض: الهوامش الواسعة تدفع الجداول
   والحقول خارج الشاشة فيضيع الوقت في التمرير. هنا تُضغط المسافات
   وأحجام الحقول نحو 30% ليظهر في الطية الواحدة ضعف ما كان يظهر،
   مع إبقاء ارتفاع الحقل ومساحة النقر مريحين للاستخدام الطويل.

   محصور في الشاشات الكبيرة عمداً: دون 768px تتكفّل قواعد
   brand-admin.css بالضغط، وتُبقي حقول الإدخال بـ 16px حتى لا يقرّب
   iOS الصفحة عند التركيز على حقل.
===================================================== */
@media (min-width: 769px) {

    /* ── الهيكل: شريط جانبي أنحف ومحتوى أوسع ───────────────── */
    .admin-sidebar { width: 194px; }
    .admin-main { margin-right: 194px; }

    .sidebar-header { padding: 10px 13px; gap: 8px; }
    .sidebar-logo { height: 27px; }
    .sidebar-header span { font-size: .88rem; }

    .nav-section { padding: 9px 13px 4px; font-size: .62rem; }
    .nav-item { padding: 7px 13px; gap: 9px; font-size: .84rem; }
    .nav-item svg { width: 17px; height: 17px; }

    .admin-header { padding: 11px 20px; }
    .admin-header h1 { font-size: 1.16rem; }
    .admin-content { padding: 17px 20px; }

    /* ── بطاقات المؤشرات ───────────────────────────────────── */
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
        gap: 13px;
        margin-bottom: 17px;
    }

    .stat-card { padding: 14px 16px; gap: 11px; }
    .stat-icon { width: 44px; height: 44px; border-radius: 10px; }
    .stat-icon svg { width: 21px; height: 21px; }
    .stat-number { font-size: 1.42rem; }
    .stat-label { font-size: .78rem; }
    .stat-card .stat-sub { font-size: .69rem; }

    /* ── اللوحات والشبكات ──────────────────────────────────── */
    .panel, .chart-card, .dashboard-section { padding: 17px; margin-bottom: 17px; }
    .panel > h3, .chart-card .chart-head h3 { font-size: .95rem; }
    .panel > h3 { margin-bottom: 13px; padding-bottom: 9px; }
    .chart-head { margin-bottom: 13px; }

    .grid-2, .grid-half { gap: 17px; }

    /* ثلاثة أعمدة على الشاشات العريضة — البطاقات الجانبية تبقى مقروءة */
    @media (min-width: 1500px) {
        .grid-2 { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); }
    }

    .page-header { margin-bottom: 15px; }
    .page-header h2 { font-size: 1.14rem; }
    .back-link { margin-bottom: 11px; font-size: .84rem; }

    /* ── الأزرار ───────────────────────────────────────────── */
    .btn-primary, .btn-secondary { padding: 7px 15px; font-size: .84rem; gap: 6px; }
    .btn-primary svg, .btn-secondary svg { width: 15px; height: 15px; }

    /* ── الجداول: أكثر صفوف في الطية دون خنق النص ──────────── */
    .content-table th,
    .content-table td { padding: 8px 11px; }
    .content-table th { font-size: .78rem; }
    .content-table td { font-size: .84rem; }
    .content-table .muted { font-size: .72rem; }

    .status-badge,
    .type-badge-t { padding: 3px 9px; font-size: .7rem; }
    .agreement-badge { padding: 2px 8px; font-size: .68rem; }

    /* أزرار الإجراءات أطول من نص الصف، فهي التي تحدّد ارتفاعه. حشو رأسي
       أقل لخليتها وحدها يقصّر الصف دون المساس بمساحة النقر. */
    .actions .action-btn { width: 27px; height: 27px; }
    .actions .action-btn svg { width: 14px; height: 14px; }
    .content-table td.actions { padding-top: 4px; padding-bottom: 4px; }

    /* ── النماذج: الحقل أقصر والتسمية ألصق به ──────────────── */
    .content-form { padding: 17px; }
    .form-grid { gap: 17px; }
    .form-section { padding: 14px; }
    .form-section h3 { font-size: .92rem; margin-bottom: 12px; }

    .form-group { margin-bottom: 13px; }
    .form-group label { margin-bottom: 4px; font-size: .82rem; }

    .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    .form-group textarea,
    .form-group select,
    .filter-bar input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    .filter-bar select {
        padding: 7px 10px;
        font-size: .86rem;
        border-width: 1px;
    }

    /* المتصفّح يعطي <select> صندوقاً أعلى من <input> عند نفس الحشو، فتتفاوت
       أطوال الحقول في الصف الواحد. ارتفاع صريح موحّد يسوّي الصف كله. */
    .form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    .form-group select,
    .filter-bar input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    .filter-bar select {
        height: 34px;
        line-height: 1.2;
    }

    /* القائمة القابلة للبحث تتبع كثافة بقية الحقول وارتفاعها. */
    .ss-toggle { padding: 7px 10px; font-size: .86rem; border-width: 1px; height: 34px; }
    .ss-option { padding: 6px 9px; font-size: .83rem; }
    .ss-search { font-size: .82rem; padding: 6px 9px; }
    .ss-list { max-height: 210px; }

    .form-group textarea { min-height: 72px; }
    .form-group small { margin-top: 3px; font-size: .74rem; }
    .form-actions { margin-top: 15px; gap: 8px; }

    /* ── شريط الفلاتر: حقول أضيق فتتّسع الصفحة لعدد أكبر ───── */
    .filter-bar { padding: 14px; margin-bottom: 15px; }
    .filter-grid { grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); gap: 10px; }
    .filter-grid .form-group label { font-size: .76rem; }
    .filter-actions { margin-top: 13px; padding-top: 13px; gap: 8px; }

    /* ── شريط المجاميع ─────────────────────────────────────── */
    .totals-strip {
        grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
        margin-bottom: 15px;
    }
    .totals-strip > div { padding: 11px 13px; }
    .totals-strip .label { font-size: .71rem; margin-bottom: 2px; }
    .totals-strip .value { font-size: 1.01rem; }

    /* ── بطاقة المستحق ─────────────────────────────────────── */
    .due-panel { padding: 17px; margin-bottom: 17px; }
    .due-panel h3 { font-size: .85rem; }
    .due-panel .amount { font-size: 1.85rem; }
    .due-panel .meta { font-size: .76rem; }
    .due-panel .actions-row { margin-top: 13px; gap: 8px; }
    .due-panel .btn-white { padding: 7px 16px; font-size: .81rem; }
    .due-panel .btn-ghost { padding: 5px 14px; font-size: .81rem; }

    /* ── قوائم المفتاح/القيمة والتوزيع ─────────────────────── */
    .kv-list li { padding: 7px 0; font-size: .84rem; }
    .breakdown-list li { margin-bottom: 11px; }
    .breakdown-list .row { font-size: .8rem; margin-bottom: 4px; }
    .progress-track { height: 6px; }

    /* ── منتقي نوع العملية ─────────────────────────────────── */
    .type-picker { grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); gap: 9px; }
    .type-picker label { padding: 9px 12px; border-width: 1px; }
    .type-picker .t-name { font-size: .85rem; }
    .type-picker .t-hint { font-size: .69rem; margin-top: 2px; }

    /* ── تبويبات وتنبيهات وترقيم ───────────────────────────── */
    .tab-links { gap: 6px; margin-bottom: 15px; }
    .tab-links a { padding: 6px 14px; font-size: .8rem; }

    .flash { padding: 10px 14px; margin-bottom: 14px; font-size: .84rem; }
    .flash svg { width: 17px; height: 17px; }
    .field-errors { padding: 11px 14px; margin-bottom: 14px; font-size: .83rem; }

        .pager { margin-top: 17px; gap: 5px; }
    .pager a, .pager span { min-width: 32px; height: 32px; padding: 0 10px; font-size: .8rem; }

    .toolbar { gap: 8px; margin-bottom: 14px; }

    /* ── الخطط والحالات الفارغة ────────────────────────────── */
    .plan-grid { grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 14px; }
    .plan-card { padding: 17px; }
    .plan-card h4 { font-size: 1.02rem; }
    .plan-card .price { font-size: 1.6rem; }
    .plan-card .desc { font-size: .79rem; margin: 8px 0 12px; }
    .plan-card ul { font-size: .79rem; margin-bottom: 13px; }
    .plan-card ul li { padding: 4px 0; }

    .empty-state { padding: 28px 20px; }
    .empty-state svg { width: 46px; height: 46px; }
    .empty-state p { font-size: .87rem; margin-bottom: 14px; }
}