:root{
  --ink:#122b2e;
  --navy:#123c40;
  --navy-2:#0b2426;
  --brass:#a9782f;
  --brass-light:#c99a4d;
  --paper:#f6f3ec;
  --card:#ffffff;
  --line:#dcd5c4;
  --muted:#6b6459;
  --danger:#a13d3d;
  --good:#3a6b52;
  --radius:10px;
  --shadow: 0 1px 2px rgba(18,43,46,.06), 0 6px 18px rgba(18,43,46,.05);

  /* رؤوس الأقسام: خلفيّة فاتحة + كتابة سوداء غامقة بارزة (bold) */
  --head-bg: linear-gradient(180deg,#f5ecd2,#efe1ba);
  --head-bg-flat:#b0aca2;
  --head-border:#e0cd9c;
  --head-text:#0d0d0d;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Cairo',sans-serif;
  line-height:1.6;
  min-height:100vh;
}
.kufi{font-family:'Reem Kufi',sans-serif;}

/* ---------- App chrome ---------- */
header.app-top{
  background:linear-gradient(180deg,var(--navy) 0%, var(--navy-2) 100%);
  color:#f3efe4;
  padding:18px 22px 16px;
  position:sticky; top:0; z-index:40;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
}
.app-top-inner{
  max-width:1180px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:12px;}
.brand .mark{
  width:42px;height:42px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--brass-light), var(--brass) 70%);
  display:flex;align-items:center;justify-content:center;
  font-family:'Reem Kufi',sans-serif; font-size:19px; color:#1b1206; font-weight:700;
  flex:none;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.18);
}
.brand h1{font-family:'Reem Kufi',sans-serif; font-size:20px; margin:0; font-weight:500; letter-spacing:.2px;}
.brand p{margin:2px 0 0; font-size:12.5px; color:#c7cfc7; opacity:.85;}

nav.tabs{display:flex; gap:6px; background:rgba(255,255,255,.07); padding:5px; border-radius:999px;}
nav.tabs button{
  border:none; background:transparent; color:#e7e2d3; padding:9px 18px;
  border-radius:999px; font-family:'Cairo',sans-serif; font-size:14.5px; font-weight:600;
  cursor:pointer; transition:.18s;
}
nav.tabs button.active{background:var(--brass); color:#241704;}
nav.tabs button:not(.active):hover{background:rgba(255,255,255,.09);}

/* ---------- Sync status pill ---------- */
.sync-pill{
  display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700;
  padding:7px 13px; border-radius:999px; background:rgba(255,255,255,.08); color:#e7e2d3;
  white-space:nowrap;
}
.sync-pill .sync-dot{width:8px;height:8px;border-radius:50%; background:#8a8373; flex:none; transition:.2s;}
.sync-pill[data-state="online"] .sync-dot{background:#4caf7d; box-shadow:0 0 0 3px rgba(76,175,125,.18);}
.sync-pill[data-state="offline"] .sync-dot{background:#c65c5c; box-shadow:0 0 0 3px rgba(198,92,92,.18);}
.sync-pill[data-state="syncing"] .sync-dot{background:var(--brass-light); animation:pulse 1s infinite;}
.sync-pill[data-state="pending"] .sync-dot{background:#d9a441;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}

main{max-width:1180px; margin:0 auto; padding:26px 22px 80px;}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); margin-bottom:18px; overflow:hidden;
}
.card > .card-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 18px; border-bottom:2px solid var(--head-border);
  background:var(--head-bg);
}
.card > .card-head h2{
  margin:0; font-size:16.5px; font-weight:800; color:var(--head-text);
  display:flex; align-items:center; gap:9px;
}
.card > .card-head h2 .dot{width:8px;height:8px;border-radius:50%;background:var(--brass); flex:none;}
.card-body{padding:16px 18px;}
.card-hint{font-size:12.5px; color:var(--muted);}

.btn{
  font-family:'Cairo',sans-serif; font-weight:700; font-size:13.5px;
  border-radius:8px; border:1px solid transparent; padding:9px 16px; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; transition:.15s;
}
.btn-brass{background:var(--brass); color:#251804;}
.btn-brass:hover{background:var(--brass-light);}
.btn-navy{background:var(--navy); color:#f3efe4;}
.btn-navy:hover{background:var(--navy-2);}
.btn-ghost{background:transparent; color:var(--navy); border-color:var(--line);}
.btn-ghost:hover{background:#f0ece1;}
.btn-danger{background:transparent; color:var(--danger); border-color:#e5c9c9;}
.btn-danger:hover{background:#fbecec;}
.btn-sm{padding:6px 11px; font-size:12.5px;}
.btn:disabled{opacity:.45; cursor:not-allowed;}

input[type=text], input[type=number], input[type=date], select, textarea{
  font-family:'Cairo',sans-serif; font-size:14px; color:var(--ink);
  border:1px solid #cfc7b4; border-radius:7px; padding:8px 10px;
  background:#fffdf9; width:100%;
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--brass); box-shadow:0 0 0 3px rgba(169,120,47,.15);
}
textarea{resize:vertical; min-height:40px;}
label.field-label{font-size:12px; color:var(--muted); font-weight:600; display:block; margin-bottom:4px;}

table.entry-table{width:100%; border-collapse:collapse;}
table.entry-table th{
  font-size:12px; color:var(--muted); text-align:right; font-weight:700;
  padding:0 8px 6px; border-bottom:1px solid var(--line);
}
table.entry-table td{padding:4px 4px; vertical-align:top;}
table.entry-table td.rm-cell{width:38px; text-align:center; vertical-align:middle;}
table.entry-table tr + tr td{padding-top:6px;}

.rm-btn{
  width:28px;height:28px;border-radius:7px;border:1px solid #e5c9c9;background:#fff;
  color:var(--danger); cursor:pointer; font-size:15px; line-height:1;
}
.rm-btn:hover{background:#fbecec;}

.add-row-btn{
  margin-top:8px; font-size:12.5px; color:var(--navy); background:#eef1ea; border:1px dashed #b9c2ae;
  padding:7px 12px; border-radius:7px; cursor:pointer; font-family:'Cairo',sans-serif; font-weight:700;
}
.add-row-btn:hover{background:#e4e9dc;}

.free-list-row{display:flex; gap:8px; align-items:center; margin-bottom:8px;}
.free-list-row input{flex:1;}

.stat-grid{width:100%; border-collapse:collapse; font-size:13.5px;}
.stat-grid th, .stat-grid td{border:1px solid var(--line); padding:7px; text-align:center;}
.stat-grid th{background:var(--head-bg-flat); color:var(--head-text); font-size:12.5px; font-weight:800;}
.stat-grid td:first-child, .stat-grid th:first-child{
  text-align:right; background:#f8f6ef; font-weight:700; color:var(--navy); font-size:12.8px;
}
.stat-grid input{border:none; background:transparent; text-align:center; padding:4px; width:100%;}
.stat-grid input:focus{background:#fff; box-shadow:0 0 0 2px rgba(169,120,47,.2); border-radius:4px;}

.two-col{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:760px){ .two-col{grid-template-columns:1fr;} }

.top-form-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
@media (max-width:760px){ .top-form-grid{grid-template-columns:1fr;} }

.day-pill{
  display:inline-flex; align-items:center; gap:8px; background:#eef1ea; border:1px solid #cfd8c2;
  color:var(--good); font-weight:700; padding:8px 14px; border-radius:999px; font-size:13.5px;
}

.toast{
  position:fixed; bottom:22px; right:50%; transform:translateX(50%);
  background:var(--navy); color:#f6f3ec; padding:11px 22px; border-radius:999px;
  font-size:13.5px; font-weight:600; box-shadow:var(--shadow); z-index:100;
  opacity:0; pointer-events:none; transition:.25s;
}
.toast.show{opacity:1; transform:translateX(50%) translateY(-6px);}

/* ---------- History tab ---------- */
.history-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 16px; border-bottom:1px solid var(--line);
}
.history-item:last-child{border-bottom:none;}
.history-item .meta{font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:8px;}
.history-item .day{font-weight:700; color:var(--navy);}
.badge-sync{font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:999px;}
.badge-sync.synced{background:#e4f3ea; color:#2f6b4c;}
.badge-sync.pending{background:#fbf0dc; color:#8a5a12;}
.empty-note{padding:26px; text-align:center; color:var(--muted); font-size:13.5px;}

/* ---------- Print report ---------- */
#reportView{display:none;}
.report-toolbar{
  display:flex; justify-content:flex-end; gap:10px; margin-bottom:14px;
}
.paper{
  background:#fff; max-width:900px; margin:0 auto; padding:34px 40px;
  border:1px solid var(--line); box-shadow:var(--shadow); font-size:13px; color:#111;
}
.paper .letterhead{
  display:flex; justify-content:space-between; align-items:flex-start; gap:14px;
  border-bottom:2.5px solid var(--navy); padding-bottom:12px; margin-bottom:6px;
}
.paper .letterhead .ministry{font-size:12.5px; line-height:1.75; font-weight:700;}
.paper .letterhead .year{font-size:12.5px; font-weight:700; white-space:nowrap;}
.paper .doc-title{
  text-align:center; font-family:'Reem Kufi',sans-serif; font-size:19px; margin:14px 0 4px; color:var(--navy);
}
.paper .doc-sub{
  text-align:center; font-size:13.5px; margin-bottom:16px; font-weight:700;
}
.paper .doc-sub span.hl{color:var(--brass); }
.rp-section{margin-bottom:14px;}
.rp-section .rp-title{
  background:var(--head-bg-flat); color:var(--head-text); font-weight:800; font-size:12.5px;
  padding:7px 10px; border-radius:5px 5px 0 0; border:1px solid var(--head-border); border-bottom:none;
}
.rp-section table{width:100%; border-collapse:collapse; font-size:12px;}
.rp-section table th, .rp-section table td{border:1px solid #c8c2b2; padding:5px 7px; text-align:right;}
.rp-section table th{background:#f1ede2; font-weight:700; text-align:center;}
.rp-empty{border:1px solid #c8c2b2; border-top:none; padding:10px; color:#8a8373; font-size:12px; text-align:center;}
.rp-list{border:1px solid #c8c2b2; border-top:none;}
.rp-list div{padding:6px 10px; border-bottom:1px dashed #ddd7c8; font-size:12.5px; min-height:14px;}
.rp-list div:last-child{border-bottom:none;}
.rp-notes-box{border:1px solid #c8c2b2; border-top:none; display:flex;}
.rp-notes-box .lines{flex:1; padding:6px 10px;}
.rp-notes-box .lines div{border-bottom:1px dashed #ddd7c8; padding:7px 2px; font-size:12.5px; min-height:15px;}
.rp-notes-box .signature{
  width:150px; border-right:1px solid #c8c2b2; display:flex; align-items:center; justify-content:center;
  text-align:center; font-size:11.5px; color:#8a8373; padding:8px;
}
.stat-report-grid{width:100%; border-collapse:collapse; font-size:12px;}
.stat-report-grid th, .stat-report-grid td{border:1px solid #c8c2b2; padding:6px; text-align:center;}
.stat-report-grid th{background:#f1ede2;}
.stat-report-grid td.rowlabel{text-align:right; font-weight:700; background:#f8f6ef;}

@media print{
  header.app-top, .report-toolbar, .no-print{display:none !important;}
  body{background:#fff;}
  main{padding:0; max-width:none;}
  .paper{border:none; box-shadow:none; max-width:none; padding:0 6mm;}
  #app-shell{display:none !important;}
  #reportView{display:block !important;}
  .rp-section{break-inside:avoid;}
  @page{ size:A4; margin:12mm; }
}