/* ============================================================
   خيار 3: أسود/أبيض مينيمال + لمسة ذهبية واحدة
   ============================================================ */

:root {
    color-scheme: light;
    --ink:        #111111;
    --ink-soft:   #6B6B6B;
    --ink-faint:  #A3A3A3;

    --paper:      #FAFAFA;
    --surface:    #FFFFFF;
    --line:       #E5E5E5;
    --line-soft:  #F0F0F0;

    --gold:       #C9971E;
    --gold-deep:  #9C7414;
    --gold-tint:  #FBF1DC;

    --success:      #15803D;
    --success-bg:   #DCFCE7;
    --warning:      #B45309;
    --warning-bg:   #FEF3C7;
    --info:         #1D4ED8;
    --info-bg:      #DBEAFE;
    --danger:       #B91C1C;
    --danger-bg:    #FEE2E2;

    --radius: 12px;
    --radius-sm: 8px;
    --shadow-soft: 0 4px 14px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.05);

    --header-bg: #111111;
    --header-bg-soft: #2B2B2B;
    --header-text: #FFFFFF;
}

[data-theme="dark"] {
    color-scheme: dark;
    --ink:        #F5F5F5;
    --ink-soft:   #B8B8B8;
    --ink-faint:  #8A8A8A;

    --paper:      #121212;
    --surface:    #1E1E1E;
    --line:       #333333;
    --line-soft:  #262626;

    --gold:       #E8C468;
    --gold-deep:  #C9971E;
    --gold-tint:  #2E2718;

    --success:      #4ADE80;
    --success-bg:   #123321;
    --warning:      #FBBF24;
    --warning-bg:   #3A2E0F;
    --info:         #60A5FA;
    --info-bg:      #10244A;
    --danger:       #F87171;
    --danger-bg:    #3B1414;

    --shadow-soft: 0 4px 14px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.35);

    --header-bg: #000000;
    --header-bg-soft: #1E1E1E;
    --header-text: #FFFFFF;
}

/* ---------- الأساسيات ---------- */

body {
    font-family: 'Cairo', sans-serif;
    background: var(--paper);
    color: var(--ink);
    transition: background-color .2s ease, color .2s ease;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Tajawal', 'Cairo', sans-serif;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.01em;
}

a { color: var(--gold-deep); }
a:hover { color: var(--gold); }

.text-muted { color: var(--ink-faint) !important; }

/* ---------- شريط التنقل ---------- */

.navbar.bg-dark,
.main-header {
    background: var(--header-bg) !important;
    border-bottom: 1px solid var(--header-bg-soft);
    box-shadow: 0 1px 0 rgba(255,255,255,.06);
}

.navbar-brand {
    font-family: 'Tajawal', sans-serif;
    font-weight: 900;
    color: var(--header-text) !important;
    letter-spacing: -.01em;
}

.navbar .text-light,
.navbar a.text-light {
    color: #D9D9D9 !important;
    font-size: .95rem;
    transition: color .15s ease;
}
.navbar a.text-light:hover { color: var(--gold) !important; }

.navbar .btn-outline-light {
    border-color: var(--gold);
    color: var(--gold);
}
.navbar .btn-outline-light:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--ink);
}

.navbar-nav .nav-link {
    color: #D9D9D9 !important;
    font-size: .95rem;
    padding: .4rem .2rem;
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}
.navbar-nav .nav-link:hover { color: #fff !important; }
.navbar-nav .nav-link.active {
    color: #fff !important;
    border-bottom-color: var(--gold);
}

.navbar-toggler {
    border-color: rgba(255,255,255,.25);
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

#themeToggleBtn {
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
#themeToggleBtn .fa-sun { display: none; }
[data-theme="dark"] #themeToggleBtn .fa-sun { display: inline-block; }
[data-theme="dark"] #themeToggleBtn .fa-moon { display: none; }
[data-theme="dark"] #themeToggleBtn span::after { content: ' (مفعّل)'; }

/* ---------- البطاقات ---------- */

.card {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}
.bg-light {
    color: var(--ink);
}

.card.card-highlight {
    border-inline-end: 3px solid var(--gold);
}

/* ---------- الأزرار ---------- */

.btn { border-radius: var(--radius-sm); font-weight: 600; }

.btn-primary {
    background: var(--gold);
    border-color: var(--gold);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--gold-deep);
    border-color: var(--gold-deep);
    color: #fff;
}

.btn-outline-secondary {
    border-color: var(--line);
    color: var(--ink-soft);
}
.btn-outline-secondary:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

.btn-outline-primary {
    border-color: var(--ink);
    color: var(--ink);
}
.btn-outline-primary:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

.btn-outline-dark {
    border-color: var(--line);
    color: var(--ink-soft);
}
.btn-outline-dark:hover,
.btn-dark {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

.btn-outline-danger { border-color: var(--danger); color: var(--danger); }
.btn-outline-danger:hover { background: var(--danger); color: #fff; }

.search-hero-input {
    background: #FFFFFF !important;
    color: #111111 !important;
}
.search-hero-input::placeholder { color: #A3A3A3; opacity: 1; }

/* ---------- الجداول ---------- */

.table { color: var(--ink); --bs-table-bg: transparent; --bs-table-color: var(--ink); }
.table thead.table-light th {
    background: var(--paper);
    color: var(--ink-soft);
    font-weight: 700;
    border-bottom: 1px solid var(--line);
    font-size: .9rem;
}
.table > :not(caption) > * > * {
    background-color: transparent;
    border-bottom-color: var(--line-soft);
    color: var(--ink);
}
.table-hover > tbody > tr:hover > * { background-color: var(--gold-tint); }

.pagination .page-link {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink);
}
.pagination .page-link:hover {
    background: var(--gold-tint);
    border-color: var(--gold);
    color: var(--ink);
}
.pagination .page-item.active .page-link {
    background: var(--gold);
    border-color: var(--gold);
    color: #fff;
}
.pagination .page-item.disabled .page-link {
    background: var(--paper);
    border-color: var(--line);
    color: var(--ink-faint);
}

/* ---------- شارات الحالة ---------- */

.status-badge {
    font-size: .82rem;
    font-weight: 600;
    padding: .35rem .75rem;
    border-radius: 999px;
}

.status-قيد_التجميع        { background: var(--line-soft); color: var(--ink-soft); }
.status-قيد_استلام_الاوردر { background: var(--warning-bg); color: var(--warning); }
.status-قيد_الشحن          { background: var(--info-bg);    color: var(--info); }
.status-تم_التوصيل         { background: var(--success-bg); color: var(--success); }
.status-ملغي                { background: var(--danger-bg);  color: var(--danger); }

.status-مفتوحة       { background: var(--danger-bg);  color: var(--danger); }
.status-قيد_المعالجة { background: var(--warning-bg); color: var(--warning); }
.status-تم_الحل       { background: var(--success-bg); color: var(--success); }
.status-مرفوضة       { background: var(--line-soft);  color: var(--ink-soft); }

/* ---------- التنبيهات ---------- */

.alert-success { background: var(--success-bg); color: var(--success); border: 1px solid rgba(31,122,77,.15); }
.alert-danger  { background: var(--danger-bg);  color: var(--danger);  border: 1px solid rgba(163,54,54,.15); }

/* ---------- الفورمات ---------- */

.form-label { color: var(--ink-soft); font-weight: 600; font-size: .9rem; }

.form-control, .form-select {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--line);
    border-radius: var(--radius-sm);
}
.form-control:focus, .form-select:focus {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--gold);
    box-shadow: 0 0 0 .2rem rgba(201, 151, 30, .15);
}
.input-group-text {
    background: var(--paper);
    color: var(--ink-faint);
    border-color: var(--line);
}

.form-check-label {
    color: var(--ink);
}
.form-check-input {
    background-color: var(--surface);
    border-color: var(--ink-faint);
}
.form-check-input:checked {
    background-color: var(--gold);
    border-color: var(--gold);
}
.form-check-input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 .2rem rgba(201, 151, 30, .15);
}

/* ---------- عناصر مساعدة ---------- */

.list-group-item {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--line-soft);
}

.bg-light { background: var(--paper) !important; }
.bg-white { background: var(--surface) !important; }
.text-dark { color: var(--ink) !important; }
.border,
.border-top,
.border-bottom,
.border-start,
.border-end { border-color: var(--line) !important; }

.alert-info { background: var(--info-bg); color: var(--info); border: 1px solid rgba(29,78,216,.15); }
.alert-warning { background: var(--warning-bg); color: var(--warning); border: 1px solid rgba(180,83,9,.15); }

/* بطاقات bg-warning/bg-opacity-10 الشفافة بتفضل واضحة فوق أي خلفية */
.bg-warning.bg-opacity-10 { background: var(--gold-tint) !important; }

/* ---------- كروت المنتجات (الرئيسية) ---------- */

.product-card-img { height: 130px; }
.product-card .card-title { font-size: .9rem; }
.product-price { font-size: .95rem; }
.product-card .badge-status { font-size: .68rem; }

@media (min-width: 576px) {
    .product-card-img { height: 180px; }
    .product-card .card-title { font-size: 1rem; }
    .product-price { font-size: 1.1rem; }
}