/* ============================================================
   نظام استملاك وإطفاء الأراضي - ملف الأنماط الرئيسي
   ============================================================ */

/* ─── متغيرات اللون ─── */
:root {
    --primary:       #2563eb;
    --primary-dark:  #1d4ed8;
    --primary-light: #dbeafe;
    --success:       #16a34a;
    --warning:       #d97706;
    --danger:        #dc2626;
    --info:          #0891b2;
    --sidebar-w:     260px;
    --sidebar-bg:    #0f172a;
    --sidebar-hover: #1e293b;
    --topbar-h:      60px;
    --body-bg:       #f1f5f9;
    --card-radius:   12px;
    --transition:    0.2s ease;
}

/* ─── أساسيات ─── */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: 'Tajawal', 'Segoe UI', sans-serif;
    background:  var(--body-bg);
    color:       #1e293b;
    direction:   rtl;
    margin:      0;
}

/* ─── تخطيط التطبيق ─── */
.app-wrapper {
    display: flex;
    min-height: 100vh;
}

/* ─── الشريط الجانبي ─── */
.sidebar {
    width:      var(--sidebar-w);
    min-height: 100vh;
    background: var(--sidebar-bg);
    position:   fixed;
    right:      0;
    top:        0;
    bottom:     0;
    display:    flex;
    flex-direction: column;
    z-index:    1000;
    overflow-y: auto;
}

.sidebar-header {
    display:    flex;
    align-items: center;
    gap:        12px;
    padding:    20px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.sidebar-logo {
    width:       44px;
    height:      44px;
    background:  var(--primary);
    border-radius: 10px;
    display:     flex;
    align-items: center;
    justify-content: center;
    font-size:   20px;
    color:       white;
    flex-shrink: 0;
}

.sidebar-title .title-main {
    display:     block;
    color:       white;
    font-weight: 700;
    font-size:   14px;
    line-height: 1.2;
}

.sidebar-title .title-sub {
    display:   block;
    color:     rgba(255,255,255,0.5);
    font-size: 12px;
}

.sidebar-nav {
    flex: 1;
    padding: 12px 8px;
}

.nav-section-label {
    color:        rgba(255,255,255,0.35);
    font-size:    11px;
    font-weight:  600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding:      6px 12px;
    margin-top:   8px;
}

.nav-item {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       10px 14px;
    border-radius: 8px;
    color:         rgba(255,255,255,0.7);
    text-decoration: none;
    font-size:     14px;
    font-weight:   500;
    margin-bottom: 2px;
    transition:    all var(--transition);
}

.nav-item:hover {
    background: var(--sidebar-hover);
    color: white;
}

.nav-item.active {
    background:  var(--primary);
    color:       white;
    font-weight: 600;
}

.nav-item i { font-size: 18px; width: 22px; text-align: center; }

.sidebar-footer {
    padding:       16px;
    border-top:    1px solid rgba(255,255,255,0.08);
    display:       flex;
    align-items:   center;
    gap:           10px;
}

.user-info {
    flex:     1;
    display:  flex;
    gap:      10px;
    align-items: center;
    color:    white;
    overflow: hidden;
}

.user-name {
    font-size:   13px;
    font-weight: 600;
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}

.user-role {
    font-size: 11px;
    color:     rgba(255,255,255,0.5);
}

.btn-logout {
    background: none;
    border:     1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    color:      rgba(255,255,255,0.6);
    padding:    8px 10px;
    cursor:     pointer;
    transition: all var(--transition);
}

.btn-logout:hover {
    background: rgba(220,38,38,0.3);
    border-color: rgba(220,38,38,0.5);
    color:      white;
}

/* ─── المحتوى الرئيسي ─── */
.main-content {
    margin-right: var(--sidebar-w);
    flex:         1;
    display:      flex;
    flex-direction: column;
    min-height:   100vh;
}

.topbar {
    height:       var(--topbar-h);
    background:   white;
    border-bottom: 1px solid #e2e8f0;
    display:      flex;
    align-items:  center;
    gap:          16px;
    padding:      0 24px;
    position:     sticky;
    top:          0;
    z-index:      100;
}

.btn-toggle-sidebar {
    background: none;
    border:     1px solid #e2e8f0;
    border-radius: 8px;
    padding:    6px 10px;
    cursor:     pointer;
    color:      #64748b;
    transition: all var(--transition);
    display:    none;
}

.topbar-breadcrumb {
    font-size: 14px;
    color:     #64748b;
}

.page-content {
    padding: 24px;
    flex:    1;
}

/* ─── رأس الصفحة ─── */
.page-header {
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap:     wrap;
    gap:           12px;
}

.page-title {
    margin: 0;
    font-weight: 700;
    font-size:   22px;
}

/* ─── بطاقات الإحصائيات ─── */
.stat-card {
    border-radius: var(--card-radius);
    padding:       20px;
    display:       flex;
    align-items:   center;
    gap:           16px;
    height:        100%;
}

.stat-blue   { background: linear-gradient(135deg,#2563eb,#1d4ed8); color:white; }
.stat-green  { background: linear-gradient(135deg,#16a34a,#15803d); color:white; }
.stat-orange { background: linear-gradient(135deg,#ea580c,#c2410c); color:white; }
.stat-purple { background: linear-gradient(135deg,#7c3aed,#6d28d9); color:white; }

.stat-icon {
    font-size:    32px;
    opacity:      0.85;
}

.stat-value {
    font-size:   28px;
    font-weight: 800;
    line-height: 1;
}

.stat-label {
    font-size: 13px;
    opacity:   0.85;
    margin-top: 4px;
}

/* ─── بطاقات معلومات القطعة ─── */
.info-card {
    display:       flex;
    align-items:   center;
    gap:           14px;
    background:    white;
    border-radius: var(--card-radius);
    padding:       16px;
    box-shadow:    0 1px 3px rgba(0,0,0,0.07);
}

.info-icon {
    width:         46px;
    height:        46px;
    border-radius: 10px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     20px;
    flex-shrink:   0;
}

.info-label { font-size: 12px; color: #94a3b8; }
.info-value { font-size: 20px; font-weight: 700; }

/* ─── بطاقة الأقسام ─── */
.dept-icon {
    width:         42px;
    height:        42px;
    background:    var(--primary-light);
    color:         var(--primary);
    border-radius: 10px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-size:     20px;
    flex-shrink:   0;
}

/* ─── بطاقة الصور ─── */
.pic-card {
    border:        1px solid #e2e8f0;
    border-radius: 10px;
    padding:       12px;
    text-align:    center;
}

.pic-thumb {
    display:       flex;
    align-items:   center;
    justify-content: center;
    min-height:    120px;
    background:    #f8fafc;
    border-radius: 8px;
    overflow:      hidden;
    margin-bottom: 8px;
}

.pic-name { font-size: 12px; color: #64748b; }

/* ─── دائرة نسبة الصور ─── */
.progress-circle {
    position: relative;
    width:    140px;
    height:   140px;
    margin:   0 auto;
}

.circle-svg { width: 100%; height: 100%; }

.circle-label {
    position:  absolute;
    inset:     0;
    display:   flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    color:     var(--primary);
}

/* ─── Modals مخصصة ─── */
.modal-backdrop-custom {
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,0.45);
    z-index:    1040;
    backdrop-filter: blur(2px);
}

.modal-dialog-custom {
    position:   fixed;
    top:        50%;
    left:       50%;
    transform:  translate(-50%, -50%);
    z-index:    1050;
    width:      90%;
    max-width:  520px;
    animation:  modalIn 0.2s ease;
}

.modal-lg-custom { max-width: 700px; }

@keyframes modalIn {
    from { opacity: 0; transform: translate(-50%, -48%) scale(0.97); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.modal-content {
    border:        none;
    border-radius: 14px;
    overflow:      hidden;
}

.modal-header { padding: 16px 20px; }
.modal-body   { padding: 20px; }
.modal-footer { padding: 14px 20px; }

/* ─── صفحة تسجيل الدخول ─── */
.login-wrapper {
    min-height:     100vh;
    display:        flex;
    align-items:    center;
    justify-content: center;
    background:     linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
    padding:        20px;
}

.login-card {
    background:    white;
    border-radius: 18px;
    width:         100%;
    max-width:     440px;
    box-shadow:    0 20px 60px rgba(0,0,0,0.3);
    overflow:      hidden;
}

.login-header {
    background:  linear-gradient(135deg, var(--primary), var(--primary-dark));
    color:       white;
    text-align:  center;
    padding:     36px 30px 28px;
}

.login-icon {
    font-size:     52px;
    margin-bottom: 12px;
}

.login-header h3 {
    margin:      0 0 6px;
    font-weight: 700;
    font-size:   18px;
}

.login-header p { margin: 0; opacity: 0.85; font-size: 13px; }

.login-body   { padding: 28px 30px; }
.login-footer {
    background: #f8fafc;
    padding:    14px;
    text-align: center;
    border-top: 1px solid #e2e8f0;
}

/* ─── جداول ─── */
.table th { font-weight: 600; font-size: 13px; white-space: nowrap; }
.table td { font-size: 14px; }
.table-hover tbody tr:hover { background: #f8fafc; }

/* ─── Bootstrap overrides ─── */
.card {
    border:        1px solid #e2e8f0;
    border-radius: var(--card-radius);
}

.card-header {
    padding:       14px 20px;
    border-radius: var(--card-radius) var(--card-radius) 0 0 !important;
}

.btn { border-radius: 8px; font-weight: 500; }
.btn-sm { font-size: 13px; }

.form-control, .form-select {
    border-radius: 8px;
    border-color:  #d1d5db;
    font-size:     14px;
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary);
    box-shadow:   0 0 0 3px rgba(37,99,235,0.15);
}

.badge { font-size: 12px; padding: 4px 10px; border-radius: 6px; }

.alert { border-radius: 10px; border: none; font-size: 14px; }
.alert-sm { padding: 10px 14px; }

.nav-tabs .nav-link {
    color:         #64748b;
    font-weight:   500;
    border-radius: 8px 8px 0 0;
}

.nav-tabs .nav-link.active {
    color:       var(--primary);
    font-weight: 600;
}

/* ─── استجابة الشاشات الصغيرة ─── */
@media (max-width: 768px) {
    .sidebar {
        transform:  translateX(100%);
        transition: transform var(--transition);
    }

    .sidebar.open { transform: translateX(0); }

    .main-content { margin-right: 0; }

    .btn-toggle-sidebar { display: block; }

    .page-content { padding: 16px; }

    .stat-value { font-size: 22px; }
}