/*
   Shared Tracka Emerald Theme - Global Tech Redesign
   Standardized for Mobile-First Workflows
   Ref: Based on Tracka Driver UI Analysis
*/

:root {
    /* --- Base Palette (Light Mode Focus) --- */
    --tech-bg: #F3F4F6;           /* الخلفية الرمادية الفاتحة من الصورة */
    --tech-card: #FFFFFF;         /* خلفية البطاقات البيضاء */
    --tech-text: #111827;         /* لون النصوص الأساسي */
    --tech-border: #E5E7EB;       /* حدود البطاقات الخفيفة */
    
    /* --- Tracka Brand Colors (Emerald Deep) --- */
    --Tracka-primary: #008B5E;     /* الأخضر الزمردي العلوي */
    --Tracka-primary-dark: #005F41; /* الأخضر الغاباتي السفلي */
    --Tracka-emerald-glow: rgba(0, 139, 94, 0.25);
    --Tracka-primary-light: rgba(0, 139, 94, 0.05);

    /* --- Semantic Colors --- */
    --danger: #EF4444;            /* للرسائل التحذيرية وحالة "غير متصل" */
    --warning: #F59E0B;
    --success: #008B5E;

    /* --- Gradients (Identical to UI image) --- */
    --grad-emerald: linear-gradient(180deg, #008B5E 0%, #005F41 100%);
    --grad-header: linear-gradient(180deg, #008B5E 0%, #005F41 100%);

    /* --- Spacing & Radius --- */
    --radius-standard: 14px;
    --radius-large: 20px;
    --tech-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* --- Global Elements Redesign --- */

body {
    background-color: var(--tech-bg);
    color: var(--tech-text);
    margin: 0;
    font-family: 'Tajawal', sans-serif;
}

/* Header UI: المطلب الرئيسي بجعل الهيدر بنفس لون الأزرار */
header, .app-header, .navbar-Tracka {
    background: var(--grad-header) !important;
    color: white !important;
    padding: 15px 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Card Styling: محاكاة بطاقات البيانات في الصورة */
.card-tech-light {
    background: var(--tech-card);
    border: 1px solid var(--tech-border);
    border-radius: var(--radius-standard);
    box-shadow: var(--tech-shadow);
    padding: 16px;
    margin-bottom: 12px;
}

/* Primary Button: محاكاة زر "تفعيل وضع العمل" */
.btn-Tracka, .btn-neon-emerald {
    background: var(--grad-emerald) !important;
    color: white !important;
    border: none;
    border-radius: var(--radius-standard);
    padding: 14px 20px;
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 95, 65, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-Tracka:active {
    transform: scale(0.97);
    filter: brightness(0.9);
}

/* Outline Button: محاكاة زر "إصلاح استلام الإشعارات" */
.btn-outline-Tracka {
    background: transparent !important;
    border: 1.5px solid var(--Tracka-primary) !important;
    color: var(--Tracka-primary) !important;
    border-radius: var(--radius-standard);
    padding: 12px 20px;
    font-weight: 600;
    transition: background 0.3s ease;
}

.btn-outline-Tracka:hover {
    background: var(--Tracka-primary-light) !important;
}

/* Status Badges: محاكاة حالة "غير متصل" */
.status-indicator {
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.status-offline {
    background: #FEE2E2;
    color: #DC2626;
}

/* --- Phosphor Icon Refinement --- */
i.ph {
    font-size: 1.4rem;
    vertical-align: middle;
}

.neon-icon-emerald {
    color: var(--Tracka-primary) !important;
}

/* RTL Support for Tajawal */
[dir="rtl"] {
    font-family: 'Tajawal', sans-serif;
    letter-spacing: 0;
}

/* Utility for stats (مثل الرصيد وإجمالي الرحلات) */
.stat-value {
    color: var(--Tracka-primary);
    font-weight: 800;
    font-size: 1.2rem;
}

.stat-label {
    color: #6B7280;
    font-size: 0.85rem;
}