@php $rtl = app()->getLocale() === 'ar'; @endphp
<style>
    :root {
        --admin-sidebar-width: 268px;
        --admin-bg: #f4f6fb;
        --admin-sidebar-bg: #101828;
        --admin-sidebar-muted: #98a2b3;
        --admin-accent: #1570ef;
    }

    body {
        background: var(--admin-bg);
        font-family: {{ $rtl ? "'Cairo', " : '' }}system-ui, -apple-system, 'Segoe UI', sans-serif;
        font-size: 0.925rem;
    }

    .admin-shell { display: flex; min-height: 100vh; }

    .admin-sidebar {
        width: var(--admin-sidebar-width);
        flex: 0 0 var(--admin-sidebar-width);
        background: var(--admin-sidebar-bg);
        color: #fff;
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
    }

    .admin-sidebar .brand {
        padding: 1.15rem 1.25rem;
        font-weight: 700;
        font-size: 1.05rem;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
        display: flex;
        align-items: center;
        gap: .6rem;
    }

    .admin-sidebar .nav-heading {
        padding: 1rem 1.25rem .35rem;
        font-size: .72rem;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--admin-sidebar-muted);
    }

    .admin-sidebar .nav-link {
        color: #d0d5dd;
        padding: .55rem 1.25rem;
        display: flex;
        align-items: center;
        gap: .65rem;
        border-radius: 0;
        font-size: .9rem;
    }

    .admin-sidebar .nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }

    .admin-sidebar .nav-link.active {
        background: rgba(21, 112, 239, .18);
        color: #fff;
        box-shadow: inset {{ $rtl ? '-3px' : '3px' }} 0 0 var(--admin-accent);
    }

    .admin-sidebar .nav-link i { font-size: 1.05rem; width: 1.25rem; text-align: center; }

    .admin-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

    .admin-navbar {
        background: #fff;
        border-bottom: 1px solid #e4e7ec;
        padding: .7rem 1.5rem;
        position: sticky;
        top: 0;
        z-index: 20;
    }

    .admin-content { padding: 1.5rem; flex: 1 1 auto; }

    .card { border: 1px solid #e4e7ec; border-radius: .75rem; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
    .card-header { background: #fff; border-bottom: 1px solid #eef0f4; font-weight: 600; }

    .stat-card { border-radius: .75rem; }
    .stat-card .stat-icon {
        width: 46px; height: 46px; border-radius: .65rem;
        display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem;
    }
    .stat-card .stat-value { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }

    table.dataTable { font-size: .875rem; }
    table.dataTable thead th { background: #f9fafb; font-weight: 600; white-space: nowrap; }
    table.dataTable td { vertical-align: middle; }

    /* DataTables hard-codes left alignment on headers; make every table follow the page direction. */
    html[dir="rtl"] .table > thead > tr > th,
    html[dir="rtl"] .table > thead > tr > td,
    html[dir="rtl"] table.dataTable > thead > tr > th,
    html[dir="rtl"] table.dataTable > thead > tr > td { text-align: right; }

    /* The sort arrows are pinned to the right edge — flip them to the left in RTL. */
    html[dir="rtl"] table.dataTable > thead > tr > th.dt-orderable-asc,
    html[dir="rtl"] table.dataTable > thead > tr > th.dt-orderable-desc,
    html[dir="rtl"] table.dataTable > thead > tr > th.dt-ordering-asc,
    html[dir="rtl"] table.dataTable > thead > tr > th.dt-ordering-desc {
        padding-right: .5rem;
        padding-left: 30px;
    }

    html[dir="rtl"] table.dataTable > thead > tr > th span.dt-column-order {
        right: auto;
        left: 12px;
    }
    .dt-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: .45rem; border: 1px solid #e4e7ec; }
    div.dt-container .dt-search input { min-width: 220px; }

    .form-label { font-weight: 600; font-size: .85rem; margin-bottom: .3rem; }
    .required::after { content: ' *'; color: #d92d20; }
    .image-preview { max-height: 110px; border-radius: .5rem; border: 1px solid #e4e7ec; }

    .select2-container--bootstrap-5 .select2-selection { min-height: calc(1.5em + .75rem + 2px); }

    @media (max-width: 991.98px) {
        .admin-sidebar { position: fixed; z-index: 1040; transform: translateX({{ $rtl ? '100%' : '-100%' }}); transition: transform .2s; {{ $rtl ? 'right' : 'left' }}: 0; }
        .admin-sidebar.open { transform: translateX(0); }
        .admin-content { padding: 1rem; }
    }
</style>