/* ============ Khatab Group — الوضع الداكن + التجاوب مع الهاتف ============
   يعتمد على Bootstrap 5.3 (data-bs-theme) مع ربط ألوانه بمتغيرات الهوية --kg-*
   ليتغيّر كل شيء (حقول، جداول، قوائم، نوافذ، تنبيهات) تلقائيًا بين الوضعين. */

:root {
    --kg-input-bg: #FFFFFF;
    --kg-th-bg: #F1ECDD;
    --kg-th-color: #4B4225;
    --kg-link: #8A6A14;
    --kg-hover: rgba(201, 162, 39, .10);
    color-scheme: light;
}

[data-theme="dark"] {
    --kg-input-bg: #14120E;
    --kg-th-bg: #2A2416;
    --kg-th-color: #E8C766;
    --kg-link: #E8C766;
    --kg-hover: rgba(224, 185, 58, .12);
    --kg-success: #4FD08E;
    --kg-danger: #FF7A70;
    --kg-warning: #F2B84B;
    color-scheme: dark;
}

/* ---- ربط متغيرات Bootstrap بألوان الهوية ---- */
[data-bs-theme] {
    --bs-body-bg: var(--kg-bg);
    --bs-body-color: var(--kg-text);
    --bs-emphasis-color: var(--kg-text);
    --bs-secondary-color: var(--kg-text-muted);
    --bs-tertiary-color: var(--kg-text-muted);
    --bs-secondary-bg: var(--kg-th-bg);
    --bs-tertiary-bg: var(--kg-th-bg);
    --bs-border-color: var(--kg-border);
    --bs-link-color: var(--kg-link);
    --bs-link-hover-color: var(--kg-gold);
    --bs-link-color-rgb: 138, 106, 20;
    --bs-heading-color: var(--kg-text);
}
[data-theme="dark"] { --bs-link-color-rgb: 232, 199, 102; }

body { color: var(--kg-text); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--kg-text); }
.kg-content a:not(.btn):not(.dropdown-item):not(.kg-iconbtn):not(.page-link),
.kg-portal-content a:not(.btn):not(.kg-iconbtn) { color: var(--kg-link); }
.text-muted, .form-text, small.text-muted { color: var(--kg-text-muted) !important; }
[data-theme="dark"] .text-danger { color: var(--kg-danger) !important; }
[data-theme="dark"] .text-success { color: var(--kg-success) !important; }
[data-theme="dark"] .text-warning { color: var(--kg-warning) !important; }
.text-success { color: var(--kg-success) !important; }
.text-danger { color: var(--kg-danger) !important; }

/* ---- الحقول ---- */
.form-control, .form-select {
    background-color: var(--kg-input-bg);
    color: var(--kg-text);
    border-color: var(--kg-border);
}
.form-control::placeholder { color: var(--kg-text-muted); opacity: .7; }
.form-control:disabled, .form-select:disabled, .form-control[readonly] {
    background-color: var(--kg-th-bg); color: var(--kg-text-muted); opacity: 1;
}
.form-control:focus, .form-select:focus {
    background-color: var(--kg-input-bg); color: var(--kg-text);
    border-color: var(--kg-gold);
    box-shadow: 0 0 0 .2rem rgba(201, 162, 39, .25);
}
.form-label { color: var(--kg-text); font-weight: 600; font-size: .88rem; margin-bottom: .25rem; }
.form-check-input { background-color: var(--kg-input-bg); border-color: var(--kg-border); }
.form-check-input:checked { background-color: var(--kg-gold); border-color: var(--kg-gold); }
.form-check-input:focus { border-color: var(--kg-gold); box-shadow: 0 0 0 .2rem rgba(201, 162, 39, .25); }
.input-group-text { background: var(--kg-th-bg); color: var(--kg-text); border-color: var(--kg-border); }
.invalid-feedback, .field-validation-error { color: var(--kg-danger); }
[data-theme="dark"] .form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23B4A98C' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }

/* ---- الأزرار ---- */
.btn-outline-secondary {
    --bs-btn-color: var(--kg-text-muted);
    --bs-btn-border-color: var(--kg-border);
    --bs-btn-hover-color: var(--kg-text);
    --bs-btn-hover-bg: var(--kg-th-bg);
    --bs-btn-hover-border-color: var(--kg-gold);
    --bs-btn-active-color: #14120E;
    --bs-btn-active-bg: var(--kg-gold);
    --bs-btn-active-border-color: var(--kg-gold);
}
.btn-outline-primary {
    --bs-btn-color: var(--kg-link);
    --bs-btn-border-color: var(--kg-link);
    --bs-btn-hover-color: #14120E;
    --bs-btn-hover-bg: var(--kg-gold);
    --bs-btn-hover-border-color: var(--kg-gold);
    --bs-btn-active-color: #14120E;
    --bs-btn-active-bg: var(--kg-gold);
    --bs-btn-active-border-color: var(--kg-gold);
}
.btn-outline-danger { --bs-btn-color: var(--kg-danger); --bs-btn-border-color: var(--kg-danger); --bs-btn-hover-bg: var(--kg-danger); --bs-btn-hover-border-color: var(--kg-danger); --bs-btn-hover-color: #fff; }
.btn-kg-dark { background: var(--kg-black); border-color: var(--kg-gold-dark); color: #fff; }
[data-theme="dark"] .btn-kg-dark { background: #2A2416; border-color: var(--kg-border); color: var(--kg-gold-light); }
[data-theme="dark"] .btn-kg-dark:hover { background: #3A3120; color: #fff; }
.btn-close { filter: none; }
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }

/* ---- الجداول ---- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--kg-text);
    --bs-table-border-color: var(--kg-border);
    --bs-table-hover-bg: var(--kg-hover);
    --bs-table-hover-color: var(--kg-text);
    --bs-table-striped-bg: var(--kg-hover);
    --bs-table-striped-color: var(--kg-text);
    color: var(--kg-text);
}
.table > thead > tr > th {
    background: var(--kg-th-bg); color: var(--kg-th-color);
    font-size: .84rem; font-weight: 700; white-space: nowrap; border-bottom-color: var(--kg-border);
}
.table > :not(caption) > * > * { background-color: transparent; box-shadow: none; }
.table > tbody > tr:hover > * { background-color: var(--kg-hover); }
.table > tbody > tr.table-danger > * { background-color: color-mix(in srgb, var(--kg-danger) 13%, transparent); }
.table > tbody > tr.table-warning > * { background-color: color-mix(in srgb, var(--kg-warning) 16%, transparent); }
.table > tbody > tr.table-success > * { background-color: color-mix(in srgb, var(--kg-success) 13%, transparent); }
.table > tbody > tr.table-light > * { background-color: var(--kg-th-bg); color: var(--kg-th-color); }
.table > tbody > tr.table-danger > *, .table > tbody > tr.table-warning > *, .table > tbody > tr.table-success > * { color: var(--kg-text); }
.kg-card.p-0 { overflow: hidden; }
.kg-card.p-0 > .table { margin-bottom: 0; }

/* ---- القوائم والنوافذ والتنبيهات ---- */
.dropdown-menu {
    --bs-dropdown-bg: var(--kg-surface); --bs-dropdown-color: var(--kg-text);
    --bs-dropdown-border-color: var(--kg-border); --bs-dropdown-link-color: var(--kg-text);
    --bs-dropdown-link-hover-bg: var(--kg-hover); --bs-dropdown-link-hover-color: var(--kg-text);
    box-shadow: var(--kg-shadow);
}
.modal-content { --bs-modal-bg: var(--kg-surface); --bs-modal-color: var(--kg-text); --bs-modal-border-color: var(--kg-border); }
.list-group { --bs-list-group-bg: var(--kg-surface); --bs-list-group-color: var(--kg-text); --bs-list-group-border-color: var(--kg-border); --bs-list-group-action-hover-bg: var(--kg-hover); --bs-list-group-action-hover-color: var(--kg-text); }
.alert { border-radius: var(--kg-radius-sm); }
.badge.text-bg-light { background-color: var(--kg-th-bg) !important; color: var(--kg-th-color) !important; }
.badge.text-bg-secondary { background-color: var(--kg-th-bg) !important; color: var(--kg-th-color) !important; border: 1px solid var(--kg-border); }
.bg-body-secondary { background-color: var(--kg-th-bg) !important; }
hr { border-color: var(--kg-border); opacity: 1; }
.border, .border-top, .border-bottom { border-color: var(--kg-border) !important; }
.text-dark { color: var(--kg-text) !important; }
.btn-check:checked + .btn-outline-secondary { background: var(--kg-gold); border-color: var(--kg-gold); color: #14120E; }
::selection { background: rgba(201, 162, 39, .35); }

/* ---- الشريط العلوي/الشريط الجانبي ---- */
.kg-topbar { background: var(--kg-surface); }
.kg-iconbtn { color: var(--kg-text); }
[data-theme="dark"] .kg-sidebar { background: #0E0C09; border-inline-end: 1px solid var(--kg-border); }
[data-theme="dark"] .kg-portal-header { background: #0E0C09; border-bottom: 1px solid var(--kg-border); }
.kg-backdrop { display: none; }

/* ---- صفحة الدخول ---- */
.kg-login__card { background: var(--kg-surface); color: var(--kg-text); }
.kg-login__card h4 { color: var(--kg-text) !important; }

/* ---- بطاقات المنتجات في المتجر ---- */
.kg-product-card { background: var(--kg-surface); color: var(--kg-text); }

/* ================= الهاتف ================= */
@media (max-width: 992px) {
    .kg-sidebar { box-shadow: 0 0 40px rgba(0, 0, 0, .5); width: min(84vw, 300px); }
    .kg-backdrop.show { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 1025; }
}

@media (max-width: 767.98px) {
    html { font-size: 14px; }
    body { -webkit-text-size-adjust: 100%; }

    .kg-content { padding: .75rem; }
    .kg-portal-content { padding: .75rem; }
    .kg-topbar { height: 52px; padding: 0 .6rem; }
    .kg-topbar strong { font-size: .95rem; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
    .kg-topbar__actions { gap: .3rem; }
    .kg-iconbtn { width: 34px; height: 34px; font-size: .95rem; border-radius: 8px; }
    .kg-topbar .btn { padding: .25rem .5rem; font-size: .8rem; }

    h4, .h4 { font-size: 1.1rem; }
    h5, .h5 { font-size: 1rem; }
    h6, .h6 { font-size: .92rem; }

    .kg-card { padding: .8rem; border-radius: 10px; }
    .kg-stat { gap: .6rem; }
    .kg-stat__icon { width: 40px; height: 40px; font-size: 1.15rem; border-radius: 10px; }
    .kg-stat__value { font-size: 1.05rem !important; }
    .kg-stat__label { font-size: .74rem; }

    /* حقول وأزرار مصغّرة */
    .form-control, .form-select { padding: .32rem .6rem; font-size: .88rem; min-height: 34px; border-radius: 8px; }
    .form-control-lg, .form-select-lg { padding: .4rem .7rem; font-size: .95rem; min-height: 38px; }
    textarea.form-control { min-height: 60px; }
    .btn { padding: .32rem .7rem; font-size: .85rem; border-radius: 8px; }
    .btn-lg { padding: .45rem .9rem; font-size: .95rem; }
    .btn-sm { padding: .2rem .5rem; font-size: .78rem; }
    .form-label { font-size: .8rem; margin-bottom: .15rem; }
    .row { --bs-gutter-x: .6rem; --bs-gutter-y: .5rem; }
    .g-3, .gy-3 { --bs-gutter-y: .6rem; }
    .mb-3 { margin-bottom: .7rem !important; }
    .alert { padding: .5rem .75rem; font-size: .85rem; }
    .badge { font-size: .7rem; }

    /* نموذج الأزرار الرئيسية في رأس الصفحة */
    .d-flex.justify-content-between.align-items-center { flex-wrap: wrap; gap: .5rem; }

    /* ---- الجداول → بطاقات ---- */
    .kg-content .table:not(.no-cards),
    .kg-portal-content .table:not(.no-cards) { display: block; width: 100%; border: 0; }
    .kg-content .table:not(.no-cards) thead,
    .kg-portal-content .table:not(.no-cards) thead { display: none; }
    .kg-content .table:not(.no-cards) tbody,
    .kg-portal-content .table:not(.no-cards) tbody { display: block; }
    .kg-content .table:not(.no-cards) tbody tr,
    .kg-portal-content .table:not(.no-cards) tbody tr {
        display: block; background: var(--kg-surface); border: 1px solid var(--kg-border);
        border-radius: 10px; padding: .35rem .75rem; margin-bottom: .6rem; box-shadow: var(--kg-shadow);
    }
    .kg-content .table:not(.no-cards) tbody tr.table-danger { background: color-mix(in srgb, var(--kg-danger) 12%, var(--kg-surface)); }
    .kg-content .table:not(.no-cards) tbody tr.table-warning { background: color-mix(in srgb, var(--kg-warning) 14%, var(--kg-surface)); }
    .kg-content .table:not(.no-cards) tbody tr.table-light { background: var(--kg-th-bg); }
    .kg-content .table:not(.no-cards) tbody tr > *,
    .kg-portal-content .table:not(.no-cards) tbody tr > * {
        display: flex; justify-content: space-between; align-items: center; gap: .75rem;
        padding: .28rem 0 !important; border: 0 !important; background: transparent !important;
        text-align: end; font-size: .86rem; word-break: break-word;
    }
    .kg-content .table:not(.no-cards) tbody tr > *:not(:last-child),
    .kg-portal-content .table:not(.no-cards) tbody tr > *:not(:last-child) { border-bottom: 1px dashed var(--kg-border) !important; }
    .kg-content .table:not(.no-cards) tbody tr > *::before,
    .kg-portal-content .table:not(.no-cards) tbody tr > *::before {
        content: attr(data-label); color: var(--kg-text-muted); font-weight: 600; font-size: .75rem;
        text-align: start; flex-shrink: 0;
    }
    .table tbody td[data-label=""]::before, .table tbody td:not([data-label])::before { display: none !important; }
    .table tbody td[data-label=""] { justify-content: flex-end; gap: .4rem; }
    .table tbody td[colspan] { justify-content: center !important; text-align: center; }
    .table tbody td input.form-control, .table tbody td .form-select { max-width: 58%; width: auto !important; min-width: 80px; }
    .table tbody td .btn { padding: .2rem .55rem; }
    .kg-card.p-0:has(> .table) { background: transparent; border: 0; box-shadow: none; overflow: visible; }

    /* بطاقات إحصاء صغيرة */
    .kg-product-card__img { height: 120px; }
    .kg-product-card__body { padding: .6rem; }
    .kg-product-card__name { font-size: .85rem; }

    /* النوافذ بملء الشاشة */
    .modal-dialog { margin: .5rem; }
    .kg-portal-header { padding: .5rem .75rem; }
    .kg-portal-brand span { font-size: .9rem; }
    .kg-portal-brand img { height: 32px; }
    .kg-login__card { padding: 1.4rem; }
    .kg-login__logo img { height: 76px; }

    /* أزرار الإجراءات الطويلة تتمدد */
    .kg-card form .btn[type="submit"].w-100 { padding: .5rem; }
}

/* منع تكبير iOS التلقائي عند التركيز على الحقول */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 767.98px) {
        .form-control, .form-select { font-size: 16px; }
    }
}

code { color: var(--kg-link); background: transparent; }
@media (max-width: 767.98px) {
    .kg-content .table:not(.no-cards) tbody tr > *, .kg-portal-content .table:not(.no-cards) tbody tr > * { padding: .2rem 0 !important; font-size: .84rem; }
    .kg-content .table:not(.no-cards) tbody tr > *:first-child { font-weight: 700; }
    .kg-content .table:not(.no-cards) tbody tr { padding: .3rem .7rem; }
}

.validation-summary-valid, .alert:empty { display: none !important; }

/* ================= تجربة التطبيق (PWA) ================= */
html { -webkit-tap-highlight-color: transparent; }
body { overscroll-behavior-y: none; }
a, button, .btn, .kg-iconbtn, select, label, summary { touch-action: manipulation; }
.kg-nav a, .kg-iconbtn, .btn { -webkit-user-select: none; user-select: none; }

/* حواف آمنة (نوتش/الشريط السفلي) عند التشغيل كتطبيق */
.kg-topbar { padding-top: env(safe-area-inset-top); height: calc(62px + env(safe-area-inset-top)); }
.kg-portal-header { padding-top: calc(.75rem + env(safe-area-inset-top)); }
.kg-content, .kg-portal-content { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
.kg-sidebar { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
@media (max-width: 767.98px) {
    .kg-topbar { height: calc(52px + env(safe-area-inset-top)); }
    .kg-portal-header { padding-top: calc(.5rem + env(safe-area-inset-top)); }
}
@media (display-mode: standalone) { body { user-select: none; -webkit-user-select: none; } input, textarea, .table, .kg-card { user-select: text; -webkit-user-select: text; } }

/* شريط التثبيت السفلي */
.kg-install-banner {
    position: fixed; inset-inline: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); z-index: 1100;
    display: flex; align-items: center; gap: .7rem; padding: .6rem .75rem;
    background: linear-gradient(135deg, #1E1A10, #0E0C09); color: #EFE8D8;
    border: 1px solid rgba(232, 199, 102, .35); border-radius: 16px; box-shadow: 0 10px 34px rgba(0, 0, 0, .45);
    transform: translateY(140%); transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.kg-install-banner.show { transform: translateY(0); }
.kg-install-banner img { width: 44px; height: 44px; border-radius: 11px; flex-shrink: 0; }
.kg-install-banner .t { flex: 1; display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.kg-install-banner .t b { font-size: .9rem; color: #E8C766; }
.kg-install-banner .t span { font-size: .72rem; color: #B4A98C; }
.kg-install-banner .go { border: 0; border-radius: 10px; padding: .4rem .9rem; font-weight: 700; font-size: .85rem; background: linear-gradient(135deg, #E8C766, #C9A227); color: #14120E; }
.kg-install-banner .x { border: 0; background: transparent; color: #B4A98C; font-size: 1.4rem; line-height: 1; padding: 0 .2rem; }

/* صفحة التثبيت */
.kg-install-page { background: radial-gradient(circle at 50% 0%, #2A2210 0%, var(--kg-bg) 55%) fixed; min-height: 100vh; }
.kg-install { max-width: 560px; margin: 0 auto; padding: calc(1.5rem + env(safe-area-inset-top)) 1rem calc(2rem + env(safe-area-inset-bottom)); }
.kg-install__hero { text-align: center; padding: 1rem 0 1.4rem; }
.kg-install__icon { width: 132px; height: 132px; border-radius: 30px; box-shadow: 0 14px 44px rgba(201, 162, 39, .35), 0 0 0 1px rgba(232, 199, 102, .3); margin-bottom: 1rem; }
.kg-install__hero h1 { font-size: 1.5rem; font-weight: 800; color: var(--kg-gold); margin-bottom: .5rem; }
.kg-install__hero p { color: var(--kg-text-muted); font-size: .92rem; line-height: 1.9; max-width: 420px; margin: 0 auto 1rem; }
.kg-install__cta { padding: .7rem 2rem; border-radius: 14px; box-shadow: 0 8px 24px rgba(201, 162, 39, .35); }
.kg-install__state { display: inline-flex; gap: .4rem; align-items: center; color: var(--kg-success); font-weight: 700; }
.kg-install__features { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-bottom: 1.2rem; }
.kg-install__features div { background: var(--kg-surface); border: 1px solid var(--kg-border); border-radius: 12px; padding: .7rem .3rem; text-align: center; font-size: .7rem; color: var(--kg-text); display: flex; flex-direction: column; gap: .3rem; }
.kg-install__features i { font-size: 1.3rem; color: var(--kg-gold); }
.kg-install__card { background: var(--kg-surface); border: 1px solid var(--kg-border); border-radius: 14px; padding: 1rem 1.1rem; margin-bottom: .8rem; box-shadow: var(--kg-shadow); transition: opacity .2s; }
.kg-install__card.kg-dim { opacity: .55; }
.kg-install__card h2 { font-size: 1rem; font-weight: 700; margin-bottom: .6rem; color: var(--kg-text); }
.kg-install__card h2 i { color: var(--kg-gold); margin-inline-end: .3rem; }
.kg-install__card ol { margin: 0; padding-inline-start: 1.2rem; font-size: .88rem; line-height: 2; color: var(--kg-text); }
.kg-chip { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 .3rem; border-radius: 7px; background: var(--kg-th-bg); color: var(--kg-gold); border: 1px solid var(--kg-border); vertical-align: middle; }
.kg-install__qr { display: flex; align-items: center; gap: 1rem; margin-top: .8rem; padding-top: .8rem; border-top: 1px dashed var(--kg-border); font-size: .8rem; color: var(--kg-text-muted); }
.kg-install__qr #qr { background: #fff; padding: 6px; border-radius: 10px; line-height: 0; }

/* نافذة إضافة عميل داخل الفاتورة (بدون فتح نافذة جديدة) */
.kg-embedded .kg-sidebar, .kg-embedded .kg-topbar, .kg-embedded .kg-install-banner, .kg-embedded .kg-print-header { display: none !important; }
.kg-embedded .kg-main { margin: 0 !important; }
.kg-embedded .kg-content { padding: .75rem; }
.kg-embedded body { background: transparent; }