:root {
    --bg: #f3f5f9;
    --surface: #ffffff;
    --ink: #1f2937;
    --muted: #6b7280;
    --line: #d6dce8;
    --head: #305496;
    --stripe: #dde6f4;
    --neg: #d92d20;
    --neg-bg: #fde2df;
    --ok: #157f3c;
    --ok-bg: #dcf5e4;
    --yellow: #fff200;
    --radius: 10px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Cairo", "Segoe UI", Tahoma, sans-serif;
    background: var(--bg);
    color: var(--ink);
    font-size: 15px;
}

a { color: inherit; text-decoration: none; }

.container { max-width: 1500px; margin: 0 auto; padding: 18px 16px 40px; }

/* ---------- الشريط العلوي ---------- */
.topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: #14305A; color: #fff; padding: 10px 20px; flex-wrap: wrap;
}
.topbar .brand { font-weight: 800; font-size: 18px; }
.topbar nav { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.topbar nav a { opacity: .9; font-weight: 600; }
.topbar nav a:hover { opacity: 1; text-decoration: underline; }
.topbar .who { background: rgba(255,255,255,.15); padding: 2px 12px; border-radius: 99px; font-size: 13px; }
.topbar .logout { color: #ffd6d6; }

/* ---------- الأيقونات ---------- */
.ico { flex-shrink: 0; vertical-align: middle; }
.topbar .brand, .topbar nav a, .topbar .who { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- مسار الصفحة ---------- */
.crumbs { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.crumbs a { color: #305496; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span { color: var(--ink); }

/* ---------- الصفحة الرئيسية: الملفات ---------- */
.files-head h1 { margin: 6px 0 16px; font-size: 26px; color: #1f3864; }
.files { display: flex; flex-direction: column; gap: 14px; }
.file-card {
    display: flex; align-items: center; gap: 20px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
    padding: 22px 26px; box-shadow: 0 2px 10px rgba(31,56,100,.06);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.file-card:hover { border-color: #217346; box-shadow: 0 8px 24px rgba(33,115,70,.15); transform: translateY(-2px); }
.file-icon {
    display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px;
    background: #e3f1e8; color: #217346; flex-shrink: 0;
}
.file-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.file-name { font-size: 24px; font-weight: 800; color: #1f2937; }
.file-meta { color: var(--muted); font-size: 14px; font-weight: 600; }
.file-go { color: #9aa5b8; display: grid; place-items: center; }
.file-card:hover .file-go { color: #217346; }

/* ---------- صفحة الملف ---------- */
.wb-head { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 4px 0 22px; }
.wb-head h1 { margin: 0; font-size: 32px; color: #1f3864; }

.tiles {
    display: grid; gap: 18px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    margin-top: 10px;
}
.tile {
    --c: #305496;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    min-height: 160px; padding: 20px;
    background: var(--surface); border-radius: 16px;
    border: 1px solid var(--line);
    box-shadow: 0 2px 10px rgba(31,56,100,.06);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.tile:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(31,56,100,.14); border-color: var(--c); }
.tile-icon {
    display: grid; place-items: center; width: 68px; height: 68px; border-radius: 18px;
    color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff);
    transition: background .15s, color .15s;
}
.tile:hover .tile-icon { background: var(--c); color: #fff; }
.tile-name { font-size: 19px; font-weight: 800; color: #1f2937; }

/* ---------- كروت الأرقام ---------- */
.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 0 0 18px; }
.card { background: var(--surface); border-radius: var(--radius); padding: 14px 18px; border: 1px solid var(--line); }
.card-label { color: var(--muted); font-weight: 600; font-size: 14px; }
.card-value { font-size: 26px; font-weight: 800; direction: ltr; text-align: right; }
.card.hl { background: #1f3864; color: #fff; border-color: #1f3864; }
.card.hl .card-label { color: #c9d6f0; }
.card.neg .card-value { color: var(--neg); }
.card.hl.neg .card-value { color: #ffb4ab; }

/* ---------- عنوان الشيت (زي الإكسل) ---------- */
.sheet-head {
    --c: #305496;
    position: relative;
    display: flex; align-items: center; justify-content: center;
    background: #fbe5d6; border: 1px solid #f4c7a8; border-radius: var(--radius);
    padding: 14px 140px; margin-bottom: 16px; min-height: 70px;
}
.sheet-title { margin: 0; color: var(--c); font-size: 28px; font-weight: 800; letter-spacing: 1px; text-align: center; }
.prog-btn {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%) rotate(-4deg);
    background: var(--yellow); color: #000; font-weight: 800;
    padding: 8px 20px; border: 3px solid #1f3864; box-shadow: 4px 4px 0 #8a8a00;
}
.prog-btn:hover { transform: translateY(-50%) rotate(0deg); }

/* ---------- رسائل ---------- */
.alert { padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; font-weight: 600; }
.alert.ok { background: var(--ok-bg); color: var(--ok); }
.alert.err { background: var(--neg-bg); color: var(--neg); }

/* ---------- فورم الإضافة ---------- */
.entry { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 14px; }
.entry > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 12px 16px; font-weight: 800; color: #1f3864; list-style: none; }
.entry > summary::-webkit-details-marker { display: none; }
.entry[open] > summary { border-bottom: 1px solid var(--line); }
.entry form { padding: 14px 16px; }
.fields { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; color: #374151; }
.field.wide { grid-column: span 2; }
input, select, button { font: inherit; }
.field input, .field select, .toolbar input, .inline-form input {
    border: 1px solid #c3cad8; border-radius: 8px; padding: 7px 10px; background: #fff; font-size: 15px; font-weight: 400; min-width: 0;
}
.field input:focus, .field select:focus, .toolbar input:focus { outline: 2px solid #8fb0e8; border-color: #4472c4; }
.form-actions { display: flex; gap: 10px; margin-top: 14px; }

.btn {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    background: #fff; color: #1f3864; border: 1px solid #b7c3da; border-radius: 8px;
    padding: 7px 14px; font-weight: 700; font-size: 14px;
}
.btn:hover { background: #eef3fb; }
.btn.primary { background: #305496; color: #fff; border-color: #305496; }
.btn.primary:hover { background: #24437a; }
.btn.block { width: 100%; justify-content: center; padding: 10px; }
.icon { background: none; border: 0; cursor: pointer; padding: 4px; border-radius: 6px; color: #305496; display: inline-grid; place-items: center; }
.icon:hover { background: #e6edf8; }
.icon.danger { color: #c0392b; }
.icon.danger:hover { background: #fde2df; }

/* ---------- شريط البحث ---------- */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.toolbar input[type=search] { min-width: 240px; }
.toolbar label { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; }
.toolbar .spacer { flex: 1; }
.toolbar .count { color: var(--muted); font-size: 13px; }

/* ---------- الجدول (زي الإكسل) ---------- */
.table-wrap { overflow-x: auto; background: var(--surface); border-radius: var(--radius); border: 1px solid var(--line); }
.grid { --c: #305496; width: 100%; border-collapse: collapse; font-size: 15px; }
.grid th {
    position: sticky; top: 0; z-index: 1;
    background: var(--head); color: #fff; font-weight: 800; padding: 10px 12px; white-space: nowrap; text-align: center;
    border-left: 1px solid rgba(255,255,255,.2);
}
.grid td { padding: 8px 12px; border-top: 1px solid var(--line); text-align: center; white-space: nowrap; font-weight: 600; }
.grid td.wide { white-space: normal; min-width: 200px; }
.grid tbody tr:nth-child(odd) { background: var(--stripe); }
.grid tbody tr:hover { background: #fff6c9; }
.grid td.num { direction: ltr; }
.grid td.neg { background: #ff5b5b !important; color: #fff; }
.grid tfoot td { background: #1f3864; color: #fff; font-weight: 800; border-top: 2px solid #1f3864; }
.grid .actions { white-space: nowrap; }
.grid .actions form { display: inline; }
.grid.small { font-size: 14px; }
.grid.small td.neg { background: transparent !important; color: var(--neg); }
.empty { text-align: center; color: var(--muted); padding: 20px; margin: 0; }

.extra { margin-bottom: 16px; }
.extra h2 { font-size: 18px; color: #1f3864; margin: 0 0 8px; }

.inline-form { display: flex; gap: 6px; justify-content: center; }

/* ---------- تسجيل الدخول ---------- */
.login-box {
    max-width: 380px; margin: 8vh auto 0; background: var(--surface); padding: 28px;
    border-radius: 16px; box-shadow: 0 10px 30px rgba(31,56,100,.12); text-align: center;
}
.login-logo { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: #e6edf8; color: #1f3864; margin-bottom: 8px; }
.login-box h1 { margin: 0 0 4px; color: #1f3864; }
.login-box p { color: var(--muted); margin: 0 0 18px; }
.login-box form { display: flex; flex-direction: column; gap: 12px; text-align: right; }

/* ---------- موبايل ---------- */
@media (max-width: 640px) {
    .sheet-head { padding: 60px 12px 14px; }
    .prog-btn { top: 12px; transform: rotate(-4deg); }
    .sheet-title { font-size: 22px; }
    .file-card { padding: 16px; gap: 14px; }
    .file-name { font-size: 19px; }
    .wb-head h1 { font-size: 24px; }
    .field.wide { grid-column: span 1; }
    .toolbar input[type=search] { min-width: 0; width: 100%; }
}

/* ---------- الطباعة ---------- */
@media print {
    .no-print, .topbar { display: none !important; }
    body { background: #fff; }
    .container { max-width: none; padding: 0; }
    .table-wrap { overflow: visible; border: 0; }
    .grid th { position: static; }
    .grid { font-size: 11px; }
    .grid td, .grid th { padding: 4px 6px; }
    tr[hidden] { display: none; }
}

/* =====================================================
   إضافة / تعديل بنافذة كبيرة سهلة
   ===================================================== */
[hidden] { display: none !important; }

.add-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.btn-add {
    display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
    background: #217346; color: #fff; border: 0; border-radius: 12px;
    padding: 14px 28px; font-size: 20px; font-weight: 800;
    box-shadow: 0 4px 14px rgba(33,115,70,.3);
}
.btn-add:hover { background: #1a5c38; }
.add-bar .hint { color: var(--muted); font-weight: 600; }

.grid tbody tr.editable { cursor: pointer; }
.grid tbody tr.editable:hover td { background: #fff3b0; }
.grid tbody tr.editable:hover td.neg { background: #ff5b5b; }

.entry-dialog {
    width: min(860px, calc(100vw - 24px)); max-height: calc(100vh - 24px);
    border: 0; border-radius: 18px; padding: 0;
    box-shadow: 0 24px 60px rgba(0,0,0,.3);
    font-family: inherit; color: var(--ink);
}
.entry-dialog::backdrop { background: rgba(15,28,51,.55); }
.entry-dialog form { padding: 0 24px 22px; }

.dlg-head {
    position: sticky; top: 0; z-index: 2; background: #fff;
    display: flex; align-items: center; gap: 12px;
    padding: 18px 0 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line);
}
.dlg-head h2 { margin: 0; font-size: 22px; color: #1f3864; flex: 1; }
.dlg-icon {
    --c: #305496;
    display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px;
    color: var(--c); background: color-mix(in srgb, var(--c) 12%, #fff);
}
.dlg-close {
    background: #f1f3f7; border: 0; border-radius: 10px; width: 40px; height: 40px;
    font-size: 18px; cursor: pointer; color: #555;
}
.dlg-close:hover { background: #fde2df; color: var(--neg); }

.dlg-fields { display: grid; gap: 16px 18px; grid-template-columns: 1fr 1fr; }
.dfield { display: flex; flex-direction: column; gap: 6px; }
.dfield.wide { grid-column: 1 / -1; }
.dfield label { font-size: 16px; font-weight: 800; color: #1f3864; }
.dfield .req { color: var(--neg); }
.dfield input, .dfield select {
    font-size: 19px; font-weight: 600; padding: 11px 14px; min-height: 52px;
    border: 2px solid #c9d2e3; border-radius: 10px; background: #fff; width: 100%;
}
.dfield input:focus, .dfield select:focus { outline: none; border-color: #217346; box-shadow: 0 0 0 4px rgba(33,115,70,.15); background: #fbfffc; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips:empty { display: none; }
.chip {
    border: 1px solid #c9d2e3; background: #f5f7fb; color: #1f3864;
    border-radius: 99px; padding: 4px 14px; font-size: 15px; font-weight: 700; cursor: pointer;
}
.chip:hover { border-color: #217346; color: #217346; }
.chip.on { background: #217346; border-color: #217346; color: #fff; }

.calc-preview {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
    margin-top: 18px; padding: 14px; border-radius: 12px; background: #eef4ff; border: 1px dashed #9bb3df;
}
.calc-preview .pv { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.calc-preview .pv span { font-size: 13px; color: var(--muted); font-weight: 700; }
.calc-preview .pv b { font-size: 20px; direction: ltr; }
.calc-preview .pv b.neg { color: var(--neg); }

.dlg-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 20px; }
.dlg-actions .spacer { flex: 1; }
.btn.big { padding: 12px 22px; font-size: 17px; border-radius: 10px; }
.btn.primary.big { background: #217346; border-color: #217346; }
.btn.primary.big:hover { background: #1a5c38; }
.btn.danger { color: var(--neg); border-color: #f2b8b0; }
.btn.danger:hover { background: #fde2df; }

@media (max-width: 640px) {
    .dlg-fields { grid-template-columns: 1fr; }
    .calc-preview { grid-template-columns: 1fr 1fr; }
    .btn-add { width: 100%; justify-content: center; }
    .dlg-actions .btn { flex: 1; justify-content: center; }
}

.dhint { color: var(--muted); font-size: 13px; font-weight: 600; line-height: 1.5; }
.grid tr.sum-row td { background: #1f3864 !important; color: #fff; font-weight: 800; }
.extra.after { margin-top: 22px; }
.grid tr.sum-row td.neg { color: #ffb4ab; }

/* =====================================================
   فلتر الأعمدة (زي الإكسل)
   ===================================================== */
.grid th.has-filter { padding-left: 34px; position: sticky; }
.col-filter {
    position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
    width: 24px; height: 24px; display: grid; place-items: center;
    border: 1px solid rgba(255,255,255,.45); border-radius: 6px; background: rgba(255,255,255,.12);
    color: #fff; cursor: pointer; padding: 0;
}
.col-filter:hover { background: rgba(255,255,255,.3); }
.grid th.filtered .col-filter { background: #ffd84d; border-color: #ffd84d; color: #1f3864; }

.filter-pop {
    position: absolute; z-index: 50; width: 270px;
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 14px 40px rgba(15,28,51,.25); padding: 12px;
    display: flex; flex-direction: column; gap: 8px; color: var(--ink); font-size: 15px;
}
.fp-title { font-weight: 800; color: #1f3864; }
.fp-search { border: 1px solid #c3cad8; border-radius: 8px; padding: 7px 10px; font: inherit; }
.fp-list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; border-top: 1px solid var(--line); padding-top: 4px; }
.fp-item { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-radius: 6px; cursor: pointer; font-weight: 600; }
.fp-item:hover { background: #f1f5fc; }
.fp-item input { width: 17px; height: 17px; accent-color: #217346; }
.fp-item span { flex: 1; }
.fp-item em { font-style: normal; color: var(--muted); font-size: 12px; background: #f1f3f7; border-radius: 99px; padding: 0 8px; }
.fp-all { border-bottom: 1px solid var(--line); border-radius: 0; font-weight: 800; }
.fp-actions { display: flex; gap: 8px; }
.fp-actions .btn { flex: 1; justify-content: center; }

.active-filters {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    background: #fff8d6; border: 1px solid #f0dc8c; border-radius: 10px; padding: 8px 12px; margin-bottom: 10px;
}
.af-label { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: #6b5300; }
.af-chip {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    background: #fff; border: 1px solid #e5cf73; border-radius: 99px; padding: 4px 12px; font: inherit; font-size: 14px; font-weight: 600;
}
.af-chip:hover { border-color: var(--neg); color: var(--neg); }
.af-clear { margin-inline-start: auto; background: none; border: 0; color: var(--neg); font: inherit; font-weight: 800; cursor: pointer; text-decoration: underline; }

/* =====================================================
   الجدول ياخد عرض الشاشة كلها من غير ما حاجة تستخبى
   ===================================================== */
.container { max-width: none; padding-inline: 20px; }
.grid { font-size: 14px; table-layout: auto; }
.grid th {
    white-space: normal; line-height: 1.3; font-size: 14px;
    padding: 8px 6px; vertical-align: middle; min-width: 56px;
}
.grid th.has-filter { padding-left: 26px; }
.col-filter { width: 20px; height: 20px; left: 4px; }
.col-filter svg { width: 12px; height: 12px; }
.grid td { padding: 7px 6px; }
.grid td.wide { min-width: 140px; }
.cards, .tiles, .files, .home-head, .files-head, .wb-head { max-width: 1500px; margin-inline: auto; }
.files-head { max-width: 1500px; margin-inline: auto; }

/* =====================================================
   قايمة التصدير
   ===================================================== */
.export-menu { position: relative; }
.export-list {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; width: 230px;
    background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 6px;
    box-shadow: 0 14px 40px rgba(15,28,51,.22); display: flex; flex-direction: column; gap: 2px;
}
.export-list .el-note { font-size: 12px; color: var(--muted); font-weight: 600; padding: 4px 8px 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.export-list button {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: right;
    background: none; border: 0; border-radius: 8px; padding: 8px; font: inherit; font-weight: 700; cursor: pointer; color: var(--ink);
}
.export-list button:hover { background: #f1f5fc; }
.export-list button:disabled { opacity: .6; cursor: wait; }
.ft { display: inline-grid; place-items: center; width: 40px; height: 26px; border-radius: 6px; color: #fff; font-size: 11px; font-weight: 800; direction: ltr; }
.ft-png { background: #7b4bc4; }
.ft-pdf { background: #d93025; }
.ft-xls { background: #217346; }
.ft-doc { background: #2b5797; }

/* شكل الصفحة اللي بتتصدر صورة / PDF */
.export-sheet {
    position: fixed; top: 0; left: -30000px; background: #fff; color: #1f2937; padding: 24px;
    font-family: "Cairo", "Segoe UI", Tahoma, sans-serif;
}
.export-sheet .ex-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; border-bottom: 3px solid #1f3864; padding-bottom: 10px; margin-bottom: 14px; }
.export-sheet .ex-book { color: #6b7280; font-weight: 700; font-size: 14px; }
.export-sheet .ex-title { color: #1f3864; font-weight: 800; font-size: 26px; }
.export-sheet .ex-filters { margin-top: 4px; font-weight: 700; font-size: 14px; color: #6b5300; background: #fff8d6; padding: 3px 10px; border-radius: 6px; display: inline-block; }
.export-sheet .ex-meta { color: #6b7280; font-size: 13px; font-weight: 600; text-align: left; white-space: nowrap; }
.export-sheet .grid th { position: static; padding: 7px 6px; }
.export-sheet .grid td { padding: 6px; }
/* صورة «نسخ كصورة» (للواتساب) */
.copy-sheet { padding: 14px; width: max-content; }
.copy-sheet .cp-title { color: #1f3864; font-weight: 800; font-size: 18px; margin-bottom: 8px; }
.copy-sheet .grid { width: auto; }

/* =====================================================
   الأعمدة على قد الكلام + حجم كلام أكبر + تحديد سطور
   ===================================================== */
.grid { font-size: var(--grid-fs, 17px); }
.grid th { font-size: max(13px, calc(var(--grid-fs, 17px) - 3px)); padding-inline: 4px; }
.grid th.has-filter { padding-left: 24px; }
.grid.small { font-size: max(14px, calc(var(--grid-fs, 17px) - 1px)); }
/* أعمدة الأرقام والتاريخ بتاخد على قد الرقم بس، والباقي للأعمدة اللي فيها كلام */
.grid th.fit, .grid td.fit { width: 1%; }
.grid td.fit { white-space: nowrap; }
/* العنوان الطويل بيتقسم على سطرين تحت بعض بدل ما يعرّض العمود */
.grid th.fit { white-space: normal; line-height: 1.25; }
.grid td.num { padding-inline: 10px; }

.grid .sel-col { width: 1%; padding: 4px 8px; text-align: center; }
.grid .sel-col input { width: 20px; height: 20px; accent-color: #c0392b; cursor: pointer; vertical-align: middle; }
.grid tbody tr.selected td { background: #ffe3e0 !important; color: #7a1d12; }
.grid tbody tr.selected td.neg { background: #ff9b8f !important; color: #fff; }

.bulk-bar {
    position: sticky; top: 8px; z-index: 5;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: #fff1ef; border: 2px solid #f0b4ab; border-radius: 12px;
    padding: 10px 14px; margin-bottom: 10px; font-size: 17px; font-weight: 700; color: #7a1d12;
}
.bulk-bar b { font-size: 20px; }

.font-size-ctl { display: inline-flex; gap: 4px; }
.fs-btn { min-width: 44px; justify-content: center; font-size: 15px; direction: ltr; }
@media print { .grid .sel-col { display: none; } }

/* =====================================================
   مربعات الفولدرات والملفات (الرئيسية + شركات الفول)
   ===================================================== */
.sq-grid {
    display: grid; gap: 22px; justify-content: start;
    grid-template-columns: repeat(auto-fill, 240px);
    max-width: 1500px; margin-inline: auto;
}
.sq-card {
    aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    padding: 18px; text-align: center; position: relative;
    background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
    box-shadow: 0 2px 10px rgba(31,56,100,.06);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
a.sq-card:hover { border-color: #217346; box-shadow: 0 10px 26px rgba(33,115,70,.16); transform: translateY(-3px); }
.sq-icon { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 22px; background: #e3f1e8; color: #217346; }
.sq-icon.folder { background: #fff3d6; color: #b7791f; }
a.sq-card:hover .sq-icon { background: #217346; color: #fff; }
a.sq-card:hover .sq-icon.folder { background: #b7791f; color: #fff; }
.sq-name { font-size: 22px; font-weight: 800; color: #1f2937; line-height: 1.35; }
.sq-meta { color: var(--muted); font-size: 14px; font-weight: 600; }
.sq-card.soon { cursor: default; background: #f7f8fa; border-style: dashed; }
.sq-card.soon .sq-icon { background: #eceff3; color: #9aa5b8; }
.sq-card.soon .sq-name { color: #8a94a6; }
.sq-badge { display: inline-flex; align-items: center; gap: 4px; background: #fff3d6; color: #8a5a00; border-radius: 99px; padding: 3px 12px; font-size: 13px; font-weight: 800; }
@media (max-width: 640px) {
    .sq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .sq-name { font-size: 17px; }
    .sq-icon { width: 64px; height: 64px; }
}

/* ===== ملف العمالة ===== */
.sq-grid.rows3 { grid-template-columns: repeat(3, 240px); }
.sq-icon.labor { background: #e6f0fb; color: #1f3864; }
a.sq-card:hover .sq-icon.labor { background: #1f3864; color: #fff; }
.lw-weeks { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.lw-wtab { display: flex; flex-direction: column; align-items: center; padding: 8px 18px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-weight: 800; color: #1f3864; }
.lw-wtab small { font-weight: 600; color: var(--muted); direction: ltr; }
.lw-wtab.on { background: #1f3864; color: #fff; border-color: #1f3864; }
.lw-wtab.on small { color: #c9d3e0; }
.lw-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.lw-bar select { border: 1px solid #c3cad8; border-radius: 8px; padding: 7px 10px; font: inherit; background: #fff; }
.lw-grid th small { display: block; font-weight: 600; opacity: .8; direction: ltr; }
.lw-grid td.lw-day, .lw-grid td.lw-rate, .lw-grid td.lw-paid { padding: 3px; width: 1%; }
.lw-grid input { width: 74px; box-sizing: border-box; border: 1px solid #c9d2e3; border-radius: 6px; padding: 5px 6px; font: inherit; font-weight: 700; text-align: center; direction: ltr; background: #fff; }
.lw-grid input:focus { outline: 2px solid #ffd84d; border-color: #e0b400; }
.lw-grid .lw-name a { color: #1f3864; font-weight: 800; }
.lw-grid tr.w-first td { border-top: 2px solid #b8c4d8; }
.lw-grid .lw-ghead td { background: #e8eef8; color: #1f3864; font-weight: 800; text-align: right; padding: 8px 12px; }
.lw-grid select { font: inherit; border: 1px solid #c3cad8; border-radius: 6px; padding: 4px; }
.lw-note { color: var(--muted); font-size: 14px; font-weight: 600; margin: 10px 4px; }
@media (max-width: 760px) { .sq-grid.rows3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lw-grid td.lw-rem.neg { background: transparent !important; color: var(--neg); }
.lw-range { display: block; color: var(--muted); font-weight: 600; direction: ltr; text-align: right; }
.sheet-head .spacer { flex: 1; }
@media print { .lw-grid input { border: 0; width: auto; background: transparent; } }
.sq-icon.admin { background: #fdf1e3; color: #9a5b13; }
a.sq-card:hover .sq-icon.admin { background: #9a5b13; color: #fff; }

/* ===== هوية رند في البرنامج ===== */
.topbar .brand-ic { height: 28px; width: auto; }
.login-brand { display: inline-block; margin-bottom: 10px; }
.login-brand img { height: 150px; width: auto; }
.login-box h1 { color: #14305A; }
.login-back { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; color: var(--muted); font-weight: 600; font-size: 14px; }
.login-back:hover { color: #14305A; }
.login-back svg { transform: scaleX(-1); }

/* «تذكرني» في صفحة الدخول */
.login-box .remember { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: #374151; cursor: pointer; user-select: none; }
.login-box .remember input { width: 18px; height: 18px; accent-color: #14305A; margin: 0; }

/* تعديل الخانة مكانها */
.grid td.cell-edit { cursor: text; }
.grid tbody tr.editable td.cell-edit:hover { box-shadow: inset 0 0 0 2px #e0b400; }
.grid td.editing { padding: 2px !important; background: #fffbe6 !important; box-shadow: inset 0 0 0 2px #217346; }
.grid .cell-input { width: 100%; min-width: 80px; box-sizing: border-box; font: inherit; font-weight: 700; text-align: center; border: 0; outline: none; background: transparent; padding: 5px 4px; color: #1f2937; }
.grid td.saving { opacity: .55; }
#cell-toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px); background: #157f3c; color: #fff; padding: 10px 20px; border-radius: 10px; font-weight: 700; box-shadow: 0 10px 30px rgba(0,0,0,.2); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 200; max-width: min(640px, 92vw); text-align: center; }
#cell-toast.err { background: #c0392b; }
#cell-toast.show { opacity: 1; transform: translate(-50%, 0); }
@media print { #cell-toast { display: none; } }

/* السحب لتحت (Fill) */
.fill-handle { position: absolute; z-index: 60; width: 10px; height: 10px; background: #217346; border: 2px solid #fff; border-radius: 2px; box-shadow: 0 0 0 1px #217346; cursor: crosshair; touch-action: none; }
.fill-handle:hover { transform: scale(1.3); }
.grid td.fill-src { box-shadow: inset 0 0 0 2px #217346 !important; }
.grid td.fill-range { background: #d9f2e1 !important; box-shadow: inset 0 0 0 1px #8bc79d; }
@media print { .fill-handle { display: none !important; } }