/**
 * Yazhoo admin dashboard theme — aligned with nextjs/src/app/globals.css
 */
:root {
    --yazhoo-primary: #a14000;
    --yazhoo-primary-hover: #7d3200;
    --yazhoo-primary-strong: #8a3700;
    --yazhoo-soft: #ffe6d5;
    --yazhoo-tint: #fdf0e8;
    --yazhoo-tint-deep: #ead3b1;
    --yazhoo-accent: #c6704a;
    --yazhoo-navy: #001747;
    --yazhoo-navy-hover: #002a73;
    --yazhoo-ink: #444650;
    --yazhoo-line: #c4c6d2;
    --yazhoo-bg: #f9fafa;
    --yazhoo-surface: #ffffff;
    --yazhoo-footer-link: #7b95df;
    --yazhoo-chart-secondary: #c6704a;
    --yazhoo-chart-light: #ffe6d5;
    --yazhoo-shadow: rgba(161, 64, 0, 0.08);
    --yazhoo-shadow-strong: rgba(161, 64, 0, 0.15);
    --brand-primary: var(--yazhoo-primary);
    --navbar-height: 70px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    background-color: var(--yazhoo-bg) !important;
    color: var(--yazhoo-ink);
    font-family: 'Tajawal', 'Cairo', sans-serif;
}

/* ── Brand text utilities ── */
.color-primary,
.brand-primary {
    color: var(--yazhoo-primary) !important;
}

.brand-navy {
    color: var(--yazhoo-navy) !important;
}

.brand-ink {
    color: var(--yazhoo-ink) !important;
}

.text-primary {
    color: var(--yazhoo-primary) !important;
}

.bg-primary,
.bg-brand-primary {
    background-color: var(--yazhoo-primary) !important;
}

.bg-brand-navy {
    background-color: var(--yazhoo-navy) !important;
}

.bg-secondary {
    background-color: var(--yazhoo-tint-deep) !important;
}

.bg-card {
    background-color: var(--yazhoo-accent) !important;
}

.bg-body {
    background-color: var(--yazhoo-primary) !important;
}

.bg-light {
    background-color: var(--yazhoo-bg) !important;
}

.text-1 {
    color: var(--yazhoo-accent) !important;
}

.text-2 {
    color: var(--yazhoo-primary) !important;
}

/* ── Yazhoo logo block (sidebar / auth) ── */
.yazhoo-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none !important;
    color: inherit;
}

.yazhoo-brand__logo {
    width: 42px;
    height: 42px;
    object-fit: contain;
    flex-shrink: 0;
}

.yazhoo-brand__logo--lg {
    width: 160px;
    height: auto;
    max-height: 56px;
}

.yazhoo-brand__text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.yazhoo-brand__name {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--yazhoo-navy);
}

.yazhoo-brand__tagline {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--yazhoo-ink);
    opacity: 0.75;
}

.sidebar.collapsed .yazhoo-brand__text {
    display: none;
}

.sidebar.collapsed .yazhoo-brand__logo {
    width: 36px;
    height: 36px;
}

/* ── Sidebar ── */
.sidebar {
    background: var(--yazhoo-surface) !important;
    border-left: 1px solid var(--yazhoo-line);
}

.contaner-sidebar {
    border-left: 1px solid var(--yazhoo-line) !important;
    background: var(--yazhoo-surface) !important;
}

.sidebar-heading {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--yazhoo-ink);
    opacity: 0.55;
    padding: 1rem 1.25rem 0.35rem;
}

.sidebar a.nav-link {
    color: var(--yazhoo-ink);
    border-radius: 999px;
    margin: 0.15rem 0.65rem;
    font-weight: 600;
    transition: background 0.2s ease, color 0.2s ease;
}

.sidebar a.nav-link:hover,
.sidebar a.nav-link.active {
    background: var(--yazhoo-soft);
    color: var(--yazhoo-primary) !important;
}

.sidebar a.nav-link.active i {
    color: var(--yazhoo-primary) !important;
}

.sidebar.collapsed a.nav-link.active {
    background: var(--yazhoo-primary);
    color: #fff !important;
}

.sidebar.collapsed a.nav-link.active i {
    color: #fff !important;
}

.sidebar.collapsed a.nav-link:hover:not(.active) {
    background: rgba(161, 64, 0, 0.08);
}

.sidebar-nav-scroll::-webkit-scrollbar-thumb {
    background-color: var(--yazhoo-line);
}

/* ── Top navbar ── */
.admin-topbar {
    background: var(--yazhoo-surface) !important;
    border-bottom: 1px solid var(--yazhoo-line);
    box-shadow: 0 2px 12px var(--yazhoo-shadow);
}

.admin-topbar .btn-light {
    background: var(--yazhoo-tint);
    color: var(--yazhoo-primary);
}

.admin-topbar .btn-light:hover {
    background: var(--yazhoo-soft);
    color: var(--yazhoo-primary-hover);
}

/* ── Cards ── */
.card {
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 24px var(--yazhoo-shadow) !important;
    background-color: var(--yazhoo-surface);
}

.card:hover {
    box-shadow: 0 8px 32px rgba(161, 64, 0, 0.1) !important;
}

/* ── Buttons ── */
.btn-primary {
    color: #fff !important;
    background-color: var(--yazhoo-primary) !important;
    border-color: var(--yazhoo-primary) !important;
    border-radius: 999px;
    font-weight: 700;
}

.btn-primary:hover,
.btn-primary:focus {
    color: #fff !important;
    background-color: var(--yazhoo-primary-hover) !important;
    border-color: var(--yazhoo-primary-hover) !important;
}

.btn-outline-primary {
    color: var(--yazhoo-primary) !important;
    border-color: var(--yazhoo-primary) !important;
    border-radius: 999px;
    font-weight: 700;
}

.btn-outline-primary:hover {
    color: #fff !important;
    background-color: var(--yazhoo-primary) !important;
    border-color: var(--yazhoo-primary) !important;
}

.btn:hover:not(.btn-link):not(.btn-close):not(.btn-outline-secondary):not(.btn-light):not(.btn-outline-light) {
    color: #fff !important;
    background-color: var(--yazhoo-primary-hover) !important;
    border-color: var(--yazhoo-primary-hover) !important;
}

/* ── Links & pagination ── */
a {
    color: var(--yazhoo-primary);
}

a:hover {
    color: var(--yazhoo-primary-hover);
}

.page-link {
    color: var(--yazhoo-primary) !important;
    border-radius: 8px;
}

.active > .page-link,
.page-link.active {
    color: #fff !important;
    background-color: var(--yazhoo-primary) !important;
    border-color: var(--yazhoo-primary) !important;
}

/* ── Forms ── */
.form-check-input:checked {
    background-color: var(--yazhoo-primary) !important;
    border-color: var(--yazhoo-primary) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--yazhoo-primary) !important;
    box-shadow: 0 0 0 0.25rem var(--yazhoo-shadow-strong) !important;
}

.border-primary {
    border-color: var(--yazhoo-primary) !important;
}

/* ── Nav pills (payments, wallets, etc.) ── */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--yazhoo-primary) !important;
}

.nav-pills .nav-link {
    color: var(--yazhoo-ink);
    border-radius: 999px;
    font-weight: 600;
}

/* ── Toasts ── */
.custom-toast {
    border-right-color: var(--yazhoo-primary) !important;
}

.toast-icon {
    background: rgba(161, 64, 0, 0.12) !important;
    color: var(--yazhoo-primary) !important;
}

/* ── Auth shell ── */
.auth-shell {
    background: linear-gradient(135deg, var(--yazhoo-tint) 0%, var(--yazhoo-bg) 55%, #fff 100%);
    min-height: 100vh;
}

.login-card {
    border: none;
    border-radius: 20px;
    box-shadow: 0 8px 32px var(--yazhoo-shadow);
    overflow: hidden;
    background: #fff;
}

.login-header {
    background-color: var(--yazhoo-tint);
    padding: 2rem 2rem 1rem;
    border-bottom: 1px solid var(--yazhoo-soft);
    text-align: center;
}

.login-body {
    padding: 2rem;
}

.login-card .btn-primary {
    background: linear-gradient(135deg, var(--yazhoo-primary) 0%, var(--yazhoo-primary-hover) 100%) !important;
}

.login-card .form-control {
    border-radius: 999px;
}

/* ── Tables ── */
.table > :not(caption) > * > * {
    border-bottom-color: #f1ebe4;
}

.table tbody tr:hover {
    background-color: #fdfbf7;
}

/* ── Badges using brand tint ── */
.badge.bg-secondary.bg-opacity-10 {
    background-color: var(--yazhoo-tint) !important;
    color: var(--yazhoo-primary) !important;
}

/* ── Scrollbar (match Next.js globals) ── */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f5f5f5;
}

::-webkit-scrollbar-thumb {
    background: rgba(161, 64, 0, 0.45);
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(161, 64, 0, 0.7);
}