/* =====================================================
   site.css (v2.3)
   - ثبات أكبر مع محركات CSS + تحسينات هاتف (موحّدة)
   ===================================================== */

@font-face {
    font-family: 'Tajawal';
    src: url('/fonts/Tajawal-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tajawal';
    src: url('/fonts/Tajawal-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tajawal';
    src: url('/fonts/Tajawal-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tajawal';
    src: url('/fonts/Tajawal-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* ===== أساسيات + iPhone Safe Area + خطوط ===== */
:root {
    color-scheme: light dark;
    --font-base: 'Tajawal', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
    --brand: #0ea5a5;
    --brand-contrast: #ffffff;
    --primary: var(--brand);
    --primary-contrast: var(--brand-contrast);
    --success: #16a34a;
    --warning: #eab308;
    --danger: #ef4444;
    --info: #0ea5e9;
    --muted: #6b7280;
    --nav-h: 56px; /* ارتفاع النافبار الافتراضي */
}

@media (min-width:768px) {
    :root {
        --nav-h: 64px;
    }
}

html, body {
    height: 100%;
}

body {
    font-family: var(--font-base);
    margin: 0;
    min-height: 100vh;
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    background: var(--surface,#fff);
    color: var(--text,#111);
    transition: background .3s ease, color .2s ease;
    line-height: 1.6;
}

#pageNavProgress {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand), var(--info));
    transform: scaleX(0);
    transform-origin: right center;
    opacity: 0;
    transition: transform .28s ease, opacity .2s ease;
    z-index: 2000;
    pointer-events: none;
}

#pageNavProgress.is-active {
    opacity: 1;
    transform: scaleX(.88);
}

body.is-navigating {
    cursor: progress;
}

#mainContent {
    transition: opacity .12s ease, transform .12s ease;
}

#mainContent.is-page-swapping {
    opacity: .72;
    transform: translateY(3px);
    pointer-events: none;
}

/* رابط تخطي للمحتوى */
.skip-link.visually-hidden-focusable:focus {
    position: absolute;
    z-index: 1080;
    top: .5rem;
    inset-inline-start: .5rem;
    background: #000;
    color: #fff;
    padding: .5rem .75rem;
    border-radius: .5rem;
}

/* ===== الثيمات (8) ===== */
.theme-aurora {
    --surface: linear-gradient(135deg,#f8ffff 0%,#e9fbf7 100%);
    --text: #0f172a;
    --navbar-bg: linear-gradient(90deg,#0ea5a5,#0284c7);
    --navbar-fg: #fff;
    --navbar-type: dark;
    --accent: #14b8a6;
    --theme-color: #0ea5a5;
}

.theme-sunset {
    --surface: linear-gradient(135deg,#fff7ed 0%,#fffbf5 100%);
    --text: #111827;
    --navbar-bg: linear-gradient(90deg,#f97316,#ec4899);
    --navbar-fg: #fff;
    --navbar-type: dark;
    --accent: #f59e0b;
    --theme-color: #f97316;
}

.theme-forest {
    --surface: linear-gradient(135deg,#f4fff7,#ddf5e2);
    --text: #0b1f14;
    --navbar-bg: linear-gradient(90deg,#16a34a,#059669);
    --navbar-fg: #fff;
    --navbar-type: dark;
    --accent: #22c55e;
    --theme-color: #16a34a;
}

.theme-lavender {
    --surface: linear-gradient(135deg,#f8f5ff,#f1ecff);
    --text: #1f1147;
    --navbar-bg: linear-gradient(90deg,#8b5cf6,#a78bfa);
    --navbar-fg: #fff;
    --navbar-type: dark;
    --accent: #a78bfa;
    --theme-color: #8b5cf6;
}

.theme-ocean {
    --surface: linear-gradient(135deg,#eef6ff,#e0f2fe);
    --text: #0b1220;
    --navbar-bg: linear-gradient(90deg,#0ea5e9,#2563eb);
    --navbar-fg: #fff;
    --navbar-type: dark;
    --accent: #38bdf8;
    --theme-color: #0ea5e9;
}

.theme-sand {
    --surface: linear-gradient(135deg,#fff9e6,#fff2cc);
    --text: #2b1700;
    --navbar-bg: linear-gradient(90deg,#eab308,#f59e0b);
    --navbar-fg: #1f2937;
    --navbar-type: light;
    --accent: #d97706;
    --theme-color: #f59e0b;
}

.theme-graphite {
    --surface: #121315;
    --text: #e5e7eb;
    --navbar-bg: #1f2937;
    --navbar-fg: #fff;
    --navbar-type: dark;
    --accent: #64748b;
    --theme-color: #1f2937;
}

.theme-midnight {
    --surface: #0b0c0f;
    --text: #e6e6e6;
    --navbar-bg: #111827;
    --navbar-fg: #f3f4f6;
    --navbar-type: dark;
    --accent: #4b5563;
    --theme-color: #111827;
}

/* تطبيق الثيم */
body {
    background: var(--surface);
    color: var(--text);
}

/* ===== النافبار ===== */
.navbar-custom {
    background: var(--navbar-bg) !important;
    transition: background .3s ease, color .2s ease;
}

    .navbar-custom .navbar-brand, .navbar-custom .nav-link:not(.btn) {
        color: var(--navbar-fg) !important;
    }

.navbar-brand .bi {
    color: var(--brand);
}

/* أزرار النافبار + أزرار الموبايل */
.btn-nav {
    background: transparent;
    color: var(--navbar-fg) !important;
    border: 1px solid var(--navbar-fg) !important;
    border-radius: .6rem;
    padding-inline: .65rem;
    padding-block: .4rem;
    transition: transform .15s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}

.navbar-light .btn-nav:hover {
    background: rgba(0,0,0,.06);
}

.navbar-dark .btn-nav:hover {
    background: rgba(255,255,255,.12);
}

.btn-nav:focus {
    outline: none;
    box-shadow: 0 0 0 .2rem rgba(255,255,255,.15);
}

.btn-nav .bi {
    color: inherit;
}

.btn-nav.active {
    background: rgba(255,255,255,.15);
    background: color-mix(in srgb, var(--navbar-fg) 15%, transparent);
}

/* Offcanvas */
.offcanvas {
    padding-bottom: env(safe-area-inset-bottom);
}

    .offcanvas .btn-nav {
        color: var(--text) !important;
        border-color: color-mix(in srgb, var(--text) 40%, transparent) !important;
    }

        .offcanvas .btn-nav:hover {
            background: color-mix(in srgb, var(--text) 10%, transparent);
        }

        .offcanvas .btn-nav.active {
            background: color-mix(in srgb, var(--text) 14%, transparent);
            border-color: var(--text) !important;
        }

        .offcanvas .btn-nav .bi {
            color: inherit !important;
        }

/* أفاتار */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.15);
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
}

.avatar-sm {
    width: 28px;
    height: 28px;
    font-size: .8rem;
}

/* nav pills (قديم) */
.nav-pills .nav-link {
    border-radius: .6rem;
    color: #fff !important;
    background-color: rgba(0,0,0,.22);
    border: none;
    transition: background-color .2s;
}

    .nav-pills .nav-link:hover {
        background-color: rgba(0,0,0,.36);
    }

    .nav-pills .nav-link.active {
        background-color: rgba(0,0,0,.5);
        font-weight: 600;
    }

/* بطاقات */
.card {
    border: none;
    border-radius: .9rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    overflow: hidden;
    background: rgba(255,255,255,.9);
}

.theme-graphite .card, .theme-midnight .card {
    background: rgba(30,32,36,.9);
}

.card-header {
    background: var(--navbar-bg);
    color: #fff;
    border: 0;
    text-align: center;
    padding: 1rem;
}

.btn-gradient {
    background: var(--navbar-bg);
    color: #fff;
    border: none;
    border-radius: .6rem;
    transition: transform .15s ease, box-shadow .2s ease;
}

    .btn-gradient:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0,0,0,.2);
    }

/* الحاوية */
.page-container {
    min-height: calc(100vh - 120px);
}

/* قائمة الثيم */
.theme-menu {
    min-width: 260px;
}

    .theme-menu .dropdown-item.theme-opt {
        display: flex;
        align-items: center;
        gap: .6rem;
    }

    .theme-menu .dropdown-item .swatch {
        inline-size: 18px;
        block-size: 18px;
        border-radius: .4rem;
        background: var(--sw,currentColor);
        border: 1px solid rgba(0,0,0,.15);
    }

/* ألوان دلالية (fallback + srgb) */
.alert-primary {
    background: rgba(0,0,0,.03);
    background: color-mix(in srgb, var(--primary) 16%, transparent);
    border-color: var(--primary);
    color: var(--text);
}

.alert-success {
    background: rgba(0,0,0,.03);
    background: color-mix(in srgb, var(--success) 16%, transparent);
    border-color: var(--success);
    color: var(--text);
}

.alert-warning {
    background: rgba(0,0,0,.03);
    background: color-mix(in srgb, var(--warning) 18%, transparent);
    border-color: var(--warning);
    color: var(--text);
}

.alert-danger {
    background: rgba(0,0,0,.03);
    background: color-mix(in srgb, var(--danger) 14%, transparent);
    border-color: var(--danger);
    color: var(--text);
}

/* زر أساسي */
.btn-primary {
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: #0b8d8d; /* fallback */
    --bs-btn-hover-bg: color-mix(in srgb, var(--primary) 85%, black);
    --bs-btn-hover-border-color: #0b8d8d; /* fallback */
    --bs-btn-hover-border-color: color-mix(in srgb, var(--primary) 85%, black);
    --bs-btn-color: var(--primary-contrast);
}

/* حالات التحقق */
.form-control.is-invalid, .was-validated .form-control:invalid {
    border-color: var(--danger);
    box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--danger) 25%, transparent);
}

.invalid-feedback {
    color: color-mix(in srgb, var(--danger) 90%, black);
}

.form-check-input.is-invalid, .was-validated .form-check-input:invalid {
    border-color: var(--danger);
}

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

/* إدارة الألوان */
.palette-btn {
    border: 1px dashed var(--navbar-fg) !important;
}

.palette-sample {
    width: 100%;
    height: 36px;
    border-radius: .5rem;
    border: 1px solid rgba(0,0,0,.08);
}

.palette-row {
    display: grid;
    grid-template-columns: 140px 1fr auto;
    gap: .5rem;
    align-items: center;
}

.token-badge {
    font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
    background: rgba(0,0,0,.06);
    border-radius: .4rem;
    padding: .15rem .4rem;
}

/* الخط */
.font-chip, .font-opt {
    font-family: var(--font-base);
}

    .font-chip.active, .font-opt.active {
        pointer-events: none;
    }

.font-preview {
    border: 1px solid rgba(0,0,0,.12);
    background: rgba(0,0,0,.03);
}

.theme-graphite .font-preview, .theme-midnight .font-preview {
    background: rgba(255,255,255,.03);
    border-color: rgba(255,255,255,.16);
}

/* Responsive */
@media (max-width:576px) {
    .nav-pills {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

        .nav-pills .nav-link {
            white-space: nowrap;
            font-size: .95rem;
        }

    .palette-row {
        grid-template-columns: 120px 1fr;
    }
}

/* تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation-duration: .01ms !important;
    }
}

/* طباعة */
@media print {
    .navbar, .offcanvas, footer {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
    }
}

/* فوكس وإتاحة */
:focus-visible {
    outline: 2px dashed color-mix(in srgb, var(--primary) 55%, #000);
    outline-offset: 2px;
}

/* زر ثانوي متوافق مع الداكن */
.btn-outline-secondary {
    --bs-btn-color: var(--text);
    --bs-btn-border-color: rgba(0,0,0,.25);
}

.theme-graphite .btn-outline-secondary, .theme-midnight .btn-outline-secondary {
    --bs-btn-color: #e5e7eb;
    --bs-btn-border-color: rgba(255,255,255,.25);
}

/* ===== Kerosene 1 UI (Scoped) ===== */
.kero1-page {
    direction: rtl;
}

    /* أحجام دنيا داخل الصفحة فقط */
    .kero1-page .minw-140 {
        min-width: 140px;
    }

    .kero1-page .minw-220 {
        min-width: 220px;
    }

/* تبويبات أوضح */
.kero-tabs .nav-link {
    border-radius: .75rem;
    padding: .5rem 1rem;
    font-weight: 700;
    color: #fff;
    background: #0ea5a5; /* fallback */
    background: color-mix(in srgb, var(--accent) 45%, #0a6b6b);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

    .kero-tabs .nav-link.active {
        background: #0b8d8d; /* fallback */
        background: color-mix(in srgb, var(--accent) 65%, #064e4e);
        border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    }

/* KPIs */
.kpi .kpi-label {
    font-size: .85rem;
    color: var(--muted);
}

.kpi .kpi-value {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    font-size: 1.35rem;
}

.kpi-profit .kpi-value {
    color: var(--success);
}

.kpi-collect .kpi-value {
    color: var(--info);
}
/* لون ديناميكي للربح/الخسارة */
.kpi-profit .kpi-value.positive {
    color: #198754;
}

.kpi-profit .kpi-value.negative {
    color: #dc3545;
}

/* شريط مصغر داخل KPI */
.kpi-microbar {
    height: 6px;
    border-radius: 4px;
    background: var(--bs-secondary-bg);
    overflow: hidden;
}

    .kpi-microbar > span {
        display: block;
        height: 100%;
        background: var(--bs-primary);
    }

/* شارة حالة الدورة */
#cycleStateHint {
    vertical-align: middle;
}

/* شريط الفلاتر sticky بمتغير ارتفاع */
.sticky-filters {
    position: sticky;
    top: var(--nav-h);
    z-index: 100;
}

@media (max-width:576px) {
    .sticky-filters {
        top: calc(var(--nav-h) - 8px);
    }
}

/* غطاء انتظار موضعي للبطاقات */
.kero-blocker {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.6);
    backdrop-filter: blur(1px);
    z-index: 5;
    border-radius: .6rem;
}

/* Skeletons */
.skeleton {
    background: linear-gradient(90deg, rgba(0,0,0,.06), rgba(0,0,0,.12), rgba(0,0,0,.06));
    background-size: 200% 100%;
    animation: skel 1.2s ease-in-out infinite;
    border-radius: .25rem;
}

@keyframes skel {
    0% {
        background-position: 200% 0
    }

    100% {
        background-position: -200% 0
    }
}

.skeleton-row td {
    padding: .8rem .5rem;
}

.skeleton-chip {
    height: 1rem;
}

.skeleton-wide {
    height: 1.2rem;
}

.theme-graphite .skeleton, .theme-midnight .skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.12), rgba(255,255,255,.06));
}

/* جداول + عمود إجراءات sticky (يدعم RTL/LTR) */
.kero-table-wrap {
    max-height: 60vh;
    overflow: auto;
}

table.table-card {
    font-size: .95rem;
}

.table-card thead th {
    position: sticky;
    top: 0;
    z-index: 3;
}

    .table-card thead th.sticky-actions,
    .table-card tbody td.sticky-actions {
        position: sticky;
        inset-inline-end: 0;
        z-index: 2;
        background: var(--bs-body-bg);
    }

.table-card tbody tr:hover td.sticky-actions {
    background: var(--bs-tertiary-bg);
}

/* مؤشّر فرز */
th[data-sort-field] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

    th[data-sort-field] .sort-ind {
        opacity: .5;
        margin-inline-start: .35rem;
    }

/* تحويل الجداول إلى بطاقات على الشاشات الصغيرة (طريقة موحّدة) */
@media (max-width:576px) {
    .kero-table-wrap {
        max-height: none;
        overflow: visible;
    }

    .table-card thead {
        display: none;
    }

    .table-card, .table-card tbody, .table-card tr, .table-card td {
        display: block;
        width: 100%;
    }

        .table-card tr {
            margin-bottom: .75rem;
            border: 1px solid var(--bs-border-color);
            border-radius: .5rem;
            overflow: hidden;
            background: var(--bs-body-bg);
        }

        .table-card td {
            display: flex;
            justify-content: space-between;
            gap: .75rem;
            padding: .65rem .75rem;
            border: none;
            border-bottom: 1px solid var(--bs-border-color);
        }

            .table-card td:last-child {
                border-bottom: none;
            }

            .table-card td::before {
                content: attr(data-label);
                color: var(--bs-secondary-color);
                font-weight: 600;
            }

            .table-card td.sticky-actions {
                position: static;
                background: transparent;
            }
}

/* Bottom bar للموبايل */
.kero-bottombar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,.95);
    border-top: 1px solid var(--bs-border-color);
    padding: .5rem .75rem;
    display: none;
    gap: .5rem;
    z-index: 1060;
    backdrop-filter: blur(4px);
}

@media (max-width:576px) {
    .kero-bottombar {
        display: flex;
    }
}

/* تحسين تباين الجداول على الثيم الداكن (اختياري لكنه مفيد) */
.theme-graphite .table, .theme-midnight .table {
    --bs-body-color: #e5e7eb;
    --bs-secondary-color: #cbd5e1;
    --bs-border-color: rgba(255,255,255,.12);
}



.offcanvas.offcanvas-bottom {
    z-index: 1100;
}