/* ============================================================================
   نظام الحسابات العامة — الشكل العام (Sidebar على اليمين + طابع بصري موحّد)

   فلسفة التصميم: هوية واحدة متكررة في كل شاشة (نفس الألوان، نفس الانحناءات،
   نفس المسافات) بدل عناصر Bootstrap افتراضية متفرقة — الهدف "محترف وجميل وبسيط":
   لون مميز واحد (الذهبي) للأفعال الأساسية، درجات رمادية هادئة للباقي، ظلال
   خفيفة بدل حدود تقيلة، ومساحات بيضاء كافية. كل التعديلات هنا CSS فقط، بتنطبق
   تلقائيًا على كل شاشات النظام لأنها كلها بتستخدم نفس _Layout / _AuthLayout.
   ============================================================================ */

:root {
    --sidebar-width: 264px;
    --sidebar-bg-start: #0f1b2e;
    --sidebar-bg-end: #17293f;
    --sidebar-text: #a9b6cc;
    --sidebar-text-strong: #ffffff;
    --sidebar-active-bg: rgba(205, 164, 73, .16);

    --accent: #cda449;
    --accent-dark: #b6902f;
    --accent-light: #e6c579;
    --accent-ink: #2a2110;
    --accent-soft: rgba(205, 164, 73, .12);

    --ink: #1f2937;
    --ink-muted: #6b7280;
    --page-bg: #f2f4f8;
    --card-border: #eaecf1;
    --card-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 24px -14px rgba(15, 23, 42, .18);
    --card-shadow-hover: 0 4px 10px rgba(15, 23, 42, .06), 0 18px 34px -16px rgba(15, 23, 42, .22);

    --success: #1a9c6e;
    --success-soft: rgba(26, 156, 110, .1);
    --danger: #d0453a;
    --danger-soft: rgba(208, 69, 58, .1);
    --warning: #b8791c;
    --warning-soft: rgba(184, 121, 28, .12);
    --info: #2f6fb0;
    --info-soft: rgba(47, 111, 176, .1);
    --secondary: #5b6472;
    --secondary-soft: rgba(91, 100, 114, .1);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --transition: .16s ease;
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    font-family: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif;
    background: var(--page-bg);
    color: var(--ink);
}

a {
    text-decoration: none;
}

::selection {
    background: var(--accent-soft);
    color: var(--accent-ink);
}

/* ----------------------------------------------------------------------------
   الهيكل العام: Sidebar ثابت + منطقة المحتوى. بما إن الصفحة dir="rtl"، أول
   عنصر في ترتيب الـ HTML (الـ Sidebar) بيظهر تلقائيًا على اليمين.
---------------------------------------------------------------------------- */
.app-shell {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
}

.sidebar {
    flex: 0 0 var(--sidebar-width);
    width: var(--sidebar-width);
    background: linear-gradient(180deg, var(--sidebar-bg-start), var(--sidebar-bg-end));
    color: var(--sidebar-text);
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.5rem 1.25rem 1.1rem;
}

.sidebar-brand .brand-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 11px;
    background: linear-gradient(150deg, var(--accent-light), var(--accent-dark));
    color: var(--accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    box-shadow: 0 4px 10px -2px rgba(0, 0, 0, .35);
}

.sidebar-brand .brand-title {
    color: var(--sidebar-text-strong);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.25;
}

.sidebar-brand .brand-subtitle {
    font-size: .7rem;
    color: var(--sidebar-text);
    opacity: .8;
}

.sidebar-section-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(169, 182, 204, .55);
    padding: 1rem 1.25rem .4rem;
    transition: color var(--transition);
}

.sidebar-section-label:hover {
    color: rgba(255, 255, 255, .85);
}

.sidebar-section-label .toggle-icon {
    font-size: .7rem;
    transition: transform var(--transition);
}

.sidebar-section-label.collapsed .toggle-icon {
    transform: rotate(-90deg);
}

/* .hidden عبر السمة [hidden] بتاعة المتصفح نفسها — مفيش عرض إضافي مطلوب هنا،
   بس بنتأكد إن الطي مالوش أي مسافة متبقية تحته. */
.sidebar-group-links[hidden] {
    display: none;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    padding-bottom: .5rem;
}

.sidebar-nav a.nav-link-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem 1.25rem;
    color: var(--sidebar-text);
    font-size: .9rem;
    border-right: 3px solid transparent;
    transition: background var(--transition), color var(--transition);
}

.sidebar-nav a.nav-link-item i {
    font-size: 1rem;
    width: 1.1rem;
    text-align: center;
    opacity: .8;
}

.sidebar-nav a.nav-link-item:hover {
    background: rgba(255, 255, 255, .06);
    color: var(--sidebar-text-strong);
}

.sidebar-nav a.nav-link-item.active {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-text-strong);
    border-right-color: var(--accent);
    font-weight: 600;
}

.sidebar-nav a.nav-link-item.active i {
    color: var(--accent);
    opacity: 1;
}

.sidebar-footer {
    margin-top: auto;
    padding: 1rem 1.25rem 1.4rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .85rem;
}

.avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    background: linear-gradient(150deg, var(--accent-light), var(--accent-dark));
    color: var(--accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .85rem;
}

.sidebar-user .user-name {
    color: var(--sidebar-text-strong);
    font-size: .85rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mobile offcanvas sidebar reuses the same look as the desktop one */
.sidebar-offcanvas {
    background: linear-gradient(180deg, var(--sidebar-bg-start), var(--sidebar-bg-end));
    color: var(--sidebar-text);
    width: var(--sidebar-width);
}

.sidebar-offcanvas .offcanvas-header {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* ----------------------------------------------------------------------------
   منطقة المحتوى
---------------------------------------------------------------------------- */
.main-area {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1.75rem;
    background: #ffffff;
    border-bottom: 1px solid var(--card-border);
    position: sticky;
    top: 0;
    z-index: 20;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.topbar-user .user-name {
    font-size: .85rem;
    font-weight: 600;
    color: #374151;
}

.content-wrap {
    padding: 1.5rem 1.75rem 3rem;
}

.content-card {
    background: #ffffff;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--card-shadow);
    padding: 1.5rem 1.6rem;
}

.content-card h1 {
    position: relative;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ink);
    padding-right: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: .85rem;
    border-bottom: 1px solid var(--card-border);
}

.content-card h1::before {
    content: "";
    position: absolute;
    right: 0;
    top: .1em;
    bottom: 1.05em;
    width: 4px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--accent-light), var(--accent-dark));
}

/* Reusable "عنوان الشاشة + زرار فعل رئيسي" — نفس الشكل اللي كان متكرر يدويًا
   (d-flex justify-content-between align-items-center mb-4) في كل شاشات Index،
   دلوقتي كلاس واحد بيدي نفس الترتيب مع مسافة سفلية موحّدة. */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.page-header h1 {
    margin-bottom: 0;
}

/* صندوق اختيار الأدوار المتعددة (Users/Create, Users/Edit) */
.role-picker {
    border: 1px solid #d9dde5;
    border-radius: var(--radius-sm);
    padding: .75rem 1rem;
    max-height: 240px;
    overflow-y: auto;
    background: #fafbfc;
}

.role-picker .form-check {
    margin-bottom: .35rem;
}

.role-picker .form-check:last-child {
    margin-bottom: 0;
}

/* ----------------------------------------------------------------------------
   حالة "مفيش بيانات لسه" — بديل أنيق لتنبيه alert-info الجاف في شاشات الـ Index
---------------------------------------------------------------------------- */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--ink-muted);
}

.empty-state i {
    font-size: 2.25rem;
    color: var(--accent);
    opacity: .7;
    display: block;
    margin-bottom: .75rem;
}

.empty-state p {
    margin-bottom: 1rem;
    font-size: .95rem;
}

/* ----------------------------------------------------------------------------
   الأزرار — لون واحد موحّد (الذهبي) للفعل الأساسي في كل شاشات النظام بدل
   الأزرق الافتراضي لبووتستراب، عشان الهوية البصرية تبقى متسقة مع الـ Sidebar.
---------------------------------------------------------------------------- */
.btn {
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: .9rem;
    padding: .5rem 1.05rem;
    transition: filter var(--transition), box-shadow var(--transition), transform var(--transition);
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: var(--accent-dark);
    --bs-btn-hover-border-color: var(--accent-dark);
    --bs-btn-active-bg: var(--accent-dark);
    --bs-btn-active-border-color: var(--accent-dark);
    --bs-btn-disabled-bg: var(--accent);
    --bs-btn-disabled-border-color: var(--accent);
    color: var(--accent-ink);
    box-shadow: 0 2px 6px -1px rgba(205, 164, 73, .5);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    color: var(--accent-ink) !important;
}

.btn-outline-primary {
    --bs-btn-color: var(--accent-dark);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: var(--accent);
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-hover-color: var(--accent-ink);
    --bs-btn-active-bg: var(--accent);
    --bs-btn-active-border-color: var(--accent);
    --bs-btn-active-color: var(--accent-ink);
}

.btn-sm {
    font-size: .8rem;
    padding: .35rem .75rem;
}

.btn-link {
    font-weight: 600;
}

/* ----------------------------------------------------------------------------
   الفورمز
---------------------------------------------------------------------------- */
.form-label {
    font-weight: 600;
    font-size: .85rem;
    color: #374151;
    margin-bottom: .4rem;
}

.form-control, .form-select {
    border-radius: var(--radius-sm);
    border-color: #d9dde5;
    padding: .55rem .85rem;
    font-size: .92rem;
}

.form-control:focus, .form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 .2rem var(--accent-soft);
}

.form-control::placeholder {
    color: #a3aab7;
}

.form-text {
    font-size: .8rem;
}

/* Tom Select يبني عنصره الخاص فوق الـ select الأصلي — نديله نفس شكل form-control */
.ts-wrapper.single .ts-control, .ts-wrapper.multi .ts-control {
    border-radius: var(--radius-sm);
    border-color: #d9dde5;
    padding: .5rem .85rem;
}

.ts-wrapper.focus .ts-control {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 .2rem var(--accent-soft) !important;
}

.ts-dropdown .active {
    background: var(--accent-soft) !important;
    color: var(--accent-ink) !important;
}

/* ----------------------------------------------------------------------------
   الجداول — أخف من جدول بووتستراب الافتراضي (بدون حدود تقيلة)، مع تظليل بسيط
   عند تمرير الماوس على الصف.
---------------------------------------------------------------------------- */
.table {
    --bs-table-border-color: var(--card-border);
    font-size: .92rem;
}

.table td, .table th {
    vertical-align: middle;
    padding: .75rem .6rem;
}

.table thead th {
    background: #f8f9fb;
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6b7280;
    border-bottom: 2px solid var(--card-border);
    white-space: nowrap;
}

.table-hover > tbody > tr:hover > * {
    background-color: #faf7f0;
}

.table > :not(caption) > * > * {
    box-shadow: none;
}

/* ----------------------------------------------------------------------------
   التنبيهات — شريط لوني على الجنب بدل خلفية بووتستراب الصريحة، بيوحّد لغة
   "الشريط الملوّن" نفسها المستخدمة جنب عنوان كل شاشة (content-card h1::before).
---------------------------------------------------------------------------- */
.alert {
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    border-right-width: 4px;
    font-size: .9rem;
    padding: .85rem 1.1rem;
}

.alert-success {
    background: var(--success-soft);
    border-color: var(--success);
    color: #0f6b4c;
}

.alert-danger {
    background: var(--danger-soft);
    border-color: var(--danger);
    color: #9a2f26;
}

.alert-warning {
    background: var(--warning-soft);
    border-color: var(--warning);
    color: #8a5a13;
}

.alert-info {
    background: var(--info-soft);
    border-color: var(--info);
    color: #1f4f7a;
}

.alert-secondary {
    background: #f3f4f6;
    border-color: #cbd0d8;
    color: #4b5563;
}

/* ----------------------------------------------------------------------------
   الشارات (Badges) — شكل "pill" هادئ بخلفية شفافة بدل الألوان الصريحة
   الافتراضية، نفس فلسفة التنبيهات فوق.
---------------------------------------------------------------------------- */
.badge {
    font-weight: 600;
    font-size: .72rem;
    padding: .4em .75em;
    border-radius: 50rem;
}

.badge.bg-success {
    background: var(--success-soft) !important;
    color: var(--success) !important;
}

.badge.bg-danger {
    background: var(--danger-soft) !important;
    color: var(--danger) !important;
}

.badge.bg-warning {
    background: var(--warning-soft) !important;
    color: var(--warning) !important;
}

.badge.bg-info {
    background: var(--info-soft) !important;
    color: var(--info) !important;
}

.badge.bg-secondary {
    background: var(--secondary-soft) !important;
    color: var(--secondary) !important;
}

/* ----------------------------------------------------------------------------
   بطاقات لوحة التحكم (Views/Home/Index.cshtml وأي بطاقة .card عادية) — رفعة
   خفيفة عند الملامسة بالماوس عشان تحس إنها قابلة للنقر، بدل بطاقة بووتستراب
   المسطحة.
---------------------------------------------------------------------------- */
.card {
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    box-shadow: var(--card-shadow);
    transition: box-shadow var(--transition), transform var(--transition);
}

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

.card .card-title {
    font-size: 1rem;
    font-weight: 700;
}

.card .card-title i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent-dark) !important;
    font-size: 1rem;
    margin-left: .1rem;
}

.card .card-text {
    color: var(--ink-muted);
    font-size: .87rem;
}

/* ----------------------------------------------------------------------------
   شريط أزرار "طباعة / تصدير Excel" فوق كل جدول قوائم أو تقرير
---------------------------------------------------------------------------- */
.table-toolbar {
    display: flex;
    gap: .5rem;
    margin-bottom: .85rem;
}

/* ----------------------------------------------------------------------------
   شجرة الصلاحيات (Roles/Create, Roles/Edit) — مجموعة (وحدة) قابلة للطي/العرض
   مع checkbox أب بيحدد/يلغي كل الصلاحيات اللي تحته، وبينعكس تلقائيًا لو حددت
   بعض الصلاحيات بس (indeterminate). المنطق التفاعلي في gaInitPermissionTree
   (_Layout.cshtml)، والكلاسات هنا شكلية بس.
---------------------------------------------------------------------------- */
.perm-tree-group {
    border: 1px solid var(--card-border);
    border-radius: var(--radius-sm);
    margin-bottom: .6rem;
    overflow: hidden;
}

.perm-tree-node {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .75rem;
    background: #f8f9fb;
}

.perm-tree-node .form-check {
    margin-bottom: 0;
}

.perm-tree-node .form-check-label {
    font-weight: 700;
    font-size: .92rem;
}

.perm-tree-toggle {
    border: none;
    background: transparent;
    color: var(--ink-muted);
    padding: 0;
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    transition: background var(--transition);
}

.perm-tree-toggle:hover {
    background: var(--accent-soft);
    color: var(--accent-dark);
}

.perm-tree-toggle i {
    transition: transform var(--transition);
}

.perm-tree-toggle.collapsed i {
    transform: rotate(-90deg);
}

.perm-tree-children {
    padding: .65rem 2.35rem .65rem .75rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .35rem .75rem;
    border-top: 1px solid var(--card-border);
}

.perm-tree-leaf {
    margin-bottom: 0 !important;
}

.perm-tree-leaf .form-check-label {
    font-size: .87rem;
}

/* ----------------------------------------------------------------------------
   الطباعة: نظافة الصفحة المطبوعة — من غير القائمة الجانبية/الشريط العلوي/أي
   زرار فعل (no-print)، من غير ظل أو حواف بطاقة، والجدول ياخد العرض كله.
---------------------------------------------------------------------------- */
@media print {
    .sidebar, .sidebar-offcanvas, .topbar, .no-print, .alert {
        display: none !important;
    }

    body, .app-shell, .main-area, .content-wrap {
        background: #fff !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
    }

    .content-card {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }

    .table {
        font-size: .8rem;
    }

    a {
        color: inherit !important;
    }
}

/* عنوان مجموعة البطاقات (مثال: "المحاسبة" فوق صف البطاقات) */
.section-label {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-muted);
}

@media (max-width: 991.98px) {
    .content-wrap {
        padding: 1.25rem 1rem 2.5rem;
    }

    .content-card {
        padding: 1.1rem;
    }

    .topbar {
        padding: .65rem 1rem;
    }
}

/* ----------------------------------------------------------------------------
   شاشات الدخول واختيار الشركة (_AuthLayout) — بطاقة واحدة في نص الصفحة، من غير
   الـ sidebar بتاع بقية النظام، لأن مفيش شركة/مستخدم متحدد لسه وقت ما المستخدم بيوصلها.
---------------------------------------------------------------------------- */
.auth-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 15% 15%, rgba(205, 164, 73, .18), transparent 45%),
        linear-gradient(160deg, var(--sidebar-bg-start), var(--sidebar-bg-end));
    padding: 1.5rem;
}

.auth-shell {
    width: 100%;
    max-width: 440px;
}

.auth-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 2.1rem 1.9rem;
    box-shadow: 0 25px 60px -20px rgba(0, 0, 0, .5);
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.6rem;
}

.auth-brand .brand-icon {
    width: 46px;
    height: 46px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(150deg, var(--accent-light), var(--accent-dark));
    color: var(--accent-ink);
    font-size: 1.3rem;
    flex: none;
    box-shadow: 0 4px 10px -2px rgba(205, 164, 73, .55);
}

.auth-brand .brand-title {
    font-weight: 700;
    color: var(--ink);
    line-height: 1.3;
}

.auth-brand .brand-subtitle {
    font-size: .8rem;
    color: var(--ink-muted);
}

.auth-card h1, .auth-card h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 1.1rem;
}

.auth-card .auth-hint {
    font-size: .85rem;
    color: var(--ink-muted);
    margin-bottom: 1.1rem;
}

.auth-card .auth-footer-link {
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--card-border);
    font-size: .875rem;
    text-align: center;
}