:root {
  --green: #0e6844;
  --green-dark: #083d28;
  --green-soft: #e7f4ec;
  --gold: #b68b2d;
  --gold-soft: #f8f1de;
  --ink: #1c241c;
  --muted: #5d675f;
  --line: #e4dcc6;
  --paper: #f6f3ea;
  --card: #fffdf8;
  --shadow: 0 12px 30px rgba(18, 52, 32, 0.08);
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  font-family: "Segoe UI", Tahoma, "Noto Naskh Arabic", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at top right, rgba(182, 139, 45, 0.16), transparent 28%),
    var(--paper);
}

button, input { font-family: inherit; }

button { cursor: pointer; }

.app-header {
  background: linear-gradient(180deg, var(--green-dark), var(--green));
  color: white;
  padding: 22px 7vw 18px;
  border-bottom: 4px solid var(--gold);
}

.brand {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
}

.eyebrow {
  margin: 0 0 4px;
  color: #f3e2b1;
  font-size: 14px;
  letter-spacing: 0;
}

.app-header h1 { margin: 0; font-size: 32px; font-weight: 750; }

.nav { display: flex; gap: 8px; }

.nav a, .text-link {
  color: inherit;
  text-decoration: none;
}

.nav a {
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 8px 14px;
  color: white;
}

.nav a[aria-current="page"] { background: white; color: var(--green-dark); }

.toolbar, .page {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

.toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: -18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  box-shadow: var(--shadow);
}

.search {
  flex: 1;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 16px;
}

.filters { display: flex; gap: 6px; }

.chip, .paper-option {
  border: 1px solid var(--line);
  background: white;
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--ink);
}

.chip.is-selected, .paper-option.is-selected {
  background: var(--green);
  border-color: var(--green);
  color: white;
}

.page { padding: 22px 0 48px; }

.summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  margin: 16px 2px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 14px;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: right;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow);
  color: inherit;
  text-decoration: none;
  min-height: 168px;
}

.card:hover, .card:focus-visible { border-color: var(--green); transform: translateY(-2px); }

.card.is-inactive { background: #f3f1ea; }

.card-top, .meta, .service-kicker, .title-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.order {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green-dark);
  font-weight: 700;
}

.badge {
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 12px;
  background: var(--green-soft);
  color: var(--green-dark);
}

.badge.off { background: #eceae4; color: #666; }

.card h2, .service-head h2 { margin: 0; font-size: 20px; line-height: 1.45; }

.subtitle, .detail, .muted, .empty { color: var(--muted); }

.duration {
  margin-top: auto;
  background: var(--gold-soft);
  color: #6d5312;
  border-radius: 12px;
  padding: 8px 10px;
  font-weight: 650;
}

.back { color: var(--green-dark); font-weight: 700; }

.service-head {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow);
}

.service-head h2 { font-size: 30px; }

.outcome {
  margin: 12px 0 0;
  background: var(--green-soft);
  border-radius: 12px;
  padding: 10px 12px;
}

.columns {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 14px;
  margin-top: 14px;
}

.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
}

.panel h3 { margin: 0 0 10px; color: var(--green-dark); }

.panel ol { margin: 0; padding: 0 22px 0 0; }

.panel li { margin: 0 0 12px; line-height: 1.6; }

.panel li .detail { display: block; font-size: 14px; }

.poster {
  margin-top: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px;
}

.poster img { width: 100%; border-radius: 12px; display: block; }

body.service-open {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  column-gap: 18px;
  align-items: start;
}

body.service-open #app { display: contents; }

body.service-open .app-header { grid-column: 1 / -1; }

body.service-open #view {
  grid-column: 1;
  width: auto;
  padding-inline: 24px 8px;
}

body.service-open.paper-a4 { grid-template-columns: 1fr; }

#print-column {
  grid-column: 2;
  grid-row: 2;
  position: sticky;
  top: 16px;
  margin: 22px 16px 24px 0;
}

body.service-open.paper-a4 #print-column,
body.service-open.paper-a4 #view { grid-column: 1; }

body.service-open.paper-a4 #print-column {
  grid-row: 3;
  position: static;
  width: min(210mm, calc(100% - 32px));
  margin: 0 auto 32px;
}

.print-toolbar {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  margin-bottom: 10px;
}

.preview-label { margin: 0 0 8px; font-weight: 700; }

.paper-switch { display: flex; gap: 6px; margin-bottom: 10px; }

.paper-option { flex: 1; }

.print-btn {
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: var(--green);
  color: white;
  padding: 13px 12px;
  font-size: 18px;
  font-weight: 750;
}

.print-btn:disabled { opacity: 0.6; cursor: wait; }

.print-status { min-height: 1.2em; margin: 8px 0 0; color: var(--muted); font-size: 13px; }

@font-face {
  font-family: "HayyakumAllah";
  src: url("/assets/fonts/service-guide/HayyakumAllah-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "HayyakumAllah";
  src: url("/assets/fonts/service-guide/HayyakumAllah-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "HayyakumAllah";
  src: url("/assets/fonts/service-guide/HayyakumAllah-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.sheet {
  --forest: #054239;
  --forest-deep: #002623;
  --forest-mid: #428177;
  --wheat: #edebe0;
  --gold: #b9a779;
  --gold-deep: #988561;
  --umber: #6b1f2a;
  --charcoal: #161616;
  --ash: #3d3a3b;
  width: 76mm;
  margin: 0 auto;
  background: var(--wheat);
  color: var(--charcoal);
  border: 1px solid var(--gold);
  border-radius: 16px;
  overflow: hidden;
  line-height: 1.65;
  font-size: 12.5px;
  font-family: "HayyakumAllah", "IBM Plex Sans Arabic", Tahoma, sans-serif;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

body.paper-a4 .sheet { width: min(190mm, 100%); font-size: 16px; border-radius: 18px; }

.sheet-head {
  background: var(--forest);
  color: var(--wheat);
  text-align: center;
  padding: 4mm 3.5mm 3.5mm;
  border-bottom: 3px solid var(--gold);
}

.sheet-mark {
  width: 16mm;
  height: 16mm;
  object-fit: contain;
  display: block;
  margin: 0 auto 1.5mm;
}

.sheet .org {
  margin: 0;
  color: var(--gold);
  font-weight: 500;
  font-size: 1.05em;
}

.sheet h1 {
  margin: 1mm 0 0;
  color: white;
  font-size: 1.28em;
  font-weight: 700;
  line-height: 1.45;
}

.sheet .sub { margin: 1mm 0 0; color: var(--wheat); }

.dur-pill {
  display: inline-block;
  margin: 2.5mm 0 0;
  background: var(--forest-mid);
  color: var(--wheat);
  border-radius: 999px;
  padding: 1mm 3.2mm;
  font-weight: 500;
}

.sheet-body { padding: 3.2mm; }

.sheet section {
  background: white;
  border: 1px solid rgba(185, 167, 121, 0.7);
  border-radius: 12px;
  padding: 3mm;
  margin: 0;
}

.sheet h2 {
  margin: 0 0 2.5mm;
  padding-bottom: 1.5mm;
  color: var(--forest);
  font-size: 1.02em;
  font-weight: 700;
  border-bottom: 2px solid var(--gold);
}

.sheet ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}

.sheet li {
  display: grid;
  grid-template-columns: 6.2mm minmax(0, 1fr);
  gap: 2mm;
  align-items: start;
  margin: 0 0 2.4mm;
  break-inside: avoid;
}

.sheet li:last-child { margin-bottom: 0; }

.sheet li::before {
  counter-increment: step;
  content: counter(step);
  width: 6.2mm;
  height: 6.2mm;
  border-radius: 999px;
  background: var(--forest);
  color: var(--wheat);
  display: grid;
  place-items: center;
  font-size: 0.82em;
  font-weight: 700;
  line-height: 1;
}

.sheet .detail {
  display: block;
  color: var(--ash);
  font-weight: 400;
  font-size: 0.92em;
}

.sheet .outcome {
  margin: 3mm 0 0;
  background: white;
  border: 1px solid var(--gold);
  border-inline-start: 4px solid var(--umber);
  border-radius: 12px;
  padding: 2.5mm 3mm;
  color: #4a151e;
}

.sheet-foot {
  padding: 0 3.5mm 3.5mm;
  text-align: center;
  color: var(--ash);
  font-size: 0.86em;
}

.sheet .when { margin: 0; }

.sheet-cols { display: grid; gap: 3mm; }
.sheet-cols > section { min-width: 0; }

body.paper-a4 .sheet-head { padding: 8mm 8mm 6mm; }
body.paper-a4 .sheet-mark { width: 22mm; height: 22mm; }
body.paper-a4 .sheet-body { padding: 6mm; }
body.paper-a4 .sheet-cols { grid-template-columns: 1fr 1fr; gap: 4mm; }
body.paper-a4 .sheet section { padding: 5mm; }
body.paper-a4 .sheet li { grid-template-columns: 8mm minmax(0, 1fr); }
body.paper-a4 .sheet li::before { width: 8mm; height: 8mm; }
body.paper-a4 .sheet-foot { padding: 0 8mm 7mm; font-size: 0.9em; }

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}

.stat, .panel {
  box-shadow: var(--shadow);
}

.stat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
}

.stat b { display: block; font-size: 32px; color: var(--green-dark); }

.days { display: flex; align-items: end; gap: 8px; height: 140px; }

.day { flex: 1; display: flex; flex-direction: column; justify-content: end; align-items: center; gap: 6px; height: 100%; }

.bar {
  width: 100%;
  background: var(--green);
  border-radius: 8px 8px 0 0;
  min-height: 4px;
}

.day span { font-size: 12px; color: var(--muted); }

.service-stat, .recent {
  display: grid;
  gap: 8px;
  align-items: center;
}

.service-stat {
  grid-template-columns: 1fr auto auto;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.meter { height: 8px; background: #eee; border-radius: 99px; overflow: hidden; margin-top: 6px; }

.meter span { display: block; height: 100%; background: var(--gold); }

.switch { display: flex; align-items: center; gap: 6px; font-size: 14px; }

table { width: 100%; border-collapse: collapse; }

th, td { text-align: right; padding: 8px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }

.toast {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--green-dark);
  color: white;
  border-radius: 999px;
  padding: 10px 16px;
  z-index: 5;
}

.empty { padding: 28px 8px; }

.page-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.action-group, .table-actions, .form-actions, .repeat-head {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.section-title { margin: 0 0 6px; color: var(--green-dark); }

.soft-btn, .danger-btn, .primary-btn, .ghost-btn {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 12px;
  background: white;
  color: var(--ink);
  text-decoration: none;
  font: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.soft-btn:hover, .ghost-btn:hover { border-color: var(--green); }

.primary-btn {
  background: var(--green);
  border-color: var(--green);
  color: white;
  font-weight: 700;
}

.danger-btn {
  background: #fff5f5;
  border-color: #e3b4b4;
  color: #6b1f2a;
}

.ghost-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.manage-list { overflow-x: auto; }

.form-panel { display: grid; gap: 16px; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.field {
  display: grid;
  gap: 6px;
  font-weight: 650;
}

.field input, .field textarea, .repeat-row input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 12px;
  font: inherit;
  background: white;
  color: var(--ink);
}

.field textarea { resize: vertical; min-height: 72px; }

.checkbox-field .switch { font-weight: 500; }

.repeat-block {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  background: #fff;
}

.repeat-block h3 { margin: 0; color: var(--green-dark); }

.repeat-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr auto;
  gap: 8px;
  margin-top: 10px;
  align-items: center;
}

@media (max-width: 980px) {
  body.service-open { display: block; }
  body.service-open #app { display: block; }
  body.service-open #view { padding-inline: 0; }
  #print-column { position: static; margin: 0 auto 28px; width: min(190mm, calc(100% - 24px)); }
  .columns, .stats, .brand { display: block; }
  .nav { margin-top: 12px; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .app-header h1 { font-size: 26px; }
  .page-actions, .form-grid, .repeat-row { display: block; }
  .page-actions > *, .form-grid > *, .repeat-row > * { margin-bottom: 8px; }
  .table-actions { display: flex; flex-wrap: wrap; gap: 6px; }
}

@media print {
  body { display: block !important; background: #fff !important; color: #000 !important; }
  #app, .no-print, .toast { display: none !important; }
  #print-column { display: block !important; position: static; margin: 0; width: auto; }
  .sheet,
  .sheet * {
    color: #000 !important;
    background: #fff !important;
    border-color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
  }
  .sheet img {
    filter: grayscale(1) contrast(1.15) !important;
  }
  .sheet .dur-pill,
  .sheet .badge,
  .sheet .org,
  .sheet .sub,
  .sheet .outcome {
    color: #000 !important;
    background: #fff !important;
    border: 1px solid #000 !important;
  }
  .sheet { border: 0; border-radius: 0; margin: 0; }
  body.paper-a4 .sheet { width: 190mm; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

.center-pick select {
  background: #fff;
  color: var(--green-dark);
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  min-width: 220px;
}