/* ============================================================
   شمس حلب - Shams Halab
   القسمة العادلة — roof map, flat table, neighbour agreement
   Logical properties only — this stylesheet must stay RTL-safe.
   ============================================================ */

/* ── Roof step: the tap-to-mark grid ──────── */
.picker-shell {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  background: var(--muted);
  padding: var(--space-4);
  overflow-x: auto;
}

.picker-grid {
  display: grid;
  gap: 3px;
  margin: 0 auto;
  width: max-content;
  /* The map is geographic, not textual: column 0 is the WEST edge and must
     stay on the left even though the page is RTL. */
  direction: ltr;
}

.picker-cell {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--card);
  cursor: pointer;
  padding: 0;
  font-size: 15px;
  line-height: 1;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.picker-cell.is-blocked {
  background: var(--solar-storm);
  border-color: var(--solar-storm);
  color: #FFFFFF;
}

.picker-compass {
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--muted-foreground);
  margin-bottom: var(--space-2);
}

.picker-compass-south {
  margin-block-start: var(--space-2);
  margin-block-end: 0;
}

.obstacle-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.obstacle-tool {
  min-height: var(--hit);
  padding: var(--space-2) var(--space-4);
  border: 2px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--card);
  font-family: var(--font-arabic);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--foreground);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.obstacle-tool.is-active {
  background: var(--solar-dark);
  border-color: var(--solar-dark);
  color: #FFFFFF;
}

/* ── Neighbour-building side picker ───────── */
.side-picker {
  display: grid;
  grid-template-areas:
    ".    north ."
    "west plan  east"
    ".    south .";
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: var(--space-2);
  max-width: 340px;
  margin: 0 auto;
}

.side-btn {
  min-height: var(--hit);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  font-family: var(--font-arabic);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--foreground);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.side-btn.is-active {
  background: var(--solar-dark);
  border-color: var(--solar-dark);
  color: #FFFFFF;
}

.side-btn[data-side="north"] { grid-area: north; }
.side-btn[data-side="south"] { grid-area: south; }
.side-btn[data-side="east"]  { grid-area: east; }
.side-btn[data-side="west"]  { grid-area: west; }

.side-plan {
  grid-area: plan;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--primary);
  border-radius: var(--radius-sm);
  background: #FEF3C7;
  color: var(--solar-orange-dark);
  font-size: var(--text-sm);
  font-weight: 700;
  min-height: var(--hit);
}

/* ── Roof map ─────────────────────────────── */
.roof-map {
  overflow-x: auto;
  padding: var(--space-4);
  background: var(--muted);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.roof-svg {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  min-width: 280px;
}

.roof-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
}

.legend-swatch {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  flex: 0 0 auto;
}

/* ── Fairness meter ───────────────────────── */
.fairness-box {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius);
  background: #DCFCE7;
  color: #15803D;
  margin-bottom: var(--space-6);
}

.fairness-box.is-warning {
  background: #FEF9C3;
  color: #A16207;
}

.fairness-box.is-bad {
  background: #FEE2E2;
  color: #991B1B;
}

.fairness-score {
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: 1;
  flex: 0 0 auto;
}

.fairness-text {
  font-size: var(--text-sm);
  line-height: 1.7;
}

.fairness-verdict {
  font-size: var(--text-lg);
  font-weight: 700;
  display: block;
}

/* ── Shortage warning ─────────────────────── */
.shortage-note {
  background: #FEE2E2;
  border: 1px solid #FECACA;
  color: #991B1B;
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.8;
  margin-bottom: var(--space-5);
}

/* ── Home page promo card ─────────────────── */
.qisma-promo {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  /* This was a saturated blue gradient slab, on a site whose whole palette
     is warm sand and burnt orange. It read as a banner ad someone had
     pasted into the page. It is a card now, like everything else here —
     the icon and the arrow carry the invitation. */
  background: var(--app-card);
  border: var(--hairline);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--lift-1);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.qisma-promo:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: var(--lift-2);
}

.qisma-promo-icon {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  background: var(--tile);
  color: var(--app-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.qisma-promo-title {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: 4px;
}

.qisma-promo-desc {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  line-height: 1.7;
}

/* ── Mobile ───────────────────────────────── */
@media (max-width: 768px) {
  .flat-row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .picker-cell,
  .obstacle-tool,
  .side-btn,
  .method-card,
  .qisma-promo {
    transition: none;
  }

  .qisma-promo:hover {
    transform: none;
  }

  .fairness-box {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
}

/* ── Print: the agreement is the document ─── */
@media print {
  body {
    background: #FFFFFF;
  }

  .navbar,
  .footer,
  .hero,
  .qisma-intro,
  .no-print {
    display: none !important;
  }

  .card,
  .agreement {
    border: 1px solid #999;
    box-shadow: none;
    padding: 12px;
  }

  .roof-map {
    background: #FFFFFF;
    border: 1px solid #999;
    break-inside: avoid;
  }

  .agreement-signs {
    break-inside: avoid;
  }

  /* A horizontally scrolling container prints as a clipped window — the table
     inside it comes out blank. On paper it must simply lay itself out. */
  .table-container {
    overflow: visible !important;
  }

  .alloc-table {
    width: 100%;
    font-size: 11px;
  }

  .alloc-table th,
  .alloc-table td {
    padding: 4px 6px;
  }

  .alloc-table td:first-child,
  .alloc-table th:first-child {
    min-width: 0;
  }

  .section {
    padding: 0 !important;
  }

  a[href]::after {
    content: "";
  }
}