/* ====================================================================
   TABAYYUN Logistics — Portal Theme v3.0 (Dark + Red Identity)
   مرجع التصميم: tabayyun.com.sa Portal
   ==================================================================== */

:root {
    --tab-red:        #8B1A1A;
    --tab-red-dark:   #6B1212;
    --tab-red-light:  #A52828;
    --tab-red-glow:   rgba(139, 26, 26, 0.4);
    --tab-pink-glow:  rgba(225, 64, 142, 0.6);
    --tab-bg:         #0A0E14;
    --tab-bg-soft:    #0F1419;
    --tab-bg-card:    #121821;
    --tab-bg-input:   #1A2230;
    --tab-text:       #E8EBF0;
    --tab-text-mute:  #8B95A7;
    --tab-border:     rgba(255, 255, 255, 0.08);
    --tab-grid:       rgba(255, 255, 255, 0.03);
}

/* ════════════ KILL ALL GREEN UNIVERSALLY ════════════ */
[style*="#039D55"], [style*="039D55"],
.text--039D55, .bg--039D55 {
    color: var(--tab-red) !important;
}
[style*="background: #039D55"],
[style*="background-color: #039D55"],
[style*="background:#039D55"] {
    background-color: var(--tab-red) !important;
    background-image: none !important;
}
[style*="border-color: #039D55"],
[style*="border-color:#039D55"] {
    border-color: var(--tab-red) !important;
}

/* ════════════ LOGIN PAGE — Tabayyun Portal Style ════════════ */

body.auth-page {
    background: var(--tab-bg) !important;
    color: var(--tab-text);
    overflow-x: hidden;
    min-height: 100vh;
}

/* الـ wrapper الرئيسي — نسطر split-screen */
body.auth-page .auth-wrapper,
body.auth-page main#content {
    background: var(--tab-bg) !important;
    min-height: 100vh;
    position: relative;
}

/* الـ grid pattern في الخلفية كامل الصفحة */
body.auth-page::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(var(--tab-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--tab-grid) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
}

/* النصف الأيسر (form): خلفية شفّافة على top الـ grid */
body.auth-page .auth-wrapper-left {
    background: transparent !important;
    background-image: none !important;
    color: var(--tab-text);
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 40px;
}

/* النصف الأيمن: بصمة وردية متوهّجة */
body.auth-page .auth-wrapper-right {
    background: var(--tab-bg) !important;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* الـ right wrapper — خلفية ناعمة بدون بصمة (تنظيف الـ form) */
body.auth-page .auth-wrapper-right::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(139, 26, 26, 0.25) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    filter: blur(100px);
}

/* شعار البصمة فوق Admin Login (داخل الـ form) */
body.auth-page .auth-header::before {
    content: '';
    display: block;
    width: 120px;
    height: 120px;
    margin: 0 auto 32px;
    background: url('/public/assets/admin/img/tabayyun/tabayyun-fingerprint.png') center/contain no-repeat;
    filter:
        drop-shadow(0 0 20px rgba(225, 64, 142, 0.6))
        drop-shadow(0 0 40px rgba(139, 26, 26, 0.5))
        drop-shadow(0 0 60px rgba(225, 64, 142, 0.3));
    animation: tabayyunPulse 3s ease-in-out infinite;
}

@keyframes tabayyunPulse {
    0%, 100% {
        filter:
            drop-shadow(0 0 20px rgba(225, 64, 142, 0.6))
            drop-shadow(0 0 40px rgba(139, 26, 26, 0.5))
            drop-shadow(0 0 60px rgba(225, 64, 142, 0.3));
        transform: scale(1);
    }
    50% {
        filter:
            drop-shadow(0 0 30px rgba(225, 64, 142, 0.85))
            drop-shadow(0 0 60px rgba(139, 26, 26, 0.7))
            drop-shadow(0 0 90px rgba(225, 64, 142, 0.5));
        transform: scale(1.05);
    }
}

/* الـ form container — توهّج خلفي بدل البصمة */
body.auth-page .auth-wrapper-form,
body.auth-page .auth-form,
body.auth-page form {
    position: relative;
    z-index: 10;
}

/* تحسين الـ form box — حواف أحمر متوهّجة */
body.auth-page .auth-form-wrapper,
body.auth-page .auth-card,
body.auth-page form {
    background: rgba(18, 24, 33, 0.6);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(139, 26, 26, 0.3);
    border-radius: 16px;
    padding: 32px;
    box-shadow:
        0 0 40px rgba(139, 26, 26, 0.2),
        0 0 80px rgba(225, 64, 142, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* العنوان Admin Login بحجم أكبر */
body.auth-page .auth-header h2,
body.auth-page h2.title {
    text-align: center;
    font-size: 2rem !important;
    margin-bottom: 4px;
}
body.auth-page .auth-header p,
body.auth-page .auth-header span {
    text-align: center;
    display: block;
    margin-bottom: 24px;
}

/* CAPTCHA: تحسين الشكل */
body.auth-page .captcha-wrapper,
body.auth-page #recaptcha,
body.auth-page img[alt*="captcha"],
body.auth-page img[src*="captcha"] {
    border: 1px solid rgba(139, 26, 26, 0.4) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    padding: 4px !important;
    box-shadow: 0 0 20px rgba(225, 64, 142, 0.2) !important;
}

/* زر LOGIN — توهّج أقوى */
body.auth-page .btn--primary,
body.auth-page button.btn--primary,
body.auth-page .btn.btn--primary {
    box-shadow:
        0 4px 16px rgba(139, 26, 26, 0.5),
        0 0 30px rgba(225, 64, 142, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset !important;
    animation: btnGlowPulse 4s ease-in-out infinite;
}

@keyframes btnGlowPulse {
    0%, 100% {
        box-shadow:
            0 4px 16px rgba(139, 26, 26, 0.5),
            0 0 30px rgba(225, 64, 142, 0.3);
    }
    50% {
        box-shadow:
            0 4px 24px rgba(139, 26, 26, 0.7),
            0 0 50px rgba(225, 64, 142, 0.5);
    }
}

/* Forgot Password — Glow */
body.auth-page a[href*="forget"],
body.auth-page a[href*="forgot"] {
    text-shadow: 0 0 12px rgba(225, 64, 142, 0.5);
    transition: text-shadow 0.3s ease;
}
body.auth-page a[href*="forget"]:hover,
body.auth-page a[href*="forgot"]:hover {
    text-shadow: 0 0 16px rgba(225, 64, 142, 0.8);
}

/* النصوص الرئيسية — تحسين glow */
body.auth-page h2.title strong {
    text-shadow: 0 0 16px rgba(225, 64, 142, 0.4) !important;
}

/* إخفاء الشعار الأصلي tabayyun-main-logo (لأن البصمة في الـ ::before) */
body.auth-page .tabayyun-main-logo {
    display: none !important;
}

/* إخفاء النصّ TABAYYUN/Smart Logistics فوق الصفحة (لأنّ الشعار الجديد ظاهر) */
body.auth-page h2.title:not(.auth-header h2) {
    display: none !important;
}

/* النصوص في الـ login */
body.auth-page h1, body.auth-page h2, body.auth-page h3,
body.auth-page h4, body.auth-page h5 {
    color: var(--tab-text) !important;
}

body.auth-page h2.title {
    color: var(--tab-text) !important;
    font-weight: 300 !important;
    font-size: 2.5rem !important;
    line-height: 1.3;
    margin-bottom: 8px;
}

body.auth-page h2.title strong,
body.auth-page .text-tabayyun-red {
    color: var(--tab-red-light) !important;
    font-weight: 700 !important;
}

body.auth-page h2.title .d-block {
    color: var(--tab-text-mute);
    font-size: 0.7em;
    margin-top: 4px;
}

/* الـ Admin Login header */
body.auth-page .auth-header h2 {
    color: var(--tab-text) !important;
    font-size: 1.75rem !important;
    margin-bottom: 4px;
}

body.auth-page .auth-header p,
body.auth-page .auth-header span,
body.auth-page .text-secondary {
    color: var(--tab-text-mute) !important;
}

/* تكبير الشعار */
body.auth-page .tabayyun-main-logo {
    max-width: 280px !important;
    width: 100% !important;
    height: auto !important;
    filter: brightness(1.1);
    margin-bottom: 32px;
}

/* labels */
body.auth-page label,
body.auth-page .form-label {
    color: var(--tab-text-mute) !important;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 8px;
}

/* الـ inputs */
body.auth-page .form-control,
body.auth-page input.form-control,
body.auth-page input[type="email"],
body.auth-page input[type="password"],
body.auth-page input[type="text"],
body.auth-page .input-group-merge .form-control {
    background: var(--tab-bg-input) !important;
    border: 1px solid var(--tab-border) !important;
    color: var(--tab-text) !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

body.auth-page .form-control:focus,
body.auth-page input.form-control:focus {
    background: var(--tab-bg-input) !important;
    border-color: var(--tab-red) !important;
    box-shadow: 0 0 0 3px var(--tab-red-glow) !important;
    color: var(--tab-text) !important;
}

body.auth-page .form-control::placeholder {
    color: var(--tab-text-mute) !important;
    opacity: 0.6;
}

/* الـ input-group */
body.auth-page .input-group,
body.auth-page .input-group-merge {
    background: var(--tab-bg-input);
    border: 1px solid var(--tab-border);
    border-radius: 10px;
    overflow: hidden;
}
body.auth-page .input-group-prepend,
body.auth-page .input-group-append,
body.auth-page .input-group-text {
    background: transparent !important;
    border: none !important;
    color: var(--tab-text-mute) !important;
}

/* زر Login الكبير */
body.auth-page .btn--primary,
body.auth-page button.btn--primary,
body.auth-page .btn.btn--primary,
body.auth-page .btn.btn-primary {
    background: linear-gradient(135deg, var(--tab-red) 0%, var(--tab-red-dark) 100%) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 14px 24px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 16px var(--tab-red-glow), 0 0 0 1px rgba(255, 255, 255, 0.05) inset !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase;
}
body.auth-page .btn--primary:hover,
body.auth-page button.btn--primary:hover,
body.auth-page .btn.btn--primary:hover {
    background: linear-gradient(135deg, var(--tab-red-light) 0%, var(--tab-red) 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px var(--tab-red-glow), 0 0 0 1px rgba(255, 255, 255, 0.1) inset !important;
}

/* روابط: Forgot Password */
body.auth-page a, body.auth-page .text-primary {
    color: var(--tab-red-light) !important;
    transition: opacity 0.2s ease;
}
body.auth-page a:hover {
    color: #fff !important;
    text-decoration: underline;
}

/* checkbox */
body.auth-page .form-check-input,
body.auth-page input[type="checkbox"] {
    background-color: var(--tab-bg-input);
    border-color: var(--tab-border);
}
body.auth-page input[type="checkbox"]:checked {
    background-color: var(--tab-red) !important;
    border-color: var(--tab-red) !important;
    accent-color: var(--tab-red);
}
body.auth-page .form-check-label,
body.auth-page label.form-check-label {
    color: var(--tab-text-mute) !important;
}

/* Captcha container */
body.auth-page .captcha-wrapper,
body.auth-page #recaptcha,
body.auth-page .captcha-img {
    border: 1px solid var(--tab-border) !important;
    border-radius: 8px;
    background: var(--tab-bg-input);
    padding: 8px;
}

/* show/hide password eye */
body.auth-page .js-toggle-password,
body.auth-page .input-group-append i {
    color: var(--tab-text-mute) !important;
}

/* ════════════ DASHBOARD (admin panel) — Dark Theme ════════════ */

body:not(.auth-page) {
    background: var(--tab-bg) !important;
    color: var(--tab-text);
}

/* Sidebar */
.sidebar,
.sidebar.bg-gradient-primary,
.bg-gradient-primary,
nav.navbar.bg-gradient-primary {
    background: linear-gradient(180deg, var(--tab-bg-card) 0%, var(--tab-bg-soft) 100%) !important;
    border-right: 1px solid var(--tab-border);
}
.sidebar .nav-item .nav-link {
    color: var(--tab-text-mute) !important;
    transition: all 0.2s ease;
}
.sidebar .nav-item.active .nav-link,
.sidebar .nav-link:hover {
    background-color: var(--tab-red) !important;
    color: #fff !important;
    border-right: 3px solid #fff !important;
}
.sidebar .nav-link i {
    color: inherit !important;
}
.sidebar-brand {
    color: var(--tab-text) !important;
}

/* Topbar */
.topbar, .navbar-light, nav.navbar.bg-white {
    background: var(--tab-bg-card) !important;
    border-bottom: 1px solid var(--tab-border) !important;
}
.topbar .nav-link, .navbar-light .nav-link {
    color: var(--tab-text) !important;
}
.topbar-divider {
    border-right-color: var(--tab-border) !important;
}

/* Cards */
.card, .card.shadow {
    background: var(--tab-bg-card) !important;
    border: 1px solid var(--tab-border) !important;
    color: var(--tab-text) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
.card-header, .card-header.bg-white {
    background: var(--tab-bg-soft) !important;
    color: var(--tab-text) !important;
    border-bottom: 1px solid var(--tab-border) !important;
}
.card-body { color: var(--tab-text) !important; }

/* أزرار */
.btn-primary, .bg-primary, .badge-primary {
    background-color: var(--tab-red) !important;
    border-color: var(--tab-red) !important;
}
.btn-primary:hover { background-color: var(--tab-red-dark) !important; }
.btn-success {
    background-color: var(--tab-red) !important;
    border-color: var(--tab-red) !important;
}
.text-primary, a.text-primary { color: var(--tab-red-light) !important; }

/* جداول */
.table {
    color: var(--tab-text) !important;
    background: transparent;
}
.table thead th {
    background: var(--tab-bg-soft) !important;
    color: var(--tab-text-mute) !important;
    border-bottom: 1px solid var(--tab-border) !important;
}
.table tbody tr {
    border-bottom: 1px solid var(--tab-border) !important;
}
.table-hover tbody tr:hover {
    background-color: rgba(139, 26, 26, 0.1) !important;
}
.table td, .table th { border-color: var(--tab-border) !important; }

/* inputs في dashboard */
.form-control, input.form-control, textarea.form-control, select.form-control {
    background: var(--tab-bg-input) !important;
    border: 1px solid var(--tab-border) !important;
    color: var(--tab-text) !important;
}
.form-control:focus {
    background: var(--tab-bg-input) !important;
    border-color: var(--tab-red) !important;
    box-shadow: 0 0 0 3px var(--tab-red-glow) !important;
    color: var(--tab-text) !important;
}

/* dropdowns */
.dropdown-menu, .dropdown-menu-arrow {
    background: var(--tab-bg-card) !important;
    border: 1px solid var(--tab-border) !important;
    color: var(--tab-text) !important;
}
.dropdown-item {
    color: var(--tab-text) !important;
}
.dropdown-item:hover {
    background: var(--tab-bg-soft) !important;
    color: var(--tab-red-light) !important;
}

/* الـ stat cards (borders) */
.border-left-primary, .border-left-success {
    border-left: 4px solid var(--tab-red) !important;
}
.border-left-info { border-left: 4px solid #06b6d4 !important; }
.border-left-warning { border-left: 4px solid #f59e0b !important; }
.border-left-danger { border-left: 4px solid #ef4444 !important; }

/* Software Version — إخفاء */
[class*="software-version"], .software_version, .top-right-badge {
    display: none !important;
}

/* alerts */
.alert-primary {
    background-color: rgba(139, 26, 26, 0.15) !important;
    color: var(--tab-red-light) !important;
    border-color: var(--tab-red-glow) !important;
}

/* modals */
.modal-content {
    background: var(--tab-bg-card) !important;
    color: var(--tab-text) !important;
    border: 1px solid var(--tab-border) !important;
}
.modal-header, .modal-footer {
    border-color: var(--tab-border) !important;
}

/* breadcrumb */
.breadcrumb {
    background: transparent !important;
}
.breadcrumb-item, .breadcrumb-item a {
    color: var(--tab-text-mute) !important;
}
.breadcrumb-item.active { color: var(--tab-red-light) !important; }

/* spinner */
.spinner-border-primary { color: var(--tab-red) !important; }

/* الـ footer */
.sticky-footer, .container-fluid > .text-center.small.bg-white {
    background: var(--tab-bg-card) !important;
    color: var(--tab-text-mute) !important;
    border-top: 1px solid var(--tab-border) !important;
}

/* الشعار في sidebar / topbar */
.brand-logo img, .sidebar-brand img, .navbar-brand img {
    max-height: 60px !important;
    filter: brightness(1.1);
}

/* scrollbars (Chrome) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--tab-bg-soft); }
::-webkit-scrollbar-thumb { background: var(--tab-red); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--tab-red-light); }

/* الـ tabs */
.nav-tabs .nav-link {
    color: var(--tab-text-mute) !important;
    border: none !important;
}
.nav-tabs .nav-link.active {
    background: var(--tab-bg-card) !important;
    color: var(--tab-red-light) !important;
    border-bottom: 2px solid var(--tab-red) !important;
}

/* أيقونات الجانب */
.fa, .fas, .far, .fal, .fab, .tio { color: inherit; }

/* الـ progress bar */
.progress-bar {
    background-color: var(--tab-red) !important;
}

/* النصوص العامة */
p, span, div, td, th, li, label {
    /* لا تُغيّر اللون بالكامل لتتجنّب كسر اللوحة */
}


/* ============================================
   النصف الأيسر — Hero content
   ============================================ */
body.auth-page .auth-wrapper-left {
    position: relative;
    background: transparent !important;
    padding: 60px !important;
}

/* شعار تبيُّن الكبير */
body.auth-page .auth-wrapper-left::before {
    content: '';
    display: block;
    width: 420px;
    height: 420px;
    max-width: 80%;
    margin: 0 auto 0;
    background: url('/public/assets/admin/img/tabayyun/tabayyun-logistics-hero.png') center/contain no-repeat;
    filter:
        drop-shadow(0 0 30px rgba(225, 64, 142, 0.5))
        drop-shadow(0 0 70px rgba(139, 26, 26, 0.35))
        brightness(1.08);
    animation: heroLogoFloat 6s ease-in-out infinite;
}

@keyframes heroLogoFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
        filter: drop-shadow(0 0 30px rgba(225, 64, 142, 0.4)) drop-shadow(0 0 60px rgba(139, 26, 26, 0.3)) brightness(1.05);
    }
    50% {
        transform: translateY(-12px) scale(1.02);
        filter: drop-shadow(0 10px 40px rgba(225, 64, 142, 0.55)) drop-shadow(0 0 80px rgba(139, 26, 26, 0.4)) brightness(1.1);
    }
}

/* نصّ تحت الشعار — مخفي (الشعار يحوي كل المعلومات) */
body.auth-page .auth-wrapper-left::after {
    display: none;
}

/* تخفيف الـ grid في النصف الأيسر */
body.auth-page .auth-wrapper-left {
    background:
        radial-gradient(circle at center, rgba(139, 26, 26, 0.08) 0%, transparent 60%) !important;
}

/* responsive: على الشاشات الصغيرة، يختفي النصف الأيسر */
@media (max-width: 991px) {
    body.auth-page .auth-wrapper-left::before,
    body.auth-page .auth-wrapper-left::after {
        display: none;
    }
    body.auth-page .auth-wrapper-left {
        display: none;
    }
    body.auth-page .auth-wrapper-right {
        width: 100%;
    }
}
/* ====================================================================
   TABAYYUN Logistics — Admin SIDEBAR (Red Theme + Big Logo)
   Appends to tabayyun-theme.css — overrides 6amMart's teal sidebar
   with the Tabayyun Logistics red identity + glowing fingerprint.
   ==================================================================== */

/* ════════════ NUKE ALL TEAL / DARK GREEN ════════════ */
/* 6amMart uses bg--005555 (#005555) for the sidebar content wrapper. */
[class*="bg--005555"], .bg--005555,
[style*="#005555"], [style*="005555"] {
    background-color: var(--tab-bg-soft, #0F1419) !important;
    background-image: none !important;
}
[style*="background: #005555"],
[style*="background-color: #005555"] {
    background: var(--tab-bg-soft, #0F1419) !important;
}
/* Common teal accent variants used elsewhere */
[class*="bg--00cc99"], [class*="bg--00d97e"], [class*="bg--00b29b"] {
    background-color: var(--tab-red, #8B1A1A) !important;
}
[style*="#00cc99"], [style*="#00d97e"], [style*="#00b29b"],
[style*="#107f5e"], [style*="#1a4a4a"], [style*="#0d4f4f"] {
    color: var(--tab-red, #8B1A1A) !important;
    background-color: transparent !important;
}

/* ════════════ SIDEBAR — Tabayyun Red Theme ════════════ */

.js-navbar-vertical-aside,
.navbar-vertical-aside,
.navbar-vertical-fixed {
    background: linear-gradient(180deg, #0A0E14 0%, #0F1419 100%) !important;
    border-right: 1px solid rgba(220, 38, 38, 0.18) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.6),
                inset -1px 0 0 rgba(220, 38, 38, 0.1) !important;
}

/* Inner content scroll area */
.navbar-vertical-content,
#navbar-vertical-content {
    background: transparent !important;
}

/* Brand bar at top of sidebar */
.navbar-vertical-aside .navbar-brand-wrapper {
    background: linear-gradient(135deg, #0A0E14 0%, #14080A 100%) !important;
    border-bottom: 1px solid rgba(220, 38, 38, 0.22) !important;
    padding: 18px 16px !important;
    min-height: 132px !important;
    height: 132px !important;
    position: relative;
    overflow: hidden;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* The clickable wrapper around the logo */
.navbar-vertical-aside .navbar-brand,
.navbar-vertical-aside a.navbar-brand {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Red glow behind logo */
.navbar-vertical-aside .navbar-brand-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 50%, rgba(220, 38, 38, 0.35) 0%, transparent 60%);
    pointer-events: none;
}

/* BIG glowing logo */
.navbar-vertical-aside .navbar-brand-logo,
.navbar-vertical-aside .navbar-brand-logo.initial--36,
.navbar-vertical-aside img.navbar-brand-logo {
    width: auto !important;
    height: 96px !important;
    max-height: 96px !important;
    max-width: 240px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 0 14px rgba(220, 38, 38, 0.55))
            drop-shadow(0 0 28px rgba(220, 38, 38, 0.35)) !important;
    transition: filter 0.3s ease, transform 0.3s ease;
    position: relative;
    z-index: 2;
    border-radius: 0 !important;
}
.navbar-vertical-aside .navbar-brand-logo:hover {
    filter: drop-shadow(0 0 22px rgba(220, 38, 38, 0.75))
            drop-shadow(0 0 40px rgba(220, 38, 38, 0.5)) !important;
    transform: scale(1.04);
}

/* Mini logo (collapsed sidebar) */
.navbar-vertical-aside .navbar-brand-logo-mini,
.navbar-vertical-aside .navbar-brand-logo-mini.initial--36 {
    height: 50px !important;
    max-height: 50px !important;
    width: auto !important;
    object-fit: contain !important;
    filter: drop-shadow(0 0 10px rgba(220, 38, 38, 0.7)) !important;
    position: relative;
    z-index: 2;
    border-radius: 0 !important;
}

/* ════════════ MENU LINKS ════════════ */

.navbar-vertical-aside .nav-link,
.navbar-vertical-aside .js-navbar-vertical-aside-menu-link {
    color: #B8C0CC !important;
    border-radius: 8px !important;
    margin: 2px 8px !important;
    padding: 10px 14px !important;
    transition: all 0.2s ease !important;
    position: relative;
    border: 1px solid transparent !important;
}

.navbar-vertical-aside .nav-link i,
.navbar-vertical-aside .nav-link svg,
.navbar-vertical-aside .nav-icon {
    color: #8B95A7 !important;
    transition: color 0.2s ease;
}

/* Hover */
.navbar-vertical-aside .nav-link:hover {
    background: rgba(220, 38, 38, 0.08) !important;
    color: #FFFFFF !important;
    border-color: rgba(220, 38, 38, 0.2) !important;
}
.navbar-vertical-aside .nav-link:hover i,
.navbar-vertical-aside .nav-link:hover svg {
    color: #dc2626 !important;
}

/* Active state — red glow */
.navbar-vertical-aside .navbar-vertical-aside-has-menu.active > .nav-link,
.navbar-vertical-aside .nav-link.active,
.navbar-vertical-aside .nav-item.active > .nav-link,
.navbar-vertical-aside li.show > .nav-link {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.18), rgba(139, 26, 26, 0.25)) !important;
    color: #FFFFFF !important;
    border-color: rgba(220, 38, 38, 0.35) !important;
    box-shadow: 0 0 16px rgba(220, 38, 38, 0.25) inset !important;
    font-weight: 600 !important;
}
.navbar-vertical-aside .navbar-vertical-aside-has-menu.active > .nav-link i,
.navbar-vertical-aside .nav-link.active i,
.navbar-vertical-aside .nav-item.active > .nav-link i {
    color: #dc2626 !important;
    filter: drop-shadow(0 0 8px rgba(220, 38, 38, 0.6));
}

/* Sub-menu */
.navbar-vertical-aside .navbar-vertical-aside-has-menu .nav-sub {
    background: rgba(0, 0, 0, 0.25) !important;
    border-radius: 8px !important;
    margin: 4px 8px 4px 24px !important;
    padding: 4px 0 !important;
    border-left: 2px solid rgba(220, 38, 38, 0.3) !important;
}
.navbar-vertical-aside .nav-sub .nav-link {
    padding: 8px 14px !important;
    font-size: 0.85rem !important;
    margin: 1px 6px !important;
}

/* Section / category labels */
.navbar-vertical-aside .nav-subtitle,
.navbar-vertical-aside .nav-subtitle-replacer {
    color: #6B7280 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    padding: 18px 16px 6px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    margin-top: 4px !important;
}

/* Scrollbar */
.navbar-vertical-content::-webkit-scrollbar {
    width: 6px;
}
.navbar-vertical-content::-webkit-scrollbar-track {
    background: transparent;
}
.navbar-vertical-content::-webkit-scrollbar-thumb {
    background: rgba(220, 38, 38, 0.35);
    border-radius: 3px;
}
.navbar-vertical-content::-webkit-scrollbar-thumb:hover {
    background: rgba(220, 38, 38, 0.55);
}

/* Badge counters */
.navbar-vertical-aside .badge,
.navbar-vertical-aside .nav-link .badge {
    background: linear-gradient(135deg, #dc2626, #8B1A1A) !important;
    color: #fff !important;
    box-shadow: 0 0 8px rgba(220, 38, 38, 0.5) !important;
    border: none !important;
}

/* Pin / chevron / arrow icons */
.navbar-vertical-aside .nav-link::after,
.navbar-vertical-aside .tio-chevron-right {
    color: #6B7280 !important;
}
.navbar-vertical-aside .navbar-vertical-aside-has-menu.active > .nav-link::after {
    color: #dc2626 !important;
}

/* Collapse / expand toggle buttons */
.js-navbar-vertical-aside-toggle-invoker,
.navbar-vertical-aside-toggle {
    color: #8B95A7 !important;
    border-color: rgba(220, 38, 38, 0.2) !important;
}
.js-navbar-vertical-aside-toggle-invoker:hover {
    background: rgba(220, 38, 38, 0.15) !important;
    color: #dc2626 !important;
}

/* When sidebar is in mini mode, brand wrapper becomes smaller — keep red glow */
.navbar-vertical-aside-mini-mode .navbar-brand-wrapper {
    padding: 20px 8px !important;
    min-height: 78px !important;
}

/* Tooltips on mini mode */
.js-nav-tooltip-link.tooltip-inner,
.tooltip.show .tooltip-inner {
    background: var(--tab-red, #8B1A1A) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.4) !important;
    border-radius: 6px !important;
}
.tooltip .tooltip-arrow::before {
    border-right-color: var(--tab-red, #8B1A1A) !important;
}
/* ====================================================================
   TABAYYUN — Admin TOP NAVBAR (Header) + Misc Teal Cleanup
   ==================================================================== */

/* Top header / navbar — strip any residual teal */
.navbar-content,
.js-navbar-vertical-aside-toggle-invoker,
.navbar.navbar-expand,
header.navbar,
.splitted-content-navbar {
    background: linear-gradient(180deg, #0F1419 0%, #0A0E14 100%) !important;
    border-bottom: 1px solid rgba(220, 38, 38, 0.15) !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.4) !important;
}

/* Search box at top */
.navbar .form-control,
.navbar .input-group .form-control,
input[type="text"].search,
.search-form .form-control {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(220, 38, 38, 0.2) !important;
    color: #fff !important;
}
.navbar .form-control::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}
.navbar .form-control:focus {
    border-color: rgba(220, 38, 38, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
}

/* Top nav menu items (Users / Transactions & Reports / Settings / Dispatch) */
.navbar-nav .nav-link,
.navbar-content .nav-link,
header .nav-link {
    color: #B8C0CC !important;
}
.navbar-nav .nav-link:hover,
.navbar-content .nav-link:hover,
header .nav-link:hover {
    color: #dc2626 !important;
}
.navbar-nav .nav-link i,
header .nav-link i {
    color: #dc2626 !important;
}

/* Language switcher, notification, user pill — pin to red theme */
.navbar .dropdown-toggle,
.navbar .btn-link,
.btn-link {
    color: #B8C0CC !important;
}
.navbar .dropdown-toggle:hover,
.btn-link:hover {
    color: #dc2626 !important;
}

/* User chip on top-right (Demo Module / business name pill) */
.navbar .btn-icon,
.navbar .navbar-dropdown-account-wrapper {
    background: rgba(220, 38, 38, 0.12) !important;
    border: 1px solid rgba(220, 38, 38, 0.3) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.18) !important;
}
.navbar .btn-icon:hover {
    background: rgba(220, 38, 38, 0.22) !important;
}

/* Generic teal-tone overrides */
[class*="text-info"],
[class*="text-teal"],
.text--00cc99,
.text--00d97e,
.text--107f5e,
.text--005555 {
    color: #dc2626 !important;
}
[class*="bg-info"],
.bg--00cc99,
.bg--00d97e,
.bg--107f5e {
    background-color: rgba(220, 38, 38, 0.12) !important;
}

/* Buttons currently teal */
.btn-primary,
.btn--primary,
.btn-info {
    background: linear-gradient(135deg, #dc2626, #8B1A1A) !important;
    border-color: #8B1A1A !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.3) !important;
}
.btn-primary:hover,
.btn--primary:hover {
    background: linear-gradient(135deg, #b91c1c, #7a1717) !important;
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.45) !important;
}

/* User Statistics donut + chart legend — strip teal from charts */
.user-statistics-donut svg circle[stroke*="#00"],
canvas[id*="chart"] {
    /* charts re-render via JS — can't easily override fill */
}

/* Page background — keep neutral */
.main {
    background: #F4F5F7 !important;
}

/* Top breadcrumb / page header */
.page-header-title,
.page-header h1 {
    color: #1a1a1a !important;
}

/* Card headers + stat cards on dashboard — give them a subtle red accent */
.card-header,
.dashboard-stats .card-header {
    background: linear-gradient(90deg, #fff 0%, #fff5f5 100%) !important;
    border-bottom: 1px solid rgba(220, 38, 38, 0.12) !important;
}

/* Stat number color */
.stat-card h2,
.stat-card h3,
.dashboard-stat-value {
    color: #8B1A1A !important;
}

/* Status chips */
.badge-soft-success,
.badge-success {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #15803d !important;
}
.badge-soft-info,
.badge-info,
.badge--info {
    background: rgba(220, 38, 38, 0.12) !important;
    color: #8B1A1A !important;
}

/* Tabs */
.nav-tabs .nav-link.active {
    color: #8B1A1A !important;
    border-bottom: 2px solid #8B1A1A !important;
}
.nav-tabs .nav-link {
    color: #6B7280 !important;
}
.nav-tabs .nav-link:hover {
    color: #dc2626 !important;
}

/* Form focus state */
.form-control:focus,
.form-select:focus {
    border-color: rgba(220, 38, 38, 0.5) !important;
    box-shadow: 0 0 0 0.25rem rgba(220, 38, 38, 0.15) !important;
}

/* Spinner / loaders */
.spinner-border {
    color: #dc2626 !important;
}

/* Pagination */
.page-link {
    color: #8B1A1A !important;
}
.page-item.active .page-link {
    background-color: #8B1A1A !important;
    border-color: #8B1A1A !important;
    color: #fff !important;
}
/* ====================================================================
   TABAYYUN — Dashboard CARDS + Sidebar Active Item Final Polish
   ==================================================================== */

/* ════════════ Dashboard stat cards → DARK theme ════════════ */
/* The 4 stat cards at top of the dashboard (Items, Orders, Stores, Customers)
   use the 6amMart-specific class `__dashboard-card-2`. */

.__dashboard-card-2,
div.__dashboard-card-2,
.main .__dashboard-card-2 {
    background: linear-gradient(135deg, #0F1419 0%, #1a0a0a 100%) !important;
    border: 1px solid rgba(220, 38, 38, 0.2) !important;
    color: #E5E7EB !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35),
                inset 0 0 0 1px rgba(220, 38, 38, 0.06) !important;
    border-radius: 12px !important;
}
.__dashboard-card-2 h6,
.__dashboard-card-2 .name {
    color: #fff !important;
    font-weight: 700 !important;
    text-shadow: 0 0 10px rgba(220, 38, 38, 0.25);
}
.__dashboard-card-2 h2,
.__dashboard-card-2 h3,
.__dashboard-card-2 .count {
    color: #fff !important;
    text-shadow: 0 0 14px rgba(220, 38, 38, 0.35);
}
.__dashboard-card-2 p,
.__dashboard-card-2 small,
.__dashboard-card-2 .text-muted {
    color: rgba(255, 255, 255, 0.6) !important;
}
.__dashboard-card-2 img {
    filter: drop-shadow(0 0 8px rgba(220, 38, 38, 0.4));
}

/* Hover lift */
.__dashboard-card-2 {
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.__dashboard-card-2:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(220, 38, 38, 0.25) !important;
    border-color: rgba(220, 38, 38, 0.4) !important;
}

/* Dashboard stat cards → DARK theme (generic .card fallback) */
/* The 4 stat cards at top of the dashboard (Items, Orders, Stores, Customers)
   are still on white background. Make them match the dark sidebar identity. */

.main .card,
.main .row .card,
.main-content .card,
#kt_content .card,
.main .card.box,
.dashboard-stats-card,
.card.h-100,
.main-content .row .card-body {
    background: linear-gradient(135deg, #0F1419 0%, #1a0a0a 100%) !important;
    border: 1px solid rgba(220, 38, 38, 0.18) !important;
    color: #E5E7EB !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35),
                inset 0 0 0 1px rgba(220, 38, 38, 0.05) !important;
}

/* Card headers + titles inside dark cards */
.main .card .card-header,
.main .card .card-title {
    background: transparent !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(220, 38, 38, 0.15) !important;
}

/* Card body text on dark */
.main .card .card-body,
.main .card .card-body p,
.main .card .card-body span,
.main .card .text-body {
    color: #E5E7EB !important;
}

/* Big stat numbers */
.main .card h2,
.main .card h3,
.main .card .h2,
.main .card .h3,
.main .card .display-4,
.main .card .display-5 {
    color: #fff !important;
    text-shadow: 0 0 12px rgba(220, 38, 38, 0.25);
}

/* Small label text under stats */
.main .card .text-muted,
.main .card small,
.main .card .card-subtitle,
.main .card .small {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* Icon backgrounds within stat cards — keep red accent */
.main .card .icon,
.main .card .stats-icon,
.main .card svg,
.main .card i {
    color: #dc2626 !important;
}

/* "View All" / link buttons inside cards */
.main .card a,
.main .card .btn-link {
    color: #dc2626 !important;
}
.main .card a:hover {
    color: #ef4444 !important;
}

/* Page background — slightly off-dark so cards pop */
.main,
.main-content,
#main-content {
    background: #050505 !important;
}

/* Status filter pills row (Unassigned / Accepted / Packaging etc) */
.order-status-bar,
.order-status-tabs {
    background: #0a0a0a !important;
}
.order-status-tabs .btn,
.order-status-bar .btn {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #d1d5db !important;
    border: 1px solid rgba(220, 38, 38, 0.18) !important;
}
.order-status-tabs .btn:hover {
    background: rgba(220, 38, 38, 0.1) !important;
    color: #fff !important;
}
.order-status-tabs .btn.active {
    background: linear-gradient(135deg, #dc2626, #8B1A1A) !important;
    color: #fff !important;
    border-color: #8B1A1A !important;
}

/* Chart wrappers */
.chart-container,
.chartjs-render-monitor,
canvas + .legend {
    color: #d1d5db !important;
}

/* Section headings on dashboard */
.main h4,
.main h5,
.main .h4,
.main .h5 {
    color: #fff !important;
}

/* Tables inside cards */
.main .table {
    color: #E5E7EB !important;
}
.main .table thead th {
    background: rgba(220, 38, 38, 0.1) !important;
    color: #fff !important;
    border-color: rgba(220, 38, 38, 0.2) !important;
}
.main .table tbody td {
    border-color: rgba(255, 255, 255, 0.05) !important;
}
.main .table tbody tr:hover {
    background: rgba(220, 38, 38, 0.08) !important;
}

/* "Demo Module" pill at top in dashboard area — stay red */
.bg--FFE4E4, .bg--FBE9E7 {
    background: rgba(220, 38, 38, 0.15) !important;
    color: #fff !important;
}

/* ════════════ Sidebar ACTIVE item — fully red ════════════ */
/* Stronger override so the active dashboard item has solid red bg + white text */
.navbar-vertical-aside .navbar-nav .nav-item.active > .nav-link,
.navbar-vertical-aside .navbar-nav .nav-link.active,
.navbar-vertical-aside .nav-item.active > .nav-link,
.navbar-vertical-aside .nav-link.active,
.navbar-vertical-aside .navbar-vertical-aside-has-menu.active > .nav-link,
.navbar-vertical-aside li.active > .nav-link,
.navbar-vertical-aside .nav-link[aria-expanded="true"],
.navbar-vertical-aside .nav-link.show {
    background: linear-gradient(135deg, #dc2626 0%, #8B1A1A 100%) !important;
    color: #FFFFFF !important;
    border-color: rgba(220, 38, 38, 0.55) !important;
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.45),
                inset 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
    font-weight: 700 !important;
}
.navbar-vertical-aside .nav-item.active > .nav-link i,
.navbar-vertical-aside .nav-link.active i,
.navbar-vertical-aside .nav-item.active > .nav-link svg,
.navbar-vertical-aside .nav-link.active svg,
.navbar-vertical-aside .navbar-vertical-aside-has-menu.active > .nav-link i {
    color: #FFFFFF !important;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.4));
}
/* Text spans within active item */
.navbar-vertical-aside .nav-item.active > .nav-link span,
.navbar-vertical-aside .nav-link.active span,
.navbar-vertical-aside .nav-link.active .nav-link-title {
    color: #FFFFFF !important;
}
/* ====================================================================
   TABAYYUN — GLOBAL DARK + RED THEME (covers every admin page)
   ==================================================================== */

/* ════════════ TABAYYUN DESIGN TOKENS ════════════ */
:root {
    --tby-bg: #050505;
    --tby-bg-soft: #0F1419;
    --tby-bg-card: #1a0a0a;
    --tby-border: rgba(220, 38, 38, 0.18);
    --tby-border-strong: rgba(220, 38, 38, 0.35);
    --tby-red: #8B1A1A;
    --tby-red-light: #dc2626;
    --tby-red-lighter: #ef4444;
    --tby-text: #E5E7EB;
    --tby-text-dim: rgba(255, 255, 255, 0.6);
    --tby-text-muted: rgba(255, 255, 255, 0.4);
}

/* ════════════ PAGE BACKGROUND ════════════ */
body.bg-light,
.bg-light,
.main,
.main-content,
#main-content,
.page-wrapper,
.app-content,
.bg-body {
    background: var(--tby-bg) !important;
}

/* ════════════ ALL CARDS — Dark + red border ════════════ */
.card,
.card-body,
.card-block,
.dashboard-card,
.box,
.panel,
.widget,
.__dashboard-card-2,
.statistics-card,
.stat-card,
.info-card,
.summary-card,
[class*="-card-"][class*="card"],
[class*="bg-soft-"],
[class*="bg--light"],
[class*="bg-warning-soft"],
[class*="bg-info-soft"],
[class*="bg-success-soft"],
[class*="bg-primary-soft"],
[class*="bg-danger-soft"],
[class*="bg-pastel"],
[class*="bg-soft"] {
    background: linear-gradient(135deg, #0F1419 0%, #1a0a0a 100%) !important;
    border: 1px solid var(--tby-border) !important;
    color: var(--tby-text) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3),
                inset 0 0 0 1px rgba(220, 38, 38, 0.05) !important;
    border-radius: 12px !important;
}

/* Card header */
.card-header,
.card .card-header,
.box-header,
.panel-heading,
.widget-header {
    background: rgba(220, 38, 38, 0.08) !important;
    color: #fff !important;
    border-bottom: 1px solid var(--tby-border) !important;
    border-radius: 12px 12px 0 0 !important;
}
.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6,
.card-header .card-title,
.card-title {
    color: #fff !important;
    font-weight: 700 !important;
}

/* Card footer */
.card-footer {
    background: rgba(0, 0, 0, 0.25) !important;
    border-top: 1px solid var(--tby-border) !important;
    color: var(--tby-text-dim) !important;
}

/* Card text */
.card p,
.card span:not(.badge):not(.btn):not(.tag),
.card label,
.card .text-body {
    color: var(--tby-text) !important;
}
.card .text-muted,
.card small,
.card .small {
    color: var(--tby-text-muted) !important;
}
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6 {
    color: #fff !important;
}

/* Restore badge color overrides inside cards */
.card .badge {
    color: inherit !important;
    background: inherit !important;
}

/* ════════════ STAT CARDS on inner pages (Stores/Items/Customers count) ════════════ */
/* 6amMart uses colored backgrounds for these — paint them all dark */
.dashboard-stats-card,
.statistics-card,
.stats-card-wrapper,
.row .card.bg-pastel,
.bg-pastel-pink,
.bg-pastel-orange,
.bg-pastel-blue,
.bg-pastel-green,
.bg-light-pink,
.bg-light-orange,
.bg-light-yellow,
.bg-light-blue,
.bg-light-green,
.bg-light-cyan,
.bg--FFE4E4,
.bg--FFE0B2,
.bg--FFF3E0,
.bg--E0F7FA,
.bg--E8F5E9,
.bg--FFF8E1,
.bg--F3E5F5,
.bg--FBE9E7,
[style*="background: rgb(255, 228, 228)"],
[style*="background: rgb(255, 243, 224)"],
[style*="background: rgb(232, 245, 233)"],
[style*="background: rgb(224, 247, 250)"] {
    background: linear-gradient(135deg, #0F1419 0%, #1a0a0a 100%) !important;
    border: 1px solid var(--tby-border) !important;
    color: var(--tby-text) !important;
    box-shadow: 0 8px 20px rgba(220, 38, 38, 0.1) !important;
    border-radius: 12px !important;
}

/* Stats card numbers — big bold white */
.dashboard-stats-card h1,
.dashboard-stats-card h2,
.dashboard-stats-card h3,
.statistics-card h1,
.statistics-card h2,
.statistics-card h3,
.statistics-card .count,
.stat-number,
.stats-value {
    color: #fff !important;
    text-shadow: 0 0 12px rgba(220, 38, 38, 0.4) !important;
    font-weight: 800 !important;
}
.dashboard-stats-card p,
.statistics-card p,
.stat-label {
    color: var(--tby-text-dim) !important;
    font-weight: 600 !important;
}

/* Stats icons — keep red glow */
.dashboard-stats-card img,
.statistics-card img,
.stat-icon img {
    filter: drop-shadow(0 0 10px rgba(220, 38, 38, 0.5));
}

/* Transactions summary bar (TOTAL TRANSACTIONS / COMMISSION / WITHDRAWS) */
.transactions-summary,
.dashboard-summary-bar,
[class*="transaction-summary"] {
    background: linear-gradient(135deg, #0F1419 0%, #1a0a0a 100%) !important;
    border: 1px solid var(--tby-border) !important;
    color: var(--tby-text) !important;
    border-radius: 12px !important;
}
.transactions-summary .text-info,
.dashboard-summary-bar .text-info,
.bg--00cc99 + span,
[class*="text--00cc99"] {
    color: var(--tby-red-light) !important;
}

/* ════════════ TABLES — Dark with red headers ════════════ */
.table,
.dataTable,
table.table {
    color: var(--tby-text) !important;
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
.table thead th,
.table-light thead th,
.dataTable thead th,
table thead th {
    background: rgba(220, 38, 38, 0.15) !important;
    color: #fff !important;
    border-color: var(--tby-border) !important;
    border-bottom: 2px solid var(--tby-red-light) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.78rem !important;
}
.table tbody td,
.dataTable tbody td {
    background: transparent !important;
    color: var(--tby-text) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}
.table tbody tr:hover,
.dataTable tbody tr:hover {
    background: rgba(220, 38, 38, 0.08) !important;
}
.table-striped tbody tr:nth-of-type(odd) {
    background: rgba(255, 255, 255, 0.02) !important;
}
/* Strip the orange/peach light table header backgrounds */
.table thead.thead-light,
.thead-light th,
.bg-light th {
    background: rgba(220, 38, 38, 0.15) !important;
    color: #fff !important;
}

/* ════════════ TOGGLE SWITCHES — Red instead of teal ════════════ */
.form-check-input:checked,
.custom-switch .custom-control-input:checked ~ .custom-control-label::before,
.switch input:checked + .slider,
input[type="checkbox"]:checked,
.toggle-switch:checked {
    background-color: var(--tby-red-light) !important;
    border-color: var(--tby-red-light) !important;
}
.form-switch .form-check-input:checked {
    background-color: var(--tby-red-light) !important;
    border-color: var(--tby-red-light) !important;
    box-shadow: 0 0 12px rgba(220, 38, 38, 0.5);
}
/* Generic toggle slider (6amMart custom) */
.switch-input:checked + .switch-label,
.tgl:checked + .tgl-btn {
    background: var(--tby-red-light) !important;
}

/* ════════════ TABS — Red active state ════════════ */
.nav-tabs,
.nav-pills {
    border-bottom: 1px solid var(--tby-border) !important;
}
.nav-tabs .nav-link,
.nav-pills .nav-link {
    color: var(--tby-text-dim) !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    padding: 12px 18px !important;
    font-weight: 600 !important;
}
.nav-tabs .nav-link:hover,
.nav-pills .nav-link:hover {
    color: var(--tby-red-light) !important;
    border-bottom-color: rgba(220, 38, 38, 0.3) !important;
}
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
    color: #fff !important;
    background: rgba(220, 38, 38, 0.1) !important;
    border-bottom: 2px solid var(--tby-red-light) !important;
    box-shadow: 0 -2px 8px rgba(220, 38, 38, 0.2) inset;
}

/* ════════════ FORMS — Dark inputs with red focus ════════════ */
.form-control,
.form-select,
input.form-control,
textarea.form-control,
select.form-control,
select.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
textarea,
.dataTables_filter input,
.select2-selection {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: var(--tby-text) !important;
    border-radius: 8px !important;
}
.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--tby-text-muted) !important;
}
.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: var(--tby-red-light) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18) !important;
    color: #fff !important;
}

/* Labels */
.form-label,
label,
.col-form-label {
    color: var(--tby-text) !important;
    font-weight: 600 !important;
}
label .text-danger,
.text-danger {
    color: var(--tby-red-light) !important;
}

/* Input group addons */
.input-group-text {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--tby-text-dim) !important;
}

/* Select2 dropdown */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--tby-text) !important;
}
.select2-dropdown,
.select2-results__option {
    background: var(--tby-bg-soft) !important;
    color: var(--tby-text) !important;
}
.select2-results__option--highlighted {
    background: var(--tby-red-light) !important;
    color: #fff !important;
}

/* ════════════ BUTTONS — Red theme ════════════ */
.btn-primary,
.btn--primary,
.btn-info,
.btn-success {
    background: linear-gradient(135deg, var(--tby-red-light), var(--tby-red)) !important;
    border-color: var(--tby-red) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.3) !important;
    font-weight: 600 !important;
}
.btn-primary:hover,
.btn--primary:hover,
.btn-info:hover,
.btn-success:hover {
    background: linear-gradient(135deg, #b91c1c, #7a1717) !important;
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.45) !important;
    transform: translateY(-1px);
}
.btn-secondary,
.btn--secondary,
.btn-light {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--tby-text) !important;
}
.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--tby-red-light) !important;
    color: #fff !important;
}
.btn-danger {
    background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
    border-color: #b91c1c !important;
    color: #fff !important;
}
.btn-outline-primary,
.btn-outline--primary,
.btn-outline-info {
    background: transparent !important;
    border-color: var(--tby-red-light) !important;
    color: var(--tby-red-light) !important;
}
.btn-outline-primary:hover,
.btn-outline-info:hover {
    background: var(--tby-red-light) !important;
    color: #fff !important;
}
/* Reset button: outline */
.btn-link,
button[type="reset"] {
    color: var(--tby-text-dim) !important;
}

/* Action icon buttons in tables (eye/edit/trash) — pill style */
.btn-action,
.table .btn-icon,
.table a.btn-sm {
    background: rgba(220, 38, 38, 0.1) !important;
    color: var(--tby-red-light) !important;
    border: 1px solid var(--tby-border) !important;
    border-radius: 8px !important;
}
.btn-action:hover,
.table .btn-icon:hover {
    background: var(--tby-red-light) !important;
    color: #fff !important;
}

/* ════════════ BADGES + STATUS PILLS ════════════ */
.badge-soft-success,
.badge-success {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #4ade80 !important;
}
.badge-soft-danger,
.badge-danger {
    background: rgba(220, 38, 38, 0.18) !important;
    color: var(--tby-red-light) !important;
}
.badge-soft-warning,
.badge-warning {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important;
}
.badge-soft-info,
.badge-info,
.badge-primary,
.badge-soft-primary {
    background: rgba(220, 38, 38, 0.18) !important;
    color: var(--tby-red-light) !important;
}
.badge-soft-secondary,
.badge-secondary {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--tby-text-dim) !important;
}

/* ════════════ MODALS — Dark ════════════ */
.modal-content,
.modal-dialog .modal-content {
    background: linear-gradient(135deg, #0F1419 0%, #14080A 100%) !important;
    border: 1px solid var(--tby-border-strong) !important;
    color: var(--tby-text) !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7),
                0 0 0 1px rgba(220, 38, 38, 0.2) !important;
}
.modal-header {
    background: rgba(220, 38, 38, 0.1) !important;
    border-bottom: 1px solid var(--tby-border) !important;
    color: #fff !important;
}
.modal-header .close,
.modal-header .btn-close {
    filter: invert(1);
}
.modal-footer {
    background: rgba(0, 0, 0, 0.2) !important;
    border-top: 1px solid var(--tby-border) !important;
}
.modal-body {
    color: var(--tby-text) !important;
}
.modal-backdrop {
    background: rgba(0, 0, 0, 0.75) !important;
}

/* ════════════ ALERTS ════════════ */
.alert {
    background: rgba(220, 38, 38, 0.08) !important;
    border-color: var(--tby-border) !important;
    color: var(--tby-text) !important;
    border-radius: 8px !important;
}
.alert-success {
    background: rgba(34, 197, 94, 0.1) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
    color: #86efac !important;
}
.alert-info,
.alert-primary {
    background: rgba(220, 38, 38, 0.1) !important;
    border-color: var(--tby-border-strong) !important;
    color: var(--tby-red-light) !important;
}
.alert-warning {
    background: rgba(245, 158, 11, 0.1) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #fbbf24 !important;
}
.alert-danger {
    background: rgba(220, 38, 38, 0.15) !important;
    border-color: var(--tby-red) !important;
    color: var(--tby-red-light) !important;
}

/* ════════════ BREADCRUMBS ════════════ */
.breadcrumb {
    background: transparent !important;
    padding: 12px 0 !important;
}
.breadcrumb-item a {
    color: var(--tby-red-light) !important;
}
.breadcrumb-item.active {
    color: var(--tby-text-dim) !important;
}

/* ════════════ DROPDOWNS ════════════ */
.dropdown-menu {
    background: var(--tby-bg-soft) !important;
    border: 1px solid var(--tby-border) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
    border-radius: 8px !important;
}
.dropdown-item {
    color: var(--tby-text) !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
    background: rgba(220, 38, 38, 0.15) !important;
    color: #fff !important;
}
.dropdown-divider {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* ════════════ PAGINATION ════════════ */
.pagination .page-link {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--tby-text) !important;
}
.pagination .page-link:hover {
    background: rgba(220, 38, 38, 0.15) !important;
    color: #fff !important;
}
.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, var(--tby-red-light), var(--tby-red)) !important;
    border-color: var(--tby-red) !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(220, 38, 38, 0.4) !important;
}

/* ════════════ TOOLTIP / POPOVER ════════════ */
.tooltip-inner {
    background: var(--tby-red) !important;
    color: #fff !important;
}
.popover {
    background: var(--tby-bg-soft) !important;
    border: 1px solid var(--tby-border-strong) !important;
}
.popover-body {
    color: var(--tby-text) !important;
}

/* ════════════ TEXT COLOR HELPERS ════════════ */
.text-primary,
.text--primary,
.text-info,
.text--info,
.text--00cc99,
.text--00d97e,
.text--107f5e,
.text-cyan,
.text-teal {
    color: var(--tby-red-light) !important;
}
.text-success {
    color: #4ade80 !important;
}

/* ════════════ BACKGROUND HELPERS — Strip teal everywhere ════════════ */
.bg-primary,
.bg--primary,
.bg-info,
.bg--info {
    background: var(--tby-red) !important;
}
.bg-success {
    background: #16a34a !important;
}

/* Page header / titles */
.page-header,
.page-title,
.content-header {
    background: transparent !important;
    color: #fff !important;
}
.page-header h1,
.page-header h2,
.page-header h3,
.page-title h1,
.page-title h2,
.content-header h1 {
    color: #fff !important;
}

/* Header pills (e.g. "Stores 13" header) */
h1, h2, h3, h4, h5, h6 {
    color: #fff !important;
}

/* Top counter pills on dashboard ("Demo Module > Dashboard") */
.module-active-tag,
.active-module-pill {
    background: rgba(220, 38, 38, 0.15) !important;
    color: #fff !important;
    border: 1px solid var(--tby-border-strong) !important;
}

/* ════════════ DATATABLES (used on many list pages) ════════════ */
.dataTables_wrapper {
    color: var(--tby-text) !important;
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    color: var(--tby-text-dim) !important;
}
.dataTables_wrapper .dataTables_filter input {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--tby-text) !important;
}

/* ════════════ EMPTY STATE ILLUSTRATIONS — readable on dark ════════════ */
.empty-state,
.no-data {
    color: var(--tby-text-dim) !important;
}
.empty-state img,
.no-data img {
    opacity: 0.7;
    filter: brightness(1.1) contrast(1.1);
}

/* ════════════ FOOTER ════════════ */
.footer,
footer,
.app-footer,
.main-footer {
    background: var(--tby-bg-soft) !important;
    color: var(--tby-text-dim) !important;
    border-top: 1px solid var(--tby-border) !important;
}
.footer a,
footer a {
    color: var(--tby-red-light) !important;
}

/* ════════════ DATE PICKERS ════════════ */
.flatpickr-calendar {
    background: var(--tby-bg-soft) !important;
    border-color: var(--tby-border-strong) !important;
    color: var(--tby-text) !important;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--tby-red-light) !important;
    border-color: var(--tby-red) !important;
}

/* ════════════ Code / hr / blockquote ════════════ */
hr {
    border-color: var(--tby-border) !important;
}
code {
    background: rgba(220, 38, 38, 0.1) !important;
    color: var(--tby-red-light) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}

/* ════════════ Misc 6amMart bg classes that still slip through ════════════ */
.bg--white,
.bg-white {
    background: var(--tby-bg-soft) !important;
}
[class*="bg-"][class*="-soft"]:not([class*="primary"]):not([class*="danger"]) {
    background: rgba(220, 38, 38, 0.08) !important;
}

/* Specific 6amMart soft tokens that paint colored card backgrounds */
.background-color-FFE4E4,
.background-color-FFF8E1,
.background-color-E0F7FA,
.background-color-E8F5E9,
.background-color-F3E5F5,
.background-color-FBE9E7,
.background--FFE4E4,
.background--FFF8E1 {
    background: linear-gradient(135deg, #0F1419 0%, #1a0a0a 100%) !important;
    color: var(--tby-text) !important;
}
/* ====================================================================
   TABAYYUN — Specific 6amMart Class Overrides (Round 2)
   ==================================================================== */

/* ════════════ Resturant/Store Stat Cards on inner pages ════════════ */
/* 6amMart uses .resturant-card (typo "resturant") with 4 background variants */
.resturant-card,
.resturant-card.card--bg-1,
.resturant-card.card--bg-2,
.resturant-card.card--bg-3,
.resturant-card.card--bg-4,
.resturant-card.card--bg-5 {
    background: linear-gradient(135deg, #0F1419 0%, #1a0a0a 100%) !important;
    border: 1px solid rgba(220, 38, 38, 0.2) !important;
    color: #E5E7EB !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3),
                inset 0 0 0 1px rgba(220, 38, 38, 0.06) !important;
    border-radius: 12px !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.resturant-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(220, 38, 38, 0.25) !important;
    border-color: rgba(220, 38, 38, 0.4) !important;
}

/* Stat numbers & labels inside resturant-card */
.resturant-card h1,
.resturant-card h2,
.resturant-card h3,
.resturant-card .count,
.resturant-card strong {
    color: #fff !important;
    text-shadow: 0 0 12px rgba(220, 38, 38, 0.35) !important;
    font-weight: 800 !important;
}
.resturant-card h5,
.resturant-card h6,
.resturant-card p,
.resturant-card span:not(.badge):not(.btn) {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Icon at top-right of resturant-card */
.resturant-card svg,
.resturant-card img,
.resturant-card .card--icon {
    filter: drop-shadow(0 0 10px rgba(220, 38, 38, 0.5));
}

/* ════════════ Custom 6amMart Toggle Switches ════════════ */
/* The label .toggle-switch wraps an input[type="checkbox"] and uses
   ::before/::after pseudo-elements. Default ON state is teal. */
.toggle-switch,
.toggle-switch.toggle-switch-sm {
    position: relative;
}
.toggle-switch input[type="checkbox"]:checked + .toggle-switch-content,
.toggle-switch input[type="checkbox"]:checked + .toggle-switch-label,
.toggle-switch input[type="checkbox"]:checked ~ .toggle-switch-content {
    background-color: var(--tby-red-light, #dc2626) !important;
}
/* Some 6amMart variants put the ::before on the label itself */
.toggle-switch input[type="checkbox"]:checked ~ span::before,
.toggle-switch input:checked + .toggle-switch__slider {
    background: var(--tby-red-light, #dc2626) !important;
    box-shadow: 0 0 8px rgba(220, 38, 38, 0.5) !important;
}

/* The most aggressive override — target any sibling element after a
   checked checkbox INSIDE a .toggle-switch label */
.toggle-switch input[type="checkbox"]:checked + *,
.toggle-switch input[type="checkbox"]:checked ~ * {
    background-color: var(--tby-red-light, #dc2626) !important;
    border-color: var(--tby-red, #8B1A1A) !important;
}

/* ════════════ Filter teal everywhere via attribute-selector ════════════ */
/* 6amMart uses inline RGB tones for soft backgrounds — strip them all */
[style*="background: rgb(234, 251, 255)"],
[style*="background-color: rgb(234, 251, 255)"],
[style*="background: rgb(255, 247, 231)"],
[style*="background-color: rgb(255, 247, 231)"],
[style*="background: rgb(234, 253, 246)"],
[style*="background-color: rgb(234, 253, 246)"],
[style*="background: rgb(255, 242, 242)"],
[style*="background-color: rgb(255, 242, 242)"] {
    background: linear-gradient(135deg, #0F1419 0%, #1a0a0a 100%) !important;
    color: var(--tby-text, #E5E7EB) !important;
    border-color: var(--tby-border, rgba(220, 38, 38, 0.18)) !important;
}

/* ════════════ "Modules" pill top-right (Demo Module badge) ════════════ */
/* Strip the green icon background and replace with red */
.module-toggle,
.dropdown-toggle.module-toggle,
.btn.module-toggle,
[data-bs-target="#moduleModal"],
.modules-pill,
.navbar [class*="module"] {
    background: linear-gradient(135deg, var(--tby-red-light, #dc2626), var(--tby-red, #8B1A1A)) !important;
    color: #fff !important;
    border: 1px solid var(--tby-red, #8B1A1A) !important;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.4) !important;
}

/* If there's a green basket / module icon SVG, recolor */
.module-toggle svg,
.module-toggle img,
.modules-pill svg {
    filter: brightness(0) invert(1) !important;
}

/* ════════════ Sale chart legend dots ════════════ */
/* Chart.js renders to canvas which we can't recolor, but legend dots
   are SVG sometimes — try to override */
.apexcharts-legend-marker[style*="background"] {
    /* Best-effort — actual canvas is unaffected */
}

/* ════════════ Sidebar Bottom user avatar block ════════════ */
/* The user info at bottom of sidebar (Eng.Meshal Al K... m.khalifah@taba...)
   currently has white text on dark — good. Add red border for polish. */
.navbar-vertical-aside .navbar-vertical-footer,
.navbar-vertical-aside .navbar-vertical-aside-footer,
.navbar-vertical-aside-bottom {
    background: rgba(220, 38, 38, 0.05) !important;
    border-top: 1px solid var(--tby-border, rgba(220, 38, 38, 0.18)) !important;
}

/* ════════════ Sidebar Search Menu input ════════════ */
.navbar-vertical-aside input[type="text"],
.navbar-vertical-aside .form-control,
input.search-menu,
input[placeholder*="Search Menu"] {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(220, 38, 38, 0.2) !important;
    color: #fff !important;
}

/* ════════════ Order status pill ON Dashboard (the colored "Out For Delivery" badges with icons) ════════════ */
/* These exist on the dashboard's order status grid */
.dashboard-status-card,
.order-status-card,
.dashboard-order-card {
    background: linear-gradient(135deg, #0F1419 0%, #1a0a0a 100%) !important;
    border: 1px solid var(--tby-border) !important;
    color: var(--tby-text) !important;
    border-radius: 10px !important;
}

/* Logo "K" collapse toggle in sidebar */
.js-navbar-vertical-aside-toggle-invoker {
    color: var(--tby-red-light, #dc2626) !important;
    background: rgba(220, 38, 38, 0.1) !important;
    border: 1px solid rgba(220, 38, 38, 0.25) !important;
    border-radius: 8px !important;
}

/* ════════════ Form switches everywhere — broader catch ════════════ */
input[type="checkbox"]:checked ~ .toggle-switch-content,
input[type="checkbox"]:checked + .toggle-switch-content,
input[type="checkbox"]:checked + label::after,
input.toggle-switch-input:checked + .toggle-switch-content {
    background-color: var(--tby-red-light, #dc2626) !important;
}

/* Color when toggle off — keep dark */
.toggle-switch-content,
.toggle-switch-label {
    transition: background-color 0.2s ease;
}