/**
 * ثيم بصري للجوال — اختياري
 * للرجوع: احذف ربط هذا الملف من index.html
 */

@media (max-width: 768px) {
    /* ─── ألوان الجوال ─── */
    body {
        background: linear-gradient(180deg, #071525 0%, #0a1f33 120px, #0c1929 100%);
    }

    body.light-mode {
        background: linear-gradient(180deg, #e8f4fc 0%, #f0f7fb 140px, #f8fafc 100%);
    }

    /* ─── البطاقات ─── */
    .card {
        border-radius: 16px !important;
        border: 1px solid rgba(20, 184, 166, 0.18) !important;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22) !important;
        background: linear-gradient(145deg, rgba(16, 36, 58, 0.92) 0%, rgba(12, 28, 46, 0.96) 100%) !important;
    }

    body.light-mode .card {
        background: linear-gradient(145deg, #ffffff 0%, #f8fcff 100%) !important;
        border-color: rgba(13, 148, 136, 0.2) !important;
        box-shadow: 0 6px 22px rgba(13, 148, 136, 0.1) !important;
    }

    .card-header h2 {
        color: #5eead4;
    }

    body.light-mode .card-header h2 {
        color: #0f766e;
    }

    .card-header h2 i {
        opacity: 0.95;
    }

    /* ─── الهيدر ─── */
    .app-header {
        border-radius: 18px !important;
        border: 1px solid rgba(45, 212, 191, 0.22) !important;
        background: linear-gradient(135deg, rgba(8, 32, 52, 0.98) 0%, rgba(10, 42, 64, 0.98) 100%) !important;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28) !important;
    }

    body.light-mode .app-header {
        background: linear-gradient(135deg, #ffffff 0%, #f0fdfa 100%) !important;
        border-color: rgba(13, 148, 136, 0.25) !important;
        box-shadow: 0 6px 20px rgba(13, 148, 136, 0.12) !important;
    }

    .logo-area h1 {
        color: #ccfbf1;
    }

    body.light-mode .logo-area h1 {
        color: #134e4a;
    }

    .app-version-badge {
        background: rgba(45, 212, 191, 0.15) !important;
        border-color: rgba(45, 212, 191, 0.35) !important;
        color: #5eead4 !important;
    }

    body.light-mode .app-version-badge {
        background: rgba(13, 148, 136, 0.1) !important;
        color: #0f766e !important;
    }

    .user-badge {
        background: rgba(45, 212, 191, 0.1);
        border: 1px solid rgba(45, 212, 191, 0.25);
        border-radius: 12px;
    }

    body.light-mode .user-badge {
        background: rgba(13, 148, 136, 0.08);
        border-color: rgba(13, 148, 136, 0.2);
    }

    /* ─── الأزرار ─── */
    .btn-primary {
        background: linear-gradient(135deg, #0d9488 0%, #14b8a6 55%, #2dd4bf 100%) !important;
        border: none !important;
        box-shadow: 0 4px 14px rgba(13, 148, 136, 0.35) !important;
        border-radius: 12px !important;
        font-weight: 700;
    }

    .btn-secondary {
        border-radius: 12px !important;
        border-color: rgba(45, 212, 191, 0.3) !important;
    }

    .btn-excel-download {
        background: linear-gradient(135deg, #0369a1 0%, #0ea5e9 100%) !important;
        box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3) !important;
        border-radius: 12px !important;
    }

    /* ─── الحقول ─── */
    .filter-input,
    .filter-select,
    select,
    input:not([type="checkbox"]):not([type="radio"]),
    textarea {
        border-radius: 12px !important;
        border-color: rgba(45, 212, 191, 0.25) !important;
    }

    .filter-input:focus,
    .filter-select:focus,
    select:focus,
    input:focus,
    textarea:focus {
        border-color: #14b8a6 !important;
        box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.22) !important;
    }

    body.light-mode .filter-input,
    body.light-mode .filter-select,
    body.light-mode select,
    body.light-mode input:not([type="checkbox"]):not([type="radio"]),
    body.light-mode textarea {
        background: #fff !important;
        border-color: rgba(13, 148, 136, 0.28) !important;
    }

    /* ─── بطاقات الإحصائيات ─── */
    .kpi-card {
        border-radius: 14px;
        border-color: rgba(45, 212, 191, 0.2);
        background: linear-gradient(145deg, rgba(13, 148, 136, 0.12) 0%, rgba(8, 32, 52, 0.5) 100%);
    }

    .kpi-card .kpi-value {
        color: #5eead4;
    }

    body.light-mode .kpi-card {
        background: linear-gradient(145deg, #f0fdfa 0%, #fff 100%);
    }

    body.light-mode .kpi-card .kpi-value {
        color: #0f766e;
    }

    .fwh-stat,
    .feed-hero-stat,
    .hr-hero-stat,
    .kpi-hero-stat,
    .kpi-mini-card {
        border-radius: 12px;
    }

    /* ─── تسجيل الدخول ─── */
    .login-card {
        border: 1px solid rgba(45, 212, 191, 0.25) !important;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35) !important;
        background: linear-gradient(160deg, rgba(12, 32, 52, 0.95) 0%, rgba(8, 24, 40, 0.98) 100%) !important;
    }

    body.light-mode .login-card {
        background: linear-gradient(160deg, #fff 0%, #f0fdfa 100%) !important;
        border-color: rgba(13, 148, 136, 0.22) !important;
    }

    .login-btn {
        background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%) !important;
        box-shadow: 0 6px 18px rgba(13, 148, 136, 0.4) !important;
    }

    /* ─── الجداول ─── */
    .table-wrapper,
    .fwh-table-wrap,
    .field-sheet-table-wrap,
    .users-table-wrapper {
        border-radius: 12px;
        border-color: rgba(45, 212, 191, 0.18);
    }

    /* ─── الصلاحيات ─── */
    .permissions-block {
        border-color: rgba(45, 212, 191, 0.22) !important;
        background: rgba(13, 148, 136, 0.08) !important;
    }

    .permissions-block-title {
        color: #2dd4bf !important;
    }

    body.light-mode .permissions-block-title {
        color: #0f766e !important;
    }

    .perm-check {
        border-color: rgba(45, 212, 191, 0.15);
    }

    /* ─── شريط التنقل ─── */
    .app-header #mainNav {
        background: rgba(13, 148, 136, 0.1) !important;
        border-color: rgba(45, 212, 191, 0.2) !important;
    }

    body.light-mode .app-header #mainNav {
        background: rgba(13, 148, 136, 0.06) !important;
    }

    .app-header #mainNav .nav-tile.active {
        box-shadow: 0 4px 14px rgba(13, 148, 136, 0.35) !important;
    }

    /* ─── تنبيهات وبانرات ─── */
    .excel-central-banner,
    .field-sheet-info-banner--compact,
    .share-link-box {
        border-radius: 12px;
    }

    .connection-status-bar {
        border-radius: 10px;
    }
}

/* وضع التطبيق المثبّت (PWA) — iPhone و Android */
@media (max-width: 768px) and (display-mode: standalone) {
    .app-header {
        padding-top: calc(14px + env(safe-area-inset-top, 0px)) !important;
    }

    body {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}