/* ═══════════════════════════════════════════════════════════
   BatchRecall — نظام إدارة العيوب واستدعاء المنتجات المعيبة
   المالك: ProExcel Business Systems — تصميم احترافي RTL
   ═══════════════════════════════════════════════════════════ */

/* ─── خط Cairo المحلي ─── */
@font-face {
    font-family: 'Cairo';
    src: url('../fonts/Cairo-Regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Cairo';
    src: url('../fonts/Cairo-SemiBold.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Cairo';
    src: url('../fonts/Cairo-Bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}

/* ─── المتغيرات ─── */
:root {
    --c-brand: #0b5563;
    --c-brand-2: #0e7490;
    --c-brand-soft: #e0f2f5;
    --c-ink: #10222b;
    --c-mut: #5b6b76;
    --c-bg: #eef2f5;
    --c-card: #ffffff;
    --c-line: #dde5ea;
    --c-side: #0a2730;
    --c-side-2: #0e3a46;
    --c-side-txt: #b8ccd4;
    --c-ok: #16a34a;   --c-ok-bg: #e7f7ee;
    --c-warn: #b45309; --c-warn-bg: #fdf3e3;
    --c-err: #dc2626;  --c-err-bg: #fdeaea;
    --c-info: #0891b2; --c-info-bg: #e3f5fa;
    --rad: 12px;
    --rad-sm: 8px;
    --shadow: 0 1px 3px rgba(15, 35, 44, .08), 0 4px 14px rgba(15, 35, 44, .06);
    --shadow-lg: 0 8px 30px rgba(10, 39, 48, .16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0; font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
    color: var(--c-ink); background: var(--c-bg); font-size: 14.5px; line-height: 1.65;
}
a { color: var(--c-brand-2); text-decoration: none; }
a:hover { color: var(--c-brand); }
h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 700; line-height: 1.35; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; }
p { margin: 0 0 .8em; }
[dir="ltr"] body, [dir="ltr"] { font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif; }

/* ═══════════ التخطيط العام ═══════════ */
.app-body { min-height: 100vh; }
.layout { display: flex; min-height: 100vh; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.content { padding: 22px 26px; flex: 1; }
.app-foot {
    display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    padding: 10px 26px; border-top: 1px solid var(--c-line);
    color: var(--c-mut); font-size: .8rem; background: var(--c-card);
}

/* ═══════════ القائمة الجانبية ═══════════ */
.sidebar {
    width: 264px; background: linear-gradient(180deg, var(--c-side), var(--c-side-2));
    color: var(--c-side-txt); display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh; overflow-y: auto; flex-shrink: 0;
}
.brand { display: flex; gap: 10px; align-items: center; padding: 18px 16px 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand-mark {
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--c-brand-2), #14b8c6); color: #fff;
    border-radius: 10px; font-weight: 700; font-size: .9rem;
}
.brand-logo { border-radius: 8px; object-fit: contain; }
.brand-name { color: #fff; font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
.brand-sub { font-size: .72rem; opacity: .75; }
.snav { padding: 10px 10px 16px; flex: 1; }
.snav-sec { margin-bottom: 3px; border-radius: 10px; }
.snav-sec.sec-active { background: rgba(255,255,255,.06); }
.snav-head {
    display: flex; align-items: center; gap: 8px; width: 100%;
    background: none; border: 0; color: var(--c-side-txt); cursor: pointer;
    padding: 10px 10px; font: inherit; font-weight: 600; font-size: .88rem; text-align: start;
    border-radius: 8px;
}
.snav-head:hover { color: #fff; background: rgba(255,255,255,.05); }
.snav-arrow { transition: transform .2s; font-size: .75rem; opacity: .7; width: 14px; }
.snav-sec.open .snav-arrow, .snav-sec.sec-active .snav-arrow { transform: rotate(0deg); }
.snav-items { padding: 2px 0 6px 14px; display: flex; flex-direction: column; gap: 2px; }
[dir="ltr"] .snav-items { padding: 2px 14px 6px 0; }
.snav-link {
    display: block; color: var(--c-side-txt); padding: 7px 12px; border-radius: 8px;
    font-size: .85rem; position: relative;
}
.snav-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.snav-link.cur { color: #fff; background: var(--c-brand-2); box-shadow: 0 2px 8px rgba(14, 116, 144, .5); }
.snav-link.cur::before {
    content: ''; position: absolute; inset-inline-start: -14px; top: 20%; bottom: 20%;
    width: 3px; border-radius: 3px; background: #2dd4ee;
}
.snav-exit { margin-top: 8px; color: #f4b8b8; }
.snav-exit:hover { background: rgba(220, 38, 38, .25); color: #fff; }
.side-foot { padding: 12px 16px; font-size: .7rem; opacity: .55; border-top: 1px solid rgba(255,255,255,.08); }

/* ═══════════ الشريط العلوي ═══════════ */
.topbar {
    display: flex; align-items: center; gap: 14px; padding: 10px 26px;
    background: var(--c-card); border-bottom: 1px solid var(--c-line);
    position: sticky; top: 0; z-index: 40;
}
.topbar-title { font-weight: 700; font-size: 1.02rem; flex: 1; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.top-ico {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px; border-radius: 10px; background: var(--c-bg);
    font-size: 1rem; color: var(--c-brand); border: 1px solid var(--c-line);
}
.top-ico:hover { background: var(--c-brand-soft); }
.alerts-count {
    position: absolute; top: -6px; inset-inline-end: -6px; background: var(--c-err); color: #fff;
    border-radius: 99px; font-size: .68rem; min-width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; font-weight: 700;
}
.user-chip { display: flex; align-items: center; gap: 9px; }
.user-ava {
    width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--c-brand), var(--c-brand-2));
    color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
}
.user-name { font-weight: 700; font-size: .85rem; line-height: 1.2; display: block; }
.user-role { font-size: .7rem; color: var(--c-mut); display: block; }
.burger { display: none; background: none; border: 1px solid var(--c-line); border-radius: 8px; font-size: 1.1rem; padding: 4px 10px; cursor: pointer; color: var(--c-brand); }

/* شريط الديمو */
.demo-strip {
    background: repeating-linear-gradient(135deg, #7c2d12, #7c2d12 18px, #9a3412 18px, #9a3412 36px);
    color: #fff; padding: 7px 18px; font-size: .8rem; font-weight: 600; text-align: center;
}
.demo-strip .demo-exit { color: #fff; text-decoration: underline; margin-inline-start: 8px; font-weight: 700; }

/* ═══════════ البطاقات والشبكات ═══════════ */
.card { background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--rad); box-shadow: var(--shadow); margin-bottom: 18px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--c-line); flex-wrap: wrap; }
.card-head h3 { margin: 0; font-size: .98rem; }
.card-body, .pad { padding: 18px; }
.grid-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.grid-charts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grid23 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }

.kpi {
    background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--rad);
    padding: 14px 16px; box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.kpi::after { content: ''; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px; background: var(--c-brand-2); }
.kpi.k-ok::after { background: var(--c-ok); } .kpi.k-err::after { background: var(--c-err); }
.kpi.k-warn::after { background: var(--c-warn); } .kpi.k-info::after { background: var(--c-info); }
.kpi-lbl { color: var(--c-mut); font-size: .78rem; font-weight: 600; }
.kpi-val { font-size: 1.55rem; font-weight: 700; line-height: 1.25; }
.kpi-sub { font-size: .72rem; color: var(--c-mut); }
.kpi-ico { position: absolute; inset-inline-end: 12px; top: 10px; font-size: 1.25rem; opacity: .22; }

/* ═══════════ الأزرار ═══════════ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: var(--c-card); border: 1px solid var(--c-line); color: var(--c-ink);
    border-radius: var(--rad-sm); padding: 7px 15px; font: inherit; font-size: .85rem;
    font-weight: 600; cursor: pointer; transition: .15s; text-decoration: none; line-height: 1.4;
}
.btn:hover { border-color: var(--c-brand-2); color: var(--c-brand); background: var(--c-brand-soft); }
.btn-primary { background: var(--c-brand-2); border-color: var(--c-brand-2); color: #fff; }
.btn-primary:hover { background: var(--c-brand); color: #fff; }
.btn-danger { background: #fff; border-color: #f3c1c1; color: var(--c-err); }
.btn-danger:hover { background: var(--c-err-bg); border-color: var(--c-err); color: var(--c-err); }
.btn-ok { background: #fff; border-color: #b9e2c8; color: var(--c-ok); }
.btn-ok:hover { background: var(--c-ok-bg); border-color: var(--c-ok); }
.btn-sm { padding: 4px 10px; font-size: .78rem; border-radius: 7px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* ═══════════ النماذج ═══════════ */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.form-grid .full { grid-column: 1 / -1; }
.fld label { display: block; font-size: .8rem; font-weight: 700; margin-bottom: 5px; color: var(--c-ink); }
.fld label .req { color: var(--c-err); }
.fld input, .fld select, .fld textarea, .input {
    width: 100%; border: 1px solid var(--c-line); border-radius: var(--rad-sm);
    padding: 8px 11px; font: inherit; font-size: .88rem; background: #fff; color: var(--c-ink);
}
.fld input:focus, .fld select:focus, .fld textarea:focus, .input:focus {
    outline: 0; border-color: var(--c-brand-2); box-shadow: 0 0 0 3px rgba(14, 116, 144, .13);
}
.fld textarea { min-height: 84px; resize: vertical; }
.fld .hint { font-size: .72rem; color: var(--c-mut); margin-top: 3px; }
.fld-err input, .fld-err select, .fld-err textarea { border-color: var(--c-err); }
.form-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.form-err { background: var(--c-err-bg); color: var(--c-err); border: 1px solid #f3c1c1; border-radius: var(--rad-sm); padding: 10px 14px; margin-bottom: 14px; font-size: .85rem; }
.fieldset-note { background: var(--c-info-bg); border: 1px solid #b6e2ee; color: #075985; border-radius: var(--rad-sm); padding: 9px 13px; font-size: .8rem; margin-bottom: 14px; }

/* ═══════════ الجداول ═══════════ */
.table-wrap { overflow-x: auto; border-radius: var(--rad); }
table.tbl { width: 100%; border-collapse: collapse; font-size: .84rem; }
.tbl th {
    background: #f4f8fa; color: var(--c-ink); text-align: start; font-weight: 700;
    padding: 9px 12px; border-bottom: 2px solid var(--c-line); white-space: nowrap; font-size: .78rem;
}
.tbl td { padding: 8px 12px; border-bottom: 1px solid var(--c-line); vertical-align: middle; }
.tbl tr:nth-child(even) tbody tr:nth-child(even), .tbl tbody tr:nth-child(even) { background: #f9fbfc; }
.tbl tbody tr:hover { background: var(--c-brand-soft); }
.tbl .num { text-align: center; white-space: nowrap; direction: ltr; }
.tbl .actions-cell { white-space: nowrap; display: flex; gap: 5px; }
.tbl .mono { font-family: 'Courier New', monospace; font-weight: 700; color: var(--c-brand); white-space: nowrap; }
tr.row-closed td { opacity: .55; }
tr.row-overdue td:first-child { box-shadow: inset 3px 0 0 var(--c-err); }

/* ═══════════ شريط الفلاتر ═══════════ */
.filters {
    display: flex; flex-wrap: wrap; gap: 9px; align-items: flex-end;
    background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--rad);
    padding: 13px 16px; margin-bottom: 16px; box-shadow: var(--shadow);
}
.filters .fld { min-width: 140px; flex: 0 1 auto; margin: 0; }
.filters .fld input, .filters .fld select { padding: 6px 9px; font-size: .8rem; }
.filters .fld label { font-size: .7rem; margin-bottom: 3px; }
.filters .f-grow { flex: 1; min-width: 180px; }
.filters-actions { display: flex; gap: 8px; margin-inline-start: auto; }

/* ═══════════ الشارات والرسائل ═══════════ */
.badge {
    display: inline-flex; align-items: center; gap: 4px; border-radius: 99px;
    padding: 2px 10px; font-size: .73rem; font-weight: 700; white-space: nowrap; line-height: 1.6;
}
.bg-gray { background: #eef1f4; color: #5b6b76; border: 1px solid #d8dfe5; }
.flash {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    border-radius: var(--rad-sm); padding: 11px 15px; margin-bottom: 13px;
    font-weight: 600; font-size: .87rem; border: 1px solid transparent;
}
.flash-ok { background: var(--c-ok-bg); color: #14683a; border-color: #b9e2c8; }
.flash-err { background: var(--c-err-bg); color: #a02020; border-color: #f3c1c1; }
.flash-warn { background: var(--c-warn-bg); color: #8a4308; border-color: #f0d9ae; }
.flash-info { background: var(--c-info-bg); color: #076b83; border-color: #b6e2ee; }
.flash-x { background: none; border: 0; font-size: 1rem; cursor: pointer; color: inherit; opacity: .6; }

.empty-state { text-align: center; padding: 44px 20px; color: var(--c-mut); }
.empty-ico { font-size: 2.2rem; margin-bottom: 8px; opacity: .5; }

/* ═══════════ الترقيم الصفحي ═══════════ */
.pagination { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 13px 4px 0; flex-wrap: wrap; }
.pg-info { color: var(--c-mut); font-size: .78rem; }
.pg-links { display: flex; gap: 4px; flex-wrap: wrap; }
.pg {
    min-width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--c-line); border-radius: 7px; padding: 0 8px; font-size: .8rem; background: #fff;
}
.pg:hover { border-color: var(--c-brand-2); color: var(--c-brand); }
.pg-act { background: var(--c-brand-2); border-color: var(--c-brand-2); color: #fff; font-weight: 700; }
.pg-dis { opacity: .4; pointer-events: none; }
.pg-dots { color: var(--c-mut); padding: 0 2px; }

/* ═══════════ المرفقات والتنبيهات ═══════════ */
.att-list { display: flex; flex-direction: column; gap: 7px; }
.att-item {
    display: flex; align-items: center; gap: 10px; border: 1px solid var(--c-line);
    border-radius: var(--rad-sm); padding: 7px 11px; background: #fbfcfd; font-size: .82rem; flex-wrap: wrap;
}
.att-ico { width: 34px; height: 34px; border-radius: 8px; background: var(--c-brand-soft); color: var(--c-brand); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .68rem; }
.att-name { font-weight: 600; word-break: break-all; }
.att-meta { color: var(--c-mut); font-size: .72rem; }
.alert-row { display: flex; gap: 12px; padding: 12px 15px; border-bottom: 1px solid var(--c-line); align-items: flex-start; }
.alert-row.read { opacity: .55; background: #fafbfc; }
.alert-bar { width: 4px; border-radius: 4px; align-self: stretch; flex-shrink: 0; }

/* ═══════════ شاشة الدخول ═══════════ */
.login-body { background: linear-gradient(140deg, var(--c-side) 0%, var(--c-brand) 55%, #127a8e 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card { background: #fff; border-radius: 18px; box-shadow: var(--shadow-lg); width: 100%; max-width: 410px; padding: 30px 28px; }
.login-logo { text-align: center; margin-bottom: 14px; }
.login-title { text-align: center; font-size: 1.2rem; font-weight: 700; margin-bottom: 3px; }
.login-sub { text-align: center; color: var(--c-mut); font-size: .8rem; margin-bottom: 20px; }
.login-foot { text-align: center; margin-top: 16px; font-size: .8rem; }
.login-strip { background: rgba(255,255,255,.12); color: #e6f4f8; padding: 5px; text-align: center; font-size: .78rem; border-radius: 8px; margin-top: 12px; }

/* ═══════════ الموقع العام ═══════════ */
.pub-body { background: #fff; }
.pub-container { max-width: 1120px; margin: 0 auto; padding: 0 22px; }
.pub-header { background: var(--c-side); color: #fff; position: sticky; top: 0; z-index: 30; box-shadow: var(--shadow); }
.pub-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 22px; flex-wrap: wrap; }
.pub-brand { display: flex; align-items: center; gap: 10px; }
.pub-brand .brand-logo, .pub-brand .brand-mark { background: rgba(255,255,255,.12); }
.pub-brand-name { font-weight: 700; font-size: 1.05rem; }
.pub-brand-sub { font-size: .7rem; opacity: .7; }
.pub-links { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; font-size: .85rem; }
.pub-links a { color: #d4e5eb; }
.pub-links a:hover { color: #fff; }
.pub-links .pub-lang { border: 1px solid rgba(255,255,255,.3); border-radius: 8px; padding: 3px 9px; font-weight: 700; }
.pub-hero { background: linear-gradient(150deg, var(--c-side) 10%, var(--c-brand) 60%, #12839a); color: #fff; padding: 64px 0 70px; }
.pub-hero-inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 34px; align-items: center; }
.pub-hero h1 { font-size: 1.75rem; line-height: 1.5; }
.pub-hero .hero-sub-badge { display: inline-block; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); border-radius: 99px; padding: 4px 15px; font-size: .8rem; font-weight: 700; margin-bottom: 14px; }
.pub-hero p { color: #d8e8ed; font-size: .95rem; }
.pub-hero-actions { display: flex; gap: 11px; margin-top: 20px; flex-wrap: wrap; }
.pub-cta-box {
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15); border-radius: 16px;
    padding: 22px; backdrop-filter: blur(3px);
}
.pub-cta-box h3 { font-size: 1rem; }
.pub-cta-list { list-style: none; padding: 0; margin: 0; font-size: .85rem; color: #d8e8ed; }
.pub-cta-list li { padding: 5px 0; display: flex; gap: 8px; align-items: start; }
.pub-cta-list .tick { color: #5eead4; font-weight: 700; }
.pub-section { padding: 56px 0; }
.pub-section.alt { background: #f6f9fa; }
.pub-sec-head { max-width: 720px; margin-bottom: 28px; }
.pub-sec-head h2 { font-size: 1.35rem; color: var(--c-brand); }
.pub-sec-head p { color: var(--c-mut); }
.pub-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pub-feat { background: #fff; border: 1px solid var(--c-line); border-radius: 14px; padding: 20px; box-shadow: var(--shadow); }
.pub-feat .f-ico { width: 42px; height: 42px; border-radius: 11px; background: var(--c-brand-soft); color: var(--c-brand); display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; margin-bottom: 10px; }
.pub-feat h3 { font-size: .95rem; }
.pub-feat p { color: var(--c-mut); font-size: .84rem; margin: 0; }
.pub-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pub-points li { background: #fff; border: 1px solid var(--c-line); border-radius: 12px; padding: 14px 16px; font-size: .87rem; display: flex; gap: 10px; box-shadow: var(--shadow); }
.pub-points .tick { color: var(--c-brand-2); font-weight: 700; }
.pub-contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pub-contact-card { background: var(--c-side); color: #fff; border-radius: 14px; padding: 22px; text-align: center; }
.pub-contact-card .c-ico { font-size: 1.5rem; margin-bottom: 8px; }
.pub-contact-card .c-lbl { color: #9fc1cc; font-size: .75rem; margin-bottom: 4px; }
.pub-contact-card .c-val { font-weight: 700; word-break: break-all; }
.pub-footer { background: var(--c-side); color: #b8ccd4; padding: 22px 0; margin-top: 40px; }
.pub-foot-txt { font-weight: 600; margin-bottom: 3px; color: #e2eef3; }
.pub-foot-copy { font-size: .78rem; }

/* ═══════════ الرسوم البيانية ═══════════ */
.chart-box { padding: 15px 16px 10px; }
.chart-box h4 { font-size: .87rem; margin: 0 0 8px; color: var(--c-ink); }
.chart-holder { width: 100%; min-height: 190px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: .72rem; color: var(--c-mut); padding: 6px 2px 4px; }
.chart-legend .lg { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend .lg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.chart-empty { color: var(--c-mut); font-size: .8rem; text-align: center; padding: 42px 10px; }

/* ═══════════ صفحات الطباعة ═══════════ */
.print-body { background: #eef1f4; padding: 24px 12px; }
.print-sheet { background: #fff; max-width: 940px; margin: 0 auto; padding: 34px 38px; border-radius: 10px; box-shadow: var(--shadow); }
.print-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; border-bottom: 3px solid var(--c-brand); padding-bottom: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.print-brand { display: flex; gap: 10px; align-items: center; }
.print-sys { font-weight: 700; font-size: 1.1rem; color: var(--c-brand); }
.print-company { color: var(--c-mut); font-size: .8rem; }
.print-meta { text-align: end; }
.print-title { font-weight: 700; font-size: 1.05rem; }
.print-sub { color: var(--c-mut); font-size: .78rem; }
.print-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.pf-chip { background: var(--c-brand-soft); color: var(--c-brand); border-radius: 99px; padding: 2px 11px; font-size: .73rem; font-weight: 700; }
.print-foot { border-top: 1px solid var(--c-line); margin-top: 22px; padding-top: 10px; color: var(--c-mut); font-size: .74rem; text-align: center; }
.print-actions { max-width: 940px; margin: 16px auto 0; display: flex; gap: 10px; }
.print-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 16px; }
.print-summary .ps-cell { border: 1px solid var(--c-line); border-radius: 10px; padding: 10px 12px; background: #f8fafb; }
.ps-lbl { font-size: .72rem; color: var(--c-mut); }
.ps-val { font-weight: 700; font-size: 1.05rem; }

@media print {
    body { background: #fff; }
    .print-body { padding: 0; }
    .print-sheet { box-shadow: none; max-width: none; border-radius: 0; padding: 0; }
    .print-actions, .no-print, .sidebar, .topbar, .app-foot, .flash, .filters, .btn { display: none !important; }
    .tbl th { background: #eceff2 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .badge, .kpi { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .tbl td, .tbl th { padding: 5px 8px; font-size: 11px; }
    .print-content table { page-break-inside: auto; }
    tr { page-break-inside: avoid; }
}

/* ═══════════ الاستجابة ═══════════ */
@media (max-width: 1080px) {
    .grid-kpi { grid-template-columns: repeat(3, 1fr); }
    .grid-charts { grid-template-columns: 1fr; }
    .pub-feats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
    .grid-kpi, .form-grid, .grid2, .grid3, .grid23 { grid-template-columns: 1fr 1fr; }
    .pub-hero-inner { grid-template-columns: 1fr; }
    .pub-contact-grid { grid-template-columns: 1fr; }
    .pub-points { grid-template-columns: 1fr; }
    .sidebar { position: fixed; inset-inline-start: -290px; top: 0; bottom: 0; z-index: 60; transition: inset-inline-start .25s; height: 100dvh; }
    .sidebar.open { inset-inline-start: 0; box-shadow: var(--shadow-lg); }
    .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(9, 30, 39, .45); z-index: 55; }
    .sidebar-backdrop.show { display: block; }
    .burger { display: inline-flex; }
    .content { padding: 14px; }
    .user-txt { display: none; }
}
@media (max-width: 560px) {
    .grid-kpi, .form-grid, .grid2, .grid3, .grid23, .pub-feats { grid-template-columns: 1fr; }
    .filters .fld { min-width: calc(50% - 9px); }
}

/* ═══════════ أدوات مساعدة ═══════════ */
.muted { color: var(--c-mut); }
.small { font-size: .78rem; }
.mt { margin-top: 14px; } .mb { margin-bottom: 14px; }
.flex { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.flex-between { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.sep { border: 0; border-top: 1px solid var(--c-line); margin: 14px 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { background: var(--c-brand-soft); color: var(--c-brand); border-radius: 7px; padding: 2px 9px; font-size: .73rem; font-weight: 700; }
.tag-gray { background: #eef1f4; color: #5b6b76; }
.nowrap { white-space: nowrap; }
.center { text-align: center; }
.bold { font-weight: 700; }