/* =========================================================
   مركز فيجن للأعمال — منصّة الإدارة الداخلية
   ملف الأنماط الرئيسي (RTL / Bootstrap 5 / Tajawal)
   ========================================================= */

:root {
    --primary-color: #721D48;
    --primary-hover: #581637;
    --secondary-color: #A8336A;
    --accent-color: #C2185B;
    --success-color: #27AE60;
    --warning-color: #F39C12;
    --danger-color: #E74C3C;
    --info-color: #3498DB;
    --light-bg: #f5f7fa;
    --card-radius: 14px;
    --sidebar-width: 280px;
    --sidebar-width-lg: 300px;
    --topbar-height: 64px;
    --font-family-sans-serif: 'Tajawal', sans-serif;
}

html, body { height: 100%; }
html, body { overflow-x: hidden; }

body {
    margin: 0;
    background-color: var(--light-bg);
    font-family: var(--font-family-sans-serif);
    color: #2c3e50;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-sans-serif);
    font-weight: 700;
}

.btn, input, select, textarea { font-family: var(--font-family-sans-serif); }

/* ===================== Sidebar ===================== */
.sidebar {
    position: fixed;
    top: 0; right: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: linear-gradient(180deg, #ffffff 0%, #eef2f6 100%);
    padding-top: 20px;
    box-shadow: 0 0 25px rgba(114, 29, 72, 0.1);
    z-index: 1000;
    overflow-y: auto;
    overflow-x: hidden;
    border-left: 1px solid rgba(114, 29, 72, 0.15);
    scrollbar-width: thin;
    scrollbar-color: rgba(114, 29, 72, 0.4) rgba(0, 0, 0, 0.05);
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); border-radius: 3px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(114, 29, 72, 0.4); border-radius: 3px; }

.sidebar-brand {
    display: flex; align-items: center; gap: 14px;
    padding: 6px 16px 16px 16px; margin-bottom: 4px;
}
.sidebar-brand .brand-logo-wrap {
    position: relative; width: 56px; height: 56px; border-radius: 14px;
    background: radial-gradient(circle at 30% 25%, #ffffff 0%, #f8fafc 100%);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px rgba(114, 29, 72, .18), inset 0 0 0 1px rgba(114, 29, 72, .06);
    flex-shrink: 0; overflow: hidden; padding: 6px;
}
.sidebar-brand .brand-logo-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sidebar-brand .brand-text { line-height: 1.25; min-width: 0; flex: 1; }
.sidebar-brand .brand-name {
    font-weight: 800; font-size: 15px; color: var(--primary-color);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-brand .brand-sub { font-size: 11px; color: #94a3b8; margin-top: 2px; font-weight: 500; }

.sidebar hr {
    border: none; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(114, 29, 72, 0.3), transparent);
    margin: 14px 0;
}
.sidebar-section-title {
    font-size: 11px; font-weight: 700; color: #95a5a6;
    text-transform: uppercase; padding: 10px 24px 6px; letter-spacing: 0.5px;
}
.sidebar .nav-link {
    color: #555; padding: 11px 18px; margin: 3px 14px; border-radius: 12px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 14px; font-weight: 500;
    display: flex; align-items: center; justify-content: flex-start; gap: 12px;
    text-align: right; direction: rtl;
}
.sidebar .nav-link i {
    width: 20px; text-align: center; font-size: 17px; flex-shrink: 0;
    order: 2; margin-right: auto; color: var(--primary-color); transition: transform 0.25s ease;
}
.sidebar .nav-link span { order: 1; flex: 1; text-align: right; }
.sidebar .nav-link:hover { background: rgba(114, 29, 72, 0.08); color: #1c2833; transform: translateX(-4px); }
.sidebar .nav-link:hover i { transform: scale(1.1); }
.sidebar .nav-link.active {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: #fff; box-shadow: 0 6px 14px rgba(114, 29, 72, 0.35);
}
.sidebar .nav-link.active i { color: #fff; }
.sidebar .nav-link .badge { margin-right: 6px; font-weight: 600; }

/* ===================== Topbar ===================== */
.navbar.app-navbar {
    background-color: #fff !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    margin-right: var(--sidebar-width);
    position: sticky; top: 0; z-index: 999;
    height: var(--topbar-height); padding: 0 1.25rem;
}
.app-navbar .navbar-brand { color: var(--primary-color) !important; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.app-navbar .navbar-brand-img { width: 36px; height: 36px; object-fit: contain; display: block; border-radius: 8px; background: #fff; padding: 2px; }

.user-chip {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
    border-radius: 999px; background: #f1f3f4; color: #2c3e50; font-weight: 500; font-size: 13px;
}
.user-chip .avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px;
}

/* ===================== Main ===================== */
.main-content { margin-right: var(--sidebar-width); padding: 24px; min-height: calc(100vh - var(--topbar-height)); max-width: 100%; overflow-x: hidden; }

.page-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.page-header h1 { margin: 0; font-size: 1.4rem; color: var(--primary-color); display: flex; align-items: center; gap: 10px; }
.page-header .breadcrumb { margin: 4px 0 0; font-size: 12px; background: transparent; padding: 0; }
.page-header .breadcrumb a { color: var(--secondary-color); text-decoration: none; }
.page-header .breadcrumb a:hover { text-decoration: underline; }
.page-header .breadcrumb .breadcrumb-item.active { color: #6c757d; }
.page-header .breadcrumb-item + .breadcrumb-item::before { color: #adb5bd; padding: 0 6px; }

/* ===================== Cards ===================== */
.card { border: none; border-radius: var(--card-radius); box-shadow: 0 4px 14px rgba(0,0,0,0.06); }
.card-header {
    background: #fff; border-bottom: 1px solid #eef0f2; padding: 14px 20px;
    border-top-left-radius: var(--card-radius) !important; border-top-right-radius: var(--card-radius) !important; font-weight: 600;
}

.stat-card { border-radius: var(--card-radius); padding: 20px; color: #fff; position: relative; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,0.10); transition: transform 0.25s ease, box-shadow 0.25s ease; display: block; text-decoration: none; }
a.stat-card:hover { color: #fff; }
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,0.15); }
.stat-card .stat-icon { position: absolute; left: 16px; bottom: 14px; font-size: 56px; opacity: 0.18; }
.stat-card .stat-label { font-size: 13px; opacity: 0.92; margin-bottom: 6px; }
.stat-card .stat-value { font-size: 26px; font-weight: 800; line-height: 1.2; }
.stat-card .stat-trend { font-size: 12px; margin-top: 6px; opacity: 0.9; }
.stat-card.bg-primary-grad { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); }
.stat-card.bg-success-grad { background: linear-gradient(135deg, #16A085, #27AE60); }
.stat-card.bg-warning-grad { background: linear-gradient(135deg, #E67E22, #F39C12); }
.stat-card.bg-danger-grad  { background: linear-gradient(135deg, #C0392B, #E74C3C); }
.stat-card.bg-info-grad    { background: linear-gradient(135deg, #2980B9, #3498DB); }
.stat-card.bg-purple-grad  { background: linear-gradient(135deg, #6C3483, #A23B72); }

/* ===================== Buttons ===================== */
.btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--primary-hover); border-color: var(--primary-hover); }
.btn-outline-primary { color: var(--primary-color); border-color: var(--primary-color); }
.btn-outline-primary:hover { background: var(--primary-color); color: #fff; }

/* ===================== Tables ===================== */
.table { border-radius: 8px; overflow: hidden; background: #fff; }
.table thead th {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: #fff; border: none; font-weight: 600; text-align: center; padding: 12px 8px; white-space: nowrap;
}
.table tbody tr { transition: background 0.2s ease; border-bottom: 1px solid #eef0f2; }
.table tbody tr:hover { background-color: #f8f9fa !important; }
.table tbody td { padding: 12px 8px; vertical-align: middle; border: none; }
.table-responsive { max-width: 100%; }

.empty-state { padding: 48px 16px; text-align: center; color: #6c757d; }
.empty-state i { font-size: 56px; color: #cdd5db; margin-bottom: 12px; display: block; }
.empty-state h5 { color: #2c3e50; margin-bottom: 6px; }

/* ===================== Status Pills ===================== */
.status-pill { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.status-pill.green   { background: #d4edda; color: #155724; }
.status-pill.red     { background: #f8d7da; color: #721c24; }
.status-pill.yellow  { background: #fff3cd; color: #856404; }
.status-pill.blue    { background: #cce5ff; color: #004085; }
.status-pill.gray    { background: #e2e3e5; color: #383d41; }
.status-pill.teal    { background: #d1f5ee; color: #0b6e5d; }

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

/* ===================== Pagination ===================== */
.pagination .page-link { border: none; color: var(--primary-color); margin: 0 2px; border-radius: 8px; }
.pagination .page-link:hover { background-color: var(--primary-color); color: #fff; }
.pagination .page-item.active .page-link { background-color: var(--primary-color); border-color: var(--primary-color); }

/* ===================== Alerts ===================== */
.alert { border: none; border-radius: 12px; }

/* ===================== Scan result ===================== */
.scan-result { border-radius: var(--card-radius); padding: 24px; text-align: center; color: #fff; }
.scan-result.allowed { background: linear-gradient(135deg, #16A085, #27AE60); }
.scan-result.denied  { background: linear-gradient(135deg, #C0392B, #E74C3C); }
.scan-result .scan-icon { font-size: 64px; }
.customer-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255,255,255,.6); }
.customer-photo-lg { width: 120px; height: 120px; border-radius: 16px; object-fit: cover; }

/* ===================== Membership card ===================== */
.member-card {
    width: 420px; max-width: 100%; border-radius: 18px; color: #fff; padding: 22px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    box-shadow: 0 12px 30px rgba(114, 29, 72,.3); position: relative; overflow: hidden;
}
.member-card .qr-box { background: #fff; padding: 8px; border-radius: 12px; display: inline-block; }

/* ===================== Auth ===================== */
.auth-shell {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(circle at 80% 10%, rgba(168, 51, 106,0.18), transparent 50%),
        radial-gradient(circle at 10% 90%, rgba(114, 29, 72,0.18), transparent 45%),
        linear-gradient(135deg, #f3f5f9 0%, #e9eef5 100%);
    padding: 24px;
}
.auth-card { width: 100%; max-width: 460px; background: #fff; border-radius: 22px; padding: 40px 36px 36px; box-shadow: 0 30px 60px rgba(114, 29, 72, .15); position: relative; overflow: hidden; }
.auth-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), var(--primary-color)); }
.auth-brand-block { text-align: center; margin-bottom: 28px; }
.auth-logo-ring { width: 120px; height: 120px; margin: 0 auto 18px; padding: 4px; border-radius: 30px; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); box-shadow: 0 18px 40px rgba(114, 29, 72, .28); }
.auth-logo-inner { width: 100%; height: 100%; border-radius: 26px; background: #fff; padding: 14px; display: flex; align-items: center; justify-content: center; }
.auth-logo-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.auth-title { font-size: 1.45rem; font-weight: 800; color: var(--primary-color); text-align: center; margin: 0; }
.auth-divider { display: flex; align-items: center; justify-content: center; margin: 12px 0 10px; }
.auth-divider span { width: 48px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); }
.auth-sub { font-size: 13.5px; color: #64748b; text-align: center; font-weight: 500; margin: 0; }
.form-control:focus, .form-select:focus { border-color: var(--secondary-color); box-shadow: 0 0 0 0.2rem rgba(168, 51, 106, 0.15); }

/* ===================== Responsive ===================== */
@media (min-width: 1200px) {
    .sidebar { width: var(--sidebar-width-lg); }
    .main-content, .navbar.app-navbar { margin-right: var(--sidebar-width-lg); }
}
@media (max-width: 991.98px) {
    .sidebar { transform: translateX(100%); transition: transform 0.3s ease; z-index: 1050; width: 86%; max-width: 320px; }
    .sidebar.show { transform: translateX(0); }
    .main-content, .navbar.app-navbar { margin-right: 0; }
    .sidebar-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1040; display: none; }
    .sidebar-backdrop.show { display: block; }
    .main-content { padding: 16px; }
    .card-body { padding: 1rem; }
}
@media (max-width: 575.98px) {
    .main-content { padding: 12px; }
    .stat-card .stat-value { font-size: 22px; }
    .page-header h1 { font-size: 1.15rem; }
    .navbar.app-navbar { padding: 0 .5rem; height: auto; min-height: 56px; }
    .table { font-size: 13px; }
    .table thead th, .table tbody td { padding: 8px 6px; }
}

/* ===================== Searchable selects (Tom Select) ===================== */
.ts-wrapper { font-family: inherit; }
.ts-control {
    min-height: calc(1.5em + 0.75rem + 2px);
    border-radius: 0.5rem;
    border-color: var(--bs-border-color, #dee2e6);
    padding: 0.375rem 0.75rem;
}
.ts-wrapper.focus .ts-control,
.ts-control:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(114, 29, 72, 0.15);
}
.ts-dropdown {
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-color: var(--bs-border-color, #dee2e6);
    text-align: right;
}
.ts-dropdown .option { padding: 8px 12px; }
.ts-dropdown .active {
    background-color: var(--primary-color);
    color: #fff;
}
.ts-dropdown .option:hover:not(.active) {
    background-color: rgba(114, 29, 72, 0.08);
}
.ts-dropdown .ts-dropdown-content { max-height: 260px; }
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control { background-color: #fff; }
.ts-wrapper.disabled .ts-control { background-color: var(--bs-secondary-bg, #e9ecef); }
/* السهم في اتجاه RTL */
.ts-wrapper.single .ts-control:after { left: 15px; right: auto; }
.ts-control .ts-control-input { text-align: right; }

/* ===================== Print ===================== */
@media print {
    .sidebar, .navbar.app-navbar, .btn, .pagination, .no-print { display: none !important; }
    .main-content { margin: 0 !important; padding: 0 !important; }
    .card { box-shadow: none !important; border: 1px solid #ddd !important; }
    body { background: #fff !important; }
}